krl-alfred 2.23.5 → 2.23.7

package/dist/components/Uploader/Uploader.js

@@ -21,11 +21,11 @@ var Uploader_styled_1 = require("./Uploader.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Badges_1 = __importDefault(require("../Badges/Badges"));
 var Uploader = function (_a) {
-    var className = _a.className, title = _a.title, description = _a.description, _b = _a.images, images = _b === void 0 ? props_1.UploaderDefault.images : _b, _c = _a.maxCount, maxCount = _c === void 0 ? props_1.UploaderDefault.maxCount : _c, _d = _a.uploadLabel, uploadLabel = _d === void 0 ? props_1.UploaderDefault.uploadLabel : _d, _e = _a.coverBadgeText, coverBadgeText = _e === void 0 ? props_1.UploaderDefault.coverBadgeText : _e, _f = _a.variant, variant = _f === void 0 ? props_1.UploaderDefault.variant : _f, _g = _a.selectedIndex, selectedIndex = _g === void 0 ? props_1.UploaderDefault.selectedIndex : _g, _h = _a.showCoverBadge, showCoverBadge = _h === void 0 ? props_1.UploaderDefault.showCoverBadge : _h, _j = _a.accept, accept = _j === void 0 ? props_1.UploaderDefault.accept : _j, _k = _a.disabled, disabled = _k === void 0 ? props_1.UploaderDefault.disabled : _k, onUpload = _a.onUpload, onRemove = _a.onRemove, onSelect = _a.onSelect;
+    var className = _a.className, title = _a.title, description = _a.description, _b = _a.images, images = _b === void 0 ? props_1.UploaderDefault.images : _b, _c = _a.maxCount, maxCount = _c === void 0 ? props_1.UploaderDefault.maxCount : _c, _d = _a.columnCount, columnCount = _d === void 0 ? props_1.UploaderDefault.columnCount : _d, _e = _a.uploadLabel, uploadLabel = _e === void 0 ? props_1.UploaderDefault.uploadLabel : _e, _f = _a.coverBadgeText, coverBadgeText = _f === void 0 ? props_1.UploaderDefault.coverBadgeText : _f, _g = _a.variant, variant = _g === void 0 ? props_1.UploaderDefault.variant : _g, _h = _a.selectedIndex, selectedIndex = _h === void 0 ? props_1.UploaderDefault.selectedIndex : _h, _j = _a.showCoverBadge, showCoverBadge = _j === void 0 ? props_1.UploaderDefault.showCoverBadge : _j, _k = _a.accept, accept = _k === void 0 ? props_1.UploaderDefault.accept : _k, _l = _a.disabled, disabled = _l === void 0 ? props_1.UploaderDefault.disabled : _l, _m = _a.imagePadding, imagePadding = _m === void 0 ? props_1.UploaderDefault.imagePadding : _m, onUpload = _a.onUpload, onRemove = _a.onRemove, onSelect = _a.onSelect;
     var fileInputRef = (0, react_1.useRef)(null);
     var uploadIndexRef = (0, react_1.useRef)(null);
     var localPreviewsRef = (0, react_1.useRef)({});
-    var _l = (0, react_1.useState)({}), localPreviews = _l[0], setLocalPreviews = _l[1];
+    var _o = (0, react_1.useState)({}), localPreviews = _o[0], setLocalPreviews = _o[1];
     var slots = Array.from({ length: maxCount }, function (_, index) { var _a, _b; return (_b = (_a = images[index]) !== null && _a !== void 0 ? _a : localPreviews[index]) !== null && _b !== void 0 ? _b : null; });
     var isCoverSelect = variant === 'coverSelect';
     localPreviewsRef.current = localPreviews;
@@ -104,13 +104,13 @@ var Uploader = function (_a) {
         onRemove === null || onRemove === void 0 ? void 0 : onRemove(index);
     };
     var renderCoverBadge = function () { return ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: coverBadgeText })); };
