@chayns-components/core 5.3.9 → 5.3.10

package/AGENTS.md

@@ -1,8 +1,8 @@
 # @chayns-components/core
 
-React component package providing 45 documented components for chayns applications.
+React component package providing 46 documented components for chayns applications.
 
-Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Skeleton`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
+Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `Masonry`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Skeleton`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
 
 ## Import
 
@@ -39,6 +39,7 @@ import { Accordion, AmountControl, AnimatedNumber } from '@chayns-components/cor
 - `Icon`
 - `Input`
 - `List`
+- `Masonry`
 - `MentionFinder`
 - `MultiActionButton`
 - `NumberInput`
@@ -3006,6 +3007,64 @@ No additional exported types documented.
 
 ### Anti Patterns
 
+- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
+## Masonry
+
+`Masonry` is exported by `@chayns-components/core` and should be imported from the public package entry point.
+
+### Import
+
+```ts
+import { Masonry } from '@chayns-components/core';
+```
+
+### Examples
+
+#### General
+
+```tsx
+<Masonry
+    gap={16}
+    columnWidth={160}
+    rowHeight={80}
+/>
+```
+
+#### Packed
+
+```tsx
+<Masonry
+    gap={16}
+    columnWidth={160}
+    rowHeight={80}
+/>
+```
+
+#### Dynamic
+
+```tsx
+<Masonry
+    gap={16}
+    columnWidth={160}
+    rowHeight={80}
+/>
+```
+
+### Props
+
+No prop documentation available.
+
+### Types
+
+No additional exported types documented.
+
+### Usage Notes
+
+- Import `Masonry` directly from `@chayns-components/core` instead of internal source paths.
+- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
+
+### Anti Patterns
+
 - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
 ## MentionFinder
 

package/lib/cjs/components/masonry/Masonry.context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMasonryContext = exports.MasonryContext = void 0;
+var _react = require("react");
+const MasonryContext = exports.MasonryContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const useMasonryContext = () => {
+  const context = (0, _react.useContext)(MasonryContext);
+  if (!context) {
+    throw new Error('Masonry.Item must be used inside Masonry.');
+  }
+  return context;
+};
+exports.useMasonryContext = useMasonryContext;
+//# sourceMappingURL=Masonry.context.js.map

