krl-alfred 2.21.1 → 2.22.0

package/dist/components/RadioGroup/stories/RadioGroup.stories.js

@@ -14,8 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AllRadioLayouts = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
+exports.AllRadioLayouts = exports.VariantPricing = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var RadioGroup_1 = __importDefault(require("../RadioGroup"));
 var props_1 = require("../props");
 var onChange = function (value) { return console.log("Selected value:", value); };
@@ -387,6 +388,25 @@ exports.HorizontalInstallment = {
         gap: "0.75rem",
     },
 };
+var variantPricingContent = ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem" } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { padding: "1rem", borderRadius: "0.5rem", background: "var(--dark-opacity-3)" } }, { children: "\u00DCr\u00FCn g\u00F6rselleri alan\u0131" })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.5rem" } }, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } }), (0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } }), (0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" } }, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } }), (0, jsx_runtime_1.jsx)("div", { style: { height: "48px", borderRadius: "0.5rem", background: "var(--dark-opacity-5)" } })] }))] })));
+var VariantPricingStory = function () {
+    var _a = react_1.default.useState("noVariant"), value = _a[0], setValue = _a[1];
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "variantPricing", label: "Varyant ve fiyatland\u0131rma", hasInfo: true, infoText: "Bu \u00FCr\u00FCn\u00FCn birden fazla se\u00E7ene\u011Fi var m\u0131? (\u00F6rn: gramaj, renk, beden, hacim vb.)", options: [
+                {
+                    label: "Bu ürünün varyantı yok",
+                    value: "noVariant",
+                    content: variantPricingContent,
+                },
+                {
+                    label: "Bu ürünün varyantı var, varyant ekle",
+                    value: "hasVariant",
+                },
+            ], value: value, onChange: setValue, layout: "vertical", radioLayout: "horizontal", size: "medium", gap: "0.75rem" }) })));
+};
+exports.VariantPricing = {
+    name: "Varyant ve fiyatlandırma",
+    render: function () { return (0, jsx_runtime_1.jsx)(VariantPricingStory, {}); },
+};
 exports.AllRadioLayouts = {
     render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "2.5rem" } }, { children: [(0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allBasic", label: "Basic", options: basicOptions, value: "option1", onChange: onChange, radioLayout: "basic" }), (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allBoxed", label: "Boxed", options: boxedOptions, value: "weekly", onChange: onChange, layout: "horizontal", radioLayout: "boxed", gap: "0.75rem" }), (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "179px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allBoxedSm", label: "BoxedSm", options: boxedSmOptions, value: "monthly", onChange: onChange, layout: "vertical", radioLayout: "boxedSm", gap: "0.75rem" }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "400px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allBoxedWithIcon", label: "BoxedWithIcon", options: boxedWithIconOptions, value: "customer", onChange: onChange, layout: "vertical", radioLayout: "boxedWithIcon", gap: "0.75rem" }) })), (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allHorizontal", label: "Horizontal", options: horizontalOptions, value: "installment", onChange: onChange, layout: "vertical", radioLayout: "horizontal", gap: "0.75rem" }), (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allColor", label: "Color", options: colorOptions, value: "black", onChange: onChange, layout: "horizontal", radioLayout: "color", gap: "1rem" })] }))); },
 };

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./props";
-declare const Table: ({ columns, emptyText, hasLoading, data, }: TableProps) => React.JSX.Element;
+declare const Table: ({ columns, emptyText, hasLoading, hasRowHover, data, }: TableProps) => React.JSX.Element;
 export default Table;

package/dist/components/Table/Table.js

