@shipfox/react-ui 0.2.0 → 0.4.0

package/dist/components/icon/custom/slack-logo.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SlackLogo(props) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        viewBox: "0 0 28 28",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Slack Logo"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M6.66988 17.376C6.66988 18.8336 5.4918 20.0117 4.03416 20.0117C2.57653 20.0117 1.39844 18.8336 1.39844 17.376C1.39844 15.9183 2.57653 14.7402 4.03416 14.7402H6.66988V17.376ZM7.98775 17.376C7.98775 15.9183 9.16583 14.7402 10.6235 14.7402C12.0811 14.7402 13.2592 15.9183 13.2592 17.376V23.9653C13.2592 25.4229 12.0811 26.601 10.6235 26.601C9.16583 26.601 7.98775 25.4229 7.98775 23.9653V17.376Z",
+                fill: "#E01E5A"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M10.6279 6.66102C9.17271 6.66102 7.99661 5.48492 7.99661 4.02973C7.99661 2.57455 9.17271 1.39844 10.6279 1.39844C12.0831 1.39844 13.2592 2.57455 13.2592 4.02973V6.66102H10.6279ZM10.6279 7.99661C12.0831 7.99661 13.2592 9.17271 13.2592 10.6279C13.2592 12.0831 12.0831 13.2592 10.6279 13.2592H4.02973C2.57455 13.2592 1.39844 12.0831 1.39844 10.6279C1.39844 9.17271 2.57455 7.99661 4.02973 7.99661H10.6279Z",
+                fill: "#36C5F0"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M21.3295 10.6279C21.3295 9.17271 22.5076 7.99661 23.9653 7.99661C25.4229 7.99661 26.601 9.17271 26.601 10.6279C26.601 12.0831 25.4229 13.2592 23.9653 13.2592H21.3295V10.6279ZM20.0117 10.6279C20.0117 12.0831 18.8336 13.2592 17.376 13.2592C15.9183 13.2592 14.7402 12.0831 14.7402 10.6279V4.02973C14.7402 2.57455 15.9183 1.39844 17.376 1.39844C18.8336 1.39844 20.0117 2.57455 20.0117 4.02973V10.6279Z",
+                fill: "#2EB67D"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M17.3715 21.3295C18.8267 21.3295 20.0028 22.5076 20.0028 23.9653C20.0028 25.4229 18.8267 26.601 17.3715 26.601C15.9163 26.601 14.7402 25.4229 14.7402 23.9653V21.3295H17.3715ZM17.3715 20.0117C15.9163 20.0117 14.7402 18.8336 14.7402 17.376C14.7402 15.9183 15.9163 14.7402 17.3715 14.7402H23.9697C25.4249 14.7402 26.601 15.9183 26.601 17.376C26.601 18.8336 25.4249 20.0117 23.9697 20.0117H17.3715Z",
+                fill: "#ECB22E"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=slack-logo.js.map

