krl-alfred 1.14.0 → 1.16.0

package/dist/components/CircleProgress/CircleProgress.js

@@ -0,0 +1,29 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var CircleProgress_styled_1 = require("./CircleProgress.styled");
+var react_circular_progressbar_1 = require("react-circular-progressbar");
+require("react-circular-progressbar/dist/styles.css");
+var CircleProgress = function (props) {
+    var _a, _b;
+    return (0, jsx_runtime_1.jsxs)(CircleProgress_styled_1.CircleProgressStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(react_circular_progressbar_1.CircularProgressbarWithChildren, { styles: (0, react_circular_progressbar_1.buildStyles)({
+                        pathColor: "var(--primary)",
+                        trailColor: "var(--dark-opacity-5)"
+                    }), strokeWidth: 12, value: props.activeStep / props.steps.length * 100, children: (0, jsx_runtime_1.jsxs)("div", { className: "text body-bold-14-17", children: [(0, jsx_runtime_1.jsxs)("span", { className: "title-bold-16-19", children: [props.activeStep, "/"] }), props.steps.length] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "info", children: [(0, jsx_runtime_1.jsx)("h1", { className: "title-bold-16-19", children: (_a = props.steps.find(function (p) { return p.index === props.activeStep; })) === null || _a === void 0 ? void 0 : _a.text }), (0, jsx_runtime_1.jsx)("p", { className: "body-regular-13-16", children: props.activeStep === props.steps.length ? 'Bütün adımları tamamladınız' : "Sonraki Ad\u0131m: ".concat((_b = props.steps.find(function (p) { return p.index === props.activeStep + 1; })) === null || _b === void 0 ? void 0 : _b.text) })] })] }));
+};
+CircleProgress.defaultProps = {
+    steps: [],
+    activeStep: 1
+};
+exports.default = CircleProgress;

package/dist/components/CircleProgress/CircleProgress.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.CircleProgressStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.CircleProgressStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 343px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--font-family-sans-serif);\n  div.icon {\n    width: 56px;\n    height: 56px;\n  }\n\n  div.info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    \n    h1 {\n      color: var(--dark);\n      margin: 0 0 4px;\n    }\n    p {\n      color: var(--dark-opacity-50);\n      margin: 0;\n    }\n  }\n  \n  div.text {\n    color: var(--dark);\n    \n  }\n"], ["\n  width: 343px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--font-family-sans-serif);\n  div.icon {\n    width: 56px;\n    height: 56px;\n  }\n\n  div.info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    \n    h1 {\n      color: var(--dark);\n      margin: 0 0 4px;\n    }\n    p {\n      color: var(--dark-opacity-50);\n      margin: 0;\n    }\n  }\n  \n  div.text {\n    color: var(--dark);\n    \n  }\n"])));
+var templateObject_1;

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

package/dist/components/CircleProgress/props.js

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

package/dist/components/CircleProgress/stories/CircleProgress.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 CircleProgress_1 = __importDefault(require("../CircleProgress"));
+exports.default = {
+    title: 'Components/CircleProgress',
+    component: CircleProgress_1.default,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        steps: [{ index: 1, text: "Step 1" }, { index: 2, text: "Step 2" }, { index: 3, text: "Step 3" }],
+        activeStep: 1
+    },
+};

package/dist/components/Icon/CheckMark.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 SvgCheckMark = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 17, height: 14, viewBox: "0 0 17 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6.98847 8.08784C6.57099 8.54447 5.85167 8.54447 5.43418 8.08784L4.21825 6.75792C3.47877 5.94911 2.20466 5.94911 1.46518 6.75792C0.813691 7.47048 0.81369 8.56245 1.46518 9.27501L4.65703 12.7661C5.492 13.6794 6.93065 13.6794 7.76562 12.7661L16.0119 3.74675C16.6634 3.03418 16.6634 1.94222 16.0119 1.22965C15.2724 0.420845 13.9983 0.420845 13.2588 1.22965L6.98847 8.08784Z", fill: "white" }) }))); };
+exports.default = SvgCheckMark;