package/lib/cjs/components/masonry/Masonry.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.context.js","names":["_react","require","MasonryContext","exports","createContext","undefined","useMasonryContext","context","useContext","Error"],"sources":["../../../../src/components/masonry/Masonry.context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { MasonryContextValue } from './Masonry.types';\n\nexport const MasonryContext = createContext<MasonryContextValue | undefined>(undefined);\n\nexport const useMasonryContext = () => {\n    const context = useContext(MasonryContext);\n\n    if (!context) {\n        throw new Error('Masonry.Item must be used inside Masonry.');\n    }\n\n    return context;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,gBAAG,IAAAE,oBAAa,EAAkCC,SAAS,CAAC;AAEhF,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACN,cAAc,CAAC;EAE1C,IAAI,CAACK,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,2CAA2C,CAAC;EAChE;EAEA,OAAOF,OAAO;AAClB,CAAC;AAACJ,OAAA,CAAAG,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.hooks.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMasonryLayout = exports.useMasonryItems = exports.useMasonryColumnCount = void 0;
+var _react = require("react");
+var _Masonry = require("./Masonry.utils");
+const useMasonryItems = ({
+  children
+}) => (0, _react.useMemo)(() => _react.Children.toArray(children), [children]);
+exports.useMasonryItems = useMasonryItems;
+const useMasonryLayout = ({
+  items,
+  itemHeights,
+  columnCount,
+  columnWidth,
+  rowHeight,
+  gap
+}) => (0, _react.useMemo)(() => {
+  const layoutItems = items.map((item, index) => {
+    const key = (0, _Masonry.getMasonryItemKey)(item, index);
+    const height = itemHeights[key] ?? rowHeight;
+    return {
+      key,
+      columns: item.props.columns ?? 1,
+      rows: (0, _Masonry.calculateRowSpan)({
+        height,
+        rowHeight,
+        gap
+      })
+    };
+  });
+  return (0, _Masonry.packMasonryGrid)({
+    items: layoutItems,
+    columnCount,
+    columnWidth,
+    rowHeight,
+    gap
+  });
+}, [items, itemHeights, columnCount, columnWidth, rowHeight, gap]);
+exports.useMasonryLayout = useMasonryLayout;
+const useMasonryColumnCount = ({
+  containerWidth,
+  columnWidth,
+  gap
+}) => (0, _react.useMemo)(() => (0, _Masonry.calculateColumnCount)({
+  containerWidth,
+  columnWidth,
+  gap
+}), [containerWidth, columnWidth, gap]);
+exports.useMasonryColumnCount = useMasonryColumnCount;
+//# sourceMappingURL=Masonry.hooks.js.map

package/lib/cjs/components/masonry/Masonry.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.hooks.js","names":["_react","require","_Masonry","useMasonryItems","children","useMemo","Children","toArray","exports","useMasonryLayout","items","itemHeights","columnCount","columnWidth","rowHeight","gap","layoutItems","map","item","index","key","getMasonryItemKey","height","columns","props","rows","calculateRowSpan","packMasonryGrid","useMasonryColumnCount","containerWidth","calculateColumnCount"],"sources":["../../../../src/components/masonry/Masonry.hooks.ts"],"sourcesContent":["import { Children, ReactNode, useMemo } from 'react';\nimport { MasonryChild, MasonryItemProps, MasonryLayoutItem } from './Masonry.types';\nimport {\n    calculateColumnCount,\n    calculateRowSpan,\n    getMasonryItemKey,\n    packMasonryGrid,\n} from './Masonry.utils';\n\ninterface UseMasonryItemsParams {\n    children: ReactNode;\n}\n\nexport const useMasonryItems = ({ children }: UseMasonryItemsParams) =>\n    useMemo(() => Children.toArray(children) as MasonryChild[], [children]);\n\ninterface UseMasonryLayoutParams {\n    items: MasonryChild[];\n    itemHeights: Record<string, number>;\n    columnCount: number;\n    columnWidth: number;\n    rowHeight: number;\n    gap: number;\n}\n\nexport const useMasonryLayout = ({\n    items,\n    itemHeights,\n    columnCount,\n    columnWidth,\n    rowHeight,\n    gap,\n}: UseMasonryLayoutParams) =>\n    useMemo(() => {\n        const layoutItems: MasonryLayoutItem[] = items.map((item, index) => {\n            const key = getMasonryItemKey(item as React.ReactElement<MasonryItemProps>, index);\n\n            const height = itemHeights[key] ?? rowHeight;\n\n            return {\n                key,\n                columns: item.props.columns ?? 1,\n                rows: calculateRowSpan({\n                    height,\n                    rowHeight,\n                    gap,\n                }),\n            };\n        });\n\n        return packMasonryGrid({\n            items: layoutItems,\n            columnCount,\n            columnWidth,\n            rowHeight,\n            gap,\n        });\n    }, [items, itemHeights, columnCount, columnWidth, rowHeight, gap]);\n\ninterface UseMasonryColumnCountParams {\n    containerWidth: number;\n    columnWidth: number;\n    gap: number;\n}\n\nexport const useMasonryColumnCount = ({\n    containerWidth,\n    columnWidth,\n    gap,\n}: UseMasonryColumnCountParams) =>\n    useMemo(\n        () =>\n            calculateColumnCount({\n                containerWidth,\n                columnWidth,\n                gap,\n            }),\n        [containerWidth, columnWidth, gap],\n    );\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAWO,MAAME,eAAe,GAAGA,CAAC;EAAEC;AAAgC,CAAC,KAC/D,IAAAC,cAAO,EAAC,MAAMC,eAAQ,CAACC,OAAO,CAACH,QAAQ,CAAmB,EAAE,CAACA,QAAQ,CAAC,CAAC;AAACI,OAAA,CAAAL,eAAA,GAAAA,eAAA;AAWrE,MAAMM,gBAAgB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,WAAW;EACXC,WAAW;EACXC,WAAW;EACXC,SAAS;EACTC;AACoB,CAAC,KACrB,IAAAV,cAAO,EAAC,MAAM;EACV,MAAMW,WAAgC,GAAGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;IAChE,MAAMC,GAAG,GAAG,IAAAC,0BAAiB,EAACH,IAAI,EAA0CC,KAAK,CAAC;IAElF,MAAMG,MAAM,GAAGX,WAAW,CAACS,GAAG,CAAC,IAAIN,SAAS;IAE5C,OAAO;MACHM,GAAG;MACHG,OAAO,EAAEL,IAAI,CAACM,KAAK,CAACD,OAAO,IAAI,CAAC;MAChCE,IAAI,EAAE,IAAAC,yBAAgB,EAAC;QACnBJ,MAAM;QACNR,SAAS;QACTC;MACJ,CAAC;IACL,CAAC;EACL,CAAC,CAAC;EAEF,OAAO,IAAAY,wBAAe,EAAC;IACnBjB,KAAK,EAAEM,WAAW;IAClBJ,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC;EACJ,CAAC,CAAC;AACN,CAAC,EAAE,CAACL,KAAK,EAAEC,WAAW,EAAEC,WAAW,EAAEC,WAAW,EAAEC,SAAS,EAAEC,GAAG,CAAC,CAAC;AAACP,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AAQhE,MAAMmB,qBAAqB,GAAGA,CAAC;EAClCC,cAAc;EACdhB,WAAW;EACXE;AACyB,CAAC,KAC1B,IAAAV,cAAO,EACH,MACI,IAAAyB,6BAAoB,EAAC;EACjBD,cAAc;EACdhB,WAAW;EACXE;AACJ,CAAC,CAAC,EACN,CAACc,cAAc,EAAEhB,WAAW,EAAEE,GAAG,CACrC,CAAC;AAACP,OAAA,CAAAoB,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("motion/react");
+var _element = require("../../hooks/element");
+var _Masonry = require("./Masonry.context");
+var _Masonry2 = require("./Masonry.styles");
+var _Masonry3 = require("./Masonry.hooks");
+var _Masonry4 = require("./Masonry.utils");
+var _MasonryItem = _interopRequireWildcard(require("./masonry-item/MasonryItem"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const MasonryBase = ({
+  children,
+  gap = 8,
+  columnWidth = 80,
+  rowHeight = 80
+}) => {
+  const ref = (0, _react.useRef)(null);
+  const size = (0, _element.useElementSize)(ref);
+  const containerWidth = (size === null || size === void 0 ? void 0 : size.width) ?? 0;
+  const [itemHeights, setItemHeights] = (0, _react.useState)({});
+  const items = (0, _Masonry3.useMasonryItems)({
+    children
+  });
+  const columnCount = (0, _Masonry3.useMasonryColumnCount)({
+    containerWidth,
+    columnWidth,
+    gap
+  });
+  const layout = (0, _Masonry3.useMasonryLayout)({
+    items,
+    itemHeights,
+    columnCount,
+    columnWidth,
+    rowHeight,
+    gap
+  });
+  const registerItem = (0, _react.useCallback)((key, height) => {
+    setItemHeights(currentHeights => {
+      if (currentHeights[key] === height) {
+        return currentHeights;
+      }
+      return {
+        ...currentHeights,
+        [key]: height
+      };
+    });
+  }, []);
+  const contextValue = (0, _react.useMemo)(() => ({
+    registerItem
+  }), [registerItem]);
+  return /*#__PURE__*/_react.default.createElement(_Masonry.MasonryContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_Masonry2.StyledMasonry, {
+    ref: ref,
+    $height: layout.height
+  }, /*#__PURE__*/_react.default.createElement(_react2.AnimatePresence, null, items.map((item, index) => {
+    const key = (0, _Masonry4.getMasonryItemKey)(item, index);
+    const packedItem = layout.items[key];
+    if (!packedItem) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_MasonryItem.InternalMasonryItem, {
+      key: key,
+      itemKey: key,
+      x: packedItem.x,
+      y: packedItem.y,
+      width: packedItem.width
+    }, item.props.children);
+  }))));
+};
+MasonryBase.displayName = 'Masonry';
+const Masonry = Object.assign(MasonryBase, {
+  Item: _MasonryItem.default
+});
+var _default = exports.default = Masonry;
+//# sourceMappingURL=Masonry.js.map

package/lib/cjs/components/masonry/Masonry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.js","names":["_react","_interopRequireWildcard","require","_react2","_element","_Masonry","_Masonry2","_Masonry3","_Masonry4","_MasonryItem","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MasonryBase","children","gap","columnWidth","rowHeight","ref","useRef","size","useElementSize","containerWidth","width","itemHeights","setItemHeights","useState","items","useMasonryItems","columnCount","useMasonryColumnCount","layout","useMasonryLayout","registerItem","useCallback","key","height","currentHeights","contextValue","useMemo","createElement","MasonryContext","Provider","value","StyledMasonry","$height","AnimatePresence","map","item","index","getMasonryItemKey","packedItem","InternalMasonryItem","itemKey","x","y","props","displayName","Masonry","assign","Item","MasonryItem","_default","exports"],"sources":["../../../../src/components/masonry/Masonry.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\nimport { useElementSize } from '../../hooks/element';\nimport { MasonryComponent, MasonryItemProps, MasonryProps } from './Masonry.types';\nimport { MasonryContext } from './Masonry.context';\nimport { StyledMasonry } from './Masonry.styles';\nimport { useMasonryColumnCount, useMasonryItems, useMasonryLayout } from './Masonry.hooks';\nimport { getMasonryItemKey } from './Masonry.utils';\nimport MasonryItem, { InternalMasonryItem } from './masonry-item/MasonryItem';\n\nconst MasonryBase: FC<MasonryProps> = ({ children, gap = 8, columnWidth = 80, rowHeight = 80 }) => {\n    const ref = useRef<HTMLDivElement | null>(null);\n    const size = useElementSize(ref);\n\n    const containerWidth = size?.width ?? 0;\n\n    const [itemHeights, setItemHeights] = useState<Record<string, number>>({});\n\n    const items = useMasonryItems({ children });\n\n    const columnCount = useMasonryColumnCount({\n        containerWidth,\n        columnWidth,\n        gap,\n    });\n\n    const layout = useMasonryLayout({\n        items,\n        itemHeights,\n        columnCount,\n        columnWidth,\n        rowHeight,\n        gap,\n    });\n\n    const registerItem = useCallback((key: string, height: number) => {\n        setItemHeights((currentHeights) => {\n            if (currentHeights[key] === height) {\n                return currentHeights;\n            }\n\n            return {\n                ...currentHeights,\n                [key]: height,\n            };\n        });\n    }, []);\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem,\n        }),\n        [registerItem],\n    );\n\n    return (\n        <MasonryContext.Provider value={contextValue}>\n            <StyledMasonry ref={ref} $height={layout.height}>\n                <AnimatePresence>\n                    {items.map((item, index) => {\n                        const key = getMasonryItemKey(\n                            item as React.ReactElement<MasonryItemProps>,\n                            index,\n                        );\n\n                        const packedItem = layout.items[key];\n\n                        if (!packedItem) {\n                            return null;\n                        }\n\n                        return (\n                            <InternalMasonryItem\n                                key={key}\n                                itemKey={key}\n                                x={packedItem.x}\n                                y={packedItem.y}\n                                width={packedItem.width}\n                            >\n                                {item.props.children}\n                            </InternalMasonryItem>\n                        );\n                    })}\n                </AnimatePresence>\n            </StyledMasonry>\n        </MasonryContext.Provider>\n    );\n};\n\nMasonryBase.displayName = 'Masonry';\n\nconst Masonry = Object.assign(MasonryBase, {\n    Item: MasonryItem,\n}) as MasonryComponent;\n\nexport default Masonry;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAR,uBAAA,CAAAC,OAAA;AAA8E,SAAAD,wBAAAS,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAS,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE9E,MAAMkB,WAA6B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,GAAG,GAAG,CAAC;EAAEC,WAAW,GAAG,EAAE;EAAEC,SAAS,GAAG;AAAG,CAAC,KAAK;EAC/F,MAAMC,GAAG,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EAC/C,MAAMC,IAAI,GAAG,IAAAC,uBAAc,EAACH,GAAG,CAAC;EAEhC,MAAMI,cAAc,GAAG,CAAAF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,KAAI,CAAC;EAEvC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAyB,CAAC,CAAC,CAAC;EAE1E,MAAMC,KAAK,GAAG,IAAAC,yBAAe,EAAC;IAAEd;EAAS,CAAC,CAAC;EAE3C,MAAMe,WAAW,GAAG,IAAAC,+BAAqB,EAAC;IACtCR,cAAc;IACdN,WAAW;IACXD;EACJ,CAAC,CAAC;EAEF,MAAMgB,MAAM,GAAG,IAAAC,0BAAgB,EAAC;IAC5BL,KAAK;IACLH,WAAW;IACXK,WAAW;IACXb,WAAW;IACXC,SAAS;IACTF;EACJ,CAAC,CAAC;EAEF,MAAMkB,YAAY,GAAG,IAAAC,kBAAW,EAAC,CAACC,GAAW,EAAEC,MAAc,KAAK;IAC9DX,cAAc,CAAEY,cAAc,IAAK;MAC/B,IAAIA,cAAc,CAACF,GAAG,CAAC,KAAKC,MAAM,EAAE;QAChC,OAAOC,cAAc;MACzB;MAEA,OAAO;QACH,GAAGA,cAAc;QACjB,CAACF,GAAG,GAAGC;MACX,CAAC;IACL,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,YAAY,GAAG,IAAAC,cAAO,EACxB,OAAO;IACHN;EACJ,CAAC,CAAC,EACF,CAACA,YAAY,CACjB,CAAC;EAED,oBACIjD,MAAA,CAAAoB,OAAA,CAAAoC,aAAA,CAACnD,QAAA,CAAAoD,cAAc,CAACC,QAAQ;IAACC,KAAK,EAAEL;EAAa,gBACzCtD,MAAA,CAAAoB,OAAA,CAAAoC,aAAA,CAAClD,SAAA,CAAAsD,aAAa;IAAC1B,GAAG,EAAEA,GAAI;IAAC2B,OAAO,EAAEd,MAAM,CAACK;EAAO,gBAC5CpD,MAAA,CAAAoB,OAAA,CAAAoC,aAAA,CAACrD,OAAA,CAAA2D,eAAe,QACXnB,KAAK,CAACoB,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;IACxB,MAAMd,GAAG,GAAG,IAAAe,2BAAiB,EACzBF,IAAI,EACJC,KACJ,CAAC;IAED,MAAME,UAAU,GAAGpB,MAAM,CAACJ,KAAK,CAACQ,GAAG,CAAC;IAEpC,IAAI,CAACgB,UAAU,EAAE;MACb,OAAO,IAAI;IACf;IAEA,oBACInE,MAAA,CAAAoB,OAAA,CAAAoC,aAAA,CAAC/C,YAAA,CAAA2D,mBAAmB;MAChBjB,GAAG,EAAEA,GAAI;MACTkB,OAAO,EAAElB,GAAI;MACbmB,CAAC,EAAEH,UAAU,CAACG,CAAE;MAChBC,CAAC,EAAEJ,UAAU,CAACI,CAAE;MAChBhC,KAAK,EAAE4B,UAAU,CAAC5B;IAAM,GAEvByB,IAAI,CAACQ,KAAK,CAAC1C,QACK,CAAC;EAE9B,CAAC,CACY,CACN,CACM,CAAC;AAElC,CAAC;AAEDD,WAAW,CAAC4C,WAAW,GAAG,SAAS;AAEnC,MAAMC,OAAO,GAAGhD,MAAM,CAACiD,MAAM,CAAC9C,WAAW,EAAE;EACvC+C,IAAI,EAAEC;AACV,CAAC,CAAqB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3D,OAAA,GAERsD,OAAO","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMasonry = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledMasonry = exports.StyledMasonry = _styledComponents.default.div`
+    position: relative;
+    width: 100%;
+    height: ${({
+  $height
+}) => $height}px;
+`;
+//# sourceMappingURL=Masonry.styles.js.map

