krl-alfred 1.72.7 → 1.72.8

package/dist/components/InfoBox/InfoBox.js

@@ -41,7 +41,7 @@ var InfoBox = function (props) {
     };
     (0, react_1.useEffect)(function () {
         var _a;
-        (_a = descriptionRef === null || descriptionRef === void 0 ? void 0 : descriptionRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('span').forEach(function (el) {
+        (_a = descriptionRef === null || descriptionRef === void 0 ? void 0 : descriptionRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('p').forEach(function (el) {
             if (el) {
                 el.addEventListener("click", function (e) {
                     setAlertLeft(el.offsetLeft + el.offsetWidth);
@@ -51,7 +51,7 @@ var InfoBox = function (props) {
             }
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { className: "caption-bold-12-15", dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { ref: descriptionRef, className: "caption-medium-12-15", dangerouslySetInnerHTML: { __html: description } }), alert && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, { alertLeft: alertLeft, alertTop: alertTop, className: "caption-medium-10-12", children: "Kopyaland\u0131" }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { className: "caption-bold-12-15", dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { ref: descriptionRef, className: "caption-medium-12-15", dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, { visible: alert, alertLeft: alertLeft, alertTop: alertTop, className: "caption-medium-10-12", children: "Kopyaland\u0131" }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
 };
 InfoBox.defaultProps = {};
 exports.default = InfoBox;

package/dist/components/InfoBox/InfoBox.styled.js

@@ -9,11 +9,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = exports.AlertStyled = exports.Description = exports.Title = exports.TextWrapper = exports.IconWrapper = exports.InfoBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
 exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ", ";\n  background: var(--primary-opacity-10);\n  padding: 1rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ", ";\n  background: var(--primary-opacity-10);\n  padding: 1rem;\n"])), function (props) { return props.radius ? props.radius : "8px"; });
 exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-right: 1rem;\n  svg{\n    display: block;\n    path[stroke]{\n      stroke-width: 1.5;\n    }\n  }\n"], ["\n  display: block;\n  margin-right: 1rem;\n  svg{\n    display: block;\n    path[stroke]{\n      stroke-width: 1.5;\n    }\n  }\n"])));
 exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n"], ["\n  display: block;\n  margin: 0;\n"])));
-exports.Description = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  b{\n    font-weight: 700;\n  }\n  span{\n    font-weight: 700;\n    color: var(--primary);\n    cursor: pointer;\n    display: inline-block;\n    &:nth-last-child(2){\n      margin-right: 0.5rem;\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  b{\n    font-weight: 700;\n  }\n  span{\n    font-weight: 700;\n    color: var(--primary);\n    cursor: pointer;\n    display: inline-block;\n    &:nth-last-child(2){\n      margin-right: 0.5rem;\n    }\n  }\n"])));
-exports.AlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\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  transform: translateX(-100%) translateY(-100%);\n"], ["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\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  transform: translateX(-100%) translateY(-100%);\n"])), function (props) { return props.alertLeft; }, function (props) { return props.alertTop - 5; });
+exports.Description = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  b{\n    font-weight: 700;\n  }\n  p{\n    font-weight: 700;\n    color: var(--dark);\n    cursor: pointer;\n    display: inline-block;\n    margin: 0;\n    position: relative;\n    &:is(.block){\n      display: none;\n      @media only screen and ", " {\n        display: block;\n      }\n    }\n    &:nth-last-child(1){\n      margin-left: 0.5rem;\n      padding-left: 0.5rem;\n      @media only screen and ", " {\n        margin: 0;\n        padding: 0;\n      }\n      &:before{\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        left: 0;\n        height: 9px;\n        width: 1px;\n        background-color: var(--dark);\n        @media only screen and ", " {\n          display: none;\n        }\n      }\n    }\n    span{\n      color: var(--primary);\n    }\n  }\n"], ["\n  display: block;\n  margin: 0;\n  b{\n    font-weight: 700;\n  }\n  p{\n    font-weight: 700;\n    color: var(--dark);\n    cursor: pointer;\n    display: inline-block;\n    margin: 0;\n    position: relative;\n    &:is(.block){\n      display: none;\n      @media only screen and ", " {\n        display: block;\n      }\n    }\n    &:nth-last-child(1){\n      margin-left: 0.5rem;\n      padding-left: 0.5rem;\n      @media only screen and ", " {\n        margin: 0;\n        padding: 0;\n      }\n      &:before{\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        left: 0;\n        height: 9px;\n        width: 1px;\n        background-color: var(--dark);\n        @media only screen and ", " {\n          display: none;\n        }\n      }\n    }\n    span{\n      color: var(--primary);\n    }\n  }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
+exports.AlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\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  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n"], ["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\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  transform: translateX(-100%) translateY(-100%);\n  transition: opacity .4s ease;\n  opacity: ", ";\n"])), function (props) { return props.alertLeft; }, function (props) { return props.alertTop - 5; }, function (props) { return props.visible ? '1' : '0'; });
 exports.Input = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/InfoBox/stories/InfoBox.stories.js

@@ -27,6 +27,6 @@ exports.Default = {
     args: {
         title: "Info text",
         //description:"Body text",
-        description: "İade günün kiralama bitiş günündür, daha erken bir tarihte kargolaman gerekmez. Eğer planlarında bir değişiklik olursa, kiralamanı bitiş tarihinden önce sonlandırmak için <b>info@kiralarsin.com</b>’a e-mail atabilirsin. <br/> <span>Yurtiçi Kargo iade kodun: 567890678</span><span>(Müşteri kodun: 1234556)</span>",
+        description: "İade günün kiralama bitiş günündür, daha erken bir tarihte kargolaman gerekmez. Eğer planlarında bir değişiklik olursa, kiralamanı bitiş tarihinden önce sonlandırmak için <b>info@kiralarsin.com</b>’a e-mail atabilirsin. <br/> <p>Yurtiçi Kargo iade kodun: <span>567890678</span></p><p class='block'></p><p>Müşteri kodun: <span>1234556</span></p>",
     },
 };

package/dist/components/Input/Input.js

@@ -58,7 +58,7 @@ var Input = function (props) {
         setAlert(true);
         inputRef.current.blur();
     };
-    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((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)(TextLink_1.default, __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: [props.mask ? (0, jsx_runtime_1.jsx)(react_input_mask_1.default, __assign({ alwaysShowMask: props.alwaysShowMask, maskChar: props.maskChar, mask: props.mask }, props, { children: function (inputProps) { return (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef }, inputProps, { type: inputType })); } })) : (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType }, other)), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", { onClick: toggleInputType, className: "inputIcon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: inputType === 'password' ? 'Show' : 'Hide' }) }), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", { onClick: copyToClipboard, className: "inputIcon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: 'Copy' }) }), alert && (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, { className: "caption-medium-10-12", children: "Kopyaland\u0131" })] }), (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 })] })] });
+    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((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)(TextLink_1.default, __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: [props.mask ? (0, jsx_runtime_1.jsx)(react_input_mask_1.default, __assign({ alwaysShowMask: props.alwaysShowMask, maskChar: props.maskChar, mask: props.mask }, props, { children: function (inputProps) { return (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef }, inputProps, { type: inputType })); } })) : (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType }, other)), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", { onClick: toggleInputType, className: "inputIcon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: inputType === 'password' ? 'Show' : 'Hide' }) }), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", { onClick: copyToClipboard, className: "inputIcon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: 'Copy' }) }), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, { visible: alert, className: "caption-medium-10-12", children: "Kopyaland\u0131" })] }), (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,

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

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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.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  transition: opacity .4s ease;\n  opacity: ", ";\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  transition: opacity .4s ease;\n  opacity: ", ";\n"])), function (props) { return props.visible ? '1' : '0'; });
 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  &: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.disabled ? 'var(--dark-opacity-5)' : (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/package.json

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