krl-alfred 2.23.5 → 2.23.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/components/Checkbox/Checkbox.styled.js +8 -4
  2. package/dist/components/DescriptionCard/DescriptionCard.d.ts +1 -1
  3. package/dist/components/DescriptionCard/DescriptionCard.js +6 -4
  4. package/dist/components/DescriptionCard/DescriptionCard.styled.js +4 -4
  5. package/dist/components/DescriptionCard/props.d.ts +5 -0
  6. package/dist/components/DescriptionCard/props.js +3 -1
  7. package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +6 -1
  8. package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +5 -0
  9. package/dist/components/Icon/iconList/Closemini.js +1 -1
  10. package/dist/components/RichTextEditor/RichTextEditor.js +5 -2
  11. package/dist/components/RichTextEditor/RichTextEditor.styled.js +3 -3
  12. package/dist/components/RichTextEditor/utils/sanitize.js +2 -1
  13. package/dist/components/TagInput/TagInput.js +2 -3
  14. package/dist/components/TagInput/TagInput.styled.d.ts +0 -5
  15. package/dist/components/TagInput/TagInput.styled.js +5 -6
  16. package/package.json +2 -2
package/dist/components/Checkbox/Checkbox.styled.js CHANGED
@@ -47,9 +47,13 @@ var getUncheckedBackground = function (props) {
47
47
  var getCheckedBackground = function (props) {
48
48
  return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color, name: "CheckboxElementChecked" }));
49
49
  };
50
- exports.CheckboxWrapper = 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"], ["\n flex: 1;\n position: relative;\n align-items: ", ";\n justify-content: flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n"])), function (props) { return props.$verticalAlign; });
51
- exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n flex-shrink: 0;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n cursor: ", ";\n"], ["\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n flex-shrink: 0;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n cursor: ", ";\n"])), function (props) { return getUncheckedBackground(props); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return props.disabled ? 'not-allowed' : 'pointer'; });
52
- exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked + ", " {\n background-image: url('", "');\n }\n"], ["\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked + ", " {\n background-image: url('", "');\n }\n"])), exports.CheckboxIndicator, function (props) { return getCheckedBackground(props); });
53
- exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n\n * {\n ", ";\n }\n"], ["\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n\n * {\n ", ";\n }\n"])), function (props) { return props.disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return !props.$valid && 'color: var(--red)'; });
50
+ exports.CheckboxWrapper = 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 cursor: ", ";\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 cursor: ", ";\n"])), function (props) { return props.$verticalAlign; }, function (props) { return props.disabled ? 'default' : 'pointer'; });
51
+ exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n flex-shrink: 0;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n cursor: ", ";\n"], ["\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n flex-shrink: 0;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n cursor: ", ";\n"])), function (props) { return getUncheckedBackground(props); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return props.disabled ? 'default' : 'pointer'; });
52
+ exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked:not(:disabled) + ", " {\n background-image: url('", "');\n }\n"], ["\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked:not(:disabled) + ", " {\n background-image: url('", "');\n }\n"])), exports.CheckboxIndicator, function (props) { return getCheckedBackground(props); });
53
+ exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n\n * {\n ", ";\n }\n"], ["\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n\n * {\n ", ";\n }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, function (props) {
54
+ if (props.disabled)
55
+ return 'var(--dark-opacity-25)';
56
+ return props.$valid ? 'var(--dark)' : 'var(--red)';
57
+ }, function (props) { return !props.disabled && !props.$valid && 'color: var(--red)'; });
54
58
  exports.CheckboxLabel = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin: 0;\n cursor: inherit;\n font: ", ";\n\n b {\n font-weight: bold;\n color: var(--dark-opacity-50);\n }\n"], ["\n display: block;\n margin: 0;\n cursor: inherit;\n font: ", ";\n\n b {\n font-weight: bold;\n color: var(--dark-opacity-50);\n }\n"])), function (props) { return getLabelFont(props.$textSize); });