package/lib/cjs/components/masonry/Masonry.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledMasonry","exports","styled","div","$height"],"sources":["../../../../src/components/masonry/Masonry.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledMasonry = styled.div<{ $height: number }>`\n    position: relative;\n    width: 100%;\n    height: ${({ $height }) => $height}px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC5D;AACA;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC,CAAC","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Masonry.types.js.map

package/lib/cjs/components/masonry/Masonry.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.types.js","names":[],"sources":["../../../../src/components/masonry/Masonry.types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nexport interface MasonryProps {\n    children: ReactNode;\n    gap?: number;\n    columnWidth?: number;\n    rowHeight?: number;\n}\n\nexport interface MasonryItemProps {\n    children: ReactNode;\n    columns?: number;\n}\n\nexport interface MasonryContextValue {\n    registerItem: (key: string, height: number) => void;\n}\n\nexport interface MasonryLayoutItem {\n    key: string;\n    columns: number;\n    rows: number;\n}\n\nexport interface PackedMasonryItem {\n    key: string;\n    x: number;\n    y: number;\n    width: number;\n}\n\nexport interface PackedMasonryGrid {\n    items: Record<string, PackedMasonryItem>;\n    height: number;\n}\n\nexport interface InternalMasonryItemProps {\n    children: ReactNode;\n    itemKey: string;\n    x: number;\n    y: number;\n    width: number;\n}\n\nexport type MasonryChild = ReactElement<MasonryItemProps>;\n\nexport type MasonryComponent = React.FC<MasonryProps> & {\n    Item: React.FC<MasonryItemProps>;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.utils.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.packMasonryGrid = exports.getMasonryItemKey = exports.calculateRowSpan = exports.calculateColumnCount = void 0;
+const getMasonryItemKey = (item, index) => item.key != null ? String(item.key) : String(index);
+exports.getMasonryItemKey = getMasonryItemKey;
+const isAreaFree = ({
+  grid,
+  startColumn,
+  startRow,
+  columns,
+  rows,
+  columnCount
+}) => {
+  if (startColumn + columns > columnCount) {
+    return false;
+  }
+  for (let row = startRow; row < startRow + rows; row += 1) {
+    for (let column = startColumn; column < startColumn + columns; column += 1) {
+      var _grid$row;
+      if ((_grid$row = grid[row]) !== null && _grid$row !== void 0 && _grid$row[column]) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+const occupyArea = ({
+  grid,
+  startColumn,
+  startRow,
+  columns,
+  rows
+}) => {
+  for (let row = startRow; row < startRow + rows; row += 1) {
+    if (!grid[row]) {
+      // eslint-disable-next-line no-param-reassign
+      grid[row] = [];
+    }
+    for (let column = startColumn; column < startColumn + columns; column += 1) {
+      // eslint-disable-next-line no-param-reassign
+      grid[row][column] = true;
+    }
+  }
+};
+const packMasonryGrid = ({
+  items,
+  columnCount,
+  columnWidth,
+  rowHeight,
+  gap
+}) => {
+  const grid = [];
+  const packedItems = {};
+  let maxRow = 0;
+  items.forEach(item => {
+    const columns = Math.min(Math.max(item.columns, 1), columnCount);
+    const rows = Math.max(item.rows, 1);
+    let placed = false;
+    let row = 0;
+    while (!placed) {
+      for (let column = 0; column < columnCount; column += 1) {
+        const canPlaceItem = isAreaFree({
+          grid,
+          startColumn: column,
+          startRow: row,
+          columns,
+          rows,
+          columnCount
+        });
+        if (!canPlaceItem) {
+          continue;
+        }
+        occupyArea({
+          grid,
+          startColumn: column,
+          startRow: row,
+          columns,
+          rows
+        });
+        packedItems[item.key] = {
+          key: item.key,
+          x: column * (columnWidth + gap),
+          y: row * (rowHeight + gap),
+          width: columns * columnWidth + (columns - 1) * gap
+        };
+        maxRow = Math.max(maxRow, row + rows);
+        placed = true;
+        break;
+      }
+      if (!placed) {
+        row += 1;
+      }
+    }
+  });
+  return {
+    items: packedItems,
+    height: maxRow * rowHeight + Math.max(0, maxRow - 1) * gap
+  };
+};
+exports.packMasonryGrid = packMasonryGrid;
+const calculateColumnCount = ({
+  containerWidth,
+  columnWidth,
+  gap
+}) => {
+  if (!containerWidth) {
+    return 1;
+  }
+  return Math.max(1, Math.floor((containerWidth + gap) / (columnWidth + gap)));
+};
+exports.calculateColumnCount = calculateColumnCount;
+const calculateRowSpan = ({
+  height,
+  rowHeight,
+  gap
+}) => Math.max(1, Math.ceil((height + gap) / (rowHeight + gap)));
+exports.calculateRowSpan = calculateRowSpan;
+//# sourceMappingURL=Masonry.utils.js.map

package/lib/cjs/components/masonry/Masonry.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.utils.js","names":["getMasonryItemKey","item","index","key","String","exports","isAreaFree","grid","startColumn","startRow","columns","rows","columnCount","row","column","_grid$row","occupyArea","packMasonryGrid","items","columnWidth","rowHeight","gap","packedItems","maxRow","forEach","Math","min","max","placed","canPlaceItem","x","y","width","height","calculateColumnCount","containerWidth","floor","calculateRowSpan","ceil"],"sources":["../../../../src/components/masonry/Masonry.utils.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport {\n    MasonryItemProps,\n    MasonryLayoutItem,\n    PackedMasonryGrid,\n    PackedMasonryItem,\n} from './Masonry.types';\n\nexport const getMasonryItemKey = (item: ReactElement<MasonryItemProps>, index: number) =>\n    item.key != null ? String(item.key) : String(index);\n\ninterface IsAreaFreeParams {\n    grid: boolean[][];\n    startColumn: number;\n    startRow: number;\n    columns: number;\n    rows: number;\n    columnCount: number;\n}\n\nconst isAreaFree = ({\n    grid,\n    startColumn,\n    startRow,\n    columns,\n    rows,\n    columnCount,\n}: IsAreaFreeParams) => {\n    if (startColumn + columns > columnCount) {\n        return false;\n    }\n\n    for (let row = startRow; row < startRow + rows; row += 1) {\n        for (let column = startColumn; column < startColumn + columns; column += 1) {\n            if (grid[row]?.[column]) {\n                return false;\n            }\n        }\n    }\n\n    return true;\n};\n\ninterface OccupyAreaParams {\n    grid: boolean[][];\n    startColumn: number;\n    startRow: number;\n    columns: number;\n    rows: number;\n}\n\nconst occupyArea = ({ grid, startColumn, startRow, columns, rows }: OccupyAreaParams) => {\n    for (let row = startRow; row < startRow + rows; row += 1) {\n        if (!grid[row]) {\n            // eslint-disable-next-line no-param-reassign\n            grid[row] = [];\n        }\n\n        for (let column = startColumn; column < startColumn + columns; column += 1) {\n            // eslint-disable-next-line no-param-reassign\n            (grid[row] as boolean[])[column] = true;\n        }\n    }\n};\n\ninterface PackMasonryGridParams {\n    items: MasonryLayoutItem[];\n    columnCount: number;\n    columnWidth: number;\n    rowHeight: number;\n    gap: number;\n}\n\nexport const packMasonryGrid = ({\n    items,\n    columnCount,\n    columnWidth,\n    rowHeight,\n    gap,\n}: PackMasonryGridParams): PackedMasonryGrid => {\n    const grid: boolean[][] = [];\n    const packedItems: Record<string, PackedMasonryItem> = {};\n\n    let maxRow = 0;\n\n    items.forEach((item) => {\n        const columns = Math.min(Math.max(item.columns, 1), columnCount);\n        const rows = Math.max(item.rows, 1);\n\n        let placed = false;\n        let row = 0;\n\n        while (!placed) {\n            for (let column = 0; column < columnCount; column += 1) {\n                const canPlaceItem = isAreaFree({\n                    grid,\n                    startColumn: column,\n                    startRow: row,\n                    columns,\n                    rows,\n                    columnCount,\n                });\n\n                if (!canPlaceItem) {\n                    continue;\n                }\n\n                occupyArea({\n                    grid,\n                    startColumn: column,\n                    startRow: row,\n                    columns,\n                    rows,\n                });\n\n                packedItems[item.key] = {\n                    key: item.key,\n                    x: column * (columnWidth + gap),\n                    y: row * (rowHeight + gap),\n                    width: columns * columnWidth + (columns - 1) * gap,\n                };\n\n                maxRow = Math.max(maxRow, row + rows);\n                placed = true;\n                break;\n            }\n\n            if (!placed) {\n                row += 1;\n            }\n        }\n    });\n\n    return {\n        items: packedItems,\n        height: maxRow * rowHeight + Math.max(0, maxRow - 1) * gap,\n    };\n};\n\nexport const calculateColumnCount = ({\n    containerWidth,\n    columnWidth,\n    gap,\n}: {\n    containerWidth: number;\n    columnWidth: number;\n    gap: number;\n}) => {\n    if (!containerWidth) {\n        return 1;\n    }\n\n    return Math.max(1, Math.floor((containerWidth + gap) / (columnWidth + gap)));\n};\n\nexport const calculateRowSpan = ({\n    height,\n    rowHeight,\n    gap,\n}: {\n    height: number;\n    rowHeight: number;\n    gap: number;\n}) => Math.max(1, Math.ceil((height + gap) / (rowHeight + gap)));\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/masonry/masonry-item/MasonryItem.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InternalMasonryItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Masonry = require("../Masonry.context");
+var _MasonryItem = require("./MasonryItem.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const MasonryItem = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+const InternalMasonryItem = ({
+  children,
+  itemKey,
+  x,
+  y,
+  width
+}) => {
+  const ref = (0, _react.useRef)(null);
+  const {
+    registerItem
+  } = (0, _Masonry.useMasonryContext)();
+  (0, _react.useEffect)(() => {
+    const element = ref.current;
+    if (!element) {
+      return undefined;
+    }
+    let frameId;
+    const updateHeight = () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId);
+      }
+      frameId = window.requestAnimationFrame(() => {
+        registerItem(itemKey, element.getBoundingClientRect().height);
+      });
+    };
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(element);
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId);
+      }
+      observer.disconnect();
+    };
+  }, [itemKey, registerItem, width]);
+  return /*#__PURE__*/_react.default.createElement(_MasonryItem.StyledMasonryItem, {
+    ref: ref,
+    initial: {
+      opacity: 0,
+      scale: 0.96
+    },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      x,
+      y,
+      width
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.96
+    },
+    transition: {
+      type: 'spring',
+      stiffness: 320,
+      damping: 34,
+      mass: 0.85
+    }
+  }, children);
+};
+exports.InternalMasonryItem = InternalMasonryItem;
+MasonryItem.displayName = 'Masonry.Item';
+var _default = exports.default = MasonryItem;
+//# sourceMappingURL=MasonryItem.js.map

package/lib/cjs/components/masonry/masonry-item/MasonryItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasonryItem.js","names":["_react","_interopRequireWildcard","require","_Masonry","_MasonryItem","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MasonryItem","children","createElement","Fragment","InternalMasonryItem","itemKey","x","y","width","ref","useRef","registerItem","useMasonryContext","useEffect","element","current","undefined","frameId","updateHeight","window","cancelAnimationFrame","requestAnimationFrame","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","StyledMasonryItem","initial","opacity","scale","animate","exit","transition","type","stiffness","damping","mass","exports","displayName","_default"],"sources":["../../../../../src/components/masonry/masonry-item/MasonryItem.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef } from 'react';\nimport { InternalMasonryItemProps, MasonryItemProps } from '../Masonry.types';\nimport { useMasonryContext } from '../Masonry.context';\nimport { StyledMasonryItem } from './MasonryItem.styles';\n\nconst MasonryItem: FC<MasonryItemProps> = ({ children }) => <>{children}</>;\n\nexport const InternalMasonryItem: FC<InternalMasonryItemProps> = ({\n    children,\n    itemKey,\n    x,\n    y,\n    width,\n}) => {\n    const ref = useRef<HTMLDivElement | null>(null);\n    const { registerItem } = useMasonryContext();\n\n    useEffect(() => {\n        const element = ref.current;\n\n        if (!element) {\n            return undefined;\n        }\n\n        let frameId: number | undefined;\n\n        const updateHeight = () => {\n            if (frameId) {\n                window.cancelAnimationFrame(frameId);\n            }\n\n            frameId = window.requestAnimationFrame(() => {\n                registerItem(itemKey, element.getBoundingClientRect().height);\n            });\n        };\n\n        updateHeight();\n\n        const observer = new ResizeObserver(updateHeight);\n\n        observer.observe(element);\n\n        return () => {\n            if (frameId) {\n                window.cancelAnimationFrame(frameId);\n            }\n\n            observer.disconnect();\n        };\n    }, [itemKey, registerItem, width]);\n\n    return (\n        <StyledMasonryItem\n            ref={ref}\n            initial={{\n                opacity: 0,\n                scale: 0.96,\n            }}\n            animate={{\n                opacity: 1,\n                scale: 1,\n                x,\n                y,\n                width,\n            }}\n            exit={{\n                opacity: 0,\n                scale: 0.96,\n            }}\n            transition={{\n                type: 'spring',\n                stiffness: 320,\n                damping: 34,\n                mass: 0.85,\n            }}\n        >\n            {children}\n        </StyledMasonryItem>\n    );\n};\n\nMasonryItem.displayName = 'Masonry.Item';\n\nexport default MasonryItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/masonry/masonry-item/MasonryItem.styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMasonryItem = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("motion/react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledMasonryItem = exports.StyledMasonryItem = (0, _styledComponents.default)(_react.motion.div)`
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    will-change: transform, width;
+`;
+//# sourceMappingURL=MasonryItem.styles.js.map

package/lib/cjs/components/masonry/masonry-item/MasonryItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasonryItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","_react","e","__esModule","default","StyledMasonryItem","exports","styled","motion","div"],"sources":["../../../../../src/components/masonry/masonry-item/MasonryItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'motion/react';\n\nexport const StyledMasonryItem = styled(motion.div)`\n    position: absolute;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    will-change: transform, width;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/B,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/index.js

@@ -267,6 +267,12 @@ Object.defineProperty(exports, "ListItemContent", {
     return _ListItemContent.default;
   }
 });
+Object.defineProperty(exports, "Masonry", {
+  enumerable: true,
+  get: function () {
+    return _Masonry.default;
+  }
+});
 Object.defineProperty(exports, "MentionFinder", {
   enumerable: true,
   get: function () {
@@ -659,6 +665,7 @@ var _uploadFile = require("./utils/uploadFile");
 var _ComboBox2 = require("./components/combobox/ComboBox.types");
 var _skeleton = _interopRequireDefault(require("./components/skeleton"));
 var _types = require("./components/skeleton/types");
+var _Masonry = _interopRequireDefault(require("./components/masonry/Masonry"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //# sourceMappingURL=index.js.map