@reshape-biotech/design-system 2.7.51 → 2.7.53

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/toast/Toast.stories.svelte

@@ -161,10 +161,10 @@
 </script>
 
 <Story name="Notifications" asChild>
-  <div class="space-y-8">
+  <div class="space-y-10">
     <div class="space-y-4">
       <h5 class="text-lg font-semibold">Basic Notifications</h5>
-      <div class="space-y-2">
+      <div class="flex flex-col gap-3">
         <Toast notification={defaultNotification} />
         <Toast notification={dangerNotification} />
         <Toast notification={warningNotification} />
@@ -173,20 +173,10 @@
       </div>
     </div>
 
-    <div class="space-y-4">
-      <h5 class="text-lg font-semibold">Notifications with Icons</h5>
-      <div class="space-y-2">
-        <Toast notification={defaultIconNotification} />
-        <Toast notification={dangerIconNotification} />
-        <Toast notification={warningIconNotification} />
-        <Toast notification={infoIconNotification} />
-        <Toast notification={successIconNotification} />
-      </div>
-    </div>
 
     <div class="space-y-4">
       <h5 class="text-lg font-semibold">Dismissable Notifications</h5>
-      <div class="space-y-2">
+      <div class="flex flex-col gap-3">
         <Toast notification={defaultDismissableNoIconNotification} />
         <Toast notification={dangerDismissableNoIconNotification} />
         <Toast notification={warningDismissableNoIconNotification} />
@@ -194,16 +184,5 @@
         <Toast notification={successDismissableNoIconNotification} />
       </div>
     </div>
-
-    <div class="space-y-4">
-      <h5 class="text-lg font-semibold">Dismissable Notifications with Icons</h5>
-      <div class="space-y-2">
-        <Toast notification={defaultDismissableNotificationWithIcon} />
-        <Toast notification={dangerDismissableNotificationWithIcon} />
-        <Toast notification={warningDismissableNotificationWithIcon} />
-        <Toast notification={infoDismissableNotificationWithIcon} />
-        <Toast notification={successDismissableNotificationWithIcon} />
-      </div>
-    </div>
   </div>
 </Story>

package/dist/components/toast/Toast.svelte

@@ -1,35 +1,19 @@
 <script lang="ts">
-  import { type Notification, notifications } from '../../notifications';
-  import { tokens } from '../../tokens';
+  import { type Notification, type NotificationType, notifications } from '../../notifications';
   import IconButton from '../icon-button/IconButton.svelte';
   import Icon from '../icons/Icon.svelte';
-  import type { IconColor } from '../icons';
-  import X from 'phosphor-svelte/lib/X';
-
-  // Default notification icons for each type
-  import Info from 'phosphor-svelte/lib/Info';
-  import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
-  import Warning from 'phosphor-svelte/lib/Warning';
-  import XCircle from 'phosphor-svelte/lib/XCircle';
-  import Bell from 'phosphor-svelte/lib/Bell';
+  import { Bell, CheckCircle, Info, Warning, X, XCircle } from 'phosphor-svelte';
 
   let { notification }: { notification: Notification } = $props();
 