package/dist/components/icon/custom/slack-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/icon/custom/slack-logo.tsx"],"sourcesContent":["import type {RemixiconComponentType} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\n\ntype SlackLogoProps = ComponentProps<RemixiconComponentType>;\n\nexport function SlackLogo(props: SlackLogoProps) {\n  return (\n    <svg\n      viewBox=\"0 0 28 28\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      {...props}\n    >\n      <title>Slack Logo</title>\n      <path\n        d=\"M6.66988 17.376C6.66988 18.8336 5.4918 20.0117 4.03416 20.0117C2.57653 20.0117 1.39844 18.8336 1.39844 17.376C1.39844 15.9183 2.57653 14.7402 4.03416 14.7402H6.66988V17.376ZM7.98775 17.376C7.98775 15.9183 9.16583 14.7402 10.6235 14.7402C12.0811 14.7402 13.2592 15.9183 13.2592 17.376V23.9653C13.2592 25.4229 12.0811 26.601 10.6235 26.601C9.16583 26.601 7.98775 25.4229 7.98775 23.9653V17.376Z\"\n        fill=\"#E01E5A\"\n      />\n      <path\n        d=\"M10.6279 6.66102C9.17271 6.66102 7.99661 5.48492 7.99661 4.02973C7.99661 2.57455 9.17271 1.39844 10.6279 1.39844C12.0831 1.39844 13.2592 2.57455 13.2592 4.02973V6.66102H10.6279ZM10.6279 7.99661C12.0831 7.99661 13.2592 9.17271 13.2592 10.6279C13.2592 12.0831 12.0831 13.2592 10.6279 13.2592H4.02973C2.57455 13.2592 1.39844 12.0831 1.39844 10.6279C1.39844 9.17271 2.57455 7.99661 4.02973 7.99661H10.6279Z\"\n        fill=\"#36C5F0\"\n      />\n      <path\n        d=\"M21.3295 10.6279C21.3295 9.17271 22.5076 7.99661 23.9653 7.99661C25.4229 7.99661 26.601 9.17271 26.601 10.6279C26.601 12.0831 25.4229 13.2592 23.9653 13.2592H21.3295V10.6279ZM20.0117 10.6279C20.0117 12.0831 18.8336 13.2592 17.376 13.2592C15.9183 13.2592 14.7402 12.0831 14.7402 10.6279V4.02973C14.7402 2.57455 15.9183 1.39844 17.376 1.39844C18.8336 1.39844 20.0117 2.57455 20.0117 4.02973V10.6279Z\"\n        fill=\"#2EB67D\"\n      />\n      <path\n        d=\"M17.3715 21.3295C18.8267 21.3295 20.0028 22.5076 20.0028 23.9653C20.0028 25.4229 18.8267 26.601 17.3715 26.601C15.9163 26.601 14.7402 25.4229 14.7402 23.9653V21.3295H17.3715ZM17.3715 20.0117C15.9163 20.0117 14.7402 18.8336 14.7402 17.376C14.7402 15.9183 15.9163 14.7402 17.3715 14.7402H23.9697C25.4249 14.7402 26.601 15.9183 26.601 17.376C26.601 18.8336 25.4249 20.0117 23.9697 20.0117H17.3715Z\"\n        fill=\"#ECB22E\"\n      />\n    </svg>\n  );\n}\n"],"names":["SlackLogo","props","svg","viewBox","fill","xmlns","aria-hidden","focusable","title","path","d"],"mappings":";AAKA,OAAO,SAASA,UAAUC,KAAqB;IAC7C,qBACE,MAACC;QACCC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACNC,eAAY;QACZC,WAAU;QACT,GAAGN,KAAK;;0BAET,KAACO;0BAAM;;0BACP,KAACC;gBACCC,GAAE;gBACFN,MAAK;;0BAEP,KAACK;gBACCC,GAAE;gBACFN,MAAK;;0BAEP,KAACK;gBACCC,GAAE;gBACFN,MAAK;;0BAEP,KAACK;gBACCC,GAAE;gBACFN,MAAK;;;;AAIb"}

package/dist/components/icon/custom/stripe-logo.d.ts

