@shipfox/react-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../components/icon';
+import type { ComponentProps } from 'react';
+export declare const iconButtonVariants: (props?: ({
+    variant?: "transparent" | "primary" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    radius?: "full" | "rounded" | null | undefined;
+    muted?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function IconButton({ className, variant, size, radius, muted, asChild, children, icon, ...props }: ComponentProps<'button'> & VariantProps<typeof iconButtonVariants> & {
+    asChild?: boolean;
+    icon?: IconName;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,kBAAkB;;;;;8EAkC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAe,EACf,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,2CAYF"}

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+export const iconButtonVariants = cva('inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none', {
+    variants: {
+        variant: {
+            primary: 'bg-background-button-inverted-default text-tag-neutral-icon 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',
+            transparent: 'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled'
+        },
+        size: {
+            '2xs': 'w-20 h-20 text-xs',
+            xs: 'w-24 h-24 text-xs',
+            sm: 'w-28 h-28 text-sm',
+            md: 'w-32 h-32 text-md',
+            lg: 'w-36 h-36 text-lg',
+            xl: 'w-40 h-40 text-xl'
+        },
+        radius: {
+            rounded: 'rounded-6',
+            full: 'rounded-full'
+        },
+        muted: {
+            true: 'opacity-60',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        radius: 'rounded',
+        muted: false
+    }
+});
+export function IconButton({ className, variant, size, radius, muted, asChild = false, children, icon, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return /*#__PURE__*/ _jsx(Comp, {
+        "data-slot": "icon-button",
+        className: cn(iconButtonVariants({
+            variant,
+            size,
+            radius,
+            muted
+        }), className),
+        ...props,
+        children: icon ? /*#__PURE__*/ _jsx(Icon, {
+            name: icon
+        }) : children
+    });
+}
+
+//# sourceMappingURL=icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/icon-button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const iconButtonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-tag-neutral-icon 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        transparent:\n          'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'w-20 h-20 text-xs',\n        xs: 'w-24 h-24 text-xs',\n        sm: 'w-28 h-28 text-sm',\n        md: 'w-32 h-32 text-md',\n        lg: 'w-36 h-36 text-lg',\n        xl: 'w-40 h-40 text-xl',\n      },\n      radius: {\n        rounded: 'rounded-6',\n        full: 'rounded-full',\n      },\n      muted: {\n        true: 'opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      radius: 'rounded',\n      muted: false,\n    },\n  },\n);\n\nexport function IconButton({\n  className,\n  variant,\n  size,\n  radius,\n  muted,\n  asChild = false,\n  children,\n  icon,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof iconButtonVariants> & {\n    asChild?: boolean;\n    icon?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"icon-button\"\n      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} /> : children}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","iconButtonVariants","variants","variant","primary","transparent","size","xs","sm","md","lg","xl","radius","rounded","full","muted","true","false","defaultVariants","IconButton","className","asChild","children","icon","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,kIACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,aACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,OAAO;YACLC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACff,SAAS;QACTG,MAAM;QACNM,QAAQ;QACRG,OAAO;IACT;AACF,GACA;AAEF,OAAO,SAASI,WAAW,EACzBC,SAAS,EACTjB,OAAO,EACPG,IAAI,EACJM,MAAM,EACNG,KAAK,EACLM,UAAU,KAAK,EACfC,QAAQ,EACRC,IAAI,EACJ,GAAGC,OAKF;IACD,MAAMC,OAAOJ,UAAUxB,OAAO;IAE9B,qBACE,KAAC4B;QACCC,aAAU;QACVN,WAAWpB,GAAGC,mBAAmB;YAACE;YAASG;YAAMM;YAAQG;QAAK,IAAIK;QACjE,GAAGI,KAAK;kBAERD,qBAAO,KAACxB;YAAK4B,MAAMJ;aAAWD;;AAGrC"}

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

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

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

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

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

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

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

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

package/dist/components/button/index.js

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

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

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

package/dist/components/checkbox/checkbox-label.d.ts

@@ -0,0 +1,14 @@
+import { type CheckboxProps } from './checkbox';
+export type CheckboxLabelProps = Omit<CheckboxProps, 'id'> & {
+    id?: string;
+    label: string;
+    optional?: boolean;
+    description?: string;
+    showInfoIcon?: boolean;
+    border?: boolean;
+    className?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+};
+export declare function CheckboxLabel({ id, label, optional, description, showInfoIcon, border, className, labelClassName, descriptionClassName, ...checkboxProps }: CheckboxLabelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox-label.d.ts.map

package/dist/components/checkbox/checkbox-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-label.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,QAAgB,EAChB,WAAW,EACX,YAAoB,EACpB,MAAc,EACd,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,GAAG,aAAa,EACjB,EAAE,kBAAkB,2CA+FpB"}

package/dist/components/checkbox/checkbox-label.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/icon.js';
+import { Label } from '../label/label.js';
+import { Checkbox } from './checkbox.js';
+export function CheckboxLabel({ id, label, optional = false, description, showInfoIcon = false, border = false, className, labelClassName, descriptionClassName, ...checkboxProps }) {
+    const generateId = useId();
+    const checkboxId = id || generateId;
+    const isDisabled = checkboxProps.disabled ?? false;
+    const renderContent = (checkboxId)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-4 flex-1 min-w-0",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-4 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Label, {
+                            className: cn('text-sm leading-20 overflow-hidden text-ellipsis whitespace-nowrap', isDisabled ? 'font-normal text-foreground-neutral-subtle' : 'font-medium text-foreground-neutral-base', labelClassName),
+                            htmlFor: checkboxId,
+                            children: label
+                        }),
+                        optional && /*#__PURE__*/ _jsx("span", {
+                            className: "text-sm leading-20 font-regular text-foreground-neutral-muted whitespace-nowrap",
+                            children: "(Optional)"
+                        }),
+                        showInfoIcon && /*#__PURE__*/ _jsx(Icon, {
+                            name: "info",
+                            className: "size-16 text-foreground-neutral-muted shrink-0",
+                            "aria-hidden": "true"
+                        })
+                    ]
+                }),
+                description && /*#__PURE__*/ _jsx("p", {
+                    className: cn('text-sm leading-20', isDisabled ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-subtle', descriptionClassName),
+                    children: description
+                })
+            ]
+        });
+    if (border) {
+        return /*#__PURE__*/ _jsxs(Label, {
+            htmlFor: checkboxId,
+            className: cn(// Base container styles with border
+            'flex items-start gap-10 rounded-8 p-8 transition-all duration-100', // Unchecked state - default
+            'bg-checkbox-unchecked-bg shadow-checkbox-unchecked', // Unchecked state - hover
+            'hover:bg-checkbox-unchecked-bg-hover', // Unchecked state - focus
+            'has-data-[state=unchecked]:focus-visible:shadow-border-interactive-with-active', // Checked state - default
+            'has-data-[state=checked]:bg-background-neutral-base has-data-[state=checked]:shadow-checkbox-checked', // Checked state - hover
+            'has-data-[state=checked]:hover:bg-background-neutral-hover', // Checked state - focus
+            'has-data-[state=checked]:focus-visible:shadow-checkbox-checked-focus', // Indeterminate state - default
+            'has-data-[state=indeterminate]:bg-background-neutral-base has-data-[state=indeterminate]:shadow-checkbox-indeterminate', // Indeterminate state - hover
+            'has-data-[state=indeterminate]:hover:bg-background-neutral-hover', // Indeterminate state - focus
+            'has-data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus', // Disabled state
+            isDisabled && 'opacity-50 cursor-not-allowed', !isDisabled && 'cursor-pointer', className),
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: "p-4",
+                    children: /*#__PURE__*/ _jsx(Checkbox, {
+                        id: checkboxId,
+                        ...checkboxProps
+                    })
+                }),
+                renderContent(checkboxId)
+            ]
+        });
+    }
+    // Without border variant
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex items-start gap-10', className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "p-2",
+                children: /*#__PURE__*/ _jsx(Checkbox, {
+                    id: checkboxId,
+                    ...checkboxProps
+                })
+            }),
+            renderContent(checkboxId)
+        ]
+    });
+}
+
+//# sourceMappingURL=checkbox-label.js.map