-  const color = {
-    danger: tokens.backgroundColor['danger-inverse'],
-    success: tokens.backgroundColor['success-inverse-hover'],
-    warning: tokens.backgroundColor['warning-inverse-hover'],
-    info: tokens.backgroundColor['blue-inverse'],
-    default: tokens.backgroundColor.surface,
+  const toastBgClass: Record<NotificationType, string> = {
+    danger: 'bg-danger-inverse',
+    success: 'bg-success-inverse-hover',
+    warning: 'bg-warning-inverse-hover',
+    info: 'bg-blue-inverse',
+    default: 'bg-surface',
   };
 
-  const textColor: Record<string, IconColor | 'inherit'> = {
-    danger: 'primary-inverse',
-    success: 'primary-inverse',
-    warning: 'primary-inverse',
-    info: 'primary-inverse',
-    default: 'inherit',
-  };
 
   // Default icons for each notification type
   const typeIcons: Record<string, any> = {
@@ -45,37 +29,35 @@
 </script>
 
 <div
-  class="my-1 flex min-h-10 min-w-80 flex-row items-center rounded-lg px-2 shadow-md"
-  style="background: {color[notification.type]}"
-  class:border={notification.type === 'default'}
-  class:border-base-200={notification.type === 'default'}
+  class="my-1 flex min-h-11 min-w-80 flex-row items-center rounded-lg pl-3 pr-2 gap-3 shadow-menu {toastBgClass[notification.type]}"
 >
   {#if iconComponent}
     <Icon
-      color={textColor[notification.type]}
-      size={14}
+      color={notification.type === 'default' ? 'secondary' : 'primary-inverse'}
       icon={iconComponent}
-      class="flex h-6 w-6 items-center justify-center rounded-md {notification.type !== 'default'
+      class="flex items-center justify-center rounded-md {notification.type !== 'default'
         ? 'bg-neutral-inverse-hover'
-        : 'bg-neutral'} p-1 {textColor[notification.type]}"
+        : 'bg-neutral'} p-1"
     />
   {/if}
   <div
-    class="p-2 font-medium"
-    style="display:block"
+    class="font-medium"
     class:text-primary-inverse={notification.type !== 'default'}
+    class:text-primary={notification.type === 'default'}
   >
     {notification.message}
   </div>
   {#if notification.dismissable}
     <div class="grow"></div>
     <div class="py-2">
-      <IconButton rounded={false} size="xs" onclick={() => notifications.dismiss(notification.id)}>
-        <Icon
-          color={textColor[notification.type]}
-          icon={X}
-          class="rounded-md {textColor[notification.type]}"
-        />
+      <IconButton
+        rounded={false}
+        size="xs"
+        variant={notification.type === 'default' ? 'transparent' : 'transparent-inverse'}
+        accessibilityLabel="Dismiss notification"
+        onclick={() => notifications.dismiss(notification.id)}
+      >
+        <Icon icon={X} size={14} />
       </IconButton>
     </div>
   {/if}

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',
+};

package/dist/components/toggle/Toggle.stories.svelte

@@ -1,15 +1,67 @@
-<script module>
+<script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Toggle from './Toggle.svelte';
 
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
     title: 'Components/Toggle',
     component: Toggle,
     tags: ['autodocs'],
+    parameters: {
+      layout: 'fullscreen',
+    },
   });
+
+  const sizes = ['sm', 'md', 'lg'] as const;
 </script>
 
-<Story name="Base" asChild>
-  <Toggle id="toggle-1" />
+<Story name="Overview" asChild>
+  <div class="flex flex-col gap-8 text-sm">
+    <div class="overflow-x-auto">
+      <table class="w-full min-w-[480px] table-fixed border-collapse text-center">
+        <colgroup>
+          <col class="w-24" />
+          <col />
+          <col />
+          <col />
+          <col />
+        </colgroup>
+        <thead>
+          <tr class="border-b border-static text-left text-label font-medium text-secondary">
+            <th class="bg-base p-4 text-left">Size</th>
+            <th class="p-4 text-center">Off</th>
+            <th class="p-4 text-center">On</th>
+            <th class="p-4 text-center">Disabled off</th>
+            <th class="p-4 text-center">Disabled on</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each sizes as size}
+            <tr class="border-b border-static last:border-none">
+              <td class="bg-base p-4 text-left font-mono text-label text-secondary">{size}</td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Toggle id={`toggle-${size}-off`} {size} value={false} />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Toggle id={`toggle-${size}-on`} {size} value={true} />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Toggle id={`toggle-${size}-disabled-off`} {size} value={false} disabled />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Toggle id={`toggle-${size}-disabled-on`} {size} value={true} disabled />
+                </div>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
 </Story>

package/dist/components/toggle/Toggle.stories.svelte.d.ts

@@ -1,19 +1,6 @@
-export default Toggle;
-type Toggle = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 import Toggle from './Toggle.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -25,3 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toggle = InstanceType<typeof Toggle>;
+export default Toggle;

package/dist/components/toggle/Toggle.svelte

@@ -1,69 +1,67 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
   interface Props {
     value?: boolean;
     onclick?: (event?: MouseEvent) => void;
     id: string;
     'data-testid'?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
   }
 
-  let { value = $bindable(false), onclick, id, 'data-testid': testId }: Props = $props();
-</script>
-
-<label class="switch">
-  <input type="checkbox" bind:checked={value} {onclick} {id} data-testid={testId} />
-  <span class="slider round"></span>
-</label>
-
-<style>
-  @reference "../../app.css";
-  /* The switch - the box around the slider */
-  .switch {
-    @apply relative inline-block h-5 w-9;
-  }
-
-  /* Hide default HTML checkbox */
-  .switch input {
-    @apply h-0 w-0 opacity-0;
-  }
+  let { value = $bindable(false), onclick, id, 'data-testid': testId, size = 'md', disabled = false }: Props = $props();
 
