@reshape-biotech/design-system 2.7.52 → 2.7.53

package/dist/components/progress-circle/ProgressCircle.svelte.d.ts

@@ -1,6 +1,6 @@
 type Props = {
     progress: number;
-    size?: 'md' | 'sm';
+    size?: 'sm' | 'md' | 'lg';
 };
 declare const ProgressCircle: import("svelte").Component<Props, {}, "progress">;
 type ProgressCircle = ReturnType<typeof ProgressCircle>;

package/dist/components/required-status-indicator/RequiredStatusIndicator.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/required-status-indicator/RequiredStatusIndicator.figma.js

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=4822-19833
+// source=src/lib/components/required-status-indicator/RequiredStatusIndicator.svelte
+// component=RequiredStatusIndicator
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const type = instance.getEnum('type', {
+    'complete': 'complete',
+    'incomplete': 'incomplete',
+    'optional': 'optional',
+});
+// complete → currentCount >= requiredCount, incomplete → currentCount < requiredCount
+const currentCount = type === 'complete' ? 3 : 1;
+const requiredCount = 3;
+export default {
+    example: figma.code `<RequiredStatusIndicator currentCount={${currentCount}} requiredCount={${requiredCount}} />`,
+    imports: ["import RequiredStatusIndicator from './RequiredStatusIndicator.svelte'"],
+    id: 'required-status-indicator',
+};

package/dist/components/segmented-control-buttons/SegmentedControlButtons.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/segmented-control-buttons/SegmentedControlButtons.figma.js

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=4301-16461
+// source=src/lib/components/segmented-control-buttons/SegmentedControlButtons.svelte
+// component=SegmentedControlButtons
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'primary': 'primary',
+    'secondary': 'secondary',
+});
+const size = instance.getEnum('size', {
+    'lg': 'lg',
+    'md': 'md',
+    'sm': 'sm',
+});
+export default {
+    example: figma.code `
+    <SegmentedControlButtons variant="${variant}" size="${size}">
+      {#snippet children({ ControlButton })}
+        <ControlButton active>Option 1</ControlButton>
+        <ControlButton>Option 2</ControlButton>
+        <ControlButton>Option 3</ControlButton>
+      {/snippet}
+    </SegmentedControlButtons>
+  `,
+    imports: ["import SegmentedControlButtons from './SegmentedControlButtons.svelte'"],
+    id: 'segmented-control-buttons',
+};

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -65,6 +65,16 @@
     {/snippet}
   </SegmentedControlButtons>
 </Story>
