krl-alfred 2.24.0 → 2.24.2

package/dist/components/DescriptionCard/props.js

@@ -47,6 +47,7 @@ exports.DescriptionCardDefault = {
     hasCategoryLayout: false,
     hasTwoColumnHeader: false,
     hasDragHandle: false,
+    hasDisableSubcategorySort: false,
     dragHandleProps: null,
     onSubcategoryReorder: null,
     customColumnSpan: {}

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

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
+    component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, hasDisableSubcategorySort, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
     tags: string[];
     argTypes: {
         title: {
@@ -63,6 +63,10 @@ declare const _default: {
             control: string;
             description: string;
         };
+        hasDisableSubcategorySort: {
+            control: string;
+            description: string;
+        };
         hasTwoColumnHeader: {
             control: string;
             description: string;
@@ -143,6 +147,7 @@ export declare const Default: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithBadge: {
@@ -192,6 +197,7 @@ export declare const WithBadge: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithTitleBadgeBetween: {
@@ -240,6 +246,7 @@ export declare const WithTitleBadgeBetween: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderDescription: {
@@ -291,6 +298,7 @@ export declare const WithHeaderDescription: {
         subcategoryList: any[];
         hasCategoryLayout: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderBackground: {
@@ -340,6 +348,7 @@ export declare const WithHeaderBackground: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutHeaderBorder: {
@@ -389,6 +398,7 @@ export declare const WithoutHeaderBorder: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderButton: {
@@ -438,6 +448,7 @@ export declare const WithHeaderButton: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderPrimaryButton: {
@@ -487,6 +498,7 @@ export declare const WithHeaderPrimaryButton: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderDropdown: {
@@ -536,6 +548,7 @@ export declare const WithHeaderDropdown: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutHeader: {
@@ -585,6 +598,7 @@ export declare const WithoutHeader: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutBorder: {
@@ -634,6 +648,7 @@ export declare const WithoutBorder: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutRounded: {
@@ -683,6 +698,7 @@ export declare const WithoutRounded: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const MinimalList: {
@@ -732,6 +748,7 @@ export declare const MinimalList: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const EmptyList: {
@@ -778,6 +795,7 @@ export declare const EmptyList: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutHeaderImage: {
@@ -827,6 +845,7 @@ export declare const WithoutHeaderImage: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const CustomColumnSpan: {
@@ -877,6 +896,7 @@ export declare const CustomColumnSpan: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const HasAccordion: {
@@ -933,6 +953,7 @@ export declare const HasAccordion: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithContent: {
@@ -1008,6 +1029,7 @@ export declare const TitleSizeLg: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const HeaderAlignFlexStart: {
@@ -1058,6 +1080,7 @@ export declare const HeaderAlignFlexStart: {
         subcategoryList: any[];
         hasCategoryLayout: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderBackButton: {
@@ -1106,6 +1129,7 @@ export declare const WithHeaderBackButton: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderRightContent: {
@@ -1156,6 +1180,7 @@ export declare const WithHeaderRightContent: {
         subcategoryList: any[];
         hasCategoryLayout: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithMiddleTitleAndStatus: {
@@ -1205,6 +1230,7 @@ export declare const WithMiddleTitleAndStatus: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const StatusInactive: {
@@ -1254,6 +1280,7 @@ export declare const StatusInactive: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithSubcategories: {
@@ -1320,6 +1347,7 @@ export declare const WithSubcategories: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithPrimaryButtonIcon: {
@@ -1366,6 +1394,7 @@ export declare const WithPrimaryButtonIcon: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const NoContentSidePadding: {
@@ -1412,6 +1441,7 @@ export declare const NoContentSidePadding: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const HeaderAndContentOnly: {
@@ -1458,6 +1488,7 @@ export declare const HeaderAndContentOnly: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const Complete: {
@@ -1511,5 +1542,6 @@ export declare const Complete: {
         subcategoryList: any[];
         hasCategoryLayout: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };

package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js

@@ -82,6 +82,7 @@ var defaultArgs = {
     hasCategoryLayout: false,
     hasTwoColumnHeader: false,
     hasDragHandle: false,
+    hasDisableSubcategorySort: false,
 };
 exports.default = {
     title: 'Components/DescriptionCard',
@@ -121,6 +122,10 @@ exports.default = {
             control: 'boolean',
             description: 'Sürükle tutamacı ile sıralama',
         },
+        hasDisableSubcategorySort: {
+            control: 'boolean',
+            description: 'Alt kategori sıralamasını kapatır',
+        },
         hasTwoColumnHeader: {
             control: 'boolean',
             description: "Header grid'ini `1fr auto` olarak sabitler",
@@ -345,7 +350,7 @@ var CategoryStructureDemo = function () {
             return (0, sortable_1.arrayMove)(list, from, to);
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "1050px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderStatus, { children: "Kategori durumu" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(core_1.DndContext, __assign({ sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToVerticalAxis], onDragEnd: handleCategoryDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, __assign({ items: categoryIds, strategy: sortable_1.verticalListSortingStrategy }, { children: categories.map(function (category) { return ((0, jsx_runtime_1.jsx)(SortableDescriptionCard_1.default, { id: category.id, title: category.title, headerImage: defaultHeaderImage, middleTitle: category.middleTitle, status: category.status, hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasShadow: true, hasHeaderBorder: category.hasHeaderBorder, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: category.subcategoryList, onSubcategoryReorder: function (from, to) {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "1050px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderStatus, { children: "Kategori durumu" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(core_1.DndContext, __assign({ sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToVerticalAxis], onDragEnd: handleCategoryDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, __assign({ items: categoryIds, strategy: sortable_1.verticalListSortingStrategy }, { children: categories.map(function (category) { return ((0, jsx_runtime_1.jsx)(SortableDescriptionCard_1.default, { id: category.id, title: category.title, headerImage: defaultHeaderImage, middleTitle: category.middleTitle, status: category.status, hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasShadow: true, hasHeaderBorder: category.hasHeaderBorder, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: category.subcategoryList, hasDisableSubcategorySort: category.subcategoryList.length === 1, onSubcategoryReorder: function (from, to) {
                             setCategories(function (list) { return list.map(function (item) { return (item.id === category.id
                                 ? __assign(__assign({}, item), { subcategoryList: (0, sortable_1.arrayMove)(item.subcategoryList, from, to) }) : item); }); });
                         } }, category.id)); }) })) }))] })));

package/dist/components/Dropdown/Dropdown.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = exports.DropdownStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.DropdownStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
-exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: ", ";\n  top: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        ", "\n        > div {\n            display: inline-block;\n            vertical-align: middle;\n            margin-right: 0.5rem;\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: ", ";\n  top: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        ", "\n        > div {\n            display: inline-block;\n            vertical-align: middle;\n            margin-right: 0.5rem;\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"])), function (props) { return props.$right || "0"; }, function (props) { return props.$top || "calc(100% + 16px)"; }, function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; }, function (props) {
+exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: ", ";\n  top: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: var(--theme-bg-color);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        ", "\n        > div {\n            display: inline-block;\n            vertical-align: middle;\n            margin-right: 0.5rem;\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: ", ";\n  top: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: var(--theme-bg-color);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        ", "\n        > div {\n            display: inline-block;\n            vertical-align: middle;\n            margin-right: 0.5rem;\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"])), function (props) { return props.$right || "0"; }, function (props) { return props.$top || "calc(100% + 16px)"; }, function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "0.5rem";

package/dist/components/Dropdown/stories/Dropdown.stories.js

@@ -91,7 +91,7 @@ var IconToggle = function (_a) {
     return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", "aria-expanded": show, style: {
             border: "1px solid var(--dark-opacity-10)",
             borderRadius: 8,
-            background: "white",
+            background: "var(--theme-bg-color)",
             padding: 8,
             cursor: "pointer",
             display: "inline-flex",

package/dist/components/InfoBox/InfoBox.styled.js

@@ -53,6 +53,6 @@ exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templ
 exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"], ["\n  display: block;\n  margin: 0;\n  font:var(--caption-bold-12-15);\n"])));
 exports.LinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-left: 1rem;\n  *{\n    display: block;\n  }\n"], ["\n  display: block;\n  margin-left: 1rem;\n  *{\n    display: block;\n  }\n"])));
 exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  font: var(--caption-medium-12-15);\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  font: var(--caption-medium-12-15);\n  b{\n    font-weight: 700;\n  }\n  .bottom{\n    p{\n      font-weight: 700;\n      display: inline-block;\n      margin: 0;\n      position: relative;\n      &:is(.block){\n        display: none;\n        @media only screen and ", " {\n          display: block;\n        }\n      }\n      &:nth-child(3){\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n        @media only screen and ", " {\n          margin: 0;\n          padding: 0;\n        }\n        &:before{\n          content: \"\";\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 0;\n          height: 9px;\n          width: 1px;\n          background-color: var(--dark);\n          @media only screen and ", " {\n            display: none;\n          }\n        }\n      }\n      span{\n        color: var(--primary);\n        cursor: pointer;\n      }\n    }\n  }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
-exports.AlertStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 0.5rem;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.$alertLeft; }, function (props) { return props.$alertTop - 5; }, function (props) { return props.$visible ? '1' : '0'; });
+exports.AlertStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: 28px;\n  border-radius: 0.5rem;\n  background-color: var(--theme-bg-color);\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.$alertLeft; }, function (props) { return props.$alertTop - 5; }, function (props) { return props.$visible ? '1' : '0'; });
 exports.Input = styled_components_1.default.input(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InputProps } from './props';
-declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, tooltipText, tooltipWidth, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
+declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, tooltipText, tooltipWidth, id, isClearable, onClear, hasNumericFormat, decimalSeparator, thousandSeparator, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -40,21 +40,21 @@ var locale_1 = require("date-fns/locale");
 var useDatePickerCalendar_1 = require("./hooks/useDatePickerCalendar");
 var datePicker_1 = require("./utils/datePicker");
 var Input = function (_a) {
-    var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.tooltipText, tooltipText = _w === void 0 ? props_1.InputDefault.tooltipText : _w, _x = _a.tooltipWidth, tooltipWidth = _x === void 0 ? props_1.InputDefault.tooltipWidth : _x, _y = _a.id, id = _y === void 0 ? props_1.InputDefault.id : _y, _z = _a.isClearable, isClearable = _z === void 0 ? props_1.InputDefault.isClearable : _z, _0 = _a.onClear, onClear = _0 === void 0 ? props_1.InputDefault.onClear : _0, _1 = _a.hasNumericFormat, hasNumericFormat = _1 === void 0 ? props_1.InputDefault.hasNumericFormat : _1, _2 = _a.inline, inline = _2 === void 0 ? props_1.InputDefault.inline : _2, _3 = _a.minDate, minDate = _3 === void 0 ? props_1.InputDefault.minDate : _3, _4 = _a.maxDate, maxDate = _4 === void 0 ? props_1.InputDefault.maxDate : _4, _5 = _a.filterDate, filterDate = _5 === void 0 ? props_1.InputDefault.filterDate : _5, _6 = _a.onCalendarOpen, onCalendarOpen = _6 === void 0 ? props_1.InputDefault.onCalendarOpen : _6, _7 = _a.maxLength, maxLength = _7 === void 0 ? props_1.InputDefault.maxLength : _7, _8 = _a.showMaxLengthCounter, showMaxLengthCounter = _8 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _8, _9 = _a.description, description = _9 === void 0 ? props_1.InputDefault.description : _9, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "tooltipText", "tooltipWidth", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
-    var _10 = (0, react_1.useState)(type), inputType = _10[0], setInputType = _10[1];
-    var _11 = (0, react_1.useState)(false), alert = _11[0], setAlert = _11[1];
-    var _12 = (0, react_1.useState)(value), inputValue = _12[0], setInputValue = _12[1];
-    var _13 = (0, react_1.useState)(false), isFocused = _13[0], setIsFocused = _13[1];
-    var _14 = (0, react_1.useState)(function () { return (0, datePicker_1.parseDateValue)(value, format); }), startDate = _14[0], setStartDate = _14[1];
+    var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.tooltipText, tooltipText = _w === void 0 ? props_1.InputDefault.tooltipText : _w, _x = _a.tooltipWidth, tooltipWidth = _x === void 0 ? props_1.InputDefault.tooltipWidth : _x, _y = _a.id, id = _y === void 0 ? props_1.InputDefault.id : _y, _z = _a.isClearable, isClearable = _z === void 0 ? props_1.InputDefault.isClearable : _z, _0 = _a.onClear, onClear = _0 === void 0 ? props_1.InputDefault.onClear : _0, _1 = _a.hasNumericFormat, hasNumericFormat = _1 === void 0 ? props_1.InputDefault.hasNumericFormat : _1, _2 = _a.decimalSeparator, decimalSeparator = _2 === void 0 ? props_1.InputDefault.decimalSeparator : _2, _3 = _a.thousandSeparator, thousandSeparator = _3 === void 0 ? props_1.InputDefault.thousandSeparator : _3, _4 = _a.inline, inline = _4 === void 0 ? props_1.InputDefault.inline : _4, _5 = _a.minDate, minDate = _5 === void 0 ? props_1.InputDefault.minDate : _5, _6 = _a.maxDate, maxDate = _6 === void 0 ? props_1.InputDefault.maxDate : _6, _7 = _a.filterDate, filterDate = _7 === void 0 ? props_1.InputDefault.filterDate : _7, _8 = _a.onCalendarOpen, onCalendarOpen = _8 === void 0 ? props_1.InputDefault.onCalendarOpen : _8, _9 = _a.maxLength, maxLength = _9 === void 0 ? props_1.InputDefault.maxLength : _9, _10 = _a.showMaxLengthCounter, showMaxLengthCounter = _10 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _10, _11 = _a.description, description = _11 === void 0 ? props_1.InputDefault.description : _11, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "tooltipText", "tooltipWidth", "id", "isClearable", "onClear", "hasNumericFormat", "decimalSeparator", "thousandSeparator", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
+    var _12 = (0, react_1.useState)(type), inputType = _12[0], setInputType = _12[1];
+    var _13 = (0, react_1.useState)(false), alert = _13[0], setAlert = _13[1];
+    var _14 = (0, react_1.useState)(value), inputValue = _14[0], setInputValue = _14[1];
+    var _15 = (0, react_1.useState)(false), isFocused = _15[0], setIsFocused = _15[1];
+    var _16 = (0, react_1.useState)(function () { return (0, datePicker_1.parseDateValue)(value, format); }), startDate = _16[0], setStartDate = _16[1];
     var inputRef = (0, react_1.useRef)(null);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
-    var _15 = (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+    var _17 = (0, useDatePickerCalendar_1.useDatePickerCalendar)({
         disabled: disabled,
         inline: inline,
         onCalendarOpen: onCalendarOpen,
         readOnly: readOnly,
-    }), calendarControlProps = _15.calendarControlProps, dateInputRef = _15.dateInputRef, datePickerRef = _15.datePickerRef, isCalendarOpen = _15.isCalendarOpen;
+    }), calendarControlProps = _17.calendarControlProps, dateInputRef = _17.dateInputRef, datePickerRef = _17.datePickerRef, isCalendarOpen = _17.isCalendarOpen;
     (0, react_1.useEffect)(function () {
         setInputType(type);
     }, [type]);
@@ -105,6 +105,7 @@ var Input = function (_a) {
     var handleFocus = function () { return setIsFocused(true); };
     var handleBlur = function () { return setIsFocused(false); };
     var isControlled = value !== undefined;
+    var numericThousandSeparator = thousandSeparator === true && decimalSeparator === ',' ? '.' : thousandSeparator;
     var fieldValue = isControlled ? value : (inputValue !== null && inputValue !== void 0 ? inputValue : '');
     var fieldValueRef = (0, react_1.useRef)(fieldValue);
     fieldValueRef.current = fieldValue;
@@ -165,7 +166,7 @@ var Input = function (_a) {
     var showCharCount = showMaxLengthCounter && maxLength != null;
     var showTopRow = Boolean(label || customLinkText || showCharCount);
     var hasInputIcon = (isClearable && fieldValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText;
-    return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
+    return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { decimalSeparator: decimalSeparator, thousandSeparator: numericThousandSeparator, allowedDecimalSeparators: [decimalSeparator, '.'], customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
                                 var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
                                 return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { month: 'long' }), ",", ' ', monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { year: 'numeric' })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
                             } }, calendarControlProps)) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: fieldValue, id: id, maxLength: maxLength, "$hasIcon": hasInputIcon }, other, { onKeyDown: rememberSelection, onSelect: rememberSelection, onMouseUp: rememberSelection, onFocus: handleFocus, onBlur: handleBlur, onChange: handleTextChange }))), isClearable && fieldValue ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Copy" }) })))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) }))), tooltipText && ((0, jsx_runtime_1.jsx)(Input_styled_1.FocusTooltip, __assign({ "$isOpen": isFocused, "$maxWidth": tooltipWidth }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: tooltipText } }) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));

package/dist/components/Input/Input.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerWrapperStyled = exports.InputStyled = exports.FieldDescription = exports.CharCount = exports.FieldLabel = exports.FieldTopActions = exports.FieldTop = exports.Container = exports.PopupText = exports.FocusTooltip = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"], ["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
+exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: var(--theme-bg-color);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"], ["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: var(--theme-bg-color);\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
 exports.FocusTooltip = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: absolute;\n    left: 41px;\n    bottom: calc(100% + 10px);\n    max-width: ", ";\n    width: max-content;\n    padding: 10px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    z-index: 99999;\n    box-sizing: border-box;\n    user-select: none;\n    pointer-events: none;\n    transition: all 0.15s ease;\n    opacity: ", ";\n    font: var(--caption-medium-11-13);\n\n    &:before {\n        content: '';\n        position: absolute;\n        left: 12px;\n        bottom: -6px;\n        transform: rotate(45deg);\n        width: 12px;\n        height: 12px;\n        border-radius: 3px;\n        background-color: var(--primary-opacity-10);\n    }\n"], ["\n    position: absolute;\n    left: 41px;\n    bottom: calc(100% + 10px);\n    max-width: ", ";\n    width: max-content;\n    padding: 10px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    z-index: 99999;\n    box-sizing: border-box;\n    user-select: none;\n    pointer-events: none;\n    transition: all 0.15s ease;\n    opacity: ", ";\n    font: var(--caption-medium-11-13);\n\n    &:before {\n        content: '';\n        position: absolute;\n        left: 12px;\n        bottom: -6px;\n        transform: rotate(45deg);\n        width: 12px;\n        height: 12px;\n        border-radius: 3px;\n        background-color: var(--primary-opacity-10);\n    }\n"])), function (props) { return props.$maxWidth || '140px'; }, function (props) { return props.$isOpen ? '1' : '0'; });
 exports.PopupText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--caption-semi-bold-11-13);\n    text-align: center;\n    white-space: pre-wrap;\n"], ["\n    font: var(--caption-semi-bold-11-13);\n    text-align: center;\n    white-space: pre-wrap;\n"])));
 exports.Container = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n            &.hasNoCursor {\n                user-select: none;\n                pointer-events: none;\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"])), function (props) { return props.$width || '370px'; });
@@ -18,11 +18,11 @@ exports.FieldTopActions = styled_components_1.default.div(templateObject_6 || (t
 exports.FieldLabel = styled_components_1.default.label(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
 exports.CharCount = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n    white-space: nowrap;\n"])));
 exports.FieldDescription = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
-exports.InputStyled = styled_components_1.default.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"])), function (props) {
+exports.InputStyled = styled_components_1.default.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: var(--theme-bg-color);\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: var(--theme-bg-color);\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n\n        &::placeholder {\n            color: var(--dark-opacity-25);\n        }\n    }\n\n"])), function (props) {
     if (props.disabled)
         return 'var(--dark-opacity-5)';
     if (props.$isCalendarOpen || props.$hasError)
-        return 'white';
+        return 'var(--theme-bg-color)';
     return 'var(--dark-opacity-3)';
 }, function (props) {
     if (props.$isCalendarOpen || props.$hasError) {
@@ -40,5 +40,5 @@ exports.InputStyled = styled_components_1.default.input(templateObject_10 || (te
         return 'var(--red)';
     return 'var(--dark-opacity-50)';
 }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
-exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: white;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: white;\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
+exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: var(--theme-bg-color);\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: var(--theme-bg-color);\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: var(--theme-bg-color) !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n        margin-bottom: 1.5rem;\n        background-color: var(--theme-bg-color);\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n            text-align: center;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: var(--theme-bg-color);\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: var(--theme-bg-color) !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                padding: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    text-align: center;\n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/Input/Input.test.js

@@ -184,4 +184,24 @@ describe('Input', function () {
         expect(onChange).toHaveBeenCalled();
         expect(react_2.screen.getByDisplayValue('ABCD')).toBeInTheDocument();
     });
+    it('accepts a comma as decimal separator in numeric format', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderInput({
+                        hasNumericFormat: true,
+                        label: null,
+                        placeholder: 'Fiyat',
+                        mask: null,
+                    });
+                    input = react_2.screen.getByPlaceholderText('Fiyat');
+                    return [4 /*yield*/, user_event_1.default.type(input, '12,5')];
+                case 1:
+                    _a.sent();
+                    expect(input).toHaveValue('12,5');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

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

@@ -22,6 +22,9 @@ export interface Input {
     format?: string;
     visible?: boolean;
     hasNumericFormat?: boolean;
+    /** Ondalık ayırıcı. Sayısal formatta varsayılan virgüldür (TR fiyat). */
+    decimalSeparator?: string;
+    thousandSeparator?: boolean | string;
     infoText?: string;
     tooltipText?: string;
     tooltipWidth?: string;

package/dist/components/Input/props.js

@@ -27,6 +27,8 @@ exports.InputDefault = {
     id: null,
     isClearable: false,
     hasNumericFormat: false,
+    decimalSeparator: ",",
+    thousandSeparator: false,
     inline: false,
     minDate: null,
     maxDate: null,

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

@@ -343,6 +343,23 @@ export declare const NumericFormat: {
         onChange: (e: any) => void;
     };
 };
+export declare const PriceFormat: {
+    args: {
+        placeholder: string;
+        label: string;
+        hasError: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        isClearable: boolean;
+        hasNumericFormat: boolean;
+        decimalSeparator: string;
+        thousandSeparator: string;
+        type: string;
+        infoText: any;
+        id: string;
+        onChange: (e: any) => void;
+    };
+};
 export declare const PatternFormat: {
     args: {
         placeholder: string;