@shipfox/react-ui 0.3.0 → 0.4.0

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,4 @@
+export * from './code-block';
+export * from './code-block-footer';
+export * from './code-tabs';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,5 @@
+export * from './code-block.js';
+export * from './code-block-footer.js';
+export * from './code-tabs.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block/index.ts"],"sourcesContent":["export * from './code-block';\nexport * from './code-block-footer';\nexport * from './code-tabs';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,sBAAsB;AACpC,cAAc,cAAc"}

package/dist/components/dynamic-item/dynamic-item.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { type ItemProps } from '../item/item';
+export type DynamicItemProps = Omit<ItemProps, 'variant' | 'children' | 'title'> & {
+    variant?: 'default' | 'neutral';
+    leftElement?: ReactNode;
+    title?: ReactNode;
+    description?: string;
+    action?: ReactNode;
+    rightElement?: ReactNode;
+    contentClassName?: string;
+};
+export declare function DynamicItem({ className, variant, leftElement, title, description, action, rightElement, contentClassName, ...props }: DynamicItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dynamic-item.d.ts.map

package/dist/components/dynamic-item/dynamic-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-item.d.ts","sourceRoot":"","sources":["../../../src/components/dynamic-item/dynamic-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAML,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACjF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAmB,EACnB,WAAW,EACX,KAAK,EACL,WAAW,EACX,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAmClB"}

package/dist/components/dynamic-item/dynamic-item.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '../item/item.js';
+export function DynamicItem({ className, variant = 'default', leftElement, title, description, action, rightElement, contentClassName, ...props }) {
+    const hasLeftSide = Boolean(leftElement);
+    const hasRightSide = Boolean(rightElement);
+    const hasContent = Boolean(title || description || action);
+    return /*#__PURE__*/ _jsx(Item, {
+        variant: variant,
+        className: className,
+        ...props,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: cn('relative flex flex-col sm:flex-row justify-center items-center gap-16 min-h-64 px-12 py-12', contentClassName),
+            children: [
+                hasLeftSide && /*#__PURE__*/ _jsx(ItemMedia, {
+                    className: cn('self-center sm:self-start pt-2'),
+                    children: leftElement
+                }),
+                hasContent && /*#__PURE__*/ _jsxs(ItemContent, {
+                    className: "text-center sm:text-left",
+                    children: [
+                        title && typeof title === 'string' ? /*#__PURE__*/ _jsx(ItemTitle, {
+                            children: title
+                        }) : title,
+                        description && /*#__PURE__*/ _jsx(ItemDescription, {
+                            children: description
+                        }),
+                        action && /*#__PURE__*/ _jsx(ItemActions, {
+                            className: cn('mt-8 flex flex-wrap items-center gap-16'),
+                            children: action
+                        })
+                    ]
+                }),
+                hasRightSide && /*#__PURE__*/ _jsx(ItemActions, {
+                    className: "self-center sm:ml-auto",
+                    children: rightElement
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=dynamic-item.js.map

package/dist/components/dynamic-item/dynamic-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dynamic-item/dynamic-item.tsx"],"sourcesContent":["import type {ReactNode} from 'react';\nimport {cn} from 'utils/cn';\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  type ItemProps,\n  ItemTitle,\n} from '../item/item';\n\nexport type DynamicItemProps = Omit<ItemProps, 'variant' | 'children' | 'title'> & {\n  variant?: 'default' | 'neutral';\n  leftElement?: ReactNode;\n  title?: ReactNode;\n  description?: string;\n  action?: ReactNode;\n  rightElement?: ReactNode;\n  contentClassName?: string;\n};\n\nexport function DynamicItem({\n  className,\n  variant = 'default',\n  leftElement,\n  title,\n  description,\n  action,\n  rightElement,\n  contentClassName,\n  ...props\n}: DynamicItemProps) {\n  const hasLeftSide = Boolean(leftElement);\n  const hasRightSide = Boolean(rightElement);\n  const hasContent = Boolean(title || description || action);\n\n  return (\n    <Item variant={variant} className={className} {...props}>\n      <div\n        className={cn(\n          'relative flex flex-col sm:flex-row justify-center items-center gap-16 min-h-64 px-12 py-12',\n          contentClassName,\n        )}\n      >\n        {hasLeftSide && (\n          <ItemMedia className={cn('self-center sm:self-start pt-2')}>{leftElement}</ItemMedia>\n        )}\n\n        {hasContent && (\n          <ItemContent className=\"text-center sm:text-left\">\n            {title && typeof title === 'string' ? <ItemTitle>{title}</ItemTitle> : title}\n            {description && <ItemDescription>{description}</ItemDescription>}\n            {action && (\n              <ItemActions className={cn('mt-8 flex flex-wrap items-center gap-16')}>\n                {action}\n              </ItemActions>\n            )}\n          </ItemContent>\n        )}\n\n        {hasRightSide && (\n          <ItemActions className=\"self-center sm:ml-auto\">{rightElement}</ItemActions>\n        )}\n      </div>\n    </Item>\n  );\n}\n"],"names":["cn","Item","ItemActions","ItemContent","ItemDescription","ItemMedia","ItemTitle","DynamicItem","className","variant","leftElement","title","description","action","rightElement","contentClassName","props","hasLeftSide","Boolean","hasRightSide","hasContent","div"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAC5B,SACEC,IAAI,EACJC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,SAAS,EAETC,SAAS,QACJ,eAAe;AAYtB,OAAO,SAASC,YAAY,EAC1BC,SAAS,EACTC,UAAU,SAAS,EACnBC,WAAW,EACXC,KAAK,EACLC,WAAW,EACXC,MAAM,EACNC,YAAY,EACZC,gBAAgB,EAChB,GAAGC,OACc;IACjB,MAAMC,cAAcC,QAAQR;IAC5B,MAAMS,eAAeD,QAAQJ;IAC7B,MAAMM,aAAaF,QAAQP,SAASC,eAAeC;IAEnD,qBACE,KAACZ;QAAKQ,SAASA;QAASD,WAAWA;QAAY,GAAGQ,KAAK;kBACrD,cAAA,MAACK;YACCb,WAAWR,GACT,8FACAe;;gBAGDE,6BACC,KAACZ;oBAAUG,WAAWR,GAAG;8BAAoCU;;gBAG9DU,4BACC,MAACjB;oBAAYK,WAAU;;wBACpBG,SAAS,OAAOA,UAAU,yBAAW,KAACL;sCAAWK;6BAAqBA;wBACtEC,6BAAe,KAACR;sCAAiBQ;;wBACjCC,wBACC,KAACX;4BAAYM,WAAWR,GAAG;sCACxBa;;;;gBAMRM,8BACC,KAACjB;oBAAYM,WAAU;8BAA0BM;;;;;AAK3D"}

package/dist/components/dynamic-item/dynamic-item.stories.js

@@ -0,0 +1,375 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/button/button.js';
+import { ItemTitle } from '../../components/item/index.js';
+import { cn } from '../../utils/cn.js';
+import illustration1 from '../../assets/illustration-1.svg';
+import illustration2 from '../../assets/illustration-2.svg';
+import illustrationBg from '../../assets/illustration-gradient.svg';
+import { Avatar } from '../avatar/avatar.js';
+import { AvatarGroup, AvatarGroupTooltip } from '../avatar/avatar-group.js';
+import { Icon } from '../icon/icon.js';
+import { MovingBorder } from '../moving-border/moving-border.js';
+import { DynamicItem } from './dynamic-item.js';
+const meta = {
+    title: 'Components/DynamicItem',
+    component: DynamicItem,
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const OrganizationItem = {
+    args: {},
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16 w-full max-w-476",
+            children: [
+                /*#__PURE__*/ _jsx(DynamicItem, {
+                    variant: "default",
+                    leftElement: /*#__PURE__*/ _jsx(Avatar, {
+                        content: "logo",
+                        logoName: "slack",
+                        radius: "rounded",
+                        size: "xl"
+                    }),
+                    title: "Slack",
+                    description: "3 members",
+                    rightElement: /*#__PURE__*/ _jsxs(AvatarGroup, {
+                        size: "md",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "John Doe",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "John Doe"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Jane Smith",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Jane Smith"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Bob Johnson",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Bob Johnson"
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(DynamicItem, {
+                    variant: "default",
+                    leftElement: /*#__PURE__*/ _jsx(Avatar, {
+                        content: "logo",
+                        logoName: "stripe",
+                        radius: "rounded",
+                        size: "xl"
+                    }),
+                    title: "Stripe",
+                    description: "2 members",
+                    rightElement: /*#__PURE__*/ _jsxs(AvatarGroup, {
+                        size: "md",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Alice Brown",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Alice Brown"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Carlos Vega",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Carlos Vega"
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(DynamicItem, {
+                    variant: "default",
+                    leftElement: /*#__PURE__*/ _jsx(Avatar, {
+                        content: "logo",
+                        logoName: "shipfox",
+                        radius: "rounded",
+                        size: "xl"
+                    }),
+                    title: "Shipfox",
+                    description: "9 members",
+                    rightElement: /*#__PURE__*/ _jsxs(AvatarGroup, {
+                        size: "md",
+                        maxVisible: 4,
+                        animateOnHover: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Linda Tran",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Linda Tran"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Michael Chen",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Michael Chen"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Sarah Williams",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Sarah Williams"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "David Lee",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "David Lee"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Emily Davis",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Emily Davis"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "James Wilson",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "James Wilson"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Olivia Martinez",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Olivia Martinez"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Noah Anderson",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Noah Anderson"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "image",
+                                fallback: "Sophia Taylor",
+                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
+                                    children: "Sophia Taylor"
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+};
+export const ConnectGithubAccountItem = {
+    args: {},
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16 w-full max-w-476",
+            children: [
+                /*#__PURE__*/ _jsx(DynamicItem, {
+                    variant: "default",
+                    leftElement: /*#__PURE__*/ _jsxs("div", {
+                        className: "relative",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "logoPlaceholder",
+                                logoName: "slack",
+                                radius: "full",
+                                size: "lg"
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "logoPlaceholder",
+                                logoName: "github",
+                                radius: "full",
+                                size: "2xs",
+                                logoClassName: "p-0",
+                                className: "absolute bottom-0 left-27"
+                            })
+                        ]
+                    }),
+                    title: "Slack",
+                    description: "Connect Github organization",
+                    rightElement: /*#__PURE__*/ _jsx(Button, {
+                        variant: "primary",
+                        size: "sm",
+                        children: "Connect"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(DynamicItem, {
+                    variant: "default",
+                    leftElement: /*#__PURE__*/ _jsxs("div", {
+                        className: "relative",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "logoPlaceholder",
+                                logoName: "slack",
+                                radius: "full",
+                                size: "lg"
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "logo",
+                                logoName: "github",
+                                radius: "full",
+                                size: "2xs",
+                                logoClassName: "p-0",
+                                className: "absolute bottom-0 left-27"
+                            })
+                        ]
+                    }),
+                    title: "Slack",
+                    description: "Personal account (kye-nguyen)",
+                    rightElement: /*#__PURE__*/ _jsx(Button, {
+                        variant: "primary",
+                        size: "sm",
+                        children: "Change account"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(DynamicItem, {
+                    variant: "default",
+                    leftElement: /*#__PURE__*/ _jsxs("div", {
+                        className: "relative",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "logoPlaceholder",
+                                logoName: "slack",
+                                radius: "full",
+                                size: "lg"
+                            }),
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                content: "logo",
+                                logoName: "github",
+                                radius: "full",
+                                size: "2xs",
+                                logoClassName: "p-0",
+                                className: "absolute bottom-0 left-27"
+                            })
+                        ]
+                    }),
+                    title: "Slack",
+                    description: "Organization (slack-github)",
+                    rightElement: /*#__PURE__*/ _jsx(Button, {
+                        variant: "secondary",
+                        size: "sm",
+                        children: "Change account"
+                    })
+                })
+            ]
+        })
+};
+export const WithCustomElementsItem = {
+    args: {},
+    render: ()=>{
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16 w-full max-w-672",
+            children: [
+                /*#__PURE__*/ _jsx(DynamicItem, {
+                    variant: "default",
+                    leftElement: /*#__PURE__*/ _jsx("div", {
+                        className: "flex shrink-0 items-center justify-center text-tag-success-icon",
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            name: "checkCircleSolid",
+                            size: "sm"
+                        })
+                    }),
+                    title: "Give access to your Github organizations",
+                    description: "We'll use this permission to sync your organization's.",
+                    action: /*#__PURE__*/ _jsxs("div", {
+                        className: "flex gap-8 mx-auto sm:mx-0",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "primary",
+                                size: "sm",
+                                children: "Github access"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "transparentMuted",
+                                size: "sm",
+                                children: "Skip for now"
+                            })
+                        ]
+                    }),
+                    rightElement: /*#__PURE__*/ _jsx("img", {
+                        src: illustration1,
+                        alt: "illustration-1",
+                        className: "hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "relative",
+                    children: [
+                        /*#__PURE__*/ _jsx("img", {
+                            src: illustration2,
+                            alt: "illustration-2",
+                            className: "hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: cn('relative overflow-hidden bg-transparent p-1 rounded-8'),
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "absolute inset-0",
+                                    style: {
+                                        borderRadius: 'calc(0.5rem * 0.96)'
+                                    },
+                                    children: /*#__PURE__*/ _jsx(MovingBorder, {
+                                        duration: 6000,
+                                        rx: "30%",
+                                        ry: "30%",
+                                        children: /*#__PURE__*/ _jsx("div", {
+                                            className: "h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]"
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "relative",
+                                    style: {
+                                        borderRadius: 'calc(0.5rem * 0.96)'
+                                    },
+                                    children: /*#__PURE__*/ _jsx(DynamicItem, {
+                                        variant: "default",
+                                        title: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-6",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: "flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16",
+                                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                                        name: "money",
+                                                        size: "sm",
+                                                        color: "var(--foreground-neutral-subtle, #a1a1aa)"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(ItemTitle, {
+                                                    children: "6000 free credits/month to run your jobs"
+                                                })
+                                            ]
+                                        }),
+                                        description: "~500 builds/month. No payment required.",
+                                        rightElement: /*#__PURE__*/ _jsx("img", {
+                                            src: illustrationBg,
+                                            alt: "illustration-bg",
+                                            className: "hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=dynamic-item.stories.js.map

package/dist/components/dynamic-item/dynamic-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dynamic-item/dynamic-item.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button/button';\nimport {ItemTitle} from 'components/item';\nimport {cn} from 'utils/cn';\nimport illustration1 from '../../assets/illustration-1.svg';\nimport illustration2 from '../../assets/illustration-2.svg';\nimport illustrationBg from '../../assets/illustration-gradient.svg';\nimport {Avatar} from '../avatar/avatar';\nimport {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';\nimport {Icon} from '../icon/icon';\nimport {MovingBorder} from '../moving-border/moving-border';\nimport {DynamicItem} from './dynamic-item';\n\nconst meta = {\n  title: 'Components/DynamicItem',\n  component: DynamicItem,\n  tags: ['autodocs'],\n} satisfies Meta<typeof DynamicItem>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const OrganizationItem: Story = {\n  args: {},\n  render: () => (\n    <div className=\"flex flex-col gap-16 w-full max-w-476\">\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"slack\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Slack\"\n        description=\"3 members\"\n        rightElement={\n          <AvatarGroup size=\"md\">\n            <Avatar content=\"image\" fallback=\"John Doe\">\n              <AvatarGroupTooltip>John Doe</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Jane Smith\">\n              <AvatarGroupTooltip>Jane Smith</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Bob Johnson\">\n              <AvatarGroupTooltip>Bob Johnson</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"stripe\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Stripe\"\n        description=\"2 members\"\n        rightElement={\n          <AvatarGroup size=\"md\">\n            <Avatar content=\"image\" fallback=\"Alice Brown\">\n              <AvatarGroupTooltip>Alice Brown</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Carlos Vega\">\n              <AvatarGroupTooltip>Carlos Vega</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"shipfox\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Shipfox\"\n        description=\"9 members\"\n        rightElement={\n          <AvatarGroup size=\"md\" maxVisible={4} animateOnHover>\n            <Avatar content=\"image\" fallback=\"Linda Tran\">\n              <AvatarGroupTooltip>Linda Tran</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Michael Chen\">\n              <AvatarGroupTooltip>Michael Chen</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Sarah Williams\">\n              <AvatarGroupTooltip>Sarah Williams</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"David Lee\">\n              <AvatarGroupTooltip>David Lee</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Emily Davis\">\n              <AvatarGroupTooltip>Emily Davis</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"James Wilson\">\n              <AvatarGroupTooltip>James Wilson</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Olivia Martinez\">\n              <AvatarGroupTooltip>Olivia Martinez</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Noah Anderson\">\n              <AvatarGroupTooltip>Noah Anderson</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Sophia Taylor\">\n              <AvatarGroupTooltip>Sophia Taylor</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n    </div>\n  ),\n};\n\nexport const ConnectGithubAccountItem: Story = {\n  args: {},\n  render: () => (\n    <div className=\"flex flex-col gap-16 w-full max-w-476\">\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logoPlaceholder\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description=\"Connect Github organization\"\n        rightElement={\n          <Button variant=\"primary\" size=\"sm\">\n            Connect\n          </Button>\n        }\n      />\n\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logo\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description=\"Personal account (kye-nguyen)\"\n        rightElement={\n          <Button variant=\"primary\" size=\"sm\">\n            Change account\n          </Button>\n        }\n      />\n\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logo\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description=\"Organization (slack-github)\"\n        rightElement={\n          <Button variant=\"secondary\" size=\"sm\">\n            Change account\n          </Button>\n        }\n      />\n    </div>\n  ),\n};\n\nexport const WithCustomElementsItem: Story = {\n  args: {},\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-16 w-full max-w-672\">\n        <DynamicItem\n          variant=\"default\"\n          leftElement={\n            <div className=\"flex shrink-0 items-center justify-center text-tag-success-icon\">\n              <Icon name=\"checkCircleSolid\" size=\"sm\" />\n            </div>\n          }\n          title=\"Give access to your Github organizations\"\n          description=\"We'll use this permission to sync your organization's.\"\n          action={\n            <div className=\"flex gap-8 mx-auto sm:mx-0\">\n              <Button variant=\"primary\" size=\"sm\">\n                Github access\n              </Button>\n              <Button variant=\"transparentMuted\" size=\"sm\">\n                Skip for now\n              </Button>\n            </div>\n          }\n          rightElement={\n            <img\n              src={illustration1}\n              alt=\"illustration-1\"\n              className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain\"\n            />\n          }\n        />\n        <div className=\"relative\">\n          <img\n            src={illustration2}\n            alt=\"illustration-2\"\n            className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50\"\n          />\n          <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>\n            <div className=\"absolute inset-0\" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>\n              <MovingBorder duration={6000} rx=\"30%\" ry=\"30%\">\n                <div className=\"h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]\" />\n              </MovingBorder>\n            </div>\n            <div\n              className=\"relative\"\n              style={{\n                borderRadius: 'calc(0.5rem * 0.96)',\n              }}\n            >\n              <DynamicItem\n                variant=\"default\"\n                title={\n                  <div className=\"flex items-center gap-6\">\n                    <span className=\"flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16\">\n                      <Icon\n                        name=\"money\"\n                        size=\"sm\"\n                        color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n                      />\n                    </span>\n                    <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>\n                  </div>\n                }\n                description=\"~500 builds/month. No payment required.\"\n                rightElement={\n                  <img\n                    src={illustrationBg}\n                    alt=\"illustration-bg\"\n                    className=\"hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105\"\n                  />\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["Button","ItemTitle","cn","illustration1","illustration2","illustrationBg","Avatar","AvatarGroup","AvatarGroupTooltip","Icon","MovingBorder","DynamicItem","meta","title","component","tags","OrganizationItem","args","render","div","className","variant","leftElement","content","logoName","radius","size","description","rightElement","fallback","maxVisible","animateOnHover","ConnectGithubAccountItem","logoClassName","WithCustomElementsItem","name","action","img","src","alt","style","borderRadius","duration","rx","ry","span","color"],"mappings":";AACA,SAAQA,MAAM,QAAO,2BAA2B;AAChD,SAAQC,SAAS,QAAO,kBAAkB;AAC1C,SAAQC,EAAE,QAAO,WAAW;AAC5B,OAAOC,mBAAmB,kCAAkC;AAC5D,OAAOC,mBAAmB,kCAAkC;AAC5D,OAAOC,oBAAoB,yCAAyC;AACpE,SAAQC,MAAM,QAAO,mBAAmB;AACxC,SAAQC,WAAW,EAAEC,kBAAkB,QAAO,yBAAyB;AACvE,SAAQC,IAAI,QAAO,eAAe;AAClC,SAAQC,YAAY,QAAO,iCAAiC;AAC5D,SAAQC,WAAW,QAAO,iBAAiB;AAE3C,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWH;IACXI,MAAM;QAAC;KAAW;AACpB;AAEA,eAAeH,KAAK;AAGpB,OAAO,MAAMI,mBAA0B;IACrCC,MAAM,CAAC;IACPC,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BAAa,KAAChB;wBAAOiB,SAAQ;wBAAOC,UAAS;wBAAQC,QAAO;wBAAUC,MAAK;;oBAC3Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACrB;wBAAYmB,MAAK;;0CAChB,KAACpB;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;;;;8BAK5B,KAACG;oBACCU,SAAQ;oBACRC,2BAAa,KAAChB;wBAAOiB,SAAQ;wBAAOC,UAAS;wBAASC,QAAO;wBAAUC,MAAK;;oBAC5Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACrB;wBAAYmB,MAAK;;0CAChB,KAACpB;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;;;;8BAK5B,KAACG;oBACCU,SAAQ;oBACRC,2BAAa,KAAChB;wBAAOiB,SAAQ;wBAAOC,UAAS;wBAAUC,QAAO;wBAAUC,MAAK;;oBAC7Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACrB;wBAAYmB,MAAK;wBAAKI,YAAY;wBAAGC,cAAc;;0CAClD,KAACzB;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;0CAEtB,KAACF;gCAAOiB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACrB;8CAAmB;;;;;;;;AAOlC,EAAE;AAEF,OAAO,MAAMwB,2BAAkC;IAC7Cf,MAAM,CAAC;IACPC,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACd;gCAAOiB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACpB;gCACCiB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAUK,MAAK;kCAAK;;;8BAMxC,KAACf;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACd;gCAAOiB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACpB;gCACCiB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAUK,MAAK;kCAAK;;;8BAMxC,KAACf;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACd;gCAAOiB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACpB;gCACCiB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAYK,MAAK;kCAAK;;;;;AAOhD,EAAE;AAEF,OAAO,MAAMQ,yBAAgC;IAC3CjB,MAAM,CAAC;IACPC,QAAQ;QACN,qBACE,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BACE,KAACH;wBAAIC,WAAU;kCACb,cAAA,KAACX;4BAAK0B,MAAK;4BAAmBT,MAAK;;;oBAGvCb,OAAM;oBACNc,aAAY;oBACZS,sBACE,MAACjB;wBAAIC,WAAU;;0CACb,KAACpB;gCAAOqB,SAAQ;gCAAUK,MAAK;0CAAK;;0CAGpC,KAAC1B;gCAAOqB,SAAQ;gCAAmBK,MAAK;0CAAK;;;;oBAKjDE,4BACE,KAACS;wBACCC,KAAKnC;wBACLoC,KAAI;wBACJnB,WAAU;;;8BAIhB,MAACD;oBAAIC,WAAU;;sCACb,KAACiB;4BACCC,KAAKlC;4BACLmC,KAAI;4BACJnB,WAAU;;sCAEZ,MAACD;4BAAIC,WAAWlB,GAAG;;8CACjB,KAACiB;oCAAIC,WAAU;oCAAmBoB,OAAO;wCAACC,cAAc;oCAAqB;8CAC3E,cAAA,KAAC/B;wCAAagC,UAAU;wCAAMC,IAAG;wCAAMC,IAAG;kDACxC,cAAA,KAACzB;4CAAIC,WAAU;;;;8CAGnB,KAACD;oCACCC,WAAU;oCACVoB,OAAO;wCACLC,cAAc;oCAChB;8CAEA,cAAA,KAAC9B;wCACCU,SAAQ;wCACRR,qBACE,MAACM;4CAAIC,WAAU;;8DACb,KAACyB;oDAAKzB,WAAU;8DACd,cAAA,KAACX;wDACC0B,MAAK;wDACLT,MAAK;wDACLoB,OAAM;;;8DAGV,KAAC7C;8DAAU;;;;wCAGf0B,aAAY;wCACZC,4BACE,KAACS;4CACCC,KAAKjC;4CACLkC,KAAI;4CACJnB,WAAU;;;;;;;;;;IAS5B;AACF,EAAE"}

package/dist/components/dynamic-item/index.d.ts

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

package/dist/components/dynamic-item/index.d.ts.map

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

package/dist/components/dynamic-item/index.js

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

package/dist/components/dynamic-item/index.js.map

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

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

@@ -7,7 +7,9 @@ export * from './ellipse-mini-solid';
 export * from './info-tooltip-fill';
 export * from './resize';
 export * from './shipfox-logo';
+export * from './slack-logo';
 export * from './spinner';
+export * from './stripe-logo';
 export * from './thunder';
 export * from './x-circle-solid';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/custom/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/components/icon/custom/index.js

@@ -7,7 +7,9 @@ export * from './ellipse-mini-solid.js';
 export * from './info-tooltip-fill.js';
 export * from './resize.js';
 export * from './shipfox-logo.js';
+export * from './slack-logo.js';
 export * from './spinner.js';
+export * from './stripe-logo.js';
 export * from './thunder.js';
 export * from './x-circle-solid.js';
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/icon/custom/index.ts"],"sourcesContent":["export * from './badge';\nexport * from './check-circle-solid';\nexport * from './circle-dotted-line';\nexport * from './component-fill';\nexport * from './component-line';\nexport * from './ellipse-mini-solid';\nexport * from './info-tooltip-fill';\nexport * from './resize';\nexport * from './shipfox-logo';\nexport * from './spinner';\nexport * from './thunder';\nexport * from './x-circle-solid';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,uBAAuB;AACrC,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../../src/components/icon/custom/index.ts"],"sourcesContent":["export * from './badge';\nexport * from './check-circle-solid';\nexport * from './circle-dotted-line';\nexport * from './component-fill';\nexport * from './component-line';\nexport * from './ellipse-mini-solid';\nexport * from './info-tooltip-fill';\nexport * from './resize';\nexport * from './shipfox-logo';\nexport * from './slack-logo';\nexport * from './spinner';\nexport * from './stripe-logo';\nexport * from './thunder';\nexport * from './x-circle-solid';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,uBAAuB;AACrC,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,mBAAmB"}

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

@@ -0,0 +1,6 @@
+import type { RemixiconComponentType } from '@remixicon/react';
+import type { ComponentProps } from 'react';
+type SlackLogoProps = ComponentProps<RemixiconComponentType>;
+export declare function SlackLogo(props: SlackLogoProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=slack-logo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slack-logo.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/custom/slack-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAE1C,KAAK,cAAc,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAE7D,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CA6B9C"}

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"}