@reshape-biotech/design-system 2.7.52 → 2.7.53

package/dist/components/empty-content/EmptyContent.svelte

@@ -4,13 +4,22 @@
   type Props = {
     icon: Snippet;
     children: Snippet;
+    size?: 'sm' | 'md';
   };
 
-  const { icon, children }: Props = $props();
+  const { icon, children, size = 'md' }: Props = $props();
 </script>
 
 <div class="flex w-full justify-center">
-  <div class="flex max-w-96 flex-col items-center justify-center gap-5 py-5 text-tertiary">
+  <div
+    class="flex flex-col items-center justify-center text-tertiary"
+    class:max-w-96={size === 'md'}
+    class:max-w-64={size === 'sm'}
+    class:gap-5={size === 'md'}
+    class:gap-3={size === 'sm'}
+    class:py-5={size === 'md'}
+    class:py-3={size === 'sm'}
+  >
     {@render icon()}
     <div class="flex w-full flex-col items-center justify-center gap-2 text-center">
       {@render children()}

package/dist/components/empty-content/EmptyContent.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 type Props = {
     icon: Snippet;
     children: Snippet;
+    size?: 'sm' | 'md';
 };
 declare const EmptyContent: import("svelte").Component<Props, {}, "">;
 type EmptyContent = ReturnType<typeof EmptyContent>;

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

@@ -0,0 +1,42 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6404-29645
+// source=src/lib/components/icon-button/IconButton.svelte
+// component=IconButton
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'primary': 'primary',
+    'secondary': 'secondary',
+    'outline': 'outline',
+    'transparent': 'transparent',
+    'danger': 'danger',
+    'secondary-inverse': 'secondary-inverse',
+    'transparent-inverse': 'transparent-inverse',
+});
+const size = instance.getEnum('size', {
+    'xs': 'xs',
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+});
+const rounded = instance.getEnum('rounded', {
+    'true': true,
+    'false': false,
+});
+const disabled = instance.getEnum('disabled', {
+    'true': true,
+    'false': false,
+});
+const iconInstance = instance.getInstanceSwap('Icon');
+let iconSnippet;
+if (iconInstance && iconInstance.type === 'INSTANCE' && iconInstance.hasCodeConnect()) {
+    iconSnippet = iconInstance.executeTemplate().example;
+}
+export default {
+    example: figma.code `
+    <IconButton variant="${variant}" size="${size}" ${rounded ? 'rounded' : 'rounded={false}'} ${disabled ? 'disabled' : ''}>
+      ${iconSnippet ? figma.code `${iconSnippet}` : '<Icon icon={Plus} />'}
+    </IconButton>
+  `,
+    imports: ["import IconButton from './IconButton.svelte'"],
+    id: 'icon-button',
+};

package/dist/components/icons/Icon.stories.svelte

@@ -7,12 +7,6 @@
     component: Icon,
     title: 'Components/Icons',
     tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%5BWIP%5D--Reshape-Design-System%3A-V1.1?node-id=20-30983&t=qQZtfqCN4P2k2UYf-0',
-      },
-    },
   });
 </script>
 

package/dist/components/input/Input.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/input/Input.figma.js

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

package/dist/components/input/Input.stories.svelte

@@ -12,12 +12,6 @@
     component: Input,
     title: 'Components/Input',
     tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3169&t=sCuBI8dX6K6NjNR6-0',
-      },
-    },
   });
 
   let value = '';

package/dist/components/label/Label.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/label/Label.figma.js

@@ -0,0 +1,12 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6531-8038
+// source=src/lib/components/label/Label.svelte
+// component=Label
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const required = instance.getBoolean('required');
+const labelText = instance.findText('Label');
+export default {
+    example: figma.code `<Label forId="field-id" text="${labelText ? labelText.textContent : 'Label'}" ${required ? 'required' : ''} />`,
+    imports: ["import Label from './Label.svelte'"],
+    id: 'label',
+};

