krl-alfred 1.77.34 → 1.78.0

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: 0.25rem;\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: 0.25rem;\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/AddressCard/AddressCard.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 8px;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n    ", "\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"], ["\n    border-radius: 8px;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n    ", "\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n        &:hover{\n            &:before{\n                border: 1px solid var(--primary-hover);\n                opacity: 1;\n            }   \n        }\n    "; }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; });
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n    ", "\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n    ", "\n    .head{\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n        .editBtn{\n            font : var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n            * {\n                display: block;\n            }\n        }\n    }\n    .description{\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font : var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n        &:hover{\n            &:before{\n                border: 1px solid var(--primary-hover);\n                opacity: 1;\n            }   \n        }\n    "; }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; });
 var templateObject_1;

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: 0.5rem;\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: 0.5rem;\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: 0.5rem;\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: 0.5rem;\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/Alert/Alert.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 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) {
+exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.5rem;\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: 0.5rem;\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) {
         case 'warning':
             return "var(--yellow)";

package/dist/components/AutocompleteInput/AutocompleteInput.js

@@ -28,11 +28,11 @@ var simplebar_react_1 = __importDefault(require("simplebar-react"));
 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 _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, _r = _a.hasAutoUppercase, hasAutoUppercase = _r === void 0 ? props_1.AutocompleteInputDefault.hasAutoUppercase : _r, _s = _a.dropdownPosition, dropdownPosition = _s === void 0 ? props_1.AutocompleteInputDefault.dropdownPosition : _s, 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 _t = (0, react_1.useState)(isShowDropdown), showDropdown = _t[0], setShowDropdown = _t[1];
+    var _u = (0, react_1.useState)(false), hasClear = _u[0], setHasClear = _u[1];
+    var _v = (0, react_1.useState)(value), inputValue = _v[0], setInputValue = _v[1];
+    var _w = (0, react_1.useState)(0), selectedIndex = _w[0], setSelectedIndex = _w[1];
     var inputRef = (0, react_1.useRef)(null);
     var realInputRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
@@ -99,7 +99,9 @@ var AutocompleteInput = function (_a) {
         e = e || window.event;
         var charCode = e.keyCode || e.which;
         if (![38, 40].includes(charCode)) {
-            e.target.value = ("" + (0, genericUtils_1.replaceTRtoEn)(e.target.value)).toUpperCase();
+            if (hasAutoUppercase) {
+                e.target.value = ("" + (0, genericUtils_1.replaceTRtoEn)(e.target.value)).toUpperCase();
+            }
             setInputValue(null);
             onKeyUp(e);
         }
@@ -108,7 +110,7 @@ var AutocompleteInput = function (_a) {
         }
     };
     var handleKeyDown = function (e) {
-        var _a, _b;
+        var _a, _b, _c;
         e = e || window.event;
         var charCode = e.keyCode || e.which;
         if (charCode == 13) {
@@ -119,8 +121,8 @@ var AutocompleteInput = function (_a) {
         if ([38, 40].includes(charCode)) {
             e.preventDefault();
             // 38 up , 40 down
-            if (((_b = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _b === void 0 ? void 0 : _b.children.length) > 0)
-                setSelectedIndex(function (prev) { var _a, _b; return charCode === 38 ? prev === 0 ? 0 : prev - 1 : prev === ((_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children.length) - 1 ? ((_b = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _b === void 0 ? void 0 : _b.children.length) - 1 : prev + 1; });
+            if (((_c = (_b = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) > 0)
+                setSelectedIndex(function (prev) { var _a, _b, _c, _d; return charCode === 38 ? prev === 0 ? 0 : prev - 1 : prev === ((_b = (_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) - 1 ? ((_d = (_c = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _c === void 0 ? void 0 : _c.children) === null || _d === void 0 ? void 0 : _d.length) - 1 : prev + 1; });
         }
         else {
             setSelectedIndex(0);
@@ -130,7 +132,7 @@ var AutocompleteInput = function (_a) {
     var handleBlur = function (e) {
         var _a, _b;
         onBlur(e);
-        if (dropdownList.length === 1) {
+        if ((dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length) === 1) {
             handleSelectValue((_a = dropdownList[0]) === null || _a === void 0 ? void 0 : _a.value, (_b = dropdownList[0]) === null || _b === void 0 ? void 0 : _b.label);
         }
     };
@@ -138,7 +140,7 @@ var AutocompleteInput = function (_a) {
         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", (_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.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, "$hasAutoUppercase": hasAutoUppercase }), (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: "2.5px", width: "24px", height: "24px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight, "$dropdownPosition": dropdownPosition }, { 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 === null || dropdownList === void 0 ? void 0 : 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 })] })))] })));
 };

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: 28px;\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: 28px;\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  ", "\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  ", "\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 ? '0.5rem 0.5rem 0 0' : '0.5rem'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 53px 18.5px 23px' : '19.5px 54px 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.$hasAutoUppercase && "text-transform: uppercase;"; }, 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 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\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 0.5rem 0.5rem;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: ", ";\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.$dropdownPosition && props.$dropdownPosition; }, 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

@@ -13,4 +13,6 @@ exports.AutocompleteInputDefault = {
     onKeyUp: function (e) { },
     onKeyDown: function (e) { },
     autoComplete: '',
+    hasAutoUppercase: true,
+    dropdownPosition: "absolute"
 };

package/dist/components/BannerCard/BannerCard.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
+exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 0.5rem 0.5rem;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 0.5rem 0.5rem;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      &:is(.imgMobile){\n          position: absolute;\n          inset: 0;\n          z-index: 1;\n          @media only screen and ", " {\n              display: none;\n          }\n      }\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n          width: 100% !important;\n          object-fit: contain !important;\n          object-position: center center !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
 var templateObject_1;

package/dist/components/Breadcrumbs/Breadcrumbs.styled.js

@@ -19,8 +19,8 @@ exports.ButtonLinkComponentLg = styled_components_1.default.span(templateObject_
 exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"], ["\n  display: inline-block;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-left: 0;\n  padding-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  div {\n    display: block;\n  }\n"], ["\n  margin-left: 0;\n  padding-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  div {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"])));
-exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 4px;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 24px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 4px;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 24px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"])));
+exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 24px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 24px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"])));
 exports.DropdownList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  z-index:5;\n  padding: 0;\n  position: absolute;\n  left: 55px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"], ["\n  z-index:5;\n  padding: 0;\n  position: absolute;\n  left: 55px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"])));
 exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.xl);
-exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
+exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/components/Button/Button.js

@@ -10,6 +10,17 @@ 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 };
 };
