krl-alfred 1.70.5 → 1.71.1

package/dist/components/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var Checkbox = function (props) {
     var _a, _b, _c;
     var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid;
-    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-14-17"] = size === "medium", _b), (_c = {}, _c["body-semi-bold-14-17"] = size === "large", _c)), htmlFor: id, children: label })), description && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", "body-regular-13-16"), htmlFor: id, children: description }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-13-16"] = size === "medium", _b), (_c = {}, _c["body-semi-bold-14-17"] = size === "large", _c)), htmlFor: id, children: label })), description && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", "body-regular-13-16"), htmlFor: id, children: description }))] }))] }));
 };
 exports.default = Checkbox;
 Checkbox.propTypes = {

package/dist/components/CouponCode/CouponCode.js

@@ -0,0 +1,47 @@
+"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 CouponCode_styled_1 = require("./CouponCode.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Input_1 = __importDefault(require("../Input"));
+var Button_1 = __importDefault(require("../Button"));
+var CouponCode = function (props) {
+    var _a = (0, react_1.useState)(props.expanded), expanded = _a[0], setExpanded = _a[1];
+    (0, react_1.useEffect)(function () {
+        props.onExpanded({ isExpanded: expanded });
+    }, [expanded]);
+    (0, react_1.useEffect)(function () {
+        setExpanded(props.expanded);
+    }, [props.expanded]);
+    var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
+    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded, children: [(0, jsx_runtime_1.jsxs)("div", { onClick: toggleExpand, className: "header", children: [(0, jsx_runtime_1.jsx)("div", { className: "title body-bold-14-17", children: props.title }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "body", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: "\u0130ndirim kodunu yaz", alwaysShowMask: false, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, { width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant, children: props.buttonText })] })] })));
+};
+CouponCode.defaultProps = {
+    title: "Title",
+    buttonText: "Uygula",
+    expanded: false,
+    isButtonLoading: false,
+    isInputDisabled: false,
+    buttonDisabled: false,
+    autoFocus: false,
+    hasError: false,
+    errorMessage: "",
+    buttonVariant: "primary",
+    buttonWidth: "96px",
+};
+exports.default = CouponCode;

package/dist/components/CouponCode/CouponCode.styled.js

@@ -0,0 +1,13 @@
+"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.CouponCodeStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.CouponCodeStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      path{\n        stroke: var(--primary);\n      }\n    }\n  }\n  .body{\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    padding-top: ", ";\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"], ["\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      path{\n        stroke: var(--primary);\n      }\n    }\n  }\n  .body{\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    padding-top: ", ";\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"])), function (props) { return props.expanded ? 'rotate(180deg)' : 'none'; }, function (props) { return props.expanded ? '1rem' : '0'; }, function (props) { return props.expanded ? '96px' : '0'; });
+var templateObject_1;

package/dist/components/CouponCode/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 CouponCode_1 = require("./CouponCode");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(CouponCode_1).default; } });

package/dist/components/CouponCode/props.js

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

package/dist/components/CouponCode/stories/CouponCode.stories.js

@@ -0,0 +1,40 @@
+"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 });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var CouponCode_1 = __importDefault(require("../CouponCode"));
+var props_1 = require("../../Button/props");
+exports.default = {
+    title: 'components/Coupon Code',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { width: "343px" }, children: (0, jsx_runtime_1.jsx)(CouponCode_1.default, __assign({}, props)) }); },
+    tags: ['autodocs'],
+    argTypes: {
+        buttonVariant: { control: 'select', options: props_1.variants },
+    }
+};
+exports.Default = {
+    args: {
+        onChange: function (e) { return console.log("onChange event", e); },
+        onExpanded: function (props) { return console.log("expanded", props); },
+        buttonDisabled: false,
+        autoFocus: false,
+        hasError: false,
+        errorMessage: "",
+        value: "COUPONCODE",
+        buttonText: "Uygula"
+    },
+};

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

