krl-alfred 1.77.28 → 1.77.30

package/dist/components/Accordion/Accordion.js

@@ -16,12 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (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 Accordion_styled_1 = require("./Accordion.styled");
 var AccordionItem_1 = __importDefault(require("./AccordionItem"));
 var TextLink_1 = __importDefault(require("./../TextLink"));
-var Accordion = function (props) {
-    var title = props.title, data = props.data, activeIndex = props.activeIndex, showLink = props.showLink, linkText = props.linkText, linkOnClick = props.linkOnClick, collapseAll = props.collapseAll, size = props.size, hasScrollOnFocus = props.hasScrollOnFocus;
-    var _a = (0, react_1.useState)(0), active = _a[0], setActive = _a[1];
+var Accordion = function (_a) {
+    var _b = _a.data, data = _b === void 0 ? props_1.AccordionDefault.data : _b, _c = _a.linkOnClick, linkOnClick = _c === void 0 ? props_1.AccordionDefault.linkOnClick : _c, _d = _a.collapseAll, collapseAll = _d === void 0 ? props_1.AccordionDefault.collapseAll : _d, _e = _a.size, size = _e === void 0 ? props_1.AccordionDefault.size : _e, _f = _a.hasScrollOnFocus, hasScrollOnFocus = _f === void 0 ? props_1.AccordionDefault.hasScrollOnFocus : _f, _g = _a.activeIndex, activeIndex = _g === void 0 ? props_1.AccordionDefault.activeIndex : _g, _h = _a.showLink, showLink = _h === void 0 ? props_1.AccordionDefault.showLink : _h, _j = _a.linkText, linkText = _j === void 0 ? props_1.AccordionDefault.linkText : _j;
+    var _k = (0, react_1.useState)(0), active = _k[0], setActive = _k[1];
     var wrapperRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
         setActive(activeIndex);
@@ -34,7 +35,6 @@ var Accordion = function (props) {
             }, 800);
         }
     }, [hasScrollOnFocus, activeIndex]);
-    return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.AccordionStyled, { children: [title && (0, jsx_runtime_1.jsx)(Accordion_styled_1.AccordionTitle, __assign({ "$size": size }, { children: title })), (0, jsx_runtime_1.jsx)(Accordion_styled_1.Wrapper, __assign({ ref: wrapperRef }, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { active: active, setActive: setActive, size: size, collapseAll: collapseAll, index: key, title: item.question, content: item.answer }, key)); }) })), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: linkOnClick }, { children: linkText })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.AccordionStyled, { children: [(0, jsx_runtime_1.jsx)(Accordion_styled_1.Wrapper, __assign({ ref: wrapperRef }, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { active: active, setActive: setActive, size: size, collapseAll: collapseAll, index: key, title: item.question, content: item.answer }, key)); }) })), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: linkOnClick }, { children: linkText })) }))] }));
 };
-Accordion.defaultProps = {};
 exports.default = Accordion;

package/dist/components/Accordion/AccordionItem.js

