@shipfox/react-ui 0.4.0 → 0.5.0

package/dist/components/button/icon-button.stories.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Code } from '../../components/typography/index.js';
+import { IconButton } from './icon-button.js';
+const variantOptions = [
+    'primary',
+    'transparent'
+];
+const sizeOptions = [
+    '2xs',
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl'
+];
+const radiusOptions = [
+    'rounded',
+    'full'
+];
+const meta = {
+    title: 'Components/Button/IconButton',
+    component: IconButton,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: variantOptions
+        },
+        size: {
+            control: 'select',
+            options: sizeOptions
+        },
+        radius: {
+            control: 'select',
+            options: radiusOptions
+        },
+        muted: {
+            control: 'boolean'
+        },
+        asChild: {
+            control: 'boolean'
+        }
+    },
+    args: {
+        icon: 'addLine',
+        variant: 'primary',
+        size: 'md',
+        radius: 'rounded',
+        muted: false
+    }
+};
+export default meta;
+export const Default = {};
+export const Variants = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-32",
+            children: sizeOptions.map((size)=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: [
+                                "Size: ",
+                                size
+                            ]
+                        }),
+                        radiusOptions.map((radius)=>/*#__PURE__*/ _jsxs("table", {
+                                className: "w-fit border-separate border-spacing-x-32 border-spacing-y-16",
+                                children: [
+                                    /*#__PURE__*/ _jsx("thead", {
+                                        children: /*#__PURE__*/ _jsxs("tr", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: radius
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Default"
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Hover"
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Focus"
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Disabled"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("tbody", {
+                                        children: variantOptions.map((variant)=>/*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(Code, {
+                                                            variant: "label",
+                                                            className: "text-foreground-neutral-subtle",
+                                                            children: variant
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            ...args,
+                                                            icon: "addLine",
+                                                            "aria-label": "Add",
+                                                            variant: variant,
+                                                            size: size,
+                                                            radius: radius
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            ...args,
+                                                            icon: "addLine",
+                                                            "aria-label": "Add",
+                                                            variant: variant,
+                                                            className: "hover",
+                                                            size: size,
+                                                            radius: radius
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            ...args,
+                                                            icon: "addLine",
+                                                            "aria-label": "Add",
+                                                            variant: variant,
+                                                            className: "focus",
+                                                            size: size,
+                                                            radius: radius
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            ...args,
+                                                            icon: "addLine",
+                                                            "aria-label": "Add",
+                                                            variant: variant,
+                                                            disabled: true,
+                                                            size: size,
+                                                            radius: radius
+                                                        })
+                                                    })
+                                                ]
+                                            }, variant))
+                                    })
+                                ]
+                            }, radius))
+                    ]
+                }, size))
+        })
+};
+Variants.parameters = {
+    pseudo: {
+        hover: '.hover',
+        focusVisible: '.focus'
+    }
+};
+export const Muted = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-16 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Normal:"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            ...args,
+                            icon: "addLine",
+                            "aria-label": "Add"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            ...args,
+                            icon: "addLine",
+                            "aria-label": "Add",
+                            variant: "transparent"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-16 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Muted:"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            ...args,
+                            icon: "addLine",
+                            "aria-label": "Add",
+                            muted: true
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            ...args,
+                            icon: "addLine",
+                            "aria-label": "Add",
+                            variant: "transparent",
+                            muted: true
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const Sizes = {
+    render: ({ children: _children, ...args })=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-16 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Rounded:"
+                        }),
+                        sizeOptions.map((size)=>/*#__PURE__*/ _createElement(IconButton, {
+                                ...args,
+                                key: size,
+                                icon: "addLine",
+                                "aria-label": "Add",
+                                size: size,
+                                radius: "rounded"
+                            }))
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-16 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Full:"
+                        }),
+                        sizeOptions.map((size)=>/*#__PURE__*/ _createElement(IconButton, {
+                                ...args,
+                                key: size,
+                                icon: "addLine",
+                                "aria-label": "Add",
+                                size: size,
+                                radius: "full"
+                            }))
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=icon-button.stories.js.map

package/dist/components/button/icon-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/icon-button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {IconButton} from './icon-button';\n\nconst variantOptions = ['primary', 'transparent'] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nconst radiusOptions = ['rounded', 'full'] as const;\n\nconst meta = {\n  title: 'Components/Button/IconButton',\n  component: IconButton,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    radius: {\n      control: 'select',\n      options: radiusOptions,\n    },\n    muted: {control: 'boolean'},\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    icon: 'addLine',\n    variant: 'primary',\n    size: 'md',\n    radius: 'rounded',\n    muted: false,\n  },\n} satisfies Meta<typeof IconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <div key={size} className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Size: {size}\n          </Code>\n          {radiusOptions.map((radius) => (\n            <table\n              key={radius}\n              className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\"\n            >\n              <thead>\n                <tr>\n                  <th>{radius}</th>\n                  <th>Default</th>\n                  <th>Hover</th>\n                  <th>Focus</th>\n                  <th>Disabled</th>\n                </tr>\n              </thead>\n              <tbody>\n                {variantOptions.map((variant) => (\n                  <tr key={variant}>\n                    <td>\n                      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                        {variant}\n                      </Code>\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"hover\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"focus\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        disabled\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          ))}\n        </div>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Muted: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Normal:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" />\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Muted:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" muted />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" muted />\n      </div>\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  render: ({children: _children, ...args}) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Rounded:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"rounded\"\n          />\n        ))}\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Full:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"full\"\n          />\n        ))}\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","IconButton","variantOptions","sizeOptions","radiusOptions","meta","title","component","tags","argTypes","variant","control","options","size","radius","muted","asChild","args","icon","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","aria-label","disabled","parameters","pseudo","hover","focusVisible","Muted","Sizes","children","_children","key"],"mappings":"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"}

package/dist/components/button/index.d.ts

@@ -1,2 +1,4 @@
 export * from './button';
+export * from './button-link';
+export * from './icon-button';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/components/button/index.js

@@ -1,3 +1,5 @@
 export * from './button.js';
+export * from './button-link.js';
+export * from './icon-button.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/index.ts"],"sourcesContent":["export * from './button';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW"}
+{"version":3,"sources":["../../../src/components/button/index.ts"],"sourcesContent":["export * from './button';\nexport * from './button-link';\nexport * from './icon-button';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB"}

package/dist/components/code-block/code-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-content.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAwClB"}
+{"version":3,"file":"code-content.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA2ClB"}

package/dist/components/code-block/code-content.js

@@ -18,10 +18,10 @@ export function CodeContent({ code, highlightedCode, isLoading, syntaxHighlighti
         ...props,
         children: /*#__PURE__*/ _jsx("code", {
             className: cn('w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base', 'grid', lineNumbers && '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none'),
-            children: lines.map((line)=>/*#__PURE__*/ _jsx("span", {
+            children: lines.map((line, index)=>/*#__PURE__*/ _jsx("span", {
                     className: "line px-12 w-full relative font-code text-xs leading-20",
                     children: line
-                }, line))
+                }, `${index}-${line}`))
         })
     });
 }

package/dist/components/code-block/code-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/code-block/code-content.tsx"],"sourcesContent":["import type {HTMLAttributes} from 'react';\nimport {cn} from 'utils/cn';\n\ntype CodeContentProps = HTMLAttributes<HTMLElement> & {\n  code: string;\n  highlightedCode?: string;\n  isLoading: boolean;\n  syntaxHighlighting: boolean;\n  lineNumbers?: boolean;\n};\n\nexport function CodeContent({\n  code,\n  highlightedCode,\n  isLoading,\n  syntaxHighlighting,\n  lineNumbers = false,\n  className,\n  ...props\n}: CodeContentProps) {\n  const shouldShowHighlighted = syntaxHighlighting && !isLoading && highlightedCode;\n\n  if (shouldShowHighlighted) {\n    return (\n      <div\n        className={cn(\n          'shiki-override w-full overflow-x-auto font-code [&_pre]:m-0 [&_pre]:p-0 [&_pre]:bg-transparent [&_pre]:font-code [&_code]:font-code [&_code]:bg-transparent [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base [&_code]:grid',\n          lineNumbers &&\n            '[&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n          '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:text-xs [&_.line]:leading-20 [&_.line]:min-h-[1.25rem]',\n          className,\n        )}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki outputs HTML for syntax highlighting\n        dangerouslySetInnerHTML={{__html: highlightedCode}}\n        {...props}\n      />\n    );\n  }\n\n  const lines = code.split('\\n');\n\n  return (\n    <pre className={cn('m-0 p-0 bg-transparent font-code', className)} {...props}>\n      <code\n        className={cn(\n          'w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base',\n          'grid',\n          lineNumbers &&\n            '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n        )}\n      >\n        {lines.map((line) => (\n          <span className=\"line px-12 w-full relative font-code text-xs leading-20\" key={line}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  );\n}\n"],"names":["cn","CodeContent","code","highlightedCode","isLoading","syntaxHighlighting","lineNumbers","className","props","shouldShowHighlighted","div","dangerouslySetInnerHTML","__html","lines","split","pre","map","line","span"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,YAAY,EAC1BC,IAAI,EACJC,eAAe,EACfC,SAAS,EACTC,kBAAkB,EAClBC,cAAc,KAAK,EACnBC,SAAS,EACT,GAAGC,OACc;IACjB,MAAMC,wBAAwBJ,sBAAsB,CAACD,aAAaD;IAElE,IAAIM,uBAAuB;QACzB,qBACE,KAACC;YACCH,WAAWP,GACT,wPACAM,eACE,gYACF,4JACAC;YAEF,mGAAmG;YACnGI,yBAAyB;gBAACC,QAAQT;YAAe;YAChD,GAAGK,KAAK;;IAGf;IAEA,MAAMK,QAAQX,KAAKY,KAAK,CAAC;IAEzB,qBACE,KAACC;QAAIR,WAAWP,GAAG,oCAAoCO;QAAa,GAAGC,KAAK;kBAC1E,cAAA,KAACN;YACCK,WAAWP,GACT,mGACA,QACAM,eACE;sBAGHO,MAAMG,GAAG,CAAC,CAACC,qBACV,KAACC;oBAAKX,WAAU;8BACbU;mBAD4EA;;;AAOzF"}
+{"version":3,"sources":["../../../src/components/code-block/code-content.tsx"],"sourcesContent":["import type {HTMLAttributes} from 'react';\nimport {cn} from 'utils/cn';\n\ntype CodeContentProps = HTMLAttributes<HTMLElement> & {\n  code: string;\n  highlightedCode?: string;\n  isLoading: boolean;\n  syntaxHighlighting: boolean;\n  lineNumbers?: boolean;\n};\n\nexport function CodeContent({\n  code,\n  highlightedCode,\n  isLoading,\n  syntaxHighlighting,\n  lineNumbers = false,\n  className,\n  ...props\n}: CodeContentProps) {\n  const shouldShowHighlighted = syntaxHighlighting && !isLoading && highlightedCode;\n\n  if (shouldShowHighlighted) {\n    return (\n      <div\n        className={cn(\n          'shiki-override w-full overflow-x-auto font-code [&_pre]:m-0 [&_pre]:p-0 [&_pre]:bg-transparent [&_pre]:font-code [&_code]:font-code [&_code]:bg-transparent [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base [&_code]:grid',\n          lineNumbers &&\n            '[&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n          '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:text-xs [&_.line]:leading-20 [&_.line]:min-h-[1.25rem]',\n          className,\n        )}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki outputs HTML for syntax highlighting\n        dangerouslySetInnerHTML={{__html: highlightedCode}}\n        {...props}\n      />\n    );\n  }\n\n  const lines = code.split('\\n');\n\n  return (\n    <pre className={cn('m-0 p-0 bg-transparent font-code', className)} {...props}>\n      <code\n        className={cn(\n          'w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base',\n          'grid',\n          lineNumbers &&\n            '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n        )}\n      >\n        {lines.map((line, index) => (\n          <span\n            className=\"line px-12 w-full relative font-code text-xs leading-20\"\n            key={`${index}-${line}`}\n          >\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  );\n}\n"],"names":["cn","CodeContent","code","highlightedCode","isLoading","syntaxHighlighting","lineNumbers","className","props","shouldShowHighlighted","div","dangerouslySetInnerHTML","__html","lines","split","pre","map","line","index","span"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,YAAY,EAC1BC,IAAI,EACJC,eAAe,EACfC,SAAS,EACTC,kBAAkB,EAClBC,cAAc,KAAK,EACnBC,SAAS,EACT,GAAGC,OACc;IACjB,MAAMC,wBAAwBJ,sBAAsB,CAACD,aAAaD;IAElE,IAAIM,uBAAuB;QACzB,qBACE,KAACC;YACCH,WAAWP,GACT,wPACAM,eACE,gYACF,4JACAC;YAEF,mGAAmG;YACnGI,yBAAyB;gBAACC,QAAQT;YAAe;YAChD,GAAGK,KAAK;;IAGf;IAEA,MAAMK,QAAQX,KAAKY,KAAK,CAAC;IAEzB,qBACE,KAACC;QAAIR,WAAWP,GAAG,oCAAoCO;QAAa,GAAGC,KAAK;kBAC1E,cAAA,KAACN;YACCK,WAAWP,GACT,mGACA,QACAM,eACE;sBAGHO,MAAMG,GAAG,CAAC,CAACC,MAAMC,sBAChB,KAACC;oBACCZ,WAAU;8BAGTU;mBAFI,GAAGC,MAAM,CAAC,EAAED,MAAM;;;AAQnC"}

package/dist/components/icon/icon.d.ts

@@ -27,6 +27,8 @@ declare const iconsMap: {
     readonly money: RemixiconComponentType;
     readonly homeSmile: RemixiconComponentType;
     readonly copy: RemixiconComponentType;
+    readonly addLine: RemixiconComponentType;
+    readonly chevronRight: RemixiconComponentType;
 };
 export type IconName = keyof typeof iconsMap;
 export declare const iconNames: IconName[];

package/dist/components/icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAK3B,YAAY,EAOb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B6C,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAEhE,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAG/C"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAO3B,YAAY,EAOb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B6C,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAEhE,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAG/C"}

package/dist/components/icon/icon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RiCheckLine, RiCloseLine, RiFileCopyLine, RiGithubFill, RiGoogleFill, RiHomeSmileFill, RiImageAddFill, RiInformationFill, RiMicrosoftFill, RiMoneyDollarCircleLine, RiSubtractLine } from '@remixicon/react';
+import { RiAddLine, RiArrowRightSLine, RiCheckLine, RiCloseLine, RiFileCopyLine, RiGithubFill, RiGoogleFill, RiHomeSmileFill, RiImageAddFill, RiInformationFill, RiMicrosoftFill, RiMoneyDollarCircleLine, RiSubtractLine } from '@remixicon/react';
 import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, ShipfoxLogo, SlackLogo, SpinnerIcon, StripeLogo, ThunderIcon, XCircleSolidIcon } from './custom/index.js';
 const iconsMap = {
     google: RiGoogleFill,
@@ -26,7 +26,9 @@ const iconsMap = {
     info: RiInformationFill,
     money: RiMoneyDollarCircleLine,
     homeSmile: RiHomeSmileFill,
-    copy: RiFileCopyLine
+    copy: RiFileCopyLine,
+    addLine: RiAddLine,
+    chevronRight: RiArrowRightSLine
 };
 export const iconNames = Object.keys(iconsMap);
 export function Icon({ name, ...props }) {

package/dist/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import {\n  type RemixiconComponentType,\n  RiCheckLine,\n  RiCloseLine,\n  RiFileCopyLine,\n  RiGithubFill,\n  RiGoogleFill,\n  RiHomeSmileFill,\n  RiImageAddFill,\n  RiInformationFill,\n  RiMicrosoftFill,\n  RiMoneyDollarCircleLine,\n  RiSubtractLine,\n} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\nimport {\n  BadgeIcon,\n  CheckCircleSolidIcon,\n  CircleDottedLineIcon,\n  ComponentFillIcon,\n  ComponentLineIcon,\n  EllipseMiniSolidIcon,\n  InfoTooltipFillIcon,\n  ResizeIcon,\n  ShipfoxLogo,\n  SlackLogo,\n  SpinnerIcon,\n  StripeLogo,\n  ThunderIcon,\n  XCircleSolidIcon,\n} from './custom';\n\nconst iconsMap = {\n  google: RiGoogleFill,\n  microsoft: RiMicrosoftFill,\n  badge: BadgeIcon,\n  checkCircleSolid: CheckCircleSolidIcon,\n  circleDottedLine: CircleDottedLineIcon,\n  componentFill: ComponentFillIcon,\n  xCircleSolid: XCircleSolidIcon,\n  thunder: ThunderIcon,\n  resize: ResizeIcon,\n  infoTooltipFill: InfoTooltipFillIcon,\n  spinner: SpinnerIcon,\n  ellipseMiniSolid: EllipseMiniSolidIcon,\n  componentLine: ComponentLineIcon,\n  imageAdd: RiImageAddFill,\n  close: RiCloseLine,\n  shipfox: ShipfoxLogo,\n  slack: SlackLogo,\n  stripe: StripeLogo,\n  github: RiGithubFill,\n  check: RiCheckLine,\n  subtractLine: RiSubtractLine,\n  info: RiInformationFill,\n  money: RiMoneyDollarCircleLine,\n  homeSmile: RiHomeSmileFill,\n  copy: RiFileCopyLine,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nexport type IconName = keyof typeof iconsMap;\nexport const iconNames = Object.keys(iconsMap) as IconName[];\n\ntype BaseIconProps = ComponentProps<typeof RiGoogleFill>;\ntype IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;\n\nexport function Icon({name, ...props}: IconProps) {\n  const IconComponent = iconsMap[name];\n  return <IconComponent {...props} />;\n}\n"],"names":["RiCheckLine","RiCloseLine","RiFileCopyLine","RiGithubFill","RiGoogleFill","RiHomeSmileFill","RiImageAddFill","RiInformationFill","RiMicrosoftFill","RiMoneyDollarCircleLine","RiSubtractLine","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","ShipfoxLogo","SlackLogo","SpinnerIcon","StripeLogo","ThunderIcon","XCircleSolidIcon","iconsMap","google","microsoft","badge","checkCircleSolid","circleDottedLine","componentFill","xCircleSolid","thunder","resize","infoTooltipFill","spinner","ellipseMiniSolid","componentLine","imageAdd","close","shipfox","slack","stripe","github","check","subtractLine","info","money","homeSmile","copy","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AAAA,SAEEA,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,QACT,mBAAmB;AAE1B,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAElB,MAAMC,WAAW;IACfC,QAAQtB;IACRuB,WAAWnB;IACXoB,OAAOjB;IACPkB,kBAAkBjB;IAClBkB,kBAAkBjB;IAClBkB,eAAejB;IACfkB,cAAcR;IACdS,SAASV;IACTW,QAAQhB;IACRiB,iBAAiBlB;IACjBmB,SAASf;IACTgB,kBAAkBrB;IAClBsB,eAAevB;IACfwB,UAAUjC;IACVkC,OAAOvC;IACPwC,SAAStB;IACTuB,OAAOtB;IACPuB,QAAQrB;IACRsB,QAAQzC;IACR0C,OAAO7C;IACP8C,cAAcpC;IACdqC,MAAMxC;IACNyC,OAAOvC;IACPwC,WAAW5C;IACX6C,MAAMhD;AACR;AAGA,OAAO,MAAMiD,YAAYC,OAAOC,IAAI,CAAC5B,UAAwB;AAK7D,OAAO,SAAS6B,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBhC,QAAQ,CAAC8B,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}
+{"version":3,"sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import {\n  type RemixiconComponentType,\n  RiAddLine,\n  RiArrowRightSLine,\n  RiCheckLine,\n  RiCloseLine,\n  RiFileCopyLine,\n  RiGithubFill,\n  RiGoogleFill,\n  RiHomeSmileFill,\n  RiImageAddFill,\n  RiInformationFill,\n  RiMicrosoftFill,\n  RiMoneyDollarCircleLine,\n  RiSubtractLine,\n} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\nimport {\n  BadgeIcon,\n  CheckCircleSolidIcon,\n  CircleDottedLineIcon,\n  ComponentFillIcon,\n  ComponentLineIcon,\n  EllipseMiniSolidIcon,\n  InfoTooltipFillIcon,\n  ResizeIcon,\n  ShipfoxLogo,\n  SlackLogo,\n  SpinnerIcon,\n  StripeLogo,\n  ThunderIcon,\n  XCircleSolidIcon,\n} from './custom';\n\nconst iconsMap = {\n  google: RiGoogleFill,\n  microsoft: RiMicrosoftFill,\n  badge: BadgeIcon,\n  checkCircleSolid: CheckCircleSolidIcon,\n  circleDottedLine: CircleDottedLineIcon,\n  componentFill: ComponentFillIcon,\n  xCircleSolid: XCircleSolidIcon,\n  thunder: ThunderIcon,\n  resize: ResizeIcon,\n  infoTooltipFill: InfoTooltipFillIcon,\n  spinner: SpinnerIcon,\n  ellipseMiniSolid: EllipseMiniSolidIcon,\n  componentLine: ComponentLineIcon,\n  imageAdd: RiImageAddFill,\n  close: RiCloseLine,\n  shipfox: ShipfoxLogo,\n  slack: SlackLogo,\n  stripe: StripeLogo,\n  github: RiGithubFill,\n  check: RiCheckLine,\n  subtractLine: RiSubtractLine,\n  info: RiInformationFill,\n  money: RiMoneyDollarCircleLine,\n  homeSmile: RiHomeSmileFill,\n  copy: RiFileCopyLine,\n  addLine: RiAddLine,\n  chevronRight: RiArrowRightSLine,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nexport type IconName = keyof typeof iconsMap;\nexport const iconNames = Object.keys(iconsMap) as IconName[];\n\ntype BaseIconProps = ComponentProps<typeof RiGoogleFill>;\ntype IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;\n\nexport function Icon({name, ...props}: IconProps) {\n  const IconComponent = iconsMap[name];\n  return <IconComponent {...props} />;\n}\n"],"names":["RiAddLine","RiArrowRightSLine","RiCheckLine","RiCloseLine","RiFileCopyLine","RiGithubFill","RiGoogleFill","RiHomeSmileFill","RiImageAddFill","RiInformationFill","RiMicrosoftFill","RiMoneyDollarCircleLine","RiSubtractLine","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","ShipfoxLogo","SlackLogo","SpinnerIcon","StripeLogo","ThunderIcon","XCircleSolidIcon","iconsMap","google","microsoft","badge","checkCircleSolid","circleDottedLine","componentFill","xCircleSolid","thunder","resize","infoTooltipFill","spinner","ellipseMiniSolid","componentLine","imageAdd","close","shipfox","slack","stripe","github","check","subtractLine","info","money","homeSmile","copy","addLine","chevronRight","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AAAA,SAEEA,SAAS,EACTC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,QACT,mBAAmB;AAE1B,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAElB,MAAMC,WAAW;IACfC,QAAQtB;IACRuB,WAAWnB;IACXoB,OAAOjB;IACPkB,kBAAkBjB;IAClBkB,kBAAkBjB;IAClBkB,eAAejB;IACfkB,cAAcR;IACdS,SAASV;IACTW,QAAQhB;IACRiB,iBAAiBlB;IACjBmB,SAASf;IACTgB,kBAAkBrB;IAClBsB,eAAevB;IACfwB,UAAUjC;IACVkC,OAAOvC;IACPwC,SAAStB;IACTuB,OAAOtB;IACPuB,QAAQrB;IACRsB,QAAQzC;IACR0C,OAAO7C;IACP8C,cAAcpC;IACdqC,MAAMxC;IACNyC,OAAOvC;IACPwC,WAAW5C;IACX6C,MAAMhD;IACNiD,SAASrD;IACTsD,cAAcrD;AAChB;AAGA,OAAO,MAAMsD,YAAYC,OAAOC,IAAI,CAAC9B,UAAwB;AAK7D,OAAO,SAAS+B,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBlC,QAAQ,CAACgC,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}

package/dist/onboarding/sign-in.stories.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
+import { Avatar } from '../components/avatar/index.js';
+import { Button } from '../components/button/index.js';
+import { Header, Text } from '../components/typography/index.js';
+const meta = {
+    title: 'Onboarding/Signin',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+export const Default = {
+    play: async (ctx)=>{
+        await argosScreenshot(ctx, 'example-screenshot');
+    },
+    render: ()=>{
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex min-h-screen items-center justify-center bg-background-subtle-base",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "h-[332px] w-[800px] opacity-20",
+                        style: {
+                            backgroundImage: `radial-gradient(circle, rgba(255, 75, 0, 0.3) 1px, transparent 1px)`,
+                            backgroundSize: '24px 24px',
+                            backgroundPosition: '-80px 31px'
+                        }
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col items-center gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsx(Avatar, {
+                                    content: "logo",
+                                    size: "xl",
+                                    radius: "rounded",
+                                    logoName: "shipfox"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex min-w-[128px] flex-col items-center gap-4 text-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Header, {
+                                            variant: "h1",
+                                            className: "text-[28px] font-medium leading-[44px] text-foreground-neutral-base",
+                                            children: "Connect to Shipfox"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            size: "sm",
+                                            className: "text-sm font-normal leading-[24px] text-foreground-neutral-subtle",
+                                            children: "Log in to access Shipfox."
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex w-full flex-col gap-20",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "md",
+                                    iconLeft: "google",
+                                    className: "w-full",
+                                    children: "Continue with Google"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "md",
+                                    iconLeft: "microsoft",
+                                    className: "w-full",
+                                    children: "Continue with Microsoft"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "transparent",
+                                    size: "md",
+                                    className: "w-full",
+                                    children: "Connect with Enterprise SSO"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=sign-in.stories.js.map

package/dist/onboarding/sign-in.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/onboarding/sign-in.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Avatar} from 'components/avatar';\nimport {Button} from 'components/button';\nimport {Header, Text} from 'components/typography';\n\nconst meta = {\n  title: 'Onboarding/Signin',\n  parameters: {\n    layout: 'fullscreen',\n  },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  play: async (ctx) => {\n    await argosScreenshot(ctx, 'example-screenshot');\n  },\n  render: () => {\n    return (\n      <div className=\"flex min-h-screen items-center justify-center bg-background-subtle-base\">\n        {/* Background illustration - simplified decorative element */}\n        <div className=\"pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]\">\n          <div\n            className=\"h-[332px] w-[800px] opacity-20\"\n            style={{\n              backgroundImage: `radial-gradient(circle, rgba(255, 75, 0, 0.3) 1px, transparent 1px)`,\n              backgroundSize: '24px 24px',\n              backgroundPosition: '-80px 31px',\n            }}\n          />\n        </div>\n\n        {/* Main content */}\n        <div className=\"relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24\">\n          {/* Logo and title section */}\n          <div className=\"flex flex-col items-center gap-16\">\n            <Avatar content=\"logo\" size=\"xl\" radius=\"rounded\" logoName=\"shipfox\" />\n            <div className=\"flex min-w-[128px] flex-col items-center gap-4 text-center\">\n              <Header\n                variant=\"h1\"\n                className=\"text-[28px] font-medium leading-[44px] text-foreground-neutral-base\"\n              >\n                Connect to Shipfox\n              </Header>\n              <Text\n                size=\"sm\"\n                className=\"text-sm font-normal leading-[24px] text-foreground-neutral-subtle\"\n              >\n                Log in to access Shipfox.\n              </Text>\n            </div>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex w-full flex-col gap-20\">\n            <Button variant=\"primary\" size=\"md\" iconLeft=\"google\" className=\"w-full\">\n              Continue with Google\n            </Button>\n            <Button variant=\"primary\" size=\"md\" iconLeft=\"microsoft\" className=\"w-full\">\n              Continue with Microsoft\n            </Button>\n            <Button variant=\"transparent\" size=\"md\" className=\"w-full\">\n              Connect with Enterprise SSO\n            </Button>\n          </div>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","Avatar","Button","Header","Text","meta","title","parameters","layout","Default","play","ctx","render","div","className","style","backgroundImage","backgroundSize","backgroundPosition","content","size","radius","logoName","variant","iconLeft"],"mappings":";AAAA,SAAQA,eAAe,QAAO,6BAA6B;AAE3D,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,MAAM,EAAEC,IAAI,QAAO,wBAAwB;AAEnD,MAAMC,OAAO;IACXC,OAAO;IACPC,YAAY;QACVC,QAAQ;IACV;AACF;AAEA,eAAeH,KAAK;AAGpB,OAAO,MAAMI,UAAiB;IAC5BC,MAAM,OAAOC;QACX,MAAMX,gBAAgBW,KAAK;IAC7B;IACAC,QAAQ;QACN,qBACE,MAACC;YAAIC,WAAU;;8BAEb,KAACD;oBAAIC,WAAU;8BACb,cAAA,KAACD;wBACCC,WAAU;wBACVC,OAAO;4BACLC,iBAAiB,CAAC,mEAAmE,CAAC;4BACtFC,gBAAgB;4BAChBC,oBAAoB;wBACtB;;;8BAKJ,MAACL;oBAAIC,WAAU;;sCAEb,MAACD;4BAAIC,WAAU;;8CACb,KAACb;oCAAOkB,SAAQ;oCAAOC,MAAK;oCAAKC,QAAO;oCAAUC,UAAS;;8CAC3D,MAACT;oCAAIC,WAAU;;sDACb,KAACX;4CACCoB,SAAQ;4CACRT,WAAU;sDACX;;sDAGD,KAACV;4CACCgB,MAAK;4CACLN,WAAU;sDACX;;;;;;sCAOL,MAACD;4BAAIC,WAAU;;8CACb,KAACZ;oCAAOqB,SAAQ;oCAAUH,MAAK;oCAAKI,UAAS;oCAASV,WAAU;8CAAS;;8CAGzE,KAACZ;oCAAOqB,SAAQ;oCAAUH,MAAK;oCAAKI,UAAS;oCAAYV,WAAU;8CAAS;;8CAG5E,KAACZ;oCAAOqB,SAAQ;oCAAcH,MAAK;oCAAKN,WAAU;8CAAS;;;;;;;;IAOrE;AACF,EAAE"}

package/index.css

@@ -198,14 +198,17 @@
   --background-button-transparent-default: var(--color-alpha-white-0);
   --background-button-neutral-hover: var(--color-neutral-100);
   --background-button-danger-hover: var(--color-red-700);
+  --background-button-success-hover: var(--color-green-700);
   --background-button-neutral-pressed: var(--color-neutral-200);
   --background-button-neutral-default: var(--color-neutral-0);
-  --background-button-transparent-hover: var(--color-alpha-white-6);
+  --background-button-transparent-hover: var(--color-alpha-black-6);
   --background-button-inverted-pressed: var(--color-neutral-600);
-  --background-button-transparent-pressed: var(--color-alpha-white-10);
+  --background-button-transparent-pressed: var(--color-alpha-black-10);
   --background-button-danger-pressed: var(--color-red-800);
+  --background-button-success-pressed: var(--color-green-800);
   --background-button-inverted-hover: var(--color-neutral-700);
   --background-button-danger-default: var(--color-red-600);
+  --background-button-success-default: var(--color-green-600);
   --background-button-inverted-default: var(--color-neutral-800);
 
   /* Accent Background */
@@ -312,7 +315,7 @@
     var(--color-alpha-black-8);
   --shadow-button-neutral-focus:
     0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
-    var(--color-neutral-800), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
+    var(--color-alpha-black-8), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
     var(--color-primary-500);
   --shadow-button-danger:
     0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
@@ -321,6 +324,14 @@
   --shadow-button-danger-focus:
     0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
     var(--color-red-700), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px var(--color-primary-500);
+  --shadow-button-success:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-green-700), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-button-success-focus:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-green-700), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
+    var(--color-primary-500);
 
   /* Checkbox */
   /* Checkbox - Unchecked States */
@@ -392,14 +403,17 @@
   --background-button-transparent-default: var(--color-alpha-white-0);
   --background-button-neutral-hover: var(--color-alpha-white-8);
   --background-button-danger-hover: var(--color-red-700);
+  --background-button-success-hover: var(--color-green-700);
   --background-button-neutral-pressed: var(--color-alpha-white-12);
   --background-button-neutral-default: var(--color-alpha-white-4);
   --background-button-transparent-hover: var(--color-alpha-white-8);
   --background-button-inverted-pressed: var(--color-neutral-400);
   --background-button-transparent-pressed: var(--color-alpha-white-12);
   --background-button-danger-pressed: var(--color-red-600);
+  --background-button-success-pressed: var(--color-green-600);
   --background-button-inverted-hover: var(--color-neutral-500);
   --background-button-danger-default: var(--color-red-800);
+  --background-button-success-default: var(--color-green-800);
   --background-button-inverted-default: var(--color-neutral-600);
 
   /* Accent Background */
@@ -513,6 +527,13 @@
   --shadow-button-danger-focus:
     0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
     var(--color-red-700), 0 0 0 2px var(--color-neutral-950), 0 0 0 4px var(--color-primary-500);
+  --shadow-button-success:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-green-700), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-button-success-focus:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-green-700), 0 0 0 2px var(--color-neutral-950), 0 0 0 4px var(--color-primary-500);
 
   /* Checkbox */
   /* Checkbox - Unchecked States */
@@ -727,14 +748,17 @@
   --color-background-button-transparent-default: var(--background-button-transparent-default);
   --color-background-button-neutral-hover: var(--background-button-neutral-hover);
   --color-background-button-danger-hover: var(--background-button-danger-hover);
+  --color-background-button-success-hover: var(--background-button-success-hover);
   --color-background-button-neutral-pressed: var(--background-button-neutral-pressed);
   --color-background-button-neutral-default: var(--background-button-neutral-default);
   --color-background-button-transparent-hover: var(--background-button-transparent-hover);
   --color-background-button-inverted-pressed: var(--background-button-inverted-pressed);
   --color-background-button-transparent-pressed: var(--background-button-transparent-pressed);
   --color-background-button-danger-pressed: var(--background-button-danger-pressed);
+  --color-background-button-success-pressed: var(--background-button-success-pressed);
   --color-background-button-inverted-hover: var(--background-button-inverted-hover);
   --color-background-button-danger-default: var(--background-button-danger-default);
+  --color-background-button-success-default: var(--background-button-success-default);
   --color-background-button-inverted-default: var(--background-button-inverted-default);
 
   /* Theme tokens - accent background */
@@ -875,6 +899,8 @@
   --shadow-button-neutral-focus: var(--shadow-button-neutral-focus);
   --shadow-button-danger: var(--shadow-button-danger);
   --shadow-button-danger-focus: var(--shadow-button-danger-focus);
+  --shadow-button-success: var(--shadow-button-success);
+  --shadow-button-success-focus: var(--shadow-button-success-focus);
 
   /* Checkbox */
   --color-checkbox-unchecked-bg: var(--checkbox-unchecked-bg);