package/dist/components/legend/Legend.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/legend/Legend.figma.js

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=5754-37765
+// source=src/lib/components/legend/index.ts
+// component=Legend
+import figma from 'figma';
+export default {
+    example: figma.code `
+    <Legend.Root>
+      <Legend.Item color="#4F46E5" name="Series A" />
+      <Legend.Item color="#10B981" name="Series B" />
+    </Legend.Root>
+  `,
+    imports: ["import * as Legend from './'"],
+    id: 'legend',
+};

package/dist/components/list/List.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/list/List.figma.js

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6533-8047
+// source=src/lib/components/list/List.svelte
+// component=List
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'default': 'default',
+    'compact': 'compact',
+});
+export default {
+    example: figma.code `
+    <List
+      items={['Item 1', 'Item 2', 'Item 3']}
+      variant="${variant}"
+    >
+      {#snippet item(value)}
+        {value}
+      {/snippet}
+    </List>
+  `,
+    imports: ["import List from './List.svelte'"],
+    id: 'list',
+};

package/dist/components/logo/Logo.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/logo/Logo.figma.js

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=433-11089
+// source=src/lib/components/logo/Logo.svelte
+// component=Logo
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'horizontal': 'horizontal',
+    'logomark': 'logomark',
+});
+const size = instance.getEnum('size', {
+    'xs': 'xs',
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+    'xl': 'xl',
+});
+export default {
+    example: figma.code `<Logo variant="${variant}" size="${size}" />`,
+    imports: ["import Logo from './Logo.svelte'"],
+    id: 'logo',
+};

package/dist/components/logo/Logo.stories.svelte

@@ -19,3 +19,20 @@
     <Logo size="xl" />
   </div>
 </Story>
+
+<Story name="Horizontal" asChild>
+  <div class="flex flex-col gap-4">
+    <Logo variant="horizontal" size="xs" />
+    <Logo variant="horizontal" size="sm" />
+    <Logo variant="horizontal" size="md" />
+    <Logo variant="horizontal" size="lg" />
+    <Logo variant="horizontal" size="xl" />
+  </div>
+</Story>
+
+<Story name="White" asChild>
+  <div class="flex flex-col gap-4 bg-gray-900 p-4">
+    <Logo color="white" />
+    <Logo variant="horizontal" color="white" />
+  </div>
+</Story>

package/dist/components/logo/Logo.svelte

@@ -2,9 +2,10 @@
   type Props = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: 'default' | 'white';
+    variant?: 'logomark' | 'horizontal';
   };
 
-  let { size = 'md', color = 'default' }: Props = $props();
+  let { size = 'md', color = 'default', variant = 'logomark' }: Props = $props();
 
   const colorMap = {
     default: '#ff7a00',
@@ -18,22 +19,47 @@
     lg: 32,
     xl: 40,
   };
+
+  const textSizeMap = {
+    xs: 11,
+    sm: 14,
+    md: 17,
+    lg: 22,
+    xl: 28,
+  };
 </script>
 