+<Story name="Small" asChild>
+  <SegmentedControlButtons size="sm" class="w-[350px]">
+    {#snippet children({ ControlButton })}
+      <ControlButton active>Low</ControlButton>
+      <ControlButton>Medium</ControlButton>
+      <ControlButton>High</ControlButton>
+    {/snippet}
+  </SegmentedControlButtons>
+</Story>
+
 <Story name="Secondary" asChild>
   <SegmentedControlButtons class="w-[350px]">
     {#snippet children({ ControlButton })}
@@ -92,3 +102,22 @@
     {/snippet}
   </SegmentedControlButtons>
 </Story>
+
+<Story name="Variant Prop" asChild>
+  <div class="flex flex-col gap-4">
+    <SegmentedControlButtons variant="primary" class="w-[350px]">
+      {#snippet children({ ControlButton, variant })}
+        <ControlButton active color={variant}>Primary active</ControlButton>
+        <ControlButton color={variant}>Primary</ControlButton>
+        <ControlButton color={variant}>Primary</ControlButton>
+      {/snippet}
+    </SegmentedControlButtons>
+    <SegmentedControlButtons variant="secondary" class="w-[350px]">
+      {#snippet children({ ControlButton, variant })}
+        <ControlButton active color={variant}>Secondary active</ControlButton>
+        <ControlButton color={variant}>Secondary</ControlButton>
+        <ControlButton color={variant}>Secondary</ControlButton>
+      {/snippet}
+    </SegmentedControlButtons>
+  </div>
+</Story>

package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte

@@ -5,18 +5,20 @@
 
   interface Props {
     class?: string;
-    size?: 'md' | 'lg';
-    children?: Snippet<[{ ControlButton: typeof ControlButton }]>;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'primary' | 'secondary';
+    children?: Snippet<[{ ControlButton: typeof ControlButton; variant: 'primary' | 'secondary' }]>;
   }
 
-  let { class: className = '', size = 'md', children }: Props = $props();
+  let { class: className = '', size = 'md', variant = 'primary', children }: Props = $props();
 
   const sizes = {
-    md: 'h-10 ',
+    sm: 'h-8',
+    md: 'h-10',
     lg: 'h-16 [&>*>.control-button]:flex-col',
   };
 </script>
 
-<div class={twMerge('join flex gap-1 rounded-lg bg-neutral p-1', sizes[size], size, className)}>
-  {@render children?.({ ControlButton })}
+<div class={twMerge('join flex gap-1 rounded-lg bg-neutral p-1', sizes[size], className)}>
+  {@render children?.({ ControlButton, variant })}
 </div>

package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte.d.ts

@@ -2,9 +2,11 @@ import type { Snippet } from 'svelte';
 import ControlButton from './ControlButton.svelte';
 interface Props {
     class?: string;
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'primary' | 'secondary';
     children?: Snippet<[{
         ControlButton: typeof ControlButton;
+        variant: 'primary' | 'secondary';
     }]>;
 }
 declare const SegmentedControlButtons: import("svelte").Component<Props, {}, "">;

package/dist/components/select/Select.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/select/Select.figma.js

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-3298
+// source=src/lib/components/select/index.ts
+// component=Select
+import figma from 'figma';
+export default {
+    example: figma.code `
+    <Select.Root>
+      <Select.Trigger placeholder="Select an option..." />
+      <Select.Content>
+        <Select.Item value="option1">Option 1</Select.Item>
+        <Select.Item value="option2">Option 2</Select.Item>
+      </Select.Content>
+    </Select.Root>
+  `,
+    imports: ["import * as Select from './'"],
+    id: 'select',
+};

package/dist/components/skeleton-loader/SkeletonLoader.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/skeleton-loader/SkeletonLoader.figma.js

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6531-8046
+// source=src/lib/components/skeleton-loader/SkeletonLoader.svelte
+// component=SkeletonLoader
+import figma from 'figma';
+export default {
+    example: figma.code `
+    <SkeletonLoader>
+      {#snippet children({ Skeleton })}
+        <Skeleton class="h-4 w-full rounded" />
+        <Skeleton class="h-4 w-3/4 rounded" />
+      {/snippet}
+    </SkeletonLoader>
+  `,
+    imports: ["import SkeletonLoader from './SkeletonLoader.svelte'"],
+    id: 'skeleton-loader',
+};

package/dist/components/slider/Slider.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/slider/Slider.figma.js

@@ -0,0 +1,12 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=1264-70678
+// source=src/lib/components/slider/Slider.svelte
+// component=Slider
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const disabled = instance.getBoolean('disabled');
+const showSteps = instance.getBoolean('Steps');
+export default {
+    example: figma.code `<Slider value={50} max={100} ${disabled ? 'disabled' : ''} ${showSteps ? 'showSteps' : ''} />`,
+    imports: ["import Slider from './Slider.svelte'"],
+    id: 'slider',
+};

package/dist/components/spinner/Spinner.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/spinner/Spinner.figma.js

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6531-8044
+// source=src/lib/components/spinner/Spinner.svelte
+// component=Spinner
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const inverted = instance.getBoolean('inverted');
+export default {
+    example: figma.code `<Spinner ${inverted ? 'inverted' : ''} />`,
+    imports: ["import Spinner from './Spinner.svelte'"],
+    id: 'spinner',
+};

package/dist/components/stat-card/StatCard.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/stat-card/StatCard.figma.js

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=2120-12015
+// source=src/lib/components/stat-card/StatCard.svelte
+// component=StatCard
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'primary': 'primary',
+    'secondary': 'secondary',
+});
+const size = instance.getEnum('size', {
+    'md': 'md',
+    'sm': 'sm',
+});
+export default {
+    example: figma.code `<StatCard title="Metric" value={42} variant="${variant}" size="${size}" />`,
+    imports: ["import StatCard from './StatCard.svelte'"],
+    id: 'stat-card',
+};

package/dist/components/status-badge/StatusBadge.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/status-badge/StatusBadge.figma.js

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=627-8319
+// source=src/lib/components/status-badge/StatusBadge.svelte
+// component=StatusBadge
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const type = instance.getEnum('type', {
+    'success': 'success',
+    'error': 'error',
+    'neutral': 'neutral',
+    'progress': 'progress',
+    'warning': 'warning',
+});
+const size = instance.getEnum('size', {
+    'sm': 'sm',
+    'md': 'md',
+});
+const iconOnly = instance.getEnum('iconOnly', {
+    'true': true,
+    'false': false,
+});
+export default {
+    example: figma.code `
+    <StatusBadge type="${type}" size="${size}" ${iconOnly ? 'iconOnly' : ''}>
+      {#snippet content()}Status{/snippet}
+    </StatusBadge>
+  `,
+    imports: ["import StatusBadge from './StatusBadge.svelte'"],
+    id: 'status-badge',
+};

package/dist/components/stepper/Stepper.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/stepper/Stepper.figma.js

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=5050-66266
+// source=src/lib/components/stepper/index.ts
+// component=Stepper
+import figma from 'figma';
+export default {
+    example: figma.code `
+    <Stepper.Root currentStep="2">
+      <Stepper.Step stepNumber="1" state="completed">Step 1</Stepper.Step>
+      <Stepper.Step stepNumber="2" state="active">Step 2</Stepper.Step>
+      <Stepper.Step stepNumber="3" state="future">Step 3</Stepper.Step>
+    </Stepper.Root>
+  `,
+    imports: ["import * as Stepper from './'"],
+    id: 'stepper',
+};

package/dist/components/table/Table.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/table/Table.figma.js

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=20-5441
+// source=src/lib/components/table/Table.svelte
+// component=Table
+import figma from 'figma';
+export default {
+    example: figma.code `
+    <Table>
+      {#snippet children({ THead, TBody, Tr, Th, Td })}
+        <THead>
+          <Tr>
+            <Th>Column A</Th>
+            <Th>Column B</Th>
+          </Tr>
+        </THead>
+        <TBody>
+          <Tr>
+            <Td>Cell A1</Td>
+            <Td>Cell B1</Td>
+          </Tr>
+        </TBody>
+      {/snippet}
+    </Table>
+  `,
+    imports: ["import { Table } from './'"],
+    id: 'table',
+};

package/dist/components/tabs/Tabs.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/tabs/Tabs.figma.js

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-3473
+// source=src/lib/components/tabs/Tabs.svelte
+// component=TabsRoot
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const active = instance.getEnum('state', {
+    'active': true,
+    'default': false,
+    'hover': false,
+});
+export default {
+    example: figma.code `
+    <TabsRoot>
+      {#snippet children({ Tabs, Tab, Content })}
+        <Tabs>
+          <Tab ${active ? 'active' : ''}>Tab Label</Tab>
+        </Tabs>
+        <Content>Tab content</Content>
+      {/snippet}
+    </TabsRoot>
+  `,
+    imports: ["import TabsRoot from './Tabs.svelte'"],
+    id: 'tabs',
+};

package/dist/components/tabs/Tabs.stories.svelte

@@ -20,6 +20,7 @@
   let activeTabSecondary = 'tab-1';
   let activeTabTransparent = 'tab-1';
   let activeTabSizes = 'tab-1';
+  let activeTabSquare = 'tab-1';
 </script>
 
 <Story name="Primary Variant" asChild>
@@ -158,3 +159,25 @@
     </div>
   </div>
 </Story>
+
+<Story name="Square Style" asChild>
+  <Tabs>
+    {#snippet children({ Tabs, Tab, Content })}
+      <Tabs variant="primary" style="square">
+        <Tab active={activeTabSquare === 'tab-1'} onclick={() => (activeTabSquare = 'tab-1')}
+          >Tab 1</Tab
+        >
+        <Tab active={activeTabSquare === 'tab-2'} onclick={() => (activeTabSquare = 'tab-2')}
+          >Tab 2</Tab
+        >
+        <Tab active={activeTabSquare === 'tab-3'} onclick={() => (activeTabSquare = 'tab-3')}
+          >Tab 3</Tab
+        >
+      </Tabs>
+
+      <Content show={activeTabSquare === 'tab-1'}>Showing square tab 1 content</Content>
+      <Content show={activeTabSquare === 'tab-2'}>Showing square tab 2 content</Content>
+      <Content show={activeTabSquare === 'tab-3'}>Showing square tab 3 content</Content>
+    {/snippet}
+  </Tabs>
+</Story>

package/dist/components/tabs/components/Tabs.svelte

@@ -4,12 +4,14 @@
 
   type Size = 'sm' | 'md' | 'lg';
   type Variant = 'primary' | 'secondary' | 'transparent';
+  type Style = 'rounded' | 'square';
 
   interface Props {
     class?: string;
     size?: Size;
     variant?: Variant;
     fullWidth?: boolean;
+    style?: Style;
     children?: Snippet<[{ variant: Variant }]>;
   }
 
@@ -18,6 +20,7 @@
     size = 'lg',
     variant = 'primary',
     fullWidth = true,
+    style = 'rounded',
     children,
   }: Props = $props();
 
@@ -26,11 +29,13 @@
     md: 'h-10 p-1 gap-1 rounded-[10px] [&>*]:rounded-md!',
     lg: 'h-12 p-1 gap-1 rounded-xl',
   };
+
+  const squareClass = $derived(style === 'square' ? 'rounded-none! [&>*]:rounded-none!' : '');
 </script>
 
 <div
   role="tablist"
-  class={twMerge('flex', sizes[size], variant, fullWidth ? 'w-full [&>*]:flex-1' : 'w-fit [&>*]:flex-none', className)}
+  class={twMerge('flex', sizes[size], variant, fullWidth ? 'w-full [&>*]:flex-1' : 'w-fit [&>*]:flex-none', squareClass, className)}
 >
   {@render children?.({ variant })}
 </div>

package/dist/components/tabs/components/Tabs.svelte.d.ts

@@ -1,11 +1,13 @@
 import type { Snippet } from 'svelte';
 type Size = 'sm' | 'md' | 'lg';
 type Variant = 'primary' | 'secondary' | 'transparent';
+type Style = 'rounded' | 'square';
 interface Props {
     class?: string;
     size?: Size;
     variant?: Variant;
     fullWidth?: boolean;
+    style?: Style;
     children?: Snippet<[{
         variant: Variant;
     }]>;

package/dist/components/tag/Tag.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/tag/Tag.figma.js

@@ -0,0 +1,33 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-3311
+// source=src/lib/components/tag/Tag.svelte
+// component=Tag
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'default': 'default',
+    'outline': 'outline',
+    'transparent': 'transparent',
+});
+const color = instance.getEnum('color', {
+    'blue': 'blue',
+    'lilac': 'lilac',
+    'lime': 'lime',
+    'orange': 'orange',
+    'pear': 'pear',
+    'pink': 'pink',
+    'sky': 'sky',
+    'default': 'default',
+});
+const size = instance.getEnum('size', {
+    'xs': 'xs',
+    'sm': 'sm',
+    'md': 'md',
+});
+const text = instance.getString('Text');
+// When color is set, use color as variant; otherwise use the style variant
+const resolvedVariant = color !== 'default' ? color : variant;
+export default {
+    example: figma.code `<Tag variant="${resolvedVariant}" size="${size}">${text || 'Tag'}</Tag>`,
+    imports: ["import Tag from './Tag.svelte'"],
+    id: 'tag',
+};