55
59
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/components/DescriptionCard/DescriptionCard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { DescriptionCardProps } from "./props";
3
- declare const DescriptionCard: ({ title, titleSize, headerSize, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
3
+ declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
4
4
  export default DescriptionCard;
package/dist/components/DescriptionCard/DescriptionCard.js CHANGED
@@ -32,15 +32,17 @@ var SubcategoryRow = function (_a) {
32
32
  return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
33
33
  };
34
34
  var DescriptionCard = function (_a) {
35
- var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerDescription, headerDescription = _e === void 0 ? props_1.DescriptionCardDefault.headerDescription : _e, _f = _a.headerButtonText, headerButtonText = _f === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _f, _g = _a.hasHeaderDropdown, hasHeaderDropdown = _g === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _g, _h = _a.hasHeaderBackButton, hasHeaderBackButton = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _h, _j = _a.list, list = _j === void 0 ? props_1.DescriptionCardDefault.list : _j, _k = _a.hasBadge, hasBadge = _k === void 0 ? props_1.DescriptionCardDefault.hasBadge : _k, _l = _a.badgeText, badgeText = _l === void 0 ? props_1.DescriptionCardDefault.badgeText : _l, _m = _a.hasHeader, hasHeader = _m === void 0 ? props_1.DescriptionCardDefault.hasHeader : _m, _o = _a.hasHeaderBackground, hasHeaderBackground = _o === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _o, _p = _a.hasHeaderBorder, hasHeaderBorder = _p === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _p, _q = _a.hasRounded, hasRounded = _q === void 0 ? props_1.DescriptionCardDefault.hasRounded : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasBorder : _r, _s = _a.headerImage, headerImage = _s === void 0 ? props_1.DescriptionCardDefault.headerImage : _s, _t = _a.headerRightContent, headerRightContent = _t === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _t, _u = _a.dropdownList, dropdownList = _u === void 0 ? props_1.DescriptionCardDefault.dropdownList : _u, _v = _a.dropdownWidth, dropdownWidth = _v === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _v, _w = _a.accordionList, accordionList = _w === void 0 ? props_1.DescriptionCardDefault.accordionList : _w, _x = _a.boxSize, boxSize = _x === void 0 ? props_1.DescriptionCardDefault.boxSize : _x, _y = _a.hasHeaderButton, hasHeaderButton = _y === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _y, _z = _a.headerButtonWidth, headerButtonWidth = _z === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _z, _0 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _0 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _0, _1 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _1 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _1, _2 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _2, _3 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _3, _4 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _4, _5 = _a.content, content = _5 === void 0 ? props_1.DescriptionCardDefault.content : _5, _6 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _6 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _6, _7 = _a.middleTitle, middleTitle = _7 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _7, _8 = _a.subcategoryList, subcategoryList = _8 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _8, _9 = _a.hasCategoryLayout, hasCategoryLayout = _9 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _9, _10 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _10 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _10, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _11 = _a.customColumnSpan, customColumnSpan = _11 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _11;
35
+ var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasHeader, hasHeader = _o === void 0 ? props_1.DescriptionCardDefault.hasHeader : _o, _p = _a.hasHeaderBackground, hasHeaderBackground = _p === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _p, _q = _a.hasHeaderBorder, hasHeaderBorder = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _q, _r = _a.hasRounded, hasRounded = _r === void 0 ? props_1.DescriptionCardDefault.hasRounded : _r, _s = _a.hasBorder, hasBorder = _s === void 0 ? props_1.DescriptionCardDefault.hasBorder : _s, _t = _a.headerImage, headerImage = _t === void 0 ? props_1.DescriptionCardDefault.headerImage : _t, _u = _a.headerRightContent, headerRightContent = _u === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _u, _v = _a.dropdownList, dropdownList = _v === void 0 ? props_1.DescriptionCardDefault.dropdownList : _v, _w = _a.dropdownWidth, dropdownWidth = _w === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _w, _x = _a.accordionList, accordionList = _x === void 0 ? props_1.DescriptionCardDefault.accordionList : _x, _y = _a.boxSize, boxSize = _y === void 0 ? props_1.DescriptionCardDefault.boxSize : _y, _z = _a.hasHeaderButton, hasHeaderButton = _z === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _z, _0 = _a.headerButtonWidth, headerButtonWidth = _0 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _0, _1 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _1 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _1, _2 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _2, _3 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _3, _4 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _4, _5 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _5, _6 = _a.content, content = _6 === void 0 ? props_1.DescriptionCardDefault.content : _6, _7 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _7 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _7, _8 = _a.middleTitle, middleTitle = _8 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _8, _9 = _a.subcategoryList, subcategoryList = _9 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _9, _10 = _a.hasCategoryLayout, hasCategoryLayout = _10 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _10, _11 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _11 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _11, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _12 = _a.customColumnSpan, customColumnSpan = _12 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _12;
36
36
  var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
37
37
  var HeaderDropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
38
38
  var hasHeaderRightContent = !!headerRightContent;
39
- var isHeaderClickable = !!onHeaderClick;
40
- return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryLayout, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder, "$hasHeaderDescription": Boolean(headerDescription), "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
39
+ var isHeaderClickable = !!onHeaderClick && !hasHeaderBackButton;
40
+ var handleBackTitleClick = onHeaderClick !== null && onHeaderClick !== void 0 ? onHeaderClick : (onHeaderBack ? function () { onHeaderBack(); } : undefined);
41
+ var isBackTitleClickable = hasHeaderBackButton && !!handleBackTitleClick;
42
+ return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryLayout, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder, "$hasHeaderDescription": Boolean(headerDescription), "$headerSize": headerSize, "$headerAlignItems": headerAlignItems }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
41
43
  e.stopPropagation();
42
44
  onHeaderBack === null || onHeaderBack === void 0 ? void 0 : onHeaderBack();
43
- }, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(HeaderDropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, __assign({ "$hasNoContentSidePadding": hasNoContentSidePadding }, { children: content })), (hasCategoryLayout || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) }))) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize, "$hasHeader": hasHeader, "$hasAccordion": (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 }, { children: list.map(function (listItem, key) {
45
+ }, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize, "$isClickable": isBackTitleClickable, onClick: isBackTitleClickable ? handleBackTitleClick : undefined }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(HeaderDropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, __assign({ "$hasNoContentSidePadding": hasNoContentSidePadding }, { children: content })), (hasCategoryLayout || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) }))) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize, "$hasHeader": hasHeader, "$hasAccordion": (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 }, { children: list.map(function (listItem, key) {
44
46
  var _a;
45
47
  var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
46
48
  return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.ListItemStyled, __assign({ "$columnSpan": span }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayTitleStyled, { children: listItem.title }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayValueStyled, { children: listItem.display || "-" })] }), key));