package/dist/components/checkbox/checkbox-label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox-label.tsx"],"sourcesContent":["import {useId} from 'react';\nimport {cn} from 'utils/cn';\nimport {Icon} from '../icon/icon';\nimport {Label} from '../label/label';\nimport {Checkbox, type CheckboxProps} from './checkbox';\n\nexport type CheckboxLabelProps = Omit<CheckboxProps, 'id'> & {\n  id?: string;\n  label: string;\n  optional?: boolean;\n  description?: string;\n  showInfoIcon?: boolean;\n  border?: boolean;\n  className?: string;\n  labelClassName?: string;\n  descriptionClassName?: string;\n};\n\nexport function CheckboxLabel({\n  id,\n  label,\n  optional = false,\n  description,\n  showInfoIcon = false,\n  border = false,\n  className,\n  labelClassName,\n  descriptionClassName,\n  ...checkboxProps\n}: CheckboxLabelProps) {\n  const generateId = useId();\n  const checkboxId = id || generateId;\n  const isDisabled = checkboxProps.disabled ?? false;\n\n  const renderContent = (checkboxId: string) => (\n    <div className=\"flex flex-col gap-4 flex-1 min-w-0\">\n      <div className=\"flex gap-4 items-center\">\n        <Label\n          className={cn(\n            'text-sm leading-20 overflow-hidden text-ellipsis whitespace-nowrap',\n            isDisabled\n              ? 'font-normal text-foreground-neutral-subtle'\n              : 'font-medium text-foreground-neutral-base',\n            labelClassName,\n          )}\n          htmlFor={checkboxId}\n        >\n          {label}\n        </Label>\n        {optional && (\n          <span className=\"text-sm leading-20 font-regular text-foreground-neutral-muted whitespace-nowrap\">\n            (Optional)\n          </span>\n        )}\n        {showInfoIcon && (\n          <Icon\n            name=\"info\"\n            className=\"size-16 text-foreground-neutral-muted shrink-0\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </div>\n      {description && (\n        <p\n          className={cn(\n            'text-sm leading-20',\n            isDisabled ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-subtle',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </div>\n  );\n\n  if (border) {\n    return (\n      <Label\n        htmlFor={checkboxId}\n        className={cn(\n          // Base container styles with border\n          'flex items-start gap-10 rounded-8 p-8 transition-all duration-100',\n          // Unchecked state - default\n          'bg-checkbox-unchecked-bg shadow-checkbox-unchecked',\n          // Unchecked state - hover\n          'hover:bg-checkbox-unchecked-bg-hover',\n          // Unchecked state - focus\n          'has-data-[state=unchecked]:focus-visible:shadow-border-interactive-with-active',\n          // Checked state - default\n          'has-data-[state=checked]:bg-background-neutral-base has-data-[state=checked]:shadow-checkbox-checked',\n          // Checked state - hover\n          'has-data-[state=checked]:hover:bg-background-neutral-hover',\n          // Checked state - focus\n          'has-data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',\n          // Indeterminate state - default\n          'has-data-[state=indeterminate]:bg-background-neutral-base has-data-[state=indeterminate]:shadow-checkbox-indeterminate',\n          // Indeterminate state - hover\n          'has-data-[state=indeterminate]:hover:bg-background-neutral-hover',\n          // Indeterminate state - focus\n          'has-data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',\n          // Disabled state\n          isDisabled && 'opacity-50 cursor-not-allowed',\n          !isDisabled && 'cursor-pointer',\n          className,\n        )}\n      >\n        <span className=\"p-4\">\n          <Checkbox id={checkboxId} {...checkboxProps} />\n        </span>\n        {renderContent(checkboxId)}\n      </Label>\n    );\n  }\n\n  // Without border variant\n  return (\n    <div className={cn('flex items-start gap-10', className)}>\n      <span className=\"p-2\">\n        <Checkbox id={checkboxId} {...checkboxProps} />\n      </span>\n      {renderContent(checkboxId)}\n    </div>\n  );\n}\n"],"names":["useId","cn","Icon","Label","Checkbox","CheckboxLabel","id","label","optional","description","showInfoIcon","border","className","labelClassName","descriptionClassName","checkboxProps","generateId","checkboxId","isDisabled","disabled","renderContent","div","htmlFor","span","name","aria-hidden","p"],"mappings":";AAAA,SAAQA,KAAK,QAAO,QAAQ;AAC5B,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,IAAI,QAAO,eAAe;AAClC,SAAQC,KAAK,QAAO,iBAAiB;AACrC,SAAQC,QAAQ,QAA2B,aAAa;AAcxD,OAAO,SAASC,cAAc,EAC5BC,EAAE,EACFC,KAAK,EACLC,WAAW,KAAK,EAChBC,WAAW,EACXC,eAAe,KAAK,EACpBC,SAAS,KAAK,EACdC,SAAS,EACTC,cAAc,EACdC,oBAAoB,EACpB,GAAGC,eACgB;IACnB,MAAMC,aAAahB;IACnB,MAAMiB,aAAaX,MAAMU;IACzB,MAAME,aAAaH,cAAcI,QAAQ,IAAI;IAE7C,MAAMC,gBAAgB,CAACH,2BACrB,MAACI;YAAIT,WAAU;;8BACb,MAACS;oBAAIT,WAAU;;sCACb,KAACT;4BACCS,WAAWX,GACT,sEACAiB,aACI,+CACA,4CACJL;4BAEFS,SAASL;sCAERV;;wBAEFC,0BACC,KAACe;4BAAKX,WAAU;sCAAkF;;wBAInGF,8BACC,KAACR;4BACCsB,MAAK;4BACLZ,WAAU;4BACVa,eAAY;;;;gBAIjBhB,6BACC,KAACiB;oBACCd,WAAWX,GACT,sBACAiB,aAAa,qCAAqC,kCAClDJ;8BAGDL;;;;IAMT,IAAIE,QAAQ;QACV,qBACE,MAACR;YACCmB,SAASL;YACTL,WAAWX,GACT,oCAAoC;YACpC,qEACA,4BAA4B;YAC5B,sDACA,0BAA0B;YAC1B,wCACA,0BAA0B;YAC1B,kFACA,0BAA0B;YAC1B,wGACA,wBAAwB;YACxB,8DACA,wBAAwB;YACxB,wEACA,gCAAgC;YAChC,0HACA,8BAA8B;YAC9B,oEACA,8BAA8B;YAC9B,oFACA,iBAAiB;YACjBiB,cAAc,iCACd,CAACA,cAAc,kBACfN;;8BAGF,KAACW;oBAAKX,WAAU;8BACd,cAAA,KAACR;wBAASE,IAAIW;wBAAa,GAAGF,aAAa;;;gBAE5CK,cAAcH;;;IAGrB;IAEA,yBAAyB;IACzB,qBACE,MAACI;QAAIT,WAAWX,GAAG,2BAA2BW;;0BAC5C,KAACW;gBAAKX,WAAU;0BACd,cAAA,KAACR;oBAASE,IAAIW;oBAAa,GAAGF,aAAa;;;YAE5CK,cAAcH;;;AAGrB"}