-<svg
-  width={sizeMap[size]}
-  height={sizeMap[size]}
-  viewBox={`0 0 24 24`}
-  fill={colorMap[color]}
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
-  />
-  <path
-    d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
-  />
-  <path
-    d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
-  />
-</svg>
+{#snippet logomark()}
+  <svg
+    width={sizeMap[size]}
+    height={sizeMap[size]}
+    viewBox="0 0 24 24"
+    fill={colorMap[color]}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
+    />
+    <path
+      d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
+    />
+    <path
+      d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
+    />
+  </svg>
+{/snippet}
+
+{#if variant === 'horizontal'}
+  <div class="flex items-center gap-2">
+    {@render logomark()}
+    <span
+      style:color={colorMap[color]}
+      style:font-size="{textSizeMap[size]}px"
+      style:font-weight="600"
+      style:letter-spacing="-0.02em"
+      style:line-height="1"
+    >reshape</span>
+  </div>
+{:else}
+  {@render logomark()}
+{/if}

package/dist/components/logo/Logo.svelte.d.ts

@@ -1,6 +1,7 @@
 type Props = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: 'default' | 'white';
+    variant?: 'logomark' | 'horizontal';
 };
 declare const Logo: import("svelte").Component<Props, {}, "">;
 type Logo = ReturnType<typeof Logo>;

package/dist/components/markdown/Markdown.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/markdown/Markdown.figma.js

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6533-8072
+// source=src/lib/components/markdown/Markdown.svelte
+// component=Markdown
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'light': 'light',
+    'dark': 'dark',
+});
+export default {
+    example: figma.code `<Markdown markdown="# Hello\n\nThis is **markdown** content." variant="${variant}" />`,
+    imports: ["import Markdown from './Markdown.svelte'"],
+    id: 'markdown',
+};

package/dist/components/modal/Modal.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/modal/Modal.figma.js

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=4320-13114
+// source=src/lib/components/modal/index.ts
+// component=Modal
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'default': 'default',
+    'alert': 'alert',
+});
+export default {
+    example: figma.code `
+    <Modal.Root>
+      <Modal.Trigger>Open Modal</Modal.Trigger>
+      <Modal.Portal>
+        <Modal.Overlay />
+        <Modal.Content>
+          <Modal.Title>Modal title</Modal.Title>
+          <Modal.Description>Modal description</Modal.Description>
+          <Modal.ScrollContent>
+            Modal content goes here
+          </Modal.ScrollContent>
+          <Modal.Bottom>
+            <Modal.Close>Close</Modal.Close>
+          </Modal.Bottom>
+        </Modal.Content>
+      </Modal.Portal>
+    </Modal.Root>
+  `,
+    imports: ["import * as Modal from './'"],
+    id: 'modal',
+};

package/dist/components/nav/Nav.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/nav/Nav.figma.js

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=2248-7404
+// source=src/lib/components/nav/Nav.svelte
+// component=Nav
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const collapsed = instance.getEnum('collapsed', {
+    'true': true,
+    'false': false,
+});
+export default {
+    example: figma.code `
+    <Nav company="Acme" defaultCollapsed={${collapsed}}>
+      {#snippet main({ NavItem, NavItemGroup, collapsed })}
+        <NavItem href="/home">Home</NavItem>
+        <NavItem href="/settings">Settings</NavItem>
+      {/snippet}
+    </Nav>
+  `,
+    imports: ["import Nav from './Nav.svelte'"],
+    id: 'nav',
+};

package/dist/components/notification-popup/NotificationPopup.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/notification-popup/NotificationPopup.figma.js

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6534-8057
+// source=src/lib/components/notification-popup/NotificationPopup.svelte
+// component=NotificationPopup
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const title = instance.findText('Notification title');
+export default {
+    example: figma.code `
+    <NotificationPopup
+      title="${title ? title.textContent : 'Notification'}"
+      visible={true}
+      onClose={() => {}}
+    >
+      Notification message content
+    </NotificationPopup>
+  `,
+    imports: ["import NotificationPopup from './NotificationPopup.svelte'"],
+    id: 'notification-popup',
+};

package/dist/components/notifications/Notifications.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/notifications/Notifications.figma.js

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6534-8069
+// source=src/lib/components/notifications/Notifications.svelte
+// component=Notifications
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const type = instance.getEnum('type', {
+    'default': 'default',
+    'danger': 'danger',
+});
+export default {
+    example: figma.code `
+    <!-- Add once to your app layout -->
+    <Notifications />
+
+    <!-- Then trigger notifications via the store -->
+    <script>
+      import { notifications } from '../../notifications'
+      notifications.add({ type: "${type}", message: "Notification message" })
+    </script>
+  `,
+    imports: [
+        "import Notifications from './Notifications.svelte'",
+        "import { notifications } from '../../notifications'",
+    ],
+    id: 'notifications',
+};