package/dist/components/DescriptionCard/DescriptionCard.styled.js CHANGED
@@ -14,7 +14,7 @@ exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_
14
14
  exports.DropdownWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"])));
15
15
  exports.CategoryDropdownWrapper = (0, styled_components_1.default)(exports.DropdownWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"], ["\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"])));
16
16
  exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n position: relative;\n border-radius: ", ";\n padding: 0;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: ", ";\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n z-index: 2;\n }\n"], ["\n display: block;\n position: relative;\n border-radius: ", ";\n padding: 0;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: ", ";\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n z-index: 2;\n }\n"])), function (props) { return props.$hasRounded ? "0.5rem" : "0"; }, function (props) { return props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
17
- exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n ", "\n"], ["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n ", "\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
17
+ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: ", ";\n gap: 1.5rem;\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n ", "\n"], ["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: ", ";\n gap: 1.5rem;\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n ", "\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
18
18
  var hasImage = Boolean(props.$headerImage);
19
19
  var reduceBottomPadding = props.$hasHeaderDescription && props.$hasHeaderBorder;
20
20
  if (props.$hasHeaderBackground) {
@@ -35,7 +35,7 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
35
35
  if (props.$hasMiddleTitle)
36
36
  return '1fr 1fr auto';
37
37
  return '1fr auto';
38
- }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$hasCategoryLayout && "\n &:hover ".concat(exports.CategoryDropdownWrapper, ",\n ").concat(exports.CategoryDropdownWrapper, ":hover,\n ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n opacity: 1;\n visibility: visible;\n }\n "); });
38
+ }, function (props) { return props.$headerAlignItems || 'center'; }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$hasCategoryLayout && "\n &:hover ".concat(exports.CategoryDropdownWrapper, ",\n ").concat(exports.CategoryDropdownWrapper, ":hover,\n ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n opacity: 1;\n visibility: visible;\n }\n "); });
39
39
  exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n"])));
40
40
  exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin: 0 1rem 0 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n color: var(--primary);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin: 0 1rem 0 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n color: var(--primary);\n"])));
41
41
  exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"])), function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; });
@@ -44,9 +44,9 @@ exports.HeaderRightContentStyled = styled_components_1.default.div(templateObjec
44
44
  exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n cursor: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
45
45
  exports.HeaderTitleTopStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\n min-width: 0;\n"])));
46
46
  exports.HeaderTitleDescriptionStyled = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n margin: 1rem 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark);\n"], ["\n margin: 1rem 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark);\n"])));
47
- exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font: ", ";\n display: block;\n"], ["\n font: ", ";\n display: block;\n"])), function (props) { return props.$titleSize === 'lg'
47
+ exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font: ", ";\n display: inline-block;\n cursor: ", ";\n"], ["\n font: ", ";\n display: inline-block;\n cursor: ", ";\n"])), function (props) { return props.$titleSize === 'lg'
48
48
  ? 'var(--headline-semi-bold-20-24)'
49
- : 'var(--headline-semi-bold-18-22)'; });
49
+ : 'var(--headline-semi-bold-18-22)'; }, function (props) { return props.$isClickable ? 'pointer' : 'inherit'; });
50
50
  exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"], ["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"])));
51
51
  exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: block;\n margin-left: 1.5rem;\n"], ["\n display: block;\n margin-left: 1.5rem;\n"])));
52
52
  exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: block;\n padding: ", ";\n"], ["\n display: block;\n padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '0' : '0 1.5rem'; });
