diff --git a/.prettierignore b/.prettierignore index 67dd11f961..7e411d289a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,7 @@ # Build files **/dist **/build +**/.build packages/**/types/* packages/**/esm/* packages/**/cjs/* @@ -72,8 +73,9 @@ makefile # GitHub CODEOWNERS -# variable-scss exporter example mock test files -exporters/variables-scss/tests/fixtures/*.scss +# Unformatted fixtures +**/{fixtures}/**/unformatted* +**/__fixtures__/unformatted* # variable-scss exporter generated cjs exporters/variables-scss/generated/**/*.cjs diff --git a/exporters/variables-scss/.eslintignore b/exporters/variables-scss/.eslintignore index 01a6927ac6..0cc9750654 100644 --- a/exporters/variables-scss/.eslintignore +++ b/exporters/variables-scss/.eslintignore @@ -1,2 +1,6 @@ # Generated files used by Supernova generated + +# Unformatted fixtures +**/{fixtures}/**/unformatted* +**/__fixtures__/unformatted* diff --git a/exporters/variables-scss/generated/exporter.cjs b/exporters/variables-scss/generated/exporter.cjs index 97b2fbc0d3..4f5ae1374e 100644 --- a/exporters/variables-scss/generated/exporter.cjs +++ b/exporters/variables-scss/generated/exporter.cjs @@ -1,26 +1,53 @@ -"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function $e(a){if(a.__esModule)return a;var c=a.default;if(typeof c=="function"){var p=function n(){return this instanceof n?Reflect.construct(c,arguments,this.constructor):c.apply(this,arguments)};p.prototype=c.prototype}else p={};return Object.defineProperty(p,"__esModule",{value:!0}),Object.keys(a).forEach(function(n){var T=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(p,n,T.get?T:{enumerable:!0,get:function(){return a[n]}})}),p}var _={},ve={},_e;function We(){return _e||(_e=1,function(a){(()=>{var c={9932:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.docsImageRefToUrl=t.DocsImageRefType=void 0,function(e){e.resource="Resource",e.figmaNode="FigmaNode"}(o||(t.DocsImageRefType=o={})),t.docsImageRefToUrl=function(e,i,y){var l;if(e)switch(e.type){case o.resource:return(l=e.resource)===null||l===void 0?void 0:l.url;case o.figmaNode:return!e.figmaNode||!e.figmaNode.sourceId||!e.figmaNode.frameReferenceId?void 0:i.resources.getFigmaFrameHostedUrl({designSystemId:y.dsId,versionId:y.versionId},e.figmaNode.frameReferenceId);default:return}}},5673:(r,t)=>{var o;function e(i){switch(i.type){case o.documentationItem:return`@page:${i.documentationItemId}`;case o.pageHeading:return`@page:${i.documentationItemId}#${i.pageHeadingId}`;case o.url:return i.url;default:return}}Object.defineProperty(t,"__esModule",{value:!0}),t.linkAttributeToDocsLink=t.docsLinkToLinkAttributes=t.docsLinkToUrl=t.DocsLinkRefType=void 0,function(i){i.documentationItem="DocumentationItem",i.pageHeading="PageHeading",i.url="Url"}(o||(t.DocsLinkRefType=o={})),t.docsLinkToUrl=e,t.docsLinkToLinkAttributes=function(i){const y=e(i);if(y)return{href:y,target:i.openInNewTab?"_blank":"_self"}},t.linkAttributeToDocsLink=function(i,y){if(!i)return;const l=y==="_blank";if(i.startsWith("@page:")){if(i.includes("#")){const[u,s]=i.replace("@page:","").split("#");return{type:o.pageHeading,documentationItemId:u,pageHeadingId:s,openInNewTab:l}}return{type:o.documentationItem,documentationItemId:i.replace("@page:",""),openInNewTab:l}}return{type:o.url,url:i,openInNewTab:l}}},2657:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockShortcut=t.DocumentationLegacyPageBlockShortcutType=void 0,function(e){e.external="External",e.internal="Internal"}(o||(t.DocumentationLegacyPageBlockShortcutType=o={})),t.DocumentationLegacyPageBlockShortcut=class{constructor(e){var i;e.url?this.type=o.external:this.type=o.internal,this.title=this.shortcutTitleFromModel(e,this.type),this.description=this.shortcutDescriptionFromModel(e,this.type),this.previewUrl=this.shortcutPreviewUrlFromModel(e),this.type===o.internal&&(!((i=e.documentationItemPreview)===null||i===void 0)&&i.valid)&&e.documentationItemId?this.internalId=e.documentationItemId:(this.internalId=null,this.type===o.external&&e.url?this.externalUrl=e.url:this.externalUrl=null)}shortcutTitleFromModel(e,i){var y,l,u,s,d;let f=null;return e.title&&e.title.trim().length>0?f=e.title:i===o.internal?f=(l=(y=e.documentationItemPreview)===null||y===void 0?void 0:y.title)!==null&&l!==void 0?l:null:i===o.external&&(f=(d=(s=(u=e.urlPreview)===null||u===void 0?void 0:u.title)!==null&&s!==void 0?s:e.url)!==null&&d!==void 0?d:null),f&&f.trim().length!==0?f:null}shortcutDescriptionFromModel(e,i){var y;let l=null;return e.description&&e.description.trim().length>0?l=e.description:i===o.external&&(l=(y=e.urlPreview)===null||y===void 0?void 0:y.description),l&&l.trim().length!==0?l:null}shortcutPreviewUrlFromModel(e){var i,y,l,u,s;return(s=(l=(i=e.assetUrl)!==null&&i!==void 0?i:(y=e.asset)===null||y===void 0?void 0:y.url)!==null&&l!==void 0?l:(u=e.urlPreview)===null||u===void 0?void 0:u.thumbnailUrl)!==null&&s!==void 0?s:null}}},7476:(r,t)=>{var o,e;Object.defineProperty(t,"__esModule",{value:!0}),t.TextAlignment=t.Alignment=void 0,function(i){i.left="Left",i.center="Center",i.stretch="Stretch"}(o||(t.Alignment=o={})),function(i){i.left="Left",i.center="Center",i.right="Right"}(e||(t.TextAlignment=e={}))},8738:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetFormat=void 0,function(e){e.png="png",e.pdf="pdf",e.svg="svg"}(o||(t.AssetFormat=o={}))},915:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetScale=void 0,function(e){e.x1="x1",e.x2="x2",e.x3="x3",e.x4="x4"}(o||(t.AssetScale=o={}))},899:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetScaleType=void 0,function(e){e.aspectFill="AspectFill",e.aspectFit="AspectFit"}(o||(t.AssetScaleType=o={}))},6192:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.BlurType=void 0,function(e){e.layer="Layer",e.background="Background"}(o||(t.BlurType=o={}))},1160:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ALL_BORDER_POSITIONS=t.BorderPosition=void 0,function(e){e.inside="Inside",e.center="Center",e.outside="Outside"}(o||(t.BorderPosition=o={})),t.ALL_BORDER_POSITIONS=[o.inside,o.center,o.outside]},4546:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ALL_BORDER_STYLES=t.BorderStyle=void 0,function(e){e.dashed="Dashed",e.dotted="Dotted",e.solid="Solid",e.groove="Groove"}(o||(t.BorderStyle=o={})),t.ALL_BORDER_STYLES=[o.dashed,o.dotted,o.solid,o.groove]},8042:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ImportWarningType=void 0,function(e){e.UnsupportedFill="UnsupportedFill",e.UnsupportedStroke="UnsupportedStroke",e.UnsupportedEffect="UnsupportedEffect",e.StyleNotApplied="StyleNotApplied",e.NoPublishedStyles="NoPublishedStyles",e.NoPublishedComponents="NoPublishedComponents",e.NoPublishedAssets="NoPublishedAssets",e.NoVersionFound="NoVersionFound",e.ComponentHasNoThumbnail="ComponentHasNoThumbnail",e.DuplicateImportedStyleId="DuplicateImportedStyleId",e.DuplicateImportedStylePath="DuplicateImportedStylePath",e.NoPublishedElements="NoPublishedElements",e.NoUnpublishedStyles="NoUnpublishedStyles"}(o||(t.ImportWarningType=o={}))},5695:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.CustomDomainErrorCode=void 0,function(e){e.generalError="GeneralError",e.dnsNotConfigured="DNSNotConfigured",e.maintenance="Maintenance"}(o||(t.CustomDomainErrorCode=o={}))},7737:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.CustomDomainState=void 0,function(e){e.initial="Initial",e.domainSetupInProgress="DomainSetupInProgress",e.domainSetupFailed="DomainSetupFailed",e.domainSetupsSucces="DomainSetupSuccess",e.sslSetupInProgress="SSLSetupInProgress",e.sslSetupFailed="SSLSetupFailed",e.sslSetupSuccess="SSLSetupSuccess"}(o||(t.CustomDomainState=o={}))},5651:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockBehaviorDataType=void 0,function(e){e.item="Item",e.token="Token",e.asset="Asset",e.component="Component",e.figmaNode="FigmaNode",e.figmaComponent="FigmaComponent"}(o||(t.DocsBlockBehaviorDataType=o={}))},3733:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockBehaviorSelectionType=void 0,function(e){e.entity="Entity",e.group="Group",e.entityAndGroup="EntityAndGroup"}(o||(t.DocsBlockBehaviorSelectionType=o={}))},8890:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockImagePropertyAspectRatio=void 0,function(e){e.auto="Auto",e.square="Square",e.landscape="Landscape",e.portrait="Portrait",e.wide="Wide"}(o||(t.DocsBlockImagePropertyAspectRatio=o={}))},9377:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemEntityType=void 0,function(e){e.token="Token",e.tokenGroup="TokenGroup",e.asset="Asset",e.assetGroup="AssetGroup",e.component="Component",e.componentGroup="ComponentGroup"}(o||(t.DocsBlockItemEntityType=o={}))},5883:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyOptionRenderingStyle=void 0,function(e){e.segmentedControl="SegmentedControl",e.toggleButton="ToggleButton",e.select="Select",e.checkbox="Checkbox"}(o||(t.DocsBlockItemPropertyOptionRenderingStyle=o={}))},8061:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyRichTextStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.quote="Quote",e.callout="Callout",e.ol="OL",e.ul="UL"}(o||(t.DocsBlockItemPropertyRichTextStyle=o={}))},7479:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyTextStyle=void 0,function(e){e.small="Small",e.regular="Regular",e.bold="Bold"}(o||(t.DocsBlockItemPropertyTextStyle=o={}))},6839:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyType=void 0,function(e){e.richText="RichText",e.multiRichText="MultiRichText",e.text="Text",e.boolean="Boolean",e.number="Number",e.singleSelect="SingleSelect",e.multiSelect="MultiSelect",e.image="Image",e.token="Token",e.tokenType="TokenType",e.tokenProperty="TokenProperty",e.component="Component",e.componentProperty="ComponentProperty",e.asset="Asset",e.assetProperty="AssetProperty",e.embedURL="EmbedURL",e.url="URL",e.markdown="Markdown",e.code="Code",e.codeSandbox="CodeSandbox",e.table="Table",e.divider="Divider",e.storybook="Storybook",e.color="Color",e.figmaNode="FigmaNode",e.figmaComponent="FigmaComponent"}(o||(t.DocsBlockItemPropertyType=o={}))},8095:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemVariantLayoutType=void 0,function(e){e.column="Column",e.row="Row"}(o||(t.DocsBlockItemVariantLayoutType=o={}))},7291:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemVariantLayoutWidth=void 0,function(e){e.c1="1",e.c2="2",e.c3="3",e.c4="4",e.c5="5",e.c6="6",e.c7="7",e.c8="8",e.c9="9",e.c10="10",e.c11="11",e.c12="12"}(o||(t.DocsBlockItemVariantLayoutWidth=o={}))},5963:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockOptionRenderingStyle=void 0,function(e){e.segmentedControl="SegmentedControl",e.toggleButton="ToggleButton",e.select="Select",e.checkbox="Checkbox"}(o||(t.DocsBlockOptionRenderingStyle=o={}))},6644:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockRichTextPropertyStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.quote="Quote",e.callout="Callout",e.default="Default"}(o||(t.DocsBlockRichTextPropertyStyle=o={}))},306:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockTextPropertyStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.default="Default",e.defaultBold="DefaultBold",e.defaultSemibold="DefaultSemibold",e.small="Small",e.smallBold="SmallBold",e.smallSemibold="SmallSemibold",e.custom="Custom"}(o||(t.DocsBlockTextPropertyStyle=o={}))},4068:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsEntityGroupBehavior=void 0,function(e){e.group="Group",e.tabs="Tabs"}(o||(t.DocsEntityGroupBehavior=o={}))},1233:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsEntityType=void 0,function(e){e.group="Group",e.page="Page"}(o||(t.DocsEntityType=o={}))},7971:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsSectionType=void 0,function(e){e.plain="Plain",e.tabs="Tabs"}(o||(t.DocsSectionType=o={}))},5102:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyCalloutType=void 0,function(e){e.info="Info",e.success="Success",e.warning="Warning",e.error="Error"}(o||(t.DocumentationLegacyCalloutType=o={}))},2123:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyGroupBehavior=void 0,function(e){e.group="Group",e.tabs="Tabs"}(o||(t.DocumentationLegacyGroupBehavior=o={}))},9896:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyHeadingType=void 0,function(e){e[e.h1=1]="h1",e[e.h2=2]="h2",e[e.h3=3]="h3"}(o||(t.DocumentationLegacyHeadingType=o={}))},7379:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyItemType=void 0,function(e){e.group="Group",e.page="Page"}(o||(t.DocumentationLegacyItemType=o={}))},1423:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageAssetType=void 0,function(e){e.image="image",e.figmaFrame="figmaFrame"}(o||(t.DocumentationLegacyPageAssetType=o={}))},1601:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockThemeType=void 0,function(e){e.override="Override",e.comparison="Comparison"}(o||(t.DocumentationLegacyPageBlockThemeType=o={}))},1846:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockType=void 0,function(e){e.text="Text",e.heading="Heading",e.code="Code",e.unorderedList="UnorderedList",e.orderedList="OrderedList",e.quote="Quote",e.callout="Callout",e.divider="Divider",e.image="Image",e.token="Token",e.tokenList="TokenList",e.tokenGroup="TokenGroup",e.shortcuts="Shortcuts",e.link="Link",e.figmaEmbed="FigmaEmbed",e.youtubeEmbed="YoutubeEmbed",e.storybookEmbed="StorybookEmbed",e.genericEmbed="Embed",e.figmaFrames="FigmaFrames",e.custom="Custom",e.renderCode="RenderCode",e.componentAssets="ComponentAssets",e.column="Column",e.columnItem="ColumnItem",e.tabs="Tabs",e.tabItem="TabItem",e.table="Table",e.tableCell="TableCell",e.tableRow="TableRow"}(o||(t.DocumentationLegacyPageBlockType=o={}))},1255:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.FrameAlignment=void 0,function(e){e.frameHeight="FrameHeight",e.center="Center"}(o||(t.FrameAlignment=o={}))},3718:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.FrameLayout=void 0,function(e){e.c8="C8",e.c7="C7",e.c6="C6",e.c5="C5",e.c4="C4",e.c3="C3",e.c2="C2",e.c1="C1",e.c175="C1_75"}(o||(t.FrameLayout=o={}))},1:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.GradientType=void 0,function(e){e.linear="Linear",e.radial="Radial",e.angular="Angular"}(o||(t.GradientType=o={}))},2674:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.RichTextSpanAttributeType=void 0,function(e){e.bold="Bold",e.italic="Italic",e.link="Link",e.strikethrough="Strikethrough",e.code="Code"}(o||(t.RichTextSpanAttributeType=o={}))},9125:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ShadowType=void 0,function(e){e.drop="Drop",e.inner="Inner"}(o||(t.ShadowType=o={}))},4652:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.SourceType=void 0,function(e){e.figma="Figma",e.tokenStudio="TokenStudio",e.figmaVariablesPlugin="FigmaVariablesPlugin"}(o||(t.SourceType=o={}))},922:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.TextCase=void 0,function(e){e.original="Original",e.upper="Upper",e.lower="Lower",e.camel="Camel",e.smallCaps="SmallCaps"}(o||(t.TextCase=o={}))},7040:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.TextDecoration=void 0,function(e){e.original="None",e.underline="Underline",e.strikethrough="Strikethrough"}(o||(t.TextDecoration=o={}))},3788:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DT_TOKEN_TYPES=t.tokenTypeIsReferencable=t.REFERENCABLE_TOKEN_TYPES=t.REPLACABLE_TOKEN_TYPES=t.tokenTypeIsNonPure=t.tokenTypeIsPure=t.PURE_TOKEN_TYPES=t.ALL_TOKEN_TYPES=t.MS_DIMENSION_TOKEN_TYPES=t.RAW_DIMENSION_TOKEN_TYPES=t.DIMENSION_TOKEN_TYPES=t.OPTION_TOKEN_TYPES=t.STRING_TOKEN_TYPES=t.TokenType=void 0,function(e){e.color="Color",e.typography="Typography",e.shadow="Shadow",e.border="Border",e.gradient="Gradient",e.blur="Blur",e.radius="BorderRadius",e.borderWidth="BorderWidth",e.duration="Duration",e.fontSize="FontSize",e.dimension="Dimension",e.letterSpacing="LetterSpacing",e.lineHeight="LineHeight",e.opacity="Opacity",e.paragraphSpacing="ParagraphSpacing",e.size="Size",e.space="Space",e.zIndex="ZIndex",e.textDecoration="TextDecoration",e.textCase="TextCase",e.visibility="Visibility",e.fontFamily="FontFamily",e.fontWeight="FontWeight",e.string="String",e.productCopy="ProductCopy"}(o||(t.TokenType=o={})),t.STRING_TOKEN_TYPES=[o.string,o.productCopy,o.fontFamily,o.fontWeight],t.OPTION_TOKEN_TYPES=[o.textCase,o.textDecoration,o.visibility],t.DIMENSION_TOKEN_TYPES=[o.dimension,o.size,o.space,o.opacity,o.fontSize,o.lineHeight,o.letterSpacing,o.paragraphSpacing,o.borderWidth,o.radius,o.duration,o.zIndex],t.RAW_DIMENSION_TOKEN_TYPES=[o.opacity,o.zIndex],t.MS_DIMENSION_TOKEN_TYPES=[o.duration],t.ALL_TOKEN_TYPES=[...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES,o.color,o.gradient,o.border,o.radius,o.shadow,o.typography,o.blur],t.PURE_TOKEN_TYPES=[...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES],t.tokenTypeIsPure=e=>t.PURE_TOKEN_TYPES.includes(e),t.tokenTypeIsNonPure=e=>!(0,t.tokenTypeIsPure)(e),t.REPLACABLE_TOKEN_TYPES=[o.color,...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES],t.REFERENCABLE_TOKEN_TYPES=[o.color,...t.DIMENSION_TOKEN_TYPES,o.fontFamily,o.fontWeight,o.textCase,o.textDecoration],t.tokenTypeIsReferencable=e=>t.REFERENCABLE_TOKEN_TYPES.includes(e),t.DT_TOKEN_TYPES=[o.color,o.shadow,o.gradient,o.typography,o.border,...t.DIMENSION_TOKEN_TYPES,o.fontFamily,o.fontWeight,...t.OPTION_TOKEN_TYPES]},8607:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.MS_UNITS=t.PX_UNITS=t.RAW_UNITS=t.LINE_HEIGHT_UNITS=t.SIZE_UNITS=t.Unit=void 0,function(e){e.pixels="Pixels",e.percent="Percent",e.rem="Rem",e.ms="Ms",e.raw="Raw"}(o||(t.Unit=o={})),t.SIZE_UNITS=[o.pixels,o.percent,o.rem],t.LINE_HEIGHT_UNITS=[o.pixels,o.percent,o.rem,o.raw],t.RAW_UNITS=[o.raw],t.PX_UNITS=[o.pixels],t.MS_UNITS=[o.ms]},9478:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.UserRole=void 0,function(e){e.owner="Owner",e.admin="Admin",e.creator="Creator",e.billing="Billing",e.viewer="Viewer"}(o||(t.UserRole=o={}))},6141:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.VisibilityType=void 0,function(e){e.visible="Visible",e.hidden="Hidden"}(o||(t.VisibilityType=o={}))},6298:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceNPMRegistryAuthType=void 0,function(e){e.basic="Basic",e.bearer="Bearer"}(o||(t.WorkspaceNPMRegistryAuthType=o={}))},7968:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceNPMRegistryType=void 0,function(e){e.npmJS="NPMJS",e.gitHub="GitHub",e.azureDevOps="AzureDevOps",e.artifactory="Artifactory",e.custom="Custom"}(o||(t.WorkspaceNPMRegistryType=o={}))},5503:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionPlanInterval=void 0,function(e){e.yearly="yearly",e.monthly="monthly"}(o||(t.WorkspaceSubscriptionPlanInterval=o={}))},4290:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionProductCode=void 0,function(e){e.free="free",e.team="team",e.teamTest="team_test",e.company="company",e.enterprise="enterprise"}(o||(t.WorkspaceSubscriptionProductCode=o={}))},3607:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionStatus=void 0,function(e){e.active="active",e.gracePeriod="gracePeriod",e.cancelled="cancelled",e.suspended="suspended"}(o||(t.WorkspaceSubscriptionStatus=o={}))},2802:(r,t)=>{var o,e;Object.defineProperty(t,"__esModule",{value:!0}),t.PulsarExecutor=t.OutputFileType=void 0,function(i){i.copyRemoteUrl="copyRemoteUrl",i.text="text",i.binary="binary"}(o||(t.OutputFileType=o={})),function(i){i.supernova="supernova",i.local="local"}(e||(t.PulsarExecutor=e={}))}},p={};function n(r){var t=p[r];if(t!==void 0)return t.exports;var o=p[r]={exports:{}};return c[r](o,o.exports,n),o.exports}var T={};(()=>{var r=T;Object.defineProperty(r,"__esModule",{value:!0}),r.UserRole=r.Unit=r.TokenType=r.TextDecoration=r.TextCase=r.ShadowType=r.RichTextSpanAttributeType=r.GradientType=r.FrameLayout=r.FrameAlignment=r.SourceType=r.DocsImageRefType=r.DocsLinkRefType=r.DocsSectionType=r.DocsEntityType=r.DocsEntityGroupBehavior=r.DocsBlockTextPropertyStyle=r.DocsBlockRichTextPropertyStyle=r.DocsBlockOptionRenderingStyle=r.DocsBlockItemVariantLayoutWidth=r.DocsBlockItemVariantLayoutType=r.DocsBlockItemPropertyType=r.DocsBlockItemPropertyTextStyle=r.DocsBlockItemPropertyRichTextStyle=r.DocsBlockItemPropertyOptionRenderingStyle=r.DocsBlockItemEntityType=r.DocsBlockImagePropertyAspectRatio=r.DocsBlockBehaviorSelectionType=r.DocsBlockBehaviorDataType=r.DocumentationLegacyPageBlockShortcutType=r.DocumentationLegacyPageBlockThemeType=r.DocumentationLegacyPageBlockType=r.DocumentationLegacyPageAssetType=r.DocumentationLegacyItemType=r.DocumentationLegacyHeadingType=r.DocumentationLegacyGroupBehavior=r.DocumentationLegacyCalloutType=r.BorderStyle=r.BorderPosition=r.BlurType=r.AssetScaleType=r.AssetScale=r.AssetFormat=r.Alignment=r.ALL_TOKEN_TYPES=r.ALL_BORDER_STYLES=r.ALL_BORDER_POSITIONS=r.OPTION_TOKEN_TYPES=r.STRING_TOKEN_TYPES=r.DIMENSION_TOKEN_TYPES=void 0,r.PulsarExecutor=r.OutputFileType=r.CustomDomainState=r.CustomDomainErrorCode=r.ImportWarningType=r.WorkspaceNPMRegistryType=r.WorkspaceNPMRegistryAuthType=r.WorkspaceSubscriptionStatus=r.WorkspaceSubscriptionProductCode=r.WorkspaceSubscriptionPlanInterval=r.VisibilityType=void 0;var t=n(3788);Object.defineProperty(r,"DIMENSION_TOKEN_TYPES",{enumerable:!0,get:function(){return t.DIMENSION_TOKEN_TYPES}}),Object.defineProperty(r,"STRING_TOKEN_TYPES",{enumerable:!0,get:function(){return t.STRING_TOKEN_TYPES}}),Object.defineProperty(r,"OPTION_TOKEN_TYPES",{enumerable:!0,get:function(){return t.OPTION_TOKEN_TYPES}});var o=n(1160);Object.defineProperty(r,"ALL_BORDER_POSITIONS",{enumerable:!0,get:function(){return o.ALL_BORDER_POSITIONS}});var e=n(4546);Object.defineProperty(r,"ALL_BORDER_STYLES",{enumerable:!0,get:function(){return e.ALL_BORDER_STYLES}});var i=n(3788);Object.defineProperty(r,"ALL_TOKEN_TYPES",{enumerable:!0,get:function(){return i.ALL_TOKEN_TYPES}});var y=n(7476);Object.defineProperty(r,"Alignment",{enumerable:!0,get:function(){return y.Alignment}});var l=n(8738);Object.defineProperty(r,"AssetFormat",{enumerable:!0,get:function(){return l.AssetFormat}});var u=n(915);Object.defineProperty(r,"AssetScale",{enumerable:!0,get:function(){return u.AssetScale}});var s=n(899);Object.defineProperty(r,"AssetScaleType",{enumerable:!0,get:function(){return s.AssetScaleType}});var d=n(6192);Object.defineProperty(r,"BlurType",{enumerable:!0,get:function(){return d.BlurType}});var f=n(1160);Object.defineProperty(r,"BorderPosition",{enumerable:!0,get:function(){return f.BorderPosition}});var b=n(4546);Object.defineProperty(r,"BorderStyle",{enumerable:!0,get:function(){return b.BorderStyle}});var S=n(5102);Object.defineProperty(r,"DocumentationLegacyCalloutType",{enumerable:!0,get:function(){return S.DocumentationLegacyCalloutType}});var v=n(2123);Object.defineProperty(r,"DocumentationLegacyGroupBehavior",{enumerable:!0,get:function(){return v.DocumentationLegacyGroupBehavior}});var h=n(9896);Object.defineProperty(r,"DocumentationLegacyHeadingType",{enumerable:!0,get:function(){return h.DocumentationLegacyHeadingType}});var k=n(7379);Object.defineProperty(r,"DocumentationLegacyItemType",{enumerable:!0,get:function(){return k.DocumentationLegacyItemType}});var D=n(1423);Object.defineProperty(r,"DocumentationLegacyPageAssetType",{enumerable:!0,get:function(){return D.DocumentationLegacyPageAssetType}});var C=n(1846);Object.defineProperty(r,"DocumentationLegacyPageBlockType",{enumerable:!0,get:function(){return C.DocumentationLegacyPageBlockType}});var L=n(1601);Object.defineProperty(r,"DocumentationLegacyPageBlockThemeType",{enumerable:!0,get:function(){return L.DocumentationLegacyPageBlockThemeType}});var x=n(2657);Object.defineProperty(r,"DocumentationLegacyPageBlockShortcutType",{enumerable:!0,get:function(){return x.DocumentationLegacyPageBlockShortcutType}});var A=n(5651);Object.defineProperty(r,"DocsBlockBehaviorDataType",{enumerable:!0,get:function(){return A.DocsBlockBehaviorDataType}});var M=n(3733);Object.defineProperty(r,"DocsBlockBehaviorSelectionType",{enumerable:!0,get:function(){return M.DocsBlockBehaviorSelectionType}});var F=n(8890);Object.defineProperty(r,"DocsBlockImagePropertyAspectRatio",{enumerable:!0,get:function(){return F.DocsBlockImagePropertyAspectRatio}});var w=n(9377);Object.defineProperty(r,"DocsBlockItemEntityType",{enumerable:!0,get:function(){return w.DocsBlockItemEntityType}});var H=n(5883);Object.defineProperty(r,"DocsBlockItemPropertyOptionRenderingStyle",{enumerable:!0,get:function(){return H.DocsBlockItemPropertyOptionRenderingStyle}});var U=n(8061);Object.defineProperty(r,"DocsBlockItemPropertyRichTextStyle",{enumerable:!0,get:function(){return U.DocsBlockItemPropertyRichTextStyle}});var $=n(7479);Object.defineProperty(r,"DocsBlockItemPropertyTextStyle",{enumerable:!0,get:function(){return $.DocsBlockItemPropertyTextStyle}});var W=n(6839);Object.defineProperty(r,"DocsBlockItemPropertyType",{enumerable:!0,get:function(){return W.DocsBlockItemPropertyType}});var V=n(8095);Object.defineProperty(r,"DocsBlockItemVariantLayoutType",{enumerable:!0,get:function(){return V.DocsBlockItemVariantLayoutType}});var G=n(7291);Object.defineProperty(r,"DocsBlockItemVariantLayoutWidth",{enumerable:!0,get:function(){return G.DocsBlockItemVariantLayoutWidth}});var Y=n(5963);Object.defineProperty(r,"DocsBlockOptionRenderingStyle",{enumerable:!0,get:function(){return Y.DocsBlockOptionRenderingStyle}});var K=n(6644);Object.defineProperty(r,"DocsBlockRichTextPropertyStyle",{enumerable:!0,get:function(){return K.DocsBlockRichTextPropertyStyle}});var z=n(306);Object.defineProperty(r,"DocsBlockTextPropertyStyle",{enumerable:!0,get:function(){return z.DocsBlockTextPropertyStyle}});var q=n(4068);Object.defineProperty(r,"DocsEntityGroupBehavior",{enumerable:!0,get:function(){return q.DocsEntityGroupBehavior}});var Z=n(1233);Object.defineProperty(r,"DocsEntityType",{enumerable:!0,get:function(){return Z.DocsEntityType}});var X=n(7971);Object.defineProperty(r,"DocsSectionType",{enumerable:!0,get:function(){return X.DocsSectionType}});var J=n(5673);Object.defineProperty(r,"DocsLinkRefType",{enumerable:!0,get:function(){return J.DocsLinkRefType}});var Q=n(9932);Object.defineProperty(r,"DocsImageRefType",{enumerable:!0,get:function(){return Q.DocsImageRefType}});var ee=n(4652);Object.defineProperty(r,"SourceType",{enumerable:!0,get:function(){return ee.SourceType}});var te=n(1255);Object.defineProperty(r,"FrameAlignment",{enumerable:!0,get:function(){return te.FrameAlignment}});var oe=n(3718);Object.defineProperty(r,"FrameLayout",{enumerable:!0,get:function(){return oe.FrameLayout}});var re=n(1);Object.defineProperty(r,"GradientType",{enumerable:!0,get:function(){return re.GradientType}});var ne=n(2674);Object.defineProperty(r,"RichTextSpanAttributeType",{enumerable:!0,get:function(){return ne.RichTextSpanAttributeType}});var ae=n(9125);Object.defineProperty(r,"ShadowType",{enumerable:!0,get:function(){return ae.ShadowType}});var ie=n(922);Object.defineProperty(r,"TextCase",{enumerable:!0,get:function(){return ie.TextCase}});var ce=n(7040);Object.defineProperty(r,"TextDecoration",{enumerable:!0,get:function(){return ce.TextDecoration}});var le=n(3788);Object.defineProperty(r,"TokenType",{enumerable:!0,get:function(){return le.TokenType}});var se=n(8607);Object.defineProperty(r,"Unit",{enumerable:!0,get:function(){return se.Unit}});var ue=n(9478);Object.defineProperty(r,"UserRole",{enumerable:!0,get:function(){return ue.UserRole}});var pe=n(6141);Object.defineProperty(r,"VisibilityType",{enumerable:!0,get:function(){return pe.VisibilityType}});var de=n(5503);Object.defineProperty(r,"WorkspaceSubscriptionPlanInterval",{enumerable:!0,get:function(){return de.WorkspaceSubscriptionPlanInterval}});var ye=n(4290);Object.defineProperty(r,"WorkspaceSubscriptionProductCode",{enumerable:!0,get:function(){return ye.WorkspaceSubscriptionProductCode}});var Te=n(3607);Object.defineProperty(r,"WorkspaceSubscriptionStatus",{enumerable:!0,get:function(){return Te.WorkspaceSubscriptionStatus}});var me=n(6298);Object.defineProperty(r,"WorkspaceNPMRegistryAuthType",{enumerable:!0,get:function(){return me.WorkspaceNPMRegistryAuthType}});var fe=n(7968);Object.defineProperty(r,"WorkspaceNPMRegistryType",{enumerable:!0,get:function(){return fe.WorkspaceNPMRegistryType}});var ge=n(8042);Object.defineProperty(r,"ImportWarningType",{enumerable:!0,get:function(){return ge.ImportWarningType}});var be=n(5695);Object.defineProperty(r,"CustomDomainErrorCode",{enumerable:!0,get:function(){return be.CustomDomainErrorCode}});var Se=n(7737);Object.defineProperty(r,"CustomDomainState",{enumerable:!0,get:function(){return Se.CustomDomainState}});var R=n(2802);Object.defineProperty(r,"OutputFileType",{enumerable:!0,get:function(){return R.OutputFileType}}),Object.defineProperty(r,"PulsarExecutor",{enumerable:!0,get:function(){return R.PulsarExecutor}})})();var m=a;for(var g in T)m[g]=T[g];T.__esModule&&Object.defineProperty(m,"__esModule",{value:!0})})()}(ve)),ve}var O=function(){return O=Object.assign||function(c){for(var p,n=1,T=arguments.length;n0&&p>="0"&&p<="9"?"_"+p+n:""+p.toUpperCase()+n}function Ne(a){return a.charAt(0).toUpperCase()+a.slice(1).toLowerCase()}function Re(a,c){return c===void 0&&(c={}),E(a,O({delimiter:"",transform:he},c))}function Be(a,c){return c===0?a.toLowerCase():he(a,c)}function Ke(a,c){return c===0?a.toLowerCase():Ne(a)}function ze(a,c){return c===void 0&&(c={}),Re(a,O({transform:Be},c))}function je(a){return a.charAt(0).toUpperCase()+a.substr(1)}function Le(a){return je(a.toLowerCase())}function xe(a,c){return c===void 0&&(c={}),E(a,O({delimiter:" ",transform:Le},c))}function qe(a){return a.toUpperCase()}function Ze(a,c){return c===void 0&&(c={}),E(a,O({delimiter:"_",transform:qe},c))}function j(a,c){return c===void 0&&(c={}),E(a,O({delimiter:"."},c))}function Xe(a,c){return c===void 0&&(c={}),xe(a,O({delimiter:"-"},c))}function Je(a,c){return c===void 0&&(c={}),j(a,O({delimiter:"-"},c))}function Qe(a,c){return c===void 0&&(c={}),j(a,O({delimiter:"/"},c))}function Ae(a,c){var p=a.toLowerCase();return c===0?je(p):p}function et(a,c){return c===void 0&&(c={}),E(a,O({delimiter:" ",transform:Ae},c))}function tt(a,c){return c===void 0&&(c={}),j(a,O({delimiter:"_"},c))}const ot=Object.freeze(Object.defineProperty({__proto__:null,camelCase:ze,camelCaseTransform:Be,camelCaseTransformMerge:Ke,capitalCase:xe,capitalCaseTransform:Le,constantCase:Ze,dotCase:j,headerCase:Xe,noCase:E,paramCase:Je,pascalCase:Re,pascalCaseTransform:he,pascalCaseTransformMerge:Ne,pathCase:Qe,sentenceCase:et,sentenceCaseTransform:Ae,snakeCase:tt},Symbol.toStringTag,{value:"Module"})),rt=$e(ot);(function(a){(()=>{var c={639:(r,t,o)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Iterators=void 0;const e=o(58);t.Iterators=class{static allTokenTypes(){return[e.TokenType.color,e.TokenType.typography,e.TokenType.dimension,e.TokenType.size,e.TokenType.space,e.TokenType.opacity,e.TokenType.fontSize,e.TokenType.lineHeight,e.TokenType.letterSpacing,e.TokenType.paragraphSpacing,e.TokenType.borderWidth,e.TokenType.radius,e.TokenType.duration,e.TokenType.zIndex,e.TokenType.shadow,e.TokenType.border,e.TokenType.gradient,e.TokenType.string,e.TokenType.productCopy,e.TokenType.fontFamily,e.TokenType.fontWeight,e.TokenType.textCase,e.TokenType.textDecoration,e.TokenType.visibility,e.TokenType.blur]}static allDimensionTokenTypes(){return[e.TokenType.dimension,e.TokenType.size,e.TokenType.space,e.TokenType.opacity,e.TokenType.fontSize,e.TokenType.lineHeight,e.TokenType.letterSpacing,e.TokenType.paragraphSpacing,e.TokenType.borderWidth,e.TokenType.radius,e.TokenType.duration,e.TokenType.zIndex]}static allStringTokenTypes(){return[e.TokenType.string,e.TokenType.productCopy,e.TokenType.fontFamily,e.TokenType.fontWeight]}static allOptionTokenTypes(){return[e.TokenType.textCase,e.TokenType.textDecoration,e.TokenType.visibility]}}},989:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ColorFormat=void 0,(o=t.ColorFormat||(t.ColorFormat={})).rgb="rgb",o.rgba="rgba",o.smartRgba="smartRgba",o.hex6="hex6",o.hex8="hex8",o.hashHex6="hashHex6",o.hashHex8="hashHex8",o.smartHashHex="smartHashHex",o.smartHex="smartHex",o.hsl="hsl",o.hsla="hsla",o.smartHsla="smartHsla",o.smartUIColor="smartUIColor"},545:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.StringCase=void 0,(o=t.StringCase||(t.StringCase={})).camelCase="camelCase",o.capitalCase="capitalCase",o.constantCase="constantCase",o.dotCase="dotCase",o.headerCase="headerCase",o.noCase="noCase",o.paramCase="paramCase",o.pascalCase="pascalCase",o.pathCase="pathCase",o.sentenceCase="sentenceCase",o.snakeCase="snakeCase"},617:(r,t,o)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.FileHelper=void 0;const e=o(58);t.FileHelper=class{static createCopyRemoteFile({relativePath:i,fileName:y,url:l}){return{path:i,name:y,type:e.OutputFileType.copyRemoteUrl,url:l}}static createTextFile({relativePath:i,fileName:y,content:l}){return{path:i,name:y,type:e.OutputFileType.text,content:l}}static createBinaryFile({relativePath:i,fileName:y,data:l}){return{path:i,name:y,type:e.OutputFileType.binary,data:l}}}},761:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.sureOptionalReference=void 0,t.sureOptionalReference=function(o,e,i=!0){if(!o||!i)return null;const y=e.get(o);if(!y)throw new Error(`Trying to retrieve unknown referenced token ${o}`);return y}},118:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.NetworkHelper=void 0,t.NetworkHelper=class{static async fetchAsText(o,e,i){return(await this.performFetch(o,e,i)).text()}static async fetchAsJSON(o,e,i){return(await this.performFetch(o,e,i)).json()}static async fetchAsData(o,e,i){return(await this.performFetch(o,e,i)).arrayBuffer()}static async performFetch(o,e,i){try{const y=await o.network.fetch(e,i);if(!y.ok)throw new Error(`Request failed with status ${y.status}, error: ${await y.text()}`);return y}catch(y){throw y}}}},771:(r,t,o)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CSSHelper=void 0;const e=o(58),i=o(761),y=o(952);t.CSSHelper=class{static tokenToCSS(l,u,s){switch(l.tokenType){case e.TokenType.color:return this.colorTokenValueToCSS(l.value,u,s);case e.TokenType.border:return this.borderTokenValueToCSS(l.value,u,s);case e.TokenType.gradient:return this.gradientTokenValueToCSS(l.value,u,s);case e.TokenType.dimension:case e.TokenType.size:case e.TokenType.space:case e.TokenType.opacity:case e.TokenType.fontSize:case e.TokenType.lineHeight:case e.TokenType.letterSpacing:case e.TokenType.paragraphSpacing:case e.TokenType.borderWidth:case e.TokenType.radius:case e.TokenType.duration:case e.TokenType.zIndex:return this.dimensionTokenValueToCSS(l.value,u,s);case e.TokenType.shadow:return this.shadowTokenValueToCSS(l.value,u,s);case e.TokenType.fontWeight:return this.fontWeightTokenValueToCSS(l.value,u,s);case e.TokenType.fontFamily:case e.TokenType.productCopy:case e.TokenType.string:return this.stringTokenValueToCSS(l.value,u,s);case e.TokenType.textCase:case e.TokenType.textDecoration:case e.TokenType.visibility:return this.optionTokenValueToCSS(l.value,u,s,l.tokenType);case e.TokenType.blur:return this.blurTokenValueToCSS(l.value,u,s);case e.TokenType.typography:return this.typographyTokenValueToCSS(l.value,u,s);default:throw new e.UnreachableCaseError(l.tokenType,"Unsupported token type for transformation to CSS:")}}static colorTokenValueToCSS(l,u,s){return y.ColorHelper.formattedColorOrVariableName(l,u,s)}static borderTokenValueToCSS(l,u,s){const d=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);if(d)return s.tokenToVariableRef(d);const f=this.dimensionTokenValueToCSS(l.width,u,s),b=this.borderStyleToCSS(l.style),S=this.colorTokenValueToCSS(l.color,u,s);return this.borderPositionToCSS(l.position),`${f} ${b} ${S}`}static gradientTokenValueToCSS(l,u,s){return l.map(d=>this.gradientLayerToCSS(d,u,s)).join(", ")}static gradientLayerToCSS(l,u,s){const d=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);if(d)return s.tokenToVariableRef(d);let f="";switch(l.type){case e.GradientType.linear:f="linear-gradient(0deg, ";break;case e.GradientType.radial:f="radial-gradient(circle, ";break;case e.GradientType.angular:f="conic-gradient(";break;default:f="linear-gradient(0deg, "}return`${f}${l.stops.map(b=>`${this.colorTokenValueToCSS(b.color,u,s)} ${y.ColorHelper.roundToDecimals(100*b.position,s.decimals)}%`).join(", ")})`}static dimensionTokenValueToCSS(l,u,s){const d=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);return d?s.tokenToVariableRef(d):`${y.ColorHelper.roundToDecimals(l.measure,s.decimals)}${this.unitToCSS(l.unit)}`}static shadowTokenValueToCSS(l,u,s){return l.map(d=>this.shadowLayerToCSS(d,u,s)).join(", ")}static shadowLayerToCSS(l,u,s){const d=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);return d?s.tokenToVariableRef(d):`${l.type===e.ShadowType.inner?"inset ":""}${l.x}px ${l.y}px ${l.radius}px ${l.spread}px ${this.colorTokenValueToCSS({...l.color,...l.opacity&&{opacity:l.opacity}},u,s)}`}static fontWeightTokenValueToCSS(l,u,s){const d=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);return d?s.tokenToVariableRef(d):`${l.text}`}static stringTokenValueToCSS(l,u,s){const d=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);return d?s.tokenToVariableRef(d):`"${l.text}"`}static optionTokenValueToCSS(l,u,s,d){const f=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);return f?s.tokenToVariableRef(f):d===e.TokenType.textCase?this.textCaseToCSS(l.value):d===e.TokenType.textDecoration?this.textDecorationToCSS(l.value):l.value}static blurTokenValueToCSS(l,u,s){const d=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);return d?s.tokenToVariableRef(d):`blur(${this.dimensionTokenValueToCSS(l.radius,u,s)})`}static typographyTokenValueToCSS(l,u,s){const d=(0,i.sureOptionalReference)(l.referencedTokenId,u,s.allowReferences);if(d)return s.tokenToVariableRef(d);const f=(0,i.sureOptionalReference)(l.fontFamily.referencedTokenId,u,s.allowReferences),b=(0,i.sureOptionalReference)(l.fontWeight.referencedTokenId,u,s.allowReferences),S=(0,i.sureOptionalReference)(l.textDecoration.referencedTokenId,u,s.allowReferences),v=(0,i.sureOptionalReference)(l.textCase.referencedTokenId,u,s.allowReferences),h={fontFamily:f?s.tokenToVariableRef(f):l.fontFamily.text,fontWeight:b?s.tokenToVariableRef(b):l.fontWeight.text,textDecoration:S?s.tokenToVariableRef(S):l.textDecoration.value===e.TextDecoration.original?this.textDecorationToCSS(l.textDecoration.value):void 0,textCase:v?s.tokenToVariableRef(v):l.textCase.value===e.TextCase.original?this.textCaseToCSS(l.textCase.value):void 0,caps:l.textCase.value===e.TextCase.smallCaps,fontSize:this.dimensionTokenValueToCSS(l.fontSize,u,s),lineHeight:l.lineHeight?this.dimensionTokenValueToCSS(l.lineHeight,u,s):void 0},k=h.fontSize;return`${h.caps?"small-caps ":""}${h.fontWeight} ${h.lineHeight?`${k}/${h.lineHeight}`:k} ${f?h.fontFamily:`"${h.fontFamily}"`}`}static borderStyleToCSS(l){switch(l){case e.BorderStyle.dashed:return"dashed";case e.BorderStyle.dotted:return"dotted";case e.BorderStyle.solid:return"solid";case e.BorderStyle.groove:return"groove";default:return"solid"}}static borderPositionToCSS(l){switch(l){case e.BorderPosition.center:return"center";case e.BorderPosition.inside:return"inside";case e.BorderPosition.outside:default:return"outside"}}static unitToCSS(l){switch(l){case e.Unit.percent:return"%";case e.Unit.pixels:return"px";case e.Unit.rem:return"rem";case e.Unit.raw:return"";case e.Unit.ms:return"ms";default:return"px"}}static textCaseToCSS(l){switch(l){case e.TextCase.original:return"none";case e.TextCase.upper:return"uppercase";case e.TextCase.lower:return"lowercase";case e.TextCase.camel:case e.TextCase.smallCaps:return"capitalize"}}static textDecorationToCSS(l){switch(l){case e.TextDecoration.original:return"none";case e.TextDecoration.underline:return"underline";case e.TextDecoration.strikethrough:return"line-through"}}}},952:(r,t,o)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ColorHelper=void 0;const e=o(989),i=o(761);class y{static formattedColorOrVariableName(u,s,d){let f,b,S;const v=(0,i.sureOptionalReference)(u.referencedTokenId,s,d.allowReferences);if(v)f=d.tokenToVariableRef(v);else{const h=(0,i.sureOptionalReference)(u.color.referencedTokenId,s,d.allowReferences);h&&(b=d.tokenToVariableRef(h));const k=(0,i.sureOptionalReference)(u.opacity.referencedTokenId,s,d.allowReferences);k&&(S=d.tokenToVariableRef(k))}if(f)return f;if(!f&&!b&&!S)return this.formattedColor(u,d.colorFormat,d.decimals);switch(d.colorFormat){case e.ColorFormat.rgb:case e.ColorFormat.rgba:case e.ColorFormat.smartRgba:return this.colorToRgb(d.colorFormat,this.normalizedIntColor(u),u.opacity.measure,d.decimals,b,S);default:return this.formattedColor(u,d.colorFormat,d.decimals)}}static formattedColor(u,s,d=3){switch(s){case e.ColorFormat.hex6:case e.ColorFormat.hex8:case e.ColorFormat.hashHex6:case e.ColorFormat.hashHex8:case e.ColorFormat.smartHex:case e.ColorFormat.smartHashHex:return this.colorToHex(s,this.normalizedIntColor(u),u.opacity.measure);case e.ColorFormat.rgb:case e.ColorFormat.rgba:case e.ColorFormat.smartRgba:return this.colorToRgb(s,this.normalizedIntColor(u),u.opacity.measure,d,null,null);case e.ColorFormat.hsl:case e.ColorFormat.hsla:case e.ColorFormat.smartHsla:return this.colorToHsl(s,this.normalizedFractionalColor(u),u.opacity.measure,d);case e.ColorFormat.smartUIColor:return this.colorToUIColor(this.normalizedIntColor(u),u.opacity.measure,d)}}static colorToRgb(u,s,d,f,b,S){let v;return v=u===e.ColorFormat.rgba||u===e.ColorFormat.smartRgba&&d<1?`rgba(${b||`${s.r}, ${s.g}, ${s.b}`}, ${S||this.roundToDecimals(d,f)})`:`rgb(${b||`${s.r}, ${s.g}, ${s.b}`})`,v}static colorToHex(u,s,d){let f=`${this.pHex(s.r)}${this.pHex(s.g)}${this.pHex(s.b)}`;return(u===e.ColorFormat.hex8||u===e.ColorFormat.hashHex8||u===e.ColorFormat.smartHex&&d<1||u===e.ColorFormat.smartHashHex&&d<1)&&(f+=`${this.pHex(Math.round(255*d))}`),u!==e.ColorFormat.hashHex6&&u!==e.ColorFormat.hashHex8&&u!==e.ColorFormat.smartHashHex||(f=`#${f}`),f}static colorToHsl(u,s,d,f){const b=Math.max(s.r,s.g,s.b),S=Math.min(s.r,s.g,s.b);let v,h,k,D=(b+S)/2;if(b===S)v=h=0;else{const C=b-S;h=D>.5?C/(2-b-S):C/(b+S),b===s.r?v=(s.g-s.b)/C+(s.g{Object.defineProperty(t,"__esModule",{value:!0}),t.NamingHelper=void 0;const e=o(110),i=o(545);class y{static codeSafeVariableNameForToken(u,s,d,f){let b=[];return d&&(b=[...d.path],d.isRoot||b.push(d.name)),b.push(u.name),f&&f.length>0&&b.unshift(f),y.codeSafeVariableName(b,s)}static codeSafeVariableName(u,s){let d=typeof u=="string"?u:u.join(" ");switch(d=d.replaceAll(/[^a-zA-Z0-9_-]/g,"_"),s){case i.StringCase.camelCase:d=(0,e.camelCase)(d);break;case i.StringCase.capitalCase:d=(0,e.capitalCase)(d);break;case i.StringCase.constantCase:d=(0,e.constantCase)(d);break;case i.StringCase.dotCase:d=(0,e.dotCase)(d);break;case i.StringCase.headerCase:d=(0,e.headerCase)(d);break;case i.StringCase.noCase:d=(0,e.noCase)(d);break;case i.StringCase.paramCase:d=(0,e.paramCase)(d);break;case i.StringCase.pascalCase:d=(0,e.pascalCase)(d);break;case i.StringCase.pathCase:d=(0,e.pathCase)(d);break;case i.StringCase.sentenceCase:d=(0,e.sentenceCase)(d);break;case i.StringCase.snakeCase:d=(0,e.snakeCase)(d)}return s!==i.StringCase.snakeCase&&s!==i.StringCase.constantCase&&(d=d.replaceAll("_","")),d.match(/^[^a-zA-Z]/)&&(d="_"+d),d}static nameAsCSSVarReference(u){return`var(--${u})`}static nameAsCSSVarDeclaration(u){return`--${u}`}}t.NamingHelper=y},58:r=>{r.exports=We()},110:r=>{r.exports=rt}},p={};function n(r){var t=p[r];if(t!==void 0)return t.exports;var o=p[r]={exports:{}};return c[r](o,o.exports,n),o.exports}var T={};(()=>{var r=T;Object.defineProperty(r,"__esModule",{value:!0}),r.ColorFormat=r.StringCase=r.Iterators=r.CSSHelper=r.FileHelper=r.ColorHelper=r.NamingHelper=r.NetworkHelper=void 0;var t=n(118);Object.defineProperty(r,"NetworkHelper",{enumerable:!0,get:function(){return t.NetworkHelper}});var o=n(453);Object.defineProperty(r,"NamingHelper",{enumerable:!0,get:function(){return o.NamingHelper}});var e=n(952);Object.defineProperty(r,"ColorHelper",{enumerable:!0,get:function(){return e.ColorHelper}});var i=n(617);Object.defineProperty(r,"FileHelper",{enumerable:!0,get:function(){return i.FileHelper}});var y=n(771);Object.defineProperty(r,"CSSHelper",{enumerable:!0,get:function(){return y.CSSHelper}});var l=n(639);Object.defineProperty(r,"Iterators",{enumerable:!0,get:function(){return l.Iterators}});var u=n(545);Object.defineProperty(r,"StringCase",{enumerable:!0,get:function(){return u.StringCase}});var s=n(989);Object.defineProperty(r,"ColorFormat",{enumerable:!0,get:function(){return s.ColorFormat}})})();var m=a;for(var g in T)m[g]=T[g];T.__esModule&&Object.defineProperty(m,"__esModule",{value:!0})})()})(_);var P={};(function(a){(()=>{var c={9932:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.docsImageRefToUrl=t.DocsImageRefType=void 0,function(e){e.resource="Resource",e.figmaNode="FigmaNode"}(o||(t.DocsImageRefType=o={})),t.docsImageRefToUrl=function(e,i,y){var l;if(e)switch(e.type){case o.resource:return(l=e.resource)===null||l===void 0?void 0:l.url;case o.figmaNode:return!e.figmaNode||!e.figmaNode.sourceId||!e.figmaNode.frameReferenceId?void 0:i.resources.getFigmaFrameHostedUrl({designSystemId:y.dsId,versionId:y.versionId},e.figmaNode.frameReferenceId);default:return}}},5673:(r,t)=>{var o;function e(i){switch(i.type){case o.documentationItem:return`@page:${i.documentationItemId}`;case o.pageHeading:return`@page:${i.documentationItemId}#${i.pageHeadingId}`;case o.url:return i.url;default:return}}Object.defineProperty(t,"__esModule",{value:!0}),t.linkAttributeToDocsLink=t.docsLinkToLinkAttributes=t.docsLinkToUrl=t.DocsLinkRefType=void 0,function(i){i.documentationItem="DocumentationItem",i.pageHeading="PageHeading",i.url="Url"}(o||(t.DocsLinkRefType=o={})),t.docsLinkToUrl=e,t.docsLinkToLinkAttributes=function(i){const y=e(i);if(y)return{href:y,target:i.openInNewTab?"_blank":"_self"}},t.linkAttributeToDocsLink=function(i,y){if(!i)return;const l=y==="_blank";if(i.startsWith("@page:")){if(i.includes("#")){const[u,s]=i.replace("@page:","").split("#");return{type:o.pageHeading,documentationItemId:u,pageHeadingId:s,openInNewTab:l}}return{type:o.documentationItem,documentationItemId:i.replace("@page:",""),openInNewTab:l}}return{type:o.url,url:i,openInNewTab:l}}},2657:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockShortcut=t.DocumentationLegacyPageBlockShortcutType=void 0,function(e){e.external="External",e.internal="Internal"}(o||(t.DocumentationLegacyPageBlockShortcutType=o={})),t.DocumentationLegacyPageBlockShortcut=class{constructor(e){var i;e.url?this.type=o.external:this.type=o.internal,this.title=this.shortcutTitleFromModel(e,this.type),this.description=this.shortcutDescriptionFromModel(e,this.type),this.previewUrl=this.shortcutPreviewUrlFromModel(e),this.type===o.internal&&(!((i=e.documentationItemPreview)===null||i===void 0)&&i.valid)&&e.documentationItemId?this.internalId=e.documentationItemId:(this.internalId=null,this.type===o.external&&e.url?this.externalUrl=e.url:this.externalUrl=null)}shortcutTitleFromModel(e,i){var y,l,u,s,d;let f=null;return e.title&&e.title.trim().length>0?f=e.title:i===o.internal?f=(l=(y=e.documentationItemPreview)===null||y===void 0?void 0:y.title)!==null&&l!==void 0?l:null:i===o.external&&(f=(d=(s=(u=e.urlPreview)===null||u===void 0?void 0:u.title)!==null&&s!==void 0?s:e.url)!==null&&d!==void 0?d:null),f&&f.trim().length!==0?f:null}shortcutDescriptionFromModel(e,i){var y;let l=null;return e.description&&e.description.trim().length>0?l=e.description:i===o.external&&(l=(y=e.urlPreview)===null||y===void 0?void 0:y.description),l&&l.trim().length!==0?l:null}shortcutPreviewUrlFromModel(e){var i,y,l,u,s;return(s=(l=(i=e.assetUrl)!==null&&i!==void 0?i:(y=e.asset)===null||y===void 0?void 0:y.url)!==null&&l!==void 0?l:(u=e.urlPreview)===null||u===void 0?void 0:u.thumbnailUrl)!==null&&s!==void 0?s:null}}},7476:(r,t)=>{var o,e;Object.defineProperty(t,"__esModule",{value:!0}),t.TextAlignment=t.Alignment=void 0,function(i){i.left="Left",i.center="Center",i.stretch="Stretch"}(o||(t.Alignment=o={})),function(i){i.left="Left",i.center="Center",i.right="Right"}(e||(t.TextAlignment=e={}))},8738:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetFormat=void 0,function(e){e.png="png",e.pdf="pdf",e.svg="svg"}(o||(t.AssetFormat=o={}))},915:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetScale=void 0,function(e){e.x1="x1",e.x2="x2",e.x3="x3",e.x4="x4"}(o||(t.AssetScale=o={}))},899:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetScaleType=void 0,function(e){e.aspectFill="AspectFill",e.aspectFit="AspectFit"}(o||(t.AssetScaleType=o={}))},6192:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.BlurType=void 0,function(e){e.layer="Layer",e.background="Background"}(o||(t.BlurType=o={}))},1160:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ALL_BORDER_POSITIONS=t.BorderPosition=void 0,function(e){e.inside="Inside",e.center="Center",e.outside="Outside"}(o||(t.BorderPosition=o={})),t.ALL_BORDER_POSITIONS=[o.inside,o.center,o.outside]},4546:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ALL_BORDER_STYLES=t.BorderStyle=void 0,function(e){e.dashed="Dashed",e.dotted="Dotted",e.solid="Solid",e.groove="Groove"}(o||(t.BorderStyle=o={})),t.ALL_BORDER_STYLES=[o.dashed,o.dotted,o.solid,o.groove]},8042:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ImportWarningType=void 0,function(e){e.UnsupportedFill="UnsupportedFill",e.UnsupportedStroke="UnsupportedStroke",e.UnsupportedEffect="UnsupportedEffect",e.StyleNotApplied="StyleNotApplied",e.NoPublishedStyles="NoPublishedStyles",e.NoPublishedComponents="NoPublishedComponents",e.NoPublishedAssets="NoPublishedAssets",e.NoVersionFound="NoVersionFound",e.ComponentHasNoThumbnail="ComponentHasNoThumbnail",e.DuplicateImportedStyleId="DuplicateImportedStyleId",e.DuplicateImportedStylePath="DuplicateImportedStylePath",e.NoPublishedElements="NoPublishedElements",e.NoUnpublishedStyles="NoUnpublishedStyles"}(o||(t.ImportWarningType=o={}))},5695:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.CustomDomainErrorCode=void 0,function(e){e.generalError="GeneralError",e.dnsNotConfigured="DNSNotConfigured",e.maintenance="Maintenance"}(o||(t.CustomDomainErrorCode=o={}))},7737:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.CustomDomainState=void 0,function(e){e.initial="Initial",e.domainSetupInProgress="DomainSetupInProgress",e.domainSetupFailed="DomainSetupFailed",e.domainSetupsSucces="DomainSetupSuccess",e.sslSetupInProgress="SSLSetupInProgress",e.sslSetupFailed="SSLSetupFailed",e.sslSetupSuccess="SSLSetupSuccess"}(o||(t.CustomDomainState=o={}))},5651:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockBehaviorDataType=void 0,function(e){e.item="Item",e.token="Token",e.asset="Asset",e.component="Component",e.figmaNode="FigmaNode",e.figmaComponent="FigmaComponent"}(o||(t.DocsBlockBehaviorDataType=o={}))},3733:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockBehaviorSelectionType=void 0,function(e){e.entity="Entity",e.group="Group",e.entityAndGroup="EntityAndGroup"}(o||(t.DocsBlockBehaviorSelectionType=o={}))},8890:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockImagePropertyAspectRatio=void 0,function(e){e.auto="Auto",e.square="Square",e.landscape="Landscape",e.portrait="Portrait",e.wide="Wide"}(o||(t.DocsBlockImagePropertyAspectRatio=o={}))},9377:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemEntityType=void 0,function(e){e.token="Token",e.tokenGroup="TokenGroup",e.asset="Asset",e.assetGroup="AssetGroup",e.component="Component",e.componentGroup="ComponentGroup"}(o||(t.DocsBlockItemEntityType=o={}))},5883:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyOptionRenderingStyle=void 0,function(e){e.segmentedControl="SegmentedControl",e.toggleButton="ToggleButton",e.select="Select",e.checkbox="Checkbox"}(o||(t.DocsBlockItemPropertyOptionRenderingStyle=o={}))},8061:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyRichTextStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.quote="Quote",e.callout="Callout",e.ol="OL",e.ul="UL"}(o||(t.DocsBlockItemPropertyRichTextStyle=o={}))},7479:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyTextStyle=void 0,function(e){e.small="Small",e.regular="Regular",e.bold="Bold"}(o||(t.DocsBlockItemPropertyTextStyle=o={}))},6839:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyType=void 0,function(e){e.richText="RichText",e.multiRichText="MultiRichText",e.text="Text",e.richTextEditor="RichTextEditor",e.boolean="Boolean",e.number="Number",e.singleSelect="SingleSelect",e.multiSelect="MultiSelect",e.image="Image",e.token="Token",e.tokenType="TokenType",e.tokenProperty="TokenProperty",e.component="Component",e.componentProperty="ComponentProperty",e.asset="Asset",e.assetProperty="AssetProperty",e.embedURL="EmbedURL",e.url="URL",e.markdown="Markdown",e.code="Code",e.codeSandbox="CodeSandbox",e.table="Table",e.divider="Divider",e.storybook="Storybook",e.color="Color",e.figmaNode="FigmaNode",e.figmaComponent="FigmaComponent"}(o||(t.DocsBlockItemPropertyType=o={}))},8095:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemVariantLayoutType=void 0,function(e){e.column="Column",e.row="Row"}(o||(t.DocsBlockItemVariantLayoutType=o={}))},7291:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemVariantLayoutWidth=void 0,function(e){e.c1="1",e.c2="2",e.c3="3",e.c4="4",e.c5="5",e.c6="6",e.c7="7",e.c8="8",e.c9="9",e.c10="10",e.c11="11",e.c12="12"}(o||(t.DocsBlockItemVariantLayoutWidth=o={}))},9133:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockOptionColor=void 0,function(e){e.green="Green",e.red="Red",e.yellow="Yellow",e.blue="Blue",e.purple="Purple",e.orange="Orange",e.pink="Pink",e.teal="Teal",e.grey="Grey",e.lightGrey="LightGrey",e.cyan="Cyan",e.fuchsia="Fuchsia"}(o||(t.DocsBlockOptionColor=o={}))},5963:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockOptionRenderingStyle=void 0,function(e){e.segmentedControl="SegmentedControl",e.toggleButton="ToggleButton",e.select="Select",e.checkbox="Checkbox"}(o||(t.DocsBlockOptionRenderingStyle=o={}))},6644:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockRichTextPropertyStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.quote="Quote",e.callout="Callout",e.default="Default"}(o||(t.DocsBlockRichTextPropertyStyle=o={}))},306:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockTextPropertyStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.default="Default",e.defaultBold="DefaultBold",e.defaultSemibold="DefaultSemibold",e.small="Small",e.smallBold="SmallBold",e.smallSemibold="SmallSemibold",e.custom="Custom"}(o||(t.DocsBlockTextPropertyStyle=o={}))},4068:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsEntityGroupBehavior=void 0,function(e){e.group="Group",e.tabs="Tabs"}(o||(t.DocsEntityGroupBehavior=o={}))},1233:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsEntityType=void 0,function(e){e.group="Group",e.page="Page"}(o||(t.DocsEntityType=o={}))},7971:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsSectionType=void 0,function(e){e.plain="Plain",e.tabs="Tabs"}(o||(t.DocsSectionType=o={}))},5102:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyCalloutType=void 0,function(e){e.info="Info",e.success="Success",e.warning="Warning",e.error="Error"}(o||(t.DocumentationLegacyCalloutType=o={}))},2123:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyGroupBehavior=void 0,function(e){e.group="Group",e.tabs="Tabs"}(o||(t.DocumentationLegacyGroupBehavior=o={}))},9896:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyHeadingType=void 0,function(e){e[e.h1=1]="h1",e[e.h2=2]="h2",e[e.h3=3]="h3"}(o||(t.DocumentationLegacyHeadingType=o={}))},7379:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyItemType=void 0,function(e){e.group="Group",e.page="Page"}(o||(t.DocumentationLegacyItemType=o={}))},1423:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageAssetType=void 0,function(e){e.image="image",e.figmaFrame="figmaFrame"}(o||(t.DocumentationLegacyPageAssetType=o={}))},1601:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockThemeType=void 0,function(e){e.override="Override",e.comparison="Comparison"}(o||(t.DocumentationLegacyPageBlockThemeType=o={}))},1846:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockType=void 0,function(e){e.text="Text",e.heading="Heading",e.code="Code",e.unorderedList="UnorderedList",e.orderedList="OrderedList",e.quote="Quote",e.callout="Callout",e.divider="Divider",e.image="Image",e.token="Token",e.tokenList="TokenList",e.tokenGroup="TokenGroup",e.shortcuts="Shortcuts",e.link="Link",e.figmaEmbed="FigmaEmbed",e.youtubeEmbed="YoutubeEmbed",e.storybookEmbed="StorybookEmbed",e.genericEmbed="Embed",e.figmaFrames="FigmaFrames",e.custom="Custom",e.renderCode="RenderCode",e.componentAssets="ComponentAssets",e.column="Column",e.columnItem="ColumnItem",e.tabs="Tabs",e.tabItem="TabItem",e.table="Table",e.tableCell="TableCell",e.tableRow="TableRow"}(o||(t.DocumentationLegacyPageBlockType=o={}))},1255:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.FrameAlignment=void 0,function(e){e.frameHeight="FrameHeight",e.center="Center"}(o||(t.FrameAlignment=o={}))},3718:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.FrameLayout=void 0,function(e){e.c8="C8",e.c7="C7",e.c6="C6",e.c5="C5",e.c4="C4",e.c3="C3",e.c2="C2",e.c1="C1",e.c175="C1_75"}(o||(t.FrameLayout=o={}))},1:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.GradientType=void 0,function(e){e.linear="Linear",e.radial="Radial",e.angular="Angular"}(o||(t.GradientType=o={}))},934:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.IconSet=void 0,function(e){e.checkCircle="CheckCircle",e.crossCircle="CrossCircle",e.alert="Alert"}(o||(t.IconSet=o={}))},2674:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.RichTextSpanAttributeType=void 0,function(e){e.bold="Bold",e.italic="Italic",e.link="Link",e.strikethrough="Strikethrough",e.code="Code"}(o||(t.RichTextSpanAttributeType=o={}))},9125:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ShadowType=void 0,function(e){e.drop="Drop",e.inner="Inner"}(o||(t.ShadowType=o={}))},4652:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.SourceType=void 0,function(e){e.figma="Figma",e.tokenStudio="TokenStudio",e.figmaVariablesPlugin="FigmaVariablesPlugin"}(o||(t.SourceType=o={}))},922:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.TextCase=void 0,function(e){e.original="Original",e.upper="Upper",e.lower="Lower",e.camel="Camel",e.smallCaps="SmallCaps"}(o||(t.TextCase=o={}))},7040:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.TextDecoration=void 0,function(e){e.original="None",e.underline="Underline",e.strikethrough="Strikethrough"}(o||(t.TextDecoration=o={}))},3788:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DT_TOKEN_TYPES=t.tokenTypeIsReferencable=t.REFERENCABLE_TOKEN_TYPES=t.REPLACABLE_TOKEN_TYPES=t.tokenTypeIsNonPure=t.tokenTypeIsPure=t.PURE_TOKEN_TYPES=t.ALL_TOKEN_TYPES=t.MS_DIMENSION_TOKEN_TYPES=t.RAW_DIMENSION_TOKEN_TYPES=t.DIMENSION_TOKEN_TYPES=t.OPTION_TOKEN_TYPES=t.STRING_TOKEN_TYPES=t.TokenType=void 0,function(e){e.color="Color",e.typography="Typography",e.shadow="Shadow",e.border="Border",e.gradient="Gradient",e.blur="Blur",e.radius="BorderRadius",e.borderWidth="BorderWidth",e.duration="Duration",e.fontSize="FontSize",e.dimension="Dimension",e.letterSpacing="LetterSpacing",e.lineHeight="LineHeight",e.opacity="Opacity",e.paragraphSpacing="ParagraphSpacing",e.size="Size",e.space="Space",e.zIndex="ZIndex",e.textDecoration="TextDecoration",e.textCase="TextCase",e.visibility="Visibility",e.fontFamily="FontFamily",e.fontWeight="FontWeight",e.string="String",e.productCopy="ProductCopy"}(o||(t.TokenType=o={})),t.STRING_TOKEN_TYPES=[o.string,o.productCopy,o.fontFamily,o.fontWeight],t.OPTION_TOKEN_TYPES=[o.textCase,o.textDecoration,o.visibility],t.DIMENSION_TOKEN_TYPES=[o.dimension,o.size,o.space,o.opacity,o.fontSize,o.lineHeight,o.letterSpacing,o.paragraphSpacing,o.borderWidth,o.radius,o.duration,o.zIndex],t.RAW_DIMENSION_TOKEN_TYPES=[o.opacity,o.zIndex],t.MS_DIMENSION_TOKEN_TYPES=[o.duration],t.ALL_TOKEN_TYPES=[...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES,o.color,o.gradient,o.border,o.radius,o.shadow,o.typography,o.blur],t.PURE_TOKEN_TYPES=[...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES],t.tokenTypeIsPure=e=>t.PURE_TOKEN_TYPES.includes(e),t.tokenTypeIsNonPure=e=>!(0,t.tokenTypeIsPure)(e),t.REPLACABLE_TOKEN_TYPES=[o.color,...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES],t.REFERENCABLE_TOKEN_TYPES=[o.color,...t.DIMENSION_TOKEN_TYPES,o.fontFamily,o.fontWeight,o.textCase,o.textDecoration],t.tokenTypeIsReferencable=e=>t.REFERENCABLE_TOKEN_TYPES.includes(e),t.DT_TOKEN_TYPES=[o.color,o.shadow,o.gradient,o.typography,o.border,...t.DIMENSION_TOKEN_TYPES,o.fontFamily,o.fontWeight,...t.OPTION_TOKEN_TYPES]},8607:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.MS_UNITS=t.PX_UNITS=t.RAW_UNITS=t.LINE_HEIGHT_UNITS=t.SIZE_UNITS=t.Unit=void 0,function(e){e.pixels="Pixels",e.percent="Percent",e.rem="Rem",e.ms="Ms",e.raw="Raw"}(o||(t.Unit=o={})),t.SIZE_UNITS=[o.pixels,o.percent,o.rem],t.LINE_HEIGHT_UNITS=[o.pixels,o.percent,o.rem,o.raw],t.RAW_UNITS=[o.raw],t.PX_UNITS=[o.pixels],t.MS_UNITS=[o.ms]},9478:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.UserRole=void 0,function(e){e.owner="Owner",e.admin="Admin",e.creator="Creator",e.contributor="Contributor",e.billing="Billing",e.viewer="Viewer"}(o||(t.UserRole=o={}))},6141:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.VisibilityType=void 0,function(e){e.visible="Visible",e.hidden="Hidden"}(o||(t.VisibilityType=o={}))},6298:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceNPMRegistryAuthType=void 0,function(e){e.basic="Basic",e.bearer="Bearer"}(o||(t.WorkspaceNPMRegistryAuthType=o={}))},7968:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceNPMRegistryType=void 0,function(e){e.npmJS="NPMJS",e.gitHub="GitHub",e.azureDevOps="AzureDevOps",e.artifactory="Artifactory",e.custom="Custom"}(o||(t.WorkspaceNPMRegistryType=o={}))},5503:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionPlanInterval=void 0,function(e){e.yearly="yearly",e.monthly="monthly"}(o||(t.WorkspaceSubscriptionPlanInterval=o={}))},4290:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionProductCode=void 0,function(e){e.free="free",e.team="team",e.teamTest="team_test",e.company="company",e.enterprise="enterprise"}(o||(t.WorkspaceSubscriptionProductCode=o={}))},3607:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionStatus=void 0,function(e){e.active="active",e.gracePeriod="gracePeriod",e.cancelled="cancelled",e.suspended="suspended"}(o||(t.WorkspaceSubscriptionStatus=o={}))},2802:(r,t)=>{var o,e;Object.defineProperty(t,"__esModule",{value:!0}),t.PulsarExecutor=t.OutputFileType=void 0,function(i){i.copyRemoteUrl="copyRemoteUrl",i.text="text",i.binary="binary"}(o||(t.OutputFileType=o={})),function(i){i.supernova="supernova",i.local="local"}(e||(t.PulsarExecutor=e={}))}},p={};function n(r){var t=p[r];if(t!==void 0)return t.exports;var o=p[r]={exports:{}};return c[r](o,o.exports,n),o.exports}var T={};(()=>{var r=T;Object.defineProperty(r,"__esModule",{value:!0}),r.TokenType=r.TextDecoration=r.TextCase=r.ShadowType=r.RichTextSpanAttributeType=r.GradientType=r.FrameLayout=r.FrameAlignment=r.IconSet=r.SourceType=r.DocsImageRefType=r.DocsLinkRefType=r.DocsSectionType=r.DocsEntityType=r.DocsEntityGroupBehavior=r.DocsBlockTextPropertyStyle=r.DocsBlockRichTextPropertyStyle=r.DocsBlockOptionColor=r.DocsBlockOptionRenderingStyle=r.DocsBlockItemVariantLayoutWidth=r.DocsBlockItemVariantLayoutType=r.DocsBlockItemPropertyType=r.DocsBlockItemPropertyTextStyle=r.DocsBlockItemPropertyRichTextStyle=r.DocsBlockItemPropertyOptionRenderingStyle=r.DocsBlockItemEntityType=r.DocsBlockImagePropertyAspectRatio=r.DocsBlockBehaviorSelectionType=r.DocsBlockBehaviorDataType=r.DocumentationLegacyPageBlockShortcutType=r.DocumentationLegacyPageBlockThemeType=r.DocumentationLegacyPageBlockType=r.DocumentationLegacyPageAssetType=r.DocumentationLegacyItemType=r.DocumentationLegacyHeadingType=r.DocumentationLegacyGroupBehavior=r.DocumentationLegacyCalloutType=r.BorderStyle=r.BorderPosition=r.BlurType=r.AssetScaleType=r.AssetScale=r.AssetFormat=r.Alignment=r.ALL_TOKEN_TYPES=r.ALL_BORDER_STYLES=r.ALL_BORDER_POSITIONS=r.OPTION_TOKEN_TYPES=r.STRING_TOKEN_TYPES=r.DIMENSION_TOKEN_TYPES=void 0,r.PulsarExecutor=r.OutputFileType=r.CustomDomainState=r.CustomDomainErrorCode=r.ImportWarningType=r.WorkspaceNPMRegistryType=r.WorkspaceNPMRegistryAuthType=r.WorkspaceSubscriptionStatus=r.WorkspaceSubscriptionProductCode=r.WorkspaceSubscriptionPlanInterval=r.VisibilityType=r.UserRole=r.Unit=void 0;var t=n(3788);Object.defineProperty(r,"DIMENSION_TOKEN_TYPES",{enumerable:!0,get:function(){return t.DIMENSION_TOKEN_TYPES}}),Object.defineProperty(r,"STRING_TOKEN_TYPES",{enumerable:!0,get:function(){return t.STRING_TOKEN_TYPES}}),Object.defineProperty(r,"OPTION_TOKEN_TYPES",{enumerable:!0,get:function(){return t.OPTION_TOKEN_TYPES}});var o=n(1160);Object.defineProperty(r,"ALL_BORDER_POSITIONS",{enumerable:!0,get:function(){return o.ALL_BORDER_POSITIONS}});var e=n(4546);Object.defineProperty(r,"ALL_BORDER_STYLES",{enumerable:!0,get:function(){return e.ALL_BORDER_STYLES}});var i=n(3788);Object.defineProperty(r,"ALL_TOKEN_TYPES",{enumerable:!0,get:function(){return i.ALL_TOKEN_TYPES}});var y=n(7476);Object.defineProperty(r,"Alignment",{enumerable:!0,get:function(){return y.Alignment}});var l=n(8738);Object.defineProperty(r,"AssetFormat",{enumerable:!0,get:function(){return l.AssetFormat}});var u=n(915);Object.defineProperty(r,"AssetScale",{enumerable:!0,get:function(){return u.AssetScale}});var s=n(899);Object.defineProperty(r,"AssetScaleType",{enumerable:!0,get:function(){return s.AssetScaleType}});var d=n(6192);Object.defineProperty(r,"BlurType",{enumerable:!0,get:function(){return d.BlurType}});var f=n(1160);Object.defineProperty(r,"BorderPosition",{enumerable:!0,get:function(){return f.BorderPosition}});var b=n(4546);Object.defineProperty(r,"BorderStyle",{enumerable:!0,get:function(){return b.BorderStyle}});var S=n(5102);Object.defineProperty(r,"DocumentationLegacyCalloutType",{enumerable:!0,get:function(){return S.DocumentationLegacyCalloutType}});var v=n(2123);Object.defineProperty(r,"DocumentationLegacyGroupBehavior",{enumerable:!0,get:function(){return v.DocumentationLegacyGroupBehavior}});var h=n(9896);Object.defineProperty(r,"DocumentationLegacyHeadingType",{enumerable:!0,get:function(){return h.DocumentationLegacyHeadingType}});var k=n(7379);Object.defineProperty(r,"DocumentationLegacyItemType",{enumerable:!0,get:function(){return k.DocumentationLegacyItemType}});var D=n(1423);Object.defineProperty(r,"DocumentationLegacyPageAssetType",{enumerable:!0,get:function(){return D.DocumentationLegacyPageAssetType}});var C=n(1846);Object.defineProperty(r,"DocumentationLegacyPageBlockType",{enumerable:!0,get:function(){return C.DocumentationLegacyPageBlockType}});var L=n(1601);Object.defineProperty(r,"DocumentationLegacyPageBlockThemeType",{enumerable:!0,get:function(){return L.DocumentationLegacyPageBlockThemeType}});var x=n(2657);Object.defineProperty(r,"DocumentationLegacyPageBlockShortcutType",{enumerable:!0,get:function(){return x.DocumentationLegacyPageBlockShortcutType}});var A=n(5651);Object.defineProperty(r,"DocsBlockBehaviorDataType",{enumerable:!0,get:function(){return A.DocsBlockBehaviorDataType}});var M=n(3733);Object.defineProperty(r,"DocsBlockBehaviorSelectionType",{enumerable:!0,get:function(){return M.DocsBlockBehaviorSelectionType}});var F=n(8890);Object.defineProperty(r,"DocsBlockImagePropertyAspectRatio",{enumerable:!0,get:function(){return F.DocsBlockImagePropertyAspectRatio}});var w=n(9377);Object.defineProperty(r,"DocsBlockItemEntityType",{enumerable:!0,get:function(){return w.DocsBlockItemEntityType}});var H=n(5883);Object.defineProperty(r,"DocsBlockItemPropertyOptionRenderingStyle",{enumerable:!0,get:function(){return H.DocsBlockItemPropertyOptionRenderingStyle}});var U=n(8061);Object.defineProperty(r,"DocsBlockItemPropertyRichTextStyle",{enumerable:!0,get:function(){return U.DocsBlockItemPropertyRichTextStyle}});var $=n(7479);Object.defineProperty(r,"DocsBlockItemPropertyTextStyle",{enumerable:!0,get:function(){return $.DocsBlockItemPropertyTextStyle}});var W=n(6839);Object.defineProperty(r,"DocsBlockItemPropertyType",{enumerable:!0,get:function(){return W.DocsBlockItemPropertyType}});var V=n(8095);Object.defineProperty(r,"DocsBlockItemVariantLayoutType",{enumerable:!0,get:function(){return V.DocsBlockItemVariantLayoutType}});var G=n(7291);Object.defineProperty(r,"DocsBlockItemVariantLayoutWidth",{enumerable:!0,get:function(){return G.DocsBlockItemVariantLayoutWidth}});var Y=n(5963);Object.defineProperty(r,"DocsBlockOptionRenderingStyle",{enumerable:!0,get:function(){return Y.DocsBlockOptionRenderingStyle}});var K=n(9133);Object.defineProperty(r,"DocsBlockOptionColor",{enumerable:!0,get:function(){return K.DocsBlockOptionColor}});var z=n(6644);Object.defineProperty(r,"DocsBlockRichTextPropertyStyle",{enumerable:!0,get:function(){return z.DocsBlockRichTextPropertyStyle}});var q=n(306);Object.defineProperty(r,"DocsBlockTextPropertyStyle",{enumerable:!0,get:function(){return q.DocsBlockTextPropertyStyle}});var Z=n(4068);Object.defineProperty(r,"DocsEntityGroupBehavior",{enumerable:!0,get:function(){return Z.DocsEntityGroupBehavior}});var X=n(1233);Object.defineProperty(r,"DocsEntityType",{enumerable:!0,get:function(){return X.DocsEntityType}});var J=n(7971);Object.defineProperty(r,"DocsSectionType",{enumerable:!0,get:function(){return J.DocsSectionType}});var Q=n(5673);Object.defineProperty(r,"DocsLinkRefType",{enumerable:!0,get:function(){return Q.DocsLinkRefType}});var ee=n(9932);Object.defineProperty(r,"DocsImageRefType",{enumerable:!0,get:function(){return ee.DocsImageRefType}});var te=n(4652);Object.defineProperty(r,"SourceType",{enumerable:!0,get:function(){return te.SourceType}});var oe=n(934);Object.defineProperty(r,"IconSet",{enumerable:!0,get:function(){return oe.IconSet}});var re=n(1255);Object.defineProperty(r,"FrameAlignment",{enumerable:!0,get:function(){return re.FrameAlignment}});var ne=n(3718);Object.defineProperty(r,"FrameLayout",{enumerable:!0,get:function(){return ne.FrameLayout}});var ae=n(1);Object.defineProperty(r,"GradientType",{enumerable:!0,get:function(){return ae.GradientType}});var ie=n(2674);Object.defineProperty(r,"RichTextSpanAttributeType",{enumerable:!0,get:function(){return ie.RichTextSpanAttributeType}});var ce=n(9125);Object.defineProperty(r,"ShadowType",{enumerable:!0,get:function(){return ce.ShadowType}});var le=n(922);Object.defineProperty(r,"TextCase",{enumerable:!0,get:function(){return le.TextCase}});var se=n(7040);Object.defineProperty(r,"TextDecoration",{enumerable:!0,get:function(){return se.TextDecoration}});var ue=n(3788);Object.defineProperty(r,"TokenType",{enumerable:!0,get:function(){return ue.TokenType}});var pe=n(8607);Object.defineProperty(r,"Unit",{enumerable:!0,get:function(){return pe.Unit}});var de=n(9478);Object.defineProperty(r,"UserRole",{enumerable:!0,get:function(){return de.UserRole}});var ye=n(6141);Object.defineProperty(r,"VisibilityType",{enumerable:!0,get:function(){return ye.VisibilityType}});var Te=n(5503);Object.defineProperty(r,"WorkspaceSubscriptionPlanInterval",{enumerable:!0,get:function(){return Te.WorkspaceSubscriptionPlanInterval}});var me=n(4290);Object.defineProperty(r,"WorkspaceSubscriptionProductCode",{enumerable:!0,get:function(){return me.WorkspaceSubscriptionProductCode}});var fe=n(3607);Object.defineProperty(r,"WorkspaceSubscriptionStatus",{enumerable:!0,get:function(){return fe.WorkspaceSubscriptionStatus}});var ge=n(6298);Object.defineProperty(r,"WorkspaceNPMRegistryAuthType",{enumerable:!0,get:function(){return ge.WorkspaceNPMRegistryAuthType}});var be=n(7968);Object.defineProperty(r,"WorkspaceNPMRegistryType",{enumerable:!0,get:function(){return be.WorkspaceNPMRegistryType}});var Se=n(8042);Object.defineProperty(r,"ImportWarningType",{enumerable:!0,get:function(){return Se.ImportWarningType}});var R=n(5695);Object.defineProperty(r,"CustomDomainErrorCode",{enumerable:!0,get:function(){return R.CustomDomainErrorCode}});var Ue=n(7737);Object.defineProperty(r,"CustomDomainState",{enumerable:!0,get:function(){return Ue.CustomDomainState}});var Oe=n(2802);Object.defineProperty(r,"OutputFileType",{enumerable:!0,get:function(){return Oe.OutputFileType}}),Object.defineProperty(r,"PulsarExecutor",{enumerable:!0,get:function(){return Oe.PulsarExecutor}})})();var m=a;for(var g in T)m[g]=T[g];T.__esModule&&Object.defineProperty(m,"__esModule",{value:!0})})()})(P);const I=(a,c,p)=>{let n;return p?n=c.find(T=>T.id===a.parentGroupId):n=null,_.NamingHelper.codeSafeVariableNameForToken(a,_.StringCase.paramCase,n,"")},N=(a,c,p)=>p?`$${a}: ${c}${p} !default;`:`$${a}: ${c} !default;`,nt=(a,c,p,n,T)=>a.sort((g,r)=>{if(T){const e=g.name.match(/\d+$/),i=r.name.match(/\d+$/);if(e&&i)return parseInt(e[0],10)-parseInt(i[0],10)}const t=I(g,c,p),o=I(r,c,p);return t.localeCompare(o)}),at=a=>{let c=null;const p=[];return a.forEach(({css:n,parentGroupId:T})=>{c&&T!==c&&n&&p.push(""),n&&p.push(n),c=T}),p.join(` -`)},it=a=>{const c=/linear-gradient\(([^,]+),\s*(.+)\)/,p=a.match(c);if(p){const n=p[1].trim(),T=Number(n.match(/\d+/))+90,m=n.match(/deg/),g=p[2].trim();return`linear-gradient(var(--gradient-angle, ${T}${m}), ${g})`}return a},ct=({fontFamily:a,fontSize:c,fontWeight:p,lineHeight:n},T)=>{const m=[`font-family: "'${a.text}', sans-serif"`,`font-size: ${c.measure}${c.unit==="Pixels"?"px":c.unit}`,`font-style: ${T?"italic":"normal"}`,`font-weight: ${p.text}`];return n&&n.measure&&m.push(`line-height: ${n.measure/100}`),`( -${m.join(`, +"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function rt(a){if(a.__esModule)return a;var i=a.default;if(typeof i=="function"){var u=function n(){return this instanceof n?Reflect.construct(i,arguments,this.constructor):i.apply(this,arguments)};u.prototype=i.prototype}else u={};return Object.defineProperty(u,"__esModule",{value:!0}),Object.keys(a).forEach(function(n){var T=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(u,n,T.get?T:{enumerable:!0,get:function(){return a[n]}})}),u}var k={},Ie={},Be;function nt(){return Be||(Be=1,function(a){(()=>{var i={9932:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.docsImageRefToUrl=t.DocsImageRefType=void 0,function(e){e.resource="Resource",e.figmaNode="FigmaNode"}(o||(t.DocsImageRefType=o={})),t.docsImageRefToUrl=function(e,c,y){var l;if(e)switch(e.type){case o.resource:return(l=e.resource)===null||l===void 0?void 0:l.url;case o.figmaNode:return!e.figmaNode||!e.figmaNode.sourceId||!e.figmaNode.frameReferenceId?void 0:c.resources.getFigmaFrameHostedUrl({designSystemId:y.dsId,versionId:y.versionId},e.figmaNode.frameReferenceId);default:return}}},5673:(r,t)=>{var o;function e(c){switch(c.type){case o.documentationItem:return`@page:${c.documentationItemId}`;case o.pageHeading:return`@page:${c.documentationItemId}#${c.pageHeadingId}`;case o.url:return c.url;default:return}}Object.defineProperty(t,"__esModule",{value:!0}),t.linkAttributeToDocsLink=t.docsLinkToLinkAttributes=t.docsLinkToUrl=t.DocsLinkRefType=void 0,function(c){c.documentationItem="DocumentationItem",c.pageHeading="PageHeading",c.url="Url"}(o||(t.DocsLinkRefType=o={})),t.docsLinkToUrl=e,t.docsLinkToLinkAttributes=function(c){const y=e(c);if(y)return{href:y,target:c.openInNewTab?"_blank":"_self"}},t.linkAttributeToDocsLink=function(c,y){if(!c)return;const l=y==="_blank";if(c.startsWith("@page:")){if(c.includes("#")){const[p,s]=c.replace("@page:","").split("#");return{type:o.pageHeading,documentationItemId:p,pageHeadingId:s,openInNewTab:l}}return{type:o.documentationItem,documentationItemId:c.replace("@page:",""),openInNewTab:l}}return{type:o.url,url:c,openInNewTab:l}}},2657:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockShortcut=t.DocumentationLegacyPageBlockShortcutType=void 0,function(e){e.external="External",e.internal="Internal"}(o||(t.DocumentationLegacyPageBlockShortcutType=o={})),t.DocumentationLegacyPageBlockShortcut=class{constructor(e){var c;e.url?this.type=o.external:this.type=o.internal,this.title=this.shortcutTitleFromModel(e,this.type),this.description=this.shortcutDescriptionFromModel(e,this.type),this.previewUrl=this.shortcutPreviewUrlFromModel(e),this.type===o.internal&&(!((c=e.documentationItemPreview)===null||c===void 0)&&c.valid)&&e.documentationItemId?this.internalId=e.documentationItemId:(this.internalId=null,this.type===o.external&&e.url?this.externalUrl=e.url:this.externalUrl=null)}shortcutTitleFromModel(e,c){var y,l,p,s,d;let g=null;return e.title&&e.title.trim().length>0?g=e.title:c===o.internal?g=(l=(y=e.documentationItemPreview)===null||y===void 0?void 0:y.title)!==null&&l!==void 0?l:null:c===o.external&&(g=(d=(s=(p=e.urlPreview)===null||p===void 0?void 0:p.title)!==null&&s!==void 0?s:e.url)!==null&&d!==void 0?d:null),g&&g.trim().length!==0?g:null}shortcutDescriptionFromModel(e,c){var y;let l=null;return e.description&&e.description.trim().length>0?l=e.description:c===o.external&&(l=(y=e.urlPreview)===null||y===void 0?void 0:y.description),l&&l.trim().length!==0?l:null}shortcutPreviewUrlFromModel(e){var c,y,l,p,s;return(s=(l=(c=e.assetUrl)!==null&&c!==void 0?c:(y=e.asset)===null||y===void 0?void 0:y.url)!==null&&l!==void 0?l:(p=e.urlPreview)===null||p===void 0?void 0:p.thumbnailUrl)!==null&&s!==void 0?s:null}}},7476:(r,t)=>{var o,e;Object.defineProperty(t,"__esModule",{value:!0}),t.TextAlignment=t.Alignment=void 0,function(c){c.left="Left",c.center="Center",c.stretch="Stretch"}(o||(t.Alignment=o={})),function(c){c.left="Left",c.center="Center",c.right="Right"}(e||(t.TextAlignment=e={}))},8738:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetFormat=void 0,function(e){e.png="png",e.pdf="pdf",e.svg="svg"}(o||(t.AssetFormat=o={}))},915:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetScale=void 0,function(e){e.x1="x1",e.x2="x2",e.x3="x3",e.x4="x4"}(o||(t.AssetScale=o={}))},899:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetScaleType=void 0,function(e){e.aspectFill="AspectFill",e.aspectFit="AspectFit"}(o||(t.AssetScaleType=o={}))},6192:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.BlurType=void 0,function(e){e.layer="Layer",e.background="Background"}(o||(t.BlurType=o={}))},1160:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ALL_BORDER_POSITIONS=t.BorderPosition=void 0,function(e){e.inside="Inside",e.center="Center",e.outside="Outside"}(o||(t.BorderPosition=o={})),t.ALL_BORDER_POSITIONS=[o.inside,o.center,o.outside]},4546:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ALL_BORDER_STYLES=t.BorderStyle=void 0,function(e){e.dashed="Dashed",e.dotted="Dotted",e.solid="Solid",e.groove="Groove"}(o||(t.BorderStyle=o={})),t.ALL_BORDER_STYLES=[o.dashed,o.dotted,o.solid,o.groove]},8042:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ImportWarningType=void 0,function(e){e.UnsupportedFill="UnsupportedFill",e.UnsupportedStroke="UnsupportedStroke",e.UnsupportedEffect="UnsupportedEffect",e.StyleNotApplied="StyleNotApplied",e.NoPublishedStyles="NoPublishedStyles",e.NoPublishedComponents="NoPublishedComponents",e.NoPublishedAssets="NoPublishedAssets",e.NoVersionFound="NoVersionFound",e.ComponentHasNoThumbnail="ComponentHasNoThumbnail",e.DuplicateImportedStyleId="DuplicateImportedStyleId",e.DuplicateImportedStylePath="DuplicateImportedStylePath",e.NoPublishedElements="NoPublishedElements",e.NoUnpublishedStyles="NoUnpublishedStyles"}(o||(t.ImportWarningType=o={}))},5695:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.CustomDomainErrorCode=void 0,function(e){e.generalError="GeneralError",e.dnsNotConfigured="DNSNotConfigured",e.maintenance="Maintenance"}(o||(t.CustomDomainErrorCode=o={}))},7737:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.CustomDomainState=void 0,function(e){e.initial="Initial",e.domainSetupInProgress="DomainSetupInProgress",e.domainSetupFailed="DomainSetupFailed",e.domainSetupsSucces="DomainSetupSuccess",e.sslSetupInProgress="SSLSetupInProgress",e.sslSetupFailed="SSLSetupFailed",e.sslSetupSuccess="SSLSetupSuccess"}(o||(t.CustomDomainState=o={}))},5651:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockBehaviorDataType=void 0,function(e){e.item="Item",e.token="Token",e.asset="Asset",e.component="Component",e.figmaNode="FigmaNode",e.figmaComponent="FigmaComponent"}(o||(t.DocsBlockBehaviorDataType=o={}))},3733:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockBehaviorSelectionType=void 0,function(e){e.entity="Entity",e.group="Group",e.entityAndGroup="EntityAndGroup"}(o||(t.DocsBlockBehaviorSelectionType=o={}))},8890:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockImagePropertyAspectRatio=void 0,function(e){e.auto="Auto",e.square="Square",e.landscape="Landscape",e.portrait="Portrait",e.wide="Wide"}(o||(t.DocsBlockImagePropertyAspectRatio=o={}))},9377:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemEntityType=void 0,function(e){e.token="Token",e.tokenGroup="TokenGroup",e.asset="Asset",e.assetGroup="AssetGroup",e.component="Component",e.componentGroup="ComponentGroup"}(o||(t.DocsBlockItemEntityType=o={}))},5883:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyOptionRenderingStyle=void 0,function(e){e.segmentedControl="SegmentedControl",e.toggleButton="ToggleButton",e.select="Select",e.checkbox="Checkbox"}(o||(t.DocsBlockItemPropertyOptionRenderingStyle=o={}))},8061:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyRichTextStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.quote="Quote",e.callout="Callout",e.ol="OL",e.ul="UL"}(o||(t.DocsBlockItemPropertyRichTextStyle=o={}))},7479:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyTextStyle=void 0,function(e){e.small="Small",e.regular="Regular",e.bold="Bold"}(o||(t.DocsBlockItemPropertyTextStyle=o={}))},6839:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyType=void 0,function(e){e.richText="RichText",e.multiRichText="MultiRichText",e.text="Text",e.boolean="Boolean",e.number="Number",e.singleSelect="SingleSelect",e.multiSelect="MultiSelect",e.image="Image",e.token="Token",e.tokenType="TokenType",e.tokenProperty="TokenProperty",e.component="Component",e.componentProperty="ComponentProperty",e.asset="Asset",e.assetProperty="AssetProperty",e.embedURL="EmbedURL",e.url="URL",e.markdown="Markdown",e.code="Code",e.codeSandbox="CodeSandbox",e.table="Table",e.divider="Divider",e.storybook="Storybook",e.color="Color",e.figmaNode="FigmaNode",e.figmaComponent="FigmaComponent"}(o||(t.DocsBlockItemPropertyType=o={}))},8095:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemVariantLayoutType=void 0,function(e){e.column="Column",e.row="Row"}(o||(t.DocsBlockItemVariantLayoutType=o={}))},7291:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemVariantLayoutWidth=void 0,function(e){e.c1="1",e.c2="2",e.c3="3",e.c4="4",e.c5="5",e.c6="6",e.c7="7",e.c8="8",e.c9="9",e.c10="10",e.c11="11",e.c12="12"}(o||(t.DocsBlockItemVariantLayoutWidth=o={}))},5963:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockOptionRenderingStyle=void 0,function(e){e.segmentedControl="SegmentedControl",e.toggleButton="ToggleButton",e.select="Select",e.checkbox="Checkbox"}(o||(t.DocsBlockOptionRenderingStyle=o={}))},6644:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockRichTextPropertyStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.quote="Quote",e.callout="Callout",e.default="Default"}(o||(t.DocsBlockRichTextPropertyStyle=o={}))},306:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockTextPropertyStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.default="Default",e.defaultBold="DefaultBold",e.defaultSemibold="DefaultSemibold",e.small="Small",e.smallBold="SmallBold",e.smallSemibold="SmallSemibold",e.custom="Custom"}(o||(t.DocsBlockTextPropertyStyle=o={}))},4068:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsEntityGroupBehavior=void 0,function(e){e.group="Group",e.tabs="Tabs"}(o||(t.DocsEntityGroupBehavior=o={}))},1233:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsEntityType=void 0,function(e){e.group="Group",e.page="Page"}(o||(t.DocsEntityType=o={}))},7971:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsSectionType=void 0,function(e){e.plain="Plain",e.tabs="Tabs"}(o||(t.DocsSectionType=o={}))},5102:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyCalloutType=void 0,function(e){e.info="Info",e.success="Success",e.warning="Warning",e.error="Error"}(o||(t.DocumentationLegacyCalloutType=o={}))},2123:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyGroupBehavior=void 0,function(e){e.group="Group",e.tabs="Tabs"}(o||(t.DocumentationLegacyGroupBehavior=o={}))},9896:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyHeadingType=void 0,function(e){e[e.h1=1]="h1",e[e.h2=2]="h2",e[e.h3=3]="h3"}(o||(t.DocumentationLegacyHeadingType=o={}))},7379:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyItemType=void 0,function(e){e.group="Group",e.page="Page"}(o||(t.DocumentationLegacyItemType=o={}))},1423:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageAssetType=void 0,function(e){e.image="image",e.figmaFrame="figmaFrame"}(o||(t.DocumentationLegacyPageAssetType=o={}))},1601:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockThemeType=void 0,function(e){e.override="Override",e.comparison="Comparison"}(o||(t.DocumentationLegacyPageBlockThemeType=o={}))},1846:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockType=void 0,function(e){e.text="Text",e.heading="Heading",e.code="Code",e.unorderedList="UnorderedList",e.orderedList="OrderedList",e.quote="Quote",e.callout="Callout",e.divider="Divider",e.image="Image",e.token="Token",e.tokenList="TokenList",e.tokenGroup="TokenGroup",e.shortcuts="Shortcuts",e.link="Link",e.figmaEmbed="FigmaEmbed",e.youtubeEmbed="YoutubeEmbed",e.storybookEmbed="StorybookEmbed",e.genericEmbed="Embed",e.figmaFrames="FigmaFrames",e.custom="Custom",e.renderCode="RenderCode",e.componentAssets="ComponentAssets",e.column="Column",e.columnItem="ColumnItem",e.tabs="Tabs",e.tabItem="TabItem",e.table="Table",e.tableCell="TableCell",e.tableRow="TableRow"}(o||(t.DocumentationLegacyPageBlockType=o={}))},1255:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.FrameAlignment=void 0,function(e){e.frameHeight="FrameHeight",e.center="Center"}(o||(t.FrameAlignment=o={}))},3718:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.FrameLayout=void 0,function(e){e.c8="C8",e.c7="C7",e.c6="C6",e.c5="C5",e.c4="C4",e.c3="C3",e.c2="C2",e.c1="C1",e.c175="C1_75"}(o||(t.FrameLayout=o={}))},1:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.GradientType=void 0,function(e){e.linear="Linear",e.radial="Radial",e.angular="Angular"}(o||(t.GradientType=o={}))},2674:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.RichTextSpanAttributeType=void 0,function(e){e.bold="Bold",e.italic="Italic",e.link="Link",e.strikethrough="Strikethrough",e.code="Code"}(o||(t.RichTextSpanAttributeType=o={}))},9125:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ShadowType=void 0,function(e){e.drop="Drop",e.inner="Inner"}(o||(t.ShadowType=o={}))},4652:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.SourceType=void 0,function(e){e.figma="Figma",e.tokenStudio="TokenStudio",e.figmaVariablesPlugin="FigmaVariablesPlugin"}(o||(t.SourceType=o={}))},922:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.TextCase=void 0,function(e){e.original="Original",e.upper="Upper",e.lower="Lower",e.camel="Camel",e.smallCaps="SmallCaps"}(o||(t.TextCase=o={}))},7040:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.TextDecoration=void 0,function(e){e.original="None",e.underline="Underline",e.strikethrough="Strikethrough"}(o||(t.TextDecoration=o={}))},3788:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DT_TOKEN_TYPES=t.tokenTypeIsReferencable=t.REFERENCABLE_TOKEN_TYPES=t.REPLACABLE_TOKEN_TYPES=t.tokenTypeIsNonPure=t.tokenTypeIsPure=t.PURE_TOKEN_TYPES=t.ALL_TOKEN_TYPES=t.MS_DIMENSION_TOKEN_TYPES=t.RAW_DIMENSION_TOKEN_TYPES=t.DIMENSION_TOKEN_TYPES=t.OPTION_TOKEN_TYPES=t.STRING_TOKEN_TYPES=t.TokenType=void 0,function(e){e.color="Color",e.typography="Typography",e.shadow="Shadow",e.border="Border",e.gradient="Gradient",e.blur="Blur",e.radius="BorderRadius",e.borderWidth="BorderWidth",e.duration="Duration",e.fontSize="FontSize",e.dimension="Dimension",e.letterSpacing="LetterSpacing",e.lineHeight="LineHeight",e.opacity="Opacity",e.paragraphSpacing="ParagraphSpacing",e.size="Size",e.space="Space",e.zIndex="ZIndex",e.textDecoration="TextDecoration",e.textCase="TextCase",e.visibility="Visibility",e.fontFamily="FontFamily",e.fontWeight="FontWeight",e.string="String",e.productCopy="ProductCopy"}(o||(t.TokenType=o={})),t.STRING_TOKEN_TYPES=[o.string,o.productCopy,o.fontFamily,o.fontWeight],t.OPTION_TOKEN_TYPES=[o.textCase,o.textDecoration,o.visibility],t.DIMENSION_TOKEN_TYPES=[o.dimension,o.size,o.space,o.opacity,o.fontSize,o.lineHeight,o.letterSpacing,o.paragraphSpacing,o.borderWidth,o.radius,o.duration,o.zIndex],t.RAW_DIMENSION_TOKEN_TYPES=[o.opacity,o.zIndex],t.MS_DIMENSION_TOKEN_TYPES=[o.duration],t.ALL_TOKEN_TYPES=[...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES,o.color,o.gradient,o.border,o.radius,o.shadow,o.typography,o.blur],t.PURE_TOKEN_TYPES=[...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES],t.tokenTypeIsPure=e=>t.PURE_TOKEN_TYPES.includes(e),t.tokenTypeIsNonPure=e=>!(0,t.tokenTypeIsPure)(e),t.REPLACABLE_TOKEN_TYPES=[o.color,...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES],t.REFERENCABLE_TOKEN_TYPES=[o.color,...t.DIMENSION_TOKEN_TYPES,o.fontFamily,o.fontWeight,o.textCase,o.textDecoration],t.tokenTypeIsReferencable=e=>t.REFERENCABLE_TOKEN_TYPES.includes(e),t.DT_TOKEN_TYPES=[o.color,o.shadow,o.gradient,o.typography,o.border,...t.DIMENSION_TOKEN_TYPES,o.fontFamily,o.fontWeight,...t.OPTION_TOKEN_TYPES]},8607:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.MS_UNITS=t.PX_UNITS=t.RAW_UNITS=t.LINE_HEIGHT_UNITS=t.SIZE_UNITS=t.Unit=void 0,function(e){e.pixels="Pixels",e.percent="Percent",e.rem="Rem",e.ms="Ms",e.raw="Raw"}(o||(t.Unit=o={})),t.SIZE_UNITS=[o.pixels,o.percent,o.rem],t.LINE_HEIGHT_UNITS=[o.pixels,o.percent,o.rem,o.raw],t.RAW_UNITS=[o.raw],t.PX_UNITS=[o.pixels],t.MS_UNITS=[o.ms]},9478:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.UserRole=void 0,function(e){e.owner="Owner",e.admin="Admin",e.creator="Creator",e.billing="Billing",e.viewer="Viewer"}(o||(t.UserRole=o={}))},6141:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.VisibilityType=void 0,function(e){e.visible="Visible",e.hidden="Hidden"}(o||(t.VisibilityType=o={}))},6298:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceNPMRegistryAuthType=void 0,function(e){e.basic="Basic",e.bearer="Bearer"}(o||(t.WorkspaceNPMRegistryAuthType=o={}))},7968:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceNPMRegistryType=void 0,function(e){e.npmJS="NPMJS",e.gitHub="GitHub",e.azureDevOps="AzureDevOps",e.artifactory="Artifactory",e.custom="Custom"}(o||(t.WorkspaceNPMRegistryType=o={}))},5503:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionPlanInterval=void 0,function(e){e.yearly="yearly",e.monthly="monthly"}(o||(t.WorkspaceSubscriptionPlanInterval=o={}))},4290:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionProductCode=void 0,function(e){e.free="free",e.team="team",e.teamTest="team_test",e.company="company",e.enterprise="enterprise"}(o||(t.WorkspaceSubscriptionProductCode=o={}))},3607:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionStatus=void 0,function(e){e.active="active",e.gracePeriod="gracePeriod",e.cancelled="cancelled",e.suspended="suspended"}(o||(t.WorkspaceSubscriptionStatus=o={}))},2802:(r,t)=>{var o,e;Object.defineProperty(t,"__esModule",{value:!0}),t.PulsarExecutor=t.OutputFileType=void 0,function(c){c.copyRemoteUrl="copyRemoteUrl",c.text="text",c.binary="binary"}(o||(t.OutputFileType=o={})),function(c){c.supernova="supernova",c.local="local"}(e||(t.PulsarExecutor=e={}))}},u={};function n(r){var t=u[r];if(t!==void 0)return t.exports;var o=u[r]={exports:{}};return i[r](o,o.exports,n),o.exports}var T={};(()=>{var r=T;Object.defineProperty(r,"__esModule",{value:!0}),r.UserRole=r.Unit=r.TokenType=r.TextDecoration=r.TextCase=r.ShadowType=r.RichTextSpanAttributeType=r.GradientType=r.FrameLayout=r.FrameAlignment=r.SourceType=r.DocsImageRefType=r.DocsLinkRefType=r.DocsSectionType=r.DocsEntityType=r.DocsEntityGroupBehavior=r.DocsBlockTextPropertyStyle=r.DocsBlockRichTextPropertyStyle=r.DocsBlockOptionRenderingStyle=r.DocsBlockItemVariantLayoutWidth=r.DocsBlockItemVariantLayoutType=r.DocsBlockItemPropertyType=r.DocsBlockItemPropertyTextStyle=r.DocsBlockItemPropertyRichTextStyle=r.DocsBlockItemPropertyOptionRenderingStyle=r.DocsBlockItemEntityType=r.DocsBlockImagePropertyAspectRatio=r.DocsBlockBehaviorSelectionType=r.DocsBlockBehaviorDataType=r.DocumentationLegacyPageBlockShortcutType=r.DocumentationLegacyPageBlockThemeType=r.DocumentationLegacyPageBlockType=r.DocumentationLegacyPageAssetType=r.DocumentationLegacyItemType=r.DocumentationLegacyHeadingType=r.DocumentationLegacyGroupBehavior=r.DocumentationLegacyCalloutType=r.BorderStyle=r.BorderPosition=r.BlurType=r.AssetScaleType=r.AssetScale=r.AssetFormat=r.Alignment=r.ALL_TOKEN_TYPES=r.ALL_BORDER_STYLES=r.ALL_BORDER_POSITIONS=r.OPTION_TOKEN_TYPES=r.STRING_TOKEN_TYPES=r.DIMENSION_TOKEN_TYPES=void 0,r.PulsarExecutor=r.OutputFileType=r.CustomDomainState=r.CustomDomainErrorCode=r.ImportWarningType=r.WorkspaceNPMRegistryType=r.WorkspaceNPMRegistryAuthType=r.WorkspaceSubscriptionStatus=r.WorkspaceSubscriptionProductCode=r.WorkspaceSubscriptionPlanInterval=r.VisibilityType=void 0;var t=n(3788);Object.defineProperty(r,"DIMENSION_TOKEN_TYPES",{enumerable:!0,get:function(){return t.DIMENSION_TOKEN_TYPES}}),Object.defineProperty(r,"STRING_TOKEN_TYPES",{enumerable:!0,get:function(){return t.STRING_TOKEN_TYPES}}),Object.defineProperty(r,"OPTION_TOKEN_TYPES",{enumerable:!0,get:function(){return t.OPTION_TOKEN_TYPES}});var o=n(1160);Object.defineProperty(r,"ALL_BORDER_POSITIONS",{enumerable:!0,get:function(){return o.ALL_BORDER_POSITIONS}});var e=n(4546);Object.defineProperty(r,"ALL_BORDER_STYLES",{enumerable:!0,get:function(){return e.ALL_BORDER_STYLES}});var c=n(3788);Object.defineProperty(r,"ALL_TOKEN_TYPES",{enumerable:!0,get:function(){return c.ALL_TOKEN_TYPES}});var y=n(7476);Object.defineProperty(r,"Alignment",{enumerable:!0,get:function(){return y.Alignment}});var l=n(8738);Object.defineProperty(r,"AssetFormat",{enumerable:!0,get:function(){return l.AssetFormat}});var p=n(915);Object.defineProperty(r,"AssetScale",{enumerable:!0,get:function(){return p.AssetScale}});var s=n(899);Object.defineProperty(r,"AssetScaleType",{enumerable:!0,get:function(){return s.AssetScaleType}});var d=n(6192);Object.defineProperty(r,"BlurType",{enumerable:!0,get:function(){return d.BlurType}});var g=n(1160);Object.defineProperty(r,"BorderPosition",{enumerable:!0,get:function(){return g.BorderPosition}});var S=n(4546);Object.defineProperty(r,"BorderStyle",{enumerable:!0,get:function(){return S.BorderStyle}});var b=n(5102);Object.defineProperty(r,"DocumentationLegacyCalloutType",{enumerable:!0,get:function(){return b.DocumentationLegacyCalloutType}});var P=n(2123);Object.defineProperty(r,"DocumentationLegacyGroupBehavior",{enumerable:!0,get:function(){return P.DocumentationLegacyGroupBehavior}});var h=n(9896);Object.defineProperty(r,"DocumentationLegacyHeadingType",{enumerable:!0,get:function(){return h.DocumentationLegacyHeadingType}});var _=n(7379);Object.defineProperty(r,"DocumentationLegacyItemType",{enumerable:!0,get:function(){return _.DocumentationLegacyItemType}});var E=n(1423);Object.defineProperty(r,"DocumentationLegacyPageAssetType",{enumerable:!0,get:function(){return E.DocumentationLegacyPageAssetType}});var I=n(1846);Object.defineProperty(r,"DocumentationLegacyPageBlockType",{enumerable:!0,get:function(){return I.DocumentationLegacyPageBlockType}});var H=n(1601);Object.defineProperty(r,"DocumentationLegacyPageBlockThemeType",{enumerable:!0,get:function(){return H.DocumentationLegacyPageBlockThemeType}});var U=n(2657);Object.defineProperty(r,"DocumentationLegacyPageBlockShortcutType",{enumerable:!0,get:function(){return U.DocumentationLegacyPageBlockShortcutType}});var W=n(5651);Object.defineProperty(r,"DocsBlockBehaviorDataType",{enumerable:!0,get:function(){return W.DocsBlockBehaviorDataType}});var V=n(3733);Object.defineProperty(r,"DocsBlockBehaviorSelectionType",{enumerable:!0,get:function(){return V.DocsBlockBehaviorSelectionType}});var Y=n(8890);Object.defineProperty(r,"DocsBlockImagePropertyAspectRatio",{enumerable:!0,get:function(){return Y.DocsBlockImagePropertyAspectRatio}});var G=n(9377);Object.defineProperty(r,"DocsBlockItemEntityType",{enumerable:!0,get:function(){return G.DocsBlockItemEntityType}});var K=n(5883);Object.defineProperty(r,"DocsBlockItemPropertyOptionRenderingStyle",{enumerable:!0,get:function(){return K.DocsBlockItemPropertyOptionRenderingStyle}});var z=n(8061);Object.defineProperty(r,"DocsBlockItemPropertyRichTextStyle",{enumerable:!0,get:function(){return z.DocsBlockItemPropertyRichTextStyle}});var q=n(7479);Object.defineProperty(r,"DocsBlockItemPropertyTextStyle",{enumerable:!0,get:function(){return q.DocsBlockItemPropertyTextStyle}});var Z=n(6839);Object.defineProperty(r,"DocsBlockItemPropertyType",{enumerable:!0,get:function(){return Z.DocsBlockItemPropertyType}});var X=n(8095);Object.defineProperty(r,"DocsBlockItemVariantLayoutType",{enumerable:!0,get:function(){return X.DocsBlockItemVariantLayoutType}});var Q=n(7291);Object.defineProperty(r,"DocsBlockItemVariantLayoutWidth",{enumerable:!0,get:function(){return Q.DocsBlockItemVariantLayoutWidth}});var J=n(5963);Object.defineProperty(r,"DocsBlockOptionRenderingStyle",{enumerable:!0,get:function(){return J.DocsBlockOptionRenderingStyle}});var ee=n(6644);Object.defineProperty(r,"DocsBlockRichTextPropertyStyle",{enumerable:!0,get:function(){return ee.DocsBlockRichTextPropertyStyle}});var te=n(306);Object.defineProperty(r,"DocsBlockTextPropertyStyle",{enumerable:!0,get:function(){return te.DocsBlockTextPropertyStyle}});var oe=n(4068);Object.defineProperty(r,"DocsEntityGroupBehavior",{enumerable:!0,get:function(){return oe.DocsEntityGroupBehavior}});var re=n(1233);Object.defineProperty(r,"DocsEntityType",{enumerable:!0,get:function(){return re.DocsEntityType}});var ne=n(7971);Object.defineProperty(r,"DocsSectionType",{enumerable:!0,get:function(){return ne.DocsSectionType}});var ae=n(5673);Object.defineProperty(r,"DocsLinkRefType",{enumerable:!0,get:function(){return ae.DocsLinkRefType}});var ie=n(9932);Object.defineProperty(r,"DocsImageRefType",{enumerable:!0,get:function(){return ie.DocsImageRefType}});var ce=n(4652);Object.defineProperty(r,"SourceType",{enumerable:!0,get:function(){return ce.SourceType}});var le=n(1255);Object.defineProperty(r,"FrameAlignment",{enumerable:!0,get:function(){return le.FrameAlignment}});var se=n(3718);Object.defineProperty(r,"FrameLayout",{enumerable:!0,get:function(){return se.FrameLayout}});var ue=n(1);Object.defineProperty(r,"GradientType",{enumerable:!0,get:function(){return ue.GradientType}});var pe=n(2674);Object.defineProperty(r,"RichTextSpanAttributeType",{enumerable:!0,get:function(){return pe.RichTextSpanAttributeType}});var de=n(9125);Object.defineProperty(r,"ShadowType",{enumerable:!0,get:function(){return de.ShadowType}});var ye=n(922);Object.defineProperty(r,"TextCase",{enumerable:!0,get:function(){return ye.TextCase}});var Te=n(7040);Object.defineProperty(r,"TextDecoration",{enumerable:!0,get:function(){return Te.TextDecoration}});var me=n(3788);Object.defineProperty(r,"TokenType",{enumerable:!0,get:function(){return me.TokenType}});var fe=n(8607);Object.defineProperty(r,"Unit",{enumerable:!0,get:function(){return fe.Unit}});var ge=n(9478);Object.defineProperty(r,"UserRole",{enumerable:!0,get:function(){return ge.UserRole}});var Se=n(6141);Object.defineProperty(r,"VisibilityType",{enumerable:!0,get:function(){return Se.VisibilityType}});var be=n(5503);Object.defineProperty(r,"WorkspaceSubscriptionPlanInterval",{enumerable:!0,get:function(){return be.WorkspaceSubscriptionPlanInterval}});var ve=n(4290);Object.defineProperty(r,"WorkspaceSubscriptionProductCode",{enumerable:!0,get:function(){return ve.WorkspaceSubscriptionProductCode}});var Pe=n(3607);Object.defineProperty(r,"WorkspaceSubscriptionStatus",{enumerable:!0,get:function(){return Pe.WorkspaceSubscriptionStatus}});var he=n(6298);Object.defineProperty(r,"WorkspaceNPMRegistryAuthType",{enumerable:!0,get:function(){return he.WorkspaceNPMRegistryAuthType}});var ke=n(7968);Object.defineProperty(r,"WorkspaceNPMRegistryType",{enumerable:!0,get:function(){return ke.WorkspaceNPMRegistryType}});var _e=n(8042);Object.defineProperty(r,"ImportWarningType",{enumerable:!0,get:function(){return _e.ImportWarningType}});var Oe=n(5695);Object.defineProperty(r,"CustomDomainErrorCode",{enumerable:!0,get:function(){return Oe.CustomDomainErrorCode}});var Ce=n(7737);Object.defineProperty(r,"CustomDomainState",{enumerable:!0,get:function(){return Ce.CustomDomainState}});var A=n(2802);Object.defineProperty(r,"OutputFileType",{enumerable:!0,get:function(){return A.OutputFileType}}),Object.defineProperty(r,"PulsarExecutor",{enumerable:!0,get:function(){return A.PulsarExecutor}})})();var m=a;for(var f in T)m[f]=T[f];T.__esModule&&Object.defineProperty(m,"__esModule",{value:!0})})()}(Ie)),Ie}var O=function(){return O=Object.assign||function(i){for(var u,n=1,T=arguments.length;n0&&u>="0"&&u<="9"?"_"+u+n:""+u.toUpperCase()+n}function we(a){return a.charAt(0).toUpperCase()+a.slice(1).toLowerCase()}function He(a,i){return i===void 0&&(i={}),L(a,O({delimiter:"",transform:Ee},i))}function Ue(a,i){return i===0?a.toLowerCase():Ee(a,i)}function lt(a,i){return i===0?a.toLowerCase():we(a)}function st(a,i){return i===void 0&&(i={}),He(a,O({transform:Ue},i))}function We(a){return a.charAt(0).toUpperCase()+a.substr(1)}function Ve(a){return We(a.toLowerCase())}function Ye(a,i){return i===void 0&&(i={}),L(a,O({delimiter:" ",transform:Ve},i))}function ut(a){return a.toUpperCase()}function pt(a,i){return i===void 0&&(i={}),L(a,O({delimiter:"_",transform:ut},i))}function w(a,i){return i===void 0&&(i={}),L(a,O({delimiter:"."},i))}function dt(a,i){return i===void 0&&(i={}),Ye(a,O({delimiter:"-"},i))}function yt(a,i){return i===void 0&&(i={}),w(a,O({delimiter:"-"},i))}function Tt(a,i){return i===void 0&&(i={}),w(a,O({delimiter:"/"},i))}function Ge(a,i){var u=a.toLowerCase();return i===0?We(u):u}function mt(a,i){return i===void 0&&(i={}),L(a,O({delimiter:" ",transform:Ge},i))}function ft(a,i){return i===void 0&&(i={}),w(a,O({delimiter:"_"},i))}const gt=Object.freeze(Object.defineProperty({__proto__:null,camelCase:st,camelCaseTransform:Ue,camelCaseTransformMerge:lt,capitalCase:Ye,capitalCaseTransform:Ve,constantCase:pt,dotCase:w,headerCase:dt,noCase:L,paramCase:yt,pascalCase:He,pascalCaseTransform:Ee,pascalCaseTransformMerge:we,pathCase:Tt,sentenceCase:mt,sentenceCaseTransform:Ge,snakeCase:ft},Symbol.toStringTag,{value:"Module"})),St=rt(gt);(function(a){(()=>{var i={639:(r,t,o)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Iterators=void 0;const e=o(58);t.Iterators=class{static allTokenTypes(){return[e.TokenType.color,e.TokenType.typography,e.TokenType.dimension,e.TokenType.size,e.TokenType.space,e.TokenType.opacity,e.TokenType.fontSize,e.TokenType.lineHeight,e.TokenType.letterSpacing,e.TokenType.paragraphSpacing,e.TokenType.borderWidth,e.TokenType.radius,e.TokenType.duration,e.TokenType.zIndex,e.TokenType.shadow,e.TokenType.border,e.TokenType.gradient,e.TokenType.string,e.TokenType.productCopy,e.TokenType.fontFamily,e.TokenType.fontWeight,e.TokenType.textCase,e.TokenType.textDecoration,e.TokenType.visibility,e.TokenType.blur]}static allDimensionTokenTypes(){return[e.TokenType.dimension,e.TokenType.size,e.TokenType.space,e.TokenType.opacity,e.TokenType.fontSize,e.TokenType.lineHeight,e.TokenType.letterSpacing,e.TokenType.paragraphSpacing,e.TokenType.borderWidth,e.TokenType.radius,e.TokenType.duration,e.TokenType.zIndex]}static allStringTokenTypes(){return[e.TokenType.string,e.TokenType.productCopy,e.TokenType.fontFamily,e.TokenType.fontWeight]}static allOptionTokenTypes(){return[e.TokenType.textCase,e.TokenType.textDecoration,e.TokenType.visibility]}}},989:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ColorFormat=void 0,(o=t.ColorFormat||(t.ColorFormat={})).rgb="rgb",o.rgba="rgba",o.smartRgba="smartRgba",o.hex6="hex6",o.hex8="hex8",o.hashHex6="hashHex6",o.hashHex8="hashHex8",o.smartHashHex="smartHashHex",o.smartHex="smartHex",o.hsl="hsl",o.hsla="hsla",o.smartHsla="smartHsla",o.smartUIColor="smartUIColor"},545:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.StringCase=void 0,(o=t.StringCase||(t.StringCase={})).camelCase="camelCase",o.capitalCase="capitalCase",o.constantCase="constantCase",o.dotCase="dotCase",o.headerCase="headerCase",o.noCase="noCase",o.paramCase="paramCase",o.pascalCase="pascalCase",o.pathCase="pathCase",o.sentenceCase="sentenceCase",o.snakeCase="snakeCase"},617:(r,t,o)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.FileHelper=void 0;const e=o(58);t.FileHelper=class{static createCopyRemoteFile({relativePath:c,fileName:y,url:l}){return{path:c,name:y,type:e.OutputFileType.copyRemoteUrl,url:l}}static createTextFile({relativePath:c,fileName:y,content:l}){return{path:c,name:y,type:e.OutputFileType.text,content:l}}static createBinaryFile({relativePath:c,fileName:y,data:l}){return{path:c,name:y,type:e.OutputFileType.binary,data:l}}}},761:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.sureOptionalReference=void 0,t.sureOptionalReference=function(o,e,c=!0){if(!o||!c)return null;const y=e.get(o);if(!y)throw new Error(`Trying to retrieve unknown referenced token ${o}`);return y}},118:(r,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.NetworkHelper=void 0,t.NetworkHelper=class{static async fetchAsText(o,e,c){return(await this.performFetch(o,e,c)).text()}static async fetchAsJSON(o,e,c){return(await this.performFetch(o,e,c)).json()}static async fetchAsData(o,e,c){return(await this.performFetch(o,e,c)).arrayBuffer()}static async performFetch(o,e,c){try{const y=await o.network.fetch(e,c);if(!y.ok)throw new Error(`Request failed with status ${y.status}, error: ${await y.text()}`);return y}catch(y){throw y}}}},771:(r,t,o)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CSSHelper=void 0;const e=o(58),c=o(761),y=o(952);t.CSSHelper=class{static tokenToCSS(l,p,s){switch(l.tokenType){case e.TokenType.color:return this.colorTokenValueToCSS(l.value,p,s);case e.TokenType.border:return this.borderTokenValueToCSS(l.value,p,s);case e.TokenType.gradient:return this.gradientTokenValueToCSS(l.value,p,s);case e.TokenType.dimension:case e.TokenType.size:case e.TokenType.space:case e.TokenType.opacity:case e.TokenType.fontSize:case e.TokenType.lineHeight:case e.TokenType.letterSpacing:case e.TokenType.paragraphSpacing:case e.TokenType.borderWidth:case e.TokenType.radius:case e.TokenType.duration:case e.TokenType.zIndex:return this.dimensionTokenValueToCSS(l.value,p,s);case e.TokenType.shadow:return this.shadowTokenValueToCSS(l.value,p,s);case e.TokenType.fontWeight:return this.fontWeightTokenValueToCSS(l.value,p,s);case e.TokenType.fontFamily:case e.TokenType.productCopy:case e.TokenType.string:return this.stringTokenValueToCSS(l.value,p,s);case e.TokenType.textCase:case e.TokenType.textDecoration:case e.TokenType.visibility:return this.optionTokenValueToCSS(l.value,p,s,l.tokenType);case e.TokenType.blur:return this.blurTokenValueToCSS(l.value,p,s);case e.TokenType.typography:return this.typographyTokenValueToCSS(l.value,p,s);default:throw new e.UnreachableCaseError(l.tokenType,"Unsupported token type for transformation to CSS:")}}static colorTokenValueToCSS(l,p,s){return y.ColorHelper.formattedColorOrVariableName(l,p,s)}static borderTokenValueToCSS(l,p,s){const d=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);if(d)return s.tokenToVariableRef(d);const g=this.dimensionTokenValueToCSS(l.width,p,s),S=this.borderStyleToCSS(l.style),b=this.colorTokenValueToCSS(l.color,p,s);return this.borderPositionToCSS(l.position),`${g} ${S} ${b}`}static gradientTokenValueToCSS(l,p,s){return l.map(d=>this.gradientLayerToCSS(d,p,s)).join(", ")}static gradientLayerToCSS(l,p,s){const d=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);if(d)return s.tokenToVariableRef(d);let g="";switch(l.type){case e.GradientType.linear:g="linear-gradient(0deg, ";break;case e.GradientType.radial:g="radial-gradient(circle, ";break;case e.GradientType.angular:g="conic-gradient(";break;default:g="linear-gradient(0deg, "}return`${g}${l.stops.map(S=>`${this.colorTokenValueToCSS(S.color,p,s)} ${y.ColorHelper.roundToDecimals(100*S.position,s.decimals)}%`).join(", ")})`}static dimensionTokenValueToCSS(l,p,s){const d=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);return d?s.tokenToVariableRef(d):`${y.ColorHelper.roundToDecimals(l.measure,s.decimals)}${this.unitToCSS(l.unit)}`}static shadowTokenValueToCSS(l,p,s){return l.map(d=>this.shadowLayerToCSS(d,p,s)).join(", ")}static shadowLayerToCSS(l,p,s){const d=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);return d?s.tokenToVariableRef(d):`${l.type===e.ShadowType.inner?"inset ":""}${l.x}px ${l.y}px ${l.radius}px ${l.spread}px ${this.colorTokenValueToCSS({...l.color,...l.opacity&&{opacity:l.opacity}},p,s)}`}static fontWeightTokenValueToCSS(l,p,s){const d=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);return d?s.tokenToVariableRef(d):`${l.text}`}static stringTokenValueToCSS(l,p,s){const d=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);return d?s.tokenToVariableRef(d):`"${l.text}"`}static optionTokenValueToCSS(l,p,s,d){const g=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);return g?s.tokenToVariableRef(g):d===e.TokenType.textCase?this.textCaseToCSS(l.value):d===e.TokenType.textDecoration?this.textDecorationToCSS(l.value):l.value}static blurTokenValueToCSS(l,p,s){const d=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);return d?s.tokenToVariableRef(d):`blur(${this.dimensionTokenValueToCSS(l.radius,p,s)})`}static typographyTokenValueToCSS(l,p,s){const d=(0,c.sureOptionalReference)(l.referencedTokenId,p,s.allowReferences);if(d)return s.tokenToVariableRef(d);const g=(0,c.sureOptionalReference)(l.fontFamily.referencedTokenId,p,s.allowReferences),S=(0,c.sureOptionalReference)(l.fontWeight.referencedTokenId,p,s.allowReferences),b=(0,c.sureOptionalReference)(l.textDecoration.referencedTokenId,p,s.allowReferences),P=(0,c.sureOptionalReference)(l.textCase.referencedTokenId,p,s.allowReferences),h={fontFamily:g?s.tokenToVariableRef(g):l.fontFamily.text,fontWeight:S?s.tokenToVariableRef(S):l.fontWeight.text,textDecoration:b?s.tokenToVariableRef(b):l.textDecoration.value===e.TextDecoration.original?this.textDecorationToCSS(l.textDecoration.value):void 0,textCase:P?s.tokenToVariableRef(P):l.textCase.value===e.TextCase.original?this.textCaseToCSS(l.textCase.value):void 0,caps:l.textCase.value===e.TextCase.smallCaps,fontSize:this.dimensionTokenValueToCSS(l.fontSize,p,s),lineHeight:l.lineHeight?this.dimensionTokenValueToCSS(l.lineHeight,p,s):void 0},_=h.fontSize;return`${h.caps?"small-caps ":""}${h.fontWeight} ${h.lineHeight?`${_}/${h.lineHeight}`:_} ${g?h.fontFamily:`"${h.fontFamily}"`}`}static borderStyleToCSS(l){switch(l){case e.BorderStyle.dashed:return"dashed";case e.BorderStyle.dotted:return"dotted";case e.BorderStyle.solid:return"solid";case e.BorderStyle.groove:return"groove";default:return"solid"}}static borderPositionToCSS(l){switch(l){case e.BorderPosition.center:return"center";case e.BorderPosition.inside:return"inside";case e.BorderPosition.outside:default:return"outside"}}static unitToCSS(l){switch(l){case e.Unit.percent:return"%";case e.Unit.pixels:return"px";case e.Unit.rem:return"rem";case e.Unit.raw:return"";case e.Unit.ms:return"ms";default:return"px"}}static textCaseToCSS(l){switch(l){case e.TextCase.original:return"none";case e.TextCase.upper:return"uppercase";case e.TextCase.lower:return"lowercase";case e.TextCase.camel:case e.TextCase.smallCaps:return"capitalize"}}static textDecorationToCSS(l){switch(l){case e.TextDecoration.original:return"none";case e.TextDecoration.underline:return"underline";case e.TextDecoration.strikethrough:return"line-through"}}}},952:(r,t,o)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ColorHelper=void 0;const e=o(989),c=o(761);class y{static formattedColorOrVariableName(p,s,d){let g,S,b;const P=(0,c.sureOptionalReference)(p.referencedTokenId,s,d.allowReferences);if(P)g=d.tokenToVariableRef(P);else{const h=(0,c.sureOptionalReference)(p.color.referencedTokenId,s,d.allowReferences);h&&(S=d.tokenToVariableRef(h));const _=(0,c.sureOptionalReference)(p.opacity.referencedTokenId,s,d.allowReferences);_&&(b=d.tokenToVariableRef(_))}if(g)return g;if(!g&&!S&&!b)return this.formattedColor(p,d.colorFormat,d.decimals);switch(d.colorFormat){case e.ColorFormat.rgb:case e.ColorFormat.rgba:case e.ColorFormat.smartRgba:return this.colorToRgb(d.colorFormat,this.normalizedIntColor(p),p.opacity.measure,d.decimals,S,b);default:return this.formattedColor(p,d.colorFormat,d.decimals)}}static formattedColor(p,s,d=3){switch(s){case e.ColorFormat.hex6:case e.ColorFormat.hex8:case e.ColorFormat.hashHex6:case e.ColorFormat.hashHex8:case e.ColorFormat.smartHex:case e.ColorFormat.smartHashHex:return this.colorToHex(s,this.normalizedIntColor(p),p.opacity.measure);case e.ColorFormat.rgb:case e.ColorFormat.rgba:case e.ColorFormat.smartRgba:return this.colorToRgb(s,this.normalizedIntColor(p),p.opacity.measure,d,null,null);case e.ColorFormat.hsl:case e.ColorFormat.hsla:case e.ColorFormat.smartHsla:return this.colorToHsl(s,this.normalizedFractionalColor(p),p.opacity.measure,d);case e.ColorFormat.smartUIColor:return this.colorToUIColor(this.normalizedIntColor(p),p.opacity.measure,d)}}static colorToRgb(p,s,d,g,S,b){let P;return P=p===e.ColorFormat.rgba||p===e.ColorFormat.smartRgba&&d<1?`rgba(${S||`${s.r}, ${s.g}, ${s.b}`}, ${b||this.roundToDecimals(d,g)})`:`rgb(${S||`${s.r}, ${s.g}, ${s.b}`})`,P}static colorToHex(p,s,d){let g=`${this.pHex(s.r)}${this.pHex(s.g)}${this.pHex(s.b)}`;return(p===e.ColorFormat.hex8||p===e.ColorFormat.hashHex8||p===e.ColorFormat.smartHex&&d<1||p===e.ColorFormat.smartHashHex&&d<1)&&(g+=`${this.pHex(Math.round(255*d))}`),p!==e.ColorFormat.hashHex6&&p!==e.ColorFormat.hashHex8&&p!==e.ColorFormat.smartHashHex||(g=`#${g}`),g}static colorToHsl(p,s,d,g){const S=Math.max(s.r,s.g,s.b),b=Math.min(s.r,s.g,s.b);let P,h,_,E=(S+b)/2;if(S===b)P=h=0;else{const I=S-b;h=E>.5?I/(2-S-b):I/(S+b),S===s.r?P=(s.g-s.b)/I+(s.g{Object.defineProperty(t,"__esModule",{value:!0}),t.NamingHelper=void 0;const e=o(110),c=o(545);class y{static codeSafeVariableNameForToken(p,s,d,g){let S=[];return d&&(S=[...d.path],d.isRoot||S.push(d.name)),S.push(p.name),g&&g.length>0&&S.unshift(g),y.codeSafeVariableName(S,s)}static codeSafeVariableName(p,s){let d=typeof p=="string"?p:p.join(" ");switch(d=d.replaceAll(/[^a-zA-Z0-9_-]/g,"_"),s){case c.StringCase.camelCase:d=(0,e.camelCase)(d);break;case c.StringCase.capitalCase:d=(0,e.capitalCase)(d);break;case c.StringCase.constantCase:d=(0,e.constantCase)(d);break;case c.StringCase.dotCase:d=(0,e.dotCase)(d);break;case c.StringCase.headerCase:d=(0,e.headerCase)(d);break;case c.StringCase.noCase:d=(0,e.noCase)(d);break;case c.StringCase.paramCase:d=(0,e.paramCase)(d);break;case c.StringCase.pascalCase:d=(0,e.pascalCase)(d);break;case c.StringCase.pathCase:d=(0,e.pathCase)(d);break;case c.StringCase.sentenceCase:d=(0,e.sentenceCase)(d);break;case c.StringCase.snakeCase:d=(0,e.snakeCase)(d)}return s!==c.StringCase.snakeCase&&s!==c.StringCase.constantCase&&(d=d.replaceAll("_","")),d.match(/^[^a-zA-Z]/)&&(d="_"+d),d}static nameAsCSSVarReference(p){return`var(--${p})`}static nameAsCSSVarDeclaration(p){return`--${p}`}}t.NamingHelper=y},58:r=>{r.exports=nt()},110:r=>{r.exports=St}},u={};function n(r){var t=u[r];if(t!==void 0)return t.exports;var o=u[r]={exports:{}};return i[r](o,o.exports,n),o.exports}var T={};(()=>{var r=T;Object.defineProperty(r,"__esModule",{value:!0}),r.ColorFormat=r.StringCase=r.Iterators=r.CSSHelper=r.FileHelper=r.ColorHelper=r.NamingHelper=r.NetworkHelper=void 0;var t=n(118);Object.defineProperty(r,"NetworkHelper",{enumerable:!0,get:function(){return t.NetworkHelper}});var o=n(453);Object.defineProperty(r,"NamingHelper",{enumerable:!0,get:function(){return o.NamingHelper}});var e=n(952);Object.defineProperty(r,"ColorHelper",{enumerable:!0,get:function(){return e.ColorHelper}});var c=n(617);Object.defineProperty(r,"FileHelper",{enumerable:!0,get:function(){return c.FileHelper}});var y=n(771);Object.defineProperty(r,"CSSHelper",{enumerable:!0,get:function(){return y.CSSHelper}});var l=n(639);Object.defineProperty(r,"Iterators",{enumerable:!0,get:function(){return l.Iterators}});var p=n(545);Object.defineProperty(r,"StringCase",{enumerable:!0,get:function(){return p.StringCase}});var s=n(989);Object.defineProperty(r,"ColorFormat",{enumerable:!0,get:function(){return s.ColorFormat}})})();var m=a;for(var f in T)m[f]=T[f];T.__esModule&&Object.defineProperty(m,"__esModule",{value:!0})})()})(k);var v={};(function(a){(()=>{var i={9932:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.docsImageRefToUrl=t.DocsImageRefType=void 0,function(e){e.resource="Resource",e.figmaNode="FigmaNode"}(o||(t.DocsImageRefType=o={})),t.docsImageRefToUrl=function(e,c,y){var l;if(e)switch(e.type){case o.resource:return(l=e.resource)===null||l===void 0?void 0:l.url;case o.figmaNode:return!e.figmaNode||!e.figmaNode.sourceId||!e.figmaNode.frameReferenceId?void 0:c.resources.getFigmaFrameHostedUrl({designSystemId:y.dsId,versionId:y.versionId},e.figmaNode.frameReferenceId);default:return}}},5673:(r,t)=>{var o;function e(c){switch(c.type){case o.documentationItem:return`@page:${c.documentationItemId}`;case o.pageHeading:return`@page:${c.documentationItemId}#${c.pageHeadingId}`;case o.url:return c.url;default:return}}Object.defineProperty(t,"__esModule",{value:!0}),t.linkAttributeToDocsLink=t.docsLinkToLinkAttributes=t.docsLinkToUrl=t.DocsLinkRefType=void 0,function(c){c.documentationItem="DocumentationItem",c.pageHeading="PageHeading",c.url="Url"}(o||(t.DocsLinkRefType=o={})),t.docsLinkToUrl=e,t.docsLinkToLinkAttributes=function(c){const y=e(c);if(y)return{href:y,target:c.openInNewTab?"_blank":"_self"}},t.linkAttributeToDocsLink=function(c,y){if(!c)return;const l=y==="_blank";if(c.startsWith("@page:")){if(c.includes("#")){const[p,s]=c.replace("@page:","").split("#");return{type:o.pageHeading,documentationItemId:p,pageHeadingId:s,openInNewTab:l}}return{type:o.documentationItem,documentationItemId:c.replace("@page:",""),openInNewTab:l}}return{type:o.url,url:c,openInNewTab:l}}},2657:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockShortcut=t.DocumentationLegacyPageBlockShortcutType=void 0,function(e){e.external="External",e.internal="Internal"}(o||(t.DocumentationLegacyPageBlockShortcutType=o={})),t.DocumentationLegacyPageBlockShortcut=class{constructor(e){var c;e.url?this.type=o.external:this.type=o.internal,this.title=this.shortcutTitleFromModel(e,this.type),this.description=this.shortcutDescriptionFromModel(e,this.type),this.previewUrl=this.shortcutPreviewUrlFromModel(e),this.type===o.internal&&(!((c=e.documentationItemPreview)===null||c===void 0)&&c.valid)&&e.documentationItemId?this.internalId=e.documentationItemId:(this.internalId=null,this.type===o.external&&e.url?this.externalUrl=e.url:this.externalUrl=null)}shortcutTitleFromModel(e,c){var y,l,p,s,d;let g=null;return e.title&&e.title.trim().length>0?g=e.title:c===o.internal?g=(l=(y=e.documentationItemPreview)===null||y===void 0?void 0:y.title)!==null&&l!==void 0?l:null:c===o.external&&(g=(d=(s=(p=e.urlPreview)===null||p===void 0?void 0:p.title)!==null&&s!==void 0?s:e.url)!==null&&d!==void 0?d:null),g&&g.trim().length!==0?g:null}shortcutDescriptionFromModel(e,c){var y;let l=null;return e.description&&e.description.trim().length>0?l=e.description:c===o.external&&(l=(y=e.urlPreview)===null||y===void 0?void 0:y.description),l&&l.trim().length!==0?l:null}shortcutPreviewUrlFromModel(e){var c,y,l,p,s;return(s=(l=(c=e.assetUrl)!==null&&c!==void 0?c:(y=e.asset)===null||y===void 0?void 0:y.url)!==null&&l!==void 0?l:(p=e.urlPreview)===null||p===void 0?void 0:p.thumbnailUrl)!==null&&s!==void 0?s:null}}},7476:(r,t)=>{var o,e;Object.defineProperty(t,"__esModule",{value:!0}),t.TextAlignment=t.Alignment=void 0,function(c){c.left="Left",c.center="Center",c.stretch="Stretch"}(o||(t.Alignment=o={})),function(c){c.left="Left",c.center="Center",c.right="Right"}(e||(t.TextAlignment=e={}))},8738:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetFormat=void 0,function(e){e.png="png",e.pdf="pdf",e.svg="svg"}(o||(t.AssetFormat=o={}))},915:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetScale=void 0,function(e){e.x1="x1",e.x2="x2",e.x3="x3",e.x4="x4"}(o||(t.AssetScale=o={}))},899:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.AssetScaleType=void 0,function(e){e.aspectFill="AspectFill",e.aspectFit="AspectFit"}(o||(t.AssetScaleType=o={}))},6192:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.BlurType=void 0,function(e){e.layer="Layer",e.background="Background"}(o||(t.BlurType=o={}))},1160:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ALL_BORDER_POSITIONS=t.BorderPosition=void 0,function(e){e.inside="Inside",e.center="Center",e.outside="Outside"}(o||(t.BorderPosition=o={})),t.ALL_BORDER_POSITIONS=[o.inside,o.center,o.outside]},4546:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ALL_BORDER_STYLES=t.BorderStyle=void 0,function(e){e.dashed="Dashed",e.dotted="Dotted",e.solid="Solid",e.groove="Groove"}(o||(t.BorderStyle=o={})),t.ALL_BORDER_STYLES=[o.dashed,o.dotted,o.solid,o.groove]},8042:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ImportWarningType=void 0,function(e){e.UnsupportedFill="UnsupportedFill",e.UnsupportedStroke="UnsupportedStroke",e.UnsupportedEffect="UnsupportedEffect",e.StyleNotApplied="StyleNotApplied",e.NoPublishedStyles="NoPublishedStyles",e.NoPublishedComponents="NoPublishedComponents",e.NoPublishedAssets="NoPublishedAssets",e.NoVersionFound="NoVersionFound",e.ComponentHasNoThumbnail="ComponentHasNoThumbnail",e.DuplicateImportedStyleId="DuplicateImportedStyleId",e.DuplicateImportedStylePath="DuplicateImportedStylePath",e.NoPublishedElements="NoPublishedElements",e.NoUnpublishedStyles="NoUnpublishedStyles"}(o||(t.ImportWarningType=o={}))},5695:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.CustomDomainErrorCode=void 0,function(e){e.generalError="GeneralError",e.dnsNotConfigured="DNSNotConfigured",e.maintenance="Maintenance"}(o||(t.CustomDomainErrorCode=o={}))},7737:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.CustomDomainState=void 0,function(e){e.initial="Initial",e.domainSetupInProgress="DomainSetupInProgress",e.domainSetupFailed="DomainSetupFailed",e.domainSetupsSucces="DomainSetupSuccess",e.sslSetupInProgress="SSLSetupInProgress",e.sslSetupFailed="SSLSetupFailed",e.sslSetupSuccess="SSLSetupSuccess"}(o||(t.CustomDomainState=o={}))},5651:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockBehaviorDataType=void 0,function(e){e.item="Item",e.token="Token",e.asset="Asset",e.component="Component",e.figmaNode="FigmaNode",e.figmaComponent="FigmaComponent"}(o||(t.DocsBlockBehaviorDataType=o={}))},3733:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockBehaviorSelectionType=void 0,function(e){e.entity="Entity",e.group="Group",e.entityAndGroup="EntityAndGroup"}(o||(t.DocsBlockBehaviorSelectionType=o={}))},8890:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockImagePropertyAspectRatio=void 0,function(e){e.auto="Auto",e.square="Square",e.landscape="Landscape",e.portrait="Portrait",e.wide="Wide"}(o||(t.DocsBlockImagePropertyAspectRatio=o={}))},9377:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemEntityType=void 0,function(e){e.token="Token",e.tokenGroup="TokenGroup",e.asset="Asset",e.assetGroup="AssetGroup",e.component="Component",e.componentGroup="ComponentGroup"}(o||(t.DocsBlockItemEntityType=o={}))},5883:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyOptionRenderingStyle=void 0,function(e){e.segmentedControl="SegmentedControl",e.toggleButton="ToggleButton",e.select="Select",e.checkbox="Checkbox"}(o||(t.DocsBlockItemPropertyOptionRenderingStyle=o={}))},8061:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyRichTextStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.quote="Quote",e.callout="Callout",e.ol="OL",e.ul="UL"}(o||(t.DocsBlockItemPropertyRichTextStyle=o={}))},7479:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyTextStyle=void 0,function(e){e.small="Small",e.regular="Regular",e.bold="Bold"}(o||(t.DocsBlockItemPropertyTextStyle=o={}))},6839:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemPropertyType=void 0,function(e){e.richText="RichText",e.multiRichText="MultiRichText",e.text="Text",e.richTextEditor="RichTextEditor",e.boolean="Boolean",e.number="Number",e.singleSelect="SingleSelect",e.multiSelect="MultiSelect",e.image="Image",e.token="Token",e.tokenType="TokenType",e.tokenProperty="TokenProperty",e.component="Component",e.componentProperty="ComponentProperty",e.asset="Asset",e.assetProperty="AssetProperty",e.embedURL="EmbedURL",e.url="URL",e.markdown="Markdown",e.code="Code",e.codeSandbox="CodeSandbox",e.table="Table",e.divider="Divider",e.storybook="Storybook",e.color="Color",e.figmaNode="FigmaNode",e.figmaComponent="FigmaComponent"}(o||(t.DocsBlockItemPropertyType=o={}))},8095:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemVariantLayoutType=void 0,function(e){e.column="Column",e.row="Row"}(o||(t.DocsBlockItemVariantLayoutType=o={}))},7291:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockItemVariantLayoutWidth=void 0,function(e){e.c1="1",e.c2="2",e.c3="3",e.c4="4",e.c5="5",e.c6="6",e.c7="7",e.c8="8",e.c9="9",e.c10="10",e.c11="11",e.c12="12"}(o||(t.DocsBlockItemVariantLayoutWidth=o={}))},9133:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockOptionColor=void 0,function(e){e.green="Green",e.red="Red",e.yellow="Yellow",e.blue="Blue",e.purple="Purple",e.orange="Orange",e.pink="Pink",e.teal="Teal",e.grey="Grey",e.lightGrey="LightGrey",e.cyan="Cyan",e.fuchsia="Fuchsia"}(o||(t.DocsBlockOptionColor=o={}))},5963:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockOptionRenderingStyle=void 0,function(e){e.segmentedControl="SegmentedControl",e.toggleButton="ToggleButton",e.select="Select",e.checkbox="Checkbox"}(o||(t.DocsBlockOptionRenderingStyle=o={}))},6644:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockRichTextPropertyStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.quote="Quote",e.callout="Callout",e.default="Default"}(o||(t.DocsBlockRichTextPropertyStyle=o={}))},306:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsBlockTextPropertyStyle=void 0,function(e){e.title1="Title1",e.title2="Title2",e.title3="Title3",e.title4="Title4",e.title5="Title5",e.default="Default",e.defaultBold="DefaultBold",e.defaultSemibold="DefaultSemibold",e.small="Small",e.smallBold="SmallBold",e.smallSemibold="SmallSemibold",e.custom="Custom"}(o||(t.DocsBlockTextPropertyStyle=o={}))},4068:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsEntityGroupBehavior=void 0,function(e){e.group="Group",e.tabs="Tabs"}(o||(t.DocsEntityGroupBehavior=o={}))},1233:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsEntityType=void 0,function(e){e.group="Group",e.page="Page"}(o||(t.DocsEntityType=o={}))},7971:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocsSectionType=void 0,function(e){e.plain="Plain",e.tabs="Tabs"}(o||(t.DocsSectionType=o={}))},5102:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyCalloutType=void 0,function(e){e.info="Info",e.success="Success",e.warning="Warning",e.error="Error"}(o||(t.DocumentationLegacyCalloutType=o={}))},2123:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyGroupBehavior=void 0,function(e){e.group="Group",e.tabs="Tabs"}(o||(t.DocumentationLegacyGroupBehavior=o={}))},9896:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyHeadingType=void 0,function(e){e[e.h1=1]="h1",e[e.h2=2]="h2",e[e.h3=3]="h3"}(o||(t.DocumentationLegacyHeadingType=o={}))},7379:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyItemType=void 0,function(e){e.group="Group",e.page="Page"}(o||(t.DocumentationLegacyItemType=o={}))},1423:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageAssetType=void 0,function(e){e.image="image",e.figmaFrame="figmaFrame"}(o||(t.DocumentationLegacyPageAssetType=o={}))},1601:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockThemeType=void 0,function(e){e.override="Override",e.comparison="Comparison"}(o||(t.DocumentationLegacyPageBlockThemeType=o={}))},1846:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DocumentationLegacyPageBlockType=void 0,function(e){e.text="Text",e.heading="Heading",e.code="Code",e.unorderedList="UnorderedList",e.orderedList="OrderedList",e.quote="Quote",e.callout="Callout",e.divider="Divider",e.image="Image",e.token="Token",e.tokenList="TokenList",e.tokenGroup="TokenGroup",e.shortcuts="Shortcuts",e.link="Link",e.figmaEmbed="FigmaEmbed",e.youtubeEmbed="YoutubeEmbed",e.storybookEmbed="StorybookEmbed",e.genericEmbed="Embed",e.figmaFrames="FigmaFrames",e.custom="Custom",e.renderCode="RenderCode",e.componentAssets="ComponentAssets",e.column="Column",e.columnItem="ColumnItem",e.tabs="Tabs",e.tabItem="TabItem",e.table="Table",e.tableCell="TableCell",e.tableRow="TableRow"}(o||(t.DocumentationLegacyPageBlockType=o={}))},1255:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.FrameAlignment=void 0,function(e){e.frameHeight="FrameHeight",e.center="Center"}(o||(t.FrameAlignment=o={}))},3718:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.FrameLayout=void 0,function(e){e.c8="C8",e.c7="C7",e.c6="C6",e.c5="C5",e.c4="C4",e.c3="C3",e.c2="C2",e.c1="C1",e.c175="C1_75"}(o||(t.FrameLayout=o={}))},1:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.GradientType=void 0,function(e){e.linear="Linear",e.radial="Radial",e.angular="Angular"}(o||(t.GradientType=o={}))},934:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.IconSet=void 0,function(e){e.checkCircle="CheckCircle",e.crossCircle="CrossCircle",e.alert="Alert"}(o||(t.IconSet=o={}))},2674:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.RichTextSpanAttributeType=void 0,function(e){e.bold="Bold",e.italic="Italic",e.link="Link",e.strikethrough="Strikethrough",e.code="Code"}(o||(t.RichTextSpanAttributeType=o={}))},9125:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.ShadowType=void 0,function(e){e.drop="Drop",e.inner="Inner"}(o||(t.ShadowType=o={}))},4652:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.SourceType=void 0,function(e){e.figma="Figma",e.tokenStudio="TokenStudio",e.figmaVariablesPlugin="FigmaVariablesPlugin"}(o||(t.SourceType=o={}))},922:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.TextCase=void 0,function(e){e.original="Original",e.upper="Upper",e.lower="Lower",e.camel="Camel",e.smallCaps="SmallCaps"}(o||(t.TextCase=o={}))},7040:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.TextDecoration=void 0,function(e){e.original="None",e.underline="Underline",e.strikethrough="Strikethrough"}(o||(t.TextDecoration=o={}))},3788:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.DT_TOKEN_TYPES=t.tokenTypeIsReferencable=t.REFERENCABLE_TOKEN_TYPES=t.REPLACABLE_TOKEN_TYPES=t.tokenTypeIsNonPure=t.tokenTypeIsPure=t.PURE_TOKEN_TYPES=t.ALL_TOKEN_TYPES=t.MS_DIMENSION_TOKEN_TYPES=t.RAW_DIMENSION_TOKEN_TYPES=t.DIMENSION_TOKEN_TYPES=t.OPTION_TOKEN_TYPES=t.STRING_TOKEN_TYPES=t.TokenType=void 0,function(e){e.color="Color",e.typography="Typography",e.shadow="Shadow",e.border="Border",e.gradient="Gradient",e.blur="Blur",e.radius="BorderRadius",e.borderWidth="BorderWidth",e.duration="Duration",e.fontSize="FontSize",e.dimension="Dimension",e.letterSpacing="LetterSpacing",e.lineHeight="LineHeight",e.opacity="Opacity",e.paragraphSpacing="ParagraphSpacing",e.size="Size",e.space="Space",e.zIndex="ZIndex",e.textDecoration="TextDecoration",e.textCase="TextCase",e.visibility="Visibility",e.fontFamily="FontFamily",e.fontWeight="FontWeight",e.string="String",e.productCopy="ProductCopy"}(o||(t.TokenType=o={})),t.STRING_TOKEN_TYPES=[o.string,o.productCopy,o.fontFamily,o.fontWeight],t.OPTION_TOKEN_TYPES=[o.textCase,o.textDecoration,o.visibility],t.DIMENSION_TOKEN_TYPES=[o.dimension,o.size,o.space,o.opacity,o.fontSize,o.lineHeight,o.letterSpacing,o.paragraphSpacing,o.borderWidth,o.radius,o.duration,o.zIndex],t.RAW_DIMENSION_TOKEN_TYPES=[o.opacity,o.zIndex],t.MS_DIMENSION_TOKEN_TYPES=[o.duration],t.ALL_TOKEN_TYPES=[...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES,o.color,o.gradient,o.border,o.radius,o.shadow,o.typography,o.blur],t.PURE_TOKEN_TYPES=[...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES],t.tokenTypeIsPure=e=>t.PURE_TOKEN_TYPES.includes(e),t.tokenTypeIsNonPure=e=>!(0,t.tokenTypeIsPure)(e),t.REPLACABLE_TOKEN_TYPES=[o.color,...t.DIMENSION_TOKEN_TYPES,...t.STRING_TOKEN_TYPES,...t.OPTION_TOKEN_TYPES],t.REFERENCABLE_TOKEN_TYPES=[o.color,...t.DIMENSION_TOKEN_TYPES,o.fontFamily,o.fontWeight,o.textCase,o.textDecoration],t.tokenTypeIsReferencable=e=>t.REFERENCABLE_TOKEN_TYPES.includes(e),t.DT_TOKEN_TYPES=[o.color,o.shadow,o.gradient,o.typography,o.border,...t.DIMENSION_TOKEN_TYPES,o.fontFamily,o.fontWeight,...t.OPTION_TOKEN_TYPES]},8607:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.MS_UNITS=t.PX_UNITS=t.RAW_UNITS=t.LINE_HEIGHT_UNITS=t.SIZE_UNITS=t.Unit=void 0,function(e){e.pixels="Pixels",e.percent="Percent",e.rem="Rem",e.ms="Ms",e.raw="Raw"}(o||(t.Unit=o={})),t.SIZE_UNITS=[o.pixels,o.percent,o.rem],t.LINE_HEIGHT_UNITS=[o.pixels,o.percent,o.rem,o.raw],t.RAW_UNITS=[o.raw],t.PX_UNITS=[o.pixels],t.MS_UNITS=[o.ms]},9478:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.UserRole=void 0,function(e){e.owner="Owner",e.admin="Admin",e.creator="Creator",e.contributor="Contributor",e.billing="Billing",e.viewer="Viewer"}(o||(t.UserRole=o={}))},6141:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.VisibilityType=void 0,function(e){e.visible="Visible",e.hidden="Hidden"}(o||(t.VisibilityType=o={}))},6298:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceNPMRegistryAuthType=void 0,function(e){e.basic="Basic",e.bearer="Bearer"}(o||(t.WorkspaceNPMRegistryAuthType=o={}))},7968:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceNPMRegistryType=void 0,function(e){e.npmJS="NPMJS",e.gitHub="GitHub",e.azureDevOps="AzureDevOps",e.artifactory="Artifactory",e.custom="Custom"}(o||(t.WorkspaceNPMRegistryType=o={}))},5503:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionPlanInterval=void 0,function(e){e.yearly="yearly",e.monthly="monthly"}(o||(t.WorkspaceSubscriptionPlanInterval=o={}))},4290:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionProductCode=void 0,function(e){e.free="free",e.team="team",e.teamTest="team_test",e.company="company",e.enterprise="enterprise"}(o||(t.WorkspaceSubscriptionProductCode=o={}))},3607:(r,t)=>{var o;Object.defineProperty(t,"__esModule",{value:!0}),t.WorkspaceSubscriptionStatus=void 0,function(e){e.active="active",e.gracePeriod="gracePeriod",e.cancelled="cancelled",e.suspended="suspended"}(o||(t.WorkspaceSubscriptionStatus=o={}))},2802:(r,t)=>{var o,e;Object.defineProperty(t,"__esModule",{value:!0}),t.PulsarExecutor=t.OutputFileType=void 0,function(c){c.copyRemoteUrl="copyRemoteUrl",c.text="text",c.binary="binary"}(o||(t.OutputFileType=o={})),function(c){c.supernova="supernova",c.local="local"}(e||(t.PulsarExecutor=e={}))}},u={};function n(r){var t=u[r];if(t!==void 0)return t.exports;var o=u[r]={exports:{}};return i[r](o,o.exports,n),o.exports}var T={};(()=>{var r=T;Object.defineProperty(r,"__esModule",{value:!0}),r.TokenType=r.TextDecoration=r.TextCase=r.ShadowType=r.RichTextSpanAttributeType=r.GradientType=r.FrameLayout=r.FrameAlignment=r.IconSet=r.SourceType=r.DocsImageRefType=r.DocsLinkRefType=r.DocsSectionType=r.DocsEntityType=r.DocsEntityGroupBehavior=r.DocsBlockTextPropertyStyle=r.DocsBlockRichTextPropertyStyle=r.DocsBlockOptionColor=r.DocsBlockOptionRenderingStyle=r.DocsBlockItemVariantLayoutWidth=r.DocsBlockItemVariantLayoutType=r.DocsBlockItemPropertyType=r.DocsBlockItemPropertyTextStyle=r.DocsBlockItemPropertyRichTextStyle=r.DocsBlockItemPropertyOptionRenderingStyle=r.DocsBlockItemEntityType=r.DocsBlockImagePropertyAspectRatio=r.DocsBlockBehaviorSelectionType=r.DocsBlockBehaviorDataType=r.DocumentationLegacyPageBlockShortcutType=r.DocumentationLegacyPageBlockThemeType=r.DocumentationLegacyPageBlockType=r.DocumentationLegacyPageAssetType=r.DocumentationLegacyItemType=r.DocumentationLegacyHeadingType=r.DocumentationLegacyGroupBehavior=r.DocumentationLegacyCalloutType=r.BorderStyle=r.BorderPosition=r.BlurType=r.AssetScaleType=r.AssetScale=r.AssetFormat=r.Alignment=r.ALL_TOKEN_TYPES=r.ALL_BORDER_STYLES=r.ALL_BORDER_POSITIONS=r.OPTION_TOKEN_TYPES=r.STRING_TOKEN_TYPES=r.DIMENSION_TOKEN_TYPES=void 0,r.PulsarExecutor=r.OutputFileType=r.CustomDomainState=r.CustomDomainErrorCode=r.ImportWarningType=r.WorkspaceNPMRegistryType=r.WorkspaceNPMRegistryAuthType=r.WorkspaceSubscriptionStatus=r.WorkspaceSubscriptionProductCode=r.WorkspaceSubscriptionPlanInterval=r.VisibilityType=r.UserRole=r.Unit=void 0;var t=n(3788);Object.defineProperty(r,"DIMENSION_TOKEN_TYPES",{enumerable:!0,get:function(){return t.DIMENSION_TOKEN_TYPES}}),Object.defineProperty(r,"STRING_TOKEN_TYPES",{enumerable:!0,get:function(){return t.STRING_TOKEN_TYPES}}),Object.defineProperty(r,"OPTION_TOKEN_TYPES",{enumerable:!0,get:function(){return t.OPTION_TOKEN_TYPES}});var o=n(1160);Object.defineProperty(r,"ALL_BORDER_POSITIONS",{enumerable:!0,get:function(){return o.ALL_BORDER_POSITIONS}});var e=n(4546);Object.defineProperty(r,"ALL_BORDER_STYLES",{enumerable:!0,get:function(){return e.ALL_BORDER_STYLES}});var c=n(3788);Object.defineProperty(r,"ALL_TOKEN_TYPES",{enumerable:!0,get:function(){return c.ALL_TOKEN_TYPES}});var y=n(7476);Object.defineProperty(r,"Alignment",{enumerable:!0,get:function(){return y.Alignment}});var l=n(8738);Object.defineProperty(r,"AssetFormat",{enumerable:!0,get:function(){return l.AssetFormat}});var p=n(915);Object.defineProperty(r,"AssetScale",{enumerable:!0,get:function(){return p.AssetScale}});var s=n(899);Object.defineProperty(r,"AssetScaleType",{enumerable:!0,get:function(){return s.AssetScaleType}});var d=n(6192);Object.defineProperty(r,"BlurType",{enumerable:!0,get:function(){return d.BlurType}});var g=n(1160);Object.defineProperty(r,"BorderPosition",{enumerable:!0,get:function(){return g.BorderPosition}});var S=n(4546);Object.defineProperty(r,"BorderStyle",{enumerable:!0,get:function(){return S.BorderStyle}});var b=n(5102);Object.defineProperty(r,"DocumentationLegacyCalloutType",{enumerable:!0,get:function(){return b.DocumentationLegacyCalloutType}});var P=n(2123);Object.defineProperty(r,"DocumentationLegacyGroupBehavior",{enumerable:!0,get:function(){return P.DocumentationLegacyGroupBehavior}});var h=n(9896);Object.defineProperty(r,"DocumentationLegacyHeadingType",{enumerable:!0,get:function(){return h.DocumentationLegacyHeadingType}});var _=n(7379);Object.defineProperty(r,"DocumentationLegacyItemType",{enumerable:!0,get:function(){return _.DocumentationLegacyItemType}});var E=n(1423);Object.defineProperty(r,"DocumentationLegacyPageAssetType",{enumerable:!0,get:function(){return E.DocumentationLegacyPageAssetType}});var I=n(1846);Object.defineProperty(r,"DocumentationLegacyPageBlockType",{enumerable:!0,get:function(){return I.DocumentationLegacyPageBlockType}});var H=n(1601);Object.defineProperty(r,"DocumentationLegacyPageBlockThemeType",{enumerable:!0,get:function(){return H.DocumentationLegacyPageBlockThemeType}});var U=n(2657);Object.defineProperty(r,"DocumentationLegacyPageBlockShortcutType",{enumerable:!0,get:function(){return U.DocumentationLegacyPageBlockShortcutType}});var W=n(5651);Object.defineProperty(r,"DocsBlockBehaviorDataType",{enumerable:!0,get:function(){return W.DocsBlockBehaviorDataType}});var V=n(3733);Object.defineProperty(r,"DocsBlockBehaviorSelectionType",{enumerable:!0,get:function(){return V.DocsBlockBehaviorSelectionType}});var Y=n(8890);Object.defineProperty(r,"DocsBlockImagePropertyAspectRatio",{enumerable:!0,get:function(){return Y.DocsBlockImagePropertyAspectRatio}});var G=n(9377);Object.defineProperty(r,"DocsBlockItemEntityType",{enumerable:!0,get:function(){return G.DocsBlockItemEntityType}});var K=n(5883);Object.defineProperty(r,"DocsBlockItemPropertyOptionRenderingStyle",{enumerable:!0,get:function(){return K.DocsBlockItemPropertyOptionRenderingStyle}});var z=n(8061);Object.defineProperty(r,"DocsBlockItemPropertyRichTextStyle",{enumerable:!0,get:function(){return z.DocsBlockItemPropertyRichTextStyle}});var q=n(7479);Object.defineProperty(r,"DocsBlockItemPropertyTextStyle",{enumerable:!0,get:function(){return q.DocsBlockItemPropertyTextStyle}});var Z=n(6839);Object.defineProperty(r,"DocsBlockItemPropertyType",{enumerable:!0,get:function(){return Z.DocsBlockItemPropertyType}});var X=n(8095);Object.defineProperty(r,"DocsBlockItemVariantLayoutType",{enumerable:!0,get:function(){return X.DocsBlockItemVariantLayoutType}});var Q=n(7291);Object.defineProperty(r,"DocsBlockItemVariantLayoutWidth",{enumerable:!0,get:function(){return Q.DocsBlockItemVariantLayoutWidth}});var J=n(5963);Object.defineProperty(r,"DocsBlockOptionRenderingStyle",{enumerable:!0,get:function(){return J.DocsBlockOptionRenderingStyle}});var ee=n(9133);Object.defineProperty(r,"DocsBlockOptionColor",{enumerable:!0,get:function(){return ee.DocsBlockOptionColor}});var te=n(6644);Object.defineProperty(r,"DocsBlockRichTextPropertyStyle",{enumerable:!0,get:function(){return te.DocsBlockRichTextPropertyStyle}});var oe=n(306);Object.defineProperty(r,"DocsBlockTextPropertyStyle",{enumerable:!0,get:function(){return oe.DocsBlockTextPropertyStyle}});var re=n(4068);Object.defineProperty(r,"DocsEntityGroupBehavior",{enumerable:!0,get:function(){return re.DocsEntityGroupBehavior}});var ne=n(1233);Object.defineProperty(r,"DocsEntityType",{enumerable:!0,get:function(){return ne.DocsEntityType}});var ae=n(7971);Object.defineProperty(r,"DocsSectionType",{enumerable:!0,get:function(){return ae.DocsSectionType}});var ie=n(5673);Object.defineProperty(r,"DocsLinkRefType",{enumerable:!0,get:function(){return ie.DocsLinkRefType}});var ce=n(9932);Object.defineProperty(r,"DocsImageRefType",{enumerable:!0,get:function(){return ce.DocsImageRefType}});var le=n(4652);Object.defineProperty(r,"SourceType",{enumerable:!0,get:function(){return le.SourceType}});var se=n(934);Object.defineProperty(r,"IconSet",{enumerable:!0,get:function(){return se.IconSet}});var ue=n(1255);Object.defineProperty(r,"FrameAlignment",{enumerable:!0,get:function(){return ue.FrameAlignment}});var pe=n(3718);Object.defineProperty(r,"FrameLayout",{enumerable:!0,get:function(){return pe.FrameLayout}});var de=n(1);Object.defineProperty(r,"GradientType",{enumerable:!0,get:function(){return de.GradientType}});var ye=n(2674);Object.defineProperty(r,"RichTextSpanAttributeType",{enumerable:!0,get:function(){return ye.RichTextSpanAttributeType}});var Te=n(9125);Object.defineProperty(r,"ShadowType",{enumerable:!0,get:function(){return Te.ShadowType}});var me=n(922);Object.defineProperty(r,"TextCase",{enumerable:!0,get:function(){return me.TextCase}});var fe=n(7040);Object.defineProperty(r,"TextDecoration",{enumerable:!0,get:function(){return fe.TextDecoration}});var ge=n(3788);Object.defineProperty(r,"TokenType",{enumerable:!0,get:function(){return ge.TokenType}});var Se=n(8607);Object.defineProperty(r,"Unit",{enumerable:!0,get:function(){return Se.Unit}});var be=n(9478);Object.defineProperty(r,"UserRole",{enumerable:!0,get:function(){return be.UserRole}});var ve=n(6141);Object.defineProperty(r,"VisibilityType",{enumerable:!0,get:function(){return ve.VisibilityType}});var Pe=n(5503);Object.defineProperty(r,"WorkspaceSubscriptionPlanInterval",{enumerable:!0,get:function(){return Pe.WorkspaceSubscriptionPlanInterval}});var he=n(4290);Object.defineProperty(r,"WorkspaceSubscriptionProductCode",{enumerable:!0,get:function(){return he.WorkspaceSubscriptionProductCode}});var ke=n(3607);Object.defineProperty(r,"WorkspaceSubscriptionStatus",{enumerable:!0,get:function(){return ke.WorkspaceSubscriptionStatus}});var _e=n(6298);Object.defineProperty(r,"WorkspaceNPMRegistryAuthType",{enumerable:!0,get:function(){return _e.WorkspaceNPMRegistryAuthType}});var Oe=n(7968);Object.defineProperty(r,"WorkspaceNPMRegistryType",{enumerable:!0,get:function(){return Oe.WorkspaceNPMRegistryType}});var Ce=n(8042);Object.defineProperty(r,"ImportWarningType",{enumerable:!0,get:function(){return Ce.ImportWarningType}});var A=n(5695);Object.defineProperty(r,"CustomDomainErrorCode",{enumerable:!0,get:function(){return A.CustomDomainErrorCode}});var ot=n(7737);Object.defineProperty(r,"CustomDomainState",{enumerable:!0,get:function(){return ot.CustomDomainState}});var Re=n(2802);Object.defineProperty(r,"OutputFileType",{enumerable:!0,get:function(){return Re.OutputFileType}}),Object.defineProperty(r,"PulsarExecutor",{enumerable:!0,get:function(){return Re.PulsarExecutor}})})();var m=a;for(var f in T)m[f]=T[f];T.__esModule&&Object.defineProperty(m,"__esModule",{value:!0})})()})(v);const bt=a=>a.replace(/\n{3,}/g,` + +`),vt=a=>a.replace(/\n{2,}$/,` +`),Pt={js:{indentation:" ",openingBracket:"{",closingBracket:"}"},scss:{indentation:" ",openingBracket:"(",closingBracket:")"}},Ke=(a,i)=>{const u=i?"js":"scss",{indentation:n,openingBracket:T,closingBracket:m}=Pt[u];let f=0,r="";const t=a.split(` +`);for(const o of t)o.includes(T)&&o.includes(m)?r+=`${n.repeat(f)}${o} +`:o.includes(T)?(r+=`${n.repeat(f)}${o} +`,f+=1):o.includes(m)?(f-=1,r+=`${n.repeat(f)}${o} +`):r+=`${n.repeat(f)}${o} +`;return r=bt(r),r=vt(r),r},xe=a=>({radius:"radii",spacing:"spaces"})[a]||(a.endsWith("s")?a:`${a}s`),C=a=>k.NamingHelper.codeSafeVariableName(a,k.StringCase.camelCase),D=(a,i,u)=>{let n;return u?n=i.find(T=>T.id===a.parentGroupId):n=null,k.NamingHelper.codeSafeVariableNameForToken(a,k.StringCase.paramCase,n,"")},ht=(a,i)=>a===0?0:`${a}${i}`,F=(a,i,u,n)=>{const T=n?ht(i,n):i;return u?`export const ${C(a)} = ${typeof T=="number"?T:`'${T}'`};`:`$${a}: ${T} !default;`},kt=(a,i,u,n,T)=>a.sort((f,r)=>{if(T){const e=l=>l.tokenType===v.TokenType.dimension?l.value.measure:l.tokenType===v.TokenType.string?l.value.text:l.value,c=e(f),y=e(r);if(c&&y)return parseInt(c.toString(),10)-parseInt(y.toString(),10)}const t=D(f,i,u),o=D(r,i,u);return t.localeCompare(o)}),_t=a=>{let i=null;const u=[];return a.forEach(({css:n,parentGroupId:T})=>{i&&T!==i&&n&&u.push(""),n&&u.push(n),i=T}),u.join(` +`)},Ot=a=>{const i=/linear-gradient\(([^,]+),\s*(.+)\)/,u=a.match(i);if(u){const n=u[1].trim(),T=Number(n.match(/\d+/))+90,m=n.match(/deg/),f=u[2].trim();return`linear-gradient(var(--gradient-angle, ${T}${m}), ${f})`}return a},Ct=({fontFamily:a,fontSize:i,fontWeight:u,lineHeight:n},T,m)=>{const f=[`font-family: "'${a.text}', sans-serif"`,`font-size: ${i.measure}${i.unit==="Pixels"?"px":i.unit}`,`font-style: ${T?"italic":"normal"}`,`font-weight: ${u.text}`],r=[`fontFamily: "'${a.text}', sans-serif"`,`fontSize: '${i.measure}${i.unit==="Pixels"?"px":i.unit}'`,`fontStyle: '${T?"italic":"normal"}'`,`fontWeight: ${u.text}`];return n&&n.measure&&(m?r.push(`lineHeight: ${n.measure/100},`):f.push(`line-height: ${n.measure/100},`)),m?`{ +${r.join(`, +`)} +}`:`( +${f.join(`, `)} -)`},lt=new Map([["breakpoint-mobile",0]]),Pe=(a,c)=>{const p=lt.get(a);return typeof p==typeof c?p:c},st=3,Me=4,ut=8,pt=a=>a.length%2===0&&[...Array(a.length/2)].every((c,p)=>a[2*p]===a[2*p+1]),dt=a=>a.split("").map((c,p)=>p%2===0?c:"").join(""),yt=a=>a.length===ut&&a.endsWith("ff")?a.slice(0,-2):a.length===Me&&a.endsWith("f")?a.slice(0,-1):a,Tt=a=>{const c=[st,Me].includes(a.length);let p;return c?p=a:pt(a)?p=dt(a):p=a,p=yt(p),`#${p}`},mt=(a,c,p,n)=>{var m,g;const T=r=>{const{tokenType:t}=a;return t===r};if(T(P.TokenType.dimension)){const r=a,t=I(r,p,n);let o=(m=r.value)==null?void 0:m.measure;o=Pe(t,o);const e=_.CSSHelper.unitToCSS((g=r.value)==null?void 0:g.unit);return N(t,o,e)}if(T(P.TokenType.string)){const r=a,t=I(r,p,n);let o=r.value.text;return o=Pe(t,o),N(t,o)}if(T(P.TokenType.color)){const r=a,t=I(r,p,n);let o=_.CSSHelper.colorTokenValueToCSS(r.value,c,{allowReferences:!0,decimals:3,colorFormat:_.ColorFormat.hex8,tokenToVariableRef:()=>""});return o=Tt(o),o=Pe(t,o),N(t,o)}if(T(P.TokenType.shadow)){const r=a,t=I(a,p,n),{value:o}=r,e=_.CSSHelper.shadowTokenValueToCSS(o,c,{allowReferences:!0,decimals:3,colorFormat:_.ColorFormat.hashHex8,tokenToVariableRef:()=>""});return N(t,e).replace(/0px/g,"0")}if(T(P.TokenType.gradient)){const r=a,t=I(a,p,n),{value:o}=r;let e=_.CSSHelper.gradientTokenValueToCSS(o,c,{allowReferences:!0,colorFormat:_.ColorFormat.hashHex8,decimals:3,tokenToVariableRef:()=>""});return e=it(e),N(t,e)}return null},ft=(a,c,p,n,T,m)=>{const r=nt(a,p,T,n,m).map(t=>({css:mt(t,c,p,T),parentGroupId:t.parentGroupId}));return at(r)},Fe=(a,c)=>{const p=Object.entries(c).reduce((m,[g,r])=>(typeof r=="object"&&r!==null&&typeof m[g]=="object"?m[g]=Fe(m[g],r):m[g]=r,m),{...a}),n={},T={};return Object.entries(p).forEach(([m,g])=>{typeof g=="object"&&g!==null&&g.moveToTheEnd==="true"?(delete g.moveToTheEnd,T[m]=g):n[m]=g}),{...n,...T}};function we(a){return Object.entries(a).map(([c,p])=>{if(typeof p=="object"&&p!==null){const n=we(p);return`${c}: ( +)`},Ne="-colors",ze="Colors",j="colors",Le="styles",It=(a,i,u,n)=>{const T=i,m=a.slice(0,2),f=Ft(a).toLowerCase(),r=At(a).toLowerCase();let t=u;m.forEach((o,e)=>{const c=n?C(f):`$${f}`,y=e===0?c:o;e===m.length-1?t[r]=Ct(T.value,f.includes("italic"),n):(t[y]=t[y]||{},t=t[y])})},Dt=(a,i,u,n,T,m=!1)=>{let f=T;a.forEach((r,t)=>{const o=t===0?$t(r,i.tokenType,m):r;if(t===a.length-1){const e=m?`${C(D(i,u,n))}`:`$${D(i,u,n)}`,c=Mt(i,m);f[c]=e}else f[m?C(o):o]=f[o]||{},f=f[m?C(o):o]})},Et=(a,i,u,n,T)=>{var r,t;const{tokenType:m}=a,f=(t=(r=a.origin)==null?void 0:r.name)==null?void 0:t.split("/");return f&&(m===v.TokenType.typography?It(f,a,n,T):Dt(f,a,i,u,n,T)),n},qe=(a,i)=>{const u=i?ze:Ne;return a.replace(u,"").replace("$","")},Nt=(a,i)=>({...a,[qe(i,!1)]:i}),Rt=(a,i)=>a.reduce((u,n)=>({...u,[qe(n,i)]:n}),{}),Bt=a=>a.reduce(Nt,{}),jt=(a,i,u,n,T)=>{const m=a.reduce((t,o)=>{const e=Et(o,u,n,t,T);return{...t,...e}},{}),f=Object.keys(m).filter(t=>t.endsWith(T?ze:Ne));if(f.length>0){const t=Rt(f,T),o=T?j:`$${j}`;return{...m,[o]:t}}const r=Object.keys(m).filter(t=>t.includes("heading")||t.includes("body"));if(r.length>0){const t=Bt(r),o=T?Le:`$${Le}`;return{...m,[o]:{...t,moveToTheEnd:"true"}}}return m},Fe={"radius-full":"full"},xt=new Map([["breakpoint-mobile",0]]),De=(a,i)=>{const u=xt.get(a);return typeof u==typeof i?u:i},Lt=a=>Fe[a]?Fe[a]:a,Ze=(a,i)=>{const u=Object.entries(i).reduce((m,[f,r])=>{let t;return typeof r=="object"&&r!==null&&typeof m[f]=="object"?t=Ze(m[f],r):t=r,{...m,[f]:t}},{...a}),n={},T={};return Object.entries(u).forEach(([m,f])=>{typeof f=="object"&&f!==null&&f.moveToTheEnd==="true"?(delete f.moveToTheEnd,T[m]=f):n[m]=f}),{...n,...T}};function Xe(a){return Object.entries(a).map(([i,u])=>{if(typeof u=="object"&&u!==null){const n=Xe(u);return`${i}: ( ${n} ), -`}return`${c}: ${p}, -`}).join("").slice(0,-1)}const gt=a=>a.length===4?a.filter((c,p)=>p!==1).join("-"):a.join("-"),bt=a=>a.length===4?a[1]:"mobile",St=a=>({radius:"radii",spacing:"spaces"})[a]||(a.endsWith("s")?a:`${a}s`),ke="-colors",Ie={"radius-full":"full"},vt=(a,c)=>c===P.TokenType.color?`$${a}${ke}`:`$${St(a.toLowerCase())}`,Pt=a=>Ie[a]?Ie[a]:a,ht=a=>{var T;let c;const p=(T=a.name.match(/\d+/))==null?void 0:T[0],n=Pt(a.name.toLowerCase());return a.tokenType!==P.TokenType.color&&p?c=p:c=n,c},kt=(a,c,p)=>{const n=c,T=a.slice(0,2),m=gt(a).toLowerCase(),g=bt(a).toLowerCase();let r=p;T.forEach((t,o)=>{const e=o===0?`$${m}`:t;o===T.length-1?r[g]=ct(n.value,m.includes("italic")):(r[e]=r[e]||{},r=r[e])})},Ot=(a,c,p,n,T)=>{let m=T;a.forEach((g,r)=>{const t=r===0?vt(g,c.tokenType):g;if(r===a.length-1){const o=`$${I(c,p,n)}`,e=ht(c);m[e]=o}else m[t]=m[t]||{},m=m[t]})},_t=(a,c,p,n)=>{var g,r;const{tokenType:T}=a,m=(r=(g=a.origin)==null?void 0:g.name)==null?void 0:r.split("/");return m&&(T===P.TokenType.typography?kt(m,a,n):Ot(m,a,c,p,n)),n},He=a=>a.replace(ke,"").replace("$",""),Ct=(a,c)=>({...a,[He(c)]:c}),It=(a,c)=>({...a,[He(c)]:c}),Dt=a=>a.reduce(Ct,{}),Et=a=>a.reduce(It,{}),Nt=(a,c,p,n)=>{const T=a.reduce((r,t)=>{const o=_t(t,p,n,r);return{...r,...o}},{}),m=Object.keys(T).filter(r=>r.endsWith(ke));if(m.length>0){const r=Dt(m);return{...T,$colors:r}}const g=Object.keys(T).filter(r=>r.includes("heading")||r.includes("body"));if(g.length>0){const r=Et(g);return{...T,$styles:{...r,moveToTheEnd:"true"}}}return T},B=" ",Rt=a=>a.replace(/\n{3,}/g,` - -`),Bt=a=>a.replace(/\n{2,}$/,` -`),jt=a=>{let c=0,p="";const n=a.split(` -`);for(const T of n)T.includes("(")&&T.includes(")")?p+=`${B.repeat(c)}${T} -`:T.includes("(")?(p+=`${B.repeat(c)}${T} -`,c+=1):T.includes(")")?(c-=1,p+=`${B.repeat(c)}${T} -`):p+=`${B.repeat(c)}${T} -`;return p=Rt(p),p=Bt(p),p},Lt=a=>`/* This file was generated by Supernova, don't change manually */ -${a}`,xt=(a,c,p)=>a.filter(n=>{var r,t;const T=n.tokenType===c,m=(t=(r=n.origin)==null?void 0:r.name)==null?void 0:t.includes(p),g=!(n.tokenType===P.TokenType.typography&&n.name.includes("-Underline"));return T&&m&&g}),At=(a,c,p,n)=>{let T="",m={};const{groupNames:g,hasParentPrefix:r=!0,sortByNumValue:t=!1,withCssObject:o=!0,tokenTypes:e}=n;e.forEach(y=>{g.forEach(l=>{const u=xt(a,y,l);y!==P.TokenType.typography&&(T+=ft(u,c,p,l,r,t),T+=` +`}return`${i}: ${u}, +`}).join("").slice(0,-1)}const Qe=a=>Object.entries(a).map(([i,u])=>{if(typeof u=="object"&&u!==null){const n=Qe(u);return`${i}: { +${n} +}, +`}return i===u?`${i}, +`:`${i}: ${u}, +`}).join("").slice(0,-1),Ft=a=>a.length===4?a.filter((i,u)=>u!==1).join("-"):a.join("-"),At=a=>a.length===4?a[1]:"mobile",Mt=(a,i)=>{var m;let u;const n=(m=a.name.match(/\d+/))==null?void 0:m[0],T=Lt(a.name.toLowerCase());return a.tokenType!==v.TokenType.color&&n?u=n:u=i?C(T):T,u},$t=(a,i,u)=>{if(i===v.TokenType.color){const n=`${a.toLowerCase()}${Ne}`;return u?C(n):`$${n}`}return u?xe(a.toLowerCase()):`$${xe(a.toLowerCase())}`},wt=3,Je=4,Ht=8,Ut=a=>a.length%2===0&&[...Array(a.length/2)].every((i,u)=>a[2*u]===a[2*u+1]),Wt=a=>a.split("").map((i,u)=>u%2===0?i:"").join(""),Vt=a=>a.length===Ht&&a.endsWith("ff")?a.slice(0,-2):a.length===Je&&a.endsWith("f")?a.slice(0,-1):a,Yt=a=>{const i=[wt,Je].includes(a.length);let u;return i?u=a:Ut(a)?u=Wt(a):u=a,u=Vt(u),`#${u}`},Gt=(a,i,u,n,T)=>{var f,r;const m=t=>{const{tokenType:o}=a;return o===t};if(m(v.TokenType.dimension)){const t=a,o=D(t,u,n);let e=(f=t.value)==null?void 0:f.measure;e=De(o,e);const c=k.CSSHelper.unitToCSS((r=t.value)==null?void 0:r.unit);return F(o,e,T,c)}if(m(v.TokenType.string)){const t=a,o=D(t,u,n);let e=t.value.text;return e=De(o,e),F(o,e,T)}if(m(v.TokenType.color)){const t=a,o=D(t,u,n);let e=k.CSSHelper.colorTokenValueToCSS(t.value,i,{allowReferences:!0,decimals:3,colorFormat:k.ColorFormat.hex8,tokenToVariableRef:()=>""});return e=Yt(e),e=De(o,e),F(o,e,T)}if(m(v.TokenType.shadow)){const t=a,o=D(a,u,n),{value:e}=t,c=k.CSSHelper.shadowTokenValueToCSS(e,i,{allowReferences:!0,decimals:3,colorFormat:k.ColorFormat.hashHex8,tokenToVariableRef:()=>""});return F(o,c,T).replace(/0px/g,"0")}if(m(v.TokenType.gradient)){const t=a,o=D(a,u,n),{value:e}=t;let c=k.CSSHelper.gradientTokenValueToCSS(e,i,{allowReferences:!0,colorFormat:k.ColorFormat.hashHex8,decimals:3,tokenToVariableRef:()=>""});return c=Ot(c),F(o,c,T)}return null},Kt=(a,i,u,n,T,m,f=!1)=>{const t=kt(a,u,T,n,m).map(o=>({css:Gt(o,i,u,T,f),parentGroupId:o.parentGroupId}));return _t(t)},zt=a=>`/* This file was generated by Supernova, don't change manually */ +${a}`,qt=(a,i,u)=>a.filter(n=>{var r,t;const T=n.tokenType===i,m=(t=(r=n.origin)==null?void 0:r.name)==null?void 0:t.includes(u),f=!(n.tokenType===v.TokenType.typography&&n.name.includes("-Underline"));return T&&m&&f}),et=(a,i)=>a!==i-1?` -`);const s=Nt(u,c,p,r);m=Fe(m,s)})});let i=T;return o&&(i+=Object.entries(m).map(([y,l])=>`${y}: ( -${we(l)} -) !default; +`:` +`,Zt=a=>([i,u],n)=>`export const ${i} = { +${Qe(u)} +};${et(n,a)}`,Xt=a=>([i,u],n)=>`${i}: ( +${Xe(u)} +) !default;${et(n,a)}`,tt=(a,i)=>{const u=Object.entries(a);return u.map(i(u.length)).join("")},Qt=a=>tt(a,Zt),Jt=a=>tt(a,Xt),eo=(a,i,u)=>{let n;if(i&&i.length>0){const m=a.filter(f=>!i.some(r=>{var t,o;return(o=(t=f.origin)==null?void 0:t.name)==null?void 0:o.includes(r)})).reduce((f,r)=>{var o,e;const t=(e=(o=r.origin)==null?void 0:o.name)==null?void 0:e.split("/")[0];return t&&!f.includes(t)&&f.push(t),f},[]);n=[...new Set(m)]}else n=u;return n},to=(a,i,u,n,T)=>{let m="",f={};const{groupNames:r=[""],hasParentPrefix:t=!0,sortByNumValue:o=!1,hasStylesObject:e=!0,tokenTypes:c,excludeGroupNames:y=null}=n;c.forEach(p=>{eo(a,y,r).forEach(d=>{const g=qt(a,p,d);p!==v.TokenType.typography&&(m+=Kt(g,i,u,d,t,o,T),m+=` -`).join("")),{content:Lt(jt(i))}},Mt=[{fileName:"_borders.scss",tokenTypes:[P.TokenType.dimension],groupNames:["Border"],withCssObject:!1,sortByNumValue:!0},{fileName:"_other.scss",tokenTypes:[P.TokenType.dimension,P.TokenType.string],groupNames:["Grid","Container","Breakpoint"]},{fileName:"_radii.scss",tokenTypes:[P.TokenType.dimension],groupNames:["Radius"],hasParentPrefix:!1,sortByNumValue:!0},{fileName:"_spacing.scss",tokenTypes:[P.TokenType.dimension],groupNames:["Spacing"],hasParentPrefix:!1,sortByNumValue:!0},{fileName:"_shadows.scss",tokenTypes:[P.TokenType.shadow],groupNames:[""],hasParentPrefix:!1},{fileName:"_gradients.scss",tokenTypes:[P.TokenType.gradient],groupNames:[""],hasParentPrefix:!0},{fileName:"_typography.scss",tokenTypes:[P.TokenType.typography],groupNames:[""],withCssObject:!0,hasParentPrefix:!1}],Ft=[{fileName:"_colors.scss",tokenTypes:[P.TokenType.color],groupNames:[""]}],De=(a,c,p,n)=>n.map(T=>{const m=At(a,c,p,T);return{fileName:T.fileName,...m}}),Ee=a=>`${a.map(c=>`@forward '${c.fileName.replace(/^_/,"").replace(/\.scss$/,"")}';`).join(` +`);const S=jt(g,i,u,t,T);f=Ze(f,S)})});let l=m;return e&&(l+=T?Qt(f):Jt(f)),{content:zt(Ke(l,T))}},Ae=[{fileName:"borders",tokenTypes:[v.TokenType.dimension],groupNames:["Border"],hasStylesObject:!1,sortByNumValue:!0},{fileName:"other",tokenTypes:[v.TokenType.dimension,v.TokenType.string],excludeGroupNames:["Border","Radius","Spacing"],sortByNumValue:!0},{fileName:"radii",tokenTypes:[v.TokenType.dimension],groupNames:["Radius"],hasParentPrefix:!1,sortByNumValue:!0},{fileName:"spacing",tokenTypes:[v.TokenType.dimension],groupNames:["Spacing"],hasParentPrefix:!1,sortByNumValue:!0},{fileName:"shadows",tokenTypes:[v.TokenType.shadow],hasParentPrefix:!1},{fileName:"gradients",tokenTypes:[v.TokenType.gradient],hasParentPrefix:!0},{fileName:"typography",tokenTypes:[v.TokenType.typography],hasParentPrefix:!1}],Me=[{fileName:"colors",tokenTypes:[v.TokenType.color]}],x="themes",N="global",R="scss",B="js",M=(a,i,u,n,T=!1)=>n.map(m=>{const f=to(a,i,u,m,T);return{fileName:m.fileName,...f}}),$=(a,i=!1)=>`${a.map(u=>{const n=i?"ts":"scss",T=u.fileName.replace(/^_/,"").replace(new RegExp(`\\.${n}$`),"");return i?`export * from './${T}';`:`@forward '${T}';`}).join(` `)} -`,wt=async(a,c,p,n,T)=>{const m=[],g=De(a,c,p,Mt),r=Ee(g);m.push(...g.map(o=>({path:"./globals/",fileName:o.fileName,content:o.content}))),m.push({path:"./globals/",fileName:"index.scss",content:r});const t=await Promise.all(n.map(async o=>({themedTokens:await T.tokens.computeTokensByApplyingThemes(a,[o]),theme:o})));for(const{themedTokens:o,theme:e}of t){const i=De(o,c,p,Ft),y=Ee(i);m.push(...i.map(l=>({path:`./themes/${e.name}/`,fileName:l.fileName,content:l.content}))),m.push({path:`./themes/${e.name}/`,fileName:"index.scss",content:y})}return m};Pulsar.export(async(a,c)=>{const p={designSystemId:c.dsId,versionId:c.versionId};let n=await a.tokens.getTokens(p),T=await a.tokens.getTokenGroups(p);c.brandId&&(n=n.filter(i=>i.brandId===c.brandId),T=T.filter(i=>i.brandId===c.brandId));const m=new Map(n.map(i=>[i.id,i])),g=await a.tokens.getTokenThemes(p),r=(i,y,l)=>_.FileHelper.createTextFile({relativePath:i,fileName:y,content:l});let t=[];t=(await wt(n,m,T,g,a)).map(i=>r(i.path,i.fileName,i.content));const e=i=>{let y=[];const l=JSON.stringify(i,(u,s)=>{if(typeof s=="object"&&s!==null){if(y!=null&&y.includes(s))return"CIRCULAR_REFERENCE";y==null||y.push(s)}return s},2);return y=null,l};return t.push(r("./original-data/","_original-tokens.json",e(n)),r("./original-data/","_original-groups.json",JSON.stringify(T,null,2))),t});const Ht=Pulsar.exportConfig();exports.exportConfiguration=Ht; +`,oo=a=>`import * as ${C(a)} from './${x}/${a}';`,ro=a=>`@use '${x}/${a}';`,no=a=>i=>a?oo(i.name):ro(i.name),ao=(a,i)=>a.map(no(i)).join(` +`),io=(a,i)=>a.map(u=>i?`${C(u.name)}: { +${j}: ${C(u.name)}.${j} +},`:`${u.name}: ( +${j}: ${u.name}.$${j}, +),`).join(` +`),$e=(a,i=!1)=>{const u=ao(a,i),n=io(a,i),f=`${u} + +// The first theme is the default theme, as the left column in the Figma table. +${i?`export const themes = { +`:`$themes: ( +`}${n} +${i?`}; +`:`); +`}`;return Ke(f,i)},co=async(a,i,u,n,T)=>{const m=[],f=M(a,i,u,Ae),r=M(a,i,u,Ae,!0),t=$(f),o=$(r,!0);m.push(...f.map(l=>({path:`./${R}/${N}`,fileName:`_${l.fileName}.scss`,content:l.content})),...r.map(l=>({path:`./${B}/${N}/`,fileName:`${l.fileName}.ts`,content:l.content}))),m.push({path:`./${R}/${N}/`,fileName:"index.scss",content:t}),m.push({path:`./${B}/${N}/`,fileName:"index.ts",content:o}),m.push({path:`./${R}/`,fileName:"@global.scss",content:`@forward '${N}'; +`}),m.push({path:`./${B}/`,fileName:"@global.ts",content:`export * from './${N}'; +`});const e=await Promise.all(n.map(async l=>({themedTokens:await T.tokens.computeTokensByApplyingThemes(a,[l]),theme:l})));for(const{themedTokens:l,theme:p}of e){const s=M(l,i,u,Me),d=M(l,i,u,Me,!0),g=$(s),S=$(d,!0);m.push(...s.map(b=>({path:`./${R}/${x}/${p.name}/`,fileName:`_${b.fileName}.scss`,content:b.content})),...d.map(b=>({path:`./${B}/${x}/${p.name}/`,fileName:`${b.fileName}.ts`,content:b.content}))),m.push({path:`./${R}/${x}/${p.name}/`,fileName:"index.scss",content:g}),m.push({path:`./${B}/${x}/${p.name}/`,fileName:"index.ts",content:S})}const c=$e(n),y=$e(n,!0);return m.push({path:`./${R}/`,fileName:"@themes.scss",content:c}),m.push({path:`./${B}/`,fileName:"@themes.ts",content:y}),m};Pulsar.export(async(a,i)=>{const u={designSystemId:i.dsId,versionId:i.versionId};let n=await a.tokens.getTokens(u),T=await a.tokens.getTokenGroups(u);i.brandId&&(n=n.filter(c=>c.brandId===i.brandId),T=T.filter(c=>c.brandId===i.brandId));const m=new Map(n.map(c=>[c.id,c])),f=await a.tokens.getTokenThemes(u),r=(c,y,l)=>k.FileHelper.createTextFile({relativePath:c,fileName:y,content:l});let t=[];t=(await co(n,m,T,f,a)).map(c=>r(c.path,c.fileName,c.content));const e=c=>{let y=[];const l=JSON.stringify(c,(p,s)=>{if(typeof s=="object"&&s!==null){if(y!=null&&y.includes(s))return"CIRCULAR_REFERENCE";y==null||y.push(s)}return s},2);return y=null,l};return t.push(r("./original-data/","_original-tokens.json",e(n)),r("./original-data/","_original-groups.json",JSON.stringify(T,null,2))),t});const lo=Pulsar.exportConfig();exports.exportConfiguration=lo; diff --git a/exporters/variables-scss/src/config/fileConfig.ts b/exporters/variables-scss/src/config/fileConfig.ts index 157d20b29a..cd33169b80 100644 --- a/exporters/variables-scss/src/config/fileConfig.ts +++ b/exporters/variables-scss/src/config/fileConfig.ts @@ -3,64 +3,61 @@ import { TokenType } from '@supernovaio/sdk-exporters'; export type FileData = { fileName: string; tokenTypes: TokenType[]; - groupNames: string[]; - withCssObject?: boolean; + groupNames?: string[]; + excludeGroupNames?: string[] | null; + hasStylesObject?: boolean; hasParentPrefix?: boolean; sortByNumValue?: boolean; }; export const nonThemedFilesData: FileData[] = [ { - fileName: '_borders.scss', + fileName: 'borders', tokenTypes: [TokenType.dimension], groupNames: ['Border'], - withCssObject: false, + hasStylesObject: false, sortByNumValue: true, }, { - fileName: '_other.scss', + fileName: 'other', tokenTypes: [TokenType.dimension, TokenType.string], - groupNames: ['Grid', 'Container', 'Breakpoint'], + excludeGroupNames: ['Border', 'Radius', 'Spacing'], + sortByNumValue: true, }, { - fileName: '_radii.scss', + fileName: 'radii', tokenTypes: [TokenType.dimension], groupNames: ['Radius'], hasParentPrefix: false, sortByNumValue: true, }, { - fileName: '_spacing.scss', + fileName: 'spacing', tokenTypes: [TokenType.dimension], groupNames: ['Spacing'], hasParentPrefix: false, sortByNumValue: true, }, { - fileName: '_shadows.scss', + fileName: 'shadows', tokenTypes: [TokenType.shadow], - groupNames: [''], hasParentPrefix: false, }, { - fileName: '_gradients.scss', + fileName: 'gradients', tokenTypes: [TokenType.gradient], - groupNames: [''], hasParentPrefix: true, }, { - fileName: '_typography.scss', + fileName: 'typography', tokenTypes: [TokenType.typography], - groupNames: [''], - withCssObject: true, hasParentPrefix: false, }, ]; export const themedFilesData: FileData[] = [ { - fileName: '_colors.scss', + fileName: 'colors', tokenTypes: [TokenType.color], - groupNames: [''], }, ]; diff --git a/exporters/variables-scss/src/config/invariantTokenAliasConfig.ts b/exporters/variables-scss/src/config/invariantTokenAliasConfig.ts new file mode 100644 index 0000000000..bd91075fba --- /dev/null +++ b/exporters/variables-scss/src/config/invariantTokenAliasConfig.ts @@ -0,0 +1,3 @@ +export const invariantTokenAlias: { [key: string]: string } = { + 'radius-full': 'full', +}; diff --git a/exporters/variables-scss/tests/fixtures/formattedExample.scss b/exporters/variables-scss/src/formatters/__fixtures__/formattedExample.scss similarity index 100% rename from exporters/variables-scss/tests/fixtures/formattedExample.scss rename to exporters/variables-scss/src/formatters/__fixtures__/formattedExample.scss diff --git a/exporters/variables-scss/src/formatters/__fixtures__/formattedExample.ts b/exporters/variables-scss/src/formatters/__fixtures__/formattedExample.ts new file mode 100644 index 0000000000..7e57df14fe --- /dev/null +++ b/exporters/variables-scss/src/formatters/__fixtures__/formattedExample.ts @@ -0,0 +1,10 @@ +export const gridSpacingDesktop = '32px'; + +export const gridColumns = '12'; + +export const grids = { + spacing: { + desktop: gridSpacingDesktop, + }, + columns: gridColumns, +}; diff --git a/exporters/variables-scss/tests/fixtures/unformattedExample.scss b/exporters/variables-scss/src/formatters/__fixtures__/unformattedExample.scss similarity index 79% rename from exporters/variables-scss/tests/fixtures/unformattedExample.scss rename to exporters/variables-scss/src/formatters/__fixtures__/unformattedExample.scss index 56606e083c..6c330e02a7 100644 --- a/exporters/variables-scss/tests/fixtures/unformattedExample.scss +++ b/exporters/variables-scss/src/formatters/__fixtures__/unformattedExample.scss @@ -4,4 +4,4 @@ background: #fff, border: 1px solid #000, ) !default; -$gradient-basic-overlay: linear-gradient(var(--gradient-angle, 0deg), #fff 0%, #fff0 100%) !default; \ No newline at end of file +$gradient-basic-overlay: linear-gradient(var(--gradient-angle, 0deg), #fff 0%, #fff0 100%) !default; diff --git a/exporters/variables-scss/src/formatters/__fixtures__/unformattedExample.ts b/exporters/variables-scss/src/formatters/__fixtures__/unformattedExample.ts new file mode 100644 index 0000000000..630f120fc5 --- /dev/null +++ b/exporters/variables-scss/src/formatters/__fixtures__/unformattedExample.ts @@ -0,0 +1,10 @@ +export const gridSpacingDesktop = '32px'; + +export const gridColumns = '12'; + +export const grids = { +spacing: { +desktop: gridSpacingDesktop, +}, +columns: gridColumns, +}; diff --git a/exporters/variables-scss/src/formatters/__tests__/cssFormatter.test.ts b/exporters/variables-scss/src/formatters/__tests__/cssFormatter.test.ts deleted file mode 100644 index 6bdd3933af..0000000000 --- a/exporters/variables-scss/src/formatters/__tests__/cssFormatter.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import fs from 'fs'; -import path from 'path'; -import { formatCSS } from '../cssFormatter'; - -const mockedUnformattedCSS = fs.readFileSync( - path.join(__dirname, '../../../tests/fixtures/unformattedExample.scss'), - 'utf-8', -); - -const mockedFormattedCSS = fs.readFileSync( - path.join(__dirname, '../../../tests/fixtures/formattedExample.scss'), - 'utf-8', -); - -describe('formatCSS', () => { - it('should correctly format CSS string', () => { - expect(formatCSS(mockedUnformattedCSS)).toBe(mockedFormattedCSS); - }); -}); diff --git a/exporters/variables-scss/src/formatters/__tests__/stylesFormatter.test.ts b/exporters/variables-scss/src/formatters/__tests__/stylesFormatter.test.ts new file mode 100644 index 0000000000..7b05ad07c7 --- /dev/null +++ b/exporters/variables-scss/src/formatters/__tests__/stylesFormatter.test.ts @@ -0,0 +1,33 @@ +import fs from 'fs'; +import path from 'path'; +import { indentAndFormat } from '../stylesFormatter'; + +const mockedUnformattedCSS = fs.readFileSync( + path.join(__dirname, '../../../src/formatters/__fixtures__/unformattedExample.scss'), + 'utf-8', +); + +const mockedFormattedCSS = fs.readFileSync( + path.join(__dirname, '../../../src/formatters/__fixtures__/formattedExample.scss'), + 'utf-8', +); + +const mockedFormattedJS = fs.readFileSync( + path.join(__dirname, '../../../src/formatters/__fixtures__/formattedExample.ts'), + 'utf-8', +); + +const mockedUnformattedJS = fs.readFileSync( + path.join(__dirname, '../../../src/formatters/__fixtures__/unformattedExample.ts'), + 'utf-8', +); + +describe('indentAndFormat', () => { + it('should correctly indent and format CSS output', () => { + expect(indentAndFormat(mockedUnformattedCSS, false)).toBe(mockedFormattedCSS); + }); + + it('should correctly indent and format JS output', () => { + expect(indentAndFormat(mockedUnformattedJS, true)).toBe(mockedFormattedJS); + }); +}); diff --git a/exporters/variables-scss/src/formatters/cssFormatter.ts b/exporters/variables-scss/src/formatters/cssFormatter.ts deleted file mode 100644 index 42d5f21a9e..0000000000 --- a/exporters/variables-scss/src/formatters/cssFormatter.ts +++ /dev/null @@ -1,36 +0,0 @@ -const INDENTATION = ' '; - -export const removeExtraBlankLines = (css: string): string => { - return css.replace(/\n{3,}/g, '\n\n'); -}; - -export const formatLinesAtEndOfTheFile = (css: string): string => { - return css.replace(/\n{2,}$/, '\n'); -}; - -export const formatCSS = (css: string): string => { - let indentationLevel = 0; - let formattedCSS = ''; - - const lines = css.split('\n'); - - for (const line of lines) { - // Check if both '(' and ')' are on the same line - if (line.includes('(') && line.includes(')')) { - formattedCSS += `${INDENTATION.repeat(indentationLevel)}${line}\n`; - } else if (line.includes('(')) { - formattedCSS += `${INDENTATION.repeat(indentationLevel)}${line}\n`; - indentationLevel += 1; - } else if (line.includes(')')) { - indentationLevel -= 1; - formattedCSS += `${INDENTATION.repeat(indentationLevel)}${line}\n`; - } else { - formattedCSS += `${INDENTATION.repeat(indentationLevel)}${line}\n`; - } - } - - formattedCSS = removeExtraBlankLines(formattedCSS); - formattedCSS = formatLinesAtEndOfTheFile(formattedCSS); - - return formattedCSS; -}; diff --git a/exporters/variables-scss/src/formatters/stylesFormatter.ts b/exporters/variables-scss/src/formatters/stylesFormatter.ts new file mode 100644 index 0000000000..554ca7f1ec --- /dev/null +++ b/exporters/variables-scss/src/formatters/stylesFormatter.ts @@ -0,0 +1,52 @@ +export const SCSS_INDENTATION = ' '; +export const JS_INDENTATION = ' '; + +export const removeExtraBlankLines = (css: string): string => { + return css.replace(/\n{3,}/g, '\n\n'); +}; + +export const formatLinesAtEndOfTheFile = (css: string): string => { + return css.replace(/\n{2,}$/, '\n'); +}; + +const formattingConfig = { + js: { + indentation: ' ', + openingBracket: '{', + closingBracket: '}', + }, + scss: { + indentation: ' ', + openingBracket: '(', + closingBracket: ')', + }, +}; + +export const indentAndFormat = (css: string, hasJsOutput: boolean): string => { + const fileType = hasJsOutput ? 'js' : 'scss'; + const { indentation, openingBracket, closingBracket } = formattingConfig[fileType]; + let indentationLevel = 0; + let formattedCSS = ''; + + const lines = css.split('\n'); + + for (const line of lines) { + // Check if both openingBracket and closeBracket are on the same line + if (line.includes(openingBracket) && line.includes(closingBracket)) { + formattedCSS += `${indentation.repeat(indentationLevel)}${line}\n`; + } else if (line.includes(openingBracket)) { + formattedCSS += `${indentation.repeat(indentationLevel)}${line}\n`; + indentationLevel += 1; + } else if (line.includes(closingBracket)) { + indentationLevel -= 1; + formattedCSS += `${indentation.repeat(indentationLevel)}${line}\n`; + } else { + formattedCSS += `${indentation.repeat(indentationLevel)}${line}\n`; + } + } + + formattedCSS = removeExtraBlankLines(formattedCSS); + formattedCSS = formatLinesAtEndOfTheFile(formattedCSS); + + return formattedCSS; +}; diff --git a/exporters/variables-scss/src/generators/__fixtures__/barrelFileMock.scss b/exporters/variables-scss/src/generators/__fixtures__/barrelFileMock.scss new file mode 100644 index 0000000000..bcece1ac50 --- /dev/null +++ b/exporters/variables-scss/src/generators/__fixtures__/barrelFileMock.scss @@ -0,0 +1,7 @@ +@forward 'borders'; +@forward 'other'; +@forward 'radii'; +@forward 'spacing'; +@forward 'shadows'; +@forward 'gradients'; +@forward 'typography'; diff --git a/exporters/variables-scss/src/generators/__fixtures__/mockedRootThemeFile.scss b/exporters/variables-scss/src/generators/__fixtures__/mockedRootThemeFile.scss new file mode 100644 index 0000000000..5883715d82 --- /dev/null +++ b/exporters/variables-scss/src/generators/__fixtures__/mockedRootThemeFile.scss @@ -0,0 +1,12 @@ +@use 'themes/theme-light'; +@use 'themes/theme-light-inverted'; + +// The first theme is the default theme, as the left column in the Figma table. +$themes: ( + theme-light: ( + colors: theme-light.$colors, + ), + theme-light-inverted: ( + colors: theme-light-inverted.$colors, + ), +); diff --git a/exporters/variables-scss/src/generators/__fixtures__/unformattedExample.scss b/exporters/variables-scss/src/generators/__fixtures__/unformattedExample.scss new file mode 100644 index 0000000000..fa396bee27 --- /dev/null +++ b/exporters/variables-scss/src/generators/__fixtures__/unformattedExample.scss @@ -0,0 +1,6 @@ +$grids: ( +columns: $grid-columns, +spacing: ( +desktop: $grid-spacing-desktop, +), +) !default; diff --git a/exporters/variables-scss/src/generators/__fixtures__/unformattedExample.ts b/exporters/variables-scss/src/generators/__fixtures__/unformattedExample.ts new file mode 100644 index 0000000000..0fe8f8fdb5 --- /dev/null +++ b/exporters/variables-scss/src/generators/__fixtures__/unformattedExample.ts @@ -0,0 +1,6 @@ +export const grids = { +columns: gridColumns, +spacing: { +desktop: gridSpacingDesktop, +}, +}; diff --git a/exporters/variables-scss/src/generators/__tests__/contentGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/contentGenerator.test.ts index 2cbc1f416a..11d873ce81 100644 --- a/exporters/variables-scss/src/generators/__tests__/contentGenerator.test.ts +++ b/exporters/variables-scss/src/generators/__tests__/contentGenerator.test.ts @@ -1,35 +1,40 @@ import fs from 'fs'; import path from 'path'; import { Token, TokenGroup, TokenType } from '@supernovaio/sdk-exporters'; -import { generateFileContent, addDisclaimer, filterTokensByTypeAndGroup } from '../contentGenerator'; import { - exampleMockedGroups, - exampleMockedTokens, - exampleTypographyMockedTokens, -} from '../../../tests/fixtures/mockedExampleTokens'; + generateFileContent, + addDisclaimer, + filterTokensByTypeAndGroup, + generateScssObjectOutput, + generateJsObjectOutput, + getGroups, +} from '../contentGenerator'; +import { exampleDimensionAndStringTokens } from '../../../tests/fixtures/exampleDimensionAndStringTokens'; import { FileData } from '../../config/fileConfig'; +import { exampleTypographyTokens } from '../../../tests/fixtures/exampleTypographyTokens'; +import { exampleGroups } from '../../../tests/fixtures/exampleGroups'; const mockedExpectedResult = fs.readFileSync( path.join(__dirname, '../../../tests/fixtures/exampleFileContent.scss'), 'utf-8', ); const mappedTokens: Map = new Map([]); -const tokenGroups: Array = exampleMockedGroups; +const tokenGroups: Array = exampleGroups; describe('contentGenerator', () => { describe('generateFileContent', () => { it('should generate file content', () => { - const tokens = Array.from(exampleMockedTokens.values()); + const tokens = Array.from(exampleDimensionAndStringTokens.values()); const fileData: FileData = { fileName: 'testFile', tokenTypes: [TokenType.dimension, TokenType.string], groupNames: ['Grid', 'String'], - withCssObject: true, + hasStylesObject: true, hasParentPrefix: true, sortByNumValue: false, }; - const fileContent = generateFileContent(tokens, mappedTokens, tokenGroups, fileData); + const fileContent = generateFileContent(tokens, mappedTokens, tokenGroups, fileData, false); expect(fileContent).toStrictEqual({ content: mockedExpectedResult }); }); @@ -63,19 +68,19 @@ describe('contentGenerator', () => { const dataTypographyProviderItems = { type: TokenType.typography, group: 'Heading', - tokenIdentifier: 'typographyHeadingRef1', + tokenIdentifier: 'typographyRef1', }; it.each(dataProviderItems)('should filter $description', ({ type, group, tokenIdentifier }) => { - const tokens = Array.from(exampleMockedTokens.values()); - const expectedTokens = [exampleMockedTokens.get(tokenIdentifier) as Token]; + const tokens = Array.from(exampleDimensionAndStringTokens.values()); + const expectedTokens = [exampleDimensionAndStringTokens.get(tokenIdentifier) as Token]; expect(filterTokensByTypeAndGroup(tokens, type, group)).toStrictEqual(expectedTokens); }); it(`should filter ${dataTypographyProviderItems.type} token type and ${dataTypographyProviderItems.group} group and exclude tokens with "-Underline"`, () => { - const tokens = Array.from(exampleTypographyMockedTokens.values()); - const expectedTokens = [exampleTypographyMockedTokens.get(dataTypographyProviderItems.tokenIdentifier) as Token]; + const tokens = Array.from(exampleTypographyTokens.values()); + const expectedTokens = [exampleTypographyTokens.get(dataTypographyProviderItems.tokenIdentifier) as Token]; const filteredTokens = filterTokensByTypeAndGroup( tokens, @@ -86,4 +91,72 @@ describe('contentGenerator', () => { expect(filteredTokens).toStrictEqual(expectedTokens); }); }); + + describe('generateScssObjectOutput', () => { + it('should generate SCSS object output', () => { + const stylesObject = { + $grids: { columns: '$grid-columns', spacing: { desktop: '$grid-spacing-desktop' } }, + }; + const expectedResult = fs.readFileSync(path.join(__dirname, '../__fixtures__/unformattedExample.scss'), 'utf-8'); + + const scssOutput = generateScssObjectOutput(stylesObject); + + expect(scssOutput).toBe(expectedResult); + }); + }); + + describe('generateJsObjectOutput', () => { + it('should generate JS object output', () => { + const stylesObject = { + grids: { columns: 'gridColumns', spacing: { desktop: 'gridSpacingDesktop' } }, + }; + const expectedResult = fs.readFileSync(path.join(__dirname, '../__fixtures__/unformattedExample.ts'), 'utf-8'); + + const jsOutput = generateJsObjectOutput(stylesObject); + + expect(jsOutput).toBe(expectedResult); + }); + }); + + describe('getGroups', () => { + it('should return group names', () => { + const tokens = Array.from(exampleDimensionAndStringTokens.values()); + const excludeGroupNames = ['String']; + const groupNames = ['Grid']; + + const groups = getGroups(tokens, excludeGroupNames, groupNames); + + expect(groups).toStrictEqual(['Grid']); + }); + + it('should return group names without excluded group names', () => { + const tokens = Array.from(exampleDimensionAndStringTokens.values()); + const excludeGroupNames = ['String', 'Grid']; + const groupNames = ['Grid']; + + const groups = getGroups(tokens, excludeGroupNames, groupNames); + + expect(groups).toStrictEqual([]); + }); + + it('should return group names with no excluded group names', () => { + const tokens = Array.from(exampleDimensionAndStringTokens.values()); + const excludeGroupNames = null; + const groupNames = ['Grid', 'String']; + + const groups = getGroups(tokens, excludeGroupNames, groupNames); + + expect(groups).toStrictEqual(['Grid', 'String']); + }); + + it('should not return group names', () => { + const tokens = Array.from(exampleDimensionAndStringTokens.values()); + const excludeGroupNames = ['Grid', 'String']; + const groupNames = ['']; + + const groups = getGroups(tokens, excludeGroupNames, groupNames); + + expect(groups).toStrictEqual([]); + }); + }); }); diff --git a/exporters/variables-scss/src/generators/__tests__/cssGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/cssGenerator.test.ts deleted file mode 100644 index 36a688217b..0000000000 --- a/exporters/variables-scss/src/generators/__tests__/cssGenerator.test.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { DimensionToken, StringToken, Token, TokenGroup, TokenType } from '@supernovaio/sdk-exporters'; -import { generateCssFromTokens, tokenToCSSByType } from '../cssGenerator'; -import { exampleMockedGroups, exampleMockedTokens } from '../../../tests/fixtures/mockedExampleTokens'; - -const mappedTokens: Map = new Map([]); -const tokenGroups: Array = exampleMockedGroups; - -const dataProvider = [ - { - token: exampleMockedTokens.get('dimensionRef') as DimensionToken, - expectedCss: '$grid-spacing-desktop: 32px !default;', - hasParentPrefix: true, - description: 'dimension type token with parent prefix', - }, - { - token: exampleMockedTokens.get('dimensionRef') as DimensionToken, - expectedCss: '$desktop: 32px !default;', - hasParentPrefix: false, - description: 'dimension type token without parent prefix', - }, - { - token: exampleMockedTokens.get('stringRef') as StringToken, - expectedCss: '$grid-columns: 12 !default;', - hasParentPrefix: true, - description: 'string type token with parent prefix', - }, - { - token: exampleMockedTokens.get('stringRef') as StringToken, - expectedCss: '$columns: 12 !default;', - hasParentPrefix: false, - description: 'string type token without parent prefix', - }, - { - token: { - id: '3', - name: 'unsupportedToken', - tokenType: TokenType.duration, - } as Token, - expectedCss: null, - hasParentPrefix: true, - description: 'unsupported token type', - }, -]; - -describe('cssGenerator', () => { - describe.each(dataProvider)('tokenToCSSByType', ({ token, expectedCss, hasParentPrefix, description }) => { - it(`should correctly generate CSS for ${description}`, () => { - const css = tokenToCSSByType(token, mappedTokens, tokenGroups, hasParentPrefix); - - expect(css).toBe(expectedCss); - }); - }); - - describe('generateCssFromTokens', () => { - it('should generate CSS from tokens', () => { - const css = generateCssFromTokens( - Array.from(exampleMockedTokens.values()), - mappedTokens, - tokenGroups, - 'Grid', - true, - false, - ); - - expect(css).toBe('$grid-columns: 12 !default;\n\n$grid-spacing-desktop: 32px !default;'); - }); - }); -}); diff --git a/exporters/variables-scss/src/generators/__tests__/cssObjectGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/cssObjectGenerator.test.ts deleted file mode 100644 index 047f6d8026..0000000000 --- a/exporters/variables-scss/src/generators/__tests__/cssObjectGenerator.test.ts +++ /dev/null @@ -1,132 +0,0 @@ -import { Token, TokenGroup, TokenType } from '@supernovaio/sdk-exporters'; -import { - colorGroupsReducer, - createGlobalColorsObject, - createObjectStructureFromTokenNameParts, - generateCssObjectFromTokens, - getTokenAlias, - normalizeFirstNamePart, - parseGroupName, -} from '../cssObjectGenerator'; -import { - exampleMockedColorGroups, - exampleMockedColorsTokens, - exampleMockedGroups, - exampleMockedInvariantTokens, - exampleMockedTokens, -} from '../../../tests/fixtures/mockedExampleTokens'; - -const mappedTokens: Map = new Map([]); -const tokenGroups: Array = exampleMockedGroups; - -describe('cssObjectGenerator', () => { - describe('generateCssObjectFromTokens', () => { - it('should generate CSS object from tokens', () => { - const css = generateCssObjectFromTokens( - Array.from(exampleMockedTokens.values()), - mappedTokens, - tokenGroups, - true, - ); - - expect(css).toStrictEqual({ - $grids: { columns: '$grid-columns', spacing: { desktop: '$grid-spacing-desktop' } }, - }); - }); - - it('should generate CSS object from tokens with colors', () => { - const css = generateCssObjectFromTokens( - Array.from(exampleMockedColorsTokens.values()), - mappedTokens, - exampleMockedColorGroups, - true, - ); - - expect(css).toStrictEqual({ - '$action-colors': { - button: { - primary: { - active: '$action-button-primary-active', - }, - }, - }, - '$background-colors': { - primary: '$background-primary', - }, - $colors: { - action: '$action-colors', - background: '$background-colors', - }, - }); - }); - }); - - describe('createObjectStructureFromTokenNameParts', () => { - it('should create object structure from token name parts', () => { - const cssObject = createObjectStructureFromTokenNameParts( - exampleMockedTokens.get('dimensionRef') as Token, - tokenGroups, - true, - { $grids: { columns: '$grid-columns' } }, - ); - - expect(cssObject).toStrictEqual({ - $grids: { columns: '$grid-columns', spacing: { desktop: '$grid-spacing-desktop' } }, - }); - }); - }); - - describe('handleInvariantTokens', () => { - it('should return token alias for invariant case', () => { - const token = exampleMockedInvariantTokens.get('radiiRef') as Token; - expect(getTokenAlias(token)).toBe('full'); - }); - - it('should return token alias for non-invariant case', () => { - const token = exampleMockedTokens.get('dimensionRef') as Token; - expect(getTokenAlias(token)).toBe('desktop'); - }); - }); - - describe('getTokenAlias', () => { - it('should return token alias for non-numeric', () => { - const token = exampleMockedTokens.get('dimensionRef') as Token; - expect(getTokenAlias(token)).toBe('desktop'); - }); - }); - - describe('normalizeFirstNamePart', () => { - it('should return correct first part name for token type dimension', () => { - expect(normalizeFirstNamePart('grid', TokenType.dimension)).toBe('$grids'); - }); - - it('should return correct first part name for token type color', () => { - expect(normalizeFirstNamePart('action', TokenType.color)).toBe('$action-colors'); - }); - }); - - describe('createGlobalColorsObject', () => { - it('should create global colors object', () => { - const colorKeys = ['$action-colors', '$background-colors']; - const colorsObject = createGlobalColorsObject(colorKeys); - - expect(colorsObject).toStrictEqual({ action: '$action-colors', background: '$background-colors' }); - }); - }); - - describe('parseGroupName', () => { - it('should parse group name', () => { - expect(parseGroupName('$background-colors')).toBe('background'); - }); - }); - - describe('colorGroupsReducer', () => { - it('should reduce color groups', () => { - const accumulatedColorKeys = { action: '$action-colors' }; - const currentColorKey = '$background-colors'; - const result = colorGroupsReducer(accumulatedColorKeys, currentColorKey); - - expect(result).toStrictEqual({ action: '$action-colors', background: '$background-colors' }); - }); - }); -}); diff --git a/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts index 933cc75c59..3bbf805850 100644 --- a/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts +++ b/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts @@ -1,31 +1,68 @@ import fs from 'fs'; import path from 'path'; import { Supernova, Token, TokenGroup, TokenTheme } from '@supernovaio/sdk-exporters'; -import { generateFiles, generateOutputFilesByThemes } from '../fileGenerator'; -import { exampleMockedGroups, exampleMockedTokens } from '../../../tests/fixtures/mockedExampleTokens'; +import { + generateFiles, + generateBarrelFile, + generateOutputFilesByThemes, + generateRootThemesFileContent, + generateRootThemesFileImports, + generateThemesRootFile, + jsImportStatement, + scssImportStatement, +} from '../fileGenerator'; +import { exampleDimensionAndStringTokens } from '../../../tests/fixtures/exampleDimensionAndStringTokens'; import { nonThemedFilesData } from '../../config/fileConfig'; +import { exampleGroups } from '../../../tests/fixtures/exampleGroups'; const mockedExpectedResult = fs.readFileSync( path.join(__dirname, '../../../tests/fixtures/exampleFileContent.scss'), 'utf-8', ); const mappedTokens: Map = new Map([]); -const tokenGroups: Array = exampleMockedGroups; +const tokenGroups: Array = exampleGroups; const emptyFile = `/* This file was generated by Supernova, don't change manually */\n\n`; -const indexFile = `@forward 'borders'; -@forward 'other'; -@forward 'radii'; -@forward 'spacing'; -@forward 'shadows'; -@forward 'gradients'; -@forward 'typography'; +const barrelFile = fs.readFileSync(path.join(__dirname, '../__fixtures__/barrelFileMock.scss'), 'utf-8'); +const barrelColorFile = `@forward 'colors';\n`; +const barrelJsFile = `export * from './borders'; +export * from './other'; +export * from './radii'; +export * from './spacing'; +export * from './shadows'; +export * from './gradients'; +export * from './typography'; +`; +const barrelJsColorFile = `export * from './colors';\n`; + +const mockedTsFile = `/* This file was generated by Supernova, don't change manually */ +export const gridSpacingDesktop = '32px';\n +export const gridColumns = '12';\n +export const grids = { + spacing: { + desktop: gridSpacingDesktop, + }, + columns: gridColumns, +};\n`; + +const mockedRootThemeFile = fs.readFileSync(path.join(__dirname, '../__fixtures__/mockedRootThemeFile.scss'), 'utf-8'); + +const mockedRootThemeJsFile = `import * as themeLight from './themes/theme-light'; +import * as themeLightInverted from './themes/theme-light-inverted';\n +// The first theme is the default theme, as the left column in the Figma table. +export const themes = { + themeLight: { + colors: themeLight.colors + }, + themeLightInverted: { + colors: themeLightInverted.colors + }, +}; `; -const indexColorFile = `@forward 'colors';\n`; describe('fileGenerator', () => { describe('generateOutputFilesByThemes', () => { it('should generate output files by themes', async () => { - const tokens = Array.from(exampleMockedTokens.values()); + const tokens = Array.from(exampleDimensionAndStringTokens.values()); const sdk = { tokens: { computeTokensByApplyingThemes: jest.fn().mockResolvedValue(tokens), @@ -41,43 +78,163 @@ describe('fileGenerator', () => { ); expect(outputFiles).toStrictEqual([ - { - path: './globals/', - fileName: '_borders.scss', - content: emptyFile, - }, - { path: './globals/', fileName: '_other.scss', content: mockedExpectedResult }, - { path: './globals/', fileName: '_radii.scss', content: emptyFile }, - { path: './globals/', fileName: '_spacing.scss', content: emptyFile }, - { path: './globals/', fileName: '_shadows.scss', content: emptyFile }, - { path: './globals/', fileName: '_gradients.scss', content: emptyFile }, - { path: './globals/', fileName: '_typography.scss', content: emptyFile }, - { path: './globals/', fileName: 'index.scss', content: indexFile }, - { path: './themes/theme-light/', fileName: '_colors.scss', content: emptyFile }, - { path: './themes/theme-light/', fileName: 'index.scss', content: indexColorFile }, - { path: './themes/theme-light-inverted/', fileName: '_colors.scss', content: emptyFile }, - { path: './themes/theme-light-inverted/', fileName: 'index.scss', content: indexColorFile }, + // Global files + { path: './scss/global', fileName: '_borders.scss', content: emptyFile }, + { path: './scss/global', fileName: '_other.scss', content: mockedExpectedResult }, + { path: './scss/global', fileName: '_radii.scss', content: emptyFile }, + { path: './scss/global', fileName: '_spacing.scss', content: emptyFile }, + { path: './scss/global', fileName: '_shadows.scss', content: emptyFile }, + { path: './scss/global', fileName: '_gradients.scss', content: emptyFile }, + { path: './scss/global', fileName: '_typography.scss', content: emptyFile }, + { path: './js/global/', fileName: 'borders.ts', content: emptyFile }, + { path: './js/global/', fileName: 'other.ts', content: mockedTsFile }, + { path: './js/global/', fileName: 'radii.ts', content: emptyFile }, + { path: './js/global/', fileName: 'spacing.ts', content: emptyFile }, + { path: './js/global/', fileName: 'shadows.ts', content: emptyFile }, + { path: './js/global/', fileName: 'gradients.ts', content: emptyFile }, + { path: './js/global/', fileName: 'typography.ts', content: emptyFile }, + // Global barrel files + { path: './scss/global/', fileName: 'index.scss', content: barrelFile }, + { path: './js/global/', fileName: 'index.ts', content: barrelJsFile }, + // Root barrel files + { path: './scss/', fileName: '@global.scss', content: `@forward 'global';\n` }, + { path: './js/', fileName: '@global.ts', content: `export * from './global';\n` }, + // Themes files + { path: './scss/themes/theme-light/', fileName: '_colors.scss', content: emptyFile }, + { path: './js/themes/theme-light/', fileName: 'colors.ts', content: emptyFile }, + { path: './scss/themes/theme-light/', fileName: 'index.scss', content: barrelColorFile }, + { path: './js/themes/theme-light/', fileName: 'index.ts', content: barrelJsColorFile }, + { path: './scss/themes/theme-light-inverted/', fileName: '_colors.scss', content: emptyFile }, + { path: './js/themes/theme-light-inverted/', fileName: 'colors.ts', content: emptyFile }, + { path: './scss/themes/theme-light-inverted/', fileName: 'index.scss', content: barrelColorFile }, + { path: './js/themes/theme-light-inverted/', fileName: 'index.ts', content: barrelJsColorFile }, + // Themes root barrel files + { path: './scss/', fileName: '@themes.scss', content: mockedRootThemeFile }, + { path: './js/', fileName: '@themes.ts', content: mockedRootThemeJsFile }, ]); }); }); describe('generateFiles', () => { it('should generate files', () => { - const tokens = Array.from(exampleMockedTokens.values()); - const files = generateFiles(tokens, mappedTokens, tokenGroups, nonThemedFilesData); + const tokens = Array.from(exampleDimensionAndStringTokens.values()); + const files = generateFiles(tokens, mappedTokens, tokenGroups, nonThemedFilesData, false); expect(files).toStrictEqual([ { - fileName: '_borders.scss', + fileName: 'borders', content: emptyFile, }, - { fileName: '_other.scss', content: mockedExpectedResult }, - { fileName: '_radii.scss', content: emptyFile }, - { fileName: '_spacing.scss', content: emptyFile }, - { fileName: '_shadows.scss', content: emptyFile }, - { fileName: '_gradients.scss', content: emptyFile }, - { fileName: '_typography.scss', content: emptyFile }, + { fileName: 'other', content: mockedExpectedResult }, + { fileName: 'radii', content: emptyFile }, + { fileName: 'spacing', content: emptyFile }, + { fileName: 'shadows', content: emptyFile }, + { fileName: 'gradients', content: emptyFile }, + { fileName: 'typography', content: emptyFile }, ]); }); }); + + describe('generateBarrelFile', () => { + const dataProvider = [ + { + files: [{ fileName: 'borders', content: emptyFile }], + description: 'should generate barrel file with one file', + expectedBarrelFile: `@forward 'borders';\n`, + }, + { + files: [ + { fileName: 'borders', content: emptyFile }, + { fileName: 'other', content: mockedExpectedResult }, + ], + description: 'should generate barrel file with multiple files', + expectedBarrelFile: `@forward 'borders';\n@forward 'other';\n`, + }, + { + files: [ + { fileName: 'borders', content: emptyFile }, + { fileName: 'other', content: mockedExpectedResult }, + ], + description: 'should generate barrel file with one file with js output', + hasJsOutput: true, + expectedBarrelFile: `export * from './borders';\nexport * from './other';\n`, + }, + ]; + + it.each(dataProvider)('$description', ({ files, expectedBarrelFile, hasJsOutput }) => { + const mockedBarrelFile = generateBarrelFile(files, hasJsOutput); + + expect(mockedBarrelFile).toBe(expectedBarrelFile); + }); + }); + + describe('generateThemesRootFile', () => { + it('should generate themes root file content', () => { + const themes = [{ name: 'theme-light' }, { name: 'theme-light-inverted' }]; + const content = generateThemesRootFile(themes as TokenTheme[], false); + + expect(content).toBe(mockedRootThemeFile); + }); + + it('should generate themes root file content with js output', () => { + const themes = [{ name: 'theme-light' }, { name: 'theme-light-inverted' }]; + const content = generateThemesRootFile(themes as TokenTheme[], true); + + expect(content).toBe(mockedRootThemeJsFile); + }); + }); + + describe('generateRootThemesFileContent', () => { + it('should generate root themes file content', () => { + const themes = [{ name: 'theme-light' }, { name: 'theme-light-inverted' }]; + const content = generateRootThemesFileContent(themes as TokenTheme[], false); + + expect(content).toBe( + `theme-light: (\ncolors: theme-light.$colors,\n),\ntheme-light-inverted: (\ncolors: theme-light-inverted.$colors,\n),`, + ); + }); + + it('should generate root themes file content with js output', () => { + const themes = [{ name: 'theme-light' }, { name: 'theme-light-inverted' }]; + const content = generateRootThemesFileContent(themes as TokenTheme[], true); + + expect(content).toBe( + `themeLight: {\ncolors: themeLight.colors\n},\nthemeLightInverted: {\ncolors: themeLightInverted.colors\n},`, + ); + }); + }); + + describe('generateRootThemesFileImports', () => { + it('should generate root themes file imports', () => { + const themes = [{ name: 'theme-light' }, { name: 'theme-light-inverted' }]; + const content = generateRootThemesFileImports(themes as TokenTheme[], false); + + expect(content).toBe(`@use 'themes/theme-light';\n@use 'themes/theme-light-inverted';`); + }); + + it('should generate root themes file imports with js output', () => { + const themes = [{ name: 'theme-light' }, { name: 'theme-light-inverted' }]; + const content = generateRootThemesFileImports(themes as TokenTheme[], true); + + expect(content).toBe( + `import * as themeLight from './themes/theme-light';\nimport * as themeLightInverted from './themes/theme-light-inverted';`, + ); + }); + }); + + describe('jsImportStatement', () => { + it('should generate js import statement', () => { + const content = jsImportStatement('theme-light'); + + expect(content).toBe(`import * as themeLight from './themes/theme-light';`); + }); + }); + + describe('scssImportStatement', () => { + it('should generate scss import statement', () => { + const content = scssImportStatement('theme-light'); + + expect(content).toBe(`@use 'themes/theme-light';`); + }); + }); }); diff --git a/exporters/variables-scss/src/generators/__tests__/stylesGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/stylesGenerator.test.ts new file mode 100644 index 0000000000..a7bd4ba1c5 --- /dev/null +++ b/exporters/variables-scss/src/generators/__tests__/stylesGenerator.test.ts @@ -0,0 +1,182 @@ +import { + DimensionToken, + GradientToken, + ShadowToken, + StringToken, + Token, + TokenGroup, + TokenType, +} from '@supernovaio/sdk-exporters'; +import { generateStylesFromTokens, tokenToStyleByType } from '../stylesGenerator'; +import { exampleDimensionAndStringTokens } from '../../../tests/fixtures/exampleDimensionAndStringTokens'; +import { exampleColorsTokens } from '../../../tests/fixtures/exampleColorTokens'; +import { exampleGroups } from '../../../tests/fixtures/exampleGroups'; +import { exampleShadowTokens } from '../../../tests/fixtures/exampleShadowTokens'; +import { exampleGradientTokens } from '../../../tests/fixtures/exampleGradientTokens'; + +const mappedTokens: Map = new Map([]); +const tokenGroups: Array = exampleGroups; + +describe('stylesGenerator', () => { + describe('tokenToStyleByType', () => { + const dataProvider = [ + { + token: exampleDimensionAndStringTokens.get('dimensionRef') as DimensionToken, + description: 'dimension type token with parent prefix', + hasParentPrefix: true, + hasJsOutput: false, + expectedStyles: '$grid-spacing-desktop: 32px !default;', + }, + { + token: exampleDimensionAndStringTokens.get('dimensionRef') as DimensionToken, + description: 'dimension type token without parent prefix', + hasParentPrefix: false, + hasJsOutput: false, + expectedStyles: '$desktop: 32px !default;', + }, + { + token: exampleDimensionAndStringTokens.get('stringRef') as StringToken, + description: 'string type token with parent prefix', + hasParentPrefix: true, + hasJsOutput: false, + expectedStyles: '$grid-columns: 12 !default;', + }, + { + token: exampleDimensionAndStringTokens.get('stringRef') as StringToken, + description: 'string type token without parent prefix', + hasParentPrefix: false, + hasJsOutput: false, + expectedStyles: '$columns: 12 !default;', + }, + { + token: { + id: '3', + name: 'unsupportedToken', + tokenType: TokenType.duration, + } as Token, + description: 'unsupported token type', + hasParentPrefix: true, + hasJsOutput: false, + expectedStyles: null, + }, + { + token: exampleDimensionAndStringTokens.get('dimensionRef') as DimensionToken, + description: 'dimension type token with parent prefix and js output', + hasParentPrefix: true, + hasJsOutput: true, + expectedStyles: `export const gridSpacingDesktop = '32px';`, + }, + { + token: exampleDimensionAndStringTokens.get('dimensionRef') as DimensionToken, + description: 'dimension type token without parent prefix and js output', + hasParentPrefix: false, + hasJsOutput: true, + expectedStyles: `export const desktop = '32px';`, + }, + { + token: exampleDimensionAndStringTokens.get('stringRef') as StringToken, + description: 'string type token with parent prefix and js output', + hasParentPrefix: true, + hasJsOutput: true, + expectedStyles: `export const gridColumns = '12';`, + }, + { + token: exampleDimensionAndStringTokens.get('stringRef') as StringToken, + description: 'string type token without parent prefix and js output', + hasParentPrefix: false, + hasJsOutput: true, + expectedStyles: `export const columns = '12';`, + }, + { + token: exampleShadowTokens.get('shadowRef') as ShadowToken, + description: 'shadow type token without parent prefix', + hasParentPrefix: false, + hasJsOutput: false, + expectedStyles: `$shadow-100: 0 2px 8px 0 #00000026 !default;`, + }, + { + token: exampleGradientTokens.get('gradientRef') as GradientToken, + description: 'gradient type token without parent prefix', + hasParentPrefix: false, + hasJsOutput: false, + expectedStyles: `$basic-overlay: linear-gradient(var(--gradient-angle, 90deg), #ffffffff 0%, #ffffff00 100%) !default;`, + }, + ]; + + it.each(dataProvider)( + `should correctly generate styles for $description`, + ({ token, expectedStyles, hasParentPrefix, hasJsOutput }) => { + const styles = tokenToStyleByType(token, mappedTokens, tokenGroups, hasParentPrefix, hasJsOutput); + + expect(styles).toBe(expectedStyles); + }, + ); + }); + + describe('generateStylesFromTokens', () => { + const dataProvider = [ + { + tokens: exampleDimensionAndStringTokens, + groupName: 'Grid', + hasJsOutput: false, + hasParentPrefix: true, + description: 'should generate styles from tokens', + expectedStyles: '$grid-columns: 12 !default;\n\n$grid-spacing-desktop: 32px !default;', + }, + { + tokens: exampleDimensionAndStringTokens, + groupName: 'Grid', + hasJsOutput: true, + hasParentPrefix: true, + description: 'should generate styles from tokens with js output', + expectedStyles: `export const gridColumns = '12';\n\nexport const gridSpacingDesktop = '32px';`, + }, + { + tokens: exampleColorsTokens, + groupName: '', + hasJsOutput: false, + hasParentPrefix: false, + description: 'should generate styles from tokens with colors', + expectedStyles: `$active: #ca2026 !default;\n\n$primary: #fff !default;`, + }, + { + tokens: exampleColorsTokens, + groupName: '', + hasJsOutput: true, + hasParentPrefix: false, + description: 'should generate styles from tokens with colors with js output', + expectedStyles: `export const active = '#ca2026';\n\nexport const primary = '#fff';`, + }, + { + tokens: exampleShadowTokens, + groupName: '', + hasJsOutput: false, + hasParentPrefix: false, + description: 'should generate styles from tokens with shadows', + expectedStyles: `$shadow-100: 0 2px 8px 0 #00000026 !default;`, + }, + { + tokens: exampleGradientTokens, + groupName: '', + hasJsOutput: false, + hasParentPrefix: false, + description: 'should generate styles from tokens with gradients', + expectedStyles: `$basic-overlay: linear-gradient(var(--gradient-angle, 90deg), #ffffffff 0%, #ffffff00 100%) !default;`, + }, + ]; + + it.each(dataProvider)('$description', ({ tokens, groupName, hasJsOutput, hasParentPrefix, expectedStyles }) => { + const styles = generateStylesFromTokens( + Array.from(tokens.values()), + mappedTokens, + tokenGroups, + groupName, + hasParentPrefix, + false, + hasJsOutput, + ); + + expect(styles).toBe(expectedStyles); + }); + }); +}); diff --git a/exporters/variables-scss/src/generators/__tests__/stylesObjectGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/stylesObjectGenerator.test.ts new file mode 100644 index 0000000000..05c04ff8b1 --- /dev/null +++ b/exporters/variables-scss/src/generators/__tests__/stylesObjectGenerator.test.ts @@ -0,0 +1,296 @@ +import { Token, TokenGroup, TypographyToken } from '@supernovaio/sdk-exporters'; +import { + colorGroupsReducer, + createGlobalColorsObject, + createStylesObjectStructureFromTokenNameParts, + StylesObjectType, + generateStylesObjectFromTokens, + parseGroupName, + createGlobalTypographyObject, + typographyGroupReducer, + handleTypographyTokens, +} from '../stylesObjectGenerator'; +import { exampleDimensionAndStringTokens } from '../../../tests/fixtures/exampleDimensionAndStringTokens'; +import { exampleColorsTokens } from '../../../tests/fixtures/exampleColorTokens'; +import { exampleTypographyTokens } from '../../../tests/fixtures/exampleTypographyTokens'; +import { exampleGroups } from '../../../tests/fixtures/exampleGroups'; + +const mappedTokens: Map = new Map([]); +const tokenGroups: Array = exampleGroups; + +describe('stylesObjectGenerator', () => { + describe('generateStylesObjectFromTokens', () => { + const dataProvider = [ + { + tokens: exampleDimensionAndStringTokens, + expectedStyles: { $grids: { columns: '$grid-columns', spacing: { desktop: '$grid-spacing-desktop' } } }, + description: 'should generate object from tokens', + hasJsOutput: false, + }, + { + tokens: exampleColorsTokens, + expectedStyles: { + '$action-colors': { button: { primary: { active: '$action-button-primary-active' } } }, + '$background-colors': { primary: '$background-primary' }, + $colors: { action: '$action-colors', background: '$background-colors' }, + }, + description: 'should generate object from tokens with colors', + hasJsOutput: false, + }, + { + tokens: exampleDimensionAndStringTokens, + expectedStyles: { grids: { columns: 'gridColumns', spacing: { desktop: 'gridSpacingDesktop' } } }, + description: 'should generate object from tokens with js output', + hasJsOutput: true, + }, + { + tokens: exampleColorsTokens, + expectedStyles: { + actionColors: { + button: { + primary: { + active: 'actionButtonPrimaryActive', + }, + }, + }, + backgroundColors: { + primary: 'backgroundPrimary', + }, + colors: { + action: 'actionColors', + background: 'backgroundColors', + }, + }, + description: 'should generate object from tokens with colors with js output', + hasJsOutput: true, + }, + { + tokens: exampleTypographyTokens, + expectedStyles: { + '$heading-xlarge-bold': { + desktop: + '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)', + }, + '$heading-xlarge-bold-underline': { + desktop: + '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)', + }, + $styles: { + 'heading-xlarge-bold': '$heading-xlarge-bold', + 'heading-xlarge-bold-underline': '$heading-xlarge-bold-underline', + moveToTheEnd: 'true', + }, + }, + description: 'should generate object from typography tokens', + hasJsOutput: false, + }, + { + tokens: exampleTypographyTokens, + expectedStyles: { + styles: { + headingXlargeBold: 'headingXlargeBold', + headingXlargeBoldUnderline: 'headingXlargeBoldUnderline', + moveToTheEnd: 'true', + }, + headingXlargeBold: { + desktop: `{\nfontFamily: "'Inter', sans-serif",\nfontSize: '64px',\nfontStyle: 'normal',\nfontWeight: 700,\nlineHeight: 1.2,\n}`, + }, + headingXlargeBoldUnderline: { + desktop: `{\nfontFamily: "'Inter', sans-serif",\nfontSize: '64px',\nfontStyle: 'normal',\nfontWeight: 700,\nlineHeight: 1.2,\n}`, + }, + }, + description: 'should generate object from typography tokens with js output', + hasJsOutput: true, + }, + ]; + + it.each(dataProvider)('$description', ({ tokens, expectedStyles, hasJsOutput }) => { + const styles = generateStylesObjectFromTokens( + Array.from(tokens.values()), + mappedTokens, + tokenGroups, + true, + hasJsOutput, + ); + + expect(styles).toStrictEqual(expectedStyles); + }); + }); + + describe('createStylesObjectStructureFromTokenNameParts', () => { + const dataProvider = [ + { + token: exampleDimensionAndStringTokens.get('dimensionRef') as Token, + expectedObject: { $grids: { columns: '$grid-columns', spacing: { desktop: '$grid-spacing-desktop' } } }, + description: 'should create object structure from dimension token name parts', + stylesObjectRef: { $grids: { columns: '$grid-columns' } } as StylesObjectType, + hasJsOutput: false, + }, + { + token: exampleDimensionAndStringTokens.get('dimensionRef') as Token, + expectedObject: { grids: { columns: 'gridColumns', spacing: { desktop: 'gridSpacingDesktop' } } }, + description: 'should create object structure from dimension token name parts with js output', + stylesObjectRef: { grids: { columns: 'gridColumns' } } as StylesObjectType, + hasJsOutput: true, + }, + { + token: exampleColorsTokens.get('backgroundColorRef') as Token, + expectedObject: { + actionColors: { button: { primary: { active: 'actionButtonPrimaryActive' } } }, + backgroundColors: { + primary: 'backgroundPrimary', + }, + }, + description: 'should create object structure from color token with js output', + stylesObjectRef: { + actionColors: { button: { primary: { active: 'actionButtonPrimaryActive' } } }, + } as StylesObjectType, + hasJsOutput: true, + }, + { + token: exampleTypographyTokens.get('typographyRef1') as Token, + expectedObject: { + '$heading-xlarge-bold': { + desktop: + '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)', + tablet: + '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)', + }, + }, + description: 'should create object structure from typography token', + stylesObjectRef: { + '$heading-xlarge-bold': { + tablet: + '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)', + }, + } as StylesObjectType, + hasJsOutput: false, + }, + { + token: exampleTypographyTokens.get('typographyRef1') as Token, + expectedObject: { + headingXlargeBold: { + desktop: `{\nfontFamily: "'Inter', sans-serif",\nfontSize: '64px',\nfontStyle: 'normal',\nfontWeight: 700,\nlineHeight: 1.2,\n}`, + tablet: `{\nfontFamily: "'Inter', sans-serif",\nfontSize: '32px',\nfontStyle: 'normal',\nfontWeight: 500,\nlineHeight: 1,\n}`, + }, + }, + description: 'should create object structure from typography token with js output', + stylesObjectRef: { + headingXlargeBold: { + tablet: `{\nfontFamily: "'Inter', sans-serif",\nfontSize: '32px',\nfontStyle: 'normal',\nfontWeight: 500,\nlineHeight: 1,\n}`, + }, + } as StylesObjectType, + hasJsOutput: true, + }, + ]; + + it.each(dataProvider)('$description', ({ token, expectedObject, stylesObjectRef, hasJsOutput }) => { + const cssObject = createStylesObjectStructureFromTokenNameParts( + token, + tokenGroups, + true, + stylesObjectRef, + hasJsOutput, + ); + + expect(cssObject).toStrictEqual(expectedObject); + }); + }); + + describe('handleTypographyTokens', () => { + const dataProvider = [ + { + tokens: exampleTypographyTokens.get('typographyRef1') as TypographyToken, + tokenNameParts: ['heading', 'desktop', 'xLarge', 'bold'], + expectedStyles: { + '$heading-xlarge-bold': { + desktop: + '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)', + }, + exampleRef: 'exampleRef', + }, + description: 'should generate object from typography tokens', + hasJsOutput: false, + }, + { + tokens: exampleTypographyTokens.get('typographyRef1') as TypographyToken, + tokenNameParts: ['heading', 'desktop', 'xLarge', 'bold'], + expectedStyles: { + exampleRef: 'exampleRef', + headingXlargeBold: { + desktop: `{\nfontFamily: "'Inter', sans-serif",\nfontSize: '64px',\nfontStyle: 'normal',\nfontWeight: 700,\nlineHeight: 1.2,\n}`, + }, + }, + description: 'should generate object from typography tokens with js output', + hasJsOutput: true, + }, + ]; + + it.each(dataProvider)('$description', ({ tokens, tokenNameParts, expectedStyles, hasJsOutput }) => { + const stylesObjectRef = { exampleRef: 'exampleRef' }; + handleTypographyTokens(tokenNameParts, tokens, stylesObjectRef, hasJsOutput); + expect(stylesObjectRef).toStrictEqual(expectedStyles); + }); + }); + + describe('createGlobalColorsObject', () => { + it('should create global colors object', () => { + const colorKeys = ['$action-colors', '$background-colors']; + const colorsObject = createGlobalColorsObject(colorKeys, false); + + expect(colorsObject).toStrictEqual({ action: '$action-colors', background: '$background-colors' }); + }); + + it('should create global colors object with js output', () => { + const colorKeys = ['actionColors', 'backgroundColors']; + const colorsObject = createGlobalColorsObject(colorKeys, true); + + expect(colorsObject).toStrictEqual({ action: 'actionColors', background: 'backgroundColors' }); + }); + }); + + describe('createGlobalTypographyObject', () => { + it('should create global typography object', () => { + const typographyKeys = ['$heading-xlarge-bold', '$body-large-regular']; + const typographyObject = createGlobalTypographyObject(typographyKeys); + + expect(typographyObject).toStrictEqual({ + 'body-large-regular': '$body-large-regular', + 'heading-xlarge-bold': '$heading-xlarge-bold', + }); + }); + }); + + describe('parseGroupName', () => { + it('should parse group name', () => { + expect(parseGroupName('$background-colors', false)).toBe('background'); + }); + + it('should parse group name with js output', () => { + expect(parseGroupName('backgroundColors', true)).toBe('background'); + }); + }); + + describe('colorGroupsReducer', () => { + it('should reduce color groups', () => { + const accumulatedColorKeys = { action: '$action-colors' }; + const currentColorKey = '$background-colors'; + const result = colorGroupsReducer(accumulatedColorKeys, currentColorKey); + + expect(result).toStrictEqual({ action: '$action-colors', background: '$background-colors' }); + }); + }); + + describe('typographyGroupReducer', () => { + it('should reduce typography groups', () => { + const accumulatedTypographyKeys = { 'heading-xlarge-bold': '$heading-xlarge-bold' }; + const currentTypographyKey = '$body-large-regular'; + const result = typographyGroupReducer(accumulatedTypographyKeys, currentTypographyKey); + + expect(result).toStrictEqual({ + 'body-large-regular': '$body-large-regular', + 'heading-xlarge-bold': '$heading-xlarge-bold', + }); + }); + }); +}); diff --git a/exporters/variables-scss/src/generators/contentGenerator.ts b/exporters/variables-scss/src/generators/contentGenerator.ts index 3b5dfdac5d..6480f7632d 100644 --- a/exporters/variables-scss/src/generators/contentGenerator.ts +++ b/exporters/variables-scss/src/generators/contentGenerator.ts @@ -1,9 +1,9 @@ import { Token, TokenGroup, TokenType } from '@supernovaio/sdk-exporters'; -import { generateCssFromTokens } from './cssGenerator'; -import { CssObjectType, generateCssObjectFromTokens } from './cssObjectGenerator'; -import { formatCSS } from '../formatters/cssFormatter'; -import { convertToScss, deepMergeObjects } from '../helpers/cssObjectHelper'; import { FileData } from '../config/fileConfig'; +import { indentAndFormat } from '../formatters/stylesFormatter'; +import { convertToJs, convertToScss, deepMergeObjects } from '../helpers/objectHelper'; +import { generateStylesFromTokens } from './stylesGenerator'; +import { StylesObjectType, generateStylesObjectFromTokens } from './stylesObjectGenerator'; // Add disclaimer to the top of the content export const addDisclaimer = (content: string): string => { @@ -20,50 +20,122 @@ export const filterTokensByTypeAndGroup = (tokens: Token[], type: TokenType, gro }); }; +const addEmptyLineBetweenTokenGroups = (index: number, length: number): string => { + return index !== length - 1 ? '\n\n' : '\n'; +}; + +type ExportTemplateCallback = (entriesLength: number) => (entry: [string, unknown], index: number) => string; + +const jsExportTemplate: ExportTemplateCallback = (entriesLength) => { + return ([key, obj], index) => { + return `export const ${key} = {\n${convertToJs(obj as StylesObjectType)}\n};${addEmptyLineBetweenTokenGroups(index, entriesLength)}`; + }; +}; + +const scssExportTemplate: ExportTemplateCallback = (entriesLength) => { + return ([key, obj], index) => { + return `${key}: (\n${convertToScss(obj as StylesObjectType)}\n) !default;${addEmptyLineBetweenTokenGroups(index, entriesLength)}`; + }; +}; + +const generateObjectOutput = (stylesObject: StylesObjectType, callback: ExportTemplateCallback) => { + const entries = Object.entries(stylesObject); + + return entries.map(callback(entries.length)).join(''); +}; + +export const generateJsObjectOutput = (stylesObject: StylesObjectType): string => { + return generateObjectOutput(stylesObject, jsExportTemplate); +}; + +export const generateScssObjectOutput = (stylesObject: StylesObjectType): string => { + return generateObjectOutput(stylesObject, scssExportTemplate); +}; + +export const getGroups = (tokens: Token[], excludeGroupNames: string[] | null, groupNames: string[]): string[] => { + let groups; + + if (excludeGroupNames && excludeGroupNames.length > 0) { + const filteredTokens = tokens.filter((token) => { + return !excludeGroupNames.some((excludedGroup) => token.origin?.name?.includes(excludedGroup)); + }); + + const restOfGroupNames = filteredTokens.reduce((acc: string[], token) => { + const groupName = token.origin?.name?.split('/')[0]; + if (groupName && !acc.includes(groupName)) { + acc.push(groupName); + } + + return acc; + }, []); + + groups = [...new Set(restOfGroupNames)]; + } else { + groups = groupNames; + } + + return groups; +}; + export const generateFileContent = ( tokens: Token[], mappedTokens: Map, tokenGroups: Array, fileData: FileData, + hasJsOutput: boolean, ) => { - let cssTokens = ''; - let cssObject: CssObjectType = {}; - const { groupNames, hasParentPrefix = true, sortByNumValue = false, withCssObject = true, tokenTypes } = fileData; + let styledTokens = ''; + let stylesObject: StylesObjectType = {}; + const { + groupNames = [''], + hasParentPrefix = true, + sortByNumValue = false, + hasStylesObject = true, + tokenTypes, + excludeGroupNames = null, + } = fileData; - // Iterate over token types and group names to filter tokens + // Iterate over token types and groups to filter tokens tokenTypes.forEach((tokenType) => { - groupNames.forEach((group) => { + const groups = getGroups(tokens, excludeGroupNames, groupNames); + + groups.forEach((group) => { const filteredTokens = filterTokensByTypeAndGroup(tokens, tokenType, group); // Generate css tokens if (tokenType !== TokenType.typography) { - cssTokens += generateCssFromTokens( + styledTokens += generateStylesFromTokens( filteredTokens, mappedTokens, tokenGroups, group, hasParentPrefix, sortByNumValue, + hasJsOutput, ); - cssTokens += '\n\n'; + styledTokens += '\n\n'; } // Generate css object and merge it with the existing one - const groupCssObject = generateCssObjectFromTokens(filteredTokens, mappedTokens, tokenGroups, hasParentPrefix); - cssObject = deepMergeObjects(cssObject, groupCssObject); + const groupStylesObject = generateStylesObjectFromTokens( + filteredTokens, + mappedTokens, + tokenGroups, + hasParentPrefix, + hasJsOutput, + ); + stylesObject = deepMergeObjects(stylesObject, groupStylesObject); }); }); - let content = cssTokens; + let content = styledTokens; - // convert css object to scss structure - if (withCssObject) { - content += Object.entries(cssObject) - .map(([key, obj]) => `${key}: (\n${convertToScss(obj as CssObjectType)}\n) !default;\n\n`) - .join(''); + // convert css object to scss or js structure based on file extension + if (hasStylesObject) { + content += hasJsOutput ? generateJsObjectOutput(stylesObject) : generateScssObjectOutput(stylesObject); } return { - content: addDisclaimer(formatCSS(content)), + content: addDisclaimer(indentAndFormat(content, hasJsOutput)), }; }; diff --git a/exporters/variables-scss/src/generators/cssObjectGenerator.ts b/exporters/variables-scss/src/generators/cssObjectGenerator.ts deleted file mode 100644 index ff27b4f8d0..0000000000 --- a/exporters/variables-scss/src/generators/cssObjectGenerator.ts +++ /dev/null @@ -1,175 +0,0 @@ -import { Token, TokenGroup, TokenType, TypographyToken } from '@supernovaio/sdk-exporters'; -import { formatTypographyName, getBreakpoint } from '../helpers/cssObjectHelper'; -import { tokenVariableName, typographyValue } from '../helpers/tokenHelper'; -import { toPlural } from '../helpers/stringHelper'; - -export const COLOR_SUFFIX = '-colors'; - -export type CssObjectType = { [key: string]: (string | object) & { moveToTheEnd?: string } }; - -/* This function handles cases that are outside the logic of aliases for the remaining tokens. -A common condition is that for tokens with a numeric part, the non-numeric part is dropped. -Non-numeric tokens are left in their original form. Deviations from this logic are addressed here. -e.g. radius-full -> full */ -const invariantTokenAlias: { [key: string]: string } = { - 'radius-full': 'full', -}; - -export const normalizeFirstNamePart = (part: string, tokenType: TokenType): string => { - if (tokenType === TokenType.color) { - return `$${part}${COLOR_SUFFIX}`; - } - - return `$${toPlural(part.toLowerCase())}`; -}; - -export const handleInvariantTokenAlias = (tokenName: string): string => { - if (invariantTokenAlias[tokenName]) { - return invariantTokenAlias[tokenName]; - } - - return tokenName; -}; - -export const getTokenAlias = (token: Token): string => { - let alias; - const numericPart = token.name.match(/\d+/)?.[0]; - const nonNumericPart = handleInvariantTokenAlias(token.name.toLowerCase()); - - if (token.tokenType !== TokenType.color && numericPart) { - alias = numericPart; - } else { - alias = nonNumericPart; - } - - return alias; -}; - -const handleTypographyTokens = (tokenNameParts: string[], token: Token, cssObjectRef: CssObjectType): void => { - const typographyToken = token as TypographyToken; - const reducedNameParts = tokenNameParts.slice(0, 2); - const name = formatTypographyName(tokenNameParts).toLowerCase(); - const breakpoint = getBreakpoint(tokenNameParts).toLowerCase(); - - let currentObject = cssObjectRef; - reducedNameParts.forEach((part, index) => { - const modifiedPart = index === 0 ? `$${name}` : part; - - if (index === reducedNameParts.length - 1) { - currentObject[breakpoint] = typographyValue(typographyToken.value, name.includes('italic')); - } else { - currentObject[modifiedPart] = currentObject[modifiedPart] || {}; - currentObject = currentObject[modifiedPart] as CssObjectType; - } - }); -}; - -const handleNonTypographyTokens = ( - tokenNameParts: string[], - token: Token, - tokenGroups: Array, - hasParentPrefix: boolean, - cssObjectRef: CssObjectType, -): void => { - let currentObject = cssObjectRef; - - tokenNameParts.forEach((part, index) => { - const modifiedPart = index === 0 ? normalizeFirstNamePart(part, token.tokenType) : part; - - if (index === tokenNameParts.length - 1) { - const tokenValue = `$${tokenVariableName(token, tokenGroups, hasParentPrefix)}`; - const tokenAlias = getTokenAlias(token); - currentObject[tokenAlias] = tokenValue; - } else { - currentObject[modifiedPart] = currentObject[modifiedPart] || {}; - currentObject = currentObject[modifiedPart] as CssObjectType; - } - }); -}; - -export const createObjectStructureFromTokenNameParts = ( - token: Token, - tokenGroups: Array, - hasParentPrefix: boolean, - cssObjectRef: CssObjectType, -): CssObjectType => { - const { tokenType } = token; - const tokenNameParts = token.origin?.name?.split('/'); - - if (!tokenNameParts) { - return cssObjectRef; - } - - if (tokenType === TokenType.typography) { - handleTypographyTokens(tokenNameParts, token, cssObjectRef); - } else { - handleNonTypographyTokens(tokenNameParts, token, tokenGroups, hasParentPrefix, cssObjectRef); - } - - return cssObjectRef; -}; - -export const parseGroupName = (colorVariable: string) => colorVariable.replace(COLOR_SUFFIX, '').replace('$', ''); - -export const colorGroupsReducer = (accumulatedColorKeys: { [key: string]: string }, currentColorKey: string) => ({ - ...accumulatedColorKeys, - [parseGroupName(currentColorKey)]: currentColorKey, -}); - -export const typographyGroupReducer = ( - accumulatedTypographyKeys: { [key: string]: string }, - currentTypographyKey: string, -) => ({ - ...accumulatedTypographyKeys, - [parseGroupName(currentTypographyKey)]: currentTypographyKey, -}); - -export const createGlobalColorsObject = (colorKeys: Array) => colorKeys.reduce(colorGroupsReducer, {}); - -export const createGlobalTypographyObject = (typographyKeys: Array) => { - return typographyKeys.reduce(typographyGroupReducer, {}); -}; - -// TODO: refactor this function to not use cssObject reference -export const generateCssObjectFromTokens = ( - tokens: Array, - mappedTokens: Map, - tokenGroups: Array, - hasParentPrefix: boolean, -): CssObjectType => { - const cssObject = tokens.reduce((cssObjectAccumulator, token) => { - const currentObject = createObjectStructureFromTokenNameParts( - token, - tokenGroups, - hasParentPrefix, - cssObjectAccumulator, - ); - - return { ...cssObjectAccumulator, ...currentObject }; - }, {}); - - // check if there are any color keys in the object - const colorKeys = Object.keys(cssObject).filter((key) => key.endsWith(COLOR_SUFFIX)); - - /* if there are color keys, create a separate global object for - all colors keys and place it at the end of the file */ - if (colorKeys.length > 0) { - const colorsObject = createGlobalColorsObject(colorKeys); - - return { ...cssObject, $colors: colorsObject }; - } - - const typographyKeys = Object.keys(cssObject).filter((key) => key.includes('heading') || key.includes('body')); - - if (typographyKeys.length > 0) { - const typographyObject = createGlobalTypographyObject(typographyKeys); - - // Typography has multiple groups, which creates multiple '$styles' objects. - // After merging the '$styles' objects together, they remain in the middle of the tokens, - // so we need to move them to the end of the file using the 'moveToTheEnd' flag, - // which will be removed in the final output. - return { ...cssObject, $styles: { ...typographyObject, moveToTheEnd: 'true' } }; - } - - return cssObject; -}; diff --git a/exporters/variables-scss/src/generators/fileGenerator.ts b/exporters/variables-scss/src/generators/fileGenerator.ts index cbe9071f4a..a36ab892bc 100644 --- a/exporters/variables-scss/src/generators/fileGenerator.ts +++ b/exporters/variables-scss/src/generators/fileGenerator.ts @@ -1,15 +1,24 @@ import { TokenGroup, Token, Supernova, TokenTheme } from '@supernovaio/sdk-exporters'; import { generateFileContent } from './contentGenerator'; import { FileData, nonThemedFilesData, themedFilesData } from '../config/fileConfig'; +import { toCamelCase } from '../helpers/stringHelper'; +import { indentAndFormat } from '../formatters/stylesFormatter'; +import { COLOR_KEY } from './stylesObjectGenerator'; + +export const THEMES_DIRECTORY = 'themes'; +export const GLOBAL_DIRECTORY = 'global'; +export const SCSS_DIRECTORY = 'scss'; +export const JS_DIRECTORY = 'js'; export const generateFiles = ( tokens: Array, mappedTokens: Map, tokenGroups: Array, filesData: FileData[], + hasJsOutput: boolean = false, ) => { return filesData.map((fileData) => { - const fileContent = generateFileContent(tokens, mappedTokens, tokenGroups, fileData); + const fileContent = generateFileContent(tokens, mappedTokens, tokenGroups, fileData, hasJsOutput); return { fileName: fileData.fileName, @@ -18,15 +27,49 @@ export const generateFiles = ( }); }; -export const generateIndexFile = (files: { fileName: string; content: string }[]) => { +export const generateBarrelFile = (files: { fileName: string; content: string }[], hasJsOutput: boolean = false) => { return `${files .map((file) => { - const baseName = file.fileName.replace(/^_/, '').replace(/\.scss$/, ''); + const fileExtension = hasJsOutput ? 'ts' : 'scss'; + const baseName = file.fileName.replace(/^_/, '').replace(new RegExp(`\\.${fileExtension}$`), ''); - return `@forward '${baseName}';`; + return hasJsOutput ? `export * from './${baseName}';` : `@forward '${baseName}';`; }) .join('\n')}\n`; }; +export const jsImportStatement = (name: string) => { + return `import * as ${toCamelCase(name)} from './${THEMES_DIRECTORY}/${name}';`; +}; + +export const scssImportStatement = (name: string) => `@use '${THEMES_DIRECTORY}/${name}';`; + +export const prepareImportStatementCallback = (hasJsOutput: boolean) => { + return (theme: TokenTheme) => (hasJsOutput ? jsImportStatement(theme.name) : scssImportStatement(theme.name)); +}; + +export const generateRootThemesFileImports = (themes: TokenTheme[], hasJsOutput: boolean): string => { + return themes.map(prepareImportStatementCallback(hasJsOutput)).join('\n'); +}; + +export const generateRootThemesFileContent = (themes: TokenTheme[], hasJsOutput: boolean): string => { + return themes + .map((theme) => { + return hasJsOutput + ? `${toCamelCase(theme.name)}: {\n${COLOR_KEY}: ${toCamelCase(theme.name)}.${COLOR_KEY}\n},` + : `${theme.name}: (\n${COLOR_KEY}: ${theme.name}.$${COLOR_KEY},\n),`; + }) + .join('\n'); +}; + +export const generateThemesRootFile = (themes: TokenTheme[], hasJsOutput: boolean = false): string => { + const imports = generateRootThemesFileImports(themes, hasJsOutput); + const themesContent = generateRootThemesFileContent(themes, hasJsOutput); + const defaultThemeNote = '// The first theme is the default theme, as the left column in the Figma table.'; + const stylesObjectWrapper = hasJsOutput ? 'export const themes = {\n' : '$themes: (\n'; + const content = `${imports}\n\n${defaultThemeNote}\n${stylesObjectWrapper}${themesContent}\n${hasJsOutput ? '};\n' : ');\n'}`; + + return indentAndFormat(content, hasJsOutput); +}; export const generateOutputFilesByThemes = async ( tokens: Token[], @@ -39,11 +82,41 @@ export const generateOutputFilesByThemes = async ( // Generate global files for non-themed tokens const globalFiles = generateFiles(tokens, mappedTokens, tokenGroups, nonThemedFilesData); - const globalIndexFile = generateIndexFile(globalFiles); + const globalJsFiles = generateFiles(tokens, mappedTokens, tokenGroups, nonThemedFilesData, true); + const globalBarrelFile = generateBarrelFile(globalFiles); + const globalJsBarrelFile = generateBarrelFile(globalJsFiles, true); outputFiles.push( - ...globalFiles.map((file) => ({ path: './globals/', fileName: file.fileName, content: file.content })), + ...globalFiles.map((file) => ({ + path: `./${SCSS_DIRECTORY}/${GLOBAL_DIRECTORY}`, + fileName: `_${file.fileName}.scss`, + content: file.content, + })), + ...globalJsFiles.map((file) => ({ + path: `./${JS_DIRECTORY}/${GLOBAL_DIRECTORY}/`, + fileName: `${file.fileName}.ts`, + content: file.content, + })), ); - outputFiles.push({ path: './globals/', fileName: 'index.scss', content: globalIndexFile }); + outputFiles.push({ + path: `./${SCSS_DIRECTORY}/${GLOBAL_DIRECTORY}/`, + fileName: 'index.scss', + content: globalBarrelFile, + }); + outputFiles.push({ + path: `./${JS_DIRECTORY}/${GLOBAL_DIRECTORY}/`, + fileName: 'index.ts', + content: globalJsBarrelFile, + }); + outputFiles.push({ + path: `./${SCSS_DIRECTORY}/`, + fileName: '@global.scss', + content: `@forward '${GLOBAL_DIRECTORY}';\n`, + }); + outputFiles.push({ + path: `./${JS_DIRECTORY}/`, + fileName: '@global.ts', + content: `export * from './${GLOBAL_DIRECTORY}';\n`, + }); // Compute themed tokens for all themes in parallel const allThemes = await Promise.all( @@ -57,16 +130,38 @@ export const generateOutputFilesByThemes = async ( // Generate files for each theme for (const { themedTokens, theme } of allThemes) { const themeFiles = generateFiles(themedTokens, mappedTokens, tokenGroups, themedFilesData); - const themeIndexFile = generateIndexFile(themeFiles); + const themeTsFiles = generateFiles(themedTokens, mappedTokens, tokenGroups, themedFilesData, true); + const themeBarrelFile = generateBarrelFile(themeFiles); + const themeTsBarrelFile = generateBarrelFile(themeTsFiles, true); outputFiles.push( ...themeFiles.map((file) => ({ - path: `./themes/${theme.name}/`, - fileName: file.fileName, + path: `./${SCSS_DIRECTORY}/${THEMES_DIRECTORY}/${theme.name}/`, + fileName: `_${file.fileName}.scss`, + content: file.content, + })), + ...themeTsFiles.map((file) => ({ + path: `./${JS_DIRECTORY}/${THEMES_DIRECTORY}/${theme.name}/`, + fileName: `${file.fileName}.ts`, content: file.content, })), ); - outputFiles.push({ path: `./themes/${theme.name}/`, fileName: 'index.scss', content: themeIndexFile }); + outputFiles.push({ + path: `./${SCSS_DIRECTORY}/${THEMES_DIRECTORY}/${theme.name}/`, + fileName: 'index.scss', + content: themeBarrelFile, + }); + outputFiles.push({ + path: `./${JS_DIRECTORY}/${THEMES_DIRECTORY}/${theme.name}/`, + fileName: 'index.ts', + content: themeTsBarrelFile, + }); } + // Generate root themes file + const rootThemesFileContent = generateThemesRootFile(themes); + const rootTsThemesFileContent = generateThemesRootFile(themes, true); + outputFiles.push({ path: `./${SCSS_DIRECTORY}/`, fileName: '@themes.scss', content: rootThemesFileContent }); + outputFiles.push({ path: `./${JS_DIRECTORY}/`, fileName: '@themes.ts', content: rootTsThemesFileContent }); + return outputFiles; }; diff --git a/exporters/variables-scss/src/generators/cssGenerator.ts b/exporters/variables-scss/src/generators/stylesGenerator.ts similarity index 83% rename from exporters/variables-scss/src/generators/cssGenerator.ts rename to exporters/variables-scss/src/generators/stylesGenerator.ts index 293a89cd82..34d1849925 100644 --- a/exporters/variables-scss/src/generators/cssGenerator.ts +++ b/exporters/variables-scss/src/generators/stylesGenerator.ts @@ -12,18 +12,19 @@ import { ColorFormat, CSSHelper } from '@supernovaio/export-helpers'; import { addAngleVarToGradient, addEmptyLineBetweenTokenGroups, - formatTokenName, + formatTokenStyleByOutput, sortTokens, tokenVariableName, } from '../helpers/tokenHelper'; import { handleSpecialCase } from '../helpers/specialCaseHelper'; import { normalizeColor } from '../helpers/colorHelper'; -export const tokenToCSSByType = ( +export const tokenToStyleByType = ( token: Token, mappedTokens: Map, tokenGroups: Array, withParent: boolean, + hasJsOutput: boolean, ): string | null => { const hasTokenType = (type: TokenType) => { const { tokenType } = token; @@ -38,7 +39,7 @@ export const tokenToCSSByType = ( value = handleSpecialCase(name, value); const unit = CSSHelper.unitToCSS(dimensionToken.value?.unit); - return formatTokenName(name, value, unit); + return formatTokenStyleByOutput(name, value, hasJsOutput, unit); } if (hasTokenType(TokenType.string)) { @@ -47,7 +48,7 @@ export const tokenToCSSByType = ( let value = stringToken.value.text; value = handleSpecialCase(name, value); - return formatTokenName(name, value); + return formatTokenStyleByOutput(name, value, hasJsOutput); } if (hasTokenType(TokenType.color)) { @@ -62,7 +63,7 @@ export const tokenToCSSByType = ( value = normalizeColor(value); value = handleSpecialCase(name, value); - return formatTokenName(name, value); + return formatTokenStyleByOutput(name, value, hasJsOutput); } if (hasTokenType(TokenType.shadow)) { @@ -76,7 +77,7 @@ export const tokenToCSSByType = ( tokenToVariableRef: () => '', }); - return formatTokenName(name, color).replace(/0px/g, '0'); + return formatTokenStyleByOutput(name, color, hasJsOutput).replace(/0px/g, '0'); } if (hasTokenType(TokenType.gradient)) { @@ -91,24 +92,25 @@ export const tokenToCSSByType = ( }); gradient = addAngleVarToGradient(gradient); - return formatTokenName(name, gradient); + return formatTokenStyleByOutput(name, gradient, hasJsOutput); } return null; }; -export const generateCssFromTokens = ( +export const generateStylesFromTokens = ( tokens: Token[], mappedTokens: Map, tokenGroups: Array, group: string, hasParentPrefix: boolean, sortByNumValue: boolean, + hasJsOutput: boolean = false, ): string => { const sortedTokens = sortTokens(tokens, tokenGroups, hasParentPrefix, group, sortByNumValue); const cssTokens = sortedTokens.map((token) => ({ - css: tokenToCSSByType(token, mappedTokens, tokenGroups, hasParentPrefix), + css: tokenToStyleByType(token, mappedTokens, tokenGroups, hasParentPrefix, hasJsOutput), parentGroupId: token.parentGroupId, })); diff --git a/exporters/variables-scss/src/generators/stylesObjectGenerator.ts b/exporters/variables-scss/src/generators/stylesObjectGenerator.ts new file mode 100644 index 0000000000..bdbec0ed42 --- /dev/null +++ b/exporters/variables-scss/src/generators/stylesObjectGenerator.ts @@ -0,0 +1,168 @@ +import { Token, TokenGroup, TokenType, TypographyToken } from '@supernovaio/sdk-exporters'; +import { formatTypographyName, getBreakpoint, getTokenAlias, normalizeFirstNamePart } from '../helpers/objectHelper'; +import { tokenVariableName, typographyValue } from '../helpers/tokenHelper'; +import { toCamelCase } from '../helpers/stringHelper'; + +export const COLOR_SCSS_SUFFIX = '-colors'; +export const COLOR_JS_SUFFIX = 'Colors'; + +export const COLOR_KEY = 'colors'; +export const TYPOGRAPHY_KEY = 'styles'; + +export type StylesObjectType = { [key: string]: (string | object) & { moveToTheEnd?: string } }; + +export const handleTypographyTokens = ( + tokenNameParts: string[], + token: Token, + stylesObjectRef: StylesObjectType, + hasJsOutput: boolean, +): void => { + const typographyToken = token as TypographyToken; + const reducedNameParts = tokenNameParts.slice(0, 2); + const name = formatTypographyName(tokenNameParts).toLowerCase(); + const breakpoint = getBreakpoint(tokenNameParts).toLowerCase(); + + let currentObject = stylesObjectRef; + reducedNameParts.forEach((part, index) => { + const tokenName = hasJsOutput ? toCamelCase(name) : `$${name}`; + const modifiedPart = index === 0 ? tokenName : part; + + if (index === reducedNameParts.length - 1) { + currentObject[breakpoint] = typographyValue(typographyToken.value, name.includes('italic'), hasJsOutput); + } else { + currentObject[modifiedPart] = currentObject[modifiedPart] || {}; + currentObject = currentObject[modifiedPart] as StylesObjectType; + } + }); +}; + +export const handleNonTypographyTokens = ( + tokenNameParts: string[], + token: Token, + tokenGroups: Array, + hasParentPrefix: boolean, + stylesObjectRef: StylesObjectType, + hasJsOutput = false, +): void => { + let currentObject = stylesObjectRef; + + tokenNameParts.forEach((part, index) => { + const modifiedPart = index === 0 ? normalizeFirstNamePart(part, token.tokenType, hasJsOutput) : part; + + if (index === tokenNameParts.length - 1) { + const tokenValue = hasJsOutput + ? `${toCamelCase(tokenVariableName(token, tokenGroups, hasParentPrefix))}` + : `$${tokenVariableName(token, tokenGroups, hasParentPrefix)}`; + const tokenAlias = getTokenAlias(token, hasJsOutput); + currentObject[tokenAlias] = tokenValue; + } else { + currentObject[hasJsOutput ? toCamelCase(modifiedPart) : modifiedPart] = currentObject[modifiedPart] || {}; + currentObject = currentObject[hasJsOutput ? toCamelCase(modifiedPart) : modifiedPart] as StylesObjectType; + } + }); +}; + +export const createStylesObjectStructureFromTokenNameParts = ( + token: Token, + tokenGroups: Array, + hasParentPrefix: boolean, + stylesObjectRef: StylesObjectType, + hasJsOutput: boolean, +): StylesObjectType => { + const { tokenType } = token; + const tokenNameParts = token.origin?.name?.split('/'); + + if (!tokenNameParts) { + return stylesObjectRef; + } + + if (tokenType === TokenType.typography) { + handleTypographyTokens(tokenNameParts, token, stylesObjectRef, hasJsOutput); + } else { + handleNonTypographyTokens(tokenNameParts, token, tokenGroups, hasParentPrefix, stylesObjectRef, hasJsOutput); + } + + return stylesObjectRef; +}; + +export const parseGroupName = (colorVariable: string, hasJsOutput: boolean) => { + const suffix = hasJsOutput ? COLOR_JS_SUFFIX : COLOR_SCSS_SUFFIX; + + return colorVariable.replace(suffix, '').replace('$', ''); +}; + +export const colorGroupsReducer = (accumulatedColorKeys: { [key: string]: string }, currentColorKey: string) => ({ + ...accumulatedColorKeys, + [parseGroupName(currentColorKey, false)]: currentColorKey, +}); + +export const typographyGroupReducer = ( + accumulatedTypographyKeys: { [key: string]: string }, + currentTypographyKey: string, +) => ({ + ...accumulatedTypographyKeys, + [parseGroupName(currentTypographyKey, false)]: currentTypographyKey, +}); + +export const createGlobalColorsObject = (colorKeys: Array, hasJsOutput: boolean) => { + return colorKeys.reduce((accumulatedColorKeys: { [key: string]: string }, currentColorKey: string) => { + return { + ...accumulatedColorKeys, + [parseGroupName(currentColorKey, hasJsOutput)]: currentColorKey, + }; + }, {}); +}; + +export const createGlobalTypographyObject = (typographyKeys: Array) => { + return typographyKeys.reduce(typographyGroupReducer, {}); +}; + +// TODO: refactor this function to not use cssObject reference +export const generateStylesObjectFromTokens = ( + tokens: Array, + mappedTokens: Map, + tokenGroups: Array, + hasParentPrefix: boolean, + hasJsOutput: boolean, +): StylesObjectType => { + const stylesObject = tokens.reduce((stylesObjectAccumulator, token) => { + const currentObject = createStylesObjectStructureFromTokenNameParts( + token, + tokenGroups, + hasParentPrefix, + stylesObjectAccumulator, + hasJsOutput, + ); + + return { ...stylesObjectAccumulator, ...currentObject }; + }, {}); + + // check if there are any color keys in the object + const colorKeys = Object.keys(stylesObject).filter((key) => { + return key.endsWith(hasJsOutput ? COLOR_JS_SUFFIX : COLOR_SCSS_SUFFIX); + }); + + /* if there are color keys, create a separate global object for + all colors keys and place it at the end of the file */ + if (colorKeys.length > 0) { + const colorsObject = createGlobalColorsObject(colorKeys, hasJsOutput); + const key = hasJsOutput ? COLOR_KEY : `$${COLOR_KEY}`; + + return { ...stylesObject, [key]: colorsObject }; + } + + const typographyKeys = Object.keys(stylesObject).filter((key) => key.includes('heading') || key.includes('body')); + + if (typographyKeys.length > 0) { + const typographyObject = createGlobalTypographyObject(typographyKeys); + const key = hasJsOutput ? TYPOGRAPHY_KEY : `$${TYPOGRAPHY_KEY}`; + + // Typography has multiple groups, which creates multiple '$styles' objects. + // After merging the '$styles' objects together, they remain in the middle of the tokens, + // so we need to move them to the end of the file using the 'moveToTheEnd' flag, + // which will be removed in the final output. + return { ...stylesObject, [key]: { ...typographyObject, moveToTheEnd: 'true' } }; + } + + return stylesObject; +}; diff --git a/exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts b/exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts deleted file mode 100644 index 5e7e0f62f5..0000000000 --- a/exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts +++ /dev/null @@ -1,114 +0,0 @@ -import { convertToScss, deepMergeObjects } from '../cssObjectHelper'; - -const object1 = { - $grids: { - spacing: { - desktop: '$grid-spacing-desktop', - mobile: '$grid-spacing-mobile', - tablet: '$grid-spacing-tablet', - }, - }, -}; - -const object2 = { - $grids: { columns: '$grid-columns' }, -}; - -const typographyObject1 = { - $heading1: { - fontFamily: '$font-family', - fontSize: '$font-size', - }, - $styles: { - heading1: '$heading1', - moveToTheEnd: 'true', - }, -}; - -const typographyObject2 = { - $body1: { - fontFamily: '$font-family', - fontSize: '$font-size', - }, - $styles: { - body1: '$body1', - }, -}; - -const mergedObject = { - $grids: { - spacing: { - desktop: '$grid-spacing-desktop', - mobile: '$grid-spacing-mobile', - tablet: '$grid-spacing-tablet', - }, - columns: '$grid-columns', - }, -}; - -const mergedTypographyObject = { - $heading1: { - fontFamily: '$font-family', - fontSize: '$font-size', - }, - $body1: { - fontFamily: '$font-family', - fontSize: '$font-size', - }, - $styles: { - heading1: '$heading1', - body1: '$body1', - }, -}; - -const scssObject = `$grids: ( -spacing: ( -desktop: $grid-spacing-desktop, -mobile: $grid-spacing-mobile, -tablet: $grid-spacing-tablet, -), -columns: $grid-columns, -),`; - -const scssTypographyObject = `$heading1: ( -fontFamily: $font-family, -fontSize: $font-size, -), -$body1: ( -fontFamily: $font-family, -fontSize: $font-size, -), -$styles: ( -heading1: $heading1, -body1: $body1, -),`; - -describe('cssObjectHelper', () => { - describe('mergeObjects', () => { - it('should merge objects', () => { - const result = deepMergeObjects(object1, object2); - - expect(result).toStrictEqual(mergedObject); - }); - - it('should merge typography objects', () => { - const result = deepMergeObjects(typographyObject1, typographyObject2); - - expect(result).toStrictEqual(mergedTypographyObject); - }); - }); - - describe('convertToScss', () => { - it('should convert object to SCSS', () => { - const result = convertToScss(mergedObject); - - expect(result).toBe(scssObject); - }); - - it('should convert typography object to SCSS', () => { - const result = convertToScss(mergedTypographyObject); - - expect(result).toBe(scssTypographyObject); - }); - }); -}); diff --git a/exporters/variables-scss/src/helpers/__tests__/objectHelper.test.ts b/exporters/variables-scss/src/helpers/__tests__/objectHelper.test.ts new file mode 100644 index 0000000000..2c2a17808c --- /dev/null +++ b/exporters/variables-scss/src/helpers/__tests__/objectHelper.test.ts @@ -0,0 +1,233 @@ +import { Token, TokenType } from '@supernovaio/sdk-exporters'; +import { + convertToScss, + convertToJs, + deepMergeObjects, + formatTypographyName, + getBreakpoint, + getTokenAlias, + normalizeFirstNamePart, +} from '../objectHelper'; +import { exampleTypographyTokens } from '../../../tests/fixtures/exampleTypographyTokens'; + +const mergedObject = { + $grids: { + spacing: { + desktop: '$grid-spacing-desktop', + mobile: '$grid-spacing-mobile', + tablet: '$grid-spacing-tablet', + }, + columns: '$grid-columns', + }, +}; + +const mergedTypographyObject = { + $heading1: { + 'font-family': '$font-family-example', + 'font-size': '$font-size-example', + }, + $body1: { + 'font-family': '$font-family-example', + 'font-size': '$font-size-example', + }, + $styles: { + 'heading-1': '$heading-1-example', + 'body-1': '$body-1-example', + }, +}; + +const mergedJsObject = { + grids: { + spacing: { + desktop: 'gridSpacingDesktop', + mobile: 'gridSpacingMobile', + tablet: 'gridSpacingTablet', + }, + columns: 'gridColumns', + focus: 'focus', + }, +}; + +const mergedTypographyJsObject = { + heading: { + fontFamily: 'fontFamilyExample', + fontSize: 'fontSizeExample', + }, + body1: { + fontFamily: 'fontFamilyExample', + fontSize: 'fontSizeExample', + }, + styles: { + heading1: 'heading1Example', + body1: 'body1Example', + }, + focus: 'focus', +}; + +describe('objectHelper', () => { + describe('deepMergeObjects', () => { + const object1 = { + $grids: { + spacing: { + desktop: '$grid-spacing-desktop', + mobile: '$grid-spacing-mobile', + tablet: '$grid-spacing-tablet', + }, + }, + }; + + const object2 = { + $grids: { columns: '$grid-columns' }, + }; + + it('should merge objects', () => { + const result = deepMergeObjects(object1, object2); + + expect(result).toStrictEqual(mergedObject); + }); + + it('should merge typography objects', () => { + const typographyObject1 = { + $heading1: { + 'font-family': '$font-family-example', + 'font-size': '$font-size-example', + }, + $styles: { + 'heading-1': '$heading-1-example', + moveToTheEnd: 'true', + }, + }; + + const typographyObject2 = { + $body1: { + 'font-family': '$font-family-example', + 'font-size': '$font-size-example', + }, + $styles: { + 'body-1': '$body-1-example', + }, + }; + + const result = deepMergeObjects(typographyObject1, typographyObject2); + + expect(result).toStrictEqual(mergedTypographyObject); + }); + }); + + describe('convertToScss', () => { + it('should convert object to SCSS', () => { + const expectedScssObject = `$grids: ( +spacing: ( +desktop: $grid-spacing-desktop, +mobile: $grid-spacing-mobile, +tablet: $grid-spacing-tablet, +), +columns: $grid-columns, +),`; + + const result = convertToScss(mergedObject); + + expect(result).toBe(expectedScssObject); + }); + + it('should convert typography object to SCSS', () => { + const expectedScssTypographyObject = `$heading1: ( +font-family: $font-family-example, +font-size: $font-size-example, +), +$body1: ( +font-family: $font-family-example, +font-size: $font-size-example, +), +$styles: ( +heading-1: $heading-1-example, +body-1: $body-1-example, +),`; + + const result = convertToScss(mergedTypographyObject); + + expect(result).toBe(expectedScssTypographyObject); + }); + }); + + describe('convertToJs', () => { + it('should convert object to JS', () => { + const expectedJsObject = `grids: { +spacing: { +desktop: gridSpacingDesktop, +mobile: gridSpacingMobile, +tablet: gridSpacingTablet, +}, +columns: gridColumns, +focus, +},`; + const result = convertToJs(mergedJsObject); + + expect(result).toBe(expectedJsObject); + }); + + it('should convert typography object to JS', () => { + const expectedJsTypographyObject = `heading: { +fontFamily: fontFamilyExample, +fontSize: fontSizeExample, +}, +body1: { +fontFamily: fontFamilyExample, +fontSize: fontSizeExample, +}, +styles: { +heading1: heading1Example, +body1: body1Example, +}, +focus,`; + + const result = convertToJs(mergedTypographyJsObject); + + expect(result).toBe(expectedJsTypographyObject); + }); + }); + + describe('getTokenAlias', () => { + it('should return token alias for non-numeric', () => { + const token = exampleTypographyTokens.get('typographyRef2') as Token; + expect(getTokenAlias(token, false)).toBe('bold-underline'); + }); + + it('should return token alias for non-numeric with js output', () => { + const token = exampleTypographyTokens.get('typographyRef2') as Token; + expect(getTokenAlias(token, true)).toBe('boldUnderline'); + }); + }); + + describe('getBreakpoint', () => { + it('should return correct breakpoint if tokenNameParts has 4 items', () => { + expect(getBreakpoint(['heading', 'desktop', 'xLarge', 'bold'])).toBe('desktop'); + }); + + it('should return correct breakpoint if tokenNameParts has less than 4 items', () => { + expect(getBreakpoint(['Heading', 'Desktop', 'XLarge'])).toBe('mobile'); + }); + }); + + describe('normalizeFirstNamePart', () => { + it('should return correct first part name for token type dimension', () => { + expect(normalizeFirstNamePart('grid', TokenType.dimension, false)).toBe('$grids'); + }); + + it('should return correct first part name for token type color', () => { + expect(normalizeFirstNamePart('action', TokenType.color, false)).toBe('$action-colors'); + }); + }); + + describe('formatTypographyName', () => { + it('should return correct typography name', () => { + const tokenNameParts = ['heading', 'desktop', 'xLarge', 'bold']; + expect(formatTypographyName(tokenNameParts)).toBe('heading-xLarge-bold'); + }); + + it('should return correct typography name if tokenNameParts has less than 4 items', () => { + const tokenNameParts = ['heading', 'desktop', 'xLarge']; + expect(formatTypographyName(tokenNameParts)).toBe('heading-desktop-xLarge'); + }); + }); +}); diff --git a/exporters/variables-scss/src/helpers/__tests__/specialCaseHelper.test.ts b/exporters/variables-scss/src/helpers/__tests__/specialCaseHelper.test.ts index 333d908225..a6e3556366 100644 --- a/exporters/variables-scss/src/helpers/__tests__/specialCaseHelper.test.ts +++ b/exporters/variables-scss/src/helpers/__tests__/specialCaseHelper.test.ts @@ -1,4 +1,10 @@ +import { Token } from '@supernovaio/sdk-exporters'; import { handleSpecialCase } from '../specialCaseHelper'; +import { + exampleInvariantTokens, + exampleDimensionAndStringTokens, +} from '../../../tests/fixtures/exampleDimensionAndStringTokens'; +import { getTokenAlias } from '../objectHelper'; describe('specialCaseHelper', () => { it('should handle special case', () => { @@ -13,3 +19,15 @@ describe('specialCaseHelper', () => { expect(result).toBe(32); }); }); + +describe('handleInvariantTokens', () => { + it('should return token alias for invariant case', () => { + const token = exampleInvariantTokens.get('radiiRef') as Token; + expect(getTokenAlias(token, false)).toBe('full'); + }); + + it('should return token alias for non-invariant case', () => { + const token = exampleDimensionAndStringTokens.get('dimensionRef') as Token; + expect(getTokenAlias(token, false)).toBe('desktop'); + }); +}); diff --git a/exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts b/exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts index 711d0bb91d..cf50acef2b 100644 --- a/exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts +++ b/exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts @@ -2,17 +2,14 @@ import { Token, TokenGroup, TypographyToken } from '@supernovaio/sdk-exporters'; import { addAngleVarToGradient, addEmptyLineBetweenTokenGroups, - formatTokenName, + formatTokenStyleByOutput, sortTokens, tokenVariableName, typographyValue, } from '../tokenHelper'; -import { - exampleMockedGroups, - exampleMockedTokens, - exampleTypographyMockedTokens, - expectedTypographyValue, -} from '../../../tests/fixtures/mockedExampleTokens'; +import { exampleDimensionAndStringTokens } from '../../../tests/fixtures/exampleDimensionAndStringTokens'; +import { exampleTypographyTokens, expectedTypographyValue } from '../../../tests/fixtures/exampleTypographyTokens'; +import { exampleGroups } from '../../../tests/fixtures/exampleGroups'; const dataProvider = [ { @@ -30,8 +27,8 @@ const dataProvider = [ describe('tokenHelper', () => { describe.each(dataProvider)('tokenVariableName', ({ hasParentPrefix, description, expectedVariableName }) => { it(`should return the expected variable name for exampleToken ${description} parent prefix`, () => { - const mockedToken: Token = exampleMockedTokens.get('dimensionRef') as Token; - const mockedTokenGroups: Array = exampleMockedGroups; + const mockedToken: Token = exampleDimensionAndStringTokens.get('dimensionRef') as Token; + const mockedTokenGroups: Array = exampleGroups; const result = tokenVariableName(mockedToken, mockedTokenGroups, hasParentPrefix); @@ -39,13 +36,13 @@ describe('tokenHelper', () => { }); }); - describe('formatTokenName', () => { + describe('formatTokenStyleByOutput', () => { it('should return the expected formatted token name with unit', () => { const name = 'grid-spacing-desktop'; const value = 32; const unit = 'px'; - const result = formatTokenName(name, value, unit); + const result = formatTokenStyleByOutput(name, value, false, unit); expect(result).toBe('$grid-spacing-desktop: 32px !default;'); }); @@ -54,16 +51,55 @@ describe('tokenHelper', () => { const name = 'grid-columns'; const value = 12; - const result = formatTokenName(name, value); + const result = formatTokenStyleByOutput(name, value, false); expect(result).toBe('$grid-columns: 12 !default;'); }); + + it('should return the expected formatted token name for js output', () => { + const name = 'grid-spacing-desktop'; + const value = 32; + const unit = 'px'; + + const result = formatTokenStyleByOutput(name, value, true, unit); + + expect(result).toBe(`export const gridSpacingDesktop = '32px';`); + }); + + it('should return the expected formatted token name for js output without unit', () => { + const name = 'grid-columns'; + const value = 12; + + const result = formatTokenStyleByOutput(name, value, true); + + expect(result).toBe(`export const gridColumns = 12;`); + }); + + it('should return the expected formatted token for zero values with unit', () => { + const name = 'grid-columns'; + const value = 0; + const unit = 'px'; + + const result = formatTokenStyleByOutput(name, value, false, unit); + + expect(result).toBe('$grid-columns: 0 !default;'); + }); + + it('should return the expected formatted token for zero values with unit for js output', () => { + const name = 'grid-columns'; + const value = 0; + const unit = 'px'; + + const result = formatTokenStyleByOutput(name, value, true, unit); + + expect(result).toBe('export const gridColumns = 0;'); + }); }); describe('sortTokens', () => { it('should sort tokens by variable name', () => { - const tokens = Array.from(exampleMockedTokens.values()); - const tokenGroups = exampleMockedGroups; + const tokens = Array.from(exampleDimensionAndStringTokens.values()); + const tokenGroups = exampleGroups; const hasParentPrefix = true; const group = 'Grid'; const sortByNumValue = false; @@ -73,6 +109,19 @@ describe('tokenHelper', () => { expect(result[0]?.origin?.name).toBe('Grid/Columns'); expect(result[1]?.origin?.name).toBe('Grid/spacing/desktop'); }); + + it('should sort tokens by number value', () => { + const tokens = Array.from(exampleDimensionAndStringTokens.values()); + const tokenGroups = exampleGroups; + const hasParentPrefix = true; + const group = 'Grid'; + const sortByNumValue = true; + + const result = sortTokens(tokens, tokenGroups, hasParentPrefix, group, sortByNumValue); + + expect(result[0]?.origin?.name).toBe('Grid/Columns'); + expect(result[1]?.origin?.name).toBe('Grid/spacing/desktop'); + }); }); describe('addEmptyLineBetweenTokenGroups', () => { @@ -91,20 +140,26 @@ describe('tokenHelper', () => { describe('addAngleVarToGradient', () => { it('should add angle variable to gradient', () => { const inputString = 'linear-gradient(0deg, #000 0%, #fff 100%)'; - const expectedOutput = 'linear-gradient(var(--gradient-angle, 0deg), #000 0%, #fff 100%)'; + const expectedOutput = 'linear-gradient(var(--gradient-angle, 90deg), #000 0%, #fff 100%)'; const result = addAngleVarToGradient(inputString); expect(result).toBe(expectedOutput); }); + + it('should return the input string if no match is found', () => { + const inputString = 'example string'; + + const result = addAngleVarToGradient(inputString); + + expect(result).toBe(inputString); + }); }); describe('typographyValue', () => { it('should return the expected typography value', () => { - const mockedToken: TypographyToken = exampleTypographyMockedTokens.get( - 'typographyHeadingRef1', - ) as TypographyToken; - const tokenValue = typographyValue(mockedToken.value, true); + const mockedToken: TypographyToken = exampleTypographyTokens.get('typographyRef1') as TypographyToken; + const tokenValue = typographyValue(mockedToken.value, true, false); expect(tokenValue).toBe(expectedTypographyValue); }); diff --git a/exporters/variables-scss/src/helpers/cssObjectHelper.ts b/exporters/variables-scss/src/helpers/cssObjectHelper.ts deleted file mode 100644 index 69fd097028..0000000000 --- a/exporters/variables-scss/src/helpers/cssObjectHelper.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { CssObjectType } from '../generators/cssObjectGenerator'; - -export const deepMergeObjects = (obj1: CssObjectType, obj2: CssObjectType): CssObjectType => { - // First, perform the deep merge logic - const mergedObject = Object.entries(obj2).reduce( - (result, [key, value]) => { - if (typeof value === 'object' && value !== null && typeof result[key] === 'object') { - result[key] = deepMergeObjects(result[key] as CssObjectType, value as CssObjectType); - } else { - result[key] = value; - } - - return result; - }, - { ...obj1 }, - ); - - // Now, process the object to move keys with "moveToTheEnd": true to the end - const finalObject: CssObjectType = {}; - const endObject: CssObjectType = {}; - - Object.entries(mergedObject).forEach(([key, value]) => { - if (typeof value === 'object' && value !== null && value.moveToTheEnd === 'true') { - // Move this entry to endObject - delete value.moveToTheEnd; // Exclude "moveToTheEnd" flag - endObject[key] = value; - } else { - // Keep it in the main object - finalObject[key] = value; - } - }); - - // Return finalObject with endObject entries moved to the end - return { ...finalObject, ...endObject }; -}; - -export function convertToScss(obj: CssObjectType): string { - return Object.entries(obj) - .map(([key, value]) => { - if (typeof value === 'object' && value !== null) { - const nestedScss = convertToScss(value as CssObjectType); - - return `${key}: (\n${nestedScss}\n),\n`; - } - - return `${key}: ${value},\n`; - }) - .join('') - .slice(0, -1); -} - -export const formatTypographyName = (tokenNameParts: string[]): string => { - return tokenNameParts.length === 4 - ? tokenNameParts.filter((_, index) => index !== 1).join('-') - : tokenNameParts.join('-'); -}; - -export const getBreakpoint = (tokenNameParts: string[]): string => { - return tokenNameParts.length === 4 ? tokenNameParts[1] : 'mobile'; -}; diff --git a/exporters/variables-scss/src/helpers/objectHelper.ts b/exporters/variables-scss/src/helpers/objectHelper.ts new file mode 100644 index 0000000000..3dd4beaf69 --- /dev/null +++ b/exporters/variables-scss/src/helpers/objectHelper.ts @@ -0,0 +1,109 @@ +import { Token, TokenType } from '@supernovaio/sdk-exporters'; +import { COLOR_SCSS_SUFFIX, StylesObjectType } from '../generators/stylesObjectGenerator'; +import { handleInvariantTokenAlias } from './specialCaseHelper'; +import { toCamelCase, toPlural } from './stringHelper'; + +export const deepMergeObjects = (obj1: StylesObjectType, obj2: StylesObjectType): StylesObjectType => { + // First, perform the deep merge logic + const mergedObject = Object.entries(obj2).reduce( + (result, [key, value]) => { + let mergedValue; + + if (typeof value === 'object' && value !== null && typeof result[key] === 'object') { + mergedValue = deepMergeObjects(result[key] as StylesObjectType, value as StylesObjectType); + } else { + mergedValue = value; + } + + return { ...result, [key]: mergedValue }; + }, + { ...obj1 }, + ); + + // Now, process the object to move keys with "moveToTheEnd": true to the end + const finalObject: StylesObjectType = {}; + const endObject: StylesObjectType = {}; + + Object.entries(mergedObject).forEach(([key, value]) => { + if (typeof value === 'object' && value !== null && value.moveToTheEnd === 'true') { + // Move this entry to endObject + // eslint-disable-next-line no-param-reassign -- false positive + delete value.moveToTheEnd; // Exclude "moveToTheEnd" flag + endObject[key] = value; + } else { + // Keep it in the main object + finalObject[key] = value; + } + }); + + // Return finalObject with endObject entries moved to the end + return { ...finalObject, ...endObject }; +}; + +export function convertToScss(obj: StylesObjectType): string { + return Object.entries(obj) + .map(([key, value]) => { + if (typeof value === 'object' && value !== null) { + const nestedScss = convertToScss(value as StylesObjectType); + + return `${key}: (\n${nestedScss}\n),\n`; + } + + return `${key}: ${value},\n`; + }) + .join('') + .slice(0, -1); +} + +export const convertToJs = (obj: StylesObjectType): string => { + return Object.entries(obj) + .map(([key, value]) => { + if (typeof value === 'object' && value !== null) { + const nestedObject = convertToJs(value as StylesObjectType); + + return `${key}: {\n${nestedObject}\n},\n`; + } + + if (key === value) { + return `${key},\n`; + } + + return `${key}: ${value},\n`; + }) + .join('') + .slice(0, -1); +}; + +export const formatTypographyName = (tokenNameParts: string[]): string => { + return tokenNameParts.length === 4 + ? tokenNameParts.filter((_, index) => index !== 1).join('-') + : tokenNameParts.join('-'); +}; + +export const getBreakpoint = (tokenNameParts: string[]): string => { + return tokenNameParts.length === 4 ? tokenNameParts[1] : 'mobile'; +}; + +export const getTokenAlias = (token: Token, hasJsOutput: boolean): string => { + let alias; + const numericPart = token.name.match(/\d+/)?.[0]; + const nonNumericPart = handleInvariantTokenAlias(token.name.toLowerCase()); + + if (token.tokenType !== TokenType.color && numericPart) { + alias = numericPart; + } else { + alias = hasJsOutput ? toCamelCase(nonNumericPart) : nonNumericPart; + } + + return alias; +}; + +export const normalizeFirstNamePart = (part: string, tokenType: TokenType, hasJsOutput: boolean): string => { + if (tokenType === TokenType.color) { + const partNameWithColorSuffix = `${part.toLowerCase()}${COLOR_SCSS_SUFFIX}`; + + return hasJsOutput ? toCamelCase(partNameWithColorSuffix) : `$${partNameWithColorSuffix}`; + } + + return hasJsOutput ? toPlural(part.toLowerCase()) : `$${toPlural(part.toLowerCase())}`; +}; diff --git a/exporters/variables-scss/src/helpers/specialCaseHelper.ts b/exporters/variables-scss/src/helpers/specialCaseHelper.ts index dd229061d6..5f7217f6f4 100644 --- a/exporters/variables-scss/src/helpers/specialCaseHelper.ts +++ b/exporters/variables-scss/src/helpers/specialCaseHelper.ts @@ -1,4 +1,6 @@ // if you want to add exceptions for specific tokens, add them here +import { invariantTokenAlias } from '../config/invariantTokenAliasConfig'; + const specialCaseMap = new Map([['breakpoint-mobile', 0]]); export const handleSpecialCase = (name: string, value: T): T => { @@ -10,3 +12,16 @@ export const handleSpecialCase = (name: string, value return value; }; + +/* This function handles cases that are outside the logic of aliases for the remaining tokens. +A common condition is that for tokens with a numeric part, the non-numeric part is dropped. +Non-numeric tokens are left in their original form. Deviations from this logic are addressed in +invariantTokenAliasConfig and handle here. +e.g. radius-full -> full */ +export const handleInvariantTokenAlias = (tokenName: string): string => { + if (invariantTokenAlias[tokenName]) { + return invariantTokenAlias[tokenName]; + } + + return tokenName; +}; diff --git a/exporters/variables-scss/src/helpers/stringHelper.ts b/exporters/variables-scss/src/helpers/stringHelper.ts index 275594d927..2887d46c6c 100644 --- a/exporters/variables-scss/src/helpers/stringHelper.ts +++ b/exporters/variables-scss/src/helpers/stringHelper.ts @@ -1,3 +1,5 @@ +import { NamingHelper, StringCase } from '@supernovaio/export-helpers'; + export const toPlural = (name: string): string => { const specialCases: Record = { radius: 'radii', @@ -6,3 +8,5 @@ export const toPlural = (name: string): string => { return specialCases[name] || (name.endsWith('s') ? name : `${name}s`); }; + +export const toCamelCase = (name: string): string => NamingHelper.codeSafeVariableName(name, StringCase.camelCase); diff --git a/exporters/variables-scss/src/helpers/tokenHelper.ts b/exporters/variables-scss/src/helpers/tokenHelper.ts index d0062d7b23..3efa569ac0 100644 --- a/exporters/variables-scss/src/helpers/tokenHelper.ts +++ b/exporters/variables-scss/src/helpers/tokenHelper.ts @@ -1,5 +1,16 @@ -import { Token, TokenGroup, TypographyTokenValue } from '@supernovaio/sdk-exporters'; +import { + ColorToken, + DimensionToken, + GradientToken, + ShadowToken, + StringToken, + Token, + TokenGroup, + TokenType, + TypographyTokenValue, +} from '@supernovaio/sdk-exporters'; import { NamingHelper, StringCase } from '@supernovaio/export-helpers'; +import { toCamelCase } from './stringHelper'; export const tokenVariableName = (token: Token, tokenGroups: Array, hasParentPrefix: boolean): string => { let parent; @@ -12,12 +23,22 @@ export const tokenVariableName = (token: Token, tokenGroups: Array, return NamingHelper.codeSafeVariableNameForToken(token, StringCase.paramCase, parent, ''); }; -export const formatTokenName = (name: string, value: string | number, unit?: string) => { - if (unit) { - return `$${name}: ${value}${unit} !default;`; +export const normalizeZeroValueWithUnit = (value: string | number, unit: string): string | number => { + if (value === 0) { + return 0; } - return `$${name}: ${value} !default;`; + return `${value}${unit}`; +}; + +export const formatTokenStyleByOutput = (name: string, value: string | number, hasJsOutput: boolean, unit?: string) => { + const normalizedValue = unit ? normalizeZeroValueWithUnit(value, unit) : value; + + if (hasJsOutput) { + return `export const ${toCamelCase(name)} = ${typeof normalizedValue === 'number' ? normalizedValue : `'${normalizedValue}'`};`; + } + + return `$${name}: ${normalizedValue} !default;`; }; export const sortTokens = ( @@ -29,11 +50,27 @@ export const sortTokens = ( ) => { const sortedTokens = tokens.sort((a, b) => { if (sortByNumValue) { - const aNumMatch = a.name.match(/\d+$/); - const bNumMatch = b.name.match(/\d+$/); + const value = (token: Token) => { + if (token.tokenType === TokenType.dimension) { + const dimensionToken = token as DimensionToken; + + return dimensionToken.value.measure; + } + + if (token.tokenType === TokenType.string) { + const stringToken = token as StringToken; + + return stringToken.value.text; + } + + return (token as ColorToken | ShadowToken | GradientToken).value; + }; + + const aNumMatch = value(a); + const bNumMatch = value(b); if (aNumMatch && bNumMatch) { - return parseInt(aNumMatch[0], 10) - parseInt(bNumMatch[0], 10); + return parseInt(aNumMatch.toString(), 10) - parseInt(bNumMatch.toString(), 10); } } @@ -86,6 +123,7 @@ export const addAngleVarToGradient = (inputString: string): string => { export const typographyValue = ( { fontFamily, fontSize, fontWeight, lineHeight }: TypographyTokenValue, isItalic: boolean, + hasJsOutput: boolean, ): string => { const baseStyles = [ `font-family: "'${fontFamily.text}', sans-serif"`, @@ -94,8 +132,23 @@ export const typographyValue = ( `font-weight: ${fontWeight.text}`, ]; + const baseJsStyles = [ + `fontFamily: "'${fontFamily.text}', sans-serif"`, + `fontSize: '${fontSize.measure}${fontSize.unit === 'Pixels' ? 'px' : fontSize.unit}'`, + `fontStyle: '${isItalic ? 'italic' : 'normal'}'`, + `fontWeight: ${fontWeight.text}`, + ]; + if (lineHeight && lineHeight.measure) { - baseStyles.push(`line-height: ${lineHeight.measure / 100}`); + hasJsOutput + ? baseJsStyles.push(`lineHeight: ${lineHeight.measure / 100},`) + : baseStyles.push(`line-height: ${lineHeight.measure / 100},`); + } + + if (hasJsOutput) { + return `{ +${baseJsStyles.join(',\n')} +}`; } return `( diff --git a/exporters/variables-scss/tests/fixtures/exampleColorTokens.ts b/exporters/variables-scss/tests/fixtures/exampleColorTokens.ts new file mode 100644 index 0000000000..f0a9297be3 --- /dev/null +++ b/exporters/variables-scss/tests/fixtures/exampleColorTokens.ts @@ -0,0 +1,49 @@ +import { ColorToken, Token, TokenType } from '@supernovaio/sdk-exporters'; + +export const exampleColorsTokens = new Map(); +exampleColorsTokens.set('actionColorRef', { + id: 'actionColorRef', + name: 'active', + tokenType: TokenType.color, + parentGroupId: '4', + origin: { + name: 'action/button/primary/default', + }, + value: { + color: { + r: 202, + g: 32, + b: 38, + referencedTokenId: null, + }, + opacity: { + unit: 'Raw', + measure: 1, + referencedTokenId: null, + }, + referencedTokenId: null, + }, +} as ColorToken); +exampleColorsTokens.set('backgroundColorRef', { + id: 'backgroundColorRef', + name: 'primary', + tokenType: TokenType.color, + parentGroupId: '5', + origin: { + name: 'background/primary', + }, + value: { + color: { + r: 255, + g: 255, + b: 255, + referencedTokenId: null, + }, + opacity: { + unit: 'Raw', + measure: 1, + referencedTokenId: null, + }, + referencedTokenId: null, + }, +} as ColorToken); diff --git a/exporters/variables-scss/tests/fixtures/exampleDimensionAndStringTokens.ts b/exporters/variables-scss/tests/fixtures/exampleDimensionAndStringTokens.ts new file mode 100644 index 0000000000..ab0d32b1cd --- /dev/null +++ b/exporters/variables-scss/tests/fixtures/exampleDimensionAndStringTokens.ts @@ -0,0 +1,58 @@ +import { + DimensionToken, + DimensionTokenValue, + StringToken, + StringTokenValue, + Token, + TokenType, + Unit, +} from '@supernovaio/sdk-exporters'; + +const testDimension: DimensionTokenValue = { + measure: 32, + unit: Unit.pixels, + referencedTokenId: null, +}; + +const testString: StringTokenValue = { + text: '12', + referencedTokenId: null, +}; + +export const exampleDimensionAndStringTokens = new Map(); +exampleDimensionAndStringTokens.set('dimensionRef', { + id: 'dimensionRef', + name: 'desktop', + tokenType: TokenType.dimension, + parentGroupId: '1', + origin: { + name: 'Grid/spacing/desktop', + }, + value: testDimension, +} as DimensionToken); +exampleDimensionAndStringTokens.set('stringRef', { + id: 'stringRef', + name: 'Columns', + tokenType: TokenType.string, + parentGroupId: '2', + origin: { + name: 'Grid/Columns', + }, + value: testString, +} as StringToken); + +export const exampleInvariantTokens = new Map(); +exampleInvariantTokens.set('radiiRef', { + id: 'radiiRef', + name: 'radius-full', + tokenType: TokenType.dimension, + parentGroupId: '1', + origin: { + name: 'Radius/radius-full', + }, + value: { + unit: 'Pixels', + measure: 9999, + referencedTokenId: null, + }, +} as DimensionToken); diff --git a/exporters/variables-scss/tests/fixtures/exampleGradientTokens.ts b/exporters/variables-scss/tests/fixtures/exampleGradientTokens.ts new file mode 100644 index 0000000000..5d6aefc767 --- /dev/null +++ b/exporters/variables-scss/tests/fixtures/exampleGradientTokens.ts @@ -0,0 +1,63 @@ +import { GradientToken, GradientTokenValue, GradientType, Token, TokenType, Unit } from '@supernovaio/sdk-exporters'; + +const gradientValue: GradientTokenValue = { + aspectRatio: 0, + to: { + x: 0.999999947627349, + y: 0.4999999728606128, + }, + from: { + x: 0.2058823534702224, + y: 0.4999999778582067, + }, + type: GradientType.linear, + stops: [ + { + position: 0, + color: { + color: { + r: 255, + g: 255, + b: 255, + referencedTokenId: null, + }, + opacity: { + unit: Unit.raw, + measure: 1, + referencedTokenId: null, + }, + referencedTokenId: null, + }, + }, + { + position: 1, + color: { + color: { + r: 255, + g: 255, + b: 255, + referencedTokenId: null, + }, + opacity: { + unit: Unit.raw, + measure: 0, + referencedTokenId: null, + }, + referencedTokenId: null, + }, + }, + ], + referencedTokenId: null, +}; + +export const exampleGradientTokens = new Map(); +exampleGradientTokens.set('gradientRef', { + id: 'gradientRef', + name: 'basic-overlay', + tokenType: TokenType.gradient, + parentGroupId: '9', + origin: { + name: 'Gradient/basic-overlay', + }, + value: [gradientValue], +} as GradientToken); diff --git a/exporters/variables-scss/tests/fixtures/exampleGroups.ts b/exporters/variables-scss/tests/fixtures/exampleGroups.ts new file mode 100644 index 0000000000..f70113e240 --- /dev/null +++ b/exporters/variables-scss/tests/fixtures/exampleGroups.ts @@ -0,0 +1,215 @@ +import { TokenGroup, TokenType } from '@supernovaio/sdk-exporters'; +import { TokenGroupRemoteModel } from '@supernovaio/sdk-exporters/build/sdk-typescript/src/model/groups/SDKTokenGroup'; + +export const groupFunctions = { + addChild(): void {}, + addChildren(): void {}, + setParentGroupId(): void {}, + setPath(): void {}, + setSortOrder(): void {}, + toMutatedObject(): TokenGroup { + return new TokenGroup({ + id: this.id, + parentId: this.parentGroupId, + brandId: this.brandId, + tokenType: this.tokenType, + designSystemVersionId: this.designSystemVersionId, + isRoot: this.isRoot, + meta: { + name: this.name, + description: this.description, + }, + childrenIds: this.childrenIds, + }); + }, + toWriteObject(): TokenGroupRemoteModel { + return { + id: this.id, + brandId: this.brandId, + designSystemVersionId: this.designSystemVersionId, + isRoot: this.isRoot, + tokenType: this.tokenType, + childrenIds: this.childrenIds, + createdAt: this.createdAt, + updatedAt: this.updatedAt, + meta: { + name: this.name, + description: this.description, + }, + }; + }, +}; + +export const exampleGroups: TokenGroup[] = [ + { + ...groupFunctions, + id: '1', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'spacing', + description: '', + isRoot: false, + tokenType: TokenType.dimension, + childrenIds: ['dimensionRef'], + path: ['Grid'], + tokenIds: ['dimensionRef'], + subgroupIds: [], + parentGroupId: 'parent1', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, + { + ...groupFunctions, + id: '2', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'Grid', + description: '', + isRoot: false, + tokenType: TokenType.string, + childrenIds: ['stringRef'], + path: [], + tokenIds: ['stringRef'], + subgroupIds: [], + parentGroupId: 'parent2', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, + { + ...groupFunctions, + id: '3', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'Typography', + description: '', + isRoot: false, + tokenType: TokenType.typography, + childrenIds: ['stringRef'], + path: [], + tokenIds: ['stringRef'], + subgroupIds: [], + parentGroupId: 'parent3', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, + { + ...groupFunctions, + id: '4', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'primary', + description: '', + isRoot: false, + tokenType: TokenType.color, + childrenIds: ['actionColorRef'], + path: ['action', 'button'], + tokenIds: ['actionColorRef'], + subgroupIds: [], + parentGroupId: 'parent1', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, + { + ...groupFunctions, + id: '5', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'background', + description: '', + isRoot: false, + tokenType: TokenType.color, + childrenIds: ['backgroundColorRef'], + path: [], + tokenIds: ['backgroundColorRef'], + subgroupIds: [], + parentGroupId: 'parent2', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, + { + ...groupFunctions, + id: '6', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'Heading', + description: '', + isRoot: false, + tokenType: TokenType.typography, + childrenIds: ['typographyRef1'], + path: [], + tokenIds: ['typographyRef1'], + subgroupIds: [], + parentGroupId: 'parent1', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, + { + ...groupFunctions, + id: '7', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'Heading', + description: '', + isRoot: false, + tokenType: TokenType.typography, + childrenIds: ['typographyRef2'], + path: [], + tokenIds: ['typographyRef2'], + subgroupIds: [], + parentGroupId: 'parent2', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, + { + ...groupFunctions, + id: '8', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'shadow-100', + description: '', + isRoot: false, + tokenType: TokenType.shadow, + childrenIds: ['shadowRef'], + path: ['shadow'], + tokenIds: ['shadowRef'], + subgroupIds: [], + parentGroupId: 'parent2', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, + { + ...groupFunctions, + id: '9', + idInVersion: 'idInVersionValue', + brandId: 'brandIdValue', + designSystemVersionId: 'designSystemVersionIdValue', + name: 'basic-overlay', + description: '', + isRoot: false, + tokenType: TokenType.gradient, + childrenIds: ['gradientRef'], + path: [], + tokenIds: ['gradientRef'], + subgroupIds: [], + parentGroupId: 'parent2', + sortOrder: -1, + createdAt: null, + updatedAt: null, + }, +]; diff --git a/exporters/variables-scss/tests/fixtures/exampleShadowTokens.ts b/exporters/variables-scss/tests/fixtures/exampleShadowTokens.ts new file mode 100644 index 0000000000..069c268744 --- /dev/null +++ b/exporters/variables-scss/tests/fixtures/exampleShadowTokens.ts @@ -0,0 +1,41 @@ +import { ShadowToken, Token, TokenType } from '@supernovaio/sdk-exporters'; + +export const exampleShadowTokens = new Map(); +exampleShadowTokens.set('shadowRef', { + id: 'shadowRef', + name: 'shadow-100', + tokenType: TokenType.shadow, + parentGroupId: '8', + origin: { + name: 'Shadows/shadow-100', + }, + value: [ + { + color: { + color: { + r: 0, + g: 0, + b: 0, + referencedTokenId: null, + }, + opacity: { + unit: 'Raw', + measure: 1, + referencedTokenId: null, + }, + referencedTokenId: null, + }, + x: 0, + y: 2, + radius: 8, + spread: 0, + opacity: { + unit: 'Raw', + measure: 0.1500000059604645, + referencedTokenId: null, + }, + type: 'Drop', + referencedTokenId: null, + }, + ], +} as ShadowToken); diff --git a/exporters/variables-scss/tests/fixtures/exampleTypographyTokens.ts b/exporters/variables-scss/tests/fixtures/exampleTypographyTokens.ts new file mode 100644 index 0000000000..4fc7f81fe1 --- /dev/null +++ b/exporters/variables-scss/tests/fixtures/exampleTypographyTokens.ts @@ -0,0 +1,41 @@ +import { Token, TokenType, TypographyToken } from '@supernovaio/sdk-exporters'; + +export const exampleTypographyTokens = new Map(); +exampleTypographyTokens.set('typographyRef1', { + id: 'typographyRef1', + name: 'Bold', + tokenType: TokenType.typography, + parentGroupId: '6', + origin: { + name: 'Heading/Desktop/XLarge/Bold', + }, + value: { + fontSize: { unit: 'Pixels', measure: 64 }, + lineHeight: { measure: 120 }, + fontFamily: { text: 'Inter' }, + fontWeight: { text: '700' }, + }, +} as TypographyToken); +exampleTypographyTokens.set('typographyRef2', { + id: 'typographyRef2', + name: 'Bold-Underline', + tokenType: TokenType.typography, + parentGroupId: '7', + origin: { + name: 'Heading/Desktop/XLarge/Bold-Underline', + }, + value: { + fontSize: { unit: 'Pixels', measure: 64 }, + lineHeight: { measure: 120 }, + fontFamily: { text: 'Inter' }, + fontWeight: { text: '700' }, + }, +} as TypographyToken); + +export const expectedTypographyValue = `( +font-family: "'Inter', sans-serif", +font-size: 64px, +font-style: italic, +font-weight: 700, +line-height: 1.2, +)`; diff --git a/exporters/variables-scss/tests/fixtures/mockedExampleTokens.ts b/exporters/variables-scss/tests/fixtures/mockedExampleTokens.ts deleted file mode 100644 index ab24b07878..0000000000 --- a/exporters/variables-scss/tests/fixtures/mockedExampleTokens.ts +++ /dev/null @@ -1,290 +0,0 @@ -import { - ColorToken, - DimensionToken, - DimensionTokenValue, - StringToken, - StringTokenValue, - Token, - TokenGroup, - TokenType, - TypographyToken, - Unit, -} from '@supernovaio/sdk-exporters'; -import { TokenGroupRemoteModel } from '@supernovaio/sdk-exporters/build/sdk-typescript/src/model/groups/SDKTokenGroup'; - -const testDimension: DimensionTokenValue = { - measure: 32, - unit: Unit.pixels, - referencedTokenId: null, -}; - -const testString: StringTokenValue = { - text: '12', - referencedTokenId: null, -}; - -export const exampleMockedTokens = new Map(); -exampleMockedTokens.set('dimensionRef', { - id: 'dimensionRef', - name: 'desktop', - tokenType: TokenType.dimension, - parentGroupId: '1', - origin: { - name: 'Grid/spacing/desktop', - }, - value: testDimension, -} as DimensionToken); -exampleMockedTokens.set('stringRef', { - id: 'stringRef', - name: 'Columns', - tokenType: TokenType.string, - parentGroupId: '2', - origin: { - name: 'Grid/Columns', - }, - value: testString, -} as StringToken); - -export const exampleTypographyMockedTokens = new Map(); -exampleTypographyMockedTokens.set('typographyHeadingRef1', { - id: 'typographyRef', - name: 'Bold', - tokenType: TokenType.typography, - parentGroupId: '3', - origin: { - name: 'Heading/Desktop/XLarge/Bold', - }, - value: { - fontSize: { unit: 'Pixels', measure: 64 }, - lineHeight: { measure: 120 }, - fontFamily: { text: 'Inter' }, - fontWeight: { text: '700' }, - }, -} as TypographyToken); -exampleTypographyMockedTokens.set('typographyHeadingRef2', { - id: 'typographyRef', - name: 'Bold-Underline', - tokenType: TokenType.typography, - parentGroupId: '3', - origin: { - name: 'Heading/Desktop/XLarge/Bold-Underline', - }, - value: { - fontSize: { unit: 'Pixels', measure: 64 }, - lineHeight: { measure: 120 }, - fontFamily: { text: 'Inter' }, - fontWeight: { text: '700' }, - }, -} as TypographyToken); - -export const expectedTypographyValue = `( -font-family: 'Inter', sans-serif, -font-size: 64px, -font-style: italic, -font-weight: 700, -line-height: 1.2 -)`; - -const groupFunctions = { - addChild(): void {}, - addChildren(): void {}, - setParentGroupId(): void {}, - setPath(): void {}, - setSortOrder(): void {}, - toMutatedObject(): TokenGroup { - return new TokenGroup({ - id: this.id, - parentId: this.parentGroupId, - brandId: this.brandId, - tokenType: this.tokenType, - designSystemVersionId: this.designSystemVersionId, - isRoot: this.isRoot, - meta: { - name: this.name, - description: this.description, - }, - childrenIds: this.childrenIds, - }); - }, - toWriteObject(): TokenGroupRemoteModel { - return { - id: this.id, - brandId: this.brandId, - designSystemVersionId: this.designSystemVersionId, - isRoot: this.isRoot, - tokenType: this.tokenType, - childrenIds: this.childrenIds, - createdAt: this.createdAt, - updatedAt: this.updatedAt, - meta: { - name: this.name, - description: this.description, - }, - }; - }, -}; - -export const exampleMockedGroups: TokenGroup[] = [ - { - ...groupFunctions, - id: '1', - idInVersion: 'idInVersionValue', - brandId: 'brandIdValue', - designSystemVersionId: 'designSystemVersionIdValue', - name: 'spacing', - description: '', - isRoot: false, - tokenType: TokenType.dimension, - childrenIds: ['dimensionRef'], - path: ['Grid'], - tokenIds: ['dimensionRef'], - subgroupIds: [], - parentGroupId: 'parent1', - sortOrder: -1, - createdAt: null, - updatedAt: null, - }, - { - ...groupFunctions, - id: '2', - idInVersion: 'idInVersionValue', - brandId: 'brandIdValue', - designSystemVersionId: 'designSystemVersionIdValue', - name: 'Grid', - description: '', - isRoot: false, - tokenType: TokenType.string, - childrenIds: ['stringRef'], - path: [], - tokenIds: ['stringRef'], - subgroupIds: [], - parentGroupId: 'parent2', - sortOrder: -1, - createdAt: null, - updatedAt: null, - }, - { - ...groupFunctions, - id: '3', - idInVersion: 'idInVersionValue', - brandId: 'brandIdValue', - designSystemVersionId: 'designSystemVersionIdValue', - name: 'Typography', - description: '', - isRoot: false, - tokenType: TokenType.typography, - childrenIds: ['stringRef'], - path: [], - tokenIds: ['stringRef'], - subgroupIds: [], - parentGroupId: 'parent3', - sortOrder: -1, - createdAt: null, - updatedAt: null, - }, -]; - -export const exampleMockedColorsTokens = new Map(); -exampleMockedColorsTokens.set('actionColorRef', { - id: 'actionColorRef', - name: 'active', - tokenType: TokenType.color, - parentGroupId: '1', - origin: { - name: 'action/button/primary/default', - }, - value: { - color: { - r: 202, - g: 32, - b: 38, - referencedTokenId: null, - }, - opacity: { - unit: 'Raw', - measure: 1, - referencedTokenId: null, - }, - referencedTokenId: null, - }, -} as ColorToken); -exampleMockedColorsTokens.set('backgroundColorRef', { - id: 'backgroundColorRef', - name: 'primary', - tokenType: TokenType.color, - parentGroupId: '2', - origin: { - name: 'background/primary', - }, - value: { - color: { - r: 255, - g: 255, - b: 255, - referencedTokenId: null, - }, - opacity: { - unit: 'Raw', - measure: 1, - referencedTokenId: null, - }, - referencedTokenId: null, - }, -} as ColorToken); - -export const exampleMockedColorGroups: TokenGroup[] = [ - { - ...groupFunctions, - id: '1', - idInVersion: 'idInVersionValue', - brandId: 'brandIdValue', - designSystemVersionId: 'designSystemVersionIdValue', - name: 'primary', - description: '', - isRoot: false, - tokenType: TokenType.color, - childrenIds: ['actionColorRef'], - path: ['action', 'button'], - tokenIds: ['actionColorRef'], - subgroupIds: [], - parentGroupId: 'parent1', - sortOrder: -1, - createdAt: null, - updatedAt: null, - }, - { - ...groupFunctions, - id: '2', - idInVersion: 'idInVersionValue', - brandId: 'brandIdValue', - designSystemVersionId: 'designSystemVersionIdValue', - name: 'background', - description: '', - isRoot: false, - tokenType: TokenType.color, - childrenIds: ['backgroundColorRef'], - path: [], - tokenIds: ['backgroundColorRef'], - subgroupIds: [], - parentGroupId: 'parent2', - sortOrder: -1, - createdAt: null, - updatedAt: null, - }, -]; - -export const exampleMockedInvariantTokens = new Map(); -exampleMockedInvariantTokens.set('radiiRef', { - id: 'radiiRef', - name: 'radius-full', - tokenType: TokenType.dimension, - parentGroupId: '1', - origin: { - name: 'Radius/radius-full', - }, - value: { - unit: 'Pixels', - measure: 9999, - referencedTokenId: null, - }, -} as DimensionToken);