@@ -11,5 +11,5 @@ exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n"])));
 exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n\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\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n      path{\n        stroke:var(--dark-opacity-50);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n\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\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n      path{\n        stroke:var(--dark-opacity-50);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, 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.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.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &: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: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, 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.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)'; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Input/stories/Input.stories.js

@@ -20,6 +20,7 @@ exports.Default = {
     args: {
         placeholder: "Placeholder",
         hasError: false,
+        disabled: false,
         label: "Label",
         type: "text"
     },

package/dist/components/ListGroup/ListGroup.js

@@ -1,11 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var ListGroup_styled_1 = require("./ListGroup.styled");
 var ListGroup = function (props) {
     var data = props.data;
+    var _a = (0, react_1.useState)(''), link = _a[0], setLink = _a[1];
+    (0, react_1.useEffect)(function () {
+        var _a;
+        setLink((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href);
+    }, []);
     return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
-            return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, { isActive: item.isActive, onClick: item.onClick, className: "title-bold-16-19", children: item.title }) }, key);
+            var _a;
+            return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, { isActive: (_a = link === null || link === void 0 ? void 0 : link.split('/')) === null || _a === void 0 ? void 0 : _a.includes(item["slug"]), onClick: item.onClick, className: "title-bold-16-19", children: item.title }) }, key);
         }) }));
 };
 ListGroup.defaultProps = {};

package/dist/components/Modal/Modal.styled.js

@@ -12,6 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        padding: 0;\n      }\n      p {\n        margin: 8px 0 0;\n      }\n    }\n   \n  }\n\n  div.content {\n    padding-left: 24px;\n    padding-right: 24px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    overflow: auto;\n    position: relative;\n    scroll-margin: 0 10px 30px 0;\n    scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    justify-content: ", ";\n    box-sizing: border-box;\n    border-top: ", ";\n    flex-direction: ", ";\n    gap: ", ";\n    \n    button + button {\n      margin-right: ", ";\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n    }\n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        padding: 0;\n      }\n      p {\n        margin: 8px 0 0;\n      }\n    }\n   \n  }\n\n  div.content {\n    padding-left: 24px;\n    padding-right: 24px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    overflow: auto;\n    position: relative;\n    scroll-margin: 0 10px 30px 0;\n    scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    justify-content: ", ";\n    box-sizing: border-box;\n    border-top: ", ";\n    flex-direction: ", ";\n    gap: ", ";\n    \n    button + button {\n      margin-right: ", ";\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n    }\n  }\n"])), function (props) {
     switch (props.size) {
+        case 'xsmall':
+            return "343px";
         case 'small':
             return "375px";
         case 'medium':

package/dist/components/Modal/props.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconNames = exports.titleAlignment = exports.alignment = exports.sizes = void 0;
 var Icon_1 = require("../Icon");
-exports.sizes = ['small', 'medium', 'large'];
+exports.sizes = ['xsmall', 'small', 'medium', 'large'];
 exports.alignment = ['vertical', 'horizontal'];
 exports.titleAlignment = ['left', 'center'];
 exports.iconNames = Object.keys(Icon_1.iconList);

package/dist/components/RadioButton/layouts/basic/Basic.styled.js

@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
-exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    label.label {\n      display: block;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"], ["\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    label.label {\n      display: block;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
+exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    label.label {\n      display: block;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    label.label {\n      display: block;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
     switch (props.size) {
         case 'small':
             return "16px";

package/dist/components/SelectBox/SelectBox.js

@@ -19,17 +19,18 @@ var SelectBox_styled_1 = require("./SelectBox.styled");
 var classnames_1 = __importDefault(require("classnames"));
 var react_select_1 = __importDefault(require("react-select"));
 var SelectBox = function (props) {
-    var _a;
-    var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId;
+    var _a, _b;
+    var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg;
     var formatOptionLabel = function (_a) {
         var _b;
         var innerProps = _a.innerProps, isDisabled = _a.isDisabled, data = _a.data;
         return ((0, jsx_runtime_1.jsx)("div", __assign({}, innerProps, { className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b)), children: (0, jsx_runtime_1.jsxs)("div", { children: [data.label && (0, jsx_runtime_1.jsx)("strong", { className: "title-bold-16-19", children: data.label }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { className: "body-medium-13-16", children: data.labelBottom })] }) })));
     };
-    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, { components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props)) })] }));
 };
 SelectBox.defaultValues = {
     hasError: false,
+    lightBg: true,
     label: "Label",
     width: "370px",
     placeholder: "İstediğiniz tarihi seçin...",

package/dist/components/SelectBox/SelectBox.styled.js

@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-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    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      .customSelect__control {\n        height: 56px;\n        background-color: white;\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: 1px;\n          border-style: solid;\n          border-radius: 8px;\n          border-color: var(--dark-opacity-10);\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark-opacity-50);\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark);\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 24px;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: 200px;\n          scroll-margin: 0 10px 30px 0;\n          scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\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\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: 51px;\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      .customSelect__control {\n        height: 56px;\n        background-color: white;\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: 1px;\n          border-style: solid;\n          border-radius: 8px;\n          border-color: var(--dark-opacity-10);\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark-opacity-50);\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark);\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 24px;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: 200px;\n          scroll-margin: 0 10px 30px 0;\n          scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\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\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: 51px;\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n"])), function (props) { return props.width || '370px'; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
+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    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: 1px;\n          border-style: solid;\n          border-radius: 8px;\n          border-color: var(--dark-opacity-10);\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark-opacity-50);\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark);\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 24px;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: 200px;\n          scroll-margin: 0 10px 30px 0;\n          scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\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\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: 51px;\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: 1px;\n          border-style: solid;\n          border-radius: 8px;\n          border-color: var(--dark-opacity-10);\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark-opacity-50);\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: var(--dark);\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 24px;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: 200px;\n          scroll-margin: 0 10px 30px 0;\n          scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\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\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: 51px;\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n"])), function (props) { return props.width || '370px'; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
 var templateObject_1;