@@ -18,15 +18,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Accordion_styled_1 = require("./Accordion.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
-var AccordionItem = function (props) {
-    var title = props.title, content = props.content, index = props.index, collapseAll = props.collapseAll, size = props.size, active = props.active, setActive = props.setActive;
-    var _a = (0, react_1.useState)(0), height = _a[0], setHeight = _a[1];
+var AccordionItem = function (_a) {
+    var title = _a.title, content = _a.content, index = _a.index, collapseAll = _a.collapseAll, size = _a.size, active = _a.active, setActive = _a.setActive;
+    var _b = (0, react_1.useState)(0), height = _b[0], setHeight = _b[1];
+    var _c = (0, react_1.useState)(collapseAll ? true : false), activeItem = _c[0], setActiveItem = _c[1];
     var itemRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
         var _a, _b;
         setHeight((active === index || activeItem) ? (_b = (_a = itemRef === null || itemRef === void 0 ? void 0 : itemRef.current) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.clientHeight : 0);
-    });
-    var _b = (0, react_1.useState)(collapseAll ? true : false), activeItem = _b[0], setActiveItem = _b[1];
+    }, [active, activeItem, index]);
     var handleCollapse = function () {
         if (collapseAll) {
             setActiveItem(!activeItem);

package/dist/components/Accordion/props.js

@@ -1,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sizes = void 0;
+exports.AccordionDefault = exports.sizes = void 0;
 exports.sizes = ['large', 'medium'];
-var AccordionDefault = {
+exports.AccordionDefault = {
+    data: [],
+    active: false,
     activeIndex: 0,
-    linkText: 'Daha Fazla Soru Göster',
     showLink: false,
-    hasScrollOnFocus: false
+    collapseAll: false,
+    linkText: 'Daha Fazla Soru Göster',
+    linkOnClick: null,
+    size: "medium",
+    hasScrollOnFocus: false,
 };

package/dist/components/ActionButton/ActionButton.js

@@ -10,25 +10,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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 ActionButton_styled_1 = require("./ActionButton.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Button_1 = __importDefault(require("../Button"));
 var date_fns_1 = require("date-fns");
 var react_i18next_1 = require("react-i18next");
-var ActionButton = function (props) {
+var ActionButton = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.icon, icon = _e === void 0 ? props_1.ActionButtonDefault.icon : _e, _f = _a.iconStrokeWidth, iconStrokeWidth = _f === void 0 ? props_1.ActionButtonDefault.iconStrokeWidth : _f, _g = _a.isMonthVisible, isMonthVisible = _g === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _g, other = __rest(_a, ["width", "title", "date", "icon", "iconStrokeWidth", "isMonthVisible"]);
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _a = (0, react_1.useState)(0), months = _a[0], setMonths = _a[1];
-    var _b = (0, react_1.useState)(0), days = _b[0], setDays = _b[1];
-    var _c = (0, react_1.useState)(0), minutes = _c[0], setMinutes = _c[1];
-    var _d = (0, react_1.useState)(0), hours = _d[0], setHours = _d[1];
+    var _h = (0, react_1.useState)(0), months = _h[0], setMonths = _h[1];
+    var _j = (0, react_1.useState)(0), days = _j[0], setDays = _j[1];
+    var _k = (0, react_1.useState)(0), minutes = _k[0], setMinutes = _k[1];
+    var _l = (0, react_1.useState)(0), hours = _l[0], setHours = _l[1];
     //const [secounds,setSecounds] = useState(0);
-    var deadline = new Date(props.date).getTime();
+    var deadline = new Date(date).getTime();
     var count = function () {
         var now = new Date().getTime();
         var duration = (0, date_fns_1.intervalToDuration)({
@@ -36,7 +49,7 @@ var ActionButton = function (props) {
             end: now
         });
         setMonths(deadline - now > 0 ? (0, date_fns_1.differenceInMonths)(deadline, now) : 0);
-        setDays(deadline - now > 0 ? props.isMonthVisible ? duration === null || duration === void 0 ? void 0 : duration.days : (0, date_fns_1.differenceInDays)(deadline, now) : 0);
+        setDays(deadline - now > 0 ? isMonthVisible ? duration === null || duration === void 0 ? void 0 : duration.days : (0, date_fns_1.differenceInDays)(deadline, now) : 0);
         setMinutes(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.minutes : 0);
         setHours(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.hours : 0);
         //setSecounds(deadline - now > 0 ? duration?.seconds : 0)
@@ -46,12 +59,7 @@ var ActionButton = function (props) {
     var timer = setInterval(count, 60 * 1000);
     (0, react_1.useEffect)(function () {
         count();
-    }, [props.date]);
-    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [props.isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !props.isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { iconStrokeWidth: "3px", size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] }))] })));
-};
-ActionButton.defaultProps = {
-    title: "Title",
-    width: "100%",
-    icon: 'TimeCircle',
+    }, [date]);
+    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { iconStrokeWidth: "3px", size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] }))] })));
 };
 exports.default = ActionButton;

package/dist/components/ActionButton/ActionButton.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionButtonStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 4px;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"], ["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 4px;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"])), function (props) { return props.width; });
+exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 4px;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"], ["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 4px;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"])), function (props) { return props.$width; });
 var templateObject_1;

package/dist/components/ActionButton/props.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconNames = void 0;
+exports.ActionButtonDefault = exports.iconNames = void 0;
 var Icon_1 = require("../Icon");
 exports.iconNames = Object.keys(Icon_1.iconList);
