krl-alfred 2.23.13 → 2.23.15

package/dist/components/Tabs/stories/Tabs.stories.js

@@ -14,92 +14,145 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithFixedTabWidth = exports.LargeSize = exports.SmallSize = exports.WithAutoFlex = exports.WithDisabledTab = exports.WithDefaultTab = exports.Default = void 0;
+exports.Complete = exports.Interactive = exports.AllSizes = exports.Empty = exports.LongTitles = exports.HideHeaderOnMobile = exports.ManyTabs = exports.WithFixedTabWidth = exports.WithAutoFlex = exports.LargeSize = exports.MediumSize = exports.SmallSize = exports.WithDisabledTab = exports.WithDefaultTab = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var Tabs_1 = __importDefault(require("../Tabs"));
-var meta = {
+var props_1 = require("../props");
+var ExampleContent = function (_a) {
+    var title = _a.title;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { padding: "20px", background: "#f5f5f5", borderRadius: "8px" } }, { children: [title, " Content"] })));
+};
+var defaultTabs = [
+    { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
+    { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
+    { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
+];
+var manyTabs = Array.from({ length: 8 }, function (_, i) { return ({
+    key: "tab".concat(i + 1),
+    title: "Tab ".concat(i + 1),
+    content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab ".concat(i + 1) }),
+}); });
+var baseArgs = {
+    tabs: defaultTabs,
+    size: "md",
+    hasAutoFlex: false,
+    isHideTabHeaderOnMobile: false,
+    tabButtonWidth: undefined,
+};
+exports.default = {
     title: "Components/Tabs",
-    component: Tabs_1.default,
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { width: 560, maxWidth: "100%" } }, { children: (0, jsx_runtime_1.jsx)(Tabs_1.default, __assign({}, props)) }))); },
     parameters: {
         layout: "centered",
     },
     tags: ["autodocs"],