package/dist/components/SelectBox/stories/SelectBox.stories.js

@@ -16,6 +16,7 @@ exports.Default = {
     args: {
         placeholder: "Placeholder",
         isSearchable: false,
+        lightBg: true,
         label: "Label",
         name: "name",
         //menuIsOpen: true,

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -0,0 +1,39 @@
+"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 ShoppingCartProduct_styled_1 = require("./ShoppingCartProduct.styled");
+var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Tooltip_1 = __importDefault(require("../Tooltip"));
+var Spinner_1 = __importDefault(require("../Spinner"));
+var ShoppingCartProduct = function (props) {
+    var LinkComponent = function (_a) {
+        var item = _a.item, children = _a.children;
+        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-semi-bold-16-19", children: props.title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: "discountRate body-extra-bold-13-16", children: ["%", props.discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "oldPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price caption-semi-bold-12-15", children: props.oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "period caption-regular-12-15", children: ["/ ", props.oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price body-extra-bold-14-17", children: props.price }), (0, jsx_runtime_1.jsxs)("div", { className: "period body-regular-13-16", children: ["/ ", props.period] })] })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "productCardDeliveryText body-medium-13-16", children: props.deliveryText })] }), (0, jsx_runtime_1.jsxs)("div", { className: "actions", children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "24px", height: "24px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15"), children: props.errorText })] }), (0, jsx_runtime_1.jsx)("div", { className: "quantity body-extra-bold-13-16", children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity }), props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))] })] }), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", { onClick: !props.hasLoading && props.toggleInsurance, className: "insurance", children: [(0, jsx_runtime_1.jsx)("div", { className: "insuranceImg", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "64.51px", height: "7.37px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text caption-semi-bold-12-15", children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsx)("span", { className: "price caption-extra-bold-12-15", children: props.insurancePrice })] }), (0, jsx_runtime_1.jsx)("div", { className: "actions", children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupWidth: props.insuranceTooltipWidth, position: "bottomRight", children: props.insuranceTooltipText })) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) }))) })] }))] })));
+};
+ShoppingCartProduct.defaultProps = {
+    insuranceText: "Tamamlayıcı ek güvence ekle",
+    insurancePrice: "",
+    hasInsurance: false,
+    hasInsuranceTooltip: false,
+    hasError: false,
+    errorText: "Bu üründen daha fazla sepetinize ekleyemezsiniz.",
+    insuranceTooltipWidth: "178px"
+};
+exports.default = ShoppingCartProduct;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js