-var ActionButtonDefault = {
+exports.ActionButtonDefault = {
     width: '100%',
     title: 'title',
+    date: new Date(),
     icon: 'TimeCircle',
+    iconStrokeWidth: '',
+    isMonthVisible: false,
 };

package/dist/components/AddressCard/AddressCard.js

@@ -15,16 +15,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var props_1 = require("./props");
 var AddressCard_styled_1 = require("./AddressCard.styled");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var TextLink_1 = __importDefault(require("../TextLink"));
 var react_i18next_1 = require("react-i18next");
-var AddressCard = function (props) {
+var AddressCard = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? props_1.AddressCardDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.AddressCardDefault.description : _c, _d = _a.handleUpdate, handleUpdate = _d === void 0 ? props_1.AddressCardDefault.handleUpdate : _d, _e = _a.onChange, onChange = _e === void 0 ? props_1.AddressCardDefault.onChange : _e, _f = _a.checked, checked = _f === void 0 ? props_1.AddressCardDefault.checked : _f, _g = _a.isShowEditBtn, isShowEditBtn = _g === void 0 ? props_1.AddressCardDefault.isShowEditBtn : _g, _h = _a.id, id = _h === void 0 ? props_1.AddressCardDefault.id : _h, _j = _a.minHeight, minHeight = _j === void 0 ? props_1.AddressCardDefault.minHeight : _j, _k = _a.name, name = _k === void 0 ? props_1.AddressCardDefault.name : _k, _l = _a.value, value = _l === void 0 ? props_1.AddressCardDefault.value : _l, _m = _a.disabled, disabled = _m === void 0 ? props_1.AddressCardDefault.disabled : _m;
     var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: props.id, checked: props.checked, "$minHeight": props.minHeight }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", label: props.title, name: props.name, value: props.value, disabled: props.disabled }), (props === null || props === void 0 ? void 0 : props.isShowEditBtn) && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.handleUpdate }, { children: t("edit") })) })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props.description }))] })));
-};
-AddressCard.defaultProps = {
-    isShowEditBtn: true,
-    minHeight: "68px",
+    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: id, checked: checked, "$minHeight": minHeight }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: id, onChange: onChange, checked: checked, isWrapText: false, layout: "basic", size: "small", label: title, name: name, value: value, disabled: disabled }), isShowEditBtn && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleUpdate }, { children: t("edit") })) })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: description }))] })));
 };
 exports.default = AddressCard;

package/dist/components/AddressCard/props.js

@@ -1,2 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddressCardDefault = void 0;
+exports.AddressCardDefault = {
+    title: "",
+    description: "",
+    handleUpdate: null,
+    onChange: null,
+    checked: false,
+    id: "",
+    name: "",
+    value: "",
+    disabled: false,
+    isShowEditBtn: true,
+    minHeight: "68px",
+};

package/dist/components/Agreement/Agreement.js

@@ -16,28 +16,26 @@ var __importDefault = (this && this.__importDefault) || function (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 Agreement_styled_1 = require("./Agreement.styled");
 var Checkbox_1 = __importDefault(require("../Checkbox"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Loader_1 = __importDefault(require("../Loader"));
-var Agreement = function (props) {
-    var _a = (0, react_1.useState)(props.expanded), expanded = _a[0], setExpanded = _a[1];
+var Agreement = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? props_1.AgreementDefault.disabled : _b, _c = _a.value, value = _c === void 0 ? props_1.AgreementDefault.value : _c, _d = _a.checked, checked = _d === void 0 ? props_1.AgreementDefault.checked : _d, _e = _a.name, name = _e === void 0 ? props_1.AgreementDefault.name : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.AgreementDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.AgreementDefault.errorMessage : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.AgreementDefault.onChange : _h, _j = _a.title, title = _j === void 0 ? props_1.AgreementDefault.title : _j, _k = _a.expanded, expanded = _k === void 0 ? props_1.AgreementDefault.expanded : _k, _l = _a.onExpanded, onExpanded = _l === void 0 ? props_1.AgreementDefault.onExpanded : _l, _m = _a.content, content = _m === void 0 ? props_1.AgreementDefault.content : _m, _o = _a.id, id = _o === void 0 ? props_1.AgreementDefault.id : _o;
+    var _p = (0, react_1.useState)(expanded), isExpanded = _p[0], setIsExpanded = _p[1];
     (0, react_1.useEffect)(function () {
-        props.onExpanded({ isExpanded: expanded });
-    }, [expanded]);
+        onExpanded({ isExpanded: isExpanded });
+    }, [isExpanded]);
     (0, react_1.useEffect)(function () {
-        setExpanded(props.expanded);
-    }, [props.expanded]);
+        setIsExpanded(expanded);
+    }, [expanded]);
     var onCheckBoxChange = function (event) {
-        if (!expanded && event.target.checked)
-            setExpanded(true);
-        props.onChange(event);
+        if (!isExpanded && event.target.checked)
+            setIsExpanded(true);
+        onChange(event);
     };
