[
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n *.* linguist-language=JavaScript\n"
  },
  {
    "path": ".gitignore",
    "content": "public/components.js\ntodo.md\n\n.DS_Store\nnode_modules\nyarn.lock\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# Diagnostic reports (https://nodejs.org/api/report.html)\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n.env.test\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n\n# next.js build output\n.next\n\n# nuxt.js build output\n.nuxt\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Thomas Lowry\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Figma Plugin DS Svelte\n\nWORK IN PROGRESS—This is a Svelte version of the Figma Plugin DS specifically for use in creating Figma Plugins. I decided to create this because Svelte seems like a great lightweight approach well suited for creating Figma plugins, and also improves the developer experience when compared to my vanilla JS Figma Plugin DS due to simplified markup.\n\nYou can also get started with [Figsvelte](https://github.com/thomas-lowry/figsvelte), a boilerplate for Figma plugins that already has this library setup as a dependency.\n\n## Installation\n\nTo install into your own Svelte project.\n`npm i -D figma-plugin-ds-svelte`\n\n## To use\n\n```javascript\n//import the global css which includes Figma color, spacing, and type vars\n//also includes a basic set of utility classes\nimport { GlobalCSS } from 'figma-plugin-ds-svelte';\n\n//import the desired components\nimport { Button, Input, SelectMenu } from 'figma-plugin-ds-svelte';\n```\n\n---\n\n## Components\n_All components can accept class props to add global or utility classes to each component_\n\n* [Button](#Button)\n* [Checkbox](#Checkbox)\n* [Disclosure panel](#Disclosure)\n* [Icon](#Icon)\n* [Icon button](#Icon-button)\n* [Input](#Input)\n* [Labels and sections](#Labels-and-sections)\n* [Onboarding tip](#Onboarding-tip)\n* [Radio button](#Radio-button)\n* [Select menu](#Select-menu)\n* [Switch](#Switch)\n* [Textarea](#Textarea)\n* [Type](#Type)\n* [Tokens](#Tokens)\n\n---\n\n### Button\n```javascript\nimport { Button } from 'figma-plugin-ds-svelte';\n```\n```html\n<Button on:click={funcName}>Label</Button>\n<Button on:click={funcName} variant=\"secondary\">Label</Button>\n<Button on:click={funcName} variant=\"secondary\" destructive>Label</Button>\n<Button on:click={funcName} disabled>Label</Button>\n```\n**Props**\n\n| Prop           | Type    | Options/notes                                                   |\n|:---------------|:--------|:----------------------------------------------------------------|\n| `on:click`     | Func    | Assign a function to execute on click. Ex: `on:click={funcName}`|\n| `variant`      | String  | Default: `\"primary\"`, Options: `\"secondary\"`, `\"tertiary\"`      |\n| `disabled`     | Boolean | Default: `false`                                                |\n| `destructive` | Boolean | Default: `false`                                                |\n\n---\n\n### Checkbox\n```javascript\nimport { Checkbox } from 'figma-plugin-ds-svelte';\n```\n```html\n<Checkbox>Label</Checkbox>\n<Checkbox checked>Label</Checkbox>\n<Checkbox disabled>Label</Checkbox>\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                                            |\n|:-----------|:--------|:-----------------------------------------------------------------------------------------|\n| `on:change`| Func    | Funtion to execute on change. Ex: `on:change={funcName}`                                 |\n| `value`    | Boolean | Default: `false`;                                                                        |\n| `checked`  | Boolean | Default: `false`; You can bind the value when checked to a var. `bind:checked={varName}` |\n| `disabled` | Boolean | Default: `false`                                                                         |\n\n---\n\n### Disclosure\n```javascript\nimport { Disclosure, DisclosureItem } from 'figma-plugin-ds-svelte';\n```\n```html\n<Disclosure>\n  <DisclosureItem title=\"Item 1\" open>Content here</DisclosureItem>\n  <DisclosureItem title=\"Item 2\">Content here</DisclosureItem>\n  <DisclosureItem title=\"Item 3\">Content here</DisclosureItem>\n</Disclosure>\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                     |\n|:-----------|:--------|:------------------------------------------------------------------|\n| `title`    | String  | Title of disclosure item                                          |\n| `open`     | Boolean | Default: `false`; Only one disclosure item can be opened at once  |\n| `section`  | Boolean | Default: `false`; Bold section header for disclosure title        |\n\n---\n\n### Icon\n```javascript\n//You need to import the icon component + whatever icons you want to use,\n//pass the names of your icon modules to the iconName prop in the Icon component\nimport { Icon, IconName } from 'figma-plugin-ds-svelte';\n\n//You can also import your own svg icon (32x32) and pass it to the icon component\nimport SvgName from './src/directory/image.svg';\n\n//Example\nimport { Icon, IconVisible, IconSpinner } from 'figma-plugin-ds-svelte';\n```\n```html\n<Icon iconName={IconVisible} color=\"black\"/>\n<Icon iconName={IconSpinner} color=\"blue\" spin/>\n<Icon iconText=\"W\" color=\"blue\"/>\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                                                |\n|:-----------|:--------|:---------------------------------------------------------------------------------------------|\n| `iconName` | Var     | Pass an imported SVG to this prop. `iconName={IconImport}`                                   |\n| `iconText` | String  | Pass a text character to use instead of an icon. Ex: width and height inputs `iconText=\"W\"`  |\n| `color`    | String  | Pass the name of any Figma color var to this prop. `color=\"blue\"`                            |\n| `spin`     | Boolean | Default: `false`; This will rotate the icon in an endless loop.                              |\n\n**Icons**\n\n\n| Icon                                                                                   | Var                               |\n|----------------------------------------------------------------------------------------|-----------------------------------|\n| ![IconAdjust](src/icons/adjust.svg \"icon\")                                             | `IconAdjust`                      |\n| ![IconAlert](src/icons/alert.svg \"icon\")                                               | `IconAlert`                       |\n| ![IconAngle](src/icons/angle.svg \"icon\")                                               | `IconAngle`                       |\n| ![IconArrowLeftRight](src/icons/arrow-left-right.svg \"icon\")                           | `IconArrowLeftRight`              |\n| ![IconUpDown](src/icons/arrow-up-down.svg \"icon\")                                      | `IconUpDown`                      |\n| ![IconAutoLayoutHorizontal](src/icons/auto-layout-horizontal.svg \"icon\")               | `IconAutoLayoutHorizontal`        |\n| ![IconAutoLayoutVertical](src/icons/auto-layout-vertical.svg \"icon\")                   | `IconAutoLayoutVertical`          |\n| ![IconBack](src/icons/back.svg \"icon\")                                                 | `IconBack`                        |\n| ![IconBlendEmpty](src/icons/blend-empty.svg \"icon\")                                    | `IconBlendEmpty`                  |\n| ![IconBlend](src/icons/blend.svg \"icon\")                                               | `IconBlend`                       |\n| ![IconBreak](src/icons/break.svg \"icon\")                                               | `IconBreak`                       |\n| ![IconCaretDown](src/icons/caret-down.svg \"icon\")                                      | `IconCaretDown`                   |\n| ![IconCaretLeft](src/icons/caret-left.svg \"icon\")                                      | `IconCaretLeft`                   |\n| ![IconCaretRight](src/icons/caret-right.svg \"icon\")                                    | `IconCaretRight`                  |\n| ![IconCaretUp](src/icons/caret-up.svg \"icon\")                                          | `IconCaretUp`                     |\n| ![IconCheck](src/icons/check.svg \"icon\")                                               | `IconCheck`                       |\n| ![IconClose](src/icons/close.svg \"icon\")                                               | `IconClose`                       |\n| ![IconComponent](src/icons/component.svg \"icon\")                                       | `IconComponent`                   |\n| ![IconCornerRadius](src/icons/corner-radius.svg \"icon\")                                | `IconCornerRadius`                |\n| ![IconCorners](src/icons/corners.svg \"icon\")                                           | `IconCorners`                     |\n| ![IconDistributeHorizontalSpacing](src/icons/distribute-horizontal-spacing.svg \"icon\") | `IconDistributeHorizontalSpacing` |\n| ![IconDistributeVerticalSpacing](src/icons/distribute-vertical-spacing.svg \"icon\")     | `IconDistributeVerticalSpacing`   |\n| ![IconDraft](src/icons/draft.svg \"icon\")                                               | `IconDraft`                       |\n| ![IconEffects](src/icons/effects.svg \"icon\")                                           | `IconEffects`                     |\n| ![IconEllipses](src/icons/ellipses.svg \"icon\")                                         | `IconEllipses`                    |\n| ![IconEyedropper](src/icons/eyedropper.svg \"icon\")                                     | `IconEyedropper`                  |\n| ![IconForward](src/icons/forward.svg \"icon\")                                           | `IconForward`                     |\n| ![IconFrame](src/icons/frame.svg \"icon\")                                               | `IconFrame`                       |\n| ![IconGroup](src/icons/group.svg \"icon\")                                               | `IconGroup`                       |\n| ![IconHidden](src/icons/hidden.svg \"icon\")                                             | `IconHidden`                      |\n| ![IconHorizontalPadding](src/icons/horizontal-padding.svg \"icon\")                      | `IconHorizontalPadding`           |\n| ![IconHyperlink](src/icons/hyperlink.svg \"icon\")                                       | `IconHyperlink`                   |\n| ![IconImage](src/icons/image.svg \"icon\")                                               | `IconImage`                       |\n| ![IconInstance](src/icons/instance.svg \"icon\")                                         | `IconInstance`                    |\n| ![IconKey](src/icons/key.svg \"icon\")                                                   | `IconKey`                         |\n| ![IconLayoutAlignBottom](src/icons/layout-align-bottom.svg \"icon\")                     | `IconLayoutAlignBottom`           |\n| ![IconAlignHorizontalCenters](src/icons/layout-align-horizontal-centers.svg \"icon\")    | `IconAlignHorizontalCenters`      |\n| ![IconAlignLeft](src/icons/layout-align-left.svg \"icon\")                               | `IconAlignLeft`                   |\n| ![IconAlignRight](src/icons/layout-align-right.svg \"icon\")                             | `IconAlignRight`                  |\n| ![IconAlignTop](src/icons/layout-align-top.svg \"icon\")                                 | `IconAlignTop`                    |\n| ![IconAlignVerticalCenters](src/icons/layout-align-vertical-centers.svg \"icon\")        | `IconAlignVerticalCenters`        |\n| ![IconLayoutGridColumns](src/icons/layout-grid-columns.svg \"icon\")                     | `IconLayoutGridColumns`           |\n| ![IconLayoutGridRows](src/icons/layout-grid-rows.svg \"icon\")                           | `IconLayoutGridRows`              |\n| ![IconLayoutGridUniform](src/icons/layout-grid-uniform.svg \"icon\")                     | `IconLayoutGridUniform`           |\n| ![IconLibrary](src/icons/library.svg \"icon\")                                           | `IconLibrary`                     |\n| ![IconLinkBroken](src/icons/link-broken.svg \"icon\")                                    | `IconLinkBroken`                  |\n| ![IconLinkConnected](src/icons/link-connected.svg \"icon\")                              | `IconLinkConnected`               |\n| ![IconListDetailed](src/icons/list-detailed.svg \"icon\")                                | `IconListDetailed`                |\n| ![IconListTile](src/icons/list-tile.svg \"icon\")                                        | `IconListTile`                    |\n| ![IconList](src/icons/list.svg \"icon\")                                                 | `IconList`                        |\n| ![IconLockOff](src/icons/lock-off.svg \"icon\")                                          | `IconLockOff`                     |\n| ![IconLockOn](src/icons/lock-on.svg \"icon\")                                            | `IconLockOn`                      |\n| ![IconMinus](src/icons/minus.svg \"icon\")                                               | `IconMinus`                       |\n| ![IconPlay](src/icons/play.svg \"icon\")                                                 | `IconPlay`                        |\n| ![IconPlus](src/icons/plus.svg \"icon\")                                                 | `IconPlus`                        |\n| ![IconRandom](src/icons/random.svg \"icon\")                                             | `IconRandom`                      |\n| ![IconRecent](src/icons/recent.svg \"icon\")                                             | `IconRecent`                      |\n| ![IconResizeToFit](src/icons/resize-to-fit.svg \"icon\")                                 | `IconResizeToFit`                 |\n| ![IconResolveFilled](src/icons/resolve-filled.svg \"icon\")                              | `IconResolveFilled`               |\n| ![IconResolve](src/icons/resolve.svg \"icon\")                                           | `IconResolve`                     |\n| ![IconReverse](src/icons/reverse.svg \"icon\")                                           | `IconReverse`                     |\n| ![IconSearchLarge](src/icons/search-large.svg \"icon\")                                  | `IconSearchLarge`                 |\n| ![IconSearch](src/icons/search.svg \"icon\")                                             | `IconSearch`                      |\n| ![IconSettings](src/icons/settings.svg \"icon\")                                         | `IconSettings`                    |\n| ![IconShare](src/icons/share.svg \"icon\")                                               | `IconShare`                       |\n| ![IconSmiley](src/icons/smiley.svg \"icon\")                                             | `IconSmiley`                      |\n| ![IconSortAlphaAsc](src/icons/sort-alpha-asc.svg \"icon\")                               | `IconSortAlphaAsc`                |\n| ![IconSortAlphaDsc](src/icons/sort-alpha-dsc.svg \"icon\")                               | `IconSortAlphaDsc`                |\n| ![IconSortTopBottom](src/icons/sort-top-bottom.svg \"icon\")                             | `IconSortTopBottom`               |\n| ![IconSpacing](src/icons/spacing.svg \"icon\")                                           | `IconSpacing`                     |\n| ![IconSpinner](src/icons/spinner.svg \"icon\")                                           | `IconSpinner`                     |\n| ![IconStarOff](src/icons/star-off.svg \"icon\")                                          | `IconStarOff`                     |\n| ![IconStarOn](src/icons/star-on.svg \"icon\")                                            | `IconStarOn`                      |\n| ![IconStrokeWeight](src/icons/stroke-weight.svg \"icon\")                                | `IconStrokeWeight`                |\n| ![IconStyles](src/icons/styles.svg \"icon\")                                             | `IconStyles`                      |\n| ![IconSwap](src/icons/swap.svg \"icon\")                                                 | `IconSwap`                        |\n| ![IconTheme](src/icons/theme.svg \"icon\")                                               | `IconTheme`                       |\n| ![IconTidyUpGrid](src/icons/tidy-up-grid.svg \"icon\")                                   | `IconTidyUpGrid`                  |\n| ![IconTidyUpListHorizontal](src/icons/tidy-up-list-horizontal.svg \"icon\")              | `IconTidyUpListHorizontal`        |\n| ![IconTidyUpListVertical](src/icons/tidy-up-list-vertical.svg \"icon\")                  | `IconTidyUpListVertical`          |\n| ![IconTimer](src/icons/timer.svg \"icon\")                                               | `IconTimer`                       |\n| ![IconTrash](src/icons/trash.svg \"icon\")                                               | `IconTrash`                       |\n| ![IconVerticalPadding](src/icons/vertical-padding.svg \"icon\")                          | `IconVerticalPadding`             |\n| ![IconVisible](src/icons/visible.svg \"icon\")                                           | `IconVisible`                     |\n| ![IconWarningLarge](src/icons/warning-large.svg \"icon\")                                | `IconWarningLarge`                |\n| ![IconWarning](src/icons/warning.svg \"icon\")                                           | `IconWarning`                     |\n\n\n---\n\n### Icon button\n```javascript\n//use this component as you would an Icon, it accepts the same props (except color)\nimport { IconButton } from 'figma-plugin-ds-svelte';\n```\n```html\n<IconButton on:click={funcName} iconName={IconVisible}/>\n<IconButton on:click={funcName} iconName={IconVisible} selected/>\n<IconButton on:click={funcName} iconText=\"@\"/>\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                    |\n|------------|---------|------------------------------------------------------------------|\n| `on:click` | Func    | Assign a function to execute on click. Ex: `on:click={funcName}` |\n| `selected` | Boolean | Default: `false`                                                 |\n| `iconName` | String  | _See Icon component for usage._                                  |\n| `IconText` | String  | _See Icon component for usage._                                  |\n| `spin`     | Boolean | _See Icon component for usage._                                  |\n\n---\n\n### Input\n```javascript\nimport { Input } from 'figma-plugin-ds-svelte';\n\n//var to define and store value\nvar inputValue = 'Default value'; \n```\n```html\n<Input bind:value={inputValue}/>\n<Input bind:value={inputValue} disabled/>\n<Input placeholder=\"Enter some info...\"/>\n\n<!-- You can also pass Icon props to use the icon component inside the input -->\n<Input iconName={IconName} />\n<Input iconName={IconSpinner} spin placeholder=\"Fetching data...\" />\n\n<!-- Force borders on the input -->\n<Input value=\"Value\" borders/>\n```\n**Props**\n\n| Prop          | Type    | Options/notes                                                      |\n|:--------------|:--------|:-------------------------------------------------------------------|\n| `on:change`   | Func    | Funtion to execute on change. Ex: `on:change={funcName}`           |\n| `value`       | String  | Value that will get populated by user or specify predefined value. You can also bind this to a variable. |\n| `placeholder` | String  | Placeholder text.                                                  |\n| `borders`     | Boolean | Default: `false`; Force a border on the input field.               |\n| `disabled`    | Boolean | Default: `false`                                                   |\n| `iconName`    | Var     | _See Icon component for usage._                                    |\n| `iconText`    | String  | _See Icon component for usage._                                    |\n| `spin`        | Boolean | _See Icon component for usage._                                    |\n\n---\n\n### Labels and sections\n```javascript\nimport { Label, SectionHeader } from 'figma-plugin-ds-svelte';\n```\n```html\n<Label>Label name</Label>\n<Section>Section name</Section>\n```\n\n---\n\n### Onboarding tip\n```javascript\nimport { OnboardingTip } from 'figma-plugin-ds-svelte';\n```\n```html\n<OnboardingTip iconName={IconStyles}>\n  Tip text goes here\n</OnboardingTip>\n```\n**Props**\n\n| Prop       | Type    | Options/notes                   |\n|:-----------|:--------|:--------------------------------|\n| `iconName` | Var     | _See Icon component for usage._ |\n| `iconText` | String  | _See Icon component for usage._ |\n| `spin`     | Boolean | _See Icon component for usage._ |\n\n---\n\n### Radio button\n```javascript\nimport { Radio } from 'figma-plugin-ds-svelte';\n\n//use bind:group, with a var to create a radio group and store the value of selected item\n//set value if this var to same value as radio item to set initial selection\nvar radioValue;\n```\n```html\n<Radio bind:group={radioValue} value=\"a\">Label</Radio>\n<Radio bind:group={radioValue} value=\"b\">Label</Radio>\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                             |\n|:-----------|:--------|:----------------------------------------------------------|\n| `on:change`| Func    | Funtion to execute on change. Ex: `on:change={funcName}`  |\n| `group`    | Var     | Pass name of var to store selected item from radio group. |\n| `value`    | String  | Value of radio item.                                      |\n| `disabled` | Boolean | Default: `false`                                          |\n\n---\n\n### Select menu\n```javascript\nimport { SelectMenu } from 'figma-plugin-ds-svelte';\n\n//You will need to pass and bind an array of menu items to this\n//Note: it is up to you to sort this array however you want\nlet menuItemArray = [\n  { 'value': 'item1', 'label': 'Menu item 1', 'group': null, 'selected': false },\n  { 'value': 'item2', 'label': 'Menu item 2 ', 'group': null, 'selected': false }\n];\n\n//use bind:value, with a var bind the data of the selected item\nvar selectedItem;\n```\n```html\n<SelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem}/>\n<SelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} showGroupLabels/>\n<SelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} iconName={IconBlend}/>\n<SelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} disabled/>\n```\n**Props**\n\n| Prop              | Type    | Options/notes                                                                                                                            |\n|-------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------|\n| `on:change`       | Func    | Function to execute on change. Ex: `on:change={funcName}`                                                                                |\n| `menuItems`       | Var     | Pass in array of menu item objects. See example above for format.  If you want to use option groups, update the group keys to a string.  |\n| `value`           | Var     | Bind the value of the selected item to a var. Ex: `bind:value={selectedItem}`                                                       |\n| `placeholder`     | String  | Override default placeholder text with a string when there is no item selected.                                                          |\n| `showGroupLabels` | Boolean | Default: `false`; If you are using option groups, this will show the group labels.                                                       |\n| `disabled`        | Boolean | Default: `false`                                                                                                                         |\n| `macOSBlink`      | Boolean | Default: `false`; Easter egg, old school Mac OS triple blink on select.                                                                  |\n| `iconName`        | Var     | _See Icon component for usage._                                                                                                          |\n| `iconText`        | String  | _See Icon component for usage._                                                                                                          |\n\n---\n\n### Switch\n```javascript\nimport { Switch } from 'figma-plugin-ds-svelte';\n\n//use bind:group, with a var to create a radio group and store the value of selected item\n//set value if this var to same value as radio item to set initial selection\nvar switchValue;\n```\n```html\n<Switch value=\"value\" bind:checked={switchValue}>Label</Switch>\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                                            |\n|:-----------|:--------|:-----------------------------------------------------------------------------------------|\n| `on:change`| Func    | Funtion to execute on change. Ex: `on:change={funcName}`                                 |\n| `value`    | Boolean | Default: `false`;                                                                        |\n| `checked`  | Boolean | Default: `false`; You can bind the value when checked to a var. `bind:checked={varName}` |\n| `disabled` | Boolean | Default: `false`                                                                         |\n\n---\n\n### Textarea\n```javascript\nimport { Textarea } from 'figma-plugin-ds-svelte';\n```\n```html\n<Textarea placeholder=\"Enter some text\"></Textarea>\n```\n**Props**\n\n| Prop          | Type    | Options/notes                                                         |\n|:--------------|:--------|:----------------------------------------------------------------------|\n| `on:change`   | Func    | Function to execute on change. Ex: `on:change={funcName}`             |\n| `value`       | String  | Value of textarea. Can bind to a variable. Ex: `bind:value={someVar}` |\n| `placeholder` | String  | Override default placeholder text with a string.                      |\n| `rows`        | Int     | Default: `2`; Number of rows (height) to display.                     |\n| `disabled`    | Boolean | Default: `false`                                                      |\n\n---\n\n### Type\n```javascript\nimport { Type } from 'figma-plugin-ds-svelte';\n```\n```html\n<Type size=\"large\" weight=\"bold\">Content here</Type>\n```\n**Props**\n\n| Prop      | Type    | Options/notes                                                                          |\n|:----------|:--------|:---------------------------------------------------------------------------------------|\n| `size`    | String  | Default: `\"small\"`; Also accepts `\"xsmall\"`,`\"large\"`, `\"xlarge\"`                      |\n| `weight`  | String  | Default: `\"normal\"`; Also accepts `\"medium\"`,`\"bold\"`                                  |\n| `color`   | String  | Default: `\"black8\"`; Pass the name of any Figma color var to this prop. `color=\"blue\"`, Default color is white when inverse is `true` and no value specified |\n| `inverse` | Boolean | Default: `false`; Optimizes letter-spacing for light on dark applications.             |\n\n---\n\n## Tokens\n\n**Color**\n\n| Name          | Var               | Type             | Notes                                                         |\n|:--------------|:------------------|:-----------------|:--------------------------------------------------------------|\n| blue          | `--blue`          | Accent           | Ex: primary button, hyperlinks, focus/selected states         |\n| purple        | `--purple`        | Accent           | Ex: components/instances                                      |\n| hot-pink      | `--hot-pink`      | Accent           | Ex: smart selection handles                                   |\n| green         | `--green`         | Accent           | Ex: Toolbar selections                                        |\n| red           | `--red`           | Accent           | Ex: Error                                                     |\n| yellow        | `--yellow`        | Accent           | Ex: Caution/warning                                           |\n| black         | `--black`         | Basic foreground | Ex: active states                                             |\n| black8        | `--black8`        | Basic foreground | 80% black, ex: most common black used in UI text and icons    |\n| black8-opaque | `--black8-opaque` | Basic foreground | Opaque version of black8                                      |\n| black3        | `--black3`        | Basic foreground | 30% black, ex: lower priority messages, disabled states       |\n| black3-opaque | `--black3-opaque` | Basic foreground | Opaque version of black3                                      |\n| white         | `--white`         | Basic foreground | Used in same way as black8, but on dark backgrounds           |\n| white8        | `--white8`        | Basic foreground | Rarely used, only in toolbar                                  |\n| white4        | `--white4`        | Basic foreground | Used in same way as black3, Ex: option group headers in menus |\n| white         | `--white`         | Basic background | (Duplicate) White is also the most common background color    |\n| grey          | `--grey`          | Basic background | Used behind controls in active state                          |\n| silver        | `--silver`        | Basic background | Ex: horizontal separators, default canvas background          |\n| hud           | `--hud`           | Basic background | Ex: background for menus                                      |\n| toolbar       | `--toolbar`       | Basic background | Ex: background for the toolbar                                |\n| black1        | `--black1`        | Special          | Ex: input placeholder underline, textarea border              |\n| blue3         | `--blue3`         | Special          | Ex: text range selection in inputs                            |\n| purple4       | `--purple4`       | Special          | Ex: disabled components/instances                             |\n| hover-fill    | `--hover-fill`    | Special          | Hover state for items without borders, ex: icon button        |\n| selection-a   | `--selection-a`   | Special          | Selected cells, ex: selected top level layer                  |\n| selection-b   | `--selection-b`   | Special          | Selected cells, ex: selected child layers                     |\n| white2        | `--white2`        | Special          | Ex: menu separators                                           |\n\n\n**Type**\n\n| Property         | Var                                | Value               | Notes                                                        |\n|:-----------------|:-----------------------------------|:--------------------|:-------------------------------------------------------------|\n| `font-family`    | `--font-stack`                     | 'Inter', sans-serif | Default font everywhere                                      |\n| `font-size`      | `--font-size-xsmall`               | 11px                | Most common font size                                        |\n| `font-size`      | `--font-size-small`                | 12px                | Used in menus                                                |\n| `font-size`      | `--font-size-large`                | 13px                | Rarely used in editor                                        |\n| `font-size`      | `--font-size-xlarge`               | 14px                | Rarely used in editor                                        |\n| `font-weight`    | `--font-weight-normal`             | 400                 |                                                              |\n| `font-weight`    | `--font-weight-medium`             | 500                 |                                                              |\n| `font-weight`    | `--font-weight-bold`               | 600                 |                                                              |\n| `line-height`    | `--font-line-height`               | 16px                | For use with xsmall and small font sizes                     |\n| `line-height`    | `--font-line-height-large`         | 24px                | For use with large and xlarge font sizes                     |\n| `letter-spacing` | `--font-letter-spacing-pos-xsmall` | .005em              | Optimized letter spacing for xsmall text on light background |\n| `letter-spacing` | `--font-letter-spacing-neg-xsmall` | .01em               | Optimized letter spacing for xsmall text on dark background  |\n| `letter-spacing` | `--font-letter-spacing-pos-small`  | 0                   | Optimized letter spacing for small text on light background  |\n| `letter-spacing` | `--font-letter-spacing-neg-small`  | .005em              | Optimized letter spacing for small text on dark background   |\n| `letter-spacing` | `--font-letter-spacing-pos-large`  | -.0025em            | Optimized letter spacing for large text on light background  |\n| `letter-spacing` | `--font-letter-spacing-neg-large`  | .0025em             | Optimized letter spacing for large text on dark background   |\n| `letter-spacing` | `--font-letter-spacing-pos-xlarge` | -.001em             | Optimized letter spacing for xlarge text on light background |\n| `letter-spacing` | `--font-letter-spacing-neg-xlarge` | -.001em             | Optimized letter spacing for xlarge text on dark background  |\n\n**Border Radius**\n\n| Var                     | Value | Notes                                 |\n|:------------------------|:------|:--------------------------------------|\n| `--border-radius-small` | 2px   | Ex: menus, input borders, icon button |\n| `--border-radius-med`   | 5px   | Ex: visual bell, toasts               |\n| `--border-radius-large` | 6px   | Ex: buttons                           |\n\n**Shadows**\n\n| Var                         | Notes                       |\n|:----------------------------|:----------------------------|\n| `--shadow-hud`              | Ex: menus, tooltips, toasts |\n| `--shadow-floating-window:` | Ex: modal, dialog           |\n\n**Sizes**\n\n| Var               | Value |\n|:------------------|:------|\n| `--size-xxxsmall` | 4px   |\n| `--size-xxsmall`  | 8px   |\n| `--size-xsmall`   | 16px  |\n| `--size-small`    | 24px  |\n| `--size-medium`   | 32px  |\n| `--size-large`    | 40px  |\n| `--size-xlarge`   | 48px  |\n| `--size-xxlarge`  | 64px  |\n| `--size-huge`     | 80px  |\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"figma-plugin-ds-svelte\",\n  \"version\": \"1.3.8\",\n  \"description\": \"A collection of Svelte components that match the Figma UI for building plugins.\",\n  \"svelte\": \"./src/index.js\",\n  \"dependencies\": {\n    \"svelte-click-outside\": \"^1.0.0\"\n  },\n  \"devDependencies\": {\n    \"npm-run-all\": \"^4.1.5\",\n    \"rollup\": \"^1.32.1\",\n    \"rollup-plugin-commonjs\": \"^10.1.0\",\n    \"rollup-plugin-livereload\": \"^1.1.0\",\n    \"rollup-plugin-node-resolve\": \"^5.2.0\",\n    \"rollup-plugin-postcss\": \"^2.9.0\",\n    \"rollup-plugin-serve\": \"^1.0.1\",\n    \"rollup-plugin-svelte\": \"^5.1.1\",\n    \"rollup-plugin-svg\": \"^2.0.0\",\n    \"svelte\": \"^3.20.1\"\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c\",\n    \"autobuild\": \"rollup -c -w\",\n    \"dev\": \"rollup -c -w\",\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/thomas-lowry/figma-plugin-ds-svelte.git\"\n  },\n  \"keywords\": [\n    \"figma\",\n    \"plugin\",\n    \"ds\",\n    \"design\",\n    \"system\",\n    \"ui\",\n    \"svelte\",\n    \"components\"\n  ],\n  \"files\": [\n    \"src\"\n  ],\n  \"author\": \"Thomas Lowry\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/thomas-lowry/figma-plugin-ds-svelte/issues\"\n  },\n  \"homepage\": \"https://github.com/thomas-lowry/figma-plugin-ds-svelte#readme\",\n  \"main\": \"./src/index.js\"\n}\n"
  },
  {
    "path": "public/index.html",
    "content": "<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf8\" />\n        <meta name=\"viewport\" content=\"width=device-width\" />\n\n        <title>Figma Plugin DS Svelte components</title>\n\n    </head>\n\n    <body>\n        <script src=\"components.js\"></script>\n    </body>\n</html>\n"
  },
  {
    "path": "rollup.config.js",
    "content": "import svelte from 'rollup-plugin-svelte';\nimport resolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollup-plugin-commonjs';\nimport serve from 'rollup-plugin-serve';\nimport livereload from 'rollup-plugin-livereload';\nimport svg from 'rollup-plugin-svg';\nimport postcss from 'rollup-plugin-postcss';\n\nconst production = !process.env.ROLLUP_WATCH\n\nexport default {\n    input: 'src/test.js',\n    output: {\n        file: `public/components.js`,\n        format: 'iife',\n        name: 'components',\n    },\n    plugins: [\n        svelte({\n            include: ['src/**/*.svelte', 'node_modules/**/src/*.svelte'],\n            dev: true,\n        }),\n        resolve(),\n        commonjs(),\n        svg(),\n        postcss({\n            plugins: []\n        }),\n        !production && serve('public'),\n        !production && livereload('public'),\n    ],\n    watch: {\n\t\tclearScreen: false\n\t}\n}"
  },
  {
    "path": "src/App.svelte",
    "content": "<script>\n    //This is a simple app playground to test components and their markup\n\n    // Global CSS\n    import style from './global.css';\n\n    //Components\n    import Button from './components/Button/index.svelte';\n    import Checkbox from './components/Checkbox/index.svelte';\n    import Switch from './components/Switch/index.svelte';\n    import Disclosure from './components/Disclosure/index.svelte';\n    import DisclosureItem from './components/DisclosureItem/index.svelte';\n    import Icon from './components/Icon/index.svelte';\n    import IconButton from './components/IconButton/index.svelte';\n    import Input from './components/Input/index.svelte';\n    import Label from './components/Label/index.svelte';\n    import OnboardingTip from './components/OnboardingTip/index.svelte';\n    import Radio from './components/Radio/index.svelte';\n    import Section from './components/Section/index.svelte';\n    import SelectMenu from './components/SelectMenu/index.svelte';\n    import Textarea from './components/Textarea/index.svelte';\n    import Type from './components/Type/index.svelte';\n\n    //Icons\n    import IconAdjust from './icons/adjust.svg';\n    import IconAlert from './icons/alert.svg';\n    import IconAngle from './icons/angle.svg';\n    import IconArrowLeftRight from './icons/arrow-left-right.svg';\n    import IconUpDown from './icons/arrow-up-down.svg';\n    import IconAutoLayoutHorizontal from './icons/auto-layout-horizontal.svg';\n    import IconAutoLayoutVertical from './icons/auto-layout-vertical.svg';\n    import IconBack from './icons/back.svg';\n    import IconBlendEmpty from './icons/blend-empty.svg';\n    import IconBlend from './icons/blend.svg';\n    import IconBreak from './icons/break.svg';\n    import IconCaretDown from './icons/caret-down.svg';\n    import IconCaretLeft from './icons/caret-left.svg';\n    import IconCaretRight from './icons/caret-right.svg';\n    import IconCaretUp from './icons/caret-up.svg';\n    import IconCheck from './icons/check.svg';\n    import IconClose from './icons/close.svg';\n    import IconComponent from './icons/component.svg';\n    import IconCornerRadius from './icons/corner-radius.svg';\n    import IconCorners from './icons/corners.svg';\n    import IconDistributeHorizontalSpacing from './icons/distribute-horizontal-spacing.svg';\n    import IconDistributeVerticalSpacing from './icons/distribute-vertical-spacing.svg';\n    import IconDraft from './icons/draft.svg';\n    import IconEffects from './icons/effects.svg';\n    import IconEllipses from './icons/ellipses.svg';\n    import IconEyedropper from './icons/eyedropper.svg';\n    import IconForward from './icons/forward.svg';\n    import IconFrame from './icons/frame.svg';\n    import IconGroup from './icons/group.svg';\n    import IconHidden from './icons/hidden.svg';\n    import IconHorizontalPadding from './icons/horizontal-padding.svg';\n    import IconHyperlink from './icons/hyperlink.svg';\n    import IconImage from './icons/image.svg';\n    import IconInstance from './icons/instance.svg';\n    import IconKey from './icons/key.svg';\n    import IconLayoutAlignBottom from './icons/layout-align-bottom.svg';\n    import IconAlignHorizontalCenters from './icons/layout-align-horizontal-centers.svg';\n    import IconAlignLeft from './icons/layout-align-left.svg';\n    import IconAlignRight from './icons/layout-align-right.svg';\n    import IconAlignTop from './icons/layout-align-top.svg';\n    import IconAlignVerticalCenters from './icons/layout-align-vertical-centers.svg';\n    import IconLayoutGridColumns from './icons/layout-grid-columns.svg';\n    import IconLayoutGridRows from './icons/layout-grid-rows.svg';\n    import IconLayoutGridUniform from './icons/layout-grid-uniform.svg';\n    import IconLibrary from './icons/library.svg';\n    import IconLinkBroken from './icons/link-broken.svg';\n    import IconLinkConnected from './icons/link-connected.svg';\n    import IconListDetailed from './icons/list-detailed.svg';\n    import IconListTile from './icons/list-tile.svg';\n    import IconList from './icons/list.svg';\n    import IconLockOff from './icons/lock-off.svg';\n    import IconLockOn from './icons/lock-on.svg';\n    import IconMinus from './icons/minus.svg';\n    import IconPlay from './icons/play.svg';\n    import IconPlus from './icons/plus.svg';\n    import IconRandom from './icons/random.svg';\n    import IconRecent from './icons/recent.svg';\n    import IconResizeToFit from './icons/resize-to-fit.svg';\n    import IconResolveFilled from './icons/resolve-filled.svg';\n    import IconResolve from './icons/resolve.svg';\n    import IconReverse from './icons/reverse.svg';\n    import IconSearchLarge from './icons/search-large.svg';\n    import IconSearch from './icons/search.svg';\n    import IconSettings from './icons/settings.svg';\n    import IconShare from './icons/share.svg';\n    import IconSmiley from './icons/smiley.svg';\n    import IconSortAlphaAsc from './icons/sort-alpha-asc.svg';\n    import IconSortAlphaDsc from './icons/sort-alpha-dsc.svg';\n    import IconSortTopBottom from './icons/sort-top-bottom.svg';\n    import IconSpacing from './icons/spacing.svg';\n    import IconSpinner from './icons/spinner.svg';\n    import IconStarOff from './icons/star-off.svg';\n    import IconStarOn from './icons/star-on.svg';\n    import IconStrokeWeight from './icons/stroke-weight.svg';\n    import IconStyles from './icons/styles.svg';\n    import IconSwap from './icons/swap.svg';\n    import IconTheme from './icons/theme.svg';\n    import IconTidyUpGrid from './icons/tidy-up-grid.svg';\n    import IconTidyUpListHorizontal from './icons/tidy-up-list-horizontal.svg';\n    import IconTidyUpListVertical from './icons/tidy-up-list-vertical.svg';\n    import IconTimer from './icons/timer.svg';\n    import IconTrash from './icons/trash.svg';\n    import IconVerticalPadding from './icons/vertical-padding.svg';\n    import IconVisible from './icons/visible.svg';\n    import IconWarningLarge from './icons/warning-large.svg';\n    import IconWarning from './icons/warning.svg';\n\n    //var to store the selected value of our radio button group\n    var radioValue = 'a';\n\n    //Arrays for select menu\n    //example without a selected item\n    let menuItemsExample0;\n\n    //this function dynamically updates the first empty select menu example with data\n    function populateMenu() {\n        menuItemsExample0 = [\n            { 'value': 'item1', 'label': 'Menu item 1', 'group': null, 'selected': true },\n            { 'value': 'item2', 'label': 'Menu item 2 ', 'group': null, 'selected': false },\n        ]\n    }\n\n    let menuItemsExample1 = [\n        { 'value': 'item1', 'label': 'Menu item 1', 'group': null, 'selected': false },\n        { 'value': 'item2', 'label': 'Menu item 2 ', 'group': null, 'selected': false },\n        { 'value': 'item3', 'label': 'Menu item 3', 'group': null, 'selected': false },\n        { 'value': 'item4', 'label': 'Menu item 4', 'group': null, 'selected': false }\n    ];\n    //example with an initial selection\n    let menuItemsExample2 = [\n        { 'value': 'item1', 'label': 'Menu item 1', 'group': null, 'selected': false },\n        { 'value': 'item2', 'label': 'Menu item 2 ', 'group': null, 'selected': true },\n        { 'value': 'item3', 'label': 'Menu item 3', 'group': null, 'selected': false },\n        { 'value': 'item4', 'label': 'Menu item 4', 'group': null, 'selected': false }\n    ];\n    //example with option groups (we will show the labels with a prop)\n    let menuItemsExample3 = [\n        { 'value': 'item1', 'label': 'Granny Smith', 'group': 'Apples', 'selected': false },\n        { 'value': 'item2', 'label': 'Honey Crisp ', 'group': 'Apples', 'selected': true },\n        { 'value': 'item3', 'label': 'Blood', 'group': 'Oranges', 'selected': false },\n        { 'value': 'item4', 'label': 'Valencia', 'group': 'Oranges', 'selected': false }\n    ];\n    //example with an initial selection and option groups \n    let menuItemsExample4 = [\n        { 'value': 'item1', 'label': 'Passthrough', 'group': 'group1', 'selected': true },\n        { 'value': 'item2', 'label': 'Normal ', 'group': 'group1', 'selected': false },\n        { 'value': 'item3', 'label': 'Darken', 'group': 'group2', 'selected': false },\n        { 'value': 'item4', 'label': 'Multiply', 'group': 'group2', 'selected': false },\n        { 'value': 'item4', 'label': 'Color Burn', 'group': 'group2', 'selected': false }\n    ];\n    \n\n\n</script>\n\n\n<div class=\"wrapper\" style=\"background-color: var(--figma-color-bg)\">\n\n<h1>Figma Plugin UI Svelte</h1>\n\n    <section>\n        <h2>Buttons</h2>\n\n        <div class=\"mb-xsmall\">\n            <h3>Primary</h3>\n            <div class=\"flex row\">\n                <Button class=\"mr-xxsmall\">Label</Button>\n                <Button disabled class=\"mr-xxsmall\">Label</Button>\n                <Button destructive class=\"mr-xxsmall\">Label</Button>\n                <Button destructive disabled>Label</Button>\n            </div>\n        </div>\n\n        <div class=\"mb-xsmall\">\n            <h3>Secondary</h3>\n            <div class=\"flex row\">\n                <Button variant=\"secondary\" class=\"mr-xxsmall\">Label</Button>\n                <Button variant=\"secondary\" disabled class=\"mr-xxsmall\">Label</Button>\n                <Button variant=\"secondary\" destructive class=\"mr-xxsmall\">Label</Button>\n                <Button variant=\"secondary\" destructive disabled class=\"mr-xxsmall\">Label</Button>\n            </div>\n        </div>\n\n        <div>\n            <h3>Teritary</h3>\n            <div class=\"flex row\">\n                <Button variant=\"tertiary\" class=\"mr-xxsmall\">Label</Button>\n                <Button variant=\"tertiary\" disabled class=\"mr-xxsmall\">Label</Button>\n                <Button variant=\"tertiary\" destructive class=\"mr-xxsmall\">Label</Button>\n                <Button variant=\"tertiary\" destructive disabled class=\"mr-xxsmall\">Label</Button>\n            </div>\n        </div>\n\n    </section>\n\n    <section>\n        <h2>Checkboxes</h2>\n        <Checkbox>Label</Checkbox>\n        <Checkbox checked>Label</Checkbox>\n        <Checkbox disabled>Label</Checkbox>\n        <Checkbox checked disabled>Label</Checkbox>\n    </section>\n\n    <section>\n        <h2>Switches</h2>\n        <Switch>Label</Switch>\n        <Switch checked>Label</Switch>\n        <Switch disabled>Label</Switch>\n        <Switch checked disabled>Label</Switch>\n    </section>\n\n    <section>\n        <h2>Radio buttons</h2>\n        <Radio bind:group={radioValue} value=\"a\">Label Label with really long text content Label with really really really really long text content Label with really long text content Label with really long text content</Radio>\n        <Radio bind:group={radioValue} value=\"b\">Label</Radio>\n        <Radio bind:group={radioValue} value=\"c\" disabled>Label</Radio>\n\n    </section>\n\n    <section>\n        <h2>Disclosure panels</h2>\n        <Disclosure>\n            <DisclosureItem title=\"Item 1\" open>Content here</DisclosureItem>\n            <DisclosureItem title=\"Item 2\">Content here</DisclosureItem>\n            <DisclosureItem title=\"Item 3\">Content here</DisclosureItem>\n        </Disclosure>\n    </section>\n\n    <section>\n        <h2>Icon</h2>\n        <h3>Icons and props</h3>\n        <caption class=\"mb-xsmall\">You can import and pass an SVG string to the iconName prop, or you can display text inside an icon by passing a string including a character to the iconText prop. You can pass the name of any color from the Figma DS to the color prop (ex: color=\"red\", color=\"purple4\"). Icons can also accept the spin prop. The IconButton, Input, and OnboardingTip all make use of the Icon component and can accept its props.</caption>\n        <div class=\"flex row mb-xsmall\">\n            <Icon iconName={IconVisible} color=\"black\"/>\n            <Icon iconName={IconVisible} color=\"black8\"/>\n            <Icon iconName={IconVisible} color=\"black3\"/>\n            <Icon iconName={IconVisible} color=\"blue\"/>\n            <Icon iconName={IconVisible} color=\"purple\"/>\n            <Icon iconName={IconVisible} color=\"yellow\"/>\n            <Icon iconName={IconVisible} color=\"red\"/>\n            <Icon iconName={IconVisible} color=\"green\"/>\n            <Icon iconText=\"W\"/>\n            <Icon iconText=\"H\" color=\"black3\"/>\n            <Icon iconText=\"#\" color=\"blue\"/>\n            <Icon iconText=\"@\" color=\"red\"/>\n            <Icon iconText=\"→\" color=\"blue\" spin/>\n            <Icon iconName={IconSpinner} spin/>\n        </div>\n        <h3>Icons</h3>\n        <div class=\"flex row flex-wrap\">\n            <Icon iconName={IconAdjust}/>\n            <Icon iconName={IconAlert}/>\n            <Icon iconName={IconAngle}/>\n            <Icon iconName={IconArrowLeftRight}/>\n            <Icon iconName={IconUpDown}/>\n            <Icon iconName={IconAutoLayoutHorizontal}/>\n            <Icon iconName={IconAutoLayoutVertical}/>\n            <Icon iconName={IconBack}/>\n            <Icon iconName={IconBlendEmpty}/>\n            <Icon iconName={IconBlend}/>\n            <Icon iconName={IconBreak}/>\n            <Icon iconName={IconCaretDown}/>\n            <Icon iconName={IconCaretLeft}/>\n            <Icon iconName={IconCaretRight}/>\n            <Icon iconName={IconCaretUp}/>\n            <Icon iconName={IconCheck}/>\n            <Icon iconName={IconClose}/>\n            <Icon iconName={IconComponent}/>\n            <Icon iconName={IconCornerRadius}/>\n            <Icon iconName={IconCorners}/>\n            <Icon iconName={IconDistributeHorizontalSpacing}/>\n            <Icon iconName={IconDistributeVerticalSpacing}/>\n            <Icon iconName={IconDraft}/>\n            <Icon iconName={IconEffects}/>\n            <Icon iconName={IconEllipses}/>\n            <Icon iconName={IconEyedropper}/>\n            <Icon iconName={IconForward}/>\n            <Icon iconName={IconFrame}/>\n            <Icon iconName={IconGroup}/>\n            <Icon iconName={IconHidden}/>\n            <Icon iconName={IconHorizontalPadding}/>\n            <Icon iconName={IconHyperlink}/>\n            <Icon iconName={IconImage}/>\n            <Icon iconName={IconInstance}/>\n            <Icon iconName={IconKey}/>\n            <Icon iconName={IconLayoutAlignBottom}/>\n            <Icon iconName={IconAlignHorizontalCenters}/>\n            <Icon iconName={IconAlignLeft}/>\n            <Icon iconName={IconAlignRight}/>\n            <Icon iconName={IconAlignTop}/>\n            <Icon iconName={IconAlignVerticalCenters}/>\n            <Icon iconName={IconLayoutGridColumns}/>\n            <Icon iconName={IconLayoutGridRows}/>\n            <Icon iconName={IconLayoutGridUniform}/>\n            <Icon iconName={IconLibrary}/>\n            <Icon iconName={IconLinkBroken}/>\n            <Icon iconName={IconLinkConnected}/>\n            <Icon iconName={IconListDetailed}/>\n            <Icon iconName={IconListTile}/>\n            <Icon iconName={IconList}/>\n            <Icon iconName={IconLockOff}/>\n            <Icon iconName={IconLockOn}/>\n            <Icon iconName={IconMinus}/>\n            <Icon iconName={IconPlay}/>\n            <Icon iconName={IconPlus}/>\n            <Icon iconName={IconRandom}/>\n            <Icon iconName={IconRecent}/>\n            <Icon iconName={IconResizeToFit}/>\n            <Icon iconName={IconResolveFilled}/>\n            <Icon iconName={IconResolve}/>\n            <Icon iconName={IconReverse}/>\n            <Icon iconName={IconSearchLarge}/>\n            <Icon iconName={IconSearch}/>\n            <Icon iconName={IconSettings}/>\n            <Icon iconName={IconShare}/>\n            <Icon iconName={IconSmiley}/>\n            <Icon iconName={IconSortAlphaAsc}/>\n            <Icon iconName={IconSortAlphaDsc}/>\n            <Icon iconName={IconSortTopBottom}/>\n            <Icon iconName={IconSpacing}/>\n            <Icon iconName={IconSpinner}/>\n            <Icon iconName={IconStarOff}/>\n            <Icon iconName={IconStarOn}/>\n            <Icon iconName={IconStrokeWeight}/>\n            <Icon iconName={IconStyles}/>\n            <Icon iconName={IconSwap}/>\n            <Icon iconName={IconTheme}/>\n            <Icon iconName={IconTidyUpGrid}/>\n            <Icon iconName={IconTidyUpListHorizontal}/>\n            <Icon iconName={IconTidyUpListVertical}/>\n            <Icon iconName={IconTimer}/>\n            <Icon iconName={IconTrash}/>\n            <Icon iconName={IconVerticalPadding}/>\n            <Icon iconName={IconVisible}/>\n            <Icon iconName={IconWarningLarge}/>\n            <Icon iconName={IconWarning}/>\n        </div>\n    </section>\n\n    <section>\n        <h2>Icon Button</h2>\n        <div class=\"flex row\">\n            <IconButton iconName={IconVisible} class=\"mr-xxsmall\"/>\n            <IconButton iconName={IconVisible} selected class=\"mr-xxsmall\"/>\n            <IconButton iconText=\"@\"/>\n        </div>\n    </section>\n\n    <section>\n        <h2>Input</h2>\n        <Input placeholder=\"This is an example with a placeholder\" class=\"mb-xsmall\"/>\n        <Input value=\"This is an example with a value\" class=\"mb-xsmall\"/>\n        <Input value=\"This is an example with a value but also disabled\" disabled class=\"mb-xsmall\"/>\n        <Input value=\"This is an example with a forced border\" borders class=\"mb-xsmall\"/>\n        <Input value=\"This is an invalid example\" class=\"mb-xsmall\" invalid=true/>\n        <Input iconName={IconVisible} value=\"This is an example with a value and an icon\" class=\"mb-xsmall\"/>\n        <Input iconText=\"W\" value=\"This is an example with a value and a text icon, for example a width input\"/>\n    </section>\n\n    <section>\n        <h2>Labels and sections</h2>\n        <Label>Label goes here</Label>\n        <Section>Section header goes here</Section>\n    </section>\n\n    <section>\n        <h2>Onboarding Tip</h2>\n        <OnboardingTip iconName={IconStyles}>To create a style, select a layer and click on the style icon in the inspector panel</OnboardingTip>\n    </section>\n\n    <section>\n        <h2>Select Menu</h2>\n        <div class=\"flex row\">\n        <SelectMenu bind:menuItems={menuItemsExample0} class=\"mb-xsmall\"/>\n        <Button variant=\"secondary\" class=\"mr-xxsmall mb-xsmall\" on:click={populateMenu}>Populate menu</Button>\n        </div>\n\n        <SelectMenu placeholder=\"Please make a selection\" bind:menuItems={menuItemsExample1} class=\"mb-xsmall\"/>\n        <SelectMenu bind:menuItems={menuItemsExample2} class=\"mb-xsmall\"/>\n        <SelectMenu bind:menuItems={menuItemsExample3} showGroupLabels class=\"mb-xsmall\"/>\n        <SelectMenu bind:menuItems={menuItemsExample4} iconName={IconBlend}/>\n    </section>\n\n    <section>\n        <h2>Textarea</h2>\n        <Textarea placeholder=\"Enter some text\" class=\"mb-xsmall\" />\n        <Textarea class=\"mb-xsmall\" value=\"Initial value\" />\n        <Textarea value=\"Text area with a value that is disabled\" disabled />\n    </section>\n\n    <section>\n        <h2>Type</h2>\n        <div class=\"flex row\">\n            <div class=\"p-xsmall mr-xxsmall\" style=\"border: 1px solid var(--black1)\">\n                <div class=\"mb-xxsmall\">\n                    <Type>UI11 &mdash; size: xsmall, weight: normal, inverse: false</Type>\n                    <Type size=\"small\">UI12 &mdash; size: small, weight: normal, inverse: false</Type>\n                    <Type size=\"large\">UI13 &mdash; size: large, weight: normal, inverse: false</Type>\n                    <Type size=\"xlarge\">UI14 &mdash; size: xlarge, weight: normal, inverse: false</Type>\n                </div>\n\n                <div class=\"mb-xxsmall\">\n                    <Type weight=\"medium\">UI1 &mdash; size: xsmall, weight: medium, inverse: false</Type>\n                    <Type size=\"small\" weight=\"medium\">UI2 &mdash; size: small, weight: medium, inverse: false</Type>\n                    <Type size=\"large\" weight=\"medium\">UI3 &mdash; size: large, weight: medium, inverse: false</Type>\n                    <Type size=\"xlarge\" weight=\"medium\">UI4 &mdash; size: xlarge, weight: medium, inverse: false</Type>\n                </div>\n\n                <Type weight=\"bold\">UI1 &mdash; size: xsmall, weight: bold, inverse: false</Type>\n                <Type size=\"small\" weight=\"bold\">UI2 &mdash; size: small, weight: bold, inverse: false</Type>\n                <Type size=\"large\" weight=\"bold\">UI3 &mdash; size: large, weight: bold, inverse: false</Type>\n                <Type size=\"xlarge\" weight=\"bold\">UI4 &mdash; size: xlarge, weight: bold, inverse: false</Type>\n            </div>\n\n            <div class=\"p-xsmall\" style=\"background-color: var(--black)\">\n                <div class=\"mb-xxsmall\">\n                    <Type inverse>UI1 &mdash; size: xsmall, weight: normal, inverse: true</Type>\n                    <Type size=\"small\" inverse>UI2 &mdash; size: small, weight: normal, inverse: true</Type>\n                    <Type size=\"large\" inverse>UI3 &mdash; size: large, weight: normal, inverse: true</Type>\n                    <Type size=\"xlarge\" inverse>UI4 &mdash; size: xlarge, weight: normal, inverse: true</Type>\n                </div>\n\n                <div class=\"mb-xxsmall\">\n                    <Type weight=\"medium\" inverse>UI1 &mdash; size: xsmall, weight: medium, inverse: true</Type>\n                    <Type size=\"small\" weight=\"medium\" inverse>UI2 &mdash; size: small, weight: medium, inverse: true</Type>\n                    <Type size=\"large\" weight=\"medium\" inverse>UI3 &mdash; size: large, weight: medium, inverse: true</Type>\n                    <Type size=\"xlarge\" weight=\"medium\" inverse>UI4 &mdash; size: xlarge, weight: medium, inverse: true</Type>\n                </div>\n\n                <Type weight=\"bold\" inverse>UI1 &mdash; size: xsmall, weight: bold, inverse: true</Type>\n                <Type size=\"small\" weight=\"bold\" inverse>UI2 &mdash; size: small, weight: bold, inverse: true</Type>\n                <Type size=\"large\" weight=\"bold\" inverse>UI3 &mdash; size: large, weight: bold, inverse: true</Type>\n                <Type size=\"xlarge\" weight=\"bold\" inverse>UI4 &mdash; size: xlarge, weight: bold, inverse: true</Type>\n            </div>\n        </div>\n    </section>\n\n</div>\n\n\n<style>\n\n    .wrapper {\n        padding: 24px;\n    }\n\n    h1 {\n        font-size: 24px;\n        padding: 0;\n        margin: 0 0 24px 0;\n    }\n\n    h2 {\n        font-size: 16px;\n        padding: 0;\n        margin: 0 0 16px 0;\n    }\n\n    h3 {\n        font-weight: normal;\n        font-size: 12px;\n        padding: 0;\n        margin: 0 0 8px 0;\n    }\n\n    caption {\n        font-size: 11px;\n        color: var(--black3);\n        display: block;\n        text-align: left;\n    }\n    \n    section {\n        border-bottom: 1px solid var(--black);\n        padding-bottom: var(--size-medium);\n        margin-bottom: var(--size-medium);\n    }\n    section:last-child {\n        border-bottom: 1px solid transparent;\n        margin-bottom: 0px;\n    }\n\n</style>"
  },
  {
    "path": "src/components/Button/index.svelte",
    "content": "<script>\n    import { onMount } from 'svelte';\n\n    export let variant = 'primary';\n    export let disabled = false;\n    export let destructive = false;\n    export { className as class };\n\n    let className = '';\n\n</script>\n\n<button\n    on:click\n    on:submit|preventDefault\n    onclick=\"this.blur();\"\n    {variant}\n    {disabled}\n    class:destructive={destructive}\n    class=\"{variant} {className}\">\n        <slot />\n</button>\n\n<style>\n\n    button {\n        display: flex;\n        align-items: center;\n        border-radius: var(--border-radius-large);\n        color: var(--figma-color-text-onbrand);\n        flex-shrink: 0;\n        font-family: var(--font-stack);\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-medium);\n        letter-spacing: var(--font-letter-spacing-neg-small);\n        line-height: var(--font-line-height);\n        height: var(--size-medium);\n        padding: 0 var(--size-xsmall) 0 var(--size-xsmall);\n        text-decoration: none;\n        outline: none;\n        border: 2px solid transparent;\n        user-select: none;\n    }\n\n    /* Primary styles */\n    .primary {\n        background-color: var(--figma-color-bg-brand);\n        color: var(--figma-color-text-onbrand);\n    }\n    .primary:enabled:active, .primary:enabled:focus {\n        border: 2px solid var(--figma-color-border-brand-strong);\n    }\n    .primary:disabled {\n        background-color: var(--figma-color-bg-disabled);\n    }\n    .primary.destructive {\n        background-color: var(--figma-color-bg-danger);\n    }\n    .primary.destructive:active, .primary.destructive:focus {\n        border: 2px solid var(--figma-color-border-disabled-strong);\n    }\n    .primary.destructive:disabled  {\n        background-color: var(--figma-color-bg-disabled);\n    }\n\n    /* Secondary styles */\n    .secondary {\n        background-color: transparent;\n        border: 1px solid var(--figma-color-border-strong);\n        color: var(--figma-color-text);\n        padding: 0 calc(var(--size-xsmall) + 1px) 0 calc(var(--size-xsmall) + 1px);\n        letter-spacing: var(--font-letter-spacing-pos-small);\n    }\n    .secondary:enabled:active, .secondary:enabled:focus {\n        border: 2px solid var(--figma-color-border-selected);\n        padding: 0 var(--size-xsmall) 0 var(--size-xsmall);\n    }\n    .secondary:disabled {\n        border: 1px solid var(--figma-color-border-disabled-strong);\n        color: var(--figma-color-text-disabled);\n    }\n    .secondary.destructive {\n       /* this should be deprecated */ \n       border-color: var(--figma-color-border-danger-strong);\n       color: var(--figma-color-text-danger);\n    }\n    .secondary.destructive:enabled:active, .secondary.destructive:enabled:focus {\n       border: 2px solid var(--figma-color-border-danger-strong);\n        padding: 0 var(--size-xsmall) 0 var(--size-xsmall);\n    }\n    .secondary.destructive:disabled {\n        opacity: 0.4;\n    }\n\n    /* tertiary styles */\n    .tertiary {\n        border: 1px solid transparent;\n        color: var(--figma-color-text-brand);\n        background: initial;\n        padding: 0;\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var(--font-letter-spacing-pos-small);\n        cursor: pointer;\n    }\n    .tertiary:enabled:focus {\n        text-decoration: underline;\n    }\n    .tertiary:disabled {\n        color: var(--figma-color-text-disabled);\n    }\n    .tertiary.destructive {\n       color: var(--figma-color-text-danger);\n    }\n    .tertiary.destructive:enabled:focus {\n        text-decoration: underline;\n    }\n    .tertiary.destructive:disabled {\n       opacity: 0.4;\n    }\n\n</style>\n"
  },
  {
    "path": "src/components/Checkbox/index.svelte",
    "content": "<script>\n\n    export let checked = false;\n    export let value = '';\n    export let disabled = false;\n    export let tabindex = 0;\n    export { className as class };\n\n    let uniqueId = 'checkbox--' + ((Math.random() * 10000000).toFixed(0)).toString();\n    let className = '';\n    \n</script>\n\n<div class={className}>\n    <input \n        type=\"checkbox\"\n        id={uniqueId}\n        bind:checked={checked}\n        bind:value={value}\n        {disabled} \n        {tabindex}\n        onclick=\"this.blur();\"\n        on:change\n        on:focus\n        on:blur>\n    <label for={uniqueId}>\n        <slot />\n    </label>\n</div>\t\n\n<style>\n\n    div {\n        align-items: center;\n        cursor: default;\n        display: flex;\n        position: relative;\n    }\n\n    input {\n        opacity: 0;\n        width: 10px;\n        height: 10px;\n        margin: 0;\n        padding: 0;\n        flex-shrink: 0;\n    }\n    input:checked + label:before {\n        border: 1px solid var(--figma-color-bg-brand);\n        background-color: var(--figma-color-bg-brand);\n        background-image: url('data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%227%22%20viewBox%3D%220%200%208%207%22%20width%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m1.17647%201.88236%201.88235%201.88236%203.76471-3.76472%201.17647%201.17648-4.94118%204.9412-3.05882-3.05884z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');\n        background-repeat: no-repeat;\n        background-position: 1px 2px;\n    }\n    input:disabled + label {\n        color: var(--figma-color-text-disabled);\n    }\n\n    input:checked:disabled + label:before {\n        border: 1px solid transparent;\n\t\tbackground-color: var(--figma-color-icon-disabled);\n    }\n\n    label {\n        color: var(--figma-color-text);\n        display: flex;\n        font-family: var(--font-stack);\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        line-height: var(--font-line-height);\n        letter-spacing: var(--font-letter-spacing-pos-xsmall);\n        margin-left: -16px;\n        padding: var(--size-xxsmall) var(--size-xsmall) var(--size-xxsmall) var(--size-small);\n        user-select: none;\n    }\n    label:before {\n        border: 1px solid var(--figma-color-icon);\n\t\tborder-radius: var(--border-radius-small);\n        content: '';\n        display: block;\n        width: 10px;\n        height: 10px;\n        margin: 2px 10px 0 -8px;\n        flex-shrink: 0;\n    }\n\n    input:enabled:checked:focus + label:before {\n        border: 1px solid var(--figma-color-bg);\n        box-shadow: 0 0 0 2px var(--figma-color-border-brand-strong);\n        border-radius: var(--border-radius-small);\n    }\n\n    input:enabled:focus + label:before {\n        border: 1px solid var(--figma-color-border-brand-strong);\n        box-shadow: 0 0 0 1px var(--figma-color-border-brand-strong);\n    }\n\n</style>"
  },
  {
    "path": "src/components/Disclosure/index.svelte",
    "content": "<script>\n\n    import { createEventDispatcher, setContext, onMount } from 'svelte';\n    import { writable } from 'svelte/store';\n    import DisclosureItem, { disclosure } from \"./../DisclosureItem/index.svelte\";\n    \n    const dispatch = createEventDispatcher();\n    const selected = writable(null);\n    let className = '';\n    let disclosureWrapper;\n\n    const clickHandler = function(itemId) {\n        let currentVal = getValue(selected);\n        if (currentVal != itemId) {\n            selected.set(itemId);\n            dispatch(\"change\", itemId);\n        } else {\n            selected.set(null);\n            dispatch(\"change\", null);\n        }\n    };\n\n    setContext(disclosure, { clickHandler, selected});\n\n    function getValue(store) {\n        let $val;\n        store.subscribe($ => $val = $)()\n        return $val\n    }\n\n</script>\n\n<ul class={className} bind:this={disclosureWrapper}>\n    <slot></slot>\n</ul>\n\n<style>\n\n    ul {\n        position: relative;\n        width: 100%;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n</style>"
  },
  {
    "path": "src/components/DisclosureItem/index.svelte",
    "content": "<script context=\"module\">\n    export const disclosure = {};\n</script>\n\n<script>\n\n    import { getContext, onMount } from 'svelte';\n    import Icon from './../Icon/index.svelte';\n    import CaretRight from './../../icons/caret-right.svg';\n    import CaretDown from './../../icons/caret-down.svg';\n\n    export let uniqueId = 'disclosureItem--' + ((Math.random() * 10000000).toFixed(0)).toString();\n    export let title = null;\n    export let expanded = false;\n    export let section = false;\n    export let open = false;\n\n    const { clickHandler, selected } = getContext(disclosure);\n\n    $: expanded = $selected === uniqueId;\n    \n    if (open) {\n        selected.set(uniqueId);\n    }\n\n</script>\n\n<li {open} {title} id={uniqueId} class:expanded={expanded}>\n    <div on:click={clickHandler.bind(null, uniqueId)} class=\"header\" class:section={section}>\n        <div class=\"icon\">\n            {#if expanded}\n                <Icon iconName={CaretDown} color=\"black\" />\n            {:else}\n                <Icon iconName={CaretRight} color=\"black\" />\n            {/if}\n        </div>\n        <div class=\"title\">{title}</div>\n    </div>\n    <div class=\"content\">\n        <slot />\n    </div>\n</li>\n\n<style>\n\n    li {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        width: 100%;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        border-bottom: 1px solid var(--figma-color-border);\n    }\n    li:last-child {\n        border-bottom: 1px solid transparent;\n    }\n\n    .header {\n        display: flex;\n        align-items: center;\n        height: var(--size-medium);\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-pos-xsmall);\n        line-height: var(--line-height);\n        color: var(--figma-color-text);\n    }\n    .header:hover .icon {\n        opacity: 0.9;\n    }\n\n    .title {\n        margin-left: -4px;\n        user-select: none;\n    }\n\n    .icon {\n        margin-left: -4px;\n        opacity: 0.3;\n    }\n    .expanded .icon {\n        opacity: 0.8;\n    }\n\n    .section {\n        font-weight: var(--font-weight-bold);\n    }\n\n    .content {\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-pos-xsmall);\n        line-height: var(--line-height);\n        color: var(--figma-color-text);\n        padding: var(--size-xxsmall) var(--size-xxsmall) var(--size-xxsmall) var(--size-small);\n        display: none;\n        user-select: none;\n        pointer-events: none;\n    }\n    \n    .expanded .content {\n        display: block;\n    }\n\n</style>"
  },
  {
    "path": "src/components/Icon/index.svelte",
    "content": "<script>\n    export let iconName = null; //pass svg data into this var by importing an svg in parent\n    export let spin = false;\n    export let iconText = null;\n    export let color = '--figma-color-icon';\n    export { className as class };\n\n    let className = '';\n\n</script>\n\n<div \n    class:spin={spin}\n    {iconText}\n    {iconName} \n    class=\"icon-component {className}\"\n    style=\"color: var({color}); fill: var({color})\"\n    on:click>\n    {#if iconText}\n        {iconText}\n    {:else}\n        {@html iconName}\n    {/if}\n</div>\n\n<style>\n\n    .icon-component {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: default;\n        width: var(--size-medium);\n        height: var(--size-medium);\n        font-family: var(--font-stack);\n        font-size: var(--font-size-xsmall);\n        user-select: none;\n    }\n\n    .spin {\n        animation: rotating 1.0s linear infinite;\n    }\n\n    @keyframes rotating {\n        from {\n            transform: rotate(0deg);\n        }\n        to {\n            transform: rotate(360deg);\n        }\n    }\n\n    :global(.icon-component *) {\n        fill: inherit;\n        color: inherit;\n    }\n\n</style>"
  },
  {
    "path": "src/components/IconButton/index.svelte",
    "content": "<script>\n    import Icon from './../Icon/index.svelte';\n\n    export let iconName = '';\n    export let iconText = null;\n    export let selected = false;\n    export let spin = false;\n    export let tabindex = 0;\n    export { className as class };\n\n    let className = '';\n\n</script>\n\n<div on:click onclick=\"this.blur();\" class:selected={selected} class=\"{className}\" tabindex={tabindex}>\n    {#if selected === true}\n        <Icon {iconName} {iconText} {spin} color=\"--figma-color-icon-onbrand\"/>\n    {:else}\n        <Icon {iconName} {iconText} {spin} color=\"--figma-color-icon\"/>\n    {/if}\n</div>\n\n<style>\n\n    div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        width: var(--size-medium);\n        height: var(--size-medium);\n        border-radius: var(--border-radius-small);\n        border: 2px solid transparent;\n    }\n    div:hover {\n        background: var(--figma-color-bg-hover);\n    }\n    div:active, div:focus {\n        border: 2px solid var(--figma-color-border-brand-strong);\n        outline: none;\n    }\n\n    .selected {\n        background-color: var(--figma-color-bg-selected-strong);\n    }\n    .selected:hover {\n        background-color: var(--figma-color-bg-selected-strong);\n    }\n    .selected:active, .selected:focus {\n        border: 2px solid var(--figma-color-border-selected-strong);\n    }\n\n</style>"
  },
  {
    "path": "src/components/Input/index.svelte",
    "content": "<script>\n\n    import Icon from './../Icon/index.svelte';\n\n    export let id = null;\n    export let value = null;\n    export let name = null;\n    export let iconText = null;\n    export let borders = false;\n    export let disabled = false;\n    export let iconName = null;\n    export let spin = false;\n    export let invalid = false;\n    export let errorMessage = 'Error message';\n    export let placeholder = 'Input something here...';\n    export { className as class };\n\n    let className = '';\n\n</script>\n\n{#if iconName || iconText}\n    <div class=\"input {className}\">\n        <div class=\"icon\">\n            <Icon {iconName} {iconText} {spin} color=\"--figma-color-icon\"/>\n        </div>\n        <input \n            type=\"input\"\n            on:input\n            on:change\n            on:keydown\n            on:focus\n            on:blur\n            bind:value={value}\n            {id}\n            {name}\n            {disabled}\n            {placeholder}\n            {errorMessage}\n            class=\"indent\"\n            class:borders={borders}\n            class:invalid={invalid}\n        >\n        {#if invalid}\n            <div class=\"error\">\n                {errorMessage}\n            </div>\n        {/if}\n    </div>\n{:else}\n    <div class=\"input {className}\">\n        <input \n            type=\"input\"\n            on:input\n            on:change\n            on:keydown\n            on:focus\n            on:blur\n            bind:value={value}\n            {id}\n            {name}\n            {disabled}\n            {placeholder}\n            {errorMessage}\n            class:borders={borders}\n            class:invalid={invalid}\n        >\n        {#if invalid}\n            <div class=\"error\">\n                {errorMessage}\n            </div>\n        {/if}\n    </div>\n{/if}\n<style>\n\n    .input {\n        position: relative;\n        transition: flex 0s 0.2s; \n    }\n\n    input {\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-neg-xsmall);\n        line-height: var(--line-height);\n        position: relative;\n        display: flex;\n        overflow: visible;\n        align-items: center;\n        width: 100%;\n        height: 30px;\n        margin: 1px 0 1px 0;\n        padding: var(--size-xxsmall) var(--size-xxxsmall) var(--size-xxsmall) var(--size-xxsmall);\n        color: var(--figma-color-text);\n        border: 1px solid transparent;\n        border-radius: var(--border-radius-small);\n        outline: none;\n        background-color: var(--figma-color-bg);\n    }\n    input:hover, input:placeholder-shown:hover {\n\t\tcolor: var(--figma-color-text-hover);\n\t\tborder: 1px solid var(--figma-color-border);\n        background-image: none;\n\t}\n\tinput::selection {\n\t\tcolor: var(--figma-color-text);\n\t\tbackground-color: var(--text-highlight); \n\t}\n\tinput::placeholder {\n\t\tcolor: var(--figma-color-text-tertiary);\n\t\tborder: 1px solid transparent;\n\t}\n\tinput:placeholder-shown {\n\t\tcolor: var(--figma-color-text);\n        border: 1px solid var(--figma-color-border);\n        background-image: none;\n\t}\n    input:focus:placeholder-shown {\n        border: 1px solid var(--figma-color-border-selected);\n        outline: 1px solid var(--figma-color-border-selected);\n        outline-offset: -2px;\n    }\n\tinput:disabled:hover {\n\t\tborder: 1px solid transparent;\n\t}\n\tinput:active, input:focus {\n\n\t\tcolor: var(--figma-color-text);\n        border: 1px solid var(--figma-color-border-selected);\n        outline: 1px solid var(--figma-color-border-selected);\n        outline-offset: -2px;\n\t}\n\tinput:disabled {\n\t\tposition: relative;\n\t\tcolor: var(--figma-color-text-disabled);\n        background-image: none;\n\t}\n\tinput:disabled:active {\n        outline: none;\n    }\n\n    .borders {\n        border: 1px solid var(--figma-color-border);\n        background-image: none;\n    }\n    .borders:disabled {\n        border: 1px solid transparent;\n        background-image: none;\n    }\n    .borders:disabled:placeholder-shown {\n        border: 1px solid transparent;\n        background-image: none;\n    }\n    .borders:disabled:placeholder-shown:active {\n        border: 1px solid transparent;\n        outline: none;\n    }\n    .borders:placeholder-shown {\n        border: 1px solid var(--figma-color-border);\n        background-image: none;\n    }\n    \n    .indent {\n        padding-left: 32px;\n    }\n\n    .invalid, .invalid:hover, .invalid:focus {\n        border: 1px solid var(--figma-color-border-danger-strong);\n        outline: 1px solid var(--figma-color-border-danger-strong);\n        outline-offset: -2px;\n    }\n\n    .icon {\n        position: absolute;\n\t\ttop: -1px;\n\t\tleft: 0;\n        width: var(--size-medium);\n        height: var(--size-medium);\n        z-index: 1;\n    }\n\n    .error {\n        color: var(--figma-color-text-danger);\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-neg-xsmall);\n        line-height: var(--line-height);\n        padding-top: var(--size-xxxsmall);\n        padding-left: var(--size-xxsmall);\n    }\n\n</style>"
  },
  {
    "path": "src/components/Label/index.svelte",
    "content": "<script>\n\n    export { className as class };\n    let className = '';\n\n</script>\n\n<div class=\"{className}\">\n    <slot></slot>\n</div>\n\n<style>\n\n    div {\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-pos-xsmall);\n        line-height: var(--line-height);\n        color: var(--figma-color-text-secondary);\n        height: var(--size-medium);\n        width: 100%;\n        display: flex;\n        align-items: center;\n        cursor: default;\n        user-select: none;\n        padding: 0 calc(var(--size-xxsmall) / 2) 0 var(--size-xxsmall);\n    }\n\n</style>"
  },
  {
    "path": "src/components/OnboardingTip/index.svelte",
    "content": "<script>\n    import Icon from './../Icon/index.svelte';\n\n    export let spin = false;\n    export let color = \"black8\";\n    export let iconName = null;\n    export let iconText = null;\n    export { className as class };\n\n    let className = '';\n\n</script>\n\n<div class=\"onboarding-tip {className}\">\n    <div class=\"icon\">\n        <Icon {iconName} {iconText} {color} {spin}/>\n    </div>\n    <p>\n        <slot></slot>\n    </p>\n</div>\n\n<style>\n\n    .onboarding-tip {\n        display: flex;\n        align-items: top;\n        padding: 0 var(--size-xsmall) 0 0;\n    }\n\n    .icon {\n        width: var(--size-medium);\n        height: var(--size-medium);\n        margin-right: var(--size-xxsmall);\n    }\n\n    p   {\n        padding: var(--size-xxsmall) 0 var(--size-xxsmall) 0;\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-pos-xsmall);\n        line-height: var(--line-height);\n        color: var(--figma-color-text);\n        margin: 0;\n    }\n\n</style>"
  },
  {
    "path": "src/components/Radio/index.svelte",
    "content": "<script>\n\n    export let group = null;\n    export let value = null;\n    export let disabled = false;\n    export let tabindex = 0;\n    export { className as class };\n\n    let uniqueId = 'radio--' + ((Math.random() * 10000000).toFixed(0)).toString();\n    let className = '';\n    $: checked = group === value;\n\n</script>\n\n<div class={className}>\n    <input \n        type=\"radio\"\n        {value}\n        {checked}\n        {disabled} \n        {tabindex}\n        id={uniqueId}\n        bind:group={group}\n        onclick=\"this.blur();\"\n        on:change\n        on:focus\n        on:blur>\n    <label for={uniqueId}>\n        <slot />\n    </label>\n</div>\n\n<style>\n\n    div {\n        align-items: center;\n        cursor: default;\n        display: flex;\n        position: relative;\n    }\n\n    input {\n        opacity: 0;\n        width: 10px;\n        height: 10px;\n        margin: 0;\n        padding: 0;\n        flex-shrink: 0;\n    }\n    input:checked + label:after {\n        background-color: var(--figma-color-icon);\n    }\n    input:disabled + label {\n        opacity: 0.3;\n    }\n    input:checked:disabled + label:before {\n        border: 1px solid var(--figma-color-icon);\n    }\n\n    label {\n        color: var(--figma-color-text);\n        display: flex;\n        font-family: var(--font-stack);\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        line-height: var(--font-line-height);\n        letter-spacing: var(--font-letter-spacing-pos-xsmall);\n        margin-left: -16px;\n        padding: var(--size-xxsmall) var(--size-xsmall) var(--size-xxsmall) var(--size-small);\n        user-select: none;\n    }\n    /* checked dot */\n    label:after {\n        content: '';\n        width: 6px;\n        height: 6px;\n        background-color: transparent;\n        border-radius: 50%;\n        position: absolute;\n        top: 13px;\n        left: 13px;\n    }\n\n    /* circle */\n    label:before {\n        border: 1px solid var(--figma-color-icon); \n\t\tborder-radius: var(--border-radius-small);\n        content: '';\n        display: block;\n        width: 10px;\n        height: 10px;\n        margin: 2px 10px 0 -8px;\n        border-radius: 50%;\n        flex-shrink: 0;\n    }\n\n    input:enabled:checked:focus + label:before {\n        border: 1px solid var(--figma-color-border-selected);\n        box-shadow: 0 0 0 1px var(--figma-color-border-selected);\n        border-radius: var(--border-radius-small);\n        border-radius: 50%;\n    }\n\n    input:enabled:focus + label:before {\n        border: 1px solid var(--figma-color-border-selected);\n        box-shadow: 0 0 0 1px var(--figma-color-border-selected);\n    }\n\n</style>\n"
  },
  {
    "path": "src/components/Section/index.svelte",
    "content": "<script>\n\n    let className = '';\n\n</script>\n\n<div>\n    <slot></slot>\n</div>\n\n<style>\n\n    div {\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-bold);\n        letter-spacing: var( --font-letter-spacing-pos-xsmall);\n        line-height: var(--line-height);\n        color: var(--figma-color-text);\n        height: var(--size-medium);\n        width: 100%;\n        display: flex;\n        align-items: center;\n        cursor: default;\n        user-select: none;\n        padding: 0 calc(var(--size-xxsmall) / 2) 0 var(--size-xxsmall);\n    }\n\n</style>"
  },
  {
    "path": "src/components/SelectDivider/index.svelte",
    "content": "<script>\n\n    export let label = false;\n    \n</script>\n\n{#if label===true}\n    <li class=\"label\"><slot/></li>\n{:else}\n    <li class=\"divider\"></li>\n{/if}\n\n<style>\n\n    .label {\n        font-size: var(--font-size-small);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-neg-small);\n        line-height: var(--line-height);\n        display: flex;\n        align-items: center;\n\t\theight: var(--size-small);\n\t\tmargin-top: var(--size-xxsmall);\n\t\tpadding: 0 var(--size-xxsmall) 0 var(--size-medium);\n\t\tcolor: var( --color-text-menu-secondary);\n    }\n    .label:first-child {\n        border-top: none;\n        margin-top: 0;\n    }\n\n    .divider {\n        background-color: var(--color-border-menu);\n        display: block;\n\t\theight: 1px;\n\t\tmargin: 8px 0 7px 0;\n    }\n\n</style>"
  },
  {
    "path": "src/components/SelectItem/index.svelte",
    "content": "<script>\n    \n    export let itemId;\n    export let selected = false;\n    export { className as class };\n\n    let className = '';\n\n</script>\n\n<li {itemId} tabindex={itemId+1} class:highlight={selected} class={className} on:mouseenter on:click>\n    <div class=\"icon\" class:selected={selected}>\n    </div>\n    <div class=\"label\"><slot /></div>\n</li>\n\n<style>\n\n    li {\n        align-items: center;\n        color: var(--color-text-menu-text);\n        cursor: default;\n        display: flex;\n        font-family: var(--font-stack);\n        font-size: var(--font-size-small);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var(--font-letter-spacing-neg-xsmall);\n        line-height: var(--font-line-height);\n        height: var(--size-small);\n        padding: 0px var(--size-xsmall) 0px var(--size-xxsmall);\n        user-select: none;\n        outline: none;\n        transition-property: background-color;\n        transition-duration: 30ms;\n    }\n\n    .label {\n        overflow-x: hidden;\n        white-space: nowrap; \n        text-overflow: ellipsis;\n        pointer-events: none;\n    }\n\n    .highlight, li:hover, li:focus {\n        background-color: var(--figma-color-bg-brand);\n    }\n\n    .icon {\n        width: var(--size-xsmall);\n        height: var(--size-xsmall);\n        margin-right: var(--size-xxsmall);\n        opacity: 0;\n        pointer-events: none;\n        background-image: url('data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m13.2069%205.20724-5.50002%205.49996-.70711.7072-.70711-.7072-3-2.99996%201.41422-1.41421%202.29289%202.29289%204.79293-4.79289z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');\n        background-repeat: no-repeat;\n\t\tbackground-position: center center;\n    }\n    .icon.selected {\n        opacity: 1.0;\n    }\n\n    .blink, .blink:hover {\n        background-color: transparent;\n    }\n\n</style>"
  },
  {
    "path": "src/components/SelectMenu/index.svelte",
    "content": "<script>\n    import { onMount } from 'svelte';\n    import { createEventDispatcher } from 'svelte';\n    import ClickOutside from 'svelte-click-outside';\n    import SelectItem from './../SelectItem/index.svelte';\n    import SelectDivider from './../SelectDivider/index.svelte';\n    import Icon from './../Icon/index.svelte';\n\n    export let iconName = null;\n    export let iconText = null;\n    export let disabled = false;\n    export let macOSBlink = false;\n    export let menuItems = []; //pass data in via this prop to generate menu items\n    export let placeholder = \"Please make a selection.\";\n    export let value = null; //stores the current selection, note, the value will be an object from your array\n    export let showGroupLabels = false; //default prop, true will show option group labels\n    export { className as class };\n\n    const dispatch = createEventDispatcher();\n    let className = '';\n    let groups = checkGroups();\n    let menuWrapper, menuButton, menuList;\n    $:menuItems, updateSelectedAndIds();\n\n    //FUNCTIONS\n\n    //assign id's to the input array\n    onMount(async () => {\n        updateSelectedAndIds();\n    });\n\n    // this function runs everytime the menuItems array os updated\n    // it will auto assign ids and keep the value var updated\n    function updateSelectedAndIds() {\n        if (menuItems) {\n            menuItems.forEach((item, index) => {\n                //update id\n                item['id'] = index;\n                //update selection\n                if (item.selected === true) {\n                    value =  item;\n                }\n            });\n        }\n        //set placeholder\n        if (menuItems.length <= 0) {\n            placeholder = 'There are no items to select';\n            disabled = true;\n        } else {\n            placeholder = 'Please make a selection';\n            disabled = false;\n        }\n    }\n\n    //determine if option groups are present\n    function checkGroups() {\n        let groupCount = 0;\n        if (menuItems) {\n            menuItems.forEach(item => {\n                if (item.group != null) { groupCount++; }\n            });\n            if (groupCount === menuItems.length) {\n                return true;\n            } else {\n                return false;\n            }\n        }\n        return false;\n    }\n\n    //menu highlight function on the selected menu item\n    function removeHighlight(event) {\n        let items = Array.from(event.target.parentNode.children);\n        items.forEach(item => {\n            item.blur();\n            item.classList.remove('highlight');\n        });\n    }\n\n    //run for all menu click events\n    //this opens/closes the menu\n    function menuClick(event) {\n\n        resetMenuProperties();\n\n        if (!event.target) {\n            menuList.classList.add('hidden');\n\n        } else if (event.target.contains(menuButton)) {\n            let topPos = 0;\n\n            if (value) {\n                //toggle menu\n                menuList.classList.remove('hidden');\n\n                let id = value.id;\n                let selectedItem = menuList.querySelector('[itemId=\"'+id+'\"]');\n                selectedItem.focus(); //set focus to the currently selected item\n\n                // calculate distance from top so that we can position the dropdown menu\n                let parentTop = menuList.getBoundingClientRect().top;\n                let itemTop = selectedItem.getBoundingClientRect().top;\n                let topPos = (itemTop - parentTop) - 3;\n                menuList.style.top = -Math.abs(topPos) + 'px';\n\n                //update size and position based on plugin UI\n                resizeAndPosition();\n\n            } else {\n                menuList.classList.remove('hidden');\n                menuList.style.top = '0px';\n                let firstItem = menuList.querySelector('[itemId=\"0\"]');\n                firstItem.focus();\n\n                //update size and position based on plugin UI\n                resizeAndPosition();\n\n            }\n\n        } else if (menuList.contains(event.target)) {\n            //find selected item in array\n            let itemId = parseInt(event.target.getAttribute('itemId')); \n\n            //remove current selection if there is one\n            if (value) {\n                menuItems[value.id].selected = false;\n            }\n            menuItems[itemId].selected = true; //select current item\n            updateSelectedAndIds();\n            dispatch('change', menuItems[itemId]);\n\n            if (macOSBlink) {\n                var x = 4;\n                var interval = 70;\n                \n                //blink the background\n                for (var i = 0; i < x; i++) {\n                    setTimeout(function () {\n                        event.target.classList.toggle('blink');\n                    }, i * interval)\n                }\n                //delay closing the menu\n                setTimeout(function () {\n                    menuList.classList.add('hidden'); //hide the menu\n                }, (interval * x) + 40)\n\n            } else {\n                menuList.classList.add('hidden'); //hide the menu\n                menuButton.classList.remove('selected'); //remove selected state from button\n            }\n        }\n    }\n\n    // this function ensures that the select menu\n    // fits inside the plugin viewport\n    // if its too big, it will resize it and enable a scrollbar\n    // if its off screen it will shift the position\n    function resizeAndPosition() {\n\n        //set the max height of the menu based on plugin/iframe window\n        let maxMenuHeight = window.innerHeight - 16;\n        let menuHeight = menuList.offsetHeight;\n        let menuResized = false;\n\n        if (menuHeight > maxMenuHeight) {\n            menuList.style.height = maxMenuHeight + 'px';\n            menuResized = true;\n        }\n\n        //lets adjust the position of the menu if its cut off from viewport\n        let bounding = menuList.getBoundingClientRect();\n        let parentBounding = menuButton.getBoundingClientRect();\n\n        if (bounding.top < 0) {\n            menuList.style.top = -Math.abs(parentBounding.top - 8) + 'px';\n        }\n        if (bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)) {\n            let minTop = -Math.abs(parentBounding.top - (window.innerHeight - menuHeight - 8));\n            let newTop = -Math.abs(bounding.bottom - window.innerHeight + 16);\n            if (menuResized) {\n                menuList.style.top = -Math.abs(parentBounding.top - 8) + 'px'; \n            } else if (newTop > minTop) {\n                menuList.style.top = minTop + 'px';\n            } else {\n                 menuList.style.top = newTop + 'px';\n            }\n            \n        }\n\n    }\n    function resetMenuProperties() {\n        menuList.style.height = 'auto';\n        menuList.style.top = '0px';\n    }\n\n</script>\n\n<ClickOutside on:clickoutside={menuClick}>\n    <div \n        on:change\n        on:focus\n        on:blur\n        bind:this={menuWrapper}\n        {disabled}\n        {placeholder}\n        {showGroupLabels}\n        {macOSBlink}\n        class=\"wrapper {className}\"\n        >\n\n        <button bind:this={menuButton} on:click={menuClick} disabled={disabled}>\n            {#if iconName}\n                <span class=\"icon\"><Icon iconName={iconName} color=\"black3\"/></span>\n            {:else if iconText}\n                <span class=\"icon\"><Icon iconText={iconText} color=\"black3\"/></span>\n            {/if}\n\n            {#if value}\n                <span class=\"label\">{value.label}</span>\n            {:else}\n                <span class=\"placeholder\">{placeholder}</span>\n            {/if}\n\n            {#if !disabled}\n                <span class=\"caret\">\n                    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.64645 5.35359L0.646454 2.35359L1.35356 1.64648L4.00001 4.29293L6.64645 1.64648L7.35356 2.35359L4.35356 5.35359L4.00001 5.70714L3.64645 5.35359Z\" fill=\"black\"/> </svg>\n                </span>\n            {/if}\n        </button>\n\n        <ul class=\"menu hidden\" bind:this={menuList}>\n        {#if menuItems && menuItems.length > 0}\n            {#each menuItems as item, i}\n                {#if i === 0}\n                    {#if item.group && showGroupLabels}\n                        <SelectDivider label>{item.group}</SelectDivider>\n                    {/if}\n                {:else if i > 0 && item.group && menuItems[i - 1].group != item.group}\n                    {#if showGroupLabels}\n                        <SelectDivider />\n                        <SelectDivider label>{item.group}</SelectDivider>\n                    {:else}\n                        <SelectDivider />\n                    {/if}\n                {/if}\n                <SelectItem on:click={menuClick} on:mouseenter={removeHighlight} itemId={item.id} bind:selected={item.selected}>{item.label}</SelectItem>\n            {/each}\n        {/if}\n        </ul>\n    </div>\n</ClickOutside>\n\n\n<style>\n\n    .wrapper {\n        position: relative;\n    }\n\n    button {\n        display: flex;\n        align-items: center;\n        border: 1px solid transparent;\n        height: 30px;\n        width: 100%;\n        margin: 1px 0 1px 0;\n        padding: 4px var(--size-xxsmall) 0px var(--size-xxsmall);   \n        overflow-y: hidden;\n        border-radius: var(--border-radius-small);\n        background-color: var(--white);\n    }\n    button:hover, button:active {\n        border-color: var(--black1);\n    }\n    button:hover .placeholder {\n        color: var(--black8);\n    }\n    button:hover .caret svg path, button:focus .caret svg path {\n        fill: var(--black8);\n    }\n    button:hover .caret, button:focus .caret {\n        margin-left: auto;\n    }\n    button:focus {\n        border: 1px solid var(--blue);\n        outline: 1px solid var(--blue);\n        outline-offset: -2px;\n        padding-left: calc(var(--size-xxsmall) + 1px);\n    }\n    button:focus .placeholder {\n        color: var(--black8);\n    }\n    button:disabled .label {\n        color: var(--black3);\n    }\n    button:disabled:hover {\n        justify-content: flex-start;\n        border-color: transparent;\n    }\n    button:disabled:hover .placeholder {\n        color: var(--black3);\n    }\n    button:disabled:hover .caret svg path {\n        fill: var(--black3);\n    }\n    button * {\n        pointer-events: none;\n    }\n\n    .label, .placeholder {\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-neg-xsmall);\n        line-height: var(--line-height);\n        color: var(--figma-color-text);\n        margin-right: 6px;\n        margin-top: -3px;\n        white-space: nowrap;\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n    }\n\n    .placeholder {\n        color: var(--figma-color-text-tertiary);\n    }\n\n    .caret {\n        display: block;\n        margin-top: -1px;\n    }\n\n    .caret svg path {\n        fill: var(--figma-color-icon-tertiary);\n    }\n\n    .icon {\n        margin-left: -8px;\n        margin-top: -2px;\n        margin-right: 0;\n    }\n\n    .menu {\n        position: absolute;\n        top:32px;\n        left:0;\n        width: 100%;\n        background-color: var(--color-bg-menu);\n        box-shadow: var(--shadow-hud);\n        padding: var(--size-xxsmall) 0 var(--size-xxsmall) 0;\n        border-radius: var(--border-radius-small);\n        margin: 0;\n        z-index: 50;\n        overflow-x: overlay;\n        overflow-y: auto;\n    }\n    .menu::-webkit-scrollbar{\n        width:12px;\n        background-color:transparent;\n        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n        background-repeat:repeat;\n        background-size:100% auto\n    }\n    .menu::-webkit-scrollbar-track{\n        border:solid 3px transparent;\n        -webkit-box-shadow:inset 0 0 10px 10px transparent;\n        box-shadow:inset 0 0 10px 10px transparent;\n    }\n    .menu::-webkit-scrollbar-thumb{\n        border:solid 3px transparent;\n        border-radius:6px;\n        -webkit-box-shadow:inset 0 0 10px 10px rgba(255,255,255,.4);\n        box-shadow:inset 0 0 10px 10px rgba(255,255,255,.4);\n    }\n        \n\n</style>"
  },
  {
    "path": "src/components/Switch/index.svelte",
    "content": "<script>\n    \n    export let checked = false;\n    export let value = '';\n    export let disabled = false;\n    export let tabindex = 0;\n    export { className as class };\n\n    let uniqueId = 'switch--' + ((Math.random() * 10000000).toFixed(0)).toString();\n    let className = '';\n    \n</script>\n\n<div class={className}>\n    <input \n        type=\"checkbox\" \n        id={uniqueId} \n        bind:checked={checked} \n        bind:value={value} \n        {disabled}  \n        {tabindex}\n        onclick=\"this.blur();\"\n        on:change\n        on:focus\n        on:blur>\n    <label for={uniqueId}>\n        <slot />\n    </label>\n</div>\n\n<style>\n\n    div {\n        align-items: center;\n        cursor: default;\n        display: flex;\n        position: relative;\n    }\n\n    input {\n        opacity: 0;\n    }\n    input:checked + label:before {\n        color: var(--figma-color-icon);\n        background-color: var(--figma-color-bg-brand);\n    }\n\n    input:checked + label:after {\n        transform: translateX(12px);\n    }\n    input:disabled + label {\n        color: var(--figma-color-icon-disabled);\n        opacity: 0.3;\n    }\n    input:checked:disabled + label:before {\n        border: 1px solid var(--figma-color-icon);\n        background-color: var(--figma-color-icon);\n    }\n\n    input:focus + label:before {\n        box-shadow: 0 0 0 2px var(--figma-color-border-selected);\n    }\n\n    label {\n        color: var(--figma-color-text);\n        display: flex;\n        font-family: var(--font-stack);\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var(--font-letter-spacing-pos-xsmall);\n        line-height: var(--font-line-height);\n        margin-left: -16px;\n        padding: var(--size-xxsmall) var(--size-xsmall) var(--size-xxsmall) calc(var(--size-xlarge) - 2px);\n        user-select: none;\n    }\n    /* track */\n    label:before {\n        background-color: var(--figma-color-icon-tertiary);\n        border-radius: 6px;\n        content: '';\n        display: block;\n        height: 12px;\n        left: 8px;\n        position: absolute;\n        top: 10px;\n        transition: background-color 0.2s 0.1s;\n        width: 24px;\n    }\n    /* slider */\n    label:after {\n        background-color: var(--figma-color-icon-onbrand);\n        border-radius: 50%;\n        content: '';\n        display: block;\n        height: 10px;\n        left: 9px;\n        position: absolute;\n        top: 11px;\n        transition: transform 0.2s;\n        width: 10px;\n\n    }\n\n</style>"
  },
  {
    "path": "src/components/Textarea/index.svelte",
    "content": "<script>\n    export let id = null;\n    export let value = null;\n    export let rows = 2;\n    export let name = null;\n    export let disabled = false;\n    export let placeholder = 'Input something here...';\n    export { className as class };\n\n    let className = '';\n\n</script>\n\n<div class=\"textarea {className}\">\n    <textarea \n        type=\"input\"\n        on:input\n        on:change\n        on:keydown\n        on:focus\n        on:blur\n        {id}\n        {name}\n        {rows}\n        {disabled}\n        {placeholder}\n        >{value}</textarea>\n</div>\n\n<style>\n\n    .textarea {\n        position: relative;\n    }\n\n    textarea {\n        font-family: var(--font-stack);\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        letter-spacing: var( --font-letter-spacing-neg-xsmall);\n        line-height: var(--line-height);\n        position: relative;\n        display: flex;\n        overflow: visible;\n        align-items: center;\n        width: 100%;\n        min-height: 62px;\n        margin: 1px 0 1px 0;\n        padding: 7px 4px 9px 7px;\n        color: var(--figma-color-text);\n        border: 1px solid var(--figma-color-border);\n        border-radius: var(--border-radius-small);\n        outline: none;\n        background-color: var(--figma-color-bg);\n        resize: none;\n        overflow-y: auto;\n    }\n    textarea:hover, textarea:placeholder-shown:hover {\n\t\tcolor: var(--figma-color-text);\n\t\tborder: 1px solid var(--figma-color-border);\n        background-image: none;\n\t}\n\ttextarea::selection {\n\t\tcolor: var(--figma-color-text);\n\t\tbackground-color: var(--text-highlight);\n\t}\n\ttextarea::placeholder {\n\t\tcolor: var(--figma-color-text-tertiary);\n\t\tborder: 1px solid transparent;\n\t}\n    textarea:focus:placeholder-shown {\n        border: 1px solid var(--figma-color-border-selected);\n        outline: 1px solid var(--figma-color-border-selected);\n        outline-offset: -2px;\n    }\n\ttextarea:active, textarea:focus {\n\t\tpadding: 7px 4px 9px 7px;\n\n\t\tcolor: var(--figma-color-text);\n        border: 1px solid var(--figma-color-border-selected);\n        outline: 1px solid var(--figma-color-border-selected);\n        outline-offset: -2px;\n\t}\n\ttextarea:disabled, textarea:disabled:hover {\n\t\tposition: relative;\n        color: var(--figma-color-text-disabled);\n        border: 1px solid transparent;\n\t}\n\ttextarea:disabled:active {\n\t\tpadding: 7px 4px 9px 7px;\n        outline: none;\n    }\n\n</style>"
  },
  {
    "path": "src/components/Type/index.svelte",
    "content": "<script>\n    import { onMount } from 'svelte';\n\n    export let size = 'xsmall';\n    export let weight = 'normal';\n    export let inverse = false; //this prop uses different letterspacing values for inversed type (light on dark)\n    export let color = '--figma-color-text';\n    export let inline = false;\n    export { className as class };\n    \n    let className = '';\n    let cssColorVar; \n\n    onMount(async () => {\n        if (color = 'black8' && inverse) {\n            color = 'white';\n        }\n    });\n\n\n    cssColorVar = 'var(' + color + ')';\n\n</script>\n\n<div class=\"type {className} {size} {weight}\" class:inverse={inverse} class:inline={inline} style=\"color: {cssColorVar}\">\n    <slot/>\n</div>\n\n<style>\n\n    .type {\n        font-family: var(--font-stack);\n        font-size: var(--font-size-xsmall);\n        font-weight: var(--font-weight-normal);\n        line-height: var(--font-line-height);\n        letter-spacing: var(--font-letter-spacing-pos-xsmall);\n    }\n\n    /* sizes */\n    .small {\n        font-size: var(--font-size-small);\n        letter-spacing: var(--font-letter-spacing-pos-small);\n    }\n    .large {\n        font-size: var(--font-size-large);\n        line-height: var(--font-line-height-large);\n        letter-spacing: var(--font-letter-spacing-pos-large);\n    }\n    .xlarge {\n        font-size: var(--font-size-xlarge);\n        line-height: var(--font-line-height-large);\n        letter-spacing: var(--font-letter-spacing-pos-xlarge);\n    }\n\n    /* weights */\n    .medium {\n        font-weight: var(--font-weight-medium);\n    }\n    .bold {\n        font-weight: var(--font-weight-bold);\n    }\n\n    /* letter spacing adjustments based pos/neg application */\n    .inverse {\n        letter-spacing: var(--font-letter-spacing-neg-xsmall);\n    }\n    .inverse.small {\n        letter-spacing: var(--font-letter-spacing-neg-small);\n    }\n    .inverse.large {\n        letter-spacing: var(--font-letter-spacing-neg-large);\n    }\n    .inverse.xlarge {\n        letter-spacing: var(--font-letter-spacing-neg-xlarge);\n    }\n\n    .inline {\n        display: inline-block;\n    }\n\n</style>"
  },
  {
    "path": "src/global.css",
    "content": "/* Vars */\n:root {\n\t/* COLORS */\n\n    /*\n    This has been updated to work with Figma's color tokens.\n    The following variables are included for legacy support, \n    where they may be referenced in your own custom components.\n\n    All of these variables (where possible) will now map to \n    Figma's color variables.\n\n    Components part of this package will directly consume\n    Figma's variables to support light and dark mode.\n    */\n\n\n\n    /* Accent */\n    --blue: var(--figma-color-bg-brand); \n    --purple: var(--figma-color-bg-component); \n    --hot-pink: #ff00ff;\n    --green: #1bc47d;\n    --red: var(--figma-color-bg-danger);\n    --yellow: var(--figma-color-bg-warning);\n\n    /* Basic foreground */\n    --black: #000000;\n    --black8: var(--figma-color-text); \n    --black8-opaque: #333333; \n    --black3: var(--figma-color-text-secondary);\n    --black3-opaque: #7A7A7A; \n    --white: var(--figma-color-bg); \n    --white8: var(--figma-color-text-onbrand-secondary); \n    --white4: var(--figma-color-text-onbrand-tertiary); \n\n    /* Basic background */\n    --grey: #f0f0f0; \n    --silver: var(--figma-color-border); \n    --hud: #222222;\n    --toolbar: var(--figma-color-bg-inverse);\n\n    /* Special */\n    --black1: rgba(0, 0, 0, .1); \n    --blue3: rgba(24, 145, 251, .3); \n    --purple4: var(--figma-color-text-component-secondary);\n    --hover-fill: var(--figma-color-bg-hover);\n    --selection-a: var(--figma-color-bg-selected);\n    --selection-b: var(--figma-color-bg-selected-secondary);\n    --white2: var(--figma-color-text-onbrand-tertiary); \n\n    /* SHIM */\n    --color-bg-menu: #1e1e1e; /* to update */\n    --color-text-menu-text: #FFFFFF;\n    --color-text-menu-secondary: rgba(255, 255, 255, 0.7);\n    --color-border-menu: #383838;\n    --text-highlight: rgba(13, 153, 255, 0.4);\n\n\n    /* TYPOGRAPHY */\n    /* Pos = positive applications (black on white) */\n    /* Neg = negative applications (white on black) */\n    \n    /* Font stack */\n    --font-stack: 'Inter', sans-serif;\n\n    /* Font sizes */\n    --font-size-xsmall: 11px;\n    --font-size-small: 12px;\n    --font-size-large: 13px;\n    --font-size-xlarge: 14px;\n\n    /* Font weights */\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-bold: 600;\n\n    /* Lineheight */\n    --font-line-height: 16px; /* Use For xsmall, small font sizes */\n    --font-line-height-large: 24px; /* Use For large, xlarge font sizes */\n    \n    /* Letterspacing */\n    --font-letter-spacing-pos-xsmall: .005em;\n    --font-letter-spacing-neg-xsmall: .01em;\n    --font-letter-spacing-pos-small: 0;\n    --font-letter-spacing-neg-small: .005em;\n    --font-letter-spacing-pos-large: -.0025em;\n    --font-letter-spacing-neg-large: .0025em;\n    --font-letter-spacing-pos-xlarge: -.001em;\n    --font-letter-spacing-neg-xlarge: -.001em;\n\n\n    /* BORDER RADIUS */\n    --border-radius-small: 2px;\n    --border-radius-med: 5px;\n    --border-radius-large: 6px;\n\n\n    /* SHADOWS */\n    --shadow-hud: 0 5px 17px rgba(0, 0, 0, .2), 0 2px 7px rgba(0, 0, 0, .15);\n    --shadow-floating-window: 0 2px 14px rgba(0, 0, 0, .15);\n\n\n    /* SPACING + SIZING */\n    --size-xxxsmall: 4px;\n    --size-xxsmall: 8px;\n    --size-xsmall: 16px;\n    --size-small: 24px;\n    --size-medium: 32px;\n    --size-large: 40px;\n    --size-xlarge: 48px;\n    --size-xxlarge: 64px;\n    --size-huge: 80px;\n}\n\n/* Global styles */\n\n* {\n\tbox-sizing: border-box;\n}\n\nbody {\n    position: relative;\n\tbox-sizing: border-box;\n    font-family: 'Inter', sans-serif;\n    margin: 0;\n    padding: 0;\n}\n\n\n/*  FONTS */\n@font-face {\n\tfont-family: 'Inter';\n\tfont-weight: 400;\n\tfont-style: normal;\n\tsrc: url('https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.7') format('woff2'),\n\turl('https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.7') format('woff');\n}\n\n@font-face {\n\tfont-family: 'Inter';\n\tfont-weight: 500;\n\tfont-style: normal;\n\tsrc: url('https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7') format('woff2'),\n\turl('https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7') format('woff');\n}\n\n@font-face {\n\tfont-family: 'Inter';\n\tfont-weight: 600;\n\tfont-style: normal;\n\tsrc: url('https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7') format('woff2'),\n\turl('https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7') format('woff');\n}\n\n/* Hyperlink styling */\na {\n    color: var(--blue);\n    text-decoration: none;\n    cursor: pointer;\n}\na:hover {\n    color: var(--blue);\n}\na:active {\n    color: var(--blue);\n}\na:focus {\n    text-decoration: underline;\n}\n\n/* UTILITIES */\n\n/* padding */\n.p-xxxsmall { padding: var(--size-xxxsmall); }\n.p-xxsmall { padding: var(--size-xxsmall); }\n.p-xsmall { padding: var(--size-xsmall); }\n.p-small { padding: var(--size-small); }\n.p-medium { padding: var(--size-medium); }\n.p-large { padding: var(--size-large); }\n.p-xlarge { padding: var(--size-xlarge); }\n.p-xxlarge { padding: var(--size-xxlarge); }\n.p-huge { padding: var(--size-huge); }\n\n/* padding top */\n.pt-xxxsmall { padding-top: var(--size-xxxsmall); }\n.pt-xxsmall { padding-top: var(--size-xxsmall); }\n.pt-xsmall { padding-top: var(--size-xsmall); }\n.pt-small { padding-top: var(--size-small); }\n.pt-medium { padding-top: var(--size-medium); }\n.pt-large { padding-top: var(--size-large); }\n.pt-xlarge { padding-top: var(--size-xlarge); }\n.pt-xxlarge { padding-top: var(--size-xxlarge); }\n.pt-huge { padding-top: var(--size-huge); }\n\n/* padding right */\n.pr-xxxsmall { padding-right: var(--size-xxxsmall); }\n.pr-xxsmall { padding-right: var(--size-xxsmall); }\n.pr-xsmall { padding-right: var(--size-xsmall); }\n.pr-small { padding-right: var(--size-small); }\n.pr-medium { padding-right: var(--size-medium); }\n.pr-large { padding-right: var(--size-large); }\n.pr-xlarge { padding-right: var(--size-xlarge); }\n.pr-xxlarge { padding-right: var(--size-xxlarge); }\n.pr-huge { padding-right: var(--size-huge); }\n\n/* padding bottom */\n.pb-xxxsmall { padding-bottom: var(--size-xxxsmall); }\n.pb-xxsmall { padding-bottom: var(--size-xxsmall); }\n.pb-xsmall { padding-bottom: var(--size-xsmall); }\n.pb-small { padding-bottom: var(--size-small); }\n.pb-medium { padding-bottom: var(--size-medium); }\n.pb-large { padding-bottom: var(--size-large); }\n.pb-xlarge { padding-bottom: var(--size-xlarge); }\n.pb-xxlarge { padding-bottom: var(--size-xxlarge); }\n.pb-huge { padding-bottom: var(--size-huge); }\n\n/* padding left */\n.pl-xxxsmall { padding-left: var(--size-xxxsmall); }\n.pl-xxsmall { padding-left: var(--size-xxsmall); }\n.pl-xsmall { padding-left: var(--size-xsmall); }\n.pl-small { padding-left: var(--size-small); }\n.pl-medium { padding-left: var(--size-medium); }\n.pl-large { padding-left: var(--size-large); }\n.pl-xlarge { padding-left: var(--size-xlarge); }\n.pl-xxlarge { padding-left: var(--size-xxlarge); }\n.pl-huge { padding-left: var(--size-huge); }\n\n/* margin */\n.m-xxxsmall { margin: var(--size-xxxsmall); }\n.m-xxsmall { margin: var(--size-xxsmall); }\n.m-xsmall { margin: var(--size-xsmall); }\n.m-small { margin: var(--size-small); }\n.m-medium { margin: var(--size-medium); }\n.m-large { margin: var(--size-large); }\n.m-xlarge { margin: var(--size-xlarge); }\n.m-xxlarge { margin: var(--size-xxlarge); }\n.m-huge { margin: var(--size-huge); }\n\n/* margin top */\n.mt-xxxsmall { margin-top: var(--size-xxxsmall); }\n.mt-xxsmall { margin-top: var(--size-xxsmall); }\n.mt-xsmall { margin-top: var(--size-xsmall); }\n.mt-small { margin-top: var(--size-small); }\n.mt-medium { margin-top: var(--size-medium); }\n.mt-large { margin-top: var(--size-large); }\n.mt-xlarge { margin-top: var(--size-xlarge); }\n.mt-xxlarge { margin-top: var(--size-xxlarge); }\n.mt-huge { margin-top: var(--size-huge); }\n\n/* margin right */\n.mr-xxxsmall { margin-right: var(--size-xxxsmall); }\n.mr-xxsmall { margin-right: var(--size-xxsmall); }\n.mr-xsmall { margin-right: var(--size-xsmall); }\n.mr-small { margin-right: var(--size-small); }\n.mr-medium { margin-right: var(--size-medium); }\n.mr-large { margin-right: var(--size-large); }\n.mr-xlarge { margin-right: var(--size-xlarge); }\n.mr-xxlarge { margin-right: var(--size-xxlarge); }\n.mr-huge { margin-right: var(--size-huge); }\n\n/* margin bottom */\n.mb-xxxsmall { margin-bottom: var(--size-xxxsmall); }\n.mb-xxsmall { margin-bottom: var(--size-xxsmall); }\n.mb-xsmall { margin-bottom: var(--size-xsmall); }\n.mb-small { margin-bottom: var(--size-small); }\n.mb-medium { margin-bottom: var(--size-medium); }\n.mb-large { margin-bottom: var(--size-large); }\n.mb-xlarge { margin-bottom: var(--size-xlarge); }\n.mb-xxlarge { margin-bottom: var(--size-xxlarge); }\n.mb-huge { margin-bottom: var(--size-huge); }\n\n/* margin left */\n.ml-xxxsmall { margin-left: var(--size-xxxsmall); }\n.ml-xxsmall { margin-left: var(--size-xxsmall); }\n.ml-xsmall { margin-left: var(--size-xsmall); }\n.ml-small { margin-left: var(--size-small); }\n.ml-medium { margin-left: var(--size-medium); }\n.ml-large { margin-left: var(--size-large); }\n.ml-xlarge { margin-left: var(--size-xlarge); }\n.ml-xxlarge { margin-left: var(--size-xxlarge); }\n.ml-huge { margin-left: var(--size-huge); }\n\n/* layout utilities */\n.hidden { display: none; }\n.inline { display: inline; }\n.block { display: block; }\n.inline-block { display: inline-block; }\n.flex { display: flex; }\n.inline-flex {display: inline-flex; }\n\n.column { flex-direction: column;}\n.column-reverse { flex-direction: column-reverse; }\n.row { flex-direction: row; }\n.row-reverse { flex-direction: row-reverse; }\n\n.flex-wrap { flex-wrap: wrap; }\n.flex-wrap-reverse { flex-wrap: wrap-reverse; }\n.flex-no-wrap { flex-wrap: nowrap }\n\n.flex-shrink { flex-shrink: 1; }\n.flex-no-shrink { flex-shrink: 0; }\n.flex-grow { flex-grow: 1; }\n.flex-no-grow { flex-grow: 0; }\n  \n\n.justify-content-start { justify-content: flex-start; }\n.justify-content-end { justify-content: flex-end; }\n.justify-content-center { justify-content: center; }\n.justify-content-between { justify-content: space-between; }\n.justify-content-around { justify-content: space-around; }\n\n.align-items-start { align-items: flex-start; }\n.align-items-end { align-items: flex-end; }\n.align-items-center { align-items: center; }\n.align-items-stretch { align-items: stretch; }\n\n.align-content-start { align-content: flex-start; }\n.align-content-end { align-content: flex-end; }\n.align-content-center { align-content: center; }\n.align-content-stretch { align-content: stretch; }\n\n.align-self-start { align-self: flex-start; }\n.align-self-end { align-self: flex-end; }\n.align-self-center { align-self: center; }\n.align-self-stretch { align-self: stretch; }\n"
  },
  {
    "path": "src/index.js",
    "content": "//Global CSS\nimport GlobalCSS from './global.css';\n\n//Components\nimport Button from './components/Button/index.svelte';\nimport Checkbox from './components/Checkbox/index.svelte';\nimport Disclosure from './components/Disclosure/index.svelte';\nimport DisclosureItem from './components/DisclosureItem/index.svelte';\nimport Icon from './components/Icon/index.svelte';\nimport IconButton from './components/IconButton/index.svelte';\nimport Input from './components/Input/index.svelte';\nimport Label from './components/Label/index.svelte';\nimport OnboardingTip from './components/OnboardingTip/index.svelte';\nimport Radio from './components/Radio/index.svelte';\nimport Section from './components/Section/index.svelte';\nimport SelectDivider from './components/SelectDivider/index.svelte';\nimport SelectItem from './components/SelectItem/index.svelte';\nimport SelectMenu from './components/SelectMenu/index.svelte';\nimport Switch from './components/Switch/index.svelte';\nimport Textarea from './components/Textarea/index.svelte';\nimport Type from './components/Type/index.svelte';\n\n//Icons\nimport IconAdjust from './icons/adjust.svg';\nimport IconAlert from './icons/alert.svg';\nimport IconAngle from './icons/angle.svg';\nimport IconArrowLeftRight from './icons/arrow-left-right.svg';\nimport IconUpDown from './icons/arrow-up-down.svg';\nimport IconAutoLayoutHorizontal from './icons/auto-layout-horizontal.svg';\nimport IconAutoLayoutVertical from './icons/auto-layout-vertical.svg';\nimport IconBack from './icons/back.svg';\nimport IconBlendEmpty from './icons/blend-empty.svg';\nimport IconBlend from './icons/blend.svg';\nimport IconBreak from './icons/break.svg';\nimport IconCaretDown from './icons/caret-down.svg';\nimport IconCaretLeft from './icons/caret-left.svg';\nimport IconCaretRight from './icons/caret-right.svg';\nimport IconCaretUp from './icons/caret-up.svg';\nimport IconCheck from './icons/check.svg';\nimport IconClose from './icons/close.svg';\nimport IconComponent from './icons/component.svg';\nimport IconCornerRadius from './icons/corner-radius.svg';\nimport IconCorners from './icons/corners.svg';\nimport IconDistributeHorizontalSpacing from './icons/distribute-horizontal-spacing.svg';\nimport IconDistributeVerticalSpacing from './icons/distribute-vertical-spacing.svg';\nimport IconDraft from './icons/draft.svg';\nimport IconEffects from './icons/effects.svg';\nimport IconEllipses from './icons/ellipses.svg';\nimport IconEyedropper from './icons/eyedropper.svg';\nimport IconForward from './icons/forward.svg';\nimport IconFrame from './icons/frame.svg';\nimport IconGroup from './icons/group.svg';\nimport IconHidden from './icons/hidden.svg';\nimport IconHorizontalPadding from './icons/horizontal-padding.svg';\nimport IconHyperlink from './icons/hyperlink.svg';\nimport IconImage from './icons/image.svg';\nimport IconInstance from './icons/instance.svg';\nimport IconKey from './icons/key.svg';\nimport IconLayoutAlignBottom from './icons/layout-align-bottom.svg';\nimport IconAlignHorizontalCenters from './icons/layout-align-horizontal-centers.svg';\nimport IconAlignLeft from './icons/layout-align-left.svg';\nimport IconAlignRight from './icons/layout-align-right.svg';\nimport IconAlignTop from './icons/layout-align-top.svg';\nimport IconAlignVerticalCenters from './icons/layout-align-vertical-centers.svg';\nimport IconLayoutGridColumns from './icons/layout-grid-columns.svg';\nimport IconLayoutGridRows from './icons/layout-grid-rows.svg';\nimport IconLayoutGridUniform from './icons/layout-grid-uniform.svg';\nimport IconLibrary from './icons/library.svg';\nimport IconLinkBroken from './icons/link-broken.svg';\nimport IconLinkConnected from './icons/link-connected.svg';\nimport IconListDetailed from './icons/list-detailed.svg';\nimport IconListTile from './icons/list-tile.svg';\nimport IconList from './icons/list.svg';\nimport IconLockOff from './icons/lock-off.svg';\nimport IconLockOn from './icons/lock-on.svg';\nimport IconMinus from './icons/minus.svg';\nimport IconPlay from './icons/play.svg';\nimport IconPlus from './icons/plus.svg';\nimport IconRandom from './icons/random.svg';\nimport IconRecent from './icons/recent.svg';\nimport IconResizeToFit from './icons/resize-to-fit.svg';\nimport IconResolveFilled from './icons/resolve-filled.svg';\nimport IconResolve from './icons/resolve.svg';\nimport IconReverse from './icons/reverse.svg';\nimport IconSearchLarge from './icons/search-large.svg';\nimport IconSearch from './icons/search.svg';\nimport IconSettings from './icons/settings.svg';\nimport IconShare from './icons/share.svg';\nimport IconSmiley from './icons/smiley.svg';\nimport IconSortAlphaAsc from './icons/sort-alpha-asc.svg';\nimport IconSortAlphaDsc from './icons/sort-alpha-dsc.svg';\nimport IconSortTopBottom from './icons/sort-top-bottom.svg';\nimport IconSpacing from './icons/spacing.svg';\nimport IconSpinner from './icons/spinner.svg';\nimport IconStarOff from './icons/star-off.svg';\nimport IconStarOn from './icons/star-on.svg';\nimport IconStrokeWeight from './icons/stroke-weight.svg';\nimport IconStyles from './icons/styles.svg';\nimport IconSwap from './icons/swap.svg';\nimport IconTheme from './icons/theme.svg';\nimport IconTidyUpGrid from './icons/tidy-up-grid.svg';\nimport IconTidyUpListHorizontal from './icons/tidy-up-list-horizontal.svg';\nimport IconTidyUpListVertical from './icons/tidy-up-list-vertical.svg';\nimport IconTimer from './icons/timer.svg';\nimport IconTrash from './icons/trash.svg';\nimport IconVerticalPadding from './icons/vertical-padding.svg';\nimport IconVisible from './icons/visible.svg';\nimport IconWarningLarge from './icons/warning-large.svg';\nimport IconWarning from './icons/warning.svg';\n\n\nexport { GlobalCSS, Button, Checkbox, Disclosure, DisclosureItem, Icon, IconButton, Input, Label, OnboardingTip, Radio, Section, SelectDivider, SelectItem, SelectMenu, Switch, Textarea, Type, IconAdjust, IconAlert, IconAngle, IconArrowLeftRight, IconUpDown, IconAutoLayoutHorizontal, IconAutoLayoutVertical, IconBack, IconBlendEmpty, IconBlend, IconBreak, IconCaretDown, IconCaretLeft, IconCaretRight, IconCaretUp, IconCheck, IconClose, IconComponent, IconCornerRadius, IconCorners, IconDistributeHorizontalSpacing, IconDistributeVerticalSpacing, IconDraft, IconEffects, IconEllipses, IconEyedropper, IconForward, IconFrame, IconGroup, IconHidden, IconHorizontalPadding, IconHyperlink, IconImage, IconInstance, IconKey, IconLayoutAlignBottom, IconAlignHorizontalCenters, IconAlignLeft, IconAlignRight, IconAlignTop, IconAlignVerticalCenters, IconLayoutGridColumns, IconLayoutGridRows, IconLayoutGridUniform, IconLibrary, IconLinkBroken, IconLinkConnected, IconListDetailed, IconListTile, IconList, IconLockOff, IconLockOn, IconMinus, IconPlay, IconPlus, IconRandom, IconRecent, IconResizeToFit, IconResolveFilled, IconResolve, IconReverse, IconSearchLarge, IconSearch, IconSettings, IconShare, IconSmiley, IconSortAlphaAsc, IconSortAlphaDsc, IconSortTopBottom, IconSpacing, IconSpinner, IconStarOff, IconStarOn, IconStrokeWeight, IconStyles, IconSwap, IconTheme, IconTidyUpGrid, IconTidyUpListHorizontal, IconTidyUpListVertical, IconTimer, IconTrash, IconVerticalPadding, IconVisible, IconWarningLarge, IconWarning };\n"
  },
  {
    "path": "src/test.js",
    "content": "// for testing\nimport App from './App.svelte';\n\nconst app = new App({\n    target: document.body,\n});\n\nexport default app;\n"
  }
]