-};
-exports.default = meta;
-var ExampleContent = function (_a) {
-    var title = _a.title;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { padding: "20px", background: "#f5f5f5", borderRadius: "8px" } }, { children: [title, " Content"] })));
+    argTypes: {
+        size: { control: "select", options: props_1.sizes },
+        hasAutoFlex: { control: "boolean" },
+        isHideTabHeaderOnMobile: { control: "boolean" },
+        tabButtonWidth: { control: "number" },
+        activeTab: { control: "text" },
+        defaultTab: { control: "text" },
+        tabs: { control: false },
+        onChange: { action: "changed" },
+    },
 };
 exports.Default = {
-    args: {
-        tabs: [
-            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
-            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
-            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
-        ],
-        size: "md",
-    },
+    args: __assign({}, baseArgs),
 };
 exports.WithDefaultTab = {
-    args: {
-        tabs: [
-            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
-            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
-            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
-        ],
-        defaultTab: "tab2",
-        size: "md",
-    },
+    args: __assign(__assign({}, baseArgs), { defaultTab: "tab2" }),
 };
 exports.WithDisabledTab = {
-    args: {
-        tabs: [
+    args: __assign(__assign({}, baseArgs), { tabs: [
             { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
-            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }), isDisabled: true },
+            {
+                key: "tab2",
+                title: "Tab 2",
+                content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }),
+                isDisabled: true,
+            },
             { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
-        ],
-        size: "md",
-    },
-};
-exports.WithAutoFlex = {
-    args: {
-        tabs: [
-            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
-            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
-            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
-        ],
-        hasAutoFlex: true,
-        size: "md",
-    },
+        ] }),
 };
 exports.SmallSize = {
-    args: {
-        tabs: [
-            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
-            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
-            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
-        ],
-        size: "sm",
-    },
+    args: __assign(__assign({}, baseArgs), { size: "sm" }),
+};
+exports.MediumSize = {
+    args: __assign(__assign({}, baseArgs), { size: "md" }),
 };
 exports.LargeSize = {
-    args: {
-        tabs: [
-            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
-            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
-            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
-        ],
-        size: "lg",
-    },
+    args: __assign(__assign({}, baseArgs), { size: "lg" }),
+};
+exports.WithAutoFlex = {
+    args: __assign(__assign({}, baseArgs), { hasAutoFlex: true }),
 };
 exports.WithFixedTabWidth = {
-    args: {
-        tabs: [
+    args: __assign(__assign({}, baseArgs), { tabs: [
             { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
             { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
-            { key: "tab3", title: "Uzun Tab Başlığı", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
-        ],
-        tabButtonWidth: 160,
-        size: "md",
-    },
+            {
+                key: "tab3",
+                title: "Uzun Tab Başlığı",
+                content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }),
+            },
+        ], tabButtonWidth: 160 }),
+};
+exports.ManyTabs = {
+    args: __assign(__assign({}, baseArgs), { tabs: manyTabs, defaultTab: "tab3" }),
+};
+exports.HideHeaderOnMobile = {
+    args: __assign(__assign({}, baseArgs), { isHideTabHeaderOnMobile: true }),
+};
+exports.LongTitles = {
+    args: __assign(__assign({}, baseArgs), { tabs: [
+            {
+                key: "a",
+                title: "Siparişlerim",
+                content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Sipari\u015Flerim" }),
+            },
+            {
+                key: "b",
+                title: "Adres Bilgilerim",
+                content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Adres" }),
+            },
+            {
+                key: "c",
+                title: "Kampanyalar ve Kuponlar",
+                content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Kampanya" }),
+            },
+        ], hasAutoFlex: true }),
+};
+exports.Empty = {
+    args: __assign(__assign({}, baseArgs), { tabs: [] }),
+};
+exports.AllSizes = {
+    args: baseArgs,
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: 32, width: 560 } }, { children: props_1.sizes.map(function (size) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ style: { display: "block", marginBottom: 8 } }, { children: size })), (0, jsx_runtime_1.jsx)(Tabs_1.default, __assign({}, args, { size: size }))] }, size)); }) }))); },
+};
+var ControlledTabsStory = function (args) {
+    var _a = react_1.default.useState("tab1"), activeTab = _a[0], setActiveTab = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { width: 560 } }, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.default, __assign({}, args, { activeTab: activeTab, onChange: setActiveTab })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 12, font: "var(--caption-medium-11-13)" } }, { children: ["Aktif: ", activeTab] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(ControlledTabsStory, __assign({}, args)); },
+    args: __assign({}, baseArgs),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { size: "lg", hasAutoFlex: true, defaultTab: "tab2", tabs: [
+            { key: "tab1", title: "Genel", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Genel" }) },
+            {
+                key: "tab2",
+                title: "Detay",
+                content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Detay" }),
+            },
+            {
+                key: "tab3",
+                title: "Pasif",
+                content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Pasif" }),
+                isDisabled: true,
+            },
+            { key: "tab4", title: "Ayarlar", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Ayarlar" }) },
+        ] }),
 };

package/dist/components/Tag/Tag.styled.d.ts

@@ -1,11 +1,16 @@
 /// <reference types="react" />
-export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable"> & {
+export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, {
     $disabled?: boolean;
     $clickable?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable"> & {
-    $disabled?: boolean;
-    $clickable?: boolean;
-}, never>>> & string;
-export declare const TagStar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const TagLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const TagRemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
+}>> & string;
+export declare const TagStar: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TagLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TagRemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;