package/dist/components/Icon/ErrorIcon.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 SvgErrorIcon = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("rect", { width: 16, height: 16, rx: 8, fill: "white" }), (0, jsx_runtime_1.jsx)("circle", { cx: 8, cy: 8, r: 8, fill: "#FF1F1F" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.99844 4.69844C6.17615 4.69844 4.69844 6.17615 4.69844 7.99844C4.69844 9.82072 6.17615 11.2984 7.99844 11.2984C9.8211 11.2984 11.2984 9.82075 11.2984 7.99844C11.2984 6.17612 9.8211 4.69844 7.99844 4.69844ZM3.89844 7.99844C3.89844 5.73432 5.73432 3.89844 7.99844 3.89844C10.263 3.89844 12.0984 5.73435 12.0984 7.99844C12.0984 10.2625 10.263 12.0984 7.99844 12.0984C5.73432 12.0984 3.89844 10.2626 3.89844 7.99844Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.9957 6.08008C8.21662 6.08008 8.3957 6.25916 8.3957 6.48008V8.24768C8.3957 8.46859 8.21662 8.64768 7.9957 8.64768C7.77479 8.64768 7.5957 8.46859 7.5957 8.24768V6.48008C7.5957 6.25916 7.77479 6.08008 7.9957 6.08008Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.5957 9.51719C7.5957 9.29627 7.77479 9.11719 7.9957 9.11719H7.9997C8.22062 9.11719 8.3997 9.29627 8.3997 9.51719C8.3997 9.7381 8.22062 9.91719 7.9997 9.91719H7.9957C7.77479 9.91719 7.5957 9.7381 7.5957 9.51719Z", fill: "white" })] }))); };
+exports.default = SvgErrorIcon;

package/dist/components/Icon/index.js

@@ -25,7 +25,7 @@ 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.Discovery = exports.Danger = exports.CloseHover = exports.Close = 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.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; } });
@@ -59,6 +59,8 @@ var CheckboxElementInvalid_1 = __importDefault(require("./CheckboxElementInvalid
 Object.defineProperty(exports, "CheckboxElementInvalid", { enumerable: true, get: function () { return CheckboxElementInvalid_1.default; } });
 var CheckboxElementUncheck_1 = __importDefault(require("./CheckboxElementUncheck"));
 Object.defineProperty(exports, "CheckboxElementUncheck", { enumerable: true, get: function () { return CheckboxElementUncheck_1.default; } });
+var CheckMark_1 = __importDefault(require("./CheckMark"));
+Object.defineProperty(exports, "CheckMark", { enumerable: true, get: function () { return CheckMark_1.default; } });
 var Close_1 = __importDefault(require("./Close"));
 Object.defineProperty(exports, "Close", { enumerable: true, get: function () { return Close_1.default; } });
 var CloseHover_1 = __importDefault(require("./CloseHover"));
@@ -67,6 +69,8 @@ var Danger_1 = __importDefault(require("./Danger"));
 Object.defineProperty(exports, "Danger", { enumerable: true, get: function () { return Danger_1.default; } });
 var Discovery_1 = __importDefault(require("./Discovery"));
 Object.defineProperty(exports, "Discovery", { enumerable: true, get: function () { return Discovery_1.default; } });
+var ErrorIcon_1 = __importDefault(require("./ErrorIcon"));
+Object.defineProperty(exports, "ErrorIcon", { enumerable: true, get: function () { return ErrorIcon_1.default; } });
 var Game_1 = __importDefault(require("./Game"));
 Object.defineProperty(exports, "Game", { enumerable: true, get: function () { return Game_1.default; } });
 var Heart_1 = __importDefault(require("./Heart"));
@@ -152,6 +156,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return ((0, jsx_runtime_1.jsx)(CheckboxElementUncheck_1.default, __assign({}, props)));
     },
+    CheckMark: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(CheckMark_1.default, __assign({}, props));
+    },
     Close: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Close_1.default, __assign({}, props));
@@ -168,6 +176,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Discovery_1.default, __assign({}, props));
     },
+    ErrorIcon: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(ErrorIcon_1.default, __assign({}, props));
+    },
     Game: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Game_1.default, __assign({}, props));

package/dist/components/Input/Input.js

