@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/Tag/Tag.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","AddIcon","Tag","meta","title","component","parameters","layout","Default","args","content","WithOnClickCallback","onClick","evt","console","log","WithOnDismissCallback","onDismiss","WithCustomDismissIconElement","dismissIconElement","createElement","dismissIconLabel","NeutralBase","variant","NeutralBaseDisabled","disabled","NeutralBaseOutline","NeutralBaseOutlineDisabled","NeutralLight","NeutralLightDisabled","NeutralMuted","NeutralMutedDisabled","NeutralStrong","NeutralStrongDisabled","NeutralXStrong","NeutralXStrongDisabled","NeutralDark","NeutralDarkDisabled","Accent","AccentDisabled","AccentLight","AccentLightDisabled","Success","SuccessDisabled","SuccessLight","SuccessLightDisabled","Warning","WarningDisabled","Destructive","DestructiveDisabled","FullExample","render","className","Object","assign","Documentation","undefined","argTypes","description","control","options"],"sources":["Tag.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag\";\n\nconst meta: Meta<typeof Tag> = {\n    title: \"Components/Tag\",\n    component: Tag,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {\n    args: {\n        content: \"Label\"\n    }\n};\n\nexport const WithOnClickCallback: Story = {\n    args: {\n        ...Default.args,\n        onClick: evt => {\n            console.log(\"onClick\", evt);\n        }\n    }\n};\n\nexport const WithOnDismissCallback: Story = {\n    args: {\n        ...Default.args,\n        onDismiss: evt => {\n            console.log(\"onDismiss\", evt);\n        }\n    }\n};\n\nexport const WithCustomDismissIconElement: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        dismissIconElement: <AddIcon />,\n        dismissIconLabel: \"Custom dismiss label\"\n    }\n};\n\nexport const NeutralBase: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base\"\n    }\n};\n\nexport const NeutralBaseDisabled: Story = {\n    args: {\n        ...NeutralBase.args,\n        disabled: true\n    }\n};\n\nexport const NeutralBaseOutline: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\"\n    }\n};\n\nexport const NeutralBaseOutlineDisabled: Story = {\n    args: {\n        ...NeutralBaseOutline.args,\n        disabled: true\n    }\n};\n\nexport const NeutralLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-light\"\n    }\n};\n\nexport const NeutralLightDisabled: Story = {\n    args: {\n        ...NeutralLight.args,\n        disabled: true\n    }\n};\n\nexport const NeutralMuted: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-muted\"\n    }\n};\n\nexport const NeutralMutedDisabled: Story = {\n    args: {\n        ...NeutralMuted.args,\n        disabled: true\n    }\n};\n\nexport const NeutralStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-strong\"\n    }\n};\n\nexport const NeutralStrongDisabled: Story = {\n    args: {\n        ...NeutralStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralXStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-xstrong\"\n    }\n};\n\nexport const NeutralXStrongDisabled: Story = {\n    args: {\n        ...NeutralXStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralDark: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-dark\"\n    }\n};\n\nexport const NeutralDarkDisabled: Story = {\n    args: {\n        ...NeutralDark.args,\n        disabled: true\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent\"\n    }\n};\n\nexport const AccentDisabled: Story = {\n    args: {\n        ...Accent.args,\n        disabled: true\n    }\n};\n\nexport const AccentLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent-light\"\n    }\n};\n\nexport const AccentLightDisabled: Story = {\n    args: {\n        ...AccentLight.args,\n        disabled: true\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success\"\n    }\n};\n\nexport const SuccessDisabled: Story = {\n    args: {\n        ...Success.args,\n        disabled: true\n    }\n};\n\nexport const SuccessLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success-light\"\n    }\n};\n\nexport const SuccessLightDisabled: Story = {\n    args: {\n        ...SuccessLight.args,\n        disabled: true\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"warning\"\n    }\n};\n\nexport const WarningDisabled: Story = {\n    args: {\n        ...Warning.args,\n        disabled: true\n    }\n};\n\nexport const Destructive: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"destructive\"\n    }\n};\n\nexport const DestructiveDisabled: Story = {\n    args: {\n        ...Destructive.args,\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: WithOnDismissCallback.args,\n    render: args => {\n        return (\n            <div className={\"wby-flex wby-gap-sm\"}>\n                <Tag {...args} content={\"Neutral base\"} variant={\"neutral-base\"} />\n                <Tag {...args} content={\"Neutral base outline\"} variant={\"neutral-base-outline\"} />\n                <Tag {...args} content={\"Neutral light\"} variant={\"neutral-light\"} />\n                <Tag {...args} content={\"Neutral muted\"} variant={\"neutral-muted\"} />\n                <Tag {...args} content={\"Neutral strong\"} variant={\"neutral-strong\"} />\n                <Tag {...args} content={\"Neutral xstrong\"} variant={\"neutral-xstrong\"} />\n                <Tag {...args} content={\"Neutral dark\"} variant={\"neutral-dark\"} />\n                <Tag {...args} content={\"Success\"} variant={\"success\"} />\n                <Tag {...args} content={\"Success light\"} variant={\"success-light\"} />\n                <Tag {...args} content={\"Warning\"} variant={\"warning\"} />\n                <Tag {...args} content={\"Destructive\"} variant={\"destructive\"} />\n                <Tag {...args} content={\"Accent\"} variant={\"accent\"} />\n                <Tag {...args} content={\"Accent light\"} variant={\"accent-light\"} />\n            </div>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        content: \"Label\",\n        variant: \"neutral-base\",\n        disabled: false,\n        onDismiss: undefined,\n        dismissIconElement: undefined,\n        dismissIconLabel: undefined\n    },\n    argTypes: {\n        content: {\n            description: \"The content of the tag. Please refer to the example code for details.\",\n            control: \"text\"\n        },\n        variant: {\n            description: \"The color variant of the tag.\",\n            control: \"select\",\n            options: [\n                \"neutral-base\",\n                \"neutral-base-outline\",\n                \"neutral-light\",\n                \"neutral-muted\",\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"success-light\",\n                \"warning\",\n                \"destructive\",\n                \"accent\",\n                \"accent-light\"\n            ]\n        },\n        disabled: {\n            description: \"Whether the tag is disabled.\",\n            control: \"boolean\"\n        },\n        onDismiss: {\n            description:\n                \"Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.\",\n            control: \"none\"\n        },\n        dismissIconElement: {\n            description:\n                \"Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.\",\n            control: \"none\"\n        },\n        dismissIconLabel: {\n            description:\n                \"Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Tag/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tag";