@@ -32,10 +32,10 @@ var react_i18next_1 = require("react-i18next");
 var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
 var classnames_1 = __importDefault(require("classnames"));
 var Table = function (_a) {
-    var _b = _a.columns, columns = _b === void 0 ? props_1.TableDefault.columns : _b, emptyText = _a.emptyText, _c = _a.hasLoading, hasLoading = _c === void 0 ? props_1.TableDefault.hasLoading : _c, _d = _a.data, data = _d === void 0 ? props_1.TableDefault.data : _d;
+    var _b = _a.columns, columns = _b === void 0 ? props_1.TableDefault.columns : _b, emptyText = _a.emptyText, _c = _a.hasLoading, hasLoading = _c === void 0 ? props_1.TableDefault.hasLoading : _c, _d = _a.hasRowHover, hasRowHover = _d === void 0 ? props_1.TableDefault.hasRowHover : _d, _e = _a.data, data = _e === void 0 ? props_1.TableDefault.data : _e;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _e = (0, react_1.useState)(data), tableData = _e[0], setTableData = _e[1];
-    var _f = (0, react_1.useState)(columns), tableColumns = _f[0], setTableColumns = _f[1];
+    var _f = (0, react_1.useState)(data), tableData = _f[0], setTableData = _f[1];
+    var _g = (0, react_1.useState)(columns), tableColumns = _g[0], setTableColumns = _g[1];
     (0, react_1.useEffect)(function () {
         if (hasLoading) {
             setTableData(Array.from({ length: 15 }, function (_, index) { return index; }).map(function (itemData) {
@@ -56,6 +56,6 @@ var Table = function (_a) {
     if (!emptyText) {
         emptyText = t("NO_OPTIONS_FOUND");
     }
-    return ((0, jsx_runtime_1.jsx)(Table_styled_1.TableStyled, { children: (0, jsx_runtime_1.jsx)(rc_table_1.default, { columns: tableColumns, data: tableData, emptyText: (0, jsx_runtime_1.jsx)(Table_styled_1.EmptyStyled, { children: emptyText }), className: (0, classnames_1.default)({ "rc-table-empty": (tableData === null || tableData === void 0 ? void 0 : tableData.length) <= 0 || [null].includes(tableData), hasLoading: hasLoading }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Table_styled_1.TableStyled, __assign({ "$hasRowHover": hasRowHover }, { children: (0, jsx_runtime_1.jsx)(rc_table_1.default, { columns: tableColumns, data: tableData, emptyText: (0, jsx_runtime_1.jsx)(Table_styled_1.EmptyStyled, { children: emptyText }), className: (0, classnames_1.default)({ "rc-table-empty": (tableData === null || tableData === void 0 ? void 0 : tableData.length) <= 0 || [null].includes(tableData), hasLoading: hasLoading }) }) })));
 };
 exports.default = Table;

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

@@ -1,4 +1,8 @@
 /// <reference types="react" />
-export declare const TableStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").Table> & import("./props").Table, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").Table> & import("./props").Table, never>>> & string;
-export declare const SkeletonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").Table> & import("./props").Table, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").Table> & import("./props").Table, never>>> & string;
-export declare const EmptyStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").Table> & import("./props").Table, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").Table> & import("./props").Table, never>>> & string;
+type TableStyledProps = {
+    $hasRowHover?: boolean;
+};
+export declare const TableStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasRowHover"> & TableStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasRowHover"> & TableStyledProps, never>>> & string;
+export declare const SkeletonStyled: 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 EmptyStyled: 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 {};

package/dist/components/Table/Table.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyStyled = exports.SkeletonStyled = exports.TableStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.TableStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .rc-table{\n        &:is(.rc-table-empty),&:is(.hasLoading){\n            table{\n                user-select: none;\n                pointer-events: none;\n                tbody{\n                    tr{\n                        cursor: initial;\n                        &:after{\n                            opacity: 0 !important;\n                        }\n                    }\n                }\n            }\n        }\n        table{\n            border:0;\n            border-spacing: 0 2px;\n            //border-spacing: 0 0.5rem;\n            th, td {\n                position: relative;\n                box-sizing: border-box;\n                padding: 0 1rem;\n                height: 49px;\n                line-height: 49px;\n                white-space: nowrap;\n                border: none;\n                text-align: start;\n                &:first-child{\n                    padding: 0 1rem 0 1.5rem;\n                }\n            }\n            th {\n                font: var(--body-semi-bold-14-17);\n            }\n            td {\n                font: var(--body-regular-14-17);\n            }\n            tbody{\n                tr{\n                    position: relative;\n                    cursor: pointer;\n                    &:after{\n                        content: \"\";\n                        position: absolute;\n                        inset: 0;\n                        opacity: 0;\n                        border-radius: 0.5rem;\n                        box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                        z-index: -1;\n                    }\n                    &:hover{\n                        &:after{\n                            opacity: 1;\n                        }\n                    }\n                }\n            }\n        }\n    }\n"], ["\n    .rc-table{\n        &:is(.rc-table-empty),&:is(.hasLoading){\n            table{\n                user-select: none;\n                pointer-events: none;\n                tbody{\n                    tr{\n                        cursor: initial;\n                        &:after{\n                            opacity: 0 !important;\n                        }\n                    }\n                }\n            }\n        }\n        table{\n            border:0;\n            border-spacing: 0 2px;\n            //border-spacing: 0 0.5rem;\n            th, td {\n                position: relative;\n                box-sizing: border-box;\n                padding: 0 1rem;\n                height: 49px;\n                line-height: 49px;\n                white-space: nowrap;\n                border: none;\n                text-align: start;\n                &:first-child{\n                    padding: 0 1rem 0 1.5rem;\n                }\n            }\n            th {\n                font: var(--body-semi-bold-14-17);\n            }\n            td {\n                font: var(--body-regular-14-17);\n            }\n            tbody{\n                tr{\n                    position: relative;\n                    cursor: pointer;\n                    &:after{\n                        content: \"\";\n                        position: absolute;\n                        inset: 0;\n                        opacity: 0;\n                        border-radius: 0.5rem;\n                        box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                        z-index: -1;\n                    }\n                    &:hover{\n                        &:after{\n                            opacity: 1;\n                        }\n                    }\n                }\n            }\n        }\n    }\n"])));
+exports.TableStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .rc-table{\n        &:is(.rc-table-empty),&:is(.hasLoading){\n            table{\n                user-select: none;\n                pointer-events: none;\n                tbody{\n                    tr{\n                        cursor: initial;\n                        &:after{\n                            opacity: 0 !important;\n                        }\n                    }\n                }\n            }\n        }\n        table{\n            border:0;\n            border-spacing: 0 2px;\n            //border-spacing: 0 0.5rem;\n            th, td {\n                position: relative;\n                box-sizing: border-box;\n                padding: 0 1rem;\n                height: 49px;\n                line-height: 49px;\n                white-space: nowrap;\n                border: none;\n                text-align: start;\n                &:first-child{\n                    padding: 0 1rem 0 1.5rem;\n                }\n            }\n            th {\n                font: var(--body-semi-bold-14-17);\n            }\n            td {\n                font: var(--body-regular-14-17);\n            }\n            tbody{\n                tr{\n                    position: relative;\n                    cursor: ", ";\n                    ", "\n                }\n            }\n        }\n    }\n"], ["\n    .rc-table{\n        &:is(.rc-table-empty),&:is(.hasLoading){\n            table{\n                user-select: none;\n                pointer-events: none;\n                tbody{\n                    tr{\n                        cursor: initial;\n                        &:after{\n                            opacity: 0 !important;\n                        }\n                    }\n                }\n            }\n        }\n        table{\n            border:0;\n            border-spacing: 0 2px;\n            //border-spacing: 0 0.5rem;\n            th, td {\n                position: relative;\n                box-sizing: border-box;\n                padding: 0 1rem;\n                height: 49px;\n                line-height: 49px;\n                white-space: nowrap;\n                border: none;\n                text-align: start;\n                &:first-child{\n                    padding: 0 1rem 0 1.5rem;\n                }\n            }\n            th {\n                font: var(--body-semi-bold-14-17);\n            }\n            td {\n                font: var(--body-regular-14-17);\n            }\n            tbody{\n                tr{\n                    position: relative;\n                    cursor: ", ";\n                    ", "\n                }\n            }\n        }\n    }\n"])), function (props) { return props.$hasRowHover ? 'pointer' : 'default'; }, function (props) { return props.$hasRowHover && "\n                        &:after{\n                            content: \"\";\n                            position: absolute;\n                            inset: 0;\n                            opacity: 0;\n                            border-radius: 0.5rem;\n                            box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                            z-index: -1;\n                        }\n                        &:hover{\n                            &:after{\n                                opacity: 1;\n                            }\n                        }\n                    "; });
 exports.SkeletonStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    @keyframes shineSkeleton {\n        to {\n            // Move shine from left to right, with offset on the right based on the width of the shine - see background-size\n            background-position: right -40px top 0;\n        }\n    }\n    height: 20px;\n    border-radius: 0.25rem;\n    background-color: var(--dark-opacity-5);\n    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\n    background-size: 40px 100%;\n    background-repeat: no-repeat;\n    background-position: left -40px top 0;\n    animation: shineSkeleton 0.5s ease infinite;\n"], ["\n    @keyframes shineSkeleton {\n        to {\n            // Move shine from left to right, with offset on the right based on the width of the shine - see background-size\n            background-position: right -40px top 0;\n        }\n    }\n    height: 20px;\n    border-radius: 0.25rem;\n    background-color: var(--dark-opacity-5);\n    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\n    background-size: 40px 100%;\n    background-repeat: no-repeat;\n    background-position: left -40px top 0;\n    animation: shineSkeleton 0.5s ease infinite;\n"])));
 exports.EmptyStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font: var(--body-regular-14-17);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font: var(--body-regular-14-17);\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Table/props.d.ts

@@ -2,6 +2,7 @@ export interface Table {
     columns?: any[];
     data?: any[];
     hasLoading?: boolean;
+    hasRowHover?: boolean;
     emptyText?: string;
 }
 export declare const TableDefault: Table;

package/dist/components/Table/props.js

@@ -11,5 +11,6 @@ exports.TableDefault = {
     ],
     data: [],
     hasLoading: false,
+    hasRowHover: true,
     emptyText: "Sonuç bulunamadı"
 };

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

@@ -1,12 +1,15 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ columns, emptyText, hasLoading, data, }: import("../props").Table) => React.JSX.Element;
+    component: ({ columns, emptyText, hasLoading, hasRowHover, data, }: import("../props").Table) => React.JSX.Element;
     tags: string[];
     argTypes: {
         hasLoading: {
             control: string;
         };
+        hasRowHover: {
+            control: string;
+        };
         emptyText: {
             control: string;
         };
@@ -124,3 +127,28 @@ export declare const FewRows: {
         hasLoading: boolean;
     };
 };
+export declare const WithoutRowHover: {
+    args: {
+        hasRowHover: boolean;
+        data: {
+            name: string;
+            age: number;
+            address: string;
+            key: string;
+        }[];
+        columns: ({
+            title: string;
+            dataIndex: string;
+            key: string;
+            width: number;
+            render?: undefined;
+        } | {
+            title: string;
+            dataIndex: string;
+            key: string;
+            render: () => React.JSX.Element;
+            width?: undefined;
+        })[];
+        hasLoading: boolean;
+    };
+};

package/dist/components/Table/stories/Table.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FewRows = exports.EmptyWithCustomText = exports.Empty = exports.Loading = exports.Default = void 0;
+exports.WithoutRowHover = exports.FewRows = exports.EmptyWithCustomText = exports.Empty = exports.Loading = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Table_1 = __importDefault(require("../Table"));
 var table_json_1 = __importDefault(require("./../../../jsons/table.json"));
@@ -35,6 +35,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         hasLoading: { control: 'boolean' },
+        hasRowHover: { control: 'boolean' },
         emptyText: { control: 'text' },
     }
 };
@@ -53,3 +54,6 @@ exports.EmptyWithCustomText = {
 exports.FewRows = {
     args: __assign(__assign({}, defaultArgs), { data: table_json_1.default.slice(0, 3) }),
 };
+exports.WithoutRowHover = {
+    args: __assign(__assign({}, defaultArgs), { hasRowHover: false, data: table_json_1.default.slice(0, 5) }),
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TagProps } from './props';
+declare const Tag: ({ label, onRemove, disabled, className, }: TagProps) => React.JSX.Element;
+export default Tag;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,25 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var props_1 = require("./props");
+var Tag_styled_1 = require("./Tag.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Tag = function (_a) {
+    var label = _a.label, onRemove = _a.onRemove, _b = _a.disabled, disabled = _b === void 0 ? props_1.TagDefault.disabled : _b, className = _a.className;
+    return ((0, jsx_runtime_1.jsxs)(Tag_styled_1.TagStyled, __assign({ className: className, "$disabled": disabled }, { children: [(0, jsx_runtime_1.jsx)(Tag_styled_1.TagLabel, { children: label }), onRemove && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagRemoveButton, __assign({ type: "button", "aria-label": "".concat(label, " etiketini kald\u0131r"), disabled: disabled, onClick: onRemove }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closemini", width: "1rem", height: "1rem", color: "currentColor" }) })))] })));
+};
+exports.default = Tag;

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

@@ -0,0 +1,8 @@
+/// <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"> & {
+    $disabled?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+    $disabled?: boolean;
+}, 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;

package/dist/components/Tag/Tag.styled.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagRemoveButton = exports.TagLabel = exports.TagStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.TagStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n"], ["\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n"])));
+exports.TagLabel = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"])));
+exports.TagRemoveButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1 @@
+export { default } from './Tag';

package/dist/components/Tag/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Tag_1 = require("./Tag");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Tag_1).default; } });

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

@@ -0,0 +1,10 @@
+export interface TagProps {
+    label: string;
+    onRemove?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const TagDefault: {
+    disabled: boolean;
+};
+export type TagComponentProps = TagProps;

package/dist/components/Tag/props.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagDefault = void 0;
+exports.TagDefault = {
+    disabled: false,
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: ({ label, onRemove, disabled, className, }: import("../props").TagProps) => React.JSX.Element;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        onRemove: {
+            control: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        label: string;
+    };
+};
+export declare const Removable: {
+    args: {
+        label: string;
+        onRemove: () => any;
+    };
+};
+export declare const Disabled: {
+    args: {
+        label: string;
+        disabled: boolean;
+        onRemove: () => any;
+    };
+};

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.Removable = exports.Default = void 0;
+var Tag_1 = __importDefault(require("../Tag"));
+exports.default = {
+    title: 'Components/Tag',
+    component: Tag_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        disabled: { control: 'boolean' },
+        onRemove: { control: false },
+    },
+};
+exports.Default = {
+    args: {
+        label: '250 Gr',
+    },
+};
+exports.Removable = {
+    args: {
+        label: '500 Gr',
+        onRemove: function () { return undefined; },
+    },
+};
+exports.Disabled = {
+    args: {
+        label: '1 Kg',
+        disabled: true,
+        onRemove: function () { return undefined; },
+    },
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TagInputProps } from './props';
+declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;
+export default TagInput;

package/dist/components/TagInput/TagInput.js

@@ -0,0 +1,101 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var props_1 = require("./props");
+var TagInput_styled_1 = require("./TagInput.styled");
+var Tag_1 = __importDefault(require("../Tag"));
+var normalizeTag = function (value) { return value.trim(); };
+var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, _b = _a.label, label = _b === void 0 ? props_1.TagInputDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.TagInputDefault.placeholder : _c, name = _a.name, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.TagInputDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.TagInputDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.TagInputDefault.hasError : _f, errorMessage = _a.errorMessage, _g = _a.buttonText, buttonText = _g === void 0 ? props_1.TagInputDefault.buttonText : _g, maxTags = _a.maxTags, maxLength = _a.maxLength, _h = _a.allowDuplicates, allowDuplicates = _h === void 0 ? props_1.TagInputDefault.allowDuplicates : _h, id = _a.id;
+    var inputRef = (0, react_1.useRef)(null);
+    var isControlled = value !== undefined;
+    var _j = (0, react_1.useState)(defaultValue), internalTags = _j[0], setInternalTags = _j[1];
+    var _k = (0, react_1.useState)(''), inputValue = _k[0], setInputValue = _k[1];
+    var tags = isControlled ? value : internalTags;
+    var inputId = id || name || 'tag-input';
+    (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
+    (0, react_1.useEffect)(function () {
+        if (!isControlled) {
+            setInternalTags(defaultValue);
+        }
+    }, [defaultValue, isControlled]);
+    var updateTags = function (nextTags) {
+        if (!isControlled) {
+            setInternalTags(nextTags);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextTags);
+    };
+    var canAddTag = function (rawValue) {
+        var nextTag = normalizeTag(rawValue);
+        if (!nextTag)
+            return false;
+        if (maxLength && nextTag.length > maxLength)
+            return false;
+        if (maxTags !== undefined && tags.length >= maxTags)
+            return false;
+        if (!allowDuplicates && tags.includes(nextTag))
+            return false;
+        return true;
+    };
+    var addTag = function (rawValue) {
+        var _a;
+        var nextTag = normalizeTag(rawValue);
+        if (!canAddTag(rawValue))
+            return;
+        updateTags(__spreadArray(__spreadArray([], tags, true), [nextTag], false));
+        setInputValue('');
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var removeTag = function (index) {
+        var _a;
+        updateTags(tags.filter(function (_, tagIndex) { return tagIndex !== index; }));
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var handleAddClick = function () {
+        addTag(inputValue);
+    };
+    var handleInputChange = function (event) {
+        var nextValue = maxLength
+            ? event.target.value.slice(0, maxLength)
+            : event.target.value;
+        setInputValue(nextValue);
+    };
+    var handleInputKeyDown = function (event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            addTag(inputValue);
+            return;
+        }
+        if (event.key === 'Backspace' && !inputValue && tags.length > 0) {
+            removeTag(tags.length - 1);
+        }
+    };
+    var isAddDisabled = disabled || !canAddTag(inputValue);
+    return ((0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputStyled, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputLabel, __assign({ htmlFor: inputId }, { children: label })), (0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputFields, { children: [(0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputField, { ref: inputRef, id: inputId, type: "text", value: inputValue, placeholder: placeholder, disabled: disabled, "$hasError": hasError, "$disabled": disabled, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: onBlur, "aria-invalid": hasError, "aria-describedby": hasError && errorMessage ? "".concat(inputId, "-error") : undefined }), (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputButton, __assign({ type: "button", disabled: isAddDisabled, "$disabled": isAddDisabled, onClick: handleAddClick }, { children: buttonText }))] }), tags.length > 0 && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagList, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, disabled: disabled, onRemove: function () { return removeTag(index); } }, "".concat(tag, "-").concat(index))); }) })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputError, __assign({ id: "".concat(inputId, "-error") }, { children: errorMessage }))), name && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputHiddenInputs, __assign({ "aria-hidden": "true" }, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag, readOnly: true }, "".concat(name, "-").concat(tag, "-").concat(index))); }) })))] })));
+});
+TagInput.displayName = 'TagInput';
+exports.default = TagInput;

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