@@ -0,0 +1,14 @@
+"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.ActionButton = exports.ShoppingCartProductStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n    }\n    .text{\n      padding-right: 0.5rem;\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        &:hover{\n          color: var(--primary);\n        }\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: ", ";\n        display: block;\n        overflow: hidden;\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 2px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price, .period {\n            text-decoration: line-through;\n          }\n        }\n\n        .newPrice {\n\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: space-between;\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      .price{\n        display: block;\n      }\n    }\n    .actions{\n    }\n  }\n"], ["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n    }\n    .text{\n      padding-right: 0.5rem;\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        &:hover{\n          color: var(--primary);\n        }\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: ", ";\n        display: block;\n        overflow: hidden;\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 2px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price, .period {\n            text-decoration: line-through;\n          }\n        }\n\n        .newPrice {\n\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: space-between;\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      .price{\n        display: block;\n      }\n    }\n    .actions{\n    }\n  }\n"])), function (props) { return props.hasDeliveryDanger ? "var(--red)" : "var(--grey-40)"; }, function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
+exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border:0;\n  padding: 0;\n  outline: none;\n  box-shadow: none;\n  width: 24px;\n  height: 24px;\n  background: white;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all .1s ease;\n  cursor: pointer;\n  position: relative;\n  /*&:hover{\n    .popup{\n      opacity: 1;\n    }\n  }*/\n  &:disabled{\n    cursor: no-drop;\n  }\n  .popup{\n    position: absolute;\n    width: 139px;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    background-color: var(--red);\n    z-index: 99999;\n    box-sizing: border-box;\n    right: calc(100% + 11px);\n    top: -8px;\n    color: white;\n    //opacity: 0;\n    opacity: 1;\n    user-select: none;\n    pointer-events: none;\n    transition: all .1s ease;\n    text-align: center;\n    &:before {\n      content: '';\n      position: absolute;\n      top: 14px;\n      left: calc(100% - 7px);\n      transform: rotate(45deg);\n      background-color: var(--red);\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n    }\n  }\n  svg{\n    display: block;\n    path, rect{\n      stroke : var(--primary);\n      transition: all .1s ease;\n    }\n  }\n  &:hover{\n    background-color : var(--primary);\n    svg{\n      path, rect{\n        stroke : white;\n      }\n    }\n  }\n"], ["\n  border:0;\n  padding: 0;\n  outline: none;\n  box-shadow: none;\n  width: 24px;\n  height: 24px;\n  background: white;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all .1s ease;\n  cursor: pointer;\n  position: relative;\n  /*&:hover{\n    .popup{\n      opacity: 1;\n    }\n  }*/\n  &:disabled{\n    cursor: no-drop;\n  }\n  .popup{\n    position: absolute;\n    width: 139px;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    background-color: var(--red);\n    z-index: 99999;\n    box-sizing: border-box;\n    right: calc(100% + 11px);\n    top: -8px;\n    color: white;\n    //opacity: 0;\n    opacity: 1;\n    user-select: none;\n    pointer-events: none;\n    transition: all .1s ease;\n    text-align: center;\n    &:before {\n      content: '';\n      position: absolute;\n      top: 14px;\n      left: calc(100% - 7px);\n      transform: rotate(45deg);\n      background-color: var(--red);\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n    }\n  }\n  svg{\n    display: block;\n    path, rect{\n      stroke : var(--primary);\n      transition: all .1s ease;\n    }\n  }\n  &:hover{\n    background-color : var(--primary);\n    svg{\n      path, rect{\n        stroke : white;\n      }\n    }\n  }\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/ShoppingCartProduct/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 ShoppingCartProduct_1 = require("./ShoppingCartProduct");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ShoppingCartProduct_1).default; } });

package/dist/components/ShoppingCartProduct/props.js

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

package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js

@@ -0,0 +1,57 @@
+"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 });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ShoppingCartProduct_1 = __importDefault(require("../ShoppingCartProduct"));
+exports.default = {
+    title: 'Components/ShoppingCartProduct',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '368px' }, children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_1.default, __assign({}, props)) }); },
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        title: "Apple İpad Air WİFİ 64GB (2020)",
+        deliveryText: "Tahmini teslim: 1 Ocak Pazar",
+        price: "12.545,24 TL",
+        oldPrice: "12.545,24 TL",
+        component: function (_a) {
+            var children = _a.children;
+            return (0, jsx_runtime_1.jsx)("a", { href: "/test", children: children });
+        },
+        discountRate: 32,
+        hasRemove: false,
+        oldPricePeriod: "hafta",
+        quantity: 1,
+        period: "hafta",
+        hasDeliveryDanger: false,
+        onRemove: function () { return console.log("onRemove event"); },
+        onIncrement: function () { return console.log("onIncrement event"); },
+        onDecrement: function () { return console.log("onDecrement event"); },
+        toggleInsurance: function () { return console.log("toggleInsurance event"); },
+        image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", height: "64px", alt: "test" }),
+        hasError: false,
+        hasLoading: false,
+        errorText: "Bu üründen daha fazla sepetinize ekleyemezsiniz.",
+        insuranceText: "Tamamlayıcı ek güvence ekle",
+        insurancePrice: "",
+        hasInsurance: true,
+        hasInsuranceTooltip: false,
+        insuranceTooltipText: (0, jsx_runtime_1.jsx)("div", { children: "\u00D6nceki kiralaman ek g\u00FCvenceli oldu\u011Fu i\u00E7in, s\u00FCre uzat\u0131rken de ek g\u00FCvencen otomatik olarak eklenir" }),
+        insuranceTooltipWidth: "178px",
+    },
+};