-  /* The slider */
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-    @apply bg-neutral-darker;
-  }
+  const sizeStyles = {
+    sm: {
+      track: 'h-4 w-7',
+      thumb: 'h-3 w-3',
+      thumbChecked: 'peer-checked:translate-x-[12px]',
+    },
+    md: {
+      track: 'h-5 w-8.5',
+      thumb: 'h-4 w-4',
+      thumbChecked: 'peer-checked:translate-x-[14px]',
+    },
+    lg: {
+      track: 'h-6 w-10',
+      thumb: 'h-5 w-5',
+      thumbChecked: 'peer-checked:translate-x-[16px]',
+    },
+  } as const;
 
-  .slider:before {
-    content: '';
-    left: 2px;
-    bottom: 2px;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-    @apply absolute h-4 w-4 bg-surface;
-  }
-
-  input:checked + .slider {
-    @apply bg-accent-inverse;
-  }
-
-  input:checked + .slider:before {
-    -webkit-transform: translateX(16px);
-    -ms-transform: translateX(16px);
-    transform: translateX(16px);
-  }
-
-  /* Rounded sliders */
-  .slider.round {
-    @apply rounded-full;
-  }
+  const sz = $derived(sizeStyles[size]);
+</script>
 
-  .slider.round:before {
-    @apply rounded-full;
-  }
-</style>
+<label
+  class={twMerge(
+    'relative inline-block',
+    sz.track,
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+  )}
+>
+  <input type="checkbox" class="peer sr-only" bind:checked={value} {onclick} {id} data-testid={testId} {disabled} />
+  <span
+    aria-hidden="true"
+    class={twMerge(
+      'pointer-events-none absolute inset-0 rounded-full border transition-colors duration-100 ease-linear',
+      disabled &&
+        !value &&
+        'border-interactive bg-transparent',
+      disabled &&
+        value &&
+        'border-transparent bg-neutral-darker',
+      !disabled &&
+        'border-static bg-neutral-darker peer-checked:border-interactive peer-checked:bg-accent-inverse',
+    )}
+  ></span>
+  <span
+    aria-hidden="true"
+    class={twMerge(
+      'pointer-events-none absolute bottom-0.5 left-0.5 rounded-full bg-surface transition-transform duration-100 ease-linear',
+      disabled ? 'bg-neutral-darker shadow-none' : 'bg-surface shadow-button',
+      sz.thumb,
+      sz.thumbChecked,
+    )}
+  ></span>
+</label>

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

@@ -3,6 +3,8 @@ interface Props {
     onclick?: (event?: MouseEvent) => void;
     id: string;
     'data-testid'?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
 }
 declare const Toggle: import("svelte").Component<Props, {}, "value">;
 type Toggle = ReturnType<typeof Toggle>;

package/dist/components/toggle-icon-button/ToggleIconButton.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-icon-button/ToggleIconButton.figma.js

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6564-9274
+// source=src/lib/components/toggle-icon-button/ToggleIconButton.svelte
+// component=ToggleIconButton
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'primary-inverse': 'primary-inverse',
+    'secondary': 'secondary',
+});
+const isActive = instance.getEnum('isActive', {
+    'true': true,
+    'false': false,
+});
+const disabled = instance.getBoolean('disabled');
+const rounded = instance.getBoolean('rounded');
+const loading = instance.getBoolean('loading');
+export default {
+    example: figma.code `
+    <ToggleIconButton
+      variant="${variant}"
+      isActive={${isActive}}
+      ${disabled ? 'disabled' : ''}
+      ${rounded ? 'rounded' : ''}
+      ${loading ? 'loading' : ''}
+    >
+      <Icon icon={Plus} />
+    </ToggleIconButton>
+  `,
+    imports: ["import ToggleIconButton from './ToggleIconButton.svelte'"],
+    id: 'toggle-icon-button',
+};

package/dist/components/tooltip/Tooltip.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/tooltip/Tooltip.figma.js

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=706-14439
+// source=src/lib/components/tooltip/Tooltip.svelte
+// component=Tooltip
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const placement = instance.getEnum('placement', {
+    'top': 'top',
+    'bottom': 'bottom',
+    'left': 'left',
+    'right': 'right',
+});
+const contentText = instance.getString('Content');
+export default {
+    example: figma.code `
+    <Tooltip placement="${placement}">
+      {#snippet trigger()}<button>Hover me</button>{/snippet}
+      {#snippet content()}${contentText || 'Tooltip text'}{/snippet}
+    </Tooltip>
+  `,
+    imports: ["import Tooltip from './Tooltip.svelte'"],
+    id: 'tooltip',
+};

package/dist/safelist-source.d.ts

@@ -1 +1 @@
-export const safelist: "-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]";
+export const safelist: "-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-inverse bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-input-inverse border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-input-inverse border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-input-inverse ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-input-inverse ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-button shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-tertiary-inverse text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-tertiary-inverse text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]";