@@ -17,17 +28,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Button_styled_1 = require("./Button.styled");
+var props_1 = require("./props");
 var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Loader_1 = __importDefault(require("../Loader"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var Children = function (props) {
-    var children = props.children, icon = props.icon, iconStrokeWidth = props.iconStrokeWidth, isLoading = props.isLoading;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('children', { 'isLoading': isLoading }) }, { children: children })), icon && ((0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, width: "16px", height: "16px" }) }))] });
+    var children = props.children, icon = props.icon, iconStrokeWidth = props.iconStrokeWidth, isLoading = props.isLoading, iconSize = props.iconSize;
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('children', { 'isLoading': isLoading }) }, { children: children })), icon && ((0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, __assign({ "$iconSize": iconSize }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon }) })))] });
 };
 var Button = (0, react_1.forwardRef)(function (props, ref) {
-    var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children, iconStrokeWidth = props.iconStrokeWidth;
-    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref }, { children: (0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })) })));
+    var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children, iconStrokeWidth = props.iconStrokeWidth, _a = props.iconSize, iconSize = _a === void 0 ? props_1.ButtonDefault.iconSize : _a, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconStrokeWidth", "iconSize"]);
+    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading }, other, { children: (0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, iconStrokeWidth: iconStrokeWidth, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })) })));
 });
 Button.propTypes = {
     iconStrokeWidth: prop_types_1.default.string,

package/dist/components/Button/Button.styled.js

@@ -86,7 +86,7 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"])), function (props) { return props.$size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
+exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"])), function (props) { return props.$size === 'xsmall' ? '0.25rem' : '0.5rem'; }, function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
     switch (props.$variant) {
         case 'primary':
             return primary;
@@ -112,6 +112,6 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (t
         default:
             return "48px";
     }
-}, function (props) { return props.$icon ? "10px" : "0"; });
-exports.IconStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+}, function (props) { return props.$icon && !props.$isLoading ? "10px" : "0"; });
+exports.IconStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  svg{\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  svg{\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return props.$iconSize && props.$iconSize; }, function (props) { return props.$iconSize && props.$iconSize; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/Button/props.js

@@ -5,4 +5,4 @@ var Icon_1 = require("../Icon");
 exports.variants = ['primary', 'secondary', 'inverted', 'ghost'];
 exports.sizes = ['big', 'medium', 'small', 'xsmall'];
 exports.iconNames = Object.keys(Icon_1.iconList);
-exports.ButtonDefault = { size: 'medium', variant: 'primary', isLoading: false, width: "auto", type: "button" };
+exports.ButtonDefault = { size: 'medium', variant: 'primary', isLoading: false, width: "auto", type: "button", iconSize: "1rem" };

package/dist/components/Button/stories/Button.stories.js

@@ -41,5 +41,5 @@ exports.Default = {
     },
 };
 exports.Icon = {
-    args: __assign(__assign({}, exports.Default.args), { icon: 'Again' }),
+    args: __assign(__assign({}, exports.Default.args), { icon: 'Again', iconSize: "1rem" }),
 };

package/dist/components/CampaignCard/CampaignCard.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CampaignCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.CampaignCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 8px;\n  box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n  padding: ", ";\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n  .cartBadge {\n    position: absolute;\n    z-index: 5;\n    ", ";\n    @media only screen and ", " {\n      left: 16px;\n      top: 16px;\n    }\n  }\n\n  .img {\n    position: relative;\n    display: block;\n    padding-bottom: ", ";\n    overflow: hidden;\n    border-radius: 4px;\n    > * {\n      position: absolute !important;\n      left: 50% !important;\n      top: 50% !important;\n      transform: translate(-50%, -50%);\n      width: 100% !important;\n      height: auto !important;\n    }\n    @media only screen and ", " {\n      padding-bottom: 60%;\n    }\n  }\n\n  .title {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    word-break: break-word;\n    text-overflow: ellipsis;\n    ", " \n    @media only screen and ", " {\n        margin-top: 1.5rem !important;\n        font:var(--body-semi-bold-14-17) !important;\n    }\n  }\n\n  .progressTitle {\n    display: flex;\n    margin-top: 1rem;\n    color: var(--primary);\n    font:var(--headline-extra-bold-18-22);\n    height: 40px;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n  }\n\n  .progressBar {\n    margin-top: 1rem;\n  }\n\n  @media only screen and ", " {\n    padding: 1.5rem;\n  }\n"], ["\n  border-radius: 8px;\n  box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n  padding: ", ";\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n  .cartBadge {\n    position: absolute;\n    z-index: 5;\n    ", ";\n    @media only screen and ", " {\n      left: 16px;\n      top: 16px;\n    }\n  }\n\n  .img {\n    position: relative;\n    display: block;\n    padding-bottom: ", ";\n    overflow: hidden;\n    border-radius: 4px;\n    > * {\n      position: absolute !important;\n      left: 50% !important;\n      top: 50% !important;\n      transform: translate(-50%, -50%);\n      width: 100% !important;\n      height: auto !important;\n    }\n    @media only screen and ", " {\n      padding-bottom: 60%;\n    }\n  }\n\n  .title {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    word-break: break-word;\n    text-overflow: ellipsis;\n    ", " \n    @media only screen and ", " {\n        margin-top: 1.5rem !important;\n        font:var(--body-semi-bold-14-17) !important;\n    }\n  }\n\n  .progressTitle {\n    display: flex;\n    margin-top: 1rem;\n    color: var(--primary);\n    font:var(--headline-extra-bold-18-22);\n    height: 40px;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n  }\n\n  .progressBar {\n    margin-top: 1rem;\n  }\n\n  @media only screen and ", " {\n    padding: 1.5rem;\n  }\n"])), function (props) {
+exports.CampaignCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n  padding: ", ";\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n  .cartBadge {\n    position: absolute;\n    z-index: 5;\n    ", ";\n    @media only screen and ", " {\n      left: 16px;\n      top: 16px;\n    }\n  }\n\n  .img {\n    position: relative;\n    display: block;\n    padding-bottom: ", ";\n    overflow: hidden;\n    border-radius: 0.25rem;\n    > * {\n      position: absolute !important;\n      left: 50% !important;\n      top: 50% !important;\n      transform: translate(-50%, -50%);\n      width: 100% !important;\n      height: auto !important;\n    }\n    @media only screen and ", " {\n      padding-bottom: 60%;\n    }\n  }\n\n  .title {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    word-break: break-word;\n    text-overflow: ellipsis;\n    ", " \n    @media only screen and ", " {\n        margin-top: 1.5rem !important;\n        font:var(--body-semi-bold-14-17) !important;\n    }\n  }\n\n  .progressTitle {\n    display: flex;\n    margin-top: 1rem;\n    color: var(--primary);\n    font:var(--headline-extra-bold-18-22);\n    height: 40px;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n  }\n\n  .progressBar {\n    margin-top: 1rem;\n  }\n\n  @media only screen and ", " {\n    padding: 1.5rem;\n  }\n"], ["\n  border-radius: 0.5rem;\n  box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n  padding: ", ";\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n  .cartBadge {\n    position: absolute;\n    z-index: 5;\n    ", ";\n    @media only screen and ", " {\n      left: 16px;\n      top: 16px;\n    }\n  }\n\n  .img {\n    position: relative;\n    display: block;\n    padding-bottom: ", ";\n    overflow: hidden;\n    border-radius: 0.25rem;\n    > * {\n      position: absolute !important;\n      left: 50% !important;\n      top: 50% !important;\n      transform: translate(-50%, -50%);\n      width: 100% !important;\n      height: auto !important;\n    }\n    @media only screen and ", " {\n      padding-bottom: 60%;\n    }\n  }\n\n  .title {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    word-break: break-word;\n    text-overflow: ellipsis;\n    ", " \n    @media only screen and ", " {\n        margin-top: 1.5rem !important;\n        font:var(--body-semi-bold-14-17) !important;\n    }\n  }\n\n  .progressTitle {\n    display: flex;\n    margin-top: 1rem;\n    color: var(--primary);\n    font:var(--headline-extra-bold-18-22);\n    height: 40px;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n  }\n\n  .progressBar {\n    margin-top: 1rem;\n  }\n\n  @media only screen and ", " {\n    padding: 1.5rem;\n  }\n"])), function (props) {
     switch (props.$size) {
         case 'large':
             return "1.5rem";

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])));
 var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])));
 exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; });
-exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
+exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
 exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    height: 24px;\n    display:block;\n"], ["\n    height: 24px;\n    display:block;\n"])));
 exports.CategoryItemButtonTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: 8px;\n    display:block;\n    font:var(--caption-semi-bold-12-15);\n"], ["\n    margin-top: 8px;\n    display:block;\n    font:var(--caption-semi-bold-12-15);\n"])));
 exports.SubMenu = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: absolute;\n    left: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n"], ["\n    position: absolute;\n    left: 0;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    transition-delay: 0s;\n    padding: 0;\n    margin: 0;\n"])));

package/dist/components/CircleProgressPro/CircleProgressPro.js

@@ -0,0 +1,21 @@
+"use strict";
+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 CircleProgressPro_styled_1 = require("./CircleProgressPro.styled");
+var Badges_1 = __importDefault(require("../Badges"));
+var Dropdown_1 = __importDefault(require("../Dropdown"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var CircleProgressPro = function (props) {
+    var dropdownList = [
+        {
+            title: "test",
+            onClick: function () { },
+        }
+    ];
+    return ((0, jsx_runtime_1.jsxs)(CircleProgressPro_styled_1.CircleProgressProStyled, { children: [(0, jsx_runtime_1.jsxs)(CircleProgressPro_styled_1.SummaryHeaderStyled, { children: [(0, jsx_runtime_1.jsx)(CircleProgressPro_styled_1.TitleStyled, { children: "Toplam sat\u0131\u015F" }), (0, jsx_runtime_1.jsxs)(CircleProgressPro_styled_1.SummaryHeaderRightContentStyled, { children: [(0, jsx_runtime_1.jsx)(CircleProgressPro_styled_1.BadgeWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: "new" }) }), (0, jsx_runtime_1.jsx)(CircleProgressPro_styled_1.DropdownWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: true, Toggle: function () { return (0, jsx_runtime_1.jsxs)(CircleProgressPro_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "-12px", width: "170px", top: "calc(100% + 10px)" }) })] })] }), (0, jsx_runtime_1.jsxs)(CircleProgressPro_styled_1.SummaryBodyStyled, { children: [(0, jsx_runtime_1.jsxs)(CircleProgressPro_styled_1.SummaryInfoStyled, { children: [(0, jsx_runtime_1.jsx)(CircleProgressPro_styled_1.SummaryInfoTitleStyled, { children: "Sat\u0131lan" }), (0, jsx_runtime_1.jsx)(CircleProgressPro_styled_1.SummaryInfoTitleStyled, { children: "Sat\u0131lmayan" })] }), (0, jsx_runtime_1.jsx)(CircleProgressPro_styled_1.ProgressWrapperStyled, {})] })] }));
+};
+CircleProgressPro.defaultProps = {};
+exports.default = CircleProgressPro;