-    var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
-    return ((0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "agreement" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: props.title, name: props.name, valid: !props.hasError, size: "medium", checked: props.checked, disabled: props.disabled, onChange: onCheckBoxChange, value: props.value }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon", onClick: toggleExpand }, { children: expanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowUp" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowDown" }) }))] })), expanded && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: props.content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: props.content } }) : (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) })))] })), props.hasError && props.errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] })))] })));
-};
-Agreement.defaultProps = {
-    title: "Title",
-    expanded: false
+    var toggleExpand = function () { return setIsExpanded(function (prevState) { return !prevState; }); };
+    return ((0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({ "$hasError": hasError, id: id }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "agreement" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: title, name: name, valid: !hasError, size: "medium", checked: checked, disabled: disabled, onChange: onCheckBoxChange, value: value }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon", onClick: toggleExpand }, { children: isExpanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowUp" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowDown" }) }))] })), isExpanded && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: content } }) : (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) })))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 };
 exports.default = Agreement;

package/dist/components/Agreement/Agreement.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgreementStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    color: var(--red);\n    p {\n      margin: 0 !important;\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    color: var(--red);\n    p {\n      margin: 0 !important;\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"])), function (props) { return props.hasError ? "15px" : "16px"; }, function (props) { return props.hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.hasError ? ' var(--red)' : ' var(--dark)'; });
+exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    color: var(--red);\n    p {\n      margin: 0 !important;\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    color: var(--red);\n    p {\n      margin: 0 !important;\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"])), function (props) { return props.$hasError ? "15px" : "16px"; }, function (props) { return props.$hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.$hasError ? ' var(--red)' : ' var(--dark)'; });
 var templateObject_1;

package/dist/components/Agreement/props.js

@@ -1,2 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgreementDefault = void 0;
+exports.AgreementDefault = {
+    disabled: false,
+    value: "",
+    checked: false,
+    name: "",
+    hasError: false,
+    errorMessage: "",
+    onChange: null,
+    title: "",
+    expanded: false,
+    onExpanded: null,
+    content: "",
+    id: "",
+};

package/dist/components/Agreement/stories/Agreement.stories.js

@@ -15,5 +15,6 @@ exports.Default = {
     args: {
         onChange: function (e) { return console.log("event", e); },
         onExpanded: function (props) { return console.log("expanded", props); },
+        title: "Test title"
     },
 };

package/dist/components/Alert/Alert.js

@@ -18,15 +18,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./props");
 var Alert_styled_1 = require("./Alert.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
-var Alert = function (props) {
-    var _a, _b;
-    return (props === null || props === void 0 ? void 0 : props.show) && ((0, jsx_runtime_1.jsxs)(Alert_styled_1.AlertStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "left" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: props === null || props === void 0 ? void 0 : props.icon, color: props_1.variants[props.variant] }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: props === null || props === void 0 ? void 0 : props.title }), ((_a = props === null || props === void 0 ? void 0 : props.messages) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = props === null || props === void 0 ? void 0 : props.messages) === null || _b === void 0 ? void 0 : _b.map(function (message, index) { return (0, jsx_runtime_1.jsx)("p", { children: message }, index); })), (props === null || props === void 0 ? void 0 : props.children) && (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props === null || props === void 0 ? void 0 : props.children }))] }))] })));
-};
-Alert.defaultProps = {
-    title: (0, jsx_runtime_1.jsx)("span", { children: "Bir hata olu\u015Ftu" }),
-    messages: [],
-    show: false,
-    variant: "warning",
-    icon: "Danger",
+var Alert = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? props_1.AlertDefault.title : _b, _c = _a.children, children = _c === void 0 ? props_1.AlertDefault.children : _c, _d = _a.messages, messages = _d === void 0 ? props_1.AlertDefault.messages : _d, _e = _a.show, show = _e === void 0 ? props_1.AlertDefault.show : _e, _f = _a.width, width = _f === void 0 ? props_1.AlertDefault.width : _f, _g = _a.top, top = _g === void 0 ? props_1.AlertDefault.top : _g, _h = _a.bottom, bottom = _h === void 0 ? props_1.AlertDefault.bottom : _h, _j = _a.variant, variant = _j === void 0 ? props_1.AlertDefault.variant : _j, _k = _a.icon, icon = _k === void 0 ? props_1.AlertDefault.icon : _k;
+    return show && ((0, jsx_runtime_1.jsxs)(Alert_styled_1.AlertStyled, __assign({ "$width": width, "$top": top, "$bottom": bottom, "$variant": variant }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "left" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, color: props_1.variants[variant] }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: title }), (messages === null || messages === void 0 ? void 0 : messages.length) > 0 && (messages === null || messages === void 0 ? void 0 : messages.map(function (message, index) { return (0, jsx_runtime_1.jsx)("p", { children: message }, index); })), children && (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: children }))] }))] })));
 };
 exports.default = Alert;