package/dist/components/DescriptionCard/props.d.ts CHANGED
@@ -7,10 +7,14 @@ export declare const titleSizes: readonly ["md", "lg"];
7
7
  type TITLE_SIZE = typeof titleSizes[number];
8
8
  export declare const headerSizes: readonly ["small", "medium"];
9
9
  type HEADER_SIZE = typeof headerSizes[number];
10
+ export declare const headerAlignItems: readonly ["center", "flex-start"];
11
+ type HEADER_ALIGN_ITEMS = typeof headerAlignItems[number];
10
12
  export interface DescriptionCard {
11
13
  title?: string;
12
14
  titleSize?: TITLE_SIZE;
13
15
  headerSize?: HEADER_SIZE;
16
+ /** Header dikey hizalama (`center` | `flex-start`) */
17
+ headerAlignItems?: HEADER_ALIGN_ITEMS;
14
18
  headerDescription?: string;
15
19
  hasBadge?: boolean;
16
20
  badgeText?: string;
@@ -74,6 +78,7 @@ export interface DescriptionCardStyledProps {
74
78
  $hasNoContentSidePadding?: boolean;
75
79
  $titleSize?: TITLE_SIZE;
76
80
  $headerSize?: HEADER_SIZE;
81
+ $headerAlignItems?: HEADER_ALIGN_ITEMS;
77
82
  $isClickable?: boolean;
78
83
  $hasAccordion?: boolean;
79
84
  $customColumnSpan?: {
package/dist/components/DescriptionCard/props.js CHANGED
@@ -1,14 +1,16 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DescriptionCardDefault = exports.headerSizes = exports.titleSizes = exports.iconNames = void 0;
3
+ exports.DescriptionCardDefault = exports.headerAlignItems = exports.headerSizes = exports.titleSizes = exports.iconNames = void 0;
4
4
  var iconList_1 = require("../Icon/iconList");
5
5
  exports.iconNames = Object.keys(iconList_1.iconList);
6
6
  exports.titleSizes = ['md', 'lg'];
7
7
  exports.headerSizes = ['small', 'medium'];
8
+ exports.headerAlignItems = ['center', 'flex-start'];
8
9
  exports.DescriptionCardDefault = {
9
10
  title: "Header title",
10
11
  titleSize: "md",
11
12
  headerSize: "small",
13
+ headerAlignItems: "center",
12
14
  headerDescription: null,
13
15
  hasBadge: false,
14
16
  hasHeader: true,
package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  declare const _default: {
3
3
  title: string;
4
- component: ({ title, titleSize, headerSize, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
4
+ component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
5
5
  tags: string[];
6
6
  argTypes: {
7
7
  title: {
@@ -14,6 +14,11 @@ declare const _default: {
14
14
  control: string;
15
15
  options: string[];
16
16
  };
17
+ headerAlignItems: {
18
+ control: string;
19
+ options: string[];
20
+ description: string;
21
+ };
17
22
  hasBadge: {
18
23
  control: string;
19
24
  };
package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js CHANGED
@@ -64,6 +64,11 @@ exports.default = {
64
64
  title: { control: 'text' },
65
65
  headerDescription: { control: 'text' },
66
66
  headerSize: { control: 'select', options: ['small', 'medium'] },
67
+ headerAlignItems: {
68
+ control: 'select',
69
+ options: ['center', 'flex-start'],
70
+ description: 'Header dikey hizalama',
71
+ },
67
72
  hasBadge: { control: 'boolean' },
68
73
  badgeText: { control: 'text' },
69
74
  hasHeader: { control: 'boolean' },
package/dist/components/Icon/iconList/Closemini.js CHANGED
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var jsx_runtime_1 = require("react/jsx-runtime");
38
38
  var React = __importStar(require("react"));
39
- var SvgClosemini = 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)("path", { d: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
39
+ var SvgClosemini = 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)("path", { d: "M10.6668 5.33398L5.3335 10.6673", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 5.33398L5.3335 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 5.33398L5.3335 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 10.6673L5.3335 5.33398", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 10.6673L5.3335 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 10.6673L5.3335 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
40
40
  exports.default = SvgClosemini;
package/dist/components/RichTextEditor/RichTextEditor.js CHANGED
@@ -30,6 +30,7 @@ var ItalicIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({
30
30
  var UnderlineIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 5v6a5 5 0 0 0 10 0V5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 19h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
31
31
  var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.5 8.5C9.2 7 10.5 6 12.2 6c2.1 0 3.8 1.2 3.8 3 0 .8-.3 1.5-.9 2M15.5 15.5c-.7 1.5-2 2.5-3.7 2.5-2.1 0-3.8-1.2-3.8-3 0-.8.3-1.5.9-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
32
32
  var OrderedListIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 6h10M10 12h10M10 18h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 5.5h1.5V9M4 9h3M4.5 14.5c.8 0 1.5.5 1.5 1.25S5.3 17 4.5 17H4v1.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
33
+ var HeadingIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 5v14M18 5v14M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
33
34
  var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
34
35
  var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.RichTextEditorDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.RichTextEditorDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.RichTextEditorDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.RichTextEditorDefault.errorMessage : _g, className = _a.className, id = _a.id, _h = _a.minHeight, minHeight = _h === void 0 ? props_1.RichTextEditorDefault.minHeight : _h;
35
36
  var _j = (0, react_1.useState)(false), focused = _j[0], setFocused = _j[1];
@@ -38,7 +39,9 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
38
39
  immediatelyRender: false,
39
40
  extensions: [
40
41
  starter_kit_1.default.configure({
41
- heading: false,
42
+ heading: {
43
+ levels: [2],
44
+ },
42
45
  code: false,
43
46
  codeBlock: false,
44
47
  blockquote: false,
@@ -107,7 +110,7 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
107
110
  }); }, [editor, disabled]);
108
111
  if (!editor)
109
112
  return null;
110
- return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
113
+ return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
111
114
  });
112
115
  RichTextEditor.displayName = 'RichTextEditor';
113
116
  exports.default = RichTextEditor;
package/dist/components/RichTextEditor/RichTextEditor.styled.js CHANGED
@@ -11,11 +11,11 @@ exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = ex
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.RichTextEditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
13
13
  exports.FieldLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0 0 0.5rem;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"], ["\n margin: 0 0 0.5rem;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"])));
14
- exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n background: ", ";\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n opacity: ", ";\n pointer-events: ", ";\n transition: border-color 0.15s ease;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n background: ", ";\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n opacity: ", ";\n pointer-events: ", ";\n transition: border-color 0.15s ease;\n"])), function (props) { return (props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); });
14
+ exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n background: ", ";\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid ", ";\n opacity: ", ";\n pointer-events: ", ";\n\n &:before {\n content: '';\n position: absolute;\n inset: -1px;\n border: 2px solid ", ";\n border-radius: inherit;\n pointer-events: none;\n z-index: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n background: ", ";\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid ", ";\n opacity: ", ";\n pointer-events: ", ";\n\n &:before {\n content: '';\n position: absolute;\n inset: -1px;\n border: 2px solid ", ";\n border-radius: inherit;\n pointer-events: none;\n z-index: 1;\n }\n"])), function (props) { return (props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'); }, function (props) { return (props.$hasError ? 'var(--red)' : 'var(--grey-10)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); }, function (props) { return (props.$focused ? 'var(--primary)' : 'transparent'); });
15
15
  exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex-wrap: wrap;\n padding: 0 0 1rem;\n margin: 0 0 1rem;\n border-bottom: 1px solid var(--grey-10);\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex-wrap: wrap;\n padding: 0 0 1rem;\n margin: 0 0 1rem;\n border-bottom: 1px solid var(--grey-10);\n"])));
16
- exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: none;\n border-radius: 0.25rem;\n background: ", ";\n color: ", ";\n font: var(--body-bold-14-17);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n\n &:hover {\n background: var(--primary-opacity-10);\n color: var(--primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n background: transparent;\n }\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: none;\n border-radius: 0.25rem;\n background: ", ";\n color: ", ";\n font: var(--body-bold-14-17);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n\n &:hover {\n background: var(--primary-opacity-10);\n color: var(--primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n background: transparent;\n }\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n"])), function (props) { return (props.$active ? 'var(--primary-opacity-10)' : 'transparent'); }, function (props) { return (props.$active ? 'var(--primary)' : 'var(--grey-50)'); });
16
+ exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: none;\n border-radius: 0.25rem;\n background: transparent;\n color: ", ";\n font: var(--body-bold-14-17);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n\n &:hover:not(:disabled) {\n background: transparent;\n color: var(--dark);\n }\n\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n background: transparent;\n }\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: none;\n border-radius: 0.25rem;\n background: transparent;\n color: ", ";\n font: var(--body-bold-14-17);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n\n &:hover:not(:disabled) {\n background: transparent;\n color: var(--dark);\n }\n\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n background: transparent;\n }\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n"])), function (props) { return (props.$active ? 'var(--dark)' : 'var(--grey-50)'); });
17
17
  exports.ToolbarDivider = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: inline-block;\n width: 1px;\n height: 1.25rem;\n margin: 0;\n background: var(--dark-opacity-10);\n"], ["\n display: inline-block;\n width: 1px;\n height: 1.25rem;\n margin: 0;\n background: var(--dark-opacity-10);\n"])));
18
- exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n .ProseMirror {\n min-height: ", ";\n padding: 0;\n outline: none;\n color: var(--dark);\n font: var(--body-regular-14-17);\n box-sizing: border-box;\n\n p {\n margin: 0 0 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n ul,\n ol {\n margin: 0 0 0.75rem;\n padding-left: 1.25rem;\n list-style-position: outside;\n }\n\n ul {\n list-style-type: disc;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n li {\n margin-bottom: 0.25rem;\n display: list-item;\n }\n\n strong {\n font-weight: 700;\n }\n\n em {\n font-style: italic;\n }\n\n u {\n text-decoration: underline;\n }\n\n s {\n text-decoration: line-through;\n }\n\n .rte-variable-node {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n margin: 0 0.125rem;\n user-select: none;\n }\n\n /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n .rte-variable {\n display: inline-flex;\n align-items: center;\n margin: 0 0.125rem;\n padding: 0 8px;\n height: 17px;\n line-height: 17px;\n border-radius: 3px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-semi-bold-10-12);\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n }\n\n p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: var(--dark-opacity-50);\n pointer-events: none;\n height: 0;\n font: var(--body-regular-14-17);\n }\n }\n"], ["\n .ProseMirror {\n min-height: ", ";\n padding: 0;\n outline: none;\n color: var(--dark);\n font: var(--body-regular-14-17);\n box-sizing: border-box;\n\n p {\n margin: 0 0 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n ul,\n ol {\n margin: 0 0 0.75rem;\n padding-left: 1.25rem;\n list-style-position: outside;\n }\n\n ul {\n list-style-type: disc;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n li {\n margin-bottom: 0.25rem;\n display: list-item;\n }\n\n strong {\n font-weight: 700;\n }\n\n em {\n font-style: italic;\n }\n\n u {\n text-decoration: underline;\n }\n\n s {\n text-decoration: line-through;\n }\n\n .rte-variable-node {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n margin: 0 0.125rem;\n user-select: none;\n }\n\n /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n .rte-variable {\n display: inline-flex;\n align-items: center;\n margin: 0 0.125rem;\n padding: 0 8px;\n height: 17px;\n line-height: 17px;\n border-radius: 3px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-semi-bold-10-12);\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n }\n\n p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: var(--dark-opacity-50);\n pointer-events: none;\n height: 0;\n font: var(--body-regular-14-17);\n }\n }\n"])), function (props) { return props.$minHeight || '200px'; });
18
+ exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n .ProseMirror {\n min-height: ", ";\n padding: 0;\n outline: none;\n color: var(--dark);\n font: var(--body-regular-14-17);\n box-sizing: border-box;\n\n p {\n margin: 0 0 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h2 {\n margin: 0 0 0.75rem;\n color: var(--dark);\n font: var(--headline-semi-bold-18-22);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n ul,\n ol {\n margin: 0 0 0.75rem;\n padding-left: 1.25rem;\n list-style-position: outside;\n }\n\n ul {\n list-style-type: disc;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n li {\n margin-bottom: 0.25rem;\n display: list-item;\n }\n\n strong {\n font-weight: 700;\n }\n\n em {\n font-style: italic;\n }\n\n u {\n text-decoration: underline;\n }\n\n s {\n text-decoration: line-through;\n }\n\n .rte-variable-node {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n margin: 0 0.125rem;\n user-select: none;\n }\n\n /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n .rte-variable {\n display: inline-flex;\n align-items: center;\n margin: 0 0.125rem;\n padding: 0 8px;\n height: 17px;\n line-height: 17px;\n border-radius: 3px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-semi-bold-10-12);\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n }\n\n p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: var(--dark-opacity-50);\n pointer-events: none;\n height: 0;\n font: var(--body-regular-14-17);\n }\n }\n"], ["\n .ProseMirror {\n min-height: ", ";\n padding: 0;\n outline: none;\n color: var(--dark);\n font: var(--body-regular-14-17);\n box-sizing: border-box;\n\n p {\n margin: 0 0 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h2 {\n margin: 0 0 0.75rem;\n color: var(--dark);\n font: var(--headline-semi-bold-18-22);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n ul,\n ol {\n margin: 0 0 0.75rem;\n padding-left: 1.25rem;\n list-style-position: outside;\n }\n\n ul {\n list-style-type: disc;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n li {\n margin-bottom: 0.25rem;\n display: list-item;\n }\n\n strong {\n font-weight: 700;\n }\n\n em {\n font-style: italic;\n }\n\n u {\n text-decoration: underline;\n }\n\n s {\n text-decoration: line-through;\n }\n\n .rte-variable-node {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n margin: 0 0.125rem;\n user-select: none;\n }\n\n /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n .rte-variable {\n display: inline-flex;\n align-items: center;\n margin: 0 0.125rem;\n padding: 0 8px;\n height: 17px;\n line-height: 17px;\n border-radius: 3px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-semi-bold-10-12);\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n }\n\n p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: var(--dark-opacity-50);\n pointer-events: none;\n height: 0;\n font: var(--body-regular-14-17);\n }\n }\n"])), function (props) { return props.$minHeight || '200px'; });
19
19
  exports.ErrorMessage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 0.5rem;\n color: var(--red);\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n"], ["\n display: flex;\n align-items: center;\n margin-top: 0.5rem;\n color: var(--red);\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n"])));
20
20
  exports.VariableActions = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.75rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.75rem;\n"])));
21
21
  exports.VariableChipButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: 0.375rem 0.75rem;\n border-radius: 0.375rem;\n border: 1px solid var(--primary-opacity-50);\n background: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-bold-12-15);\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease;\n\n &:hover {\n background: var(--primary-opacity-50);\n border-color: var(--primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n padding: 0.375rem 0.75rem;\n border-radius: 0.375rem;\n border: 1px solid var(--primary-opacity-50);\n background: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-bold-12-15);\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease;\n\n &:hover {\n background: var(--primary-opacity-50);\n border-color: var(--primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n"])));
package/dist/components/RichTextEditor/utils/sanitize.js CHANGED
@@ -8,6 +8,7 @@ var dompurify_1 = __importDefault(require("dompurify"));
8
8
  var ALLOWED_TAGS = [
9
9
  'p',
10
10
  'br',
11
+ 'h2',
11
12
  'strong',
12
13
  'b',
13
14
  'em',
@@ -81,7 +82,7 @@ var prepareEditorHtml = function (html) {
81
82
  parent.replaceChild(emptyParagraph, element);
82
83
  return;
83
84
  }
84
- if (tag === 'P' || tag === 'SPAN') {
85
+ if (tag === 'P' || tag === 'H2' || tag === 'SPAN') {
85
86
  return;
86
87
  }
87
88
  if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV') {
package/dist/components/TagInput/TagInput.js CHANGED
@@ -28,6 +28,7 @@ var react_1 = require("react");
28
28
  var props_1 = require("./props");
29
29
  var TagInput_styled_1 = require("./TagInput.styled");
30
30
  var Tag_1 = __importDefault(require("../Tag"));
31
+ var Button_1 = __importDefault(require("../Button"));
31
32
  var normalizeTag = function (value) { return value.trim(); };
32
33
  var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
33
34
  var className = _a.className, _b = _a.label, label = _b === void 0 ? props_1.TagInputDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.TagInputDefault.placeholder : _c, name = _a.name, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.TagInputDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.TagInputDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.TagInputDefault.hasError : _f, errorMessage = _a.errorMessage, _g = _a.buttonText, buttonText = _g === void 0 ? props_1.TagInputDefault.buttonText : _g, maxTags = _a.maxTags, maxLength = _a.maxLength, _h = _a.allowDuplicates, allowDuplicates = _h === void 0 ? props_1.TagInputDefault.allowDuplicates : _h, id = _a.id;
@@ -71,9 +72,7 @@ var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
71
72
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
72
73
  };
73
74
  var removeTag = function (index) {
74
- var _a;
75
75
  updateTags(tags.filter(function (_, tagIndex) { return tagIndex !== index; }));
76
- (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
77
76
  };
78
77
  var handleAddClick = function () {
79
78
  addTag(inputValue);
@@ -95,7 +94,7 @@ var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
95
94
  }
96
95
  };
97
96
  var isAddDisabled = disabled || !canAddTag(inputValue);
98
- return ((0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputStyled, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputLabel, __assign({ htmlFor: inputId }, { children: label })), (0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputFields, { children: [(0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputField, { ref: inputRef, id: inputId, type: "text", value: inputValue, placeholder: placeholder, disabled: disabled, "$hasError": hasError, "$disabled": disabled, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: onBlur, "aria-invalid": hasError, "aria-describedby": hasError && errorMessage ? "".concat(inputId, "-error") : undefined }), (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputButton, __assign({ type: "button", disabled: isAddDisabled, "$disabled": isAddDisabled, onClick: handleAddClick }, { children: buttonText }))] }), tags.length > 0 && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagList, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, disabled: disabled, onRemove: function () { return removeTag(index); } }, "".concat(tag, "-").concat(index))); }) })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputError, __assign({ id: "".concat(inputId, "-error") }, { children: errorMessage }))), name && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputHiddenInputs, __assign({ "aria-hidden": "true" }, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag, readOnly: true }, "".concat(name, "-").concat(tag, "-").concat(index))); }) })))] })));
97
+ return ((0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputStyled, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputLabel, __assign({ htmlFor: inputId }, { children: label })), (0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputFields, { children: [(0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputField, { ref: inputRef, id: inputId, type: "text", value: inputValue, placeholder: placeholder, disabled: disabled, "$hasError": hasError, "$disabled": disabled, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: onBlur, "aria-invalid": hasError, "aria-describedby": hasError && errorMessage ? "".concat(inputId, "-error") : undefined }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ type: "button", size: "big", variant: "inverted", disabled: isAddDisabled, onClick: handleAddClick }, { children: buttonText }))] }), tags.length > 0 && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagList, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, disabled: disabled, onRemove: function () { return removeTag(index); } }, "".concat(tag, "-").concat(index))); }) })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputError, __assign({ id: "".concat(inputId, "-error") }, { children: errorMessage }))), name && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputHiddenInputs, __assign({ "aria-hidden": "true" }, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag, readOnly: true }, "".concat(name, "-").concat(tag, "-").concat(index))); }) })))] })));
99
98
  });