package/dist/components/checkbox/checkbox-links.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type CheckboxProps } from './checkbox';
+export type CheckboxLink = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+export type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {
+    id?: string;
+    label: string;
+    links: CheckboxLink[];
+    separator?: ReactNode;
+    className?: string;
+    labelClassName?: string;
+    linkClassName?: string;
+};
+export declare function CheckboxLinks({ id, label, links, separator, className, labelClassName, linkClassName, ...checkboxProps }: CheckboxLinksProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox-links.d.ts.map

package/dist/components/checkbox/checkbox-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-links.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAQ,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,kBAAkB,2CA2DpB"}

package/dist/components/checkbox/checkbox-links.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../../components/label/index.js';
+import { useId } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Checkbox } from './checkbox.js';
+export function CheckboxLinks({ id, label, links, separator, className, labelClassName, linkClassName, ...checkboxProps }) {
+    const generateId = useId();
+    const checkboxId = id || generateId;
+    const isDisabled = checkboxProps.disabled ?? false;
+    const defaultSeparator = /*#__PURE__*/ _jsx("span", {
+        className: "size-3 rounded-full bg-foreground-neutral-muted",
+        "aria-hidden": "true"
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex gap-10 items-start', className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "p-2",
+                children: /*#__PURE__*/ _jsx(Checkbox, {
+                    id: checkboxId,
+                    ...checkboxProps
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-4 items-start flex-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: checkboxId,
+                        className: cn('text-sm leading-20 font-medium text-foreground-neutral-base', isDisabled && 'cursor-not-allowed opacity-50', labelClassName),
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex gap-6 items-center",
+                        children: links.map((link, index)=>/*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-6 items-center",
+                                children: [
+                                    link.href ? /*#__PURE__*/ _jsx("a", {
+                                        href: link.href,
+                                        onClick: link.onClick,
+                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover', linkClassName),
+                                        children: link.label
+                                    }) : /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: link.onClick,
+                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover', linkClassName),
+                                        children: link.label
+                                    }),
+                                    index < links.length - 1 && (separator ?? defaultSeparator)
+                                ]
+                            }, link.label))
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=checkbox-links.js.map