package/dist/components/CircleProgressPro/CircleProgressPro.styled.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressWrapperStyled = exports.SummaryInfoTitleStyled = exports.SummaryInfoStyled = exports.SummaryBodyStyled = exports.DropdownToggleButton = exports.DropdownWrapperStyled = exports.BadgeWrapperStyled = exports.SummaryHeaderRightContentStyled = exports.TitleStyled = exports.SummaryHeaderStyled = exports.CircleProgressProStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.CircleProgressProStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n"], ["\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n"])));
+exports.SummaryHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
+exports.TitleStyled = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--title-bold-16-19);\n"], ["\n    font: var(--title-bold-16-19);\n"])));
+exports.SummaryHeaderRightContentStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
+exports.BadgeWrapperStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-right: 0.5rem;\n"], ["\n    margin-right: 0.5rem;\n"])));
+exports.DropdownWrapperStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n"], ["\n"])));
+exports.DropdownToggleButton = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0; \n    background: none;\n    color: var(--primary);\n"], ["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0; \n    background: none;\n    color: var(--primary);\n"])));
+exports.SummaryBodyStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+exports.SummaryInfoStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+exports.SummaryInfoTitleStyled = styled_components_1.default.strong(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    font: var(--body-regular-14-17);\n    &:before{\n        content: \"\";\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        margin-right: 0.5rem;\n        background-color: var(--primary);\n        border-radius: 50%;\n    }\n    &:nth-child(2){\n        &:before{\n            background-color: var(--primary);\n        }\n    }\n"], ["\n    display: block;\n    font: var(--body-regular-14-17);\n    &:before{\n        content: \"\";\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        margin-right: 0.5rem;\n        background-color: var(--primary);\n        border-radius: 50%;\n    }\n    &:nth-child(2){\n        &:before{\n            background-color: var(--primary);\n        }\n    }\n"])));
+exports.ProgressWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+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/CircleProgressPro/index.js

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

