krl-alfred 1.38.0 → 1.40.0

package/dist/components/Agreement/Agreement.js

@@ -0,0 +1,42 @@
+"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 Agreement_styled_1 = require("./Agreement.styled");
+var Checkbox_1 = __importDefault(require("../Checkbox"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Spinner_1 = __importDefault(require("../Spinner"));
+var Agreement = 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]);
+    var onCheckBoxChange = function (event) {
+        if (!expanded && event.target.checked)
+            setExpanded(true);
+        props.onChange(event);
+    };
+    var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
+    return (0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "agreement", children: [(0, jsx_runtime_1.jsxs)("div", { className: "top", children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: props.title, name: props.name, valid: !props.hasError, size: "medium", checked: props.checked, disabled: props.disabled, onChange: onCheckBoxChange, value: props.value }), (0, jsx_runtime_1.jsx)("div", { className: "icon", onClick: toggleExpand, children: expanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowUp" }) :
+                                    (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowDown" }) })] }), expanded && (0, jsx_runtime_1.jsx)("div", { className: "content body-regular-14-17", children: props.content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: props.content } }) :
+                            (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "24px", height: "24px" }) })] }), props.hasError && props.errorMessage && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), " ", (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] }));
+};
+Agreement.defaultProps = {
+    title: "Title",
+    expanded: false
+};
+exports.default = Agreement;

package/dist/components/Agreement/Agreement.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.AgreementStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 8px;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n\n"])), function (props) { return props.hasError ? "15px" : "16px"; }, function (props) { return props.hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.hasError ? ' var(--red)' : ' var(--dark)'; });
+var templateObject_1;

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

package/dist/components/Agreement/props.js

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

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

@@ -0,0 +1,19 @@
+"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 Agreement_1 = __importDefault(require("../Agreement"));
+exports.default = {
+    title: 'Components/Agreement',
+    component: Agreement_1.default,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        onChange: function (e) { return console.log("event", e); },
+        onExpanded: function (props) { return console.log("expanded", props); },
+    },
+};

package/dist/components/Icon/AgreementArrowDown.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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgAgreementArrowDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "arrow/small down", children: (0, jsx_runtime_1.jsx)("g", { id: "small-right", children: (0, jsx_runtime_1.jsx)("path", { id: "Path", d: "M16 10L12 14L8 10", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }))); };
+exports.default = SvgAgreementArrowDown;

package/dist/components/Icon/AgreementArrowUp.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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgAgreementArrowUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "arrow/small up", children: (0, jsx_runtime_1.jsx)("g", { id: "small-right", children: (0, jsx_runtime_1.jsx)("path", { id: "Path", d: "M8 14L12 10L16 14", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }))); };
+exports.default = SvgAgreementArrowUp;

package/dist/components/Icon/index.js

@@ -25,10 +25,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconList = exports.Watch = exports.SwitchPassive = exports.Show = exports.Laptop = exports.KeyboardClose = exports.InfoSquare = exports.House = exports.Hide = exports.Heart = exports.Game = exports.ErrorIcon = exports.Discovery = exports.Danger = exports.CloseHover = exports.Close = exports.CheckMark = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Campaign = exports.Call = exports.Baby = exports.ArrowSmallUp = exports.ArrowSmallRight = exports.ArrowSmallDown = exports.ArrowRight = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeft = exports.ArrowDown = exports.Again = void 0;
+exports.iconList = exports.Watch = exports.SwitchPassive = exports.Show = exports.Laptop = exports.KeyboardClose = exports.InfoSquare = exports.House = exports.Hide = exports.Heart = exports.Game = exports.ErrorIcon = exports.Discovery = exports.Danger = exports.CloseHover = exports.Close = exports.CheckMark = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Campaign = exports.Call = exports.Baby = exports.ArrowSmallUp = exports.ArrowSmallRight = exports.ArrowSmallDown = exports.ArrowRight = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeft = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Again_1 = __importDefault(require("./Again"));
 Object.defineProperty(exports, "Again", { enumerable: true, get: function () { return Again_1.default; } });
+var AgreementArrowDown_1 = __importDefault(require("./AgreementArrowDown"));
+Object.defineProperty(exports, "AgreementArrowDown", { enumerable: true, get: function () { return AgreementArrowDown_1.default; } });
+var AgreementArrowUp_1 = __importDefault(require("./AgreementArrowUp"));
+Object.defineProperty(exports, "AgreementArrowUp", { enumerable: true, get: function () { return AgreementArrowUp_1.default; } });
 var ArrowDown_1 = __importDefault(require("./ArrowDown"));
 Object.defineProperty(exports, "ArrowDown", { enumerable: true, get: function () { return ArrowDown_1.default; } });
 var ArrowLeft_1 = __importDefault(require("./ArrowLeft"));
@@ -96,6 +100,14 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Again_1.default, __assign({}, props));
     },
+    AgreementArrowDown: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(AgreementArrowDown_1.default, __assign({}, props));
+    },
+    AgreementArrowUp: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(AgreementArrowUp_1.default, __assign({}, props));
+    },
     ArrowDown: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(ArrowDown_1.default, __assign({}, props));

package/dist/components/OtpInput/OtpInput.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OtpInputStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.OtpInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  input {\n    font-family: var(--font-family-sans-serif);\n    border: none;\n    width: 48px !important;\n    height: 48px;\n    border-bottom: 2px solid ", ";\n    text-align: center;\n    color: ", ";\n    font-weight: 600;\n    font-size: 40px;\n    line-height: 19px;\n\n    &:not(:last-child) {\n      margin-right: 18.33px;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  input {\n    font-family: var(--font-family-sans-serif);\n    border: none;\n    width: 48px !important;\n    height: 48px;\n    border-bottom: 2px solid ", ";\n    text-align: center;\n    color: ", ";\n    font-weight: 600;\n    font-size: 40px;\n    line-height: 19px;\n\n    &:not(:last-child) {\n      margin-right: 18.33px;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
+exports.OtpInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  input {\n    font-family: var(--font-family-sans-serif);\n    border: none;\n    width: 48px !important;\n    height: 48px;\n    border-bottom: 2px solid ", ";\n    text-align: center;\n    color: ", ";\n    font-weight: 600;\n    font-size: 40px;\n    line-height: 19px;\n    -moz-appearance: textfield;\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    &:not(:last-child) {\n      margin-right: 18.33px;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  input {\n    font-family: var(--font-family-sans-serif);\n    border: none;\n    width: 48px !important;\n    height: 48px;\n    border-bottom: 2px solid ", ";\n    text-align: center;\n    color: ", ";\n    font-weight: 600;\n    font-size: 40px;\n    line-height: 19px;\n    -moz-appearance: textfield;\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    &:not(:last-child) {\n      margin-right: 18.33px;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
 var templateObject_1;

package/package.json

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