@@ -0,0 +1,8 @@
+import type { RemixiconComponentType } from '@remixicon/react';
+import type { ComponentProps } from 'react';
+type StripeLogoProps = ComponentProps<RemixiconComponentType> & {
+    color?: string;
+};
+export declare function StripeLogo({ color, ...props }: StripeLogoProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=stripe-logo.d.ts.map

package/dist/components/icon/custom/stripe-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stripe-logo.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/custom/stripe-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAE1C,KAAK,eAAe,GAAG,cAAc,CAAC,sBAAsB,CAAC,GAAG;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAC,KAAiB,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CAmBxE"}

package/dist/components/icon/custom/stripe-logo.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function StripeLogo({ color = '#6772E5', ...props }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        viewBox: "0 0 28 28",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Stripe Logo"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M12.3115 9.17663C12.3115 8.15771 13.1593 7.76352 14.5293 7.76352C16.7967 7.81251 19.0215 8.38821 21.0281 9.44512V3.29438C18.959 2.48126 16.7523 2.07592 14.5293 2.10068C9.24873 2.10068 5.70703 4.86665 5.70703 9.48529C5.70703 16.7115 15.63 15.5379 15.63 18.6526C15.63 19.8709 14.5888 20.2487 13.1236 20.2487C10.9631 20.2487 8.17253 19.3547 5.9837 18.1647V24.3958C8.23725 25.3764 10.6668 25.888 13.1244 25.8997C18.5514 25.8997 22.2925 23.2185 22.2925 18.5195C22.2925 10.7206 12.3115 12.1137 12.3115 9.17812V9.17663Z",
+                fill: color
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=stripe-logo.js.map

package/dist/components/icon/custom/stripe-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/icon/custom/stripe-logo.tsx"],"sourcesContent":["import type {RemixiconComponentType} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\n\ntype StripeLogoProps = ComponentProps<RemixiconComponentType> & {\n  color?: string;\n};\n\nexport function StripeLogo({color = '#6772E5', ...props}: StripeLogoProps) {\n  return (\n    <svg\n      viewBox=\"0 0 28 28\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      {...props}\n    >\n      <title>Stripe Logo</title>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12.3115 9.17663C12.3115 8.15771 13.1593 7.76352 14.5293 7.76352C16.7967 7.81251 19.0215 8.38821 21.0281 9.44512V3.29438C18.959 2.48126 16.7523 2.07592 14.5293 2.10068C9.24873 2.10068 5.70703 4.86665 5.70703 9.48529C5.70703 16.7115 15.63 15.5379 15.63 18.6526C15.63 19.8709 14.5888 20.2487 13.1236 20.2487C10.9631 20.2487 8.17253 19.3547 5.9837 18.1647V24.3958C8.23725 25.3764 10.6668 25.888 13.1244 25.8997C18.5514 25.8997 22.2925 23.2185 22.2925 18.5195C22.2925 10.7206 12.3115 12.1137 12.3115 9.17812V9.17663Z\"\n        fill={color}\n      />\n    </svg>\n  );\n}\n"],"names":["StripeLogo","color","props","svg","viewBox","fill","xmlns","aria-hidden","focusable","title","path","fillRule","clipRule","d"],"mappings":";AAOA,OAAO,SAASA,WAAW,EAACC,QAAQ,SAAS,EAAE,GAAGC,OAAuB;IACvE,qBACE,MAACC;QACCC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACNC,eAAY;QACZC,WAAU;QACT,GAAGN,KAAK;;0BAET,KAACO;0BAAM;;0BACP,KAACC;gBACCC,UAAS;gBACTC,UAAS;gBACTC,GAAE;gBACFR,MAAMJ;;;;AAId"}

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

@@ -1,6 +1,6 @@
 import { type RemixiconComponentType, RiGoogleFill } from '@remixicon/react';
 import type { ComponentProps } from 'react';
-import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, SpinnerIcon, ThunderIcon, XCircleSolidIcon } from './custom';
+import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, ShipfoxLogo, SlackLogo, SpinnerIcon, StripeLogo, ThunderIcon, XCircleSolidIcon } from './custom';
 declare const iconsMap: {
     readonly google: RemixiconComponentType;
     readonly microsoft: RemixiconComponentType;
@@ -15,6 +15,18 @@ declare const iconsMap: {
     readonly spinner: typeof SpinnerIcon;
     readonly ellipseMiniSolid: typeof EllipseMiniSolidIcon;
     readonly componentLine: typeof ComponentLineIcon;
+    readonly imageAdd: RemixiconComponentType;
+    readonly close: RemixiconComponentType;
+    readonly shipfox: typeof ShipfoxLogo;
+    readonly slack: typeof SlackLogo;
+    readonly stripe: typeof StripeLogo;
+    readonly github: RemixiconComponentType;
+    readonly check: RemixiconComponentType;
+    readonly subtractLine: RemixiconComponentType;
+    readonly info: RemixiconComponentType;
+    readonly money: RemixiconComponentType;
+    readonly homeSmile: RemixiconComponentType;
+    readonly copy: 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,EAAC,KAAK,sBAAsB,EAAE,YAAY,EAAkB,MAAM,kBAAkB,CAAC;AAC5F,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,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;CAc6C,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,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"}

package/dist/components/icon/icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RiGoogleFill, RiMicrosoftFill } from '@remixicon/react';
-import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, SpinnerIcon, ThunderIcon, XCircleSolidIcon } from './custom/index.js';
+import { 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,
     microsoft: RiMicrosoftFill,
@@ -14,7 +14,19 @@ const iconsMap = {
     infoTooltipFill: InfoTooltipFillIcon,
     spinner: SpinnerIcon,
     ellipseMiniSolid: EllipseMiniSolidIcon,
-    componentLine: ComponentLineIcon
+    componentLine: ComponentLineIcon,
+    imageAdd: RiImageAddFill,
+    close: RiCloseLine,
+    shipfox: ShipfoxLogo,
+    slack: SlackLogo,
+    stripe: StripeLogo,
+    github: RiGithubFill,
+    check: RiCheckLine,
+    subtractLine: RiSubtractLine,
+    info: RiInformationFill,
+    money: RiMoneyDollarCircleLine,
+    homeSmile: RiHomeSmileFill,
+    copy: RiFileCopyLine
 };
 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 {type RemixiconComponentType, RiGoogleFill, RiMicrosoftFill} 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  SpinnerIcon,\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} 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":["RiGoogleFill","RiMicrosoftFill","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","SpinnerIcon","ThunderIcon","XCircleSolidIcon","iconsMap","google","microsoft","badge","checkCircleSolid","circleDottedLine","componentFill","xCircleSolid","thunder","resize","infoTooltipFill","spinner","ellipseMiniSolid","componentLine","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AAAA,SAAqCA,YAAY,EAAEC,eAAe,QAAO,mBAAmB;AAE5F,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAElB,MAAMC,WAAW;IACfC,QAAQd;IACRe,WAAWd;IACXe,OAAOd;IACPe,kBAAkBd;IAClBe,kBAAkBd;IAClBe,eAAed;IACfe,cAAcR;IACdS,SAASV;IACTW,QAAQb;IACRc,iBAAiBf;IACjBgB,SAASd;IACTe,kBAAkBlB;IAClBmB,eAAepB;AACjB;AAGA,OAAO,MAAMqB,YAAYC,OAAOC,IAAI,CAAChB,UAAwB;AAK7D,OAAO,SAASiB,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBpB,QAAQ,CAACkB,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}