package/dist/components/TextLink/TextLink.js

@@ -24,5 +24,6 @@ var TextLink = function (props) {
 TextLink.defaultProps = {
     iconWidth: "24px",
     iconHeight: "24px",
+    variant: "primary",
 };
 exports.default = TextLink;

package/dist/components/TextLink/TextLink.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Inner = exports.IconStyled = exports.TextLinkStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--primary);\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  svg{\n    display: block;\n    path, rect{\n      stroke : var(--primary);\n    }\n    circle{\n      fill : var(--primary);\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: var(--primary-hover);\n    svg{\n      display: block;\n      path, rect{\n        stroke : var(--primary-hover);\n      }\n      circle{\n        fill : var(--primary-hover);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"], ["\n  color: var(--primary);\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  svg{\n    display: block;\n    path, rect{\n      stroke : var(--primary);\n    }\n    circle{\n      fill : var(--primary);\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: var(--primary-hover);\n    svg{\n      display: block;\n      path, rect{\n        stroke : var(--primary-hover);\n      }\n      circle{\n        fill : var(--primary-hover);\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])));
+exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"], ["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
 exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 0.5rem;\n"], ["\n  margin-right: 0.5rem;\n"])));
 exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/TextLink/props.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconNames = void 0;
+exports.iconNames = exports.variants = void 0;
 var Icon_1 = require("../Icon");
+exports.variants = ['primary', 'secondary'];
 exports.iconNames = Object.keys(Icon_1.iconList);

package/dist/components/TextLink/stories/TextLink.stories.js

@@ -6,16 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 var TextLink_1 = __importDefault(require("../TextLink"));
 var Icon_1 = require("../../Icon");
+var props_1 = require("../props");
 exports.default = {
     title: 'Components/TextLink',
     component: TextLink_1.default,
     tags: ['autodocs'],
     argTypes: {
+        variant: { control: 'select', options: props_1.variants },
         icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
     }
 };
 exports.Default = {
     args: {
-        children: "Text Link"
+        children: "Text Link",
+        variant: "primary",
     },
 };

package/dist/components/Toast/Toast.js

@@ -33,17 +33,13 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Button_1 = __importDefault(require("../Button"));
 var classnames_1 = __importDefault(require("classnames"));
 var Toast = function (props) {
-    var timer = props.timer, primaryButtonText = props.primaryButtonText, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isPrimaryButtonLoading = props.isPrimaryButtonLoading, showPrimaryButton = props.showPrimaryButton, children = props.children, icon = props.icon, show = props.show, onPrimaryAction = props.onPrimaryAction, title = props.title, other = __rest(props, ["timer", "primaryButtonText", "isPrimaryButtonDisabled", "isPrimaryButtonLoading", "showPrimaryButton", "children", "icon", "show", "onPrimaryAction", "title"]);
-    var _a = (0, react_1.useState)(show), showToast = _a[0], setShowToast = _a[1];
+    var timer = props.timer, primaryButtonText = props.primaryButtonText, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isPrimaryButtonLoading = props.isPrimaryButtonLoading, showPrimaryButton = props.showPrimaryButton, children = props.children, icon = props.icon, show = props.show, setShow = props.setShow, onPrimaryAction = props.onPrimaryAction, title = props.title, other = __rest(props, ["timer", "primaryButtonText", "isPrimaryButtonDisabled", "isPrimaryButtonLoading", "showPrimaryButton", "children", "icon", "show", "setShow", "onPrimaryAction", "title"]);
     (0, react_1.useEffect)(function () {
-        setShowToast(show);
-        setTimeout(function () {
-            setShowToast(false);
-        }, timer);
-        document.body.style.overflow = show ? "auto" : "hidden";
+        setTimeout(function () { return setShow(false); }, timer);
+        document.body.style.overflow = show ? "hidden" : "auto";
     }, [show]);
-    return (showToast &&
-        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "24px", height: "24px" }) })), title && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)("title", "headline-semi-bold-20-24"), children: title })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("content", "body-regular-14-17"), children: children }), showPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { className: "bottom", children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", width: "100%", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, children: primaryButtonText }) }))] }) })) }), document.body));
+    return (show &&
+        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "24px", height: "24px" }) })), title && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)("title", "title-extra-bold-16-19"), children: title })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("content", "body-regular-14-17"), children: children }), showPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { className: "bottom", children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", width: "100%", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, children: primaryButtonText }) }))] }) })) }), document.body));
 };
 Toast.defaultProps = {
     icon: "CheckMark",

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
+exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
 var Button_1 = __importDefault(require("./components/Button"));
 exports.Button = Button_1.default;
 var Spinner_1 = __importDefault(require("./components/Spinner"));
@@ -70,3 +70,7 @@ var ContentBox_1 = __importDefault(require("./components/ContentBox"));
 exports.ContentBox = ContentBox_1.default;
 var InfoBox_1 = __importDefault(require("./components/InfoBox"));
 exports.InfoBox = InfoBox_1.default;
+var CouponCode_1 = __importDefault(require("./components/CouponCode"));
+exports.CouponCode = CouponCode_1.default;
+var ShoppingCartProduct_1 = __importDefault(require("./components/ShoppingCartProduct"));
+exports.ShoppingCartProduct = ShoppingCartProduct_1.default;

package/dist/utils/svgToBase64.js

@@ -4,4 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var server_1 = __importDefault(require("react-dom/server"));
-exports.default = (function (svg) { return "data:image/svg+xml;base64,".concat(typeof window !== "undefined" && window.btoa(server_1.default.renderToString(svg))); });
+exports.default = (function (svg) {
+    //return `data:image/svg+xml;base64,${typeof window !== "undefined" && window.btoa(ReactDomServer.renderToString(svg))}`
+    var xmlSource = server_1.default.renderToString(svg);
+    if (!xmlSource.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)) {
+        xmlSource = xmlSource.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+    }
+    if (!xmlSource.match(/^<svg[^>]+"http:\/\/www\.w3\.org\/1999\/xlink"/)) {
+        xmlSource = xmlSource.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+    }
+    xmlSource = "<?xml version=\"1.0\" standalone=\"no\"?>\r\n".concat(xmlSource);
+    var svg64 = encodeURIComponent(xmlSource);
+    var b64Start = 'data:image/svg+xml;charset=utf-8,';
+    var image64 = b64Start + svg64;
+    return image64;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.70.5",
+  "version": "1.71.1",
   "files": [
     "dist"
   ],