@@ -0,0 +1,51 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Input_styled_1 = require("./Input.styled");
+var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Input = function (props) {
+    var _a;
+    var type = props.type, other = __rest(props, ["type"]);
+    var _b = (0, react_1.useState)(type), inputType = _b[0], setInputType = _b[1];
+    (0, react_1.useEffect)(function () {
+        setInputType(type);
+    }, [type]);
+    var toggleInputType = function () {
+        var newType = inputType === 'password' ? 'text' : 'password';
+        setInputType(newType);
+    };
+    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("top caption-bold-12-15", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)), children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)("a", __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick, children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "input", children: [(0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ type: inputType }, other)), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", { onClick: toggleInputType, className: "showHide", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: inputType === 'password' ? 'Show' : 'Hide' }) })] }), (props === null || props === void 0 ? void 0 : props.hasError) && (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 })] })] });
+};
+Input.defaultValues = {
+    hasError: false,
+    label: "Label",
+    type: "text"
+};
+exports.default = Input;

package/dist/components/Input/Input.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.InputStyled = exports.Container = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 370px;\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    }\n  }\n\n  .input {\n    position: relative;\n\n    .showHide {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\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: 370px;\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    }\n  }\n\n  .input {\n    position: relative;\n\n    .showHide {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\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"])));
+exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 370px;\n  height: 56px;\n  background: var(--dark-opacity-3);\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\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: 370px;\n  height: 56px;\n  background: var(--dark-opacity-3);\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\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"])), 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;

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

package/dist/components/Input/props.js

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

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

@@ -0,0 +1,25 @@
+"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 Input_1 = __importDefault(require("../Input"));
+exports.default = {
+    title: 'Components/Input',
+    component: Input_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        hasError: { control: 'boolean' },
+        onCustomLinkClick: { action: 'clicked' },
+        type: { control: 'select', options: ["text", "number", "password"] },
+    }
+};
+exports.Default = {
+    args: {
+        placeholder: "Placeholder",
+        hasError: false,
+        label: "Label",
+        type: "text"
+    },
+};

package/dist/components/OtpInput/Otp.js

@@ -0,0 +1,29 @@
+"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 OtpInput_styled_1 = require("./OtpInput.styled");
+var react_otp_input_1 = __importDefault(require("react-otp-input"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Otp = function (props) {
+    return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(react_otp_input_1.default, { value: props.value, onChange: props.onInputChange, numInputs: props.inputSize, shouldAutoFocus: props.autoFocus, renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props)); } }), (props === null || props === void 0 ? void 0 : props.hasError) && (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 })] })] }));
+};
+Otp.defaultProps = {
+    inputSize: 4,
+    hasError: false,
+    autoFocus: true
+};
+exports.default = Otp;

package/dist/components/OtpInput/OtpInput.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.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: 700;\n    font-size: 16px;\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: 700;\n    font-size: 16px;\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)'; });
+var templateObject_1;

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

package/dist/components/OtpInput/props.js

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

package/dist/components/OtpInput/stories/OtpInput.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var Otp_1 = __importDefault(require("../Otp"));
+exports.default = {
+    title: 'Components/OtpInput',
+    component: Otp_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        onInputChange: { action: 'changed' },
+    }
+};
+exports.Default = {
+    args: {
+        value: "1234",
+        autoFocus: true
+    },
+};