package/dist/components/Alert/Alert.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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  border-radius: 8px;\n  border-left: 8px solid ", ";\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  width: ", ";\n  display: flex;\n  padding: 1rem;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  .left {\n    padding-right: 1rem;\n    > div {\n      display: block;\n      svg {\n        display: block;\n      } \n    }\n  }\n\n  .right {\n    display: flex;\n    flex-direction: column;\n    color: var(--dark);\n\n    h1 {\n      margin: 0;\n      padding-top: 3px;\n      font:var(--title-semi-bold-16-19);\n    }\n\n    p {\n      margin: 0.5rem 0 0 0;\n      font:var(--body-medium-14-17);\n    }\n    .description{\n      font:var(--body-medium-14-17);\n      ul{\n          padding-left: 1.5rem;\n      } \n    }\n  }\n"], ["\n  border-radius: 8px;\n  border-left: 8px solid ", ";\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  width: ", ";\n  display: flex;\n  padding: 1rem;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  .left {\n    padding-right: 1rem;\n    > div {\n      display: block;\n      svg {\n        display: block;\n      } \n    }\n  }\n\n  .right {\n    display: flex;\n    flex-direction: column;\n    color: var(--dark);\n\n    h1 {\n      margin: 0;\n      padding-top: 3px;\n      font:var(--title-semi-bold-16-19);\n    }\n\n    p {\n      margin: 0.5rem 0 0 0;\n      font:var(--body-medium-14-17);\n    }\n    .description{\n      font:var(--body-medium-14-17);\n      ul{\n          padding-left: 1.5rem;\n      } \n    }\n  }\n"])), function (props) {
-    switch (props.variant) {
+    switch (props.$variant) {
         case 'warning':
             return "var(--yellow)";
         case 'danger':
@@ -20,5 +20,5 @@ exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templ
         default:
             return "var(--yellow)";
     }
-}, function (props) { return props.width || "100%"; }, function (props) { return props.top || "unset"; }, function (props) { return props.bottom || "unset"; });
+}, function (props) { return props.$width || "100%"; }, function (props) { return props.$top || "unset"; }, function (props) { return props.$bottom || "unset"; });
 var templateObject_1;