package/dist/components/pill/Pill.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/pill/Pill.figma.js

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=331-6870
+// source=src/lib/components/pill/Pill.svelte
+// component=Pill
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const text = instance.findText('input');
+export default {
+    example: figma.code `<Pill text="${text ? text.textContent : 'Label'}" onclick={() => {}} />`,
+    imports: ["import Pill from './Pill.svelte'"],
+    id: 'pill',
+};

package/dist/components/progress-circle/ProgressCircle.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/progress-circle/ProgressCircle.figma.js

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=764-12352
+// source=src/lib/components/progress-circle/ProgressCircle.svelte
+// component=ProgressCircle
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const size = instance.getEnum('size', {
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+});
+export default {
+    example: figma.code `<ProgressCircle progress={75} size="${size}" />`,
+    imports: ["import ProgressCircle from './ProgressCircle.svelte'"],
+    id: 'progress-circle',
+};

package/dist/components/progress-circle/ProgressCircle.stories.svelte

@@ -13,3 +13,15 @@
 <Story name="Base" args={{ progress: 20 }} />
 
 <Story name="Small" args={{ progress: 20, size: 'sm' }} />
+
+<Story name="Medium" args={{ progress: 20, size: 'md' }} />
+
+<Story name="Large" args={{ progress: 20, size: 'lg' }} />
+
+<Story name="Sizes" asChild>
+  <div class="flex items-center gap-4">
+    <ProgressCircle progress={60} size="sm" />
+    <ProgressCircle progress={60} size="md" />
+    <ProgressCircle progress={60} size="lg" />
+  </div>
+</Story>

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  // Make sure progress is between 0 and 100 and round down to the nearest 10 if over 90
   $effect(() => {
     progress =
       progress > 90
@@ -9,21 +8,27 @@
 
   type Props = {
     progress: number;
-    size?: 'md' | 'sm';
+    size?: 'sm' | 'md' | 'lg';
   };
 
   let { progress = $bindable(), size = 'md' }: Props = $props();
 
-  const viewBox = size === 'md' ? '0 0 20 20' : '0 0 16 16';
-  const center = size === 'md' ? 10 : 8;
-  const radius = size === 'md' ? 7 : 6;
+  const configs = {
+    sm: { viewBox: '0 0 16 16', center: 8, radius: 6 },
+    md: { viewBox: '0 0 20 20', center: 10, radius: 7 },
+    lg: { viewBox: '0 0 24 24', center: 12, radius: 9 },
+  };
 
-  // Create the circle path
-  const path = `M ${center} ${center - radius}
-              A ${radius} ${radius} 0 1 1 ${center - 0.01} ${center - radius}`;
+  const config = $derived(configs[size]);
+  const viewBox = $derived(config.viewBox);
+  const center = $derived(config.center);
+  const radius = $derived(config.radius);
+  const path = $derived(
+    `M ${center} ${center - radius} A ${radius} ${radius} 0 1 1 ${center - 0.01} ${center - radius}`
+  );
 </script>
 
-<div class="progress-wrapper" class:sm={size === 'sm'} class:md={size === 'md'}>
+<div class="progress-wrapper" class:sm={size === 'sm'} class:md={size === 'md'} class:lg={size === 'lg'}>
   <svg xmlns="http://www.w3.org/2000/svg" {viewBox} fill="none">
     <!-- Background track -->
     <path d={path} stroke="currentColor" stroke-opacity="0.25" stroke-width="2" fill="none" />
@@ -47,11 +52,14 @@
     @apply relative inline-block;
 
     aspect-ratio: 1;
+    &.sm {
+      @apply size-4;
+    }
     &.md {
       @apply size-5;
     }
-    &.sm {
-      @apply size-4;
+    &.lg {
+      @apply size-6;
     }
   }