package/dist/components/CircleProgressPro/props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/CircleProgressPro/stories/CircleProgressPro.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var CircleProgressPro_1 = __importDefault(require("../CircleProgressPro"));
+exports.default = {
+    title: 'Components/CircleProgressPro',
+    component: CircleProgressPro_1.default,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {},
+};

package/dist/components/ColorPalette/ColorPalette.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValueListWrapper = exports.Value = exports.TitleLg = exports.TitleXl = exports.Title = exports.Text = exports.Bg = exports.ColorItem = exports.ColorPaletteStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ColorPaletteStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 15px;\n  margin-bottom: 3rem;\n  @media (max-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media (max-width: 576px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 15px;\n  margin-bottom: 3rem;\n  @media (max-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media (max-width: 576px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n"])));
-exports.ColorItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 16px;\n  position: relative;\n  overflow: hidden;\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 16px;\n  position: relative;\n  overflow: hidden;\n"])));
+exports.ColorItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 1rem;\n  position: relative;\n  overflow: hidden;\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 1rem;\n  position: relative;\n  overflow: hidden;\n"])));
 exports.Bg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 120px;\n  background: ", "};\n"], ["\n  min-height: 120px;\n  background: ", "};\n"])), function (props) {
     var _a;
     return ((_a = props === null || props === void 0 ? void 0 : props.gradient) === null || _a === void 0 ? void 0 : _a.length)

package/dist/components/DescriptionCard/AccordionItem.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var DescriptionCard_styled_1 = require("./DescriptionCard.styled");
+var DescriptionCard_1 = __importDefault(require("./DescriptionCard"));
+var AccordionItem = function (_a) {
+    var data = _a.data;
+    var _b = (0, react_1.useState)(false), show = _b[0], setShow = _b[1];
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.AccordionItemWrapper, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.AccordionItemHeader, __assign({ "$show": show, onClick: function () { return setShow(!show); } }, { children: [(0, jsx_runtime_1.jsx)("strong", { children: data === null || data === void 0 ? void 0 : data.title }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: show ? "NegativeSmall" : "PlusSmall", width: "24px", height: "24px" }) }))] })), show && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionItemBody, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { list: data.list, hasHeader: false, hasRounded: false, hasBorder: false }) }))] }));
+};
+exports.default = AccordionItem;