@@ -0,0 +1,19 @@
+/// <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"> & {
+    $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 TagInputButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled"> & {
+    $disabled?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled"> & {
+    $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;

package/dist/components/TagInput/TagInput.styled.js

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagInputHiddenInputs = exports.TagInputError = exports.TagList = exports.TagInputButton = exports.TagInputField = exports.TagInputFields = exports.TagInputLabel = exports.TagInputStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.TagInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
+exports.TagInputLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
+exports.TagInputFields = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: flex-start;\n    gap: 1rem;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: flex-start;\n    gap: 1rem;\n"])));
+exports.TagInputField = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: 19.5px 24px;\n    color: ", ";\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        background: white;\n    }\n\n    &:disabled {\n        color: var(--dark-opacity-25);\n        cursor: not-allowed;\n    }\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: 19.5px 24px;\n    color: ", ";\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        background: white;\n    }\n\n    &:disabled {\n        color: var(--dark-opacity-25);\n        cursor: not-allowed;\n    }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; });
+exports.TagInputButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    box-sizing: border-box;\n    height: 56px;\n    min-width: 56px;\n    padding: 0 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: white;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: ", ";\n    transition: border-color 0.2s ease, color 0.2s ease;\n\n    &:not(:disabled):hover {\n        border-color: var(--primary);\n    }\n"], ["\n    box-sizing: border-box;\n    height: 56px;\n    min-width: 56px;\n    padding: 0 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: white;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: ", ";\n    transition: border-color 0.2s ease, color 0.2s ease;\n\n    &:not(:disabled):hover {\n        border-color: var(--primary);\n    }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-25)' : 'var(--primary)'; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; });
+exports.TagList = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"])));
+exports.TagInputError = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"])));
+exports.TagInputHiddenInputs = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -0,0 +1 @@
+export { default } from './TagInput';

package/dist/components/TagInput/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var TagInput_1 = require("./TagInput");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TagInput_1).default; } });

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

@@ -0,0 +1,28 @@
+export type TagInputValue = string[];
+export interface TagInputProps {
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    value?: TagInputValue;
+    defaultValue?: TagInputValue;
+    onChange?: (value: TagInputValue) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    buttonText?: string;
+    maxTags?: number;
+    maxLength?: number;
+    allowDuplicates?: boolean;
+    id?: string;
+}
+export declare const TagInputDefault: {
+    label: string;
+    placeholder: string;
+    defaultValue: TagInputValue;
+    disabled: boolean;
+    hasError: boolean;
+    buttonText: string;
+    allowDuplicates: boolean;
+};

package/dist/components/TagInput/props.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagInputDefault = void 0;
+exports.TagInputDefault = {
+    label: 'Değer ekle',
+    placeholder: 'Değer ekle',
+    defaultValue: [],
+    disabled: false,
+    hasError: false,
+    buttonText: 'Ekle',
+    allowDuplicates: false,
+};