package/Tag/index.js

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

package/Tag/index.js.map

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

package/Tags/Tags.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { type TagsPrimitiveProps } from "./primitives";
+import { type FormComponentProps } from "../FormComponent";
+type TagsProps = TagsPrimitiveProps & FormComponentProps;
+declare const Tags: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
+    original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Tags, type TagsProps };

package/Tags/Tags.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useMemo } from "react";
+import { makeDecoratable, generateId } from "../utils";
+import { TagsPrimitive } from "./primitives";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableTags = ({
+  label,
+  description,
+  note,
+  required,
+  disabled,
+  validation,
+  validate,
+  onBlur: originalOnBlur,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const id = useMemo(() => generateId(props.id), [props.id]);
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  const onBlur = useCallback(async e => {
+    if (validate) {
+      // Since we are accessing event in an async operation, we need to persist it.
+      // See https://reactjs.org/docs/events.html#event-pooling.
+      e.persist();
+      await validate();
+    }
+    originalOnBlur && originalOnBlur(e);
+  }, [validate, originalOnBlur]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    htmlFor: id,
+    text: label,
+    required: required,
+    disabled: disabled,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(TagsPrimitive, Object.assign({}, props, {
+    id: id,
+    disabled: disabled,
+    invalid: invalid,
+    onBlur: onBlur
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: disabled
+  }));
+};
+const Tags = makeDecoratable("Tags", DecoratableTags);
+export { Tags };
+
+//# sourceMappingURL=Tags.js.map

package/Tags/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","generateId","TagsPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableTags","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","props","isValid","validationIsValid","message","validationMessage","id","invalid","e","persist","createElement","className","htmlFor","text","Object","assign","Tags"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, generateId } from \"~/utils\";\nimport { TagsPrimitive, type TagsPrimitiveProps } from \"./primitives\";\n\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent\";\n\ntype TagsProps = TagsPrimitiveProps & FormComponentProps;\n\nconst DecoratableTags = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    ...props\n}: TagsProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const id = useMemo(() => generateId(props.id), [props.id]);\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                htmlFor={id}\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <TagsPrimitive\n                {...props}\n                id={id}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst Tags = makeDecoratable(\"Tags\", DecoratableTags);\n\nexport { Tags, type TagsProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,aAAa;AAEtB,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAMrB,MAAMC,eAAe,GAAGA,CAAC;EACrBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtB,GAAGC;AACI,CAAC,KAAK;EACb,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGR,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMS,EAAE,GAAGvB,OAAO,CAAC,MAAME,UAAU,CAACgB,KAAK,CAACK,EAAE,CAAC,EAAE,CAACL,KAAK,CAACK,EAAE,CAAC,CAAC;EAC1D,MAAMC,OAAO,GAAGxB,OAAO,CAAC,MAAMoB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAMJ,MAAM,GAAGjB,WAAW,CACtB,MAAO0B,CAAqC,IAAK;IAC7C,IAAIV,QAAQ,EAAE;MACV;MACA;MACAU,CAAC,CAACC,OAAO,CAAC,CAAC;MACX,MAAMX,QAAQ,CAAC,CAAC;IACpB;IACAE,cAAc,IAAIA,cAAc,CAACQ,CAAC,CAAC;EACvC,CAAC,EACD,CAACV,QAAQ,EAAEE,cAAc,CAC7B,CAAC;EAED,oBACInB,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB9B,KAAA,CAAA6B,aAAA,CAACrB,kBAAkB;IACfuB,OAAO,EAAEN,EAAG;IACZO,IAAI,EAAErB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACF1B,KAAA,CAAA6B,aAAA,CAACvB,wBAAwB;IAAC0B,IAAI,EAAEpB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEf,KAAA,CAAA6B,aAAA,CAACxB,aAAa,EAAA4B,MAAA,CAAAC,MAAA,KACNd,KAAK;IACTK,EAAE,EAAEA,EAAG;IACPV,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA;EAAO,EAClB,CAAC,eACFlB,KAAA,CAAA6B,aAAA,CAACtB,yBAAyB;IACtByB,IAAI,EAAER,iBAAkB;IACxBE,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFf,KAAA,CAAA6B,aAAA,CAACpB,iBAAiB;IAACuB,IAAI,EAAEnB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMoB,IAAI,GAAGhC,eAAe,CAAC,MAAM,EAAEO,eAAe,CAAC;AAErD,SAASyB,IAAI","ignoreList":[]}

package/Tags/Tags.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tags } from "./Tags";
+declare const meta: Meta<typeof Tags>;
+export default meta;
+type Story = StoryObj<typeof Tags>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithRequiredLabel: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;