-    return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderStyled, __assign({ className: className }, { children: [(title || description) && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderHeader, { children: [title && (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderTitle, { children: title }), description && (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderDescription, { children: description })] })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderGrid, __assign({ "$maxCount": maxCount }, { children: slots.map(function (image, index) {
+    return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderStyled, __assign({ className: className }, { children: [(title || description) && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderHeader, { children: [title && (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderTitle, { children: title }), description && (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderDescription, { children: description })] })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderGrid, __assign({ "$columnCount": columnCount }, { children: slots.map(function (image, index) {
                     var _a, _b;
                     var isEmpty = !image;
                     var isSelected = isCoverSelect && selectedIndex === index && !isEmpty;
                     var showCoverOnSlot = !isCoverSelect && showCoverBadge && index === 0;
                     var showUploadContent = isEmpty || showCoverOnSlot;
-                    return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderSlot, __assign({ type: "button", "$isEmpty": isEmpty, "$isSelected": isSelected, "$disabled": disabled, disabled: disabled, onClick: function () { return handleSlotClick(index, image); } }, { children: [image && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotMedia, { children: (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotImage, { src: image.src, alt: (_a = image.alt) !== null && _a !== void 0 ? _a : '' }) }), !isCoverSelect && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderRemoveButton, __assign({ type: "button", "aria-label": "G\u00F6rseli kald\u0131r", onClick: function (event) { return handleRemove(event, index); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) })))] })), showUploadContent && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderUploadContent, __assign({ "$hasImage": !isEmpty }, { children: [showCoverOnSlot && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadBadgeWrapper, { children: renderCoverBadge() })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadLabel, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: uploadLabel })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadIcon, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusMd", width: "1.5rem", height: "1.5rem", color: "var(--primary)" }) }))] })))] }), (_b = image === null || image === void 0 ? void 0 : image.id) !== null && _b !== void 0 ? _b : "slot-".concat(index)));
+                    return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderSlot, __assign({ type: "button", "$isEmpty": isEmpty, "$isSelected": isSelected, "$disabled": disabled, disabled: disabled, onClick: function () { return handleSlotClick(index, image); } }, { children: [image && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotMedia, __assign({ "$padding": imagePadding }, { children: (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotImage, { src: image.src, alt: (_a = image.alt) !== null && _a !== void 0 ? _a : '' }) })), !isCoverSelect && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderRemoveButton, __assign({ type: "button", "aria-label": "G\u00F6rseli kald\u0131r", onClick: function (event) { return handleRemove(event, index); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) })))] })), showUploadContent && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderUploadContent, __assign({ "$hasImage": !isEmpty }, { children: [showCoverOnSlot && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadBadgeWrapper, { children: renderCoverBadge() })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadLabel, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: uploadLabel })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadIcon, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusMd", width: "1.5rem", height: "1.5rem", color: "var(--primary)" }) }))] })))] }), (_b = image === null || image === void 0 ? void 0 : image.id) !== null && _b !== void 0 ? _b : "slot-".concat(index)));
                 }) })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderHiddenInput, { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange })] })));
 };
 exports.default = Uploader;

package/dist/components/Uploader/Uploader.styled.d.ts

@@ -3,10 +3,10 @@ export declare const UploaderStyled: import("styled-components/dist/types").ISty
 export declare const UploaderHeader: 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;
 export declare const UploaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const UploaderDescription: 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;
-export declare const UploaderGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$maxCount"> & {
-    $maxCount: number;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$maxCount"> & {
-    $maxCount: number;
+export declare const UploaderGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & {
+    $columnCount: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & {
+    $columnCount: number;
 }, never>>> & string;
 export declare const UploaderSlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled" | "$isSelected" | "$isEmpty"> & {
     $isEmpty: boolean;
@@ -17,7 +17,11 @@ export declare const UploaderSlot: import("styled-components/dist/types").IStyle
     $isSelected: boolean;
     $disabled?: boolean;
 }, never>>> & string;
-export declare const UploaderSlotMedia: 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;
+export declare const UploaderSlotMedia: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding"> & {
+    $padding?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding"> & {
+    $padding?: string;
+}, never>>> & string;
 export declare const UploaderSlotImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
 export declare const UploaderUploadContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasImage"> & {
     $hasImage?: boolean;

package/dist/components/Uploader/Uploader.styled.js

@@ -33,7 +33,7 @@ exports.UploaderStyled = styled_components_1.default.div(templateObject_1 || (te
 exports.UploaderHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-bottom: 1rem;\n"], ["\n    margin-bottom: 1rem;\n"])));
 exports.UploaderTitle = styled_components_1.default.h3(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"])));
 exports.UploaderDescription = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-medium-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-medium-12-15);\n"])));
-exports.UploaderGrid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ", minmax(0, 1fr));\n    gap: 1rem;\n    width: 100%;\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ", minmax(0, 1fr));\n    gap: 1rem;\n    width: 100%;\n"])), function (props) { return props.$maxCount; });
+exports.UploaderGrid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(", ", minmax(0, 1fr));\n    gap: 1rem;\n    width: 100%;\n"], ["\n    display: grid;\n    grid-template-columns: repeat(", ", minmax(0, 1fr));\n    gap: 1rem;\n    width: 100%;\n"])), function (props) { return props.$columnCount; });
 var slotSelectedStyles = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    border: 2px solid var(--primary);\n    background-color: #fff;\n"], ["\n    border: 2px solid var(--primary);\n    background-color: #fff;\n"])));
 var slotFilledStyles = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    border: 1px solid var(--dark-opacity-10);\n    background-color: #fff;\n"], ["\n    border: 1px solid var(--dark-opacity-10);\n    background-color: #fff;\n"])));
 var slotEmptyStyles = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    border: 1px solid var(--dark-opacity-10);\n    background-color: var(--dark-opacity-3);\n\n    &:hover:not(:disabled) {\n        border-color: var(--primary);\n    }\n"], ["\n    border: 1px solid var(--dark-opacity-10);\n    background-color: var(--dark-opacity-3);\n\n    &:hover:not(:disabled) {\n        border-color: var(--primary);\n    }\n"])));
@@ -44,8 +44,8 @@ exports.UploaderSlot = styled_components_1.default.button(templateObject_9 || (t
         return slotEmptyStyles;
     return slotFilledStyles;
 });
-exports.UploaderSlotMedia = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"], ["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));
-exports.UploaderSlotImage = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    padding: 0.5rem;\n    box-sizing: border-box;\n    pointer-events: none;\n"], ["\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    padding: 0.5rem;\n    box-sizing: border-box;\n    pointer-events: none;\n"])));
+exports.UploaderSlotMedia = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    box-sizing: border-box;\n"], ["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    box-sizing: border-box;\n"])), function (props) { return props.$padding || '1rem'; });
+exports.UploaderSlotImage = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"], ["\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"])));
 exports.UploaderUploadContent = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    position: ", ";\n    z-index: ", ";\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    position: ", ";\n    z-index: ", ";\n"])), function (props) { return props.$hasImage ? 'relative' : 'static'; }, function (props) { return props.$hasImage ? 1 : 'auto'; });
 exports.UploaderUploadBadgeWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin-bottom: 0.5rem;\n"], ["\n    margin-bottom: 0.5rem;\n"])));
 exports.UploaderUploadLabel = styled_components_1.default.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    color: var(--primary);\n    font: var(--body-semi-bold-14-17);\n    visibility: ", ";\n"], ["\n    color: var(--primary);\n    font: var(--body-semi-bold-14-17);\n    visibility: ", ";\n"])), function (props) { return props.$isHidden ? 'hidden' : 'visible'; });

