krl-alfred 1.81.10 → 1.81.11

package/dist/components/Agreement/Agreement.js

@@ -22,8 +22,8 @@ var Checkbox_1 = __importDefault(require("../Checkbox"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Loader_1 = __importDefault(require("../Loader"));
 var Agreement = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? props_1.AgreementDefault.disabled : _b, _c = _a.value, value = _c === void 0 ? props_1.AgreementDefault.value : _c, _d = _a.checked, checked = _d === void 0 ? props_1.AgreementDefault.checked : _d, _e = _a.name, name = _e === void 0 ? props_1.AgreementDefault.name : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.AgreementDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.AgreementDefault.errorMessage : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.AgreementDefault.onChange : _h, _j = _a.title, title = _j === void 0 ? props_1.AgreementDefault.title : _j, _k = _a.expanded, expanded = _k === void 0 ? props_1.AgreementDefault.expanded : _k, _l = _a.onExpanded, onExpanded = _l === void 0 ? props_1.AgreementDefault.onExpanded : _l, _m = _a.content, content = _m === void 0 ? props_1.AgreementDefault.content : _m, _o = _a.id, id = _o === void 0 ? props_1.AgreementDefault.id : _o;
-    var _p = (0, react_1.useState)(expanded), isExpanded = _p[0], setIsExpanded = _p[1];
+    var _b = _a.disabled, disabled = _b === void 0 ? props_1.AgreementDefault.disabled : _b, _c = _a.value, value = _c === void 0 ? props_1.AgreementDefault.value : _c, _d = _a.checked, checked = _d === void 0 ? props_1.AgreementDefault.checked : _d, _e = _a.name, name = _e === void 0 ? props_1.AgreementDefault.name : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.AgreementDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.AgreementDefault.errorMessage : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.AgreementDefault.onChange : _h, _j = _a.title, title = _j === void 0 ? props_1.AgreementDefault.title : _j, _k = _a.expanded, expanded = _k === void 0 ? props_1.AgreementDefault.expanded : _k, _l = _a.onExpanded, onExpanded = _l === void 0 ? props_1.AgreementDefault.onExpanded : _l, _m = _a.content, content = _m === void 0 ? props_1.AgreementDefault.content : _m, _o = _a.id, id = _o === void 0 ? props_1.AgreementDefault.id : _o, _p = _a.required, required = _p === void 0 ? props_1.AgreementDefault.required : _p;
+    var _q = (0, react_1.useState)(expanded), isExpanded = _q[0], setIsExpanded = _q[1];
     (0, react_1.useEffect)(function () {
         onExpanded({ isExpanded: isExpanded });
     }, [isExpanded]);
@@ -36,6 +36,6 @@ var Agreement = function (_a) {
         onChange(event);
     };
     var toggleExpand = function () { return setIsExpanded(function (prevState) { return !prevState; }); };
-    return ((0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({ "$hasError": hasError }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "agreement" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: id, label: title, name: name, valid: !hasError, textSize: "large", size: "medium", checked: checked, disabled: disabled, onChange: onCheckBoxChange, value: value }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon", onClick: toggleExpand }, { children: isExpanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowUpBig" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDownBig" }) }))] })), isExpanded && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: content } }) : (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) })))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({ "$hasError": hasError }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "agreement" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: id, required: required, label: title, name: name, valid: !hasError, textSize: "large", size: "medium", checked: checked, disabled: disabled, onChange: onCheckBoxChange, value: value }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon", onClick: toggleExpand }, { children: isExpanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowUpBig" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDownBig" }) }))] })), isExpanded && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: content } }) : (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) })))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 };
 exports.default = Agreement;

package/dist/components/Agreement/props.js