package/Tags/Tags.stories.js

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { Tags } from "./Tags";
+const meta = {
+  title: "Components/Form/Tags",
+  component: Tags,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    onValueInput: {
+      action: "onValueInput"
+    },
+    onValueAdd: {
+      action: "onValueAdd"
+    },
+    onValueRemove: {
+      action: "onValueRemove"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [values, setValues] = useState(args.value);
+    return /*#__PURE__*/React.createElement(Tags, Object.assign({}, args, {
+      value: values,
+      onChange: setValues
+    }));
+  }
+};
+export default meta;
+export const Default = {};
+export const WithLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label"
+  }
+};
+export const WithRequiredLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    ...Default.args,
+    description: "Provide the required information for processing your request."
+  }
+};
+export const WithNotes = {
+  args: {
+    ...Default.args,
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const WithErrors = {
+  args: {
+    ...Default.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    disabled: true
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+
+//# sourceMappingURL=Tags.stories.js.map

package/Tags/Tags.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Tags","meta","title","component","argTypes","onChange","action","onValueInput","onValueAdd","onValueRemove","disabled","control","defaultValue","parameters","layout","render","args","values","setValues","value","createElement","Object","assign","Default","WithLabel","label","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample"],"sources":["Tags.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tags } from \"./Tags\";\n\nconst meta: Meta<typeof Tags> = {\n    title: \"Components/Form/Tags\",\n    component: Tags,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onValueInput: { action: \"onValueInput\" },\n        onValueAdd: { action: \"onValueAdd\" },\n        onValueRemove: { action: \"onValueRemove\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return <Tags {...args} value={values} onChange={setValues} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tags>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,IAAI;AAEb,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,sBAAsB;EAC7BC,SAAS,EAAEH,IAAI;EACfI,QAAQ,EAAE;IACNC,QAAQ,EAAE;MAAEC,MAAM,EAAE;IAAW,CAAC;IAChCC,YAAY,EAAE;MAAED,MAAM,EAAE;IAAe,CAAC;IACxCE,UAAU,EAAE;MAAEF,MAAM,EAAE;IAAa,CAAC;IACpCG,aAAa,EAAE;MAAEH,MAAM,EAAE;IAAgB,CAAC;IAC1CI,QAAQ,EAAE;MACNC,OAAO,EAAE,SAAS;MAClBC,YAAY,EAAE;IAClB;EACJ,CAAC;EACDC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGnB,QAAQ,CAACiB,IAAI,CAACG,KAAK,CAAC;IAChD,oBAAOrB,KAAA,CAAAsB,aAAA,CAACpB,IAAI,EAAAqB,MAAA,CAAAC,MAAA,KAAKN,IAAI;MAAEG,KAAK,EAAEF,MAAO;MAACZ,QAAQ,EAAEa;IAAU,EAAE,CAAC;EACjE;AACJ,CAAC;AAED,eAAejB,IAAI;AAGnB,OAAO,MAAMsB,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,SAAgB,GAAG;EAC5BR,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMC,iBAAwB,GAAG;EACpCV,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,eAAsB,GAAG;EAClCZ,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfa,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5Bd,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfe,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BhB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfiB,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMC,QAAe,GAAG;EAC3BpB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBf,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAM2B,WAAkB,GAAG;EAC9BrB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE,IAAI;IACdE,WAAW,EAAE,+DAA+D;IAC5EE,IAAI,EAAE,qEAAqE;IAC3EE,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}

package/Tags/domain/TagItem.d.ts

@@ -0,0 +1,18 @@
+export declare class TagItem {
+    private readonly _id;
+    private readonly _label;
+    protected _protected: boolean;
+    protected constructor(data: {
+        id: string;
+        label: string;
+        protected: boolean;
+    });
+    static create(data: {
+        id?: string;
+        label: string;
+        protected?: boolean;
+    }): TagItem;
+    get id(): string;
+    get label(): string;
+    get protected(): boolean;
+}

package/Tags/domain/TagItem.js

@@ -0,0 +1,26 @@
+import { generateId } from "../../utils";
+export class TagItem {
+  constructor(data) {
+    this._id = data.id;
+    this._label = data.label;
+    this._protected = data.protected;
+  }
+  static create(data) {
+    return new TagItem({
+      id: generateId(data.id),
+      label: data.label,
+      protected: data.protected || false
+    });
+  }
+  get id() {
+    return this._id;
+  }
+  get label() {
+    return this._label;
+  }
+  get protected() {
+    return this._protected;
+  }
+}
+
+//# sourceMappingURL=TagItem.js.map

package/Tags/domain/TagItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateId","TagItem","constructor","data","_id","id","_label","label","_protected","protected","create"],"sources":["TagItem.ts"],"sourcesContent":["import { generateId } from \"~/utils\";\n\nexport class TagItem {\n    private readonly _id: string;\n    private readonly _label: string;\n    protected _protected: boolean;\n\n    protected constructor(data: { id: string; label: string; protected: boolean }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._protected = data.protected;\n    }\n\n    static create(data: { id?: string; label: string; protected?: boolean }): TagItem {\n        return new TagItem({\n            id: generateId(data.id),\n            label: data.label,\n            protected: data.protected || false\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get protected() {\n        return this._protected;\n    }\n}\n"],"mappings":"AAAA,SAASA,UAAU;AAEnB,OAAO,MAAMC,OAAO,CAAC;EAKPC,WAAWA,CAACC,IAAuD,EAAE;IAC3E,IAAI,CAACC,GAAG,GAAGD,IAAI,CAACE,EAAE;IAClB,IAAI,CAACC,MAAM,GAAGH,IAAI,CAACI,KAAK;IACxB,IAAI,CAACC,UAAU,GAAGL,IAAI,CAACM,SAAS;EACpC;EAEA,OAAOC,MAAMA,CAACP,IAAyD,EAAW;IAC9E,OAAO,IAAIF,OAAO,CAAC;MACfI,EAAE,EAAEL,UAAU,CAACG,IAAI,CAACE,EAAE,CAAC;MACvBE,KAAK,EAAEJ,IAAI,CAACI,KAAK;MACjBE,SAAS,EAAEN,IAAI,CAACM,SAAS,IAAI;IACjC,CAAC,CAAC;EACN;EAEA,IAAIJ,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACD,GAAG;EACnB;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIG,SAASA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACD,UAAU;EAC1B;AACJ","ignoreList":[]}

package/Tags/domain/TagItemDto.d.ts

@@ -0,0 +1,5 @@
+export interface TagItemDto {
+    id?: string;
+    label: string;
+    protected?: boolean;
+}

package/Tags/domain/TagItemDto.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=TagItemDto.js.map

package/Tags/domain/TagItemDto.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["TagItemDto.ts"],"sourcesContent":["export interface TagItemDto {\n    id?: string;\n    label: string;\n    protected?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/Tags/domain/TagItemFormatted.d.ts

@@ -0,0 +1,5 @@
+export interface TagItemFormatted {
+    id: string;
+    label: string;
+    protected: boolean;
+}

package/Tags/domain/TagItemFormatted.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=TagItemFormatted.js.map

package/Tags/domain/TagItemFormatted.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["TagItemFormatted.ts"],"sourcesContent":["export interface TagItemFormatted {\n    id: string;\n    label: string;\n    protected: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/Tags/domain/TagItemMapper.d.ts

@@ -0,0 +1,5 @@
+import type { TagItem } from "./TagItem";
+import type { TagItemFormatted } from "./TagItemFormatted";
+export declare class TagItemMapper {
+    static toFormatted(item: TagItem): TagItemFormatted;
+}

package/Tags/domain/TagItemMapper.js

@@ -0,0 +1,11 @@
+export class TagItemMapper {
+  static toFormatted(item) {
+    return {
+      id: item.id,
+      label: item.label,
+      protected: item.protected
+    };
+  }
+}
+
+//# sourceMappingURL=TagItemMapper.js.map

package/Tags/domain/TagItemMapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TagItemMapper","toFormatted","item","id","label","protected"],"sources":["TagItemMapper.ts"],"sourcesContent":["import type { TagItem } from \"./TagItem\";\nimport type { TagItemFormatted } from \"./TagItemFormatted\";\n\nexport class TagItemMapper {\n    static toFormatted(item: TagItem): TagItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            protected: item.protected\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,aAAa,CAAC;EACvB,OAAOC,WAAWA,CAACC,IAAa,EAAoB;IAChD,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;MACjBC,SAAS,EAAEH,IAAI,CAACG;IACpB,CAAC;EACL;AACJ","ignoreList":[]}

package/Tags/domain/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./TagItem";
+export * from "./TagItemDto";
+export * from "./TagItemFormatted";
+export * from "./TagItemMapper";

package/Tags/domain/index.js

@@ -0,0 +1,6 @@
+export * from "./TagItem";
+export * from "./TagItemDto";
+export * from "./TagItemFormatted";
+export * from "./TagItemMapper";
+
+//# sourceMappingURL=index.js.map

package/Tags/domain/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./TagItem\";\nexport * from \"./TagItemDto\";\nexport * from \"./TagItemFormatted\";\nexport * from \"./TagItemMapper\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}

package/Tags/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tags";

package/Tags/index.js

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

package/Tags/index.js.map

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

package/Tags/primitives/TagsPrimitive.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { type InputPrimitiveProps } from "../../Input";
+import type { Icon } from "../../Icon";
+interface TagsPrimitiveProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    /**
+     * Indicates if the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Reference to the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Indicates if the input field is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Callback triggered when a tag is added or removed.
+     */
+    onChange?: (values: string[]) => void;
+    /**
+     * Callback triggered when the input value changes.
+     */
+    onValueInput?: (value: string) => void;
+    /**
+     * Callback triggered when the value is added to the list.
+     */
+    onValueAdd?: (value: string) => void;
+    /**
+     * Callback triggered when a tag is removed.
+     */
+    onValueRemove?: (value: string) => void;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Size of the input field.
+     * Refer to `InputPrimitiveProps["size"]` for possible values.
+     */
+    size?: InputPrimitiveProps["size"];
+    /**
+     * Icon to be displayed at the start of the input field.
+     */
+    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+    /**
+     * Optional selected item.
+     */
+    value?: string[];
+    /**
+     * Protected values cannot be removed by the user, these can be simple strings or regex patterns.
+     */
+    protectedValues?: string[];
+}
+declare const TagsPrimitive: ((props: TagsPrimitiveProps) => React.JSX.Element) & {
+    original: (props: TagsPrimitiveProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: TagsPrimitiveProps) => React.JSX.Element) & {
+        original: (props: TagsPrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: TagsPrimitiveProps) => React.JSX.Element) & {
+        original: (props: TagsPrimitiveProps) => React.JSX.Element;
+        originalName: string; /**
+         * Indicates if the input field is invalid.
+         */
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { TagsPrimitive, type TagsPrimitiveProps };

package/Tags/primitives/TagsPrimitive.js

@@ -0,0 +1,54 @@
+import React, { useMemo } from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { makeDecoratable } from "../../utils";
+import { useTags } from "./useTags";
+import { InputPrimitive } from "../../Input";
+import { Tag } from "../../Tag";
+import { IconButton } from "../../Button";
+const DecoratableTagsPrimitive = props => {
+  const {
+    vm,
+    inputValue,
+    addValue,
+    removeValue
+  } = useTags(props);
+  const inputProps = useMemo(() => ({
+    disabled: props.disabled,
+    inputRef: props.inputRef,
+    invalid: props.invalid,
+    onChange: inputValue,
+    placeholder: props.placeholder,
+    size: props.size,
+    variant: props.variant
+  }), [props]);
+
+  // When user press Enter, add the current input value as a tag
+  const handleKeyDown = event => {
+    if (event.key === "Enter" && event.target) {
+      event.preventDefault();
+      addValue();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputPrimitive, Object.assign({}, inputProps, vm.inputVm, {
+    onChange: inputValue,
+    onKeyDown: handleKeyDown,
+    startIcon: props.startIcon,
+    endIcon: /*#__PURE__*/React.createElement(IconButton, {
+      onClick: addValue,
+      icon: /*#__PURE__*/React.createElement(AddIcon, null),
+      variant: "ghost",
+      disabled: inputProps.disabled
+    })
+  })), vm.valuesVm.values.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "wby-mt-sm wby-flex wby-flex-wrap wby-gap-xs"
+  }, vm.valuesVm.values.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    key: tag.id,
+    content: tag.label,
+    onDismiss: !tag.protected ? () => removeValue(tag.label) : undefined,
+    variant: "neutral-muted"
+  }))));
+};
+const TagsPrimitive = makeDecoratable("TagsPrimitive", DecoratableTagsPrimitive);
+export { TagsPrimitive };
+
+//# sourceMappingURL=TagsPrimitive.js.map