100
99
  TagInput.displayName = 'TagInput';
101
100
  exports.default = TagInput;
package/dist/components/TagInput/TagInput.styled.d.ts CHANGED
@@ -9,11 +9,6 @@ export declare const TagInputField: import("styled-components/dist/types").IStyl
9
9
  $hasError?: boolean;
10
10
  $disabled?: boolean;
11
11
  }, never>>> & string;
12
- export declare const TagInputButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled"> & {
13
- $disabled?: boolean;
14
- }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled"> & {
15
- $disabled?: boolean;
16
- }, never>>> & string;
17
12
  export declare const TagList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
18
13
  export declare const TagInputError: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
19
14
  export declare const TagInputHiddenInputs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
package/dist/components/TagInput/TagInput.styled.js CHANGED
@@ -7,14 +7,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.TagInputHiddenInputs = exports.TagInputError = exports.TagList = exports.TagInputButton = exports.TagInputField = exports.TagInputFields = exports.TagInputLabel = exports.TagInputStyled = void 0;
10
+ exports.TagInputHiddenInputs = exports.TagInputError = exports.TagList = exports.TagInputField = exports.TagInputFields = exports.TagInputLabel = exports.TagInputStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.TagInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
13
13
  exports.TagInputLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0 0 0.5rem;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"], ["\n margin: 0 0 0.5rem;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"])));