package/dist/components/Alert/props.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconNames = exports.variants = void 0;
+exports.AlertDefault = exports.iconNames = exports.variants = void 0;
 var Icon_1 = require("../Icon");
 exports.variants = {
     warning: "var(--yellow)",
@@ -8,3 +8,14 @@ exports.variants = {
     success: "var(--green)",
 };
 exports.iconNames = Object.keys(Icon_1.iconList);
+exports.AlertDefault = {
+    title: "Bir hata oluştu",
+    children: null,
+    messages: ["Test Message"],
+    show: false,
+    width: "",
+    top: "",
+    bottom: "",
+    variant: "warning",
+    icon: "Danger",
+};

package/dist/components/AutocompleteInput/AutocompleteInput.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (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 AutocompleteInput_styled_1 = require("./AutocompleteInput.styled");
 var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
@@ -24,14 +25,14 @@ var Loader_1 = __importDefault(require("../Loader"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var genericUtils_1 = require("../../utils/genericUtils");
 var simplebar_react_1 = __importDefault(require("simplebar-react"));
-var AutocompleteInput = function (props) {
-    var _a;
-    var _b, _c;
-    var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, name = props.name, width = props.width, placeholder = props.placeholder, readonly = props.readonly, autofocus = props.autofocus, value = props.value, dropdownList = props.dropdownList, hasLoading = props.hasLoading, isShowDropdown = props.isShowDropdown, dropdownMaxHeight = props.dropdownMaxHeight, onClear = props.onClear, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, onKeyDown = props.onKeyDown, noResultTemplate = props.noResultTemplate, autoComplete = props.autoComplete;
-    var _d = (0, react_1.useState)(isShowDropdown), showDropdown = _d[0], setShowDropdown = _d[1];
-    var _e = (0, react_1.useState)(false), hasClear = _e[0], setHasClear = _e[1];
-    var _f = (0, react_1.useState)(value), inputValue = _f[0], setInputValue = _f[1];
-    var _g = (0, react_1.useState)(0), selectedIndex = _g[0], setSelectedIndex = _g[1];
+var AutocompleteInput = function (_a) {
+    var _b;
+    var _c, _d;
+    var _e = _a.hasError, hasError = _e === void 0 ? props_1.AutocompleteInputDefault.hasError : _e, _f = _a.label, label = _f === void 0 ? props_1.AutocompleteInputDefault.label : _f, _g = _a.type, type = _g === void 0 ? props_1.AutocompleteInputDefault.type : _g, _h = _a.width, width = _h === void 0 ? props_1.AutocompleteInputDefault.width : _h, _j = _a.dropdownMaxHeight, dropdownMaxHeight = _j === void 0 ? props_1.AutocompleteInputDefault.dropdownMaxHeight : _j, _k = _a.value, value = _k === void 0 ? props_1.AutocompleteInputDefault.value : _k, _l = _a.noResultTemplate, noResultTemplate = _l === void 0 ? props_1.AutocompleteInputDefault.noResultTemplate : _l, _m = _a.onBlur, onBlur = _m === void 0 ? props_1.AutocompleteInputDefault.onBlur : _m, _o = _a.onKeyUp, onKeyUp = _o === void 0 ? props_1.AutocompleteInputDefault.onKeyUp : _o, _p = _a.onKeyDown, onKeyDown = _p === void 0 ? props_1.AutocompleteInputDefault.onKeyDown : _p, _q = _a.autoComplete, autoComplete = _q === void 0 ? props_1.AutocompleteInputDefault.autoComplete : _q, disabled = _a.disabled, customLinkText = _a.customLinkText, customLinkHref = _a.customLinkHref, onCustomLinkClick = _a.onCustomLinkClick, onChange = _a.onChange, errorMessage = _a.errorMessage, name = _a.name, placeholder = _a.placeholder, readonly = _a.readonly, autofocus = _a.autofocus, dropdownList = _a.dropdownList, hasLoading = _a.hasLoading, isShowDropdown = _a.isShowDropdown, onClear = _a.onClear, onFocus = _a.onFocus;
+    var _r = (0, react_1.useState)(isShowDropdown), showDropdown = _r[0], setShowDropdown = _r[1];
+    var _s = (0, react_1.useState)(false), hasClear = _s[0], setHasClear = _s[1];
+    var _t = (0, react_1.useState)(value), inputValue = _t[0], setInputValue = _t[1];
+    var _u = (0, react_1.useState)(0), selectedIndex = _u[0], setSelectedIndex = _u[1];
     var inputRef = (0, react_1.useRef)(null);
     var realInputRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
@@ -55,7 +56,7 @@ var AutocompleteInput = function (props) {
         else {
             setHasClear(false);
         }
-    }, [(_b = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _b === void 0 ? void 0 : _b.value, (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.value]);
+    }, [(_c = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _c === void 0 ? void 0 : _c.value, (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.value]);
     (0, react_1.useEffect)(function () {
         if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) || (inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) === null) {
             var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
@@ -137,22 +138,8 @@ var AutocompleteInput = function (props) {
         if (e === void 0) { e = null; }
         onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: inputValue }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ width: width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), 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: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readonly: readonly, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ dropdownMaxHeight: dropdownMaxHeight }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownInnerStyled, __assign({ ref: dropdownRef, dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
+    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ "$width": width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), 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: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readOnly: readonly, disabled: disabled, "$hasError": hasError, "$isShowDropdown": showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete, type: type }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownInnerStyled, __assign({ ref: dropdownRef, "$dropdownMaxHeight": dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
                                     return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }, { "isSelected": key === selectedIndex }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
                                 })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })) })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 };