package/dist/components/DescriptionCard/DescriptionCard.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var props_1 = require("./props");
+var DescriptionCard_styled_1 = require("./DescriptionCard.styled");
+var Badges_1 = __importDefault(require("../Badges"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var OptionMenu_1 = __importDefault(require("../OptionMenu"));
+var AccordionItem_1 = __importDefault(require("./AccordionItem"));
+var DescriptionCard = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.headerDropdownText, headerDropdownText = _c === void 0 ? props_1.DescriptionCardDefault.headerDropdownText : _c, _d = _a.hasHeaderDropdown, hasHeaderDropdown = _d === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _d, _e = _a.list, list = _e === void 0 ? props_1.DescriptionCardDefault.list : _e, _f = _a.hasBadge, hasBadge = _f === void 0 ? props_1.DescriptionCardDefault.hasBadge : _f, _g = _a.badgeText, badgeText = _g === void 0 ? props_1.DescriptionCardDefault.badgeText : _g, _h = _a.hasHeader, hasHeader = _h === void 0 ? props_1.DescriptionCardDefault.hasHeader : _h, _j = _a.hasRounded, hasRounded = _j === void 0 ? props_1.DescriptionCardDefault.hasRounded : _j, _k = _a.hasBorder, hasBorder = _k === void 0 ? props_1.DescriptionCardDefault.hasBorder : _k, _l = _a.headerImage, headerImage = _l === void 0 ? props_1.DescriptionCardDefault.headerImage : _l, _m = _a.dropdownList, dropdownList = _m === void 0 ? props_1.DescriptionCardDefault.dropdownList : _m, _o = _a.dropdownWidth, dropdownWidth = _o === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _o, _p = _a.accordionList, accordionList = _p === void 0 ? props_1.DescriptionCardDefault.accordionList : _p;
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$headerImage": headerImage }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { children: title }), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderDropdownOpener, { children: [headerDropdownText, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) })] }) }))] }))), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, { children: list.map(function (listItem) { return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "displayTitle" }, { children: listItem.title })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "displayValue" }, { children: listItem.display || "-" }))] })); }) }), (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionListWrapper, { children: accordionList === null || accordionList === void 0 ? void 0 : accordionList.map(function (item) {
+                    return (0, jsx_runtime_1.jsx)(AccordionItem_1.default, { data: item });
+                }) }))] })));
+};
+exports.default = DescriptionCard;