14
14
  exports.TagInputFields = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: flex-start;\n gap: 1rem;\n"], ["\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: flex-start;\n gap: 1rem;\n"])));
15
15
  exports.TagInputField = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: 19.5px 24px;\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n background: white;\n }\n\n &:disabled {\n color: var(--dark-opacity-25);\n cursor: not-allowed;\n }\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: 19.5px 24px;\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n background: white;\n }\n\n &:disabled {\n color: var(--dark-opacity-25);\n cursor: not-allowed;\n }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, 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)'; });
16
- exports.TagInputButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 56px;\n min-width: 56px;\n padding: 0 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n background-color: white;\n color: ", ";\n font: var(--body-bold-14-17);\n cursor: ", ";\n transition: border-color 0.2s ease, color 0.2s ease;\n\n &:not(:disabled):hover {\n border-color: var(--primary);\n }\n"], ["\n box-sizing: border-box;\n height: 56px;\n min-width: 56px;\n padding: 0 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n background-color: white;\n color: ", ";\n font: var(--body-bold-14-17);\n cursor: ", ";\n transition: border-color 0.2s ease, color 0.2s ease;\n\n &:not(:disabled):hover {\n border-color: var(--primary);\n }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-25)' : 'var(--primary)'; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; });
17
- exports.TagList = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"])));
18
- exports.TagInputError = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0.5rem 0 0;\n color: var(--red);\n font: var(--caption-semi-bold-11-13);\n"], ["\n margin: 0.5rem 0 0;\n color: var(--red);\n font: var(--caption-semi-bold-11-13);\n"])));
19
- exports.TagInputHiddenInputs = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
20
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
16
+ exports.TagList = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"])));
17
+ exports.TagInputError = styled_components_1.default.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0.5rem 0 0;\n color: var(--red);\n font: var(--caption-semi-bold-11-13);\n"], ["\n margin: 0.5rem 0 0;\n color: var(--red);\n font: var(--caption-semi-bold-11-13);\n"])));
18
+ exports.TagInputHiddenInputs = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
19
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "2.23.5",
3
+ "version": "2.23.6",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -54,7 +54,7 @@
54
54
  },
55
55
  "scripts": {
56
56
  "start": "react-scripts start",
57
- "build": "tsc && npm run generate-minified-css",
57
+ "build": "NODE_OPTIONS=--max-old-space-size=4096 tsc && npm run generate-minified-css",
58
58
  "test": "react-scripts test",
59
59
  "eject": "react-scripts eject",
60
60
  "storybook": "storybook dev",