-AutocompleteInput.defaultValues = {
-    hasError: false,
-    label: "Label",
-    type: "text",
-    width: "370px",
-    dropdownMaxHeight: "370px",
-    mask: "_",
-    value: null,
-    noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
-    onBlur: function (e) { },
-    onKeyUp: function (e) { },
-    onKeyDown: function (e) { },
-    autoComplete: '',
-};
 exports.default = AutocompleteInput;

package/dist/components/AutocompleteInput/AutocompleteInput.styled.js

@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownInnerStyled = exports.DropdownStyled = exports.InputStyled = exports.Container = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\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      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    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\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      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'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
-exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; }, function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\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      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    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\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      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'; });
+exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
+exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; }, function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; });
 exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/AutocompleteInput/props.js

@@ -1,2 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteInputDefault = void 0;
+exports.AutocompleteInputDefault = {
+    hasError: false,
+    label: "Label",
+    type: "text",
+    width: "370px",
+    dropdownMaxHeight: "370px",
+    value: null,
+    noResultTemplate: "No Result",
+    onBlur: function (e) { },
+    onKeyUp: function (e) { },
+    onKeyDown: function (e) { },
+    autoComplete: '',
+};

package/dist/components/Badges/Badges.js

@@ -30,7 +30,4 @@ var Badges = function (props) {
             return (0, jsx_runtime_1.jsx)(belt_1.default, __assign({}, props));
     }
 };
-Badges.defaultProps = {
-    title: "İndirimli"
-};
 exports.default = Badges;

package/dist/components/Badges/layouts/belt/index.js

@@ -15,11 +15,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var props_1 = require("./../../props");
 var belt_styled_1 = require("./belt.styled");
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
-var Belt = function (props) {
-    var title = props.title, size = props.size;
-    return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({ "$hasResponsive": props.hasResponsive, "$size": props.size }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: size === "small" ? "56px" : "90px", height: size === "small" ? "56px" : "90px" }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: title }))] })));
+var Belt = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? props_1.BadgesDefault.title : _b, _c = _a.size, size = _c === void 0 ? props_1.BadgesDefault.size : _c, _d = _a.hasResponsive, hasResponsive = _d === void 0 ? props_1.BadgesDefault.hasResponsive : _d;
+    return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({ "$hasResponsive": hasResponsive, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: size === "small" ? "56px" : "90px", height: size === "small" ? "56px" : "90px" }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: title }))] })));
 };
-Belt.defaultProps = {};
 exports.default = Belt;

package/dist/components/Badges/layouts/dark/index.js

@@ -16,12 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (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 dark_styled_1 = require("./dark.styled");
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
-var Belt = function (props) {
-    var size = props.size;
-    var _a = (0, react_1.useState)("24px"), width = _a[0], setWidth = _a[1];
-    var _b = (0, react_1.useState)("24px"), height = _b[0], setHeight = _b[1];
+var Belt = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? props_1.BadgesDefault.size : _b, _c = _a.left, left = _c === void 0 ? props_1.BadgesDefault.left : _c, _d = _a.top, top = _d === void 0 ? props_1.BadgesDefault.top : _d;
+    var _e = (0, react_1.useState)("24px"), width = _e[0], setWidth = _e[1];
+    var _f = (0, react_1.useState)("24px"), height = _f[0], setHeight = _f[1];
     (0, react_1.useEffect)(function () {
         if (size === 'xsmall') {
             setWidth("24px");
@@ -40,7 +41,6 @@ var Belt = function (props) {
             setHeight("80px");
         }
     }, [size]);
-    return ((0, jsx_runtime_1.jsx)(dark_styled_1.DarkStyled, __assign({ "$left": props.left, "$top": props.top }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DarkBadge", width: width, height: height }) })));
+    return ((0, jsx_runtime_1.jsx)(dark_styled_1.DarkStyled, __assign({ "$left": left, "$top": top }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DarkBadge", width: width, height: height }) })));
 };
-Belt.defaultProps = {};
 exports.default = Belt;