package/dist/components/tag/Tag.svelte

@@ -2,7 +2,6 @@
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import { Tooltip } from '../tooltip/';
-
   interface Props {
     children: Snippet;
     variant?:

package/dist/components/textarea/Textarea.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/textarea/Textarea.figma.js

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-3173
+// source=src/lib/components/textarea/Textarea.svelte
+// component=Textarea
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const size = instance.getEnum('size', {
+    'xs': 'xs',
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+});
+const placeholder = instance.getString('placeholder');
+export default {
+    example: figma.code `<Textarea size="${size}" placeholder="${placeholder || 'Enter text...'}" />`,
+    imports: ["import Textarea from './Textarea.svelte'"],
+    id: 'textarea',
+};

package/dist/components/toast/Toast.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/toast/Toast.figma.js

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=2086-4597
+// source=src/lib/components/toast/Toast.svelte
+// component=Toast
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const type = instance.getEnum('type', {
+    'neutral': 'default',
+    'danger': 'danger',
+    'info': 'info',
+    'success': 'success',
+    'warning': 'warning',
+});
+export default {
+    example: figma.code `<Toast notification={{ id: '1', type: "${type}", message: 'Notification message', dismissable: true }} />`,
+    imports: ["import Toast from './Toast.svelte'"],
+    id: 'toast',
+};

package/dist/components/toggle/Toggle.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/toggle/Toggle.figma.js

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=389-7679
+// source=src/lib/components/toggle/Toggle.svelte
+// component=Toggle
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const size = instance.getEnum('size', {
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+});
+const disabled = instance.getEnum('Disabled', {
+    'true': true,
+    'false': false,
+});
+const checked = instance.getEnum('Checked', {
+    'true': true,
+    'false': false,
+});
+export default {
+    example: figma.code `<Toggle id="toggle-id" size="${size}" value={${checked}} ${disabled ? 'disabled' : ''} />`,
+    imports: ["import Toggle from './Toggle.svelte'"],
+    id: 'toggle',
+};