package/dist/components/Tag/stories/Tag.stories.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
 declare const _default: {
     title: string;
-    component: ({ label, onRemove, onClick, hasStar, disabled, className, }: import("../props").TagProps) => React.JSX.Element;
+    component: (props: any) => React.JSX.Element;
     tags: string[];
     argTypes: {
         label: {
@@ -25,29 +25,87 @@ export default _default;
 export declare const Default: {
     args: {
         label: string;
+        hasStar: boolean;
+        disabled: boolean;
     };
 };
 export declare const Removable: {
     args: {
         label: string;
-        onRemove: () => any;
+        onRemove: () => void;
+        hasStar: boolean;
+        disabled: boolean;
     };
 };
 export declare const WithStar: {
     args: {
         label: string;
         hasStar: boolean;
-        onRemove: () => any;
+        onRemove: () => void;
+        disabled: boolean;
+    };
+};
+export declare const StarOnly: {
+    args: {
+        label: string;
+        hasStar: boolean;
+        disabled: boolean;
+    };
+};
+export declare const Clickable: {
+    args: {
+        label: string;
+        onClick: () => void;
+        hasStar: boolean;
+        disabled: boolean;
+    };
+};
+export declare const ClickableRemovable: {
+    args: {
+        label: string;
+        onClick: () => void;
+        onRemove: () => void;
+        hasStar: boolean;
+        disabled: boolean;
     };
 };
 export declare const Disabled: {
     args: {
         label: string;
         disabled: boolean;
-        onRemove: () => any;
+        onRemove: () => void;
+        hasStar: boolean;
+    };
+};
+export declare const DisabledWithStar: {
+    args: {
+        label: string;
+        hasStar: boolean;
+        disabled: boolean;
+        onRemove: () => void;
+    };
+};
+export declare const LongLabel: {
+    args: {
+        label: string;
+        onRemove: () => void;
+        hasStar: boolean;
+        disabled: boolean;
     };
 };
+export declare const TagList: {
+    render: () => React.JSX.Element;
+};
 export declare const ToggleStarOnClick: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const Complete: {
+    args: {
+        label: string;
+        hasStar: boolean;
+        onClick: () => void;
+        onRemove: () => void;
+        disabled: boolean;
+    };
+};

package/dist/components/Tag/stories/Tag.stories.js

@@ -14,61 +14,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleStarOnClick = exports.Disabled = exports.WithStar = exports.Removable = exports.Default = void 0;
+exports.Complete = exports.ToggleStarOnClick = exports.TagList = exports.LongLabel = exports.DisabledWithStar = exports.Disabled = exports.ClickableRemovable = exports.Clickable = exports.StarOnly = exports.WithStar = exports.Removable = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Tag_1 = __importDefault(require("../Tag"));
+var baseArgs = {
+    label: "250 Gr",
+    hasStar: false,
+    disabled: false,
+};
 exports.default = {
-    title: 'Components/Tag',
-    component: Tag_1.default,
-    tags: ['autodocs'],
+    title: "Components/Tag",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { padding: 8 } }, { children: (0, jsx_runtime_1.jsx)(Tag_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
     argTypes: {
-        label: { control: 'text' },
-        hasStar: { control: 'boolean' },
-        disabled: { control: 'boolean' },
+        label: { control: "text" },
+        hasStar: { control: "boolean" },
+        disabled: { control: "boolean" },
         onRemove: { control: false },
         onClick: { control: false },
     },
 };
 exports.Default = {
-    args: {
-        label: '250 Gr',
-    },
+    args: __assign({}, baseArgs),
 };
 exports.Removable = {
-    args: {
-        label: '500 Gr',
-        onRemove: function () { return undefined; },
-    },
+    args: __assign(__assign({}, baseArgs), { label: "500 Gr", onRemove: function () { return console.log("remove"); } }),
 };
 exports.WithStar = {
-    args: {
-        label: 'Haftada bir',
-        hasStar: true,
-        onRemove: function () { return undefined; },
-    },
+    args: __assign(__assign({}, baseArgs), { label: "Haftada bir", hasStar: true, onRemove: function () { return console.log("remove"); } }),
+};
+exports.StarOnly = {
+    args: __assign(__assign({}, baseArgs), { label: "Öne çıkan", hasStar: true }),
+};
+exports.Clickable = {
+    args: __assign(__assign({}, baseArgs), { label: "Tıklanabilir", onClick: function () { return console.log("click"); } }),
+};
+exports.ClickableRemovable = {
+    args: __assign(__assign({}, baseArgs), { label: "Seç / kaldır", onClick: function () { return console.log("click"); }, onRemove: function () { return console.log("remove"); } }),
 };
 exports.Disabled = {
-    args: {
-        label: '1 Kg',
-        disabled: true,
-        onRemove: function () { return undefined; },
-    },
+    args: __assign(__assign({}, baseArgs), { label: "1 Kg", disabled: true, onRemove: function () { return console.log("remove"); } }),
+};
+exports.DisabledWithStar = {
+    args: __assign(__assign({}, baseArgs), { label: "Pasif yıldızlı", hasStar: true, disabled: true, onRemove: function () { return console.log("remove"); } }),
+};
+exports.LongLabel = {
+    args: __assign(__assign({}, baseArgs), { label: "Çok uzun bir etiket metni örneği", onRemove: function () { return console.log("remove"); } }),
+};
+exports.TagList = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" } }, { children: [(0, jsx_runtime_1.jsx)(Tag_1.default, { label: "S" }), (0, jsx_runtime_1.jsx)(Tag_1.default, { label: "M", onRemove: function () { return undefined; } }), (0, jsx_runtime_1.jsx)(Tag_1.default, { label: "L", hasStar: true, onRemove: function () { return undefined; } }), (0, jsx_runtime_1.jsx)(Tag_1.default, { label: "XL", disabled: true, onRemove: function () { return undefined; } }), (0, jsx_runtime_1.jsx)(Tag_1.default, { label: "XXL", onClick: function () { return undefined; }, onRemove: function () { return undefined; } })] }))); },
 };
 var ToggleableStarStory = function () {
     var _a = (0, react_1.useState)({
-        'Haftada bir': true,
+        "Haftada bir": true,
     }), starredTags = _a[0], setStarredTags = _a[1];
-    var labels = ['Haftada bir', 'İki haftada bir', 'Ayda bir'];
+    var labels = ["Haftada bir", "İki haftada bir", "Ayda bir"];
     var toggleStar = function (label) {
         setStarredTags(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[label] = !prev[label], _a)));
         });
     };
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: '0.75rem', flexWrap: 'wrap' } }, { children: labels.map(function (label) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: label, hasStar: Boolean(starredTags[label]), onClick: function () { return toggleStar(label); }, onRemove: function () { return undefined; } }, label)); }) })));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" } }, { children: labels.map(function (label) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: label, hasStar: Boolean(starredTags[label]), onClick: function () { return toggleStar(label); }, onRemove: function () { return undefined; } }, label)); }) })));
 };
 exports.ToggleStarOnClick = {
-    name: 'Tıklayınca yıldız aç/kapa',
+    name: "Tıklayınca yıldız aç/kapa",
     render: function () { return (0, jsx_runtime_1.jsx)(ToggleableStarStory, {}); },
 };
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { label: "Komple tag", hasStar: true, onClick: function () { return console.log("click"); }, onRemove: function () { return console.log("remove"); } }),
+};

package/dist/components/TagInput/TagInput.styled.d.ts

@@ -1,14 +1,25 @@
 /// <reference types="react" />
-export declare const TagInputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TagInputLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
-export declare const TagInputFields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TagInputField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$hasError" | "$disabled"> & {
+export declare const TagInputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TagInputLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TagInputFields: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TagInputField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, {
     $hasError?: boolean;
     $disabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$hasError" | "$disabled"> & {
-    $hasError?: boolean;
-    $disabled?: boolean;
-}, never>>> & string;
-export declare const TagList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TagInputError: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
-export declare const TagInputHiddenInputs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+}>> & string;
+export declare const TagList: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TagInputError: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const TagInputHiddenInputs: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;