@shipfox/react-ui 0.13.0 → 0.15.0

package/dist/components/dashboard/components/topbar-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar-button.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/components/topbar-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AAGpD,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,IAAI,EACJ,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAcA"}

package/dist/components/dashboard/components/topbar-button.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { cn } from '../../../utils/cn.js';
+export function TopbarButton({ className, icon, label }) {
+    return /*#__PURE__*/ _jsx(Button, {
+        type: "button",
+        variant: "transparent",
+        className: cn('flex items-center justify-center overflow-hidden shrink-0 w-40 h-40 bg-background-subtle-base hover:bg-background-neutral-hover transition-colors rounded-none border-l border-border-neutral-strong', className),
+        "aria-label": label ?? undefined,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            name: icon,
+            className: "size-18 text-foreground-neutral-subtle"
+        })
+    });
+}
+
+//# sourceMappingURL=topbar-button.js.map

package/dist/components/dashboard/components/topbar-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/dashboard/components/topbar-button.tsx"],"sourcesContent":["import {Button} from 'components/button';\nimport {Icon, type IconName} from 'components/icon';\nimport {cn} from 'utils/cn';\n\nexport function TopbarButton({\n  className,\n  icon,\n  label,\n}: {\n  className?: string;\n  icon: IconName;\n  label?: string;\n}) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"transparent\"\n      className={cn(\n        'flex items-center justify-center overflow-hidden shrink-0 w-40 h-40 bg-background-subtle-base hover:bg-background-neutral-hover transition-colors rounded-none border-l border-border-neutral-strong',\n        className,\n      )}\n      aria-label={label ?? undefined}\n    >\n      <Icon name={icon} className=\"size-18 text-foreground-neutral-subtle\" />\n    </Button>\n  );\n}\n"],"names":["Button","Icon","cn","TopbarButton","className","icon","label","type","variant","aria-label","undefined","name"],"mappings":";AAAA,SAAQA,MAAM,QAAO,oBAAoB;AACzC,SAAQC,IAAI,QAAsB,kBAAkB;AACpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,SAASC,aAAa,EAC3BC,SAAS,EACTC,IAAI,EACJC,KAAK,EAKN;IACC,qBACE,KAACN;QACCO,MAAK;QACLC,SAAQ;QACRJ,WAAWF,GACT,wMACAE;QAEFK,cAAYH,SAASI;kBAErB,cAAA,KAACT;YAAKU,MAAMN;YAAMD,WAAU;;;AAGlC"}

package/dist/components/dashboard/components/topbar.d.ts