package/Tags/primitives/TagsPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","ReactComponent","AddIcon","makeDecoratable","useTags","InputPrimitive","Tag","IconButton","DecoratableTagsPrimitive","props","vm","inputValue","addValue","removeValue","inputProps","disabled","inputRef","invalid","onChange","placeholder","size","variant","handleKeyDown","event","key","target","preventDefault","createElement","Object","assign","inputVm","onKeyDown","startIcon","endIcon","onClick","icon","valuesVm","values","length","className","map","tag","id","content","label","onDismiss","protected","undefined","TagsPrimitive"],"sources":["TagsPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { makeDecoratable } from \"~/utils\";\nimport { useTags } from \"./useTags\";\nimport { InputPrimitive, type InputPrimitiveProps } from \"~/Input\";\nimport { Tag } from \"~/Tag\";\nimport { IconButton } from \"~/Button\";\nimport type { Icon } from \"~/Icon\";\n\ninterface TagsPrimitiveProps\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     */\n    invalid?: boolean;\n    /**\n     * Callback triggered when a tag is added or removed.\n     */\n    onChange?: (values: string[]) => void;\n    /**\n     * Callback triggered when the input value changes.\n     */\n    onValueInput?: (value: string) => void;\n    /**\n     * Callback triggered when the value is added to the list.\n     */\n    onValueAdd?: (value: string) => void;\n    /**\n     * Callback triggered when a tag is removed.\n     */\n    onValueRemove?: (value: string) => void;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string[];\n    /**\n     * Protected values cannot be removed by the user, these can be simple strings or regex patterns.\n     */\n    protectedValues?: string[];\n}\n\nconst DecoratableTagsPrimitive = (props: TagsPrimitiveProps) => {\n    const { vm, inputValue, addValue, removeValue } = useTags(props);\n\n    const inputProps: InputPrimitiveProps = useMemo(\n        () => ({\n            disabled: props.disabled,\n            inputRef: props.inputRef,\n            invalid: props.invalid,\n            onChange: inputValue,\n            placeholder: props.placeholder,\n            size: props.size,\n            variant: props.variant\n        }),\n        [props]\n    );\n\n    // When user press Enter, add the current input value as a tag\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Enter\" && event.target) {\n            event.preventDefault();\n            addValue();\n        }\n    };\n\n    return (\n        <div>\n            <InputPrimitive\n                {...inputProps}\n                {...vm.inputVm}\n                onChange={inputValue}\n                onKeyDown={handleKeyDown}\n                startIcon={props.startIcon}\n                endIcon={\n                    <IconButton\n                        onClick={addValue}\n                        icon={<AddIcon />}\n                        variant={\"ghost\"}\n                        disabled={inputProps.disabled}\n                    />\n                }\n            />\n\n            {vm.valuesVm.values.length > 0 && (\n                <div className={\"wby-mt-sm wby-flex wby-flex-wrap wby-gap-xs\"}>\n                    {vm.valuesVm.values.map(tag => (\n                        <Tag\n                            key={tag.id}\n                            content={tag.label}\n                            onDismiss={!tag.protected ? () => removeValue(tag.label) : undefined}\n                            variant={\"neutral-muted\"}\n                        />\n                    ))}\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TagsPrimitive = makeDecoratable(\"TagsPrimitive\", DecoratableTagsPrimitive);\n\nexport { TagsPrimitive, type TagsPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AACjE,SAASC,eAAe;AACxB,SAASC,OAAO;AAChB,SAASC,cAAc;AACvB,SAASC,GAAG;AACZ,SAASC,UAAU;AA6DnB,MAAMC,wBAAwB,GAAIC,KAAyB,IAAK;EAC5D,MAAM;IAAEC,EAAE;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGT,OAAO,CAACK,KAAK,CAAC;EAEhE,MAAMK,UAA+B,GAAGd,OAAO,CAC3C,OAAO;IACHe,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;IACxBC,OAAO,EAAER,KAAK,CAACQ,OAAO;IACtBC,QAAQ,EAAEP,UAAU;IACpBQ,WAAW,EAAEV,KAAK,CAACU,WAAW;IAC9BC,IAAI,EAAEX,KAAK,CAACW,IAAI;IAChBC,OAAO,EAAEZ,KAAK,CAACY;EACnB,CAAC,CAAC,EACF,CAACZ,KAAK,CACV,CAAC;;EAED;EACA,MAAMa,aAAa,GAAIC,KAA4C,IAAK;IACpE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACE,MAAM,EAAE;MACvCF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBd,QAAQ,CAAC,CAAC;IACd;EACJ,CAAC;EAED,oBACIb,KAAA,CAAA4B,aAAA,2BACI5B,KAAA,CAAA4B,aAAA,CAACtB,cAAc,EAAAuB,MAAA,CAAAC,MAAA,KACPf,UAAU,EACVJ,EAAE,CAACoB,OAAO;IACdZ,QAAQ,EAAEP,UAAW;IACrBoB,SAAS,EAAET,aAAc;IACzBU,SAAS,EAAEvB,KAAK,CAACuB,SAAU;IAC3BC,OAAO,eACHlC,KAAA,CAAA4B,aAAA,CAACpB,UAAU;MACP2B,OAAO,EAAEtB,QAAS;MAClBuB,IAAI,eAAEpC,KAAA,CAAA4B,aAAA,CAACzB,OAAO,MAAE,CAAE;MAClBmB,OAAO,EAAE,OAAQ;MACjBN,QAAQ,EAAED,UAAU,CAACC;IAAS,CACjC;EACJ,EACJ,CAAC,EAEDL,EAAE,CAAC0B,QAAQ,CAACC,MAAM,CAACC,MAAM,GAAG,CAAC,iBAC1BvC,KAAA,CAAA4B,aAAA;IAAKY,SAAS,EAAE;EAA8C,GACzD7B,EAAE,CAAC0B,QAAQ,CAACC,MAAM,CAACG,GAAG,CAACC,GAAG,iBACvB1C,KAAA,CAAA4B,aAAA,CAACrB,GAAG;IACAkB,GAAG,EAAEiB,GAAG,CAACC,EAAG;IACZC,OAAO,EAAEF,GAAG,CAACG,KAAM;IACnBC,SAAS,EAAE,CAACJ,GAAG,CAACK,SAAS,GAAG,MAAMjC,WAAW,CAAC4B,GAAG,CAACG,KAAK,CAAC,GAAGG,SAAU;IACrE1B,OAAO,EAAE;EAAgB,CAC5B,CACJ,CACA,CAER,CAAC;AAEd,CAAC;AAED,MAAM2B,aAAa,GAAG7C,eAAe,CAAC,eAAe,EAAEK,wBAAwB,CAAC;AAEhF,SAASwC,aAAa","ignoreList":[]}

package/Tags/primitives/TagsPrimitive.stories.d.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TagsPrimitive } from "./TagsPrimitive";
+declare const meta: Meta<typeof TagsPrimitive>;
+export default meta;
+type Story = StoryObj<typeof TagsPrimitive>;
+export declare const Default: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const ExtraLargeSize: Story;
+export declare const PrimaryVariant: Story;
+export declare const PrimaryVariantDisabled: Story;
+export declare const PrimaryVariantInvalid: Story;
+export declare const SecondaryVariant: Story;
+export declare const SecondaryVariantDisabled: Story;
+export declare const SecondaryVariantInvalid: Story;
+export declare const GhostVariant: Story;
+export declare const GhostVariantDisabled: Story;
+export declare const GhostVariantInvalid: Story;
+export declare const GhostNegativeVariant: Story;
+export declare const GhostNegativeVariantDisabled: Story;
+export declare const GhostNegativeVariantInvalid: Story;
+export declare const WithCustomPlaceholder: Story;
+export declare const WithStartIcon: Story;
+export declare const WithInitialValues: Story;
+export declare const WithProtectedValues: Story;
+export declare const WithExternalValueControl: Story;