@@ -11,6 +11,7 @@ exports.AgreementDefault = {
     onChange: null,
     title: "",
     expanded: false,
+    required: false,
     onExpanded: null,
     content: "",
     id: "",

package/dist/components/Checkbox/Checkbox.js

@@ -15,12 +15,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./props");
 var Checkbox_styled_1 = require("./Checkbox.styled");
 var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
 var Checkbox = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.color, color = _m === void 0 ? props_1.CheckboxDefault.color : _m, _o = _a.textSize, textSize = _o === void 0 ? props_1.CheckboxDefault.textSize : _o, _p = _a.verticalAlign, verticalAlign = _p === void 0 ? props_1.CheckboxDefault.verticalAlign : _p;
-    var _q = (0, react_1.useState)(color), inputColor = _q[0], setInputColor = _q[1];
+    var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.color, color = _m === void 0 ? props_1.CheckboxDefault.color : _m, _o = _a.textSize, textSize = _o === void 0 ? props_1.CheckboxDefault.textSize : _o, _p = _a.verticalAlign, verticalAlign = _p === void 0 ? props_1.CheckboxDefault.verticalAlign : _p, _q = _a.required, required = _q === void 0 ? props_1.CheckboxDefault.required : _q;
+    var _r = (0, react_1.useState)(color), inputColor = _r[0], setInputColor = _r[1];
+    var t = (0, react_i18next_1.useTranslation)().t;
     (0, react_1.useEffect)(function () {
         setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
     });
-    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$color": inputColor, "$textSize": textSize, "$verticalAlign": verticalAlign }, { 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)("label", { htmlFor: id, className: "indicator" }), label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$color": inputColor, "$textSize": textSize, "$verticalAlign": verticalAlign, "$required": required }, { 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)("label", { htmlFor: id, className: "indicator" }), label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
 };
 exports.default = Checkbox;

package/dist/components/Checkbox/Checkbox.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.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    align-items:", ";\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    .indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", " ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            cursor: inherit;\n            font: ", ";\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    align-items:", ";\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    .indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", " ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            cursor: inherit;\n            font: ", ";\n        }\n    }\n"])), function (props) { return props.$verticalAlign; }, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "CheckboxElementChecked" })); }, function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "${props => props.color}", name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }))); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) {
+exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    align-items:", ";\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    .indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", " ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            cursor: inherit;\n            font: ", ";\n            b{\n                font-weight: bold;\n                color: var(--dark-opacity-50);\n            }\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    align-items:", ";\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    .indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", " ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            cursor: inherit;\n            font: ", ";\n            b{\n                font-weight: bold;\n                color: var(--dark-opacity-50);\n            }\n        }\n    }\n"])), function (props) { return props.$verticalAlign; }, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "CheckboxElementChecked" })); }, function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "${props => props.color}", name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }))); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "16px";

package/dist/components/Checkbox/props.js

@@ -16,5 +16,6 @@ exports.CheckboxDefault = {
     valid: true,
     labelOffset: "0.5rem",
     color: null,
-    verticalAlign: "center"
+    verticalAlign: "center",
+    required: true
 };

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayStyled = exports.ModalStyled = void 0;
 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: 0.5rem;\n  box-sizing: border-box;\n  max-height: min(calc(100dvh - 50px), 720px);\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: 0.5rem;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    .contentInner{\n      height: 100%;\n      [data-simplebar] {\n        .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n        }\n      }\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"], ["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-height: min(calc(100dvh - 50px), 720px);\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: 0.5rem;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    .contentInner{\n      height: 100%;\n      [data-simplebar] {\n        .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n        }\n      }\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"])), function (props) {
+exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-height: min(calc(100dvh - 50px), 720px);\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: 0.5rem;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    .contentInner{\n      height: 100%;\n      [data-simplebar] {\n        .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n        }\n      }\n    }\n  }\n\n  div.buttons {\n    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)) 1.5rem;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"], ["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-height: min(calc(100dvh - 50px), 720px);\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: 0.5rem;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    .contentInner{\n      height: 100%;\n      [data-simplebar] {\n        .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n        }\n      }\n    }\n  }\n\n  div.buttons {\n    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)) 1.5rem;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"])), function (props) {
     switch (props.$size) {
         case 'xxsmall':
             return "311px";

package/dist/i18n/locales/english.json

@@ -9,5 +9,6 @@
     "copied": "Copied",
     "edit": "Edit",
     "SEARCH": "search",
-    "NO_OPTIONS_FOUND": "Not found"
+    "NO_OPTIONS_FOUND": "Not found",
+    "OPTIONAL": "Optional"
 }

package/dist/i18n/locales/turkish.json

@@ -13,5 +13,6 @@
     "DELETE_CART": "Kartı sil",
     "SEARCH": "Arama yap",
     "NO_OPTIONS_FOUND": "Sonuç bulunamadı",
-    "GO": "Git"
+    "GO": "Git",
+    "OPTIONAL": "Opsiyonel"
 }

package/package.json

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