@@ -0,0 +1,4 @@
+export declare function Topbar({ hideLogo }: {
+    hideLogo?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=topbar.d.ts.map

package/dist/components/dashboard/components/topbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/components/topbar.tsx"],"names":[],"mappings":"AAOA,wBAAgB,MAAM,CAAC,EAAC,QAAgB,EAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,2CAgC9D"}

package/dist/components/dashboard/components/topbar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+import { CompleteSetupButton } from './complete-setup-button.js';
+import { MobileMenu } from './mobile-menu.js';
+import { OrganizationSelector } from './organization-selector.js';
+import { TopbarButton } from './topbar-button.js';
+import { UserProfile } from './user-profile.js';
+export function Topbar({ hideLogo = false }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex flex-col items-start w-full bg-background-subtle-base",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center justify-between w-full shrink-0 border-b border-border-neutral-strong",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center flex-1 min-w-0",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: cn('shrink-0', hideLogo ? 'opacity-0' : 'opacity-100'),
+                            children: /*#__PURE__*/ _jsx(TopbarButton, {
+                                icon: "shipfox",
+                                label: "Shipfox",
+                                className: "border-none"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(OrganizationSelector, {}),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "hidden md:block flex-1 h-40 bg-background-subtle-base"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CompleteSetupButton, {
+                    className: "hidden md:flex"
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "hidden md:block",
+                    children: /*#__PURE__*/ _jsx(TopbarButton, {
+                        icon: "searchLine",
+                        label: "Search"
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "hidden md:block",
+                    children: /*#__PURE__*/ _jsx(TopbarButton, {
+                        icon: "questionLine",
+                        label: "Help"
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "hidden md:block",
+                    children: /*#__PURE__*/ _jsx(TopbarButton, {
+                        icon: "notification3Line",
+                        label: "Notifications"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(MobileMenu, {}),
+                /*#__PURE__*/ _jsx(UserProfile, {})
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=topbar.js.map

package/dist/components/dashboard/components/topbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/dashboard/components/topbar.tsx"],"sourcesContent":["import {cn} from 'utils/cn';\nimport {CompleteSetupButton} from './complete-setup-button';\nimport {MobileMenu} from './mobile-menu';\nimport {OrganizationSelector} from './organization-selector';\nimport {TopbarButton} from './topbar-button';\nimport {UserProfile} from './user-profile';\n\nexport function Topbar({hideLogo = false}: {hideLogo?: boolean}) {\n  return (\n    <div className=\"flex flex-col items-start w-full bg-background-subtle-base\">\n      <div className=\"flex items-center justify-between w-full shrink-0 border-b border-border-neutral-strong\">\n        <div className=\"flex items-center flex-1 min-w-0\">\n          <div className={cn('shrink-0', hideLogo ? 'opacity-0' : 'opacity-100')}>\n            <TopbarButton icon=\"shipfox\" label=\"Shipfox\" className=\"border-none\" />\n          </div>\n          <OrganizationSelector />\n          <div className=\"hidden md:block flex-1 h-40 bg-background-subtle-base\" />\n        </div>\n\n        <CompleteSetupButton className=\"hidden md:flex\" />\n\n        <div className=\"hidden md:block\">\n          <TopbarButton icon=\"searchLine\" label=\"Search\" />\n        </div>\n\n        <div className=\"hidden md:block\">\n          <TopbarButton icon=\"questionLine\" label=\"Help\" />\n        </div>\n\n        <div className=\"hidden md:block\">\n          <TopbarButton icon=\"notification3Line\" label=\"Notifications\" />\n        </div>\n\n        <MobileMenu />\n\n        <UserProfile />\n      </div>\n    </div>\n  );\n}\n"],"names":["cn","CompleteSetupButton","MobileMenu","OrganizationSelector","TopbarButton","UserProfile","Topbar","hideLogo","div","className","icon","label"],"mappings":";AAAA,SAAQA,EAAE,QAAO,WAAW;AAC5B,SAAQC,mBAAmB,QAAO,0BAA0B;AAC5D,SAAQC,UAAU,QAAO,gBAAgB;AACzC,SAAQC,oBAAoB,QAAO,0BAA0B;AAC7D,SAAQC,YAAY,QAAO,kBAAkB;AAC7C,SAAQC,WAAW,QAAO,iBAAiB;AAE3C,OAAO,SAASC,OAAO,EAACC,WAAW,KAAK,EAAuB;IAC7D,qBACE,KAACC;QAAIC,WAAU;kBACb,cAAA,MAACD;YAAIC,WAAU;;8BACb,MAACD;oBAAIC,WAAU;;sCACb,KAACD;4BAAIC,WAAWT,GAAG,YAAYO,WAAW,cAAc;sCACtD,cAAA,KAACH;gCAAaM,MAAK;gCAAUC,OAAM;gCAAUF,WAAU;;;sCAEzD,KAACN;sCACD,KAACK;4BAAIC,WAAU;;;;8BAGjB,KAACR;oBAAoBQ,WAAU;;8BAE/B,KAACD;oBAAIC,WAAU;8BACb,cAAA,KAACL;wBAAaM,MAAK;wBAAaC,OAAM;;;8BAGxC,KAACH;oBAAIC,WAAU;8BACb,cAAA,KAACL;wBAAaM,MAAK;wBAAeC,OAAM;;;8BAG1C,KAACH;oBAAIC,WAAU;8BACb,cAAA,KAACL;wBAAaM,MAAK;wBAAoBC,OAAM;;;8BAG/C,KAACT;8BAED,KAACG;;;;AAIT"}

package/dist/components/dashboard/components/user-profile.d.ts

@@ -0,0 +1,2 @@
+export declare function UserProfile(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=user-profile.d.ts.map

package/dist/components/dashboard/components/user-profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-profile.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/components/user-profile.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,WAAW,4CAmE1B"}

package/dist/components/dashboard/components/user-profile.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '../../../components/avatar/index.js';
+import { UserBadge } from '../../../components/badge/index.js';
+import { Button } from '../../../components/button/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
+import { ShinyText } from '../../../components/shiny-text/index.js';
+function UsageGauge({ used, total }) {
+    const percentage = total <= 0 ? 0 : Math.min(used / total * 100, 100);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex h-8 w-full rounded-full bg-tag-neutral-bg overflow-hidden",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "h-full bg-tag-success-icon rounded-l-2",
+            style: {
+                width: `${percentage}%`
+            }
+        })
+    });
+}
+export function UserProfile() {
+    const userName = 'Thierry Abalea';
+    const userEmail = 'thierryabalea@acme.com';
+    const creditsUsed = 3213;
+    const creditsTotal = 6000;
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center justify-center h-40 px-8 cursor-pointer border-l border-border-neutral-strong",
+                    children: [
+                        /*#__PURE__*/ _jsx(Avatar, {
+                            className: "size-24 md:hidden",
+                            content: "image",
+                            fallback: "TA"
+                        }),
+                        /*#__PURE__*/ _jsx(UserBadge, {
+                            name: userName,
+                            className: "hidden md:inline-flex"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                align: "end",
+                className: "w-220",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-12 px-8 py-4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                className: "size-28 shrink-0",
+                                content: "image",
+                                fallback: "TA"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col min-w-0",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-sm font-medium leading-20 text-foreground-neutral-base truncate",
+                                        children: userName
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-xs leading-20 text-foreground-neutral-subtle truncate",
+                                        children: userEmail
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "sparkling2Fill",
+                        children: "Getting started"
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "userLine",
+                        children: "Profile settings"
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-8 px-8 py-4",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center justify-between gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex items-center gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Avatar, {
+                                                className: "size-12",
+                                                content: "logo",
+                                                logoName: "stripe",
+                                                radius: "rounded"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "text-sm font-medium leading-20 text-foreground-neutral-subtle",
+                                                children: "Usage"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "text-sm font-medium leading-20 text-foreground-neutral-subtle",
+                                        children: [
+                                            creditsUsed,
+                                            " / ",
+                                            creditsTotal
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(UsageGauge, {
+                                used: creditsUsed,
+                                total: creditsTotal
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: "text-xs leading-20 text-foreground-neutral-subtle",
+                                children: [
+                                    creditsTotal,
+                                    " free credits every month."
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "px-8 pb-12",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            className: "w-full",
+                            children: /*#__PURE__*/ _jsx(ShinyText, {
+                                text: "Upgrade Plan",
+                                className: "flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-center"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "logoutCircleLine",
+                        children: "Log out"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=user-profile.js.map

package/dist/components/dashboard/components/user-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/dashboard/components/user-profile.tsx"],"sourcesContent":["import {Avatar} from 'components/avatar';\nimport {UserBadge} from 'components/badge';\nimport {Button} from 'components/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from 'components/dropdown-menu';\nimport {ShinyText} from 'components/shiny-text';\n\nfunction UsageGauge({used, total}: {used: number; total: number}) {\n  const percentage = total <= 0 ? 0 : Math.min((used / total) * 100, 100);\n\n  return (\n    <div className=\"flex h-8 w-full rounded-full bg-tag-neutral-bg overflow-hidden\">\n      <div className=\"h-full bg-tag-success-icon rounded-l-2\" style={{width: `${percentage}%`}} />\n    </div>\n  );\n}\n\nexport function UserProfile() {\n  const userName = 'Thierry Abalea';\n  const userEmail = 'thierryabalea@acme.com';\n  const creditsUsed = 3213;\n  const creditsTotal = 6000;\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex items-center justify-center h-40 px-8 cursor-pointer border-l border-border-neutral-strong\">\n          <Avatar className=\"size-24 md:hidden\" content=\"image\" fallback=\"TA\" />\n          <UserBadge name={userName} className=\"hidden md:inline-flex\" />\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-220\">\n        <div className=\"flex items-center gap-12 px-8 py-4\">\n          <Avatar className=\"size-28 shrink-0\" content=\"image\" fallback=\"TA\" />\n          <div className=\"flex flex-col min-w-0\">\n            <span className=\"text-sm font-medium leading-20 text-foreground-neutral-base truncate\">\n              {userName}\n            </span>\n            <span className=\"text-xs leading-20 text-foreground-neutral-subtle truncate\">\n              {userEmail}\n            </span>\n          </div>\n        </div>\n\n        <DropdownMenuSeparator />\n\n        <DropdownMenuItem icon=\"sparkling2Fill\">Getting started</DropdownMenuItem>\n        <DropdownMenuItem icon=\"userLine\">Profile settings</DropdownMenuItem>\n\n        <DropdownMenuSeparator />\n\n        <div className=\"flex flex-col gap-8 px-8 py-4\">\n          <div className=\"flex items-center justify-between gap-8\">\n            <div className=\"flex items-center gap-8\">\n              <Avatar className=\"size-12\" content=\"logo\" logoName=\"stripe\" radius=\"rounded\" />\n              <span className=\"text-sm font-medium leading-20 text-foreground-neutral-subtle\">\n                Usage\n              </span>\n            </div>\n            <span className=\"text-sm font-medium leading-20 text-foreground-neutral-subtle\">\n              {creditsUsed} / {creditsTotal}\n            </span>\n          </div>\n          <UsageGauge used={creditsUsed} total={creditsTotal} />\n          <span className=\"text-xs leading-20 text-foreground-neutral-subtle\">\n            {creditsTotal} free credits every month.\n          </span>\n        </div>\n\n        <div className=\"px-8 pb-12\">\n          <Button type=\"button\" className=\"w-full\">\n            <ShinyText\n              text=\"Upgrade Plan\"\n              className=\"flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-center\"\n            />\n          </Button>\n        </div>\n\n        <DropdownMenuSeparator />\n\n        <DropdownMenuItem icon=\"logoutCircleLine\">Log out</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["Avatar","UserBadge","Button","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuSeparator","DropdownMenuTrigger","ShinyText","UsageGauge","used","total","percentage","Math","min","div","className","style","width","UserProfile","userName","userEmail","creditsUsed","creditsTotal","asChild","content","fallback","name","align","span","icon","logoName","radius","type","text"],"mappings":";AAAA,SAAQA,MAAM,QAAO,oBAAoB;AACzC,SAAQC,SAAS,QAAO,mBAAmB;AAC3C,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SACEC,YAAY,EACZC,mBAAmB,EACnBC,gBAAgB,EAChBC,qBAAqB,EACrBC,mBAAmB,QACd,2BAA2B;AAClC,SAAQC,SAAS,QAAO,wBAAwB;AAEhD,SAASC,WAAW,EAACC,IAAI,EAAEC,KAAK,EAAgC;IAC9D,MAAMC,aAAaD,SAAS,IAAI,IAAIE,KAAKC,GAAG,CAAC,AAACJ,OAAOC,QAAS,KAAK;IAEnE,qBACE,KAACI;QAAIC,WAAU;kBACb,cAAA,KAACD;YAAIC,WAAU;YAAyCC,OAAO;gBAACC,OAAO,GAAGN,WAAW,CAAC,CAAC;YAAA;;;AAG7F;AAEA,OAAO,SAASO;IACd,MAAMC,WAAW;IACjB,MAAMC,YAAY;IAClB,MAAMC,cAAc;IACpB,MAAMC,eAAe;IAErB,qBACE,MAACpB;;0BACC,KAACI;gBAAoBiB,OAAO;0BAC1B,cAAA,MAACT;oBAAIC,WAAU;;sCACb,KAAChB;4BAAOgB,WAAU;4BAAoBS,SAAQ;4BAAQC,UAAS;;sCAC/D,KAACzB;4BAAU0B,MAAMP;4BAAUJ,WAAU;;;;;0BAGzC,MAACZ;gBAAoBwB,OAAM;gBAAMZ,WAAU;;kCACzC,MAACD;wBAAIC,WAAU;;0CACb,KAAChB;gCAAOgB,WAAU;gCAAmBS,SAAQ;gCAAQC,UAAS;;0CAC9D,MAACX;gCAAIC,WAAU;;kDACb,KAACa;wCAAKb,WAAU;kDACbI;;kDAEH,KAACS;wCAAKb,WAAU;kDACbK;;;;;;kCAKP,KAACf;kCAED,KAACD;wBAAiByB,MAAK;kCAAiB;;kCACxC,KAACzB;wBAAiByB,MAAK;kCAAW;;kCAElC,KAACxB;kCAED,MAACS;wBAAIC,WAAU;;0CACb,MAACD;gCAAIC,WAAU;;kDACb,MAACD;wCAAIC,WAAU;;0DACb,KAAChB;gDAAOgB,WAAU;gDAAUS,SAAQ;gDAAOM,UAAS;gDAASC,QAAO;;0DACpE,KAACH;gDAAKb,WAAU;0DAAgE;;;;kDAIlF,MAACa;wCAAKb,WAAU;;4CACbM;4CAAY;4CAAIC;;;;;0CAGrB,KAACd;gCAAWC,MAAMY;gCAAaX,OAAOY;;0CACtC,MAACM;gCAAKb,WAAU;;oCACbO;oCAAa;;;;;kCAIlB,KAACR;wBAAIC,WAAU;kCACb,cAAA,KAACd;4BAAO+B,MAAK;4BAASjB,WAAU;sCAC9B,cAAA,KAACR;gCACC0B,MAAK;gCACLlB,WAAU;;;;kCAKhB,KAACV;kCAED,KAACD;wBAAiByB,MAAK;kCAAmB;;;;;;AAIlD"}

package/dist/components/dashboard/dashboard.d.ts

@@ -0,0 +1,2 @@
+export declare function Dashboard(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dashboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/dashboard.tsx"],"names":[],"mappings":"AAWA,wBAAgB,SAAS,4CAiDxB"}

package/dist/components/dashboard/dashboard.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMotionValueEvent, useScroll } from 'framer-motion';
+import { useCallback, useRef, useState } from 'react';
+import { AnalyticsContent } from './components/analytics-content.js';
+import { AnimatedLogo } from './components/animated-logo.js';
+import { JobsContent } from './components/jobs-content.js';
+import { TopMenu } from './components/top-menu.js';
+import { Topbar } from './components/topbar.js';
+const LOGO_HEIGHT = 48;
+const TOPBAR_HEIGHT = 41;
+export function Dashboard() {
+    const containerRef = useRef(null);
+    const topbarRef = useRef(null);
+    const [scrollProgress, setScrollProgress] = useState(0);
+    const [activeTab, setActiveTab] = useState('analytics');
+    const { scrollY } = useScroll({
+        container: containerRef
+    });
+    useMotionValueEvent(scrollY, 'change', (latest)=>{
+        const progress = Math.min(latest / TOPBAR_HEIGHT, 1);
+        setScrollProgress(progress);
+    });
+    const handleTabChange = useCallback((tab)=>{
+        setActiveTab(tab);
+        if (containerRef.current) {
+            containerRef.current.scrollTo({
+                top: 0,
+                behavior: 'instant'
+            });
+        }
+        setScrollProgress(0);
+    }, []);
+    const isTopbarHidden = scrollProgress >= 1;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col w-full h-full",
+        children: [
+            /*#__PURE__*/ _jsx(AnimatedLogo, {
+                scrollProgress: scrollProgress
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: containerRef,
+                className: "flex flex-col w-full h-full overflow-auto",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        ref: topbarRef,
+                        children: /*#__PURE__*/ _jsx(Topbar, {
+                            hideLogo: isTopbarHidden
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "sticky top-0 z-40 border-b border-border-neutral-strong bg-background-neutral-base",
+                        children: /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                paddingLeft: `${(1 - (1 - scrollProgress) ** 3) * (LOGO_HEIGHT - 8)}px`
+                            },
+                            children: /*#__PURE__*/ _jsx(TopMenu, {
+                                activeTab: activeTab,
+                                onTabChange: handleTabChange
+                            })
+                        })
+                    }),
+                    activeTab === 'analytics' && /*#__PURE__*/ _jsx(AnalyticsContent, {}),
+                    activeTab === 'jobs' && /*#__PURE__*/ _jsx(JobsContent, {})
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=dashboard.js.map

package/dist/components/dashboard/dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dashboard/dashboard.tsx"],"sourcesContent":["import {useMotionValueEvent, useScroll} from 'framer-motion';\nimport {useCallback, useRef, useState} from 'react';\nimport {AnalyticsContent} from './components/analytics-content';\nimport {AnimatedLogo} from './components/animated-logo';\nimport {JobsContent} from './components/jobs-content';\nimport {TopMenu} from './components/top-menu';\nimport {Topbar} from './components/topbar';\n\nconst LOGO_HEIGHT = 48;\nconst TOPBAR_HEIGHT = 41;\n\nexport function Dashboard() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const topbarRef = useRef<HTMLDivElement>(null);\n  const [scrollProgress, setScrollProgress] = useState(0);\n  const [activeTab, setActiveTab] = useState('analytics');\n\n  const {scrollY} = useScroll({\n    container: containerRef,\n  });\n\n  useMotionValueEvent(scrollY, 'change', (latest) => {\n    const progress = Math.min(latest / TOPBAR_HEIGHT, 1);\n    setScrollProgress(progress);\n  });\n\n  const handleTabChange = useCallback((tab: string) => {\n    setActiveTab(tab);\n    if (containerRef.current) {\n      containerRef.current.scrollTo({top: 0, behavior: 'instant'});\n    }\n    setScrollProgress(0);\n  }, []);\n\n  const isTopbarHidden = scrollProgress >= 1;\n\n  return (\n    <div className=\"flex flex-col w-full h-full\">\n      <AnimatedLogo scrollProgress={scrollProgress} />\n\n      <div ref={containerRef} className=\"flex flex-col w-full h-full overflow-auto\">\n        <div ref={topbarRef}>\n          <Topbar hideLogo={isTopbarHidden} />\n        </div>\n\n        <div className=\"sticky top-0 z-40 border-b border-border-neutral-strong bg-background-neutral-base\">\n          <div\n            style={{\n              paddingLeft: `${(1 - (1 - scrollProgress) ** 3) * (LOGO_HEIGHT - 8)}px`,\n            }}\n          >\n            <TopMenu activeTab={activeTab} onTabChange={handleTabChange} />\n          </div>\n        </div>\n\n        {activeTab === 'analytics' && <AnalyticsContent />}\n        {activeTab === 'jobs' && <JobsContent />}\n      </div>\n    </div>\n  );\n}\n"],"names":["useMotionValueEvent","useScroll","useCallback","useRef","useState","AnalyticsContent","AnimatedLogo","JobsContent","TopMenu","Topbar","LOGO_HEIGHT","TOPBAR_HEIGHT","Dashboard","containerRef","topbarRef","scrollProgress","setScrollProgress","activeTab","setActiveTab","scrollY","container","latest","progress","Math","min","handleTabChange","tab","current","scrollTo","top","behavior","isTopbarHidden","div","className","ref","hideLogo","style","paddingLeft","onTabChange"],"mappings":";AAAA,SAAQA,mBAAmB,EAAEC,SAAS,QAAO,gBAAgB;AAC7D,SAAQC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AACpD,SAAQC,gBAAgB,QAAO,iCAAiC;AAChE,SAAQC,YAAY,QAAO,6BAA6B;AACxD,SAAQC,WAAW,QAAO,4BAA4B;AACtD,SAAQC,OAAO,QAAO,wBAAwB;AAC9C,SAAQC,MAAM,QAAO,sBAAsB;AAE3C,MAAMC,cAAc;AACpB,MAAMC,gBAAgB;AAEtB,OAAO,SAASC;IACd,MAAMC,eAAeV,OAAuB;IAC5C,MAAMW,YAAYX,OAAuB;IACzC,MAAM,CAACY,gBAAgBC,kBAAkB,GAAGZ,SAAS;IACrD,MAAM,CAACa,WAAWC,aAAa,GAAGd,SAAS;IAE3C,MAAM,EAACe,OAAO,EAAC,GAAGlB,UAAU;QAC1BmB,WAAWP;IACb;IAEAb,oBAAoBmB,SAAS,UAAU,CAACE;QACtC,MAAMC,WAAWC,KAAKC,GAAG,CAACH,SAASV,eAAe;QAClDK,kBAAkBM;IACpB;IAEA,MAAMG,kBAAkBvB,YAAY,CAACwB;QACnCR,aAAaQ;QACb,IAAIb,aAAac,OAAO,EAAE;YACxBd,aAAac,OAAO,CAACC,QAAQ,CAAC;gBAACC,KAAK;gBAAGC,UAAU;YAAS;QAC5D;QACAd,kBAAkB;IACpB,GAAG,EAAE;IAEL,MAAMe,iBAAiBhB,kBAAkB;IAEzC,qBACE,MAACiB;QAAIC,WAAU;;0BACb,KAAC3B;gBAAaS,gBAAgBA;;0BAE9B,MAACiB;gBAAIE,KAAKrB;gBAAcoB,WAAU;;kCAChC,KAACD;wBAAIE,KAAKpB;kCACR,cAAA,KAACL;4BAAO0B,UAAUJ;;;kCAGpB,KAACC;wBAAIC,WAAU;kCACb,cAAA,KAACD;4BACCI,OAAO;gCACLC,aAAa,GAAG,AAAC,CAAA,IAAI,AAAC,CAAA,IAAItB,cAAa,KAAM,CAAA,IAAML,CAAAA,cAAc,CAAA,EAAG,EAAE,CAAC;4BACzE;sCAEA,cAAA,KAACF;gCAAQS,WAAWA;gCAAWqB,aAAab;;;;oBAI/CR,cAAc,6BAAe,KAACZ;oBAC9BY,cAAc,wBAAU,KAACV;;;;;AAIlC"}

package/dist/components/dashboard/dashboard.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dashboard } from './dashboard.js';
+const meta = {
+    title: 'Dashboard/Example',
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'fullscreen',
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "h-screen w-full",
+            children: /*#__PURE__*/ _jsx(Dashboard, {})
+        })
+};
+
+//# sourceMappingURL=dashboard.stories.js.map

package/dist/components/dashboard/dashboard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dashboard/dashboard.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Dashboard} from './dashboard';\n\nconst meta = {\n  title: 'Dashboard/Example',\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'fullscreen',\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n} satisfies Meta;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"h-screen w-full\">\n      <Dashboard />\n    </div>\n  ),\n};\n"],"names":["Dashboard","meta","title","tags","parameters","layout","viewport","defaultViewport","Default","render","div","className"],"mappings":";AACA,SAAQA,SAAS,QAAO,cAAc;AAEtC,MAAMC,OAAO;IACXC,OAAO;IACPC,MAAM;QAAC;KAAW;IAClBC,YAAY;QACVC,QAAQ;QACRC,UAAU;YACRC,iBAAiB;QACnB;IACF;AACF;AAEA,eAAeN,KAAK;AAIpB,OAAO,MAAMO,UAAiB;IAC5BC,QAAQ,kBACN,KAACC;YAAIC,WAAU;sBACb,cAAA,KAACX;;AAGP,EAAE"}

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

@@ -0,0 +1,2 @@
+export * from './dashboard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/dashboard/index.js

@@ -0,0 +1,3 @@
+export * from './dashboard.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dashboard/index.ts"],"sourcesContent":["export * from './dashboard';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc"}

package/dist/components/form/form.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Button } from '../../components/button/index.js';
 import { Checkbox, CheckboxLabel, CheckboxLinks } from '../../components/checkbox/index.js';
@@ -89,7 +90,11 @@ function BasicFormExample() {
     });
 }
 export const Basic = {
-    render: ()=>/*#__PURE__*/ _jsx(BasicFormExample, {})
+    render: ()=>/*#__PURE__*/ _jsx(BasicFormExample, {}),
+    play: async (context)=>{
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        await argosScreenshot(context, 'Form Basic');
+    }
 };
 const componentsFormSchema = z.object({
     example: z.string().min(1, 'This field is required'),

package/dist/components/form/form.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form/form.stories.tsx"],"sourcesContent":["import {zodResolver} from '@hookform/resolvers/zod';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button';\nimport {Checkbox, CheckboxLabel, CheckboxLinks} from 'components/checkbox';\nimport {Input} from 'components/input';\nimport {Textarea} from 'components/textarea';\nimport {Code, Header} from 'components/typography';\nimport {useForm} from 'react-hook-form';\nimport {z} from 'zod';\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from './form';\n\nconst meta = {\n  title: 'Components/Form',\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst basicFormSchema = z.object({\n  username: z.string().min(3, 'Username must be at least 3 characters'),\n  email: z.string().email('Invalid email address'),\n});\n\ntype BasicFormValues = z.infer<typeof basicFormSchema>;\n\nfunction BasicFormExample() {\n  const form = useForm<BasicFormValues>({\n    resolver: zodResolver(basicFormSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n    },\n  });\n\n  function onSubmit(data: BasicFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>This is your public display name.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormDescription>We'll never share your email.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const Basic: Story = {\n  render: () => <BasicFormExample />,\n};\n\nconst componentsFormSchema = z.object({\n  example: z.string().min(1, 'This field is required'),\n  exampleTextarea: z.string().min(1, 'This field is required'),\n});\n\ntype ComponentsFormValues = z.infer<typeof componentsFormSchema>;\n\nfunction FormComponentsExample() {\n  const form = useForm<ComponentsFormValues>({\n    resolver: zodResolver(componentsFormSchema),\n    defaultValues: {\n      example: '',\n      exampleTextarea: '',\n    },\n  });\n\n  return (\n    <Form {...form}>\n      <div className=\"flex flex-col gap-32 w-full max-w-md\">\n        <div className=\"flex flex-col gap-16\">\n          <Header variant=\"h3\">Form Components</Header>\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Individual form components work together within FormField\n          </Code>\n        </div>\n\n        <form className=\"space-y-8\">\n          <FormField\n            control={form.control}\n            name=\"example\"\n            render={({field}) => (\n              <FormItem>\n                <FormLabel>Form Label</FormLabel>\n                <FormControl>\n                  <Input placeholder=\"Form Control with Input\" {...field} />\n                </FormControl>\n                <FormDescription>This is a form description.</FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n\n          <FormField\n            control={form.control}\n            name=\"exampleTextarea\"\n            render={({field}) => (\n              <FormItem>\n                <FormLabel>Form Label</FormLabel>\n                <FormControl>\n                  <Textarea placeholder=\"Form Control with Textarea\" {...field} />\n                </FormControl>\n                <FormDescription>This is a form description.</FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n        </form>\n      </div>\n    </Form>\n  );\n}\n\nexport const Components: Story = {\n  render: () => <FormComponentsExample />,\n};\n\nconst checkboxFormSchema = z.object({\n  username: z.string().min(3, 'Username must be at least 3 characters'),\n  email: z.string().email('Invalid email address'),\n  newsletter: z.boolean(),\n  notifications: z.boolean(),\n});\n\ntype CheckboxFormValues = z.infer<typeof checkboxFormSchema>;\n\nfunction FormWithCheckboxExample() {\n  const form = useForm<CheckboxFormValues>({\n    resolver: zodResolver(checkboxFormSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      newsletter: false,\n      notifications: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>This is your public display name.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormDescription>We'll never share your email.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"newsletter\"\n          render={({field}) => (\n            <FormItem className=\"flex flex-row items-center gap-8 pt-4\">\n              <FormControl>\n                <Checkbox checked={field.value} onCheckedChange={field.onChange} />\n              </FormControl>\n              <FormLabel>Subscribe to newsletter</FormLabel>\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"notifications\"\n          render={({field}) => (\n            <FormItem className=\"flex flex-row items-center gap-8 pt-4 pb-8\">\n              <FormControl>\n                <Checkbox checked={field.value} onCheckedChange={field.onChange} />\n              </FormControl>\n              <FormLabel>Enable notifications</FormLabel>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckbox: Story = {\n  render: () => <FormWithCheckboxExample />,\n};\n\nconst checkboxLabelSchema = z.object({\n  username: z.string().min(1, 'Username is required'),\n  email: z.string().email('Invalid email address'),\n  terms: z.boolean().refine((val) => val === true, {\n    message: 'You must accept the terms and conditions',\n  }),\n  marketing: z.boolean(),\n});\n\ntype CheckboxLabelFormValues = z.infer<typeof checkboxLabelSchema>;\n\nfunction FormWithCheckboxLabelExample() {\n  const form = useForm<CheckboxLabelFormValues>({\n    resolver: zodResolver(checkboxLabelSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      terms: false,\n      marketing: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLabelFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"terms\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"I agree to the terms and conditions\"\n                  description=\"By checking this box, you agree to our terms of service and privacy policy.\"\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"marketing\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"I want to receive marketing emails\"\n                  description=\"Stay updated with our latest products and offers.\"\n                  optional\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLabel: Story = {\n  render: () => <FormWithCheckboxLabelExample />,\n};\n\nconst checkboxLinksSchema = z.object({\n  username: z.string().min(1, 'Username is required'),\n  email: z.string().email('Invalid email address'),\n  acceptPolicies: z.boolean().refine((val) => val === true, {\n    message: 'You must accept the policies to continue',\n  }),\n});\n\ntype CheckboxLinksFormValues = z.infer<typeof checkboxLinksSchema>;\n\nfunction FormWithCheckboxLinksExample() {\n  const form = useForm<CheckboxLinksFormValues>({\n    resolver: zodResolver(checkboxLinksSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      acceptPolicies: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLinksFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"acceptPolicies\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLinks\n                  label=\"Accept policies\"\n                  links={[\n                    {label: 'Terms of use', href: '#'},\n                    {label: 'Privacy Policy', href: '#'},\n                  ]}\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLinks: Story = {\n  render: () => <FormWithCheckboxLinksExample />,\n};\n\nconst checkboxLabelBorderSchema = z.object({\n  plan: z.string().min(1, 'Plan name is required'),\n  newsletter: z.boolean(),\n});\n\ntype CheckboxLabelBorderFormValues = z.infer<typeof checkboxLabelBorderSchema>;\n\nfunction FormWithCheckboxLabelBorderExample() {\n  const form = useForm<CheckboxLabelBorderFormValues>({\n    resolver: zodResolver(checkboxLabelBorderSchema),\n    defaultValues: {\n      plan: '',\n      newsletter: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLabelBorderFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"plan\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Select a plan</FormLabel>\n              <FormControl>\n                <Input placeholder=\"Enter plan name\" {...field} />\n              </FormControl>\n              <FormDescription>Choose the plan that best fits your needs.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"newsletter\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"Subscribe to our newsletter\"\n                  description=\"Get weekly updates, tips, and exclusive content delivered to your inbox.\"\n                  optional\n                  showInfoIcon\n                  border\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" className=\"mt-4\">\n          Submit\n        </Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLabelBorder: Story = {\n  render: () => <FormWithCheckboxLabelBorderExample />,\n};\n"],"names":["zodResolver","Button","Checkbox","CheckboxLabel","CheckboxLinks","Input","Textarea","Code","Header","useForm","z","Form","FormControl","FormDescription","FormField","FormItem","FormLabel","FormMessage","meta","title","tags","basicFormSchema","object","username","string","min","email","BasicFormExample","form","resolver","defaultValues","onSubmit","data","console","log","handleSubmit","className","control","name","render","field","placeholder","type","Basic","componentsFormSchema","example","exampleTextarea","FormComponentsExample","div","variant","Components","checkboxFormSchema","newsletter","boolean","notifications","FormWithCheckboxExample","checked","value","onCheckedChange","onChange","WithCheckbox","checkboxLabelSchema","terms","refine","val","message","marketing","FormWithCheckboxLabelExample","label","description","optional","WithCheckboxLabel","checkboxLinksSchema","acceptPolicies","FormWithCheckboxLinksExample","links","href","WithCheckboxLinks","checkboxLabelBorderSchema","plan","FormWithCheckboxLabelBorderExample","showInfoIcon","border","WithCheckboxLabelBorder"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/form/form.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport {zodResolver} from '@hookform/resolvers/zod';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button';\nimport {Checkbox, CheckboxLabel, CheckboxLinks} from 'components/checkbox';\nimport {Input} from 'components/input';\nimport {Textarea} from 'components/textarea';\nimport {Code, Header} from 'components/typography';\nimport {useForm} from 'react-hook-form';\nimport {z} from 'zod';\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from './form';\n\nconst meta = {\n  title: 'Components/Form',\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst basicFormSchema = z.object({\n  username: z.string().min(3, 'Username must be at least 3 characters'),\n  email: z.string().email('Invalid email address'),\n});\n\ntype BasicFormValues = z.infer<typeof basicFormSchema>;\n\nfunction BasicFormExample() {\n  const form = useForm<BasicFormValues>({\n    resolver: zodResolver(basicFormSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n    },\n  });\n\n  function onSubmit(data: BasicFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>This is your public display name.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormDescription>We'll never share your email.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const Basic: Story = {\n  render: () => <BasicFormExample />,\n  play: async (context) => {\n    await new Promise((resolve) => setTimeout(resolve, 100));\n    await argosScreenshot(context, 'Form Basic');\n  },\n};\n\nconst componentsFormSchema = z.object({\n  example: z.string().min(1, 'This field is required'),\n  exampleTextarea: z.string().min(1, 'This field is required'),\n});\n\ntype ComponentsFormValues = z.infer<typeof componentsFormSchema>;\n\nfunction FormComponentsExample() {\n  const form = useForm<ComponentsFormValues>({\n    resolver: zodResolver(componentsFormSchema),\n    defaultValues: {\n      example: '',\n      exampleTextarea: '',\n    },\n  });\n\n  return (\n    <Form {...form}>\n      <div className=\"flex flex-col gap-32 w-full max-w-md\">\n        <div className=\"flex flex-col gap-16\">\n          <Header variant=\"h3\">Form Components</Header>\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Individual form components work together within FormField\n          </Code>\n        </div>\n\n        <form className=\"space-y-8\">\n          <FormField\n            control={form.control}\n            name=\"example\"\n            render={({field}) => (\n              <FormItem>\n                <FormLabel>Form Label</FormLabel>\n                <FormControl>\n                  <Input placeholder=\"Form Control with Input\" {...field} />\n                </FormControl>\n                <FormDescription>This is a form description.</FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n\n          <FormField\n            control={form.control}\n            name=\"exampleTextarea\"\n            render={({field}) => (\n              <FormItem>\n                <FormLabel>Form Label</FormLabel>\n                <FormControl>\n                  <Textarea placeholder=\"Form Control with Textarea\" {...field} />\n                </FormControl>\n                <FormDescription>This is a form description.</FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n        </form>\n      </div>\n    </Form>\n  );\n}\n\nexport const Components: Story = {\n  render: () => <FormComponentsExample />,\n};\n\nconst checkboxFormSchema = z.object({\n  username: z.string().min(3, 'Username must be at least 3 characters'),\n  email: z.string().email('Invalid email address'),\n  newsletter: z.boolean(),\n  notifications: z.boolean(),\n});\n\ntype CheckboxFormValues = z.infer<typeof checkboxFormSchema>;\n\nfunction FormWithCheckboxExample() {\n  const form = useForm<CheckboxFormValues>({\n    resolver: zodResolver(checkboxFormSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      newsletter: false,\n      notifications: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>This is your public display name.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormDescription>We'll never share your email.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"newsletter\"\n          render={({field}) => (\n            <FormItem className=\"flex flex-row items-center gap-8 pt-4\">\n              <FormControl>\n                <Checkbox checked={field.value} onCheckedChange={field.onChange} />\n              </FormControl>\n              <FormLabel>Subscribe to newsletter</FormLabel>\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"notifications\"\n          render={({field}) => (\n            <FormItem className=\"flex flex-row items-center gap-8 pt-4 pb-8\">\n              <FormControl>\n                <Checkbox checked={field.value} onCheckedChange={field.onChange} />\n              </FormControl>\n              <FormLabel>Enable notifications</FormLabel>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckbox: Story = {\n  render: () => <FormWithCheckboxExample />,\n};\n\nconst checkboxLabelSchema = z.object({\n  username: z.string().min(1, 'Username is required'),\n  email: z.string().email('Invalid email address'),\n  terms: z.boolean().refine((val) => val === true, {\n    message: 'You must accept the terms and conditions',\n  }),\n  marketing: z.boolean(),\n});\n\ntype CheckboxLabelFormValues = z.infer<typeof checkboxLabelSchema>;\n\nfunction FormWithCheckboxLabelExample() {\n  const form = useForm<CheckboxLabelFormValues>({\n    resolver: zodResolver(checkboxLabelSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      terms: false,\n      marketing: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLabelFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"terms\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"I agree to the terms and conditions\"\n                  description=\"By checking this box, you agree to our terms of service and privacy policy.\"\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"marketing\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"I want to receive marketing emails\"\n                  description=\"Stay updated with our latest products and offers.\"\n                  optional\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLabel: Story = {\n  render: () => <FormWithCheckboxLabelExample />,\n};\n\nconst checkboxLinksSchema = z.object({\n  username: z.string().min(1, 'Username is required'),\n  email: z.string().email('Invalid email address'),\n  acceptPolicies: z.boolean().refine((val) => val === true, {\n    message: 'You must accept the policies to continue',\n  }),\n});\n\ntype CheckboxLinksFormValues = z.infer<typeof checkboxLinksSchema>;\n\nfunction FormWithCheckboxLinksExample() {\n  const form = useForm<CheckboxLinksFormValues>({\n    resolver: zodResolver(checkboxLinksSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      acceptPolicies: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLinksFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"acceptPolicies\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLinks\n                  label=\"Accept policies\"\n                  links={[\n                    {label: 'Terms of use', href: '#'},\n                    {label: 'Privacy Policy', href: '#'},\n                  ]}\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLinks: Story = {\n  render: () => <FormWithCheckboxLinksExample />,\n};\n\nconst checkboxLabelBorderSchema = z.object({\n  plan: z.string().min(1, 'Plan name is required'),\n  newsletter: z.boolean(),\n});\n\ntype CheckboxLabelBorderFormValues = z.infer<typeof checkboxLabelBorderSchema>;\n\nfunction FormWithCheckboxLabelBorderExample() {\n  const form = useForm<CheckboxLabelBorderFormValues>({\n    resolver: zodResolver(checkboxLabelBorderSchema),\n    defaultValues: {\n      plan: '',\n      newsletter: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLabelBorderFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"plan\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Select a plan</FormLabel>\n              <FormControl>\n                <Input placeholder=\"Enter plan name\" {...field} />\n              </FormControl>\n              <FormDescription>Choose the plan that best fits your needs.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"newsletter\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"Subscribe to our newsletter\"\n                  description=\"Get weekly updates, tips, and exclusive content delivered to your inbox.\"\n                  optional\n                  showInfoIcon\n                  border\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" className=\"mt-4\">\n          Submit\n        </Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLabelBorder: Story = {\n  render: () => <FormWithCheckboxLabelBorderExample />,\n};\n"],"names":["argosScreenshot","zodResolver","Button","Checkbox","CheckboxLabel","CheckboxLinks","Input","Textarea","Code","Header","useForm","z","Form","FormControl","FormDescription","FormField","FormItem","FormLabel","FormMessage","meta","title","tags","basicFormSchema","object","username","string","min","email","BasicFormExample","form","resolver","defaultValues","onSubmit","data","console","log","handleSubmit","className","control","name","render","field","placeholder","type","Basic","play","context","Promise","resolve","setTimeout","componentsFormSchema","example","exampleTextarea","FormComponentsExample","div","variant","Components","checkboxFormSchema","newsletter","boolean","notifications","FormWithCheckboxExample","checked","value","onCheckedChange","onChange","WithCheckbox","checkboxLabelSchema","terms","refine","val","message","marketing","FormWithCheckboxLabelExample","label","description","optional","WithCheckboxLabel","checkboxLinksSchema","acceptPolicies","FormWithCheckboxLinksExample","links","href","WithCheckboxLinks","checkboxLabelBorderSchema","plan","FormWithCheckboxLabelBorderExample","showInfoIcon","border","WithCheckboxLabelBorder"],"mappings":"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"}

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

@@ -23,7 +23,8 @@ export declare const iconNames: IconName[];
 type BaseIconProps = ComponentProps<RemixiconComponentType>;
 type IconProps = {
     name: IconName;
-} & Omit<BaseIconProps, 'name'>;
-export declare function Icon({ name, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    size?: number | string;
+} & Omit<BaseIconProps, 'name' | 'size' | 'width' | 'height'>;
+export declare function Icon({ name, size, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=icon.d.ts.map

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,KAAK,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAiB7D,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;AAoBlB,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;CAeuC,CAAC;AAE5D,QAAA,MAAM,QAAQ,EAIT,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,OAAO,cAAc,CAAC;AAEpE,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAC5D,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,KAAK,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAiB7D,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;AAoBlB,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;CAeuC,CAAC;AAE5D,QAAA,MAAM,QAAQ,EAIT,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,OAAO,cAAc,CAAC;AAEpE,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAC5D,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,GAAG,IAAI,CAC9D,aAAa,EACb,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CACrC,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAIrD"}

package/dist/components/icon/icon.js

@@ -40,10 +40,15 @@ const iconsMap = {
     ...customIconsMap
 };
 export const iconNames = Object.keys(iconsMap);
-export function Icon({ name, ...props }) {
+export function Icon({ name, size, ...props }) {
     const IconComponent = iconsMap[name];
+    const svgProps = size && typeof size === 'number' ? {
+        ...props,
+        width: size,
+        height: size
+    } : props;
     return /*#__PURE__*/ _jsx(IconComponent, {
-        ...props
+        ...svgProps
     });
 }