package/dist/components/Uploader/props.d.ts

@@ -10,6 +10,8 @@ export interface UploaderProps {
     description?: string;
     images?: (UploaderImage | null)[];
     maxCount?: number;
+    /** Grid satırındaki kolon sayısı (default: 4). maxCount'tan bağımsızdır. */
+    columnCount?: number;
     uploadLabel?: string;
     coverBadgeText?: string;
     variant?: UploaderVariant;
@@ -17,6 +19,8 @@ export interface UploaderProps {
     showCoverBadge?: boolean;
     accept?: string;
     disabled?: boolean;
+    /** Slot görseli padding'i (`1.5rem`, `1rem`, `1.5rem 1rem` vb.) */
+    imagePadding?: string;
     onUpload?: (index: number, file: File) => void;
     onRemove?: (index: number) => void;
     onSelect?: (index: number) => void;
@@ -24,6 +28,7 @@ export interface UploaderProps {
 export declare const UploaderDefault: {
     images: UploaderImage[];
     maxCount: number;
+    columnCount: number;
     uploadLabel: string;
     coverBadgeText: string;
     variant: UploaderVariant;
@@ -31,4 +36,5 @@ export declare const UploaderDefault: {
     showCoverBadge: boolean;
     accept: string;
     disabled: boolean;
+    imagePadding: string;
 };

package/dist/components/Uploader/props.js

@@ -4,6 +4,7 @@ exports.UploaderDefault = void 0;
 exports.UploaderDefault = {
     images: [],
     maxCount: 4,
+    columnCount: 4,
     uploadLabel: 'Yükle',
     coverBadgeText: 'Kapak',
     variant: 'default',
@@ -11,4 +12,5 @@ exports.UploaderDefault = {
     showCoverBadge: true,
     accept: 'image/*',
     disabled: false,
+    imagePadding: '1rem',
 };

package/dist/components/Uploader/stories/Uploader.stories.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { UploaderImage } from '../props';
 declare const _default: {
     title: string;
-    component: ({ className, title, description, images, maxCount, uploadLabel, coverBadgeText, variant, selectedIndex, showCoverBadge, accept, disabled, onUpload, onRemove, onSelect, }: import("../props").UploaderProps) => React.JSX.Element;
+    component: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndex, showCoverBadge, accept, disabled, imagePadding, onUpload, onRemove, onSelect, }: import("../props").UploaderProps) => React.JSX.Element;
     tags: string[];
     argTypes: {
         variant: {
@@ -12,12 +12,18 @@ declare const _default: {
         maxCount: {
             control: string;
         };
+        columnCount: {
+            control: string;
+        };
         showCoverBadge: {
             control: string;
         };
         disabled: {
             control: string;
         };
+        imagePadding: {
+            control: string;
+        };
     };
 };
 export default _default;

package/dist/components/Uploader/stories/Uploader.stories.js

@@ -32,8 +32,10 @@ exports.default = {
             options: ['default', 'coverSelect'],
         },
         maxCount: { control: 'number' },
+        columnCount: { control: 'number' },
         showCoverBadge: { control: 'boolean' },
         disabled: { control: 'boolean' },
+        imagePadding: { control: 'text' },
     },
 };
 exports.Empty = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.23.5",
+  "version": "2.23.7",
   "files": [
     "dist"
   ],
@@ -54,7 +54,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "tsc && npm run generate-minified-css",
+    "build": "NODE_OPTIONS=--max-old-space-size=4096 tsc && npm run generate-minified-css",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "storybook dev",