package/dist/components/ProductCard/ProductCard.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ProductCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 634px;\n  ", "\n  .ProductCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    .ProductCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n    }\n    .ProductCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 8px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .ProductCardTitle{\n      min-height: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n    }\n  }\n"], ["\n  display: block;\n  max-width: 634px;\n  ", "\n  .ProductCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    .ProductCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n    }\n    .ProductCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 8px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .ProductCardTitle{\n      min-height: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n    }\n  }\n"])), function (props) { return props.disabled ? "\n  user-select:none;\n  pointer-events:none;\n  " : ""; }, devices_1.devices.sm);
+exports.ProductCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 634px;\n  ", "\n  .ProductCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    .ProductCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      .indicator{ \n        margin-right: 24px;\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .ProductCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 8px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .ProductCardTitle{\n      min-height: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n    }\n  }\n"], ["\n  display: block;\n  max-width: 634px;\n  ", "\n  .ProductCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    .ProductCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      .indicator{ \n        margin-right: 24px;\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .ProductCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 8px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .ProductCardTitle{\n      min-height: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n    }\n  }\n"])), function (props) { return props.disabled ? "\n  user-select:none;\n  pointer-events:none;\n  " : ""; }, devices_1.devices.sm, devices_1.devices.sm);
 var templateObject_1;

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,36 @@
+"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 Stepper_styled_1 = require("./Stepper.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var classnames_1 = __importDefault(require("classnames"));
+var Stepper = function (props) {
+    return (0, jsx_runtime_1.jsx)(Stepper_styled_1.StepperStyled, __assign({}, props, { children: props.steps && props.steps.map(function (step) {
+            var _a, _b, _c, _d;
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("circle headline-extra-bold-24-29", (_a = {}, _a["active"] = props.activeStep >= step.index || props.allStepsCompleted, _a), (_b = {}, _b["onlyIcon"] = props.onlyIcons, _b)), children: props.activeStep > step.index || props.allStepsCompleted ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckMark" }) : step.index }), (props.size === "small" ? (props.activeStep === step.index) : true) && !props.onlyIcons && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("text headline-semi-bold-24-29", (_c = {}, _c["active"] = props.activeStep >= step.index || props.allStepsCompleted, _c)), children: step.text }), props.steps.length > step.index && !props.onlyIcons &&
+                        (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("divider", (_d = {}, _d["active"] = props.activeStep > step.index || props.allStepsCompleted, _d)) })] });
+        }) }));
+};
+Stepper.defaultProps = {
+    steps: [],
+    textOnlyActiveStep: false,
+    size: "normal",
+    onlyIcons: false,
+    activeStep: 1,
+    allStepsCompleted: false
+};
+exports.default = Stepper;

package/dist/components/Stepper/Stepper.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.StepperStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.StepperStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-family: var(--font-family-sans-serif);\n\n  div.circle {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--grey-10);\n    color: var(--grey-40);\n\n    &.active {\n      background: var(--primary);\n      color: white;\n    }\n    \n    &.onlyIcon:not(:last-child) {\n      margin-right: ", ";\n    }\n\n  }\n\n  div.text {\n    color: var(--grey-30);\n    margin-left: ", ";\n\n    &.active {\n      color: var(--dark);\n    }\n  }\n\n  div.divider {\n    width: ", ";\n    height: 1px;\n    background: var(--grey-10);\n    margin: ", ";\n\n    &.active {\n      background: var(--primary);\n    }\n  }\n\n"], ["\n  display: flex;\n  align-items: center;\n  font-family: var(--font-family-sans-serif);\n\n  div.circle {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--grey-10);\n    color: var(--grey-40);\n\n    &.active {\n      background: var(--primary);\n      color: white;\n    }\n    \n    &.onlyIcon:not(:last-child) {\n      margin-right: ", ";\n    }\n\n  }\n\n  div.text {\n    color: var(--grey-30);\n    margin-left: ", ";\n\n    &.active {\n      color: var(--dark);\n    }\n  }\n\n  div.divider {\n    width: ", ";\n    height: 1px;\n    background: var(--grey-10);\n    margin: ", ";\n\n    &.active {\n      background: var(--primary);\n    }\n  }\n\n"])), function (props) { return props.size === 'normal' ? '48px' : '40px'; }, function (props) { return props.size === 'normal' ? '48px' : '40px'; }, function (props) { return props.size === 'normal' ? '17px' : '25px'; }, function (props) { return props.size === 'normal' ? '16px' : '8px'; }, function (props) { return props.size === 'normal' ? '112px' : '16px'; }, function (props) { return props.size === 'normal' ? '0 24px' : '0 22px'; });
+var templateObject_1;

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

package/dist/components/Stepper/props.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sizes = void 0;
+exports.sizes = ['normal', 'small'];

package/dist/components/Stepper/stories/Stepper.stories.js

@@ -0,0 +1,23 @@
+"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 Stepper_1 = __importDefault(require("../Stepper"));
+var props_1 = require("../props");
+exports.default = {
+    title: 'Components/Stepper',
+    component: Stepper_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        size: { control: 'select', options: props_1.sizes },
+        allStepsCompleted: { control: 'boolean' }
+    }
+};
+exports.Default = {
+    args: {
+        steps: [{ index: 1, text: "Step 1" }, { index: 2, text: "Step 2" }, { index: 3, text: "Step 3" }],
+        activeStep: 1
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "files": [
     "dist"
   ],
@@ -25,8 +25,10 @@
     "css-loader": "^6.7.3",
     "plop": "^3.1.2",
     "react": "^18.2.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-otp-input": "^3.0.2",
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
     "sass": "^1.60.0",