package/dist/components/checkbox/checkbox-links.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox-links.tsx"],"sourcesContent":["import {Label} from 'components/label';\nimport {type ReactNode, useId} from 'react';\nimport {cn} from 'utils/cn';\nimport {Checkbox, type CheckboxProps} from './checkbox';\n\nexport type CheckboxLink = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\nexport type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {\n  id?: string;\n  label: string;\n  links: CheckboxLink[];\n  separator?: ReactNode;\n  className?: string;\n  labelClassName?: string;\n  linkClassName?: string;\n};\n\nexport function CheckboxLinks({\n  id,\n  label,\n  links,\n  separator,\n  className,\n  labelClassName,\n  linkClassName,\n  ...checkboxProps\n}: CheckboxLinksProps) {\n  const generateId = useId();\n  const checkboxId = id || generateId;\n  const isDisabled = checkboxProps.disabled ?? false;\n  const defaultSeparator = (\n    <span className=\"size-3 rounded-full bg-foreground-neutral-muted\" aria-hidden=\"true\" />\n  );\n\n  return (\n    <div className={cn('flex gap-10 items-start', className)}>\n      <span className=\"p-2\">\n        <Checkbox id={checkboxId} {...checkboxProps} />\n      </span>\n      <div className=\"flex flex-col gap-4 items-start flex-1\">\n        <Label\n          htmlFor={checkboxId}\n          className={cn(\n            'text-sm leading-20 font-medium text-foreground-neutral-base',\n            isDisabled && 'cursor-not-allowed opacity-50',\n            labelClassName,\n          )}\n        >\n          {label}\n        </Label>\n        <div className=\"flex gap-6 items-center\">\n          {links.map((link, index) => (\n            <div key={link.label} className=\"flex gap-6 items-center\">\n              {link.href ? (\n                <a\n                  href={link.href}\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </button>\n              )}\n              {index < links.length - 1 && (separator ?? defaultSeparator)}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["Label","useId","cn","Checkbox","CheckboxLinks","id","label","links","separator","className","labelClassName","linkClassName","checkboxProps","generateId","checkboxId","isDisabled","disabled","defaultSeparator","span","aria-hidden","div","htmlFor","map","link","index","href","a","onClick","button","type","length"],"mappings":";AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,SAAwBC,KAAK,QAAO,QAAQ;AAC5C,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,QAAQ,QAA2B,aAAa;AAkBxD,OAAO,SAASC,cAAc,EAC5BC,EAAE,EACFC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACb,GAAGC,eACgB;IACnB,MAAMC,aAAaZ;IACnB,MAAMa,aAAaT,MAAMQ;IACzB,MAAME,aAAaH,cAAcI,QAAQ,IAAI;IAC7C,MAAMC,iCACJ,KAACC;QAAKT,WAAU;QAAkDU,eAAY;;IAGhF,qBACE,MAACC;QAAIX,WAAWP,GAAG,2BAA2BO;;0BAC5C,KAACS;gBAAKT,WAAU;0BACd,cAAA,KAACN;oBAASE,IAAIS;oBAAa,GAAGF,aAAa;;;0BAE7C,MAACQ;gBAAIX,WAAU;;kCACb,KAACT;wBACCqB,SAASP;wBACTL,WAAWP,GACT,+DACAa,cAAc,iCACdL;kCAGDJ;;kCAEH,KAACc;wBAAIX,WAAU;kCACZF,MAAMe,GAAG,CAAC,CAACC,MAAMC,sBAChB,MAACJ;gCAAqBX,WAAU;;oCAC7Bc,KAAKE,IAAI,iBACR,KAACC;wCACCD,MAAMF,KAAKE,IAAI;wCACfE,SAASJ,KAAKI,OAAO;wCACrBlB,WAAWP,GACT,wEACA,qDACAS;kDAGDY,KAAKjB,KAAK;uDAGb,KAACsB;wCACCC,MAAK;wCACLF,SAASJ,KAAKI,OAAO;wCACrBlB,WAAWP,GACT,wEACA,qDACAS;kDAGDY,KAAKjB,KAAK;;oCAGdkB,QAAQjB,MAAMuB,MAAM,GAAG,KAAMtB,CAAAA,aAAaS,gBAAe;;+BA1BlDM,KAAKjB,KAAK;;;;;;AAiChC"}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,9 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkboxVariants>;
+export declare function Checkbox({ className, size, checked, defaultChecked, onCheckedChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAEhE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,gBAAgB;;8EAc5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GACvE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAExC,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,cAAc,EACd,eAAe,EACf,GAAG,KAAK,EACT,EAAE,aAAa,2CAsCf"}