+{"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"}

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

@@ -17,9 +17,12 @@ export const Gallery = {
                 children: iconNames.toSorted().map((name)=>/*#__PURE__*/ _jsxs("div", {
                         className: "flex flex-col items-center gap-4",
                         children: [
-                            /*#__PURE__*/ _jsx(Icon, {
-                                ...args,
-                                name: name
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "flex items-center justify-center w-20 h-20",
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    ...args,
+                                    name: name
+                                })
                             }),
                             /*#__PURE__*/ _jsx(Code, {
                                 variant: "label",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/icon.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Icon, iconNames} from './icon';\n\nconst meta = {\n  title: 'Components/Icon',\n  component: Icon,\n} satisfies Meta<typeof Icon>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Gallery: Story = {\n  args: {name: 'google'},\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"grid grid-cols-8 gap-16\">\n        {iconNames.toSorted().map((name) => (\n          <div key={name} className=\"flex flex-col items-center gap-4\">\n            <Icon {...args} name={name} />\n            <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n              {name}\n            </Code>\n          </div>\n        ))}\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Icon","iconNames","meta","title","component","Gallery","args","name","render","div","className","toSorted","map","variant"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,IAAI,EAAEC,SAAS,QAAO,SAAS;AAEvC,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWJ;AACb;AAEA,eAAeE,KAAK;AAGpB,OAAO,MAAMG,UAAiB;IAC5BC,MAAM;QAACC,MAAM;IAAQ;IACrBC,QAAQ,CAACF,qBACP,KAACG;YAAIC,WAAU;sBACb,cAAA,KAACD;gBAAIC,WAAU;0BACZT,UAAUU,QAAQ,GAAGC,GAAG,CAAC,CAACL,qBACzB,MAACE;wBAAeC,WAAU;;0CACxB,KAACV;gCAAM,GAAGM,IAAI;gCAAEC,MAAMA;;0CACtB,KAACR;gCAAKc,SAAQ;gCAAQH,WAAU;0CAC7BH;;;uBAHKA;;;AAUpB,EAAE"}
+{"version":3,"sources":["../../../src/components/icon/icon.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Icon, iconNames} from './icon';\n\nconst meta = {\n  title: 'Components/Icon',\n  component: Icon,\n} satisfies Meta<typeof Icon>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Gallery: Story = {\n  args: {name: 'google'},\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"grid grid-cols-8 gap-16\">\n        {iconNames.toSorted().map((name) => (\n          <div key={name} className=\"flex flex-col items-center gap-4\">\n            <div className=\"flex items-center justify-center w-20 h-20\">\n              <Icon {...args} name={name} />\n            </div>\n            <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n              {name}\n            </Code>\n          </div>\n        ))}\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Icon","iconNames","meta","title","component","Gallery","args","name","render","div","className","toSorted","map","variant"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,IAAI,EAAEC,SAAS,QAAO,SAAS;AAEvC,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWJ;AACb;AAEA,eAAeE,KAAK;AAGpB,OAAO,MAAMG,UAAiB;IAC5BC,MAAM;QAACC,MAAM;IAAQ;IACrBC,QAAQ,CAACF,qBACP,KAACG;YAAIC,WAAU;sBACb,cAAA,KAACD;gBAAIC,WAAU;0BACZT,UAAUU,QAAQ,GAAGC,GAAG,CAAC,CAACL,qBACzB,MAACE;wBAAeC,WAAU;;0CACxB,KAACD;gCAAIC,WAAU;0CACb,cAAA,KAACV;oCAAM,GAAGM,IAAI;oCAAEC,MAAMA;;;0CAExB,KAACR;gCAAKc,SAAQ;gCAAQH,WAAU;0CAC7BH;;;uBALKA;;;AAYpB,EAAE"}

package/dist/components/index.d.ts

@@ -1,6 +1,17 @@
+export * from './alert';
+export * from './avatar';
+export * from './badge';
 export * from './button';
+export * from './checkbox';
+export * from './code-block';
+export * from './dynamic-item';
 export * from './icon';
+export * from './inline-tips';
+export * from './input';
+export * from './item';
+export * from './label';
 export * from './textarea';
-export * from './theme-provider';
+export * from './theme';
+export * from './toast';
 export * from './typography';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/components/index.js

@@ -1,7 +1,18 @@
-export * from './button.js';
+export * from './alert/index.js';
+export * from './avatar/index.js';
+export * from './badge/index.js';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './code-block/index.js';
+export * from './dynamic-item/index.js';
 export * from './icon/index.js';
+export * from './inline-tips/index.js';
+export * from './input/index.js';
+export * from './item/index.js';
+export * from './label/index.js';
 export * from './textarea/index.js';
-export * from './theme-provider.js';
+export * from './theme/index.js';
+export * from './toast/index.js';
 export * from './typography/index.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './button';\nexport * from './icon';\nexport * from './textarea';\nexport * from './theme-provider';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,eAAe"}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './dynamic-item';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './label';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,eAAe"}

package/dist/components/inline-tips/index.d.ts

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

package/dist/components/inline-tips/index.d.ts.map

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

package/dist/components/inline-tips/index.js

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

package/dist/components/inline-tips/index.js.map

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

package/dist/components/inline-tips/inline-tips.d.ts

@@ -0,0 +1,19 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const inlineTipsBaseVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InlineTipsProps = ComponentProps<'div'> & VariantProps<typeof inlineTipsBaseVariants> & {
+    type?: 'default' | 'info' | 'success' | 'error';
+};
+declare function InlineTips({ className, variant, type, children, ...props }: InlineTipsProps): import("react/jsx-runtime").JSX.Element;
+declare function InlineTipsContent({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function InlineTipsTitle({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function InlineTipsDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function InlineTipsActions({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const inlineTipsActionVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InlineTipsAction({ className, variant, ...props }: ComponentProps<'button'> & VariantProps<typeof inlineTipsActionVariants>): import("react/jsx-runtime").JSX.Element;
+export { InlineTips, InlineTipsContent, InlineTipsTitle, InlineTipsDescription, InlineTipsActions, InlineTipsAction, };
+//# sourceMappingURL=inline-tips.d.ts.map

package/dist/components/inline-tips/inline-tips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-tips.d.ts","sourceRoot":"","sources":["../../../src/components/inline-tips/inline-tips.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,QAAA,MAAM,sBAAsB;;8EAW1B,CAAC;AAgBH,KAAK,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAC1C,YAAY,CAAC,OAAO,sBAAsB,CAAC,GAAG;IAC5C,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;CACjD,CAAC;AAEJ,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,IAAgB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CAe9F;AAED,iBAAS,iBAAiB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAItE;AAED,iBAAS,eAAe,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAQpE;AAED,iBAAS,qBAAqB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAW1E;AAED,iBAAS,iBAAiB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,QAAA,MAAM,wBAAwB;;8EAe7B,CAAC;AAEF,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,2CAS1E;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,GACjB,CAAC"}

package/dist/components/inline-tips/inline-tips.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+const inlineTipsBaseVariants = cva('w-full text-sm flex gap-12 items-center', {
+    variants: {
+        variant: {
+            primary: 'bg-background-components-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral rounded-8 px-12 py-8',
+            secondary: 'bg-transparent text-foreground-neutral-base'
+        }
+    },
+    defaultVariants: {
+        variant: 'primary'
+    }
+});
+const inlineTipsLineVariants = cva('w-4 self-stretch my-4 rounded-full', {
+    variants: {
+        type: {
+            default: 'bg-tag-neutral-icon',
+            info: 'bg-tag-warning-icon',
+            success: 'bg-tag-success-icon',
+            error: 'bg-tag-error-icon'
+        }
+    },
+    defaultVariants: {
+        type: 'default'
+    }
+});
+function InlineTips({ className, variant, type = 'default', children, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "inline-tips",
+        className: cn(inlineTipsBaseVariants({
+            variant
+        }), className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                "data-slot": "inline-tips-line",
+                className: cn(inlineTipsLineVariants({
+                    type
+                })),
+                "aria-hidden": "true"
+            }),
+            children
+        ]
+    });
+}
+function InlineTipsContent({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "inline-tips-content",
+        className: cn('flex-1 min-w-0', className),
+        ...props
+    });
+}
+function InlineTipsTitle({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "inline-tips-title",
+        className: cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className),
+        ...props
+    });
+}
+function InlineTipsDescription({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "inline-tips-description",
+        className: cn('text-xs leading-20 text-foreground-neutral-muted [&_p]:leading-relaxed', className),
+        ...props
+    });
+}
+function InlineTipsActions({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "inline-tips-actions",
+        className: cn('flex items-center gap-8 shrink-0', className),
+        ...props
+    });
+}
+const inlineTipsActionVariants = cva('rounded-6 px-10 py-6 text-xs font-medium leading-20 transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2', {
+    variants: {
+        variant: {
+            primary: 'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none ',
+            secondary: 'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none'
+        }
+    },
+    defaultVariants: {
+        variant: 'primary'
+    }
+});
+function InlineTipsAction({ className, variant, ...props }) {
+    return /*#__PURE__*/ _jsx("button", {
+        "data-slot": "inline-tips-action",
+        type: "button",
+        className: cn(inlineTipsActionVariants({
+            variant
+        }), className),
+        ...props
+    });
+}
+export { InlineTips, InlineTipsContent, InlineTipsTitle, InlineTipsDescription, InlineTipsActions, InlineTipsAction };
+
+//# sourceMappingURL=inline-tips.js.map

package/dist/components/inline-tips/inline-tips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inline-tips/inline-tips.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nconst inlineTipsBaseVariants = cva('w-full text-sm flex gap-12 items-center', {\n  variants: {\n    variant: {\n      primary:\n        'bg-background-components-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral rounded-8 px-12 py-8',\n      secondary: 'bg-transparent text-foreground-neutral-base',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n});\n\nconst inlineTipsLineVariants = cva('w-4 self-stretch my-4 rounded-full', {\n  variants: {\n    type: {\n      default: 'bg-tag-neutral-icon',\n      info: 'bg-tag-warning-icon',\n      success: 'bg-tag-success-icon',\n      error: 'bg-tag-error-icon',\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ntype InlineTipsProps = ComponentProps<'div'> &\n  VariantProps<typeof inlineTipsBaseVariants> & {\n    type?: 'default' | 'info' | 'success' | 'error';\n  };\n\nfunction InlineTips({className, variant, type = 'default', children, ...props}: InlineTipsProps) {\n  return (\n    <div\n      data-slot=\"inline-tips\"\n      className={cn(inlineTipsBaseVariants({variant}), className)}\n      {...props}\n    >\n      <div\n        data-slot=\"inline-tips-line\"\n        className={cn(inlineTipsLineVariants({type}))}\n        aria-hidden=\"true\"\n      />\n      {children}\n    </div>\n  );\n}\n\nfunction InlineTipsContent({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"inline-tips-content\" className={cn('flex-1 min-w-0', className)} {...props} />\n  );\n}\n\nfunction InlineTipsTitle({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"inline-tips-title\"\n      className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction InlineTipsDescription({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"inline-tips-description\"\n      className={cn(\n        'text-xs leading-20 text-foreground-neutral-muted [&_p]:leading-relaxed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InlineTipsActions({className, ...props}: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"inline-tips-actions\"\n      className={cn('flex items-center gap-8 shrink-0', className)}\n      {...props}\n    />\n  );\n}\n\nconst inlineTipsActionVariants = cva(\n  'rounded-6 px-10 py-6 text-xs font-medium leading-20 transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none ',\n        secondary:\n          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n    },\n  },\n);\n\nfunction InlineTipsAction({\n  className,\n  variant,\n  ...props\n}: ComponentProps<'button'> & VariantProps<typeof inlineTipsActionVariants>) {\n  return (\n    <button\n      data-slot=\"inline-tips-action\"\n      type=\"button\"\n      className={cn(inlineTipsActionVariants({variant}), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InlineTips,\n  InlineTipsContent,\n  InlineTipsTitle,\n  InlineTipsDescription,\n  InlineTipsActions,\n  InlineTipsAction,\n};\n"],"names":["cva","cn","inlineTipsBaseVariants","variants","variant","primary","secondary","defaultVariants","inlineTipsLineVariants","type","default","info","success","error","InlineTips","className","children","props","div","data-slot","aria-hidden","InlineTipsContent","InlineTipsTitle","InlineTipsDescription","InlineTipsActions","inlineTipsActionVariants","InlineTipsAction","button"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAE5B,MAAMC,yBAAyBF,IAAI,2CAA2C;IAC5EG,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WAAW;QACb;IACF;IACAC,iBAAiB;QACfH,SAAS;IACX;AACF;AAEA,MAAMI,yBAAyBR,IAAI,sCAAsC;IACvEG,UAAU;QACRM,MAAM;YACJC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,OAAO;QACT;IACF;IACAN,iBAAiB;QACfE,MAAM;IACR;AACF;AAOA,SAASK,WAAW,EAACC,SAAS,EAAEX,OAAO,EAAEK,OAAO,SAAS,EAAEO,QAAQ,EAAE,GAAGC,OAAuB;IAC7F,qBACE,MAACC;QACCC,aAAU;QACVJ,WAAWd,GAAGC,uBAAuB;YAACE;QAAO,IAAIW;QAChD,GAAGE,KAAK;;0BAET,KAACC;gBACCC,aAAU;gBACVJ,WAAWd,GAAGO,uBAAuB;oBAACC;gBAAI;gBAC1CW,eAAY;;YAEbJ;;;AAGP;AAEA,SAASK,kBAAkB,EAACN,SAAS,EAAE,GAAGE,OAA6B;IACrE,qBACE,KAACC;QAAIC,aAAU;QAAsBJ,WAAWd,GAAG,kBAAkBc;QAAa,GAAGE,KAAK;;AAE9F;AAEA,SAASK,gBAAgB,EAACP,SAAS,EAAE,GAAGE,OAA6B;IACnE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWd,GAAG,oEAAoEc;QACjF,GAAGE,KAAK;;AAGf;AAEA,SAASM,sBAAsB,EAACR,SAAS,EAAE,GAAGE,OAA6B;IACzE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWd,GACT,0EACAc;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASO,kBAAkB,EAACT,SAAS,EAAE,GAAGE,OAA6B;IACrE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWd,GAAG,oCAAoCc;QACjD,GAAGE,KAAK;;AAGf;AAEA,MAAMQ,2BAA2BzB,IAC/B,mMACA;IACEG,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WACE;QACJ;IACF;IACAC,iBAAiB;QACfH,SAAS;IACX;AACF;AAGF,SAASsB,iBAAiB,EACxBX,SAAS,EACTX,OAAO,EACP,GAAGa,OACsE;IACzE,qBACE,KAACU;QACCR,aAAU;QACVV,MAAK;QACLM,WAAWd,GAAGwB,yBAAyB;YAACrB;QAAO,IAAIW;QAClD,GAAGE,KAAK;;AAGf;AAEA,SACEH,UAAU,EACVO,iBAAiB,EACjBC,eAAe,EACfC,qBAAqB,EACrBC,iBAAiB,EACjBE,gBAAgB,GAChB"}

package/dist/components/inline-tips/inline-tips.stories.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code, Header } from '../../components/typography/index.js';
+import { InlineTips, InlineTipsAction, InlineTipsActions, InlineTipsContent, InlineTipsDescription, InlineTipsTitle } from './inline-tips.js';
+const meta = {
+    title: 'Components/InlineTips',
+    component: InlineTips,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: [
+                'default',
+                'info',
+                'success',
+                'error'
+            ]
+        },
+        variant: {
+            control: 'select',
+            options: [
+                'primary',
+                'secondary'
+            ]
+        }
+    },
+    args: {
+        type: 'default',
+        variant: 'primary'
+    }
+};
+export default meta;
+const types = [
+    'default',
+    'info',
+    'success',
+    'error'
+];
+const variants = [
+    'primary',
+    'secondary'
+];
+export const Default = {
+    render: (args)=>{
+        return /*#__PURE__*/ _jsxs(InlineTips, {
+            ...args,
+            children: [
+                /*#__PURE__*/ _jsxs(InlineTipsContent, {
+                    children: [
+                        /*#__PURE__*/ _jsx(InlineTipsTitle, {
+                            children: "Title"
+                        }),
+                        /*#__PURE__*/ _jsx(InlineTipsDescription, {
+                            children: "Description"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(InlineTipsActions, {
+                    children: [
+                        /*#__PURE__*/ _jsx(InlineTipsAction, {
+                            variant: args.variant,
+                            children: "Label"
+                        }),
+                        /*#__PURE__*/ _jsx(InlineTipsAction, {
+                            variant: args.variant,
+                            children: "Label"
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};
+export const Variants = {
+    render: ()=>{
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-16",
+            children: variants.map((variant)=>/*#__PURE__*/ _jsxs(InlineTips, {
+                    type: "default",
+                    variant: variant,
+                    children: [
+                        /*#__PURE__*/ _jsxs(InlineTipsContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(InlineTipsTitle, {
+                                    children: "Title"
+                                }),
+                                /*#__PURE__*/ _jsx(InlineTipsDescription, {
+                                    children: "Description"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(InlineTipsActions, {
+                            children: [
+                                /*#__PURE__*/ _jsx(InlineTipsAction, {
+                                    variant: "primary",
+                                    children: "Label"
+                                }),
+                                /*#__PURE__*/ _jsx(InlineTipsAction, {
+                                    variant: "secondary",
+                                    children: "Label"
+                                })
+                            ]
+                        })
+                    ]
+                }, variant))
+        });
+    }
+};
+export const DesignMock = {
+    render: ()=>{
+        const content = {
+            default: {
+                title: 'Title',
+                description: 'Description'
+            },
+            info: {
+                title: 'Title',
+                description: 'Description'
+            },
+            success: {
+                title: 'Title',
+                description: 'Description'
+            },
+            error: {
+                title: 'Title',
+                description: 'Description'
+            }
+        };
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base",
+            children: [
+                /*#__PURE__*/ _jsx(Header, {
+                    variant: "h3",
+                    className: "text-foreground-neutral-subtle",
+                    children: "INLINE TIPS"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Primary"
+                        }),
+                        types.map((type)=>/*#__PURE__*/ _jsxs(InlineTips, {
+                                type: type,
+                                variant: "primary",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(InlineTipsContent, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(InlineTipsTitle, {
+                                                children: content[type].title
+                                            }),
+                                            /*#__PURE__*/ _jsx(InlineTipsDescription, {
+                                                children: content[type].description
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(InlineTipsActions, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(InlineTipsAction, {
+                                                variant: "primary",
+                                                children: "Label"
+                                            }),
+                                            /*#__PURE__*/ _jsx(InlineTipsAction, {
+                                                variant: "secondary",
+                                                children: "Label"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, type)),
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Secondary"
+                        }),
+                        types.map((type)=>/*#__PURE__*/ _jsxs(InlineTips, {
+                                type: type,
+                                variant: "secondary",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(InlineTipsContent, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(InlineTipsTitle, {
+                                                children: content[type].title
+                                            }),
+                                            /*#__PURE__*/ _jsx(InlineTipsDescription, {
+                                                children: content[type].description
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(InlineTipsActions, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(InlineTipsAction, {
+                                                variant: "primary",
+                                                children: "Label"
+                                            }),
+                                            /*#__PURE__*/ _jsx(InlineTipsAction, {
+                                                variant: "secondary",
+                                                children: "Label"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, type))
+                    ]
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=inline-tips.stories.js.map