npm - @veeqo/ui - Versions diffs - 15.21.0 → 15.23.0 - Mend

@veeqo/ui 15.21.0 → 15.23.0

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 (32) hide show

package/dist/components/Card/Card.cjs CHANGED Viewed

@@ -39,7 +39,7 @@ const Footer = React__default.default.forwardRef(({ className, ...rest }, ref) =
 Footer.displayName = 'Card.Footer';
 Footer.toString = () => `.${FOOTER_STABLE_CLASS}`;
 /* --- Main Card component --- */
-const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
+const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, ...rest }) => {
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const toggleCollapsed = () => {
         setIsCollapsed(!isCollapsed);
@@ -50,7 +50,7 @@ const Card = ({ className, style, title, subtitle, headerTitleSlot, headerAction
     const bodyMarkup = (React__default.default.createElement(framerMotion.motion.div, { className: Card_module.body, animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.default.createElement(Section, null, children)));
     const footerMarkup = renderFooter !== undefined && React__default.default.createElement(Footer, null, renderFooter());
-    return (React__default.default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent },
+    return (React__default.default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent, ...rest },
         headerMarkup,
         bodyMarkup,
         footerMarkup));

package/dist/components/Card/Card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 \| 1 \| 2 \| 3 \| 4;\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerTitleSlot?: React.ReactNode;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\n/* --- Sub-components --- /\n\nexport interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children?: ReactNode;\n}\n\n/\n Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n /\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n <div\n ref={ref}\n className={buildClassnames([\n SURFACE_STABLE_CLASS,\n styles.surface,\n styles[`elevation-${elevation}`],\n accent ? styles[`accent-${accent}`] : undefined,\n className,\n ])}\n {...rest}\n >\n {children}\n </div>\n ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, ...rest }, ref) => (\n <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...rest }, ref) => (\n <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, ...rest }, ref) => (\n <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/ --- Main Card component --- */\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerTitleSlot,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const showHeader = title \|\| headerTitleSlot !== undefined;\n const headerMarkup = showHeader && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n titleSlot={headerTitleSlot}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) \|\| !collapsable;\n const bodyMarkup = (\n <motion.div\n className={styles.body}\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </motion.div>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React","buildClassnames","styles","useState","CardHeader","motion"],"mappings":";;;;;;;;;;;;;~~AASA~~,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AA+BD;;;;AAIG;AACH,MAAM,oBAAoB,GAAG,oBAAoB;AAEjD,MAAM,OAAO,GAAGA,sBAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC3DA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC;QACzB,oBAAoB;AACpB,QAAAC,WAAM,CAAC,OAAO;AACd,QAAAA,WAAM,CAAC,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC;AAChC,QAAA,MAAM,GAAGA,WAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAA,CAAE,CAAC,GAAG,SAAS;QAC/C,SAAS;AACV,KAAA,CAAC,KACE,IAAI,EAAA,EAEP,QAAQ,CACL,CACP,CACF;AACD,OAAO,CAAC,WAAW,GAAG,cAAc;AACpC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,CAAA,CAAE;AAEnD,MAAM,OAAO,GAAGF,sBAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACzF,CACF;AACD,OAAO,CAAC,WAAW,GAAG,cAAc;AAEpC,MAAM,SAAS,GAAGF,sBAAK,CAAC,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACvF,CACF;AACD,SAAS,CAAC,WAAW,GAAG,gBAAgB;AAExC,MAAM,mBAAmB,GAAG,mBAAmB;AAE/C,MAAM,MAAM,GAAGF,sBAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAAC,mBAAmB,EAAEC,WAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAC5G,CACF;AACD,MAAM,CAAC,WAAW,GAAG,aAAa;AAClC,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAA,CAAA,EAAI,mBAAmB,CAAA,CAAE;AAEjD;AAEO,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,~~GACF~~,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BH,sBAAA,CAAA,aAAA,CAACI,qBAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdJ,qCAACK,mBAAM,CAAC,GAAG,EAAA,EACT,SAAS,EAAEH,WAAM,CAAC,IAAI,EACtB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CAClB,CACd;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,sBAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;~~AAEpF~~,~~IAAA,~~QACEA,~~sBAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC~~,~~OAAO,IAAC,~~SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;~~QAC9E~~,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}
1	+ {"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport { DataAttributes } from '../types';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 \| 1 \| 2 \| 3 \| 4;\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerTitleSlot?: React.ReactNode;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n} & DataAttributes;\n\n/* --- Sub-components --- /\n\nexport interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children?: ReactNode;\n}\n\n/\n Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n /\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n <div\n ref={ref}\n className={buildClassnames([\n SURFACE_STABLE_CLASS,\n styles.surface,\n styles[`elevation-${elevation}`],\n accent ? styles[`accent-${accent}`] : undefined,\n className,\n ])}\n {...rest}\n >\n {children}\n </div>\n ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, ...rest }, ref) => (\n <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...rest }, ref) => (\n <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, ...rest }, ref) => (\n <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/ --- Main Card component --- */\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerTitleSlot,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n ...rest\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const showHeader = title \|\| headerTitleSlot !== undefined;\n const headerMarkup = showHeader && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n titleSlot={headerTitleSlot}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) \|\| !collapsable;\n const bodyMarkup = (\n <motion.div\n className={styles.body}\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </motion.div>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent} {...rest}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React","buildClassnames","styles","useState","CardHeader","motion"],"mappings":"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"}

package/dist/components/Card/Card.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { DataAttributes } from '../types';
 export type CardElevation = 0 | 1 | 2 | 3 | 4;
 type CardAction = {
     title: string;
@@ -18,14 +19,14 @@ export type CardProps = {
     children: ReactNode;
     onClose?: () => void;
     renderFooter?: () => ReactNode;
-};
+} & DataAttributes;
 export interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
     elevation?: CardElevation;
     accent?: 'info' | 'success' | 'error';
     children?: ReactNode;
 }
 export declare const Card: {
-    ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
+    ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, ...rest }: CardProps): React.JSX.Element;
     Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
     Section: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
     FullBleed: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Card/Card.js CHANGED Viewed

@@ -33,7 +33,7 @@ const Footer = React__default.forwardRef(({ className, ...rest }, ref) => (React
 Footer.displayName = 'Card.Footer';
 Footer.toString = () => `.${FOOTER_STABLE_CLASS}`;
 /* --- Main Card component --- */
-const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
+const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, ...rest }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const toggleCollapsed = () => {
         setIsCollapsed(!isCollapsed);
@@ -44,7 +44,7 @@ const Card = ({ className, style, title, subtitle, headerTitleSlot, headerAction
     const bodyMarkup = (React__default.createElement(motion.div, { className: styles.body, animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.createElement(Section, null, children)));
     const footerMarkup = renderFooter !== undefined && React__default.createElement(Footer, null, renderFooter());
-    return (React__default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent },
+    return (React__default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent, ...rest },
         headerMarkup,
         bodyMarkup,
         footerMarkup));

package/dist/components/Card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 \| 1 \| 2 \| 3 \| 4;\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerTitleSlot?: React.ReactNode;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\n/* --- Sub-components --- /\n\nexport interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children?: ReactNode;\n}\n\n/\n Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n /\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n <div\n ref={ref}\n className={buildClassnames([\n SURFACE_STABLE_CLASS,\n styles.surface,\n styles[`elevation-${elevation}`],\n accent ? styles[`accent-${accent}`] : undefined,\n className,\n ])}\n {...rest}\n >\n {children}\n </div>\n ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, ...rest }, ref) => (\n <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...rest }, ref) => (\n <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, ...rest }, ref) => (\n <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/ --- Main Card component --- */\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerTitleSlot,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const showHeader = title \|\| headerTitleSlot !== undefined;\n const headerMarkup = showHeader && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n titleSlot={headerTitleSlot}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) \|\| !collapsable;\n const bodyMarkup = (\n <motion.div\n className={styles.body}\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </motion.div>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;;;;~~AASA~~,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AA+BD;;;;AAIG;AACH,MAAM,oBAAoB,GAAG,oBAAoB;AAEjD,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC3DA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;QACzB,oBAAoB;AACpB,QAAA,MAAM,CAAC,OAAO;AACd,QAAA,MAAM,CAAC,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC;AAChC,QAAA,MAAM,GAAG,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAA,CAAE,CAAC,GAAG,SAAS;QAC/C,SAAS;AACV,KAAA,CAAC,KACE,IAAI,EAAA,EAEP,QAAQ,CACL,CACP,CACF;AACD,OAAO,CAAC,WAAW,GAAG,cAAc;AACpC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,CAAA,CAAE;AAEnD,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACzF,CACF;AACD,OAAO,CAAC,WAAW,GAAG,cAAc;AAEpC,MAAM,SAAS,GAAGA,cAAK,CAAC,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACvF,CACF;AACD,SAAS,CAAC,WAAW,GAAG,gBAAgB;AAExC,MAAM,mBAAmB,GAAG,mBAAmB;AAE/C,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAC5G,CACF;AACD,MAAM,CAAC,WAAW,GAAG,aAAa;AAClC,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAA,CAAA,EAAI,mBAAmB,CAAA,CAAE;AAEjD;AAEO,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,~~GACF~~,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,6BAAC,MAAM,CAAC,GAAG,EAAA,EACT,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CAClB,CACd;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;~~AAEpF~~,~~IAAA,~~QACEA,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC~~,~~OAAO,IAAC,~~SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;~~QAC9E~~,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}
1	+ {"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport { DataAttributes } from '../types';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 \| 1 \| 2 \| 3 \| 4;\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerTitleSlot?: React.ReactNode;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n} & DataAttributes;\n\n/* --- Sub-components --- /\n\nexport interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children?: ReactNode;\n}\n\n/\n Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n /\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n <div\n ref={ref}\n className={buildClassnames([\n SURFACE_STABLE_CLASS,\n styles.surface,\n styles[`elevation-${elevation}`],\n accent ? styles[`accent-${accent}`] : undefined,\n className,\n ])}\n {...rest}\n >\n {children}\n </div>\n ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, ...rest }, ref) => (\n <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...rest }, ref) => (\n <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n ({ className, ...rest }, ref) => (\n <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/ --- Main Card component --- */\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerTitleSlot,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n ...rest\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const showHeader = title \|\| headerTitleSlot !== undefined;\n const headerMarkup = showHeader && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n titleSlot={headerTitleSlot}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) \|\| !collapsable;\n const bodyMarkup = (\n <motion.div\n className={styles.body}\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </motion.div>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent} {...rest}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.cjs CHANGED Viewed

@@ -42,7 +42,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, ...rest }) => {
     var _a;
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
@@ -168,7 +168,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         }
         return React__default.default.createElement(Body.Body, { ...bodyProps });
     };
-    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, id: id, className: className, "aria-label": ariaLabel },
+    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, id: id, className: className, "aria-label": ariaLabel, ...rest },
         enableColumnResizing && React__default.default.createElement(Columns.Columns, { table: table }),
         React__default.default.createElement(Header.Header, { table: table }),
         renderBody(),

package/dist/components/DataGrid/DataGrid.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/*\n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n hideSelectionForRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n /\n Mutable object to track shift key state and last selected row for range selection.\n /\n const rangeSelectionState = useRef({\n lastSelectedRowId: undefined as string \| undefined,\n isShiftKeyPressed: false,\n }).current;\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n const allDisabledRows = useMemo(() => {\n const unique = new Set(disabledRows \|\| []);\n if (hideSelectionForRows) {\n hideSelectionForRows.forEach((rowId) => unique.add(rowId));\n }\n return Array.from(unique);\n }, [disabledRows, hideSelectionForRows]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\n /\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows: allDisabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n const showExpandButton = rowGrouping?.showExpandButton ?? true;\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n meta: {\n rangeSelectionState,\n showExpandButton,\n hideSelectionForRows,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}
1	+ {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/*\n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n hideSelectionForRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n ...rest\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n /\n Mutable object to track shift key state and last selected row for range selection.\n /\n const rangeSelectionState = useRef({\n lastSelectedRowId: undefined as string \| undefined,\n isShiftKeyPressed: false,\n }).current;\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n const allDisabledRows = useMemo(() => {\n const unique = new Set(disabledRows \|\| []);\n if (hideSelectionForRows) {\n hideSelectionForRows.forEach((rowId) => unique.add(rowId));\n }\n return Array.from(unique);\n }, [disabledRows, hideSelectionForRows]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\n /\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows: allDisabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n const showExpandButton = rowGrouping?.showExpandButton ?? true;\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n meta: {\n rangeSelectionState,\n showExpandButton,\n hideSelectionForRows,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n {...rest}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.d.ts CHANGED Viewed

@@ -16,4 +16,4 @@ import { DataGridProps } from './types';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, "aria-label": ariaLabel, ...rest }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js CHANGED Viewed

@@ -36,7 +36,7 @@ import { useExpandedState } from './hooks/useExpandedState.js';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, ...rest }) => {
     var _a;
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
@@ -162,7 +162,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         }
         return React__default.createElement(Body, { ...bodyProps });
     };
-    return (React__default.createElement(GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, id: id, className: className, "aria-label": ariaLabel },
+    return (React__default.createElement(GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, id: id, className: className, "aria-label": ariaLabel, ...rest },
         enableColumnResizing && React__default.createElement(Columns, { table: table }),
         React__default.createElement(Header, { table: table }),
         renderBody(),

package/dist/components/DataGrid/DataGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/*\n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n hideSelectionForRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n /\n Mutable object to track shift key state and last selected row for range selection.\n /\n const rangeSelectionState = useRef({\n lastSelectedRowId: undefined as string \| undefined,\n isShiftKeyPressed: false,\n }).current;\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n const allDisabledRows = useMemo(() => {\n const unique = new Set(disabledRows \|\| []);\n if (hideSelectionForRows) {\n hideSelectionForRows.forEach((rowId) => unique.add(rowId));\n }\n return Array.from(unique);\n }, [disabledRows, hideSelectionForRows]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\n /\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows: allDisabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n const showExpandButton = rowGrouping?.showExpandButton ?? true;\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n meta: {\n rangeSelectionState,\n showExpandButton,\n hideSelectionForRows,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\n/*\n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n hideSelectionForRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n ...rest\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n /\n Mutable object to track shift key state and last selected row for range selection.\n /\n const rangeSelectionState = useRef({\n lastSelectedRowId: undefined as string \| undefined,\n isShiftKeyPressed: false,\n }).current;\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n const allDisabledRows = useMemo(() => {\n const unique = new Set(disabledRows \|\| []);\n if (hideSelectionForRows) {\n hideSelectionForRows.forEach((rowId) => unique.add(rowId));\n }\n return Array.from(unique);\n }, [disabledRows, hideSelectionForRows]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\n /\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows: allDisabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n const showExpandButton = rowGrouping?.showExpandButton ?? true;\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n onColumnSizingChange,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n meta: {\n rangeSelectionState,\n showExpandButton,\n hideSelectionForRows,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n {...rest}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs CHANGED Viewed

@@ -29,7 +29,7 @@ const gridContainerClassname = buildClassnames.buildClassnames([GridContainer_mo
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).
  */
-const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, }) => {
+const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, ...rest }) => {
     const { pinnedColumnLayoutStyles } = usePinnedColumnLayout.usePinnedColumnLayout({ table });
     const { scrollPosition, onScroll, enableTransition } = useScrollPosition.useScrollPosition({ containerRef });
     // CSS variables to control pinned column shadow visibility
@@ -40,7 +40,7 @@ const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ar
         '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',
     };
     return (React__default.default.createElement(Container.Container, { ref: containerRef, borderMode: borderMode, style: containerStyles, onScroll: onScroll },
-        React__default.default.createElement("table", { id: id, ref: tableRef, className: buildClassnames.buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {
+        React__default.default.createElement("table", { ...rest, id: id, ref: tableRef, className: buildClassnames.buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {
                 tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
                 '--density': index.theme.sizes[density],
                 ...pinnedColumnLayoutStyles,

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' \| 'className'> & {\n /*\n Reference to be used for the outer container element.\n /\n containerRef?: RefObject<HTMLDivElement \| null>;\n\n /\n Reference to be used for the table element.\n /\n tableRef?: RefObject<HTMLTableElement \| null>;\n\n /\n Border mode.\n /\n borderMode: BorderMode;\n\n /\n Additional container styles.\n /\n containerStyles?: CSSProperties;\n\n /\n ARIA roles used in the grid.\n /\n ariaRoles: AriaRoles;\n\n /\n Whether resizeable columns are enabled or not.\n /\n enableResizeableColumns: boolean;\n\n /\n Density of the grid.\n /\n density: keyof SizeScale;\n\n /\n The TanStack Table instance.\n /\n table: Table<any>;\n\n /\n Child elements (table contents).\n /\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/\n The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition \|\| scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows \|\| scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows \|\| scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;~~AAgEA~~,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,~~GACJ~~,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;~~QAElBD~~,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,~~EACE~~,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
1	+ {"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { DataAttributes } from '../../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' \| 'className'> &\n DataAttributes & {\n /*\n Reference to be used for the outer container element.\n /\n containerRef?: RefObject<HTMLDivElement \| null>;\n\n /\n Reference to be used for the table element.\n /\n tableRef?: RefObject<HTMLTableElement \| null>;\n\n /\n Border mode.\n /\n borderMode: BorderMode;\n\n /\n Additional container styles.\n /\n containerStyles?: CSSProperties;\n\n /\n ARIA roles used in the grid.\n /\n ariaRoles: AriaRoles;\n\n /\n Whether resizeable columns are enabled or not.\n /\n enableResizeableColumns: boolean;\n\n /\n Density of the grid.\n /\n density: keyof SizeScale;\n\n /\n The TanStack Table instance.\n /\n table: Table<any>;\n\n /\n Child elements (table contents).\n /\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/\n The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n ...rest\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition \|\| scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows \|\| scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows \|\| scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n {...rest}\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACY,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;AAElB,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,IAAI,EACR,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.d.ts CHANGED Viewed

@@ -3,7 +3,8 @@ import { Table } from '@tanstack/react-table';
 import { SizeScale } from 'Theme/modules/sizes';
 import { BorderMode } from '../../types/enums';
 import { AriaRoles } from '../../types';
-type GridContainerProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {
+import { DataAttributes } from '../../../types';
+type GridContainerProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & DataAttributes & {
     /**
      * Reference to be used for the outer container element.
      */
@@ -45,5 +46,5 @@ type GridContainerProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTMLAt
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).
  */
-export declare const GridContainer: ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, "aria-label": ariaLabel, }: GridContainerProps) => React.JSX.Element;
+export declare const GridContainer: ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, "aria-label": ariaLabel, ...rest }: GridContainerProps) => React.JSX.Element;
 export {};

package/dist/components/DataGrid/components/GridContainer/GridContainer.js CHANGED Viewed

@@ -23,7 +23,7 @@ const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).
  */
-const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, }) => {
+const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, ...rest }) => {
     const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });
     const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });
     // CSS variables to control pinned column shadow visibility
@@ -34,7 +34,7 @@ const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ar
         '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',
     };
     return (React__default.createElement(Container, { ref: containerRef, borderMode: borderMode, style: containerStyles, onScroll: onScroll },
-        React__default.createElement("table", { id: id, ref: tableRef, className: buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {
+        React__default.createElement("table", { ...rest, id: id, ref: tableRef, className: buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {
                 tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
                 '--density': theme.sizes[density],
                 ...pinnedColumnLayoutStyles,

package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' \| 'className'> & {\n /*\n Reference to be used for the outer container element.\n /\n containerRef?: RefObject<HTMLDivElement \| null>;\n\n /\n Reference to be used for the table element.\n /\n tableRef?: RefObject<HTMLTableElement \| null>;\n\n /\n Border mode.\n /\n borderMode: BorderMode;\n\n /\n Additional container styles.\n /\n containerStyles?: CSSProperties;\n\n /\n ARIA roles used in the grid.\n /\n ariaRoles: AriaRoles;\n\n /\n Whether resizeable columns are enabled or not.\n /\n enableResizeableColumns: boolean;\n\n /\n Density of the grid.\n /\n density: keyof SizeScale;\n\n /\n The TanStack Table instance.\n /\n table: Table<any>;\n\n /\n Child elements (table contents).\n /\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/\n The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition \|\| scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows \|\| scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows \|\| scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;~~AAgEA~~,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,~~GACJ~~,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;~~QAElBA~~,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,~~EACE~~,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
1	+ {"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { DataAttributes } from '../../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' \| 'className'> &\n DataAttributes & {\n /*\n Reference to be used for the outer container element.\n /\n containerRef?: RefObject<HTMLDivElement \| null>;\n\n /\n Reference to be used for the table element.\n /\n tableRef?: RefObject<HTMLTableElement \| null>;\n\n /\n Border mode.\n /\n borderMode: BorderMode;\n\n /\n Additional container styles.\n /\n containerStyles?: CSSProperties;\n\n /\n ARIA roles used in the grid.\n /\n ariaRoles: AriaRoles;\n\n /\n Whether resizeable columns are enabled or not.\n /\n enableResizeableColumns: boolean;\n\n /\n Density of the grid.\n /\n density: keyof SizeScale;\n\n /\n The TanStack Table instance.\n /\n table: Table<any>;\n\n /\n Child elements (table contents).\n /\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/\n The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n ...rest\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition \|\| scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows \|\| scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows \|\| scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n {...rest}\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACY,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,IAAI,EACR,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/types/DataGridProps.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { AriaAttributes } from 'react';
 import { SizeScale } from 'Theme/modules/sizes';
+import { DataAttributes } from '../../types';
 import { BorderMode, ResizeMode, SelectionMode } from './enums';
 import { ColumnDefinition } from './ColumnDefinition';
 import { SortState } from './SortState';
@@ -8,7 +9,7 @@ import { RowGroupingConfiguration } from './RowGroupingConfiguration';
 import { ColumnWidths } from './ColumnWidths';
 import { EmptyState } from './EmptyState';
 import { RowThemeMap } from './RowTheme';
-export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTMLAttributes<HTMLTableElement>, 'className' | 'id'> & {
+export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTMLAttributes<HTMLTableElement>, 'className' | 'id'> & DataAttributes & {
     /** General config */
     /**
      * Density, controls the spacing between rows in the table.

package/dist/icons/custom/components/CreditIcon.cjs CHANGED Viewed

@@ -22,13 +22,13 @@ function _interopNamespaceCompat(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
-const CreditIcon = (props) => (React__namespace.createElement("svg", { viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Veeqo Credits", ...props },
-    React__namespace.createElement("path", { d: "M14.036 27.93c7.622 0 13.8-6.179 13.8-13.8 0-7.622-6.178-13.8-13.8-13.8-7.621 0-13.8 6.178-13.8 13.8 0 7.621 6.179 13.8 13.8 13.8Z", fill: "#05AD12" }),
-    React__namespace.createElement("path", { d: "m20.928 2.949-1.542-.918-1.059 1.78 1.542.917 1.059-1.78ZM10.512 25.048l-2.863-1.576-.998 1.813 2.862 1.576.999-1.813Zm-3.198-2.01-.937-.551-1.05 1.784.937.55 1.05-1.783ZM22.031 3.264l-.566-.337-1.059 1.78.566.336 1.059-1.779Z", fill: "#fff" }),
-    React__namespace.createElement("path", { d: "M14.036 27.628c7.455 0 13.498-6.043 13.498-13.498 0-7.455-6.043-13.498-13.498-13.498C6.581.632.538 6.675.538 14.13c0 7.455 6.043 13.498 13.498 13.498Z", stroke: "#070F17", strokeWidth: ".574" }),
-    React__namespace.createElement("path", { d: "M14.036 25.17c6.097 0 11.04-4.943 11.04-11.04 0-6.097-4.943-11.04-11.04-11.04-6.097 0-11.04 4.943-11.04 11.04 0 6.097 4.943 11.04 11.04 11.04Z", fill: "#fff", stroke: "#070F17", strokeWidth: ".574" }),
-    React__namespace.createElement("path", { d: "M13.897 20.582c-.905 0-1.723-.155-2.454-.463-.72-.31-1.29-.754-1.711-1.335-.422-.58-.639-1.267-.651-2.057h2.79c.036.53.222.951.557 1.26.347.309.818.463 1.413.463.608 0 1.085-.142 1.432-.426.347-.297.52-.68.52-1.15 0-.382-.117-.697-.352-.944a2.366 2.366 0 0 0-.893-.575c-.347-.148-.83-.309-1.45-.482-.844-.247-1.532-.488-2.065-.723a3.824 3.824 0 0 1-1.357-1.094c-.372-.494-.558-1.149-.558-1.964 0-.766.192-1.434.576-2.002.385-.568.924-1 1.618-1.298.695-.308 1.488-.463 2.38-.463 1.34 0 2.424.328 3.255.982.843.643 1.308 1.545 1.395 2.707h-2.864a1.443 1.443 0 0 0-.577-1.094c-.347-.297-.812-.445-1.394-.445-.509 0-.918.13-1.228.39-.297.259-.446.636-.446 1.13 0 .346.112.636.335.871.235.223.52.408.855.556.347.136.83.297 1.45.482.844.247 1.532.495 2.065.742.533.247.991.617 1.376 1.112.384.494.576 1.143.576 1.946 0 .692-.18 1.335-.539 1.928-.36.593-.886 1.069-1.58 1.427-.695.346-1.52.519-2.474.519Z", fill: "#196F3F" }),
-    React__namespace.createElement("path", { d: "M13.322 6.135h.928v15.771h-.928V6.136Z", fill: "#196F3F" })));
+const CreditIcon = (props) => (React__namespace.createElement("svg", { viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Veeqo Credits", ...props },
+    React__namespace.createElement("path", { fill: "#1da563", d: "M31.361 17.28c0 8.597-6.813 14.388-15.411 14.388S.383 24.698.383 16.101 5.12 1.28 16.103.267C28.16.64 31.36 8.682 31.36 17.28" }),
+    React__namespace.createElement("path", { fill: "#1da563", d: "M16 0C5.753 0 0 5.753 0 16s5.753 16 16 16 16-5.753 16-16S26.247 0 16 0m0 31.02C6.654 31.02.878 25.351.878 16S6.654.992 16 .992C25.351.992 31.21 6.654 31.21 16S25.347 31.02 16 31.02" }),
+    React__namespace.createElement("path", { fill: "#fff", d: "M12.868 4.825a4.45 4.45 0 0 1 6.293 0l8.043 8.043a4.45 4.45 0 0 1 0 6.293l-8.043 8.043a4.45 4.45 0 0 1-6.293 0L4.825 19.16a4.45 4.45 0 0 1 0-6.292z" }),
+    React__namespace.createElement("path", { stroke: "#1da563", d: "M12.868 4.825a4.45 4.45 0 0 1 6.293 0l8.043 8.043a4.45 4.45 0 0 1 0 6.293l-8.043 8.043a4.45 4.45 0 0 1-6.293 0L4.825 19.16a4.45 4.45 0 0 1 0-6.292z" }),
+    React__namespace.createElement("path", { fill: "#065931", d: "M16.238 7.823c.345 0 .624.279.625.623v1.111c1.513.292 2.807 1.336 3.354 2.792a.936.936 0 0 1-1.752.658c-.37-.984-1.379-1.67-2.455-1.67h-.088c-.818-.013-1.628.277-2.097.743-.312.308-.47.686-.471 1.122a1.524 1.524 0 0 0 1.303 1.526l3.01.531c1.653.24 2.875 1.66 2.875 3.375v.157a1 1 0 0 1-.005.093c-.193 1.914-1.69 3.339-3.674 3.61v1.071c0 .344-.28.623-.625.623h-.622a.624.624 0 0 1-.624-.623v-1.151c-1.437-.337-2.655-1.351-3.182-2.75a.936.936 0 0 1 1.75-.66c.37.983 1.381 1.67 2.456 1.67h.089c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.419-1.303-1.528l-3.01-.532c-1.65-.239-2.87-1.654-2.875-3.363v-.017a3.39 3.39 0 0 1 1.024-2.442c.626-.62 1.514-1.044 2.484-1.208V8.446c0-.344.28-.623.624-.623z" }),
+    React__namespace.createElement("path", { stroke: "#1da563", d: "M16.238 7.823c.345 0 .624.279.625.623v1.111c1.513.292 2.807 1.336 3.354 2.792a.936.936 0 0 1-1.752.658c-.37-.984-1.379-1.67-2.455-1.67h-.088c-.818-.013-1.628.277-2.097.743-.312.308-.47.686-.471 1.122a1.524 1.524 0 0 0 1.303 1.526l3.01.531c1.653.24 2.875 1.66 2.875 3.375v.157a1 1 0 0 1-.005.093c-.193 1.914-1.69 3.339-3.674 3.61v1.071c0 .344-.28.623-.625.623h-.622a.624.624 0 0 1-.624-.623v-1.151c-1.437-.337-2.655-1.351-3.182-2.75a.936.936 0 0 1 1.75-.66c.37.983 1.381 1.67 2.456 1.67h.089c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.419-1.303-1.528l-3.01-.532c-1.65-.239-2.87-1.654-2.875-3.363v-.017a3.39 3.39 0 0 1 1.024-2.442c.626-.62 1.514-1.044 2.484-1.208V8.446c0-.344.28-.623.624-.623z" })));
 exports.CreditIcon = CreditIcon;
 //# sourceMappingURL=CreditIcon.cjs.map

package/dist/icons/custom/components/CreditIcon.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreditIcon.cjs","sources":["../../../../src/icons/custom/components/CreditIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const CreditIcon = (props: IconComponentProps) => (\n <svg\n viewBox=\"0 0 28 28\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"Veeqo Credits\"\n {...props}\n >\n <path\n d=\"~~M14~~.~~036~~ 27.~~93c7.622~~ ~~0 13~~.8-6.~~179~~ 13.8-13.8 ~~0-7~~.~~622-6~~.~~178-13~~.~~8-13~~.~~8-13~~.~~8-7~~.~~621~~ ~~0-13~~.8 6.~~178-13~~.~~8 13~~.~~8 0 7~~.~~621~~ 6.~~179~~ 13.8 13.8 13.8Z\"\n fill=\"#~~05AD12~~\"\n ~~/>\n <path\n~~ d=\"~~m20.928~~ 2.~~949-1.542-.918-1.059~~ 1.78 1.~~542.917~~ ~~1.059~~-1.~~78ZM10.512~~ ~~25.048l~~-2.~~863-1.576-.998~~ ~~1.813~~ ~~2.862~~ 1.~~576~~.~~999-1~~.~~813Zm-3~~.~~198-2~~.~~01-.937-.551-1~~.05 1.~~784~~.~~937.55~~ 1.~~05-1~~.~~783ZM22~~.~~031~~ 3.~~264l-.566-.337-1~~.~~059~~ 1.78.~~566~~.~~336~~ 1.~~059-1.779Z~~\"\n fill=\"#fff\"\n ~~/>\n <path\n~~ d=\"~~M14~~.~~036~~ 27.~~628c7~~.~~455~~ 0 ~~13.498-~~6.043 13.~~498-13~~.~~498~~ 0-7.~~455~~-6.043~~-13~~.~~498-13~~.~~498-13~~.~~498C6.581.632.538~~ 6.~~675.538~~ 14.~~13c0~~ 7.~~455 6~~.~~043~~ 13.~~498~~ ~~13.498~~ 13.~~498Z~~\"\n stroke=\"#~~070F17~~\"\n ~~strokeWidth=\".574\"\n />\n <path\n~~ d=\"~~M14~~.~~036~~ 25.~~17c6~~.~~097~~ ~~0 11.04-~~4.~~943~~ ~~11.04-11.04~~ 0-6.~~097-4~~.~~943-11~~.~~04-11~~.~~04-11~~.~~04-~~6.~~097 0~~-11.04 4.~~943-11~~.04 11.04 0 6.~~097~~ 4.~~943~~ 11.04 11.04 11.~~04Z~~\"\n ~~fill=\"#fff~~\"\n ~~stroke~~=\"#~~070F17~~\"\n ~~strokeWidth=\".574\"\n />\n <path\n~~ d=\"~~M13~~.~~897~~ 20.~~582c-.905~~ 0-1.~~723-.155-~~2.~~454~~-.~~463~~-.~~72-.31~~-1.~~29-.754~~-1.~~711~~-1.~~335~~-.~~422~~-.58-.~~639~~-1.~~267-.651~~-2.~~057h2~~.~~79c~~.~~036~~.53.~~222~~.~~951~~.~~557~~ 1.26.~~347~~.~~309~~.~~818~~.~~463~~ 1.~~413~~.~~463~~.~~608~~ 0 1.~~085~~-.~~142~~ 1.~~432-.426~~.~~347-.297~~.~~52-.68.52~~-1.15 0-.~~382~~-.~~117~~-.~~697-.352-.944a2~~.~~366 2~~.~~366~~ 0 0 0-.~~893~~-.~~575c-.347-.148-.83-.309~~-1.~~45-.482-.844-.247~~-1.~~532~~-.~~488~~-2.~~065-.723a3~~.~~824~~ 3.~~824~~ 0 0 1-1.~~357~~-1.~~094c~~-.~~372~~-.~~494~~-.~~558~~-1.~~149~~-.~~558~~-1.~~964 0~~-.~~766~~.~~192~~-1.~~434.576~~-2.~~002~~.~~385~~-.~~568~~.~~924-~~1 1.~~618~~-1.~~298~~.~~695~~-.~~308~~ 1.~~488-.463~~ 2.38-.~~463~~ 1.34 0 2.~~424~~.~~328 3~~.~~255~~.~~982~~.~~843~~.~~643~~ 1.~~308~~ 1.~~545~~ 1.~~395~~ 2.~~707h-2~~.~~864a1~~.~~443~~ ~~1.443~~ 0 0 ~~0-.577~~-1.~~094c~~-.~~347~~-.~~297-.812-.445~~-1.~~394~~-.~~445~~-.~~509 0~~-.~~918.13~~-1.~~228~~.39-.~~297~~.~~259~~-.~~446~~.~~636~~-.~~446~~ 1.13 0 .~~346~~.~~112~~.~~636~~.~~335~~.~~871~~.~~235~~.~~223~~.52.~~408~~.~~855~~.~~556~~.~~347~~.~~136~~.83.~~297~~ 1.45.~~482~~.~~844~~.~~247~~ 1.~~532~~.~~495~~ 2.~~065~~.~~742~~.~~533~~.~~247~~.~~991~~.~~617~~ 1~~.376~~ 1.~~112~~.~~384~~.~~494~~.~~576~~ 1.~~143~~.~~576~~ 1.~~946~~ 0 .~~692~~-.18 1.~~335-.539~~ 1.~~928~~-.~~36.593~~-.~~886~~ 1.~~069~~-1.58 1.~~427~~-.~~695~~.~~346~~-1.52.~~519~~-2.~~474~~.~~519Z\"\n fill=\"#196F3F\"\n />\n <path~~ ~~d=\"M13~~.~~322~~ 6.~~135h~~.~~928v15~~.~~771h~~-.~~928V6~~.~~136Z~~\" ~~fill=\"#196F3F~~\" />\n </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,UAAU,GAAG,CAAC,KAAyB,MAClDA,gBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,YAAA,EACvB,eAAe,EAAA,GACtB,KAAK,EAAA;AAET,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC~~,EAAC,~~oIAAoI~~,~~EACtI~~,~~IAAI~~,EAAC,~~SAAS,~~EAAA,~~CACd~~;AACF,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC~~,EAAC,~~oOAAoO~~,~~EACtO~~,~~IAAI~~,EAAC,~~MAAM~~,EAAA,~~CACX~~;~~IACFA~~,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC~~,EAAC,~~wJAAwJ,EAC1J,~~MAAM,~~EAAC~~,~~SAAS~~,~~EAChB,WAAW,~~EAAC,~~MAAM~~,EAAA,~~CAClB~~;AACF,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC,EAAC,gJAAgJ,EAClJ,IAAI,EAAC,~~MAAM,~~EACX,MAAM,~~EAAC,SAAS,EAChB,~~WAAW~~,EAAC,~~MAAM~~,EAAA,~~CAClB~~;AACF,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC~~,EAAC,~~m4BAAm4B~~,~~EACr4B~~,~~IAAI~~,EAAC,~~SAAS,~~EAAA,~~CACd~~;IACFA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,~~EAAM~~,~~CAAC~~,EAAC,~~wCAAwC~~,~~EAAC~~,~~IAAI~~,EAAC,~~SAAS,~~EAAA,~~CAAG~~,~~CAC9D~~;;;;"}
1	+ {"version":3,"file":"CreditIcon.cjs","sources":["../../../../src/icons/custom/components/CreditIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const CreditIcon = (props: IconComponentProps) => (\n <svg\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"Veeqo Credits\"\n {...props}\n >\n <path\n fill=\"#1da563\"\n d=\"M31.361 17.28c0 8.597-6.813 14.388-15.411 14.388S.383 24.698.383 16.101 5.12 1.28 16.103.267C28.16.64 31.36 8.682 31.36 17.28\"\n />\n <path\n fill=\"#1da563\"\n d=\"M16 0C5.753 0 0 5.753 0 16s5.753 16 16 16 16-5.753 16-16S26.247 0 16 0m0 31.02C6.654 31.02.878 25.351.878 16S6.654.992 16 .992C25.351.992 31.21 6.654 31.21 16S25.347 31.02 16 31.02\"\n />\n <path\n fill=\"#fff\"\n d=\"M12.868 4.825a4.45 4.45 0 0 1 6.293 0l8.043 8.043a4.45 4.45 0 0 1 0 6.293l-8.043 8.043a4.45 4.45 0 0 1-6.293 0L4.825 19.16a4.45 4.45 0 0 1 0-6.292z\"\n />\n <path\n stroke=\"#1da563\"\n d=\"M12.868 4.825a4.45 4.45 0 0 1 6.293 0l8.043 8.043a4.45 4.45 0 0 1 0 6.293l-8.043 8.043a4.45 4.45 0 0 1-6.293 0L4.825 19.16a4.45 4.45 0 0 1 0-6.292z\"\n />\n <path\n fill=\"#065931\"\n d=\"M16.238 7.823c.345 0 .624.279.625.623v1.111c1.513.292 2.807 1.336 3.354 2.792a.936.936 0 0 1-1.752.658c-.37-.984-1.379-1.67-2.455-1.67h-.088c-.818-.013-1.628.277-2.097.743-.312.308-.47.686-.471 1.122a1.524 1.524 0 0 0 1.303 1.526l3.01.531c1.653.24 2.875 1.66 2.875 3.375v.157a1 1 0 0 1-.005.093c-.193 1.914-1.69 3.339-3.674 3.61v1.071c0 .344-.28.623-.625.623h-.622a.624.624 0 0 1-.624-.623v-1.151c-1.437-.337-2.655-1.351-3.182-2.75a.936.936 0 0 1 1.75-.66c.37.983 1.381 1.67 2.456 1.67h.089c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.419-1.303-1.528l-3.01-.532c-1.65-.239-2.87-1.654-2.875-3.363v-.017a3.39 3.39 0 0 1 1.024-2.442c.626-.62 1.514-1.044 2.484-1.208V8.446c0-.344.28-.623.624-.623z\"\n />\n <path\n stroke=\"#1da563\"\n d=\"M16.238 7.823c.345 0 .624.279.625.623v1.111c1.513.292 2.807 1.336 3.354 2.792a.936.936 0 0 1-1.752.658c-.37-.984-1.379-1.67-2.455-1.67h-.088c-.818-.013-1.628.277-2.097.743-.312.308-.47.686-.471 1.122a1.524 1.524 0 0 0 1.303 1.526l3.01.531c1.653.24 2.875 1.66 2.875 3.375v.157a1 1 0 0 1-.005.093c-.193 1.914-1.69 3.339-3.674 3.61v1.071c0 .344-.28.623-.625.623h-.622a.624.624 0 0 1-.624-.623v-1.151c-1.437-.337-2.655-1.351-3.182-2.75a.936.936 0 0 1 1.75-.66c.37.983 1.381 1.67 2.456 1.67h.089c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.419-1.303-1.528l-3.01-.532c-1.65-.239-2.87-1.654-2.875-3.363v-.017a3.39 3.39 0 0 1 1.024-2.442c.626-.62 1.514-1.044 2.484-1.208V8.446c0-.344.28-.623.624-.623z\"\n />\n </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,UAAU,GAAG,CAAC,KAAyB,MAClDA,gBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,YAAA,EACvB,eAAe,EAAA,GACtB,KAAK,EAAA;AAET,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,+HAA+H,EAAA,CACjI;AACF,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,sLAAsL,EAAA,CACxL;AACF,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,qJAAqJ,EAAA,CACvJ;AACF,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,MAAM,EAAC,SAAS,EAChB,CAAC,EAAC,qJAAqJ,EAAA,CACvJ;AACF,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,+rBAA+rB,EAAA,CACjsB;IACFA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,MAAM,EAAC,SAAS,EAChB,CAAC,EAAC,+rBAA+rB,EAAA,CACjsB,CACE;;;;"}

package/dist/icons/custom/components/CreditIcon.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import * as React from 'react';
-const CreditIcon = (props) => (React.createElement("svg", { viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Veeqo Credits", ...props },
-    React.createElement("path", { d: "M14.036 27.93c7.622 0 13.8-6.179 13.8-13.8 0-7.622-6.178-13.8-13.8-13.8-7.621 0-13.8 6.178-13.8 13.8 0 7.621 6.179 13.8 13.8 13.8Z", fill: "#05AD12" }),
-    React.createElement("path", { d: "m20.928 2.949-1.542-.918-1.059 1.78 1.542.917 1.059-1.78ZM10.512 25.048l-2.863-1.576-.998 1.813 2.862 1.576.999-1.813Zm-3.198-2.01-.937-.551-1.05 1.784.937.55 1.05-1.783ZM22.031 3.264l-.566-.337-1.059 1.78.566.336 1.059-1.779Z", fill: "#fff" }),
-    React.createElement("path", { d: "M14.036 27.628c7.455 0 13.498-6.043 13.498-13.498 0-7.455-6.043-13.498-13.498-13.498C6.581.632.538 6.675.538 14.13c0 7.455 6.043 13.498 13.498 13.498Z", stroke: "#070F17", strokeWidth: ".574" }),
-    React.createElement("path", { d: "M14.036 25.17c6.097 0 11.04-4.943 11.04-11.04 0-6.097-4.943-11.04-11.04-11.04-6.097 0-11.04 4.943-11.04 11.04 0 6.097 4.943 11.04 11.04 11.04Z", fill: "#fff", stroke: "#070F17", strokeWidth: ".574" }),
-    React.createElement("path", { d: "M13.897 20.582c-.905 0-1.723-.155-2.454-.463-.72-.31-1.29-.754-1.711-1.335-.422-.58-.639-1.267-.651-2.057h2.79c.036.53.222.951.557 1.26.347.309.818.463 1.413.463.608 0 1.085-.142 1.432-.426.347-.297.52-.68.52-1.15 0-.382-.117-.697-.352-.944a2.366 2.366 0 0 0-.893-.575c-.347-.148-.83-.309-1.45-.482-.844-.247-1.532-.488-2.065-.723a3.824 3.824 0 0 1-1.357-1.094c-.372-.494-.558-1.149-.558-1.964 0-.766.192-1.434.576-2.002.385-.568.924-1 1.618-1.298.695-.308 1.488-.463 2.38-.463 1.34 0 2.424.328 3.255.982.843.643 1.308 1.545 1.395 2.707h-2.864a1.443 1.443 0 0 0-.577-1.094c-.347-.297-.812-.445-1.394-.445-.509 0-.918.13-1.228.39-.297.259-.446.636-.446 1.13 0 .346.112.636.335.871.235.223.52.408.855.556.347.136.83.297 1.45.482.844.247 1.532.495 2.065.742.533.247.991.617 1.376 1.112.384.494.576 1.143.576 1.946 0 .692-.18 1.335-.539 1.928-.36.593-.886 1.069-1.58 1.427-.695.346-1.52.519-2.474.519Z", fill: "#196F3F" }),
-    React.createElement("path", { d: "M13.322 6.135h.928v15.771h-.928V6.136Z", fill: "#196F3F" })));
+const CreditIcon = (props) => (React.createElement("svg", { viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Veeqo Credits", ...props },
+    React.createElement("path", { fill: "#1da563", d: "M31.361 17.28c0 8.597-6.813 14.388-15.411 14.388S.383 24.698.383 16.101 5.12 1.28 16.103.267C28.16.64 31.36 8.682 31.36 17.28" }),
+    React.createElement("path", { fill: "#1da563", d: "M16 0C5.753 0 0 5.753 0 16s5.753 16 16 16 16-5.753 16-16S26.247 0 16 0m0 31.02C6.654 31.02.878 25.351.878 16S6.654.992 16 .992C25.351.992 31.21 6.654 31.21 16S25.347 31.02 16 31.02" }),
+    React.createElement("path", { fill: "#fff", d: "M12.868 4.825a4.45 4.45 0 0 1 6.293 0l8.043 8.043a4.45 4.45 0 0 1 0 6.293l-8.043 8.043a4.45 4.45 0 0 1-6.293 0L4.825 19.16a4.45 4.45 0 0 1 0-6.292z" }),
+    React.createElement("path", { stroke: "#1da563", d: "M12.868 4.825a4.45 4.45 0 0 1 6.293 0l8.043 8.043a4.45 4.45 0 0 1 0 6.293l-8.043 8.043a4.45 4.45 0 0 1-6.293 0L4.825 19.16a4.45 4.45 0 0 1 0-6.292z" }),
+    React.createElement("path", { fill: "#065931", d: "M16.238 7.823c.345 0 .624.279.625.623v1.111c1.513.292 2.807 1.336 3.354 2.792a.936.936 0 0 1-1.752.658c-.37-.984-1.379-1.67-2.455-1.67h-.088c-.818-.013-1.628.277-2.097.743-.312.308-.47.686-.471 1.122a1.524 1.524 0 0 0 1.303 1.526l3.01.531c1.653.24 2.875 1.66 2.875 3.375v.157a1 1 0 0 1-.005.093c-.193 1.914-1.69 3.339-3.674 3.61v1.071c0 .344-.28.623-.625.623h-.622a.624.624 0 0 1-.624-.623v-1.151c-1.437-.337-2.655-1.351-3.182-2.75a.936.936 0 0 1 1.75-.66c.37.983 1.381 1.67 2.456 1.67h.089c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.419-1.303-1.528l-3.01-.532c-1.65-.239-2.87-1.654-2.875-3.363v-.017a3.39 3.39 0 0 1 1.024-2.442c.626-.62 1.514-1.044 2.484-1.208V8.446c0-.344.28-.623.624-.623z" }),
+    React.createElement("path", { stroke: "#1da563", d: "M16.238 7.823c.345 0 .624.279.625.623v1.111c1.513.292 2.807 1.336 3.354 2.792a.936.936 0 0 1-1.752.658c-.37-.984-1.379-1.67-2.455-1.67h-.088c-.818-.013-1.628.277-2.097.743-.312.308-.47.686-.471 1.122a1.524 1.524 0 0 0 1.303 1.526l3.01.531c1.653.24 2.875 1.66 2.875 3.375v.157a1 1 0 0 1-.005.093c-.193 1.914-1.69 3.339-3.674 3.61v1.071c0 .344-.28.623-.625.623h-.622a.624.624 0 0 1-.624-.623v-1.151c-1.437-.337-2.655-1.351-3.182-2.75a.936.936 0 0 1 1.75-.66c.37.983 1.381 1.67 2.456 1.67h.089c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.419-1.303-1.528l-3.01-.532c-1.65-.239-2.87-1.654-2.875-3.363v-.017a3.39 3.39 0 0 1 1.024-2.442c.626-.62 1.514-1.044 2.484-1.208V8.446c0-.344.28-.623.624-.623z" })));
 export { CreditIcon };
 //# sourceMappingURL=CreditIcon.js.map

package/dist/icons/custom/components/CreditIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreditIcon.js","sources":["../../../../src/icons/custom/components/CreditIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const CreditIcon = (props: IconComponentProps) => (\n <svg\n viewBox=\"0 0 28 28\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"Veeqo Credits\"\n {...props}\n >\n <path\n d=\"~~M14~~.~~036~~ 27.~~93c7.622~~ ~~0 13~~.8-6.~~179~~ 13.8-13.8 ~~0-7~~.~~622-6~~.~~178-13~~.~~8-13~~.~~8-13~~.~~8-7~~.~~621~~ ~~0-13~~.8 6.~~178-13~~.~~8 13~~.~~8 0 7~~.~~621~~ 6.~~179~~ 13.8 13.8 13.8Z\"\n fill=\"#~~05AD12~~\"\n ~~/>\n <path\n~~ d=\"~~m20.928~~ 2.~~949-1.542-.918-1.059~~ 1.78 1.~~542.917~~ ~~1.059~~-1.~~78ZM10.512~~ ~~25.048l~~-2.~~863-1.576-.998~~ ~~1.813~~ ~~2.862~~ 1.~~576~~.~~999-1~~.~~813Zm-3~~.~~198-2~~.~~01-.937-.551-1~~.05 1.~~784~~.~~937.55~~ 1.~~05-1~~.~~783ZM22~~.~~031~~ 3.~~264l-.566-.337-1~~.~~059~~ 1.78.~~566~~.~~336~~ 1.~~059-1.779Z~~\"\n fill=\"#fff\"\n ~~/>\n <path\n~~ d=\"~~M14~~.~~036~~ 27.~~628c7~~.~~455~~ 0 ~~13.498-~~6.043 13.~~498-13~~.~~498~~ 0-7.~~455~~-6.043~~-13~~.~~498-13~~.~~498-13~~.~~498C6.581.632.538~~ 6.~~675.538~~ 14.~~13c0~~ 7.~~455 6~~.~~043~~ 13.~~498~~ ~~13.498~~ 13.~~498Z~~\"\n stroke=\"#~~070F17~~\"\n ~~strokeWidth=\".574\"\n />\n <path\n~~ d=\"~~M14~~.~~036~~ 25.~~17c6~~.~~097~~ ~~0 11.04-~~4.~~943~~ ~~11.04-11.04~~ 0-6.~~097-4~~.~~943-11~~.~~04-11~~.~~04-11~~.~~04-~~6.~~097 0~~-11.04 4.~~943-11~~.04 11.04 0 6.~~097~~ 4.~~943~~ 11.04 11.04 11.~~04Z~~\"\n ~~fill=\"#fff~~\"\n ~~stroke~~=\"#~~070F17~~\"\n ~~strokeWidth=\".574\"\n />\n <path\n~~ d=\"~~M13~~.~~897~~ 20.~~582c-.905~~ 0-1.~~723-.155-~~2.~~454~~-.~~463~~-.~~72-.31~~-1.~~29-.754~~-1.~~711~~-1.~~335~~-.~~422~~-.58-.~~639~~-1.~~267-.651~~-2.~~057h2~~.~~79c~~.~~036~~.53.~~222~~.~~951~~.~~557~~ 1.26.~~347~~.~~309~~.~~818~~.~~463~~ 1.~~413~~.~~463~~.~~608~~ 0 1.~~085~~-.~~142~~ 1.~~432-.426~~.~~347-.297~~.~~52-.68.52~~-1.15 0-.~~382~~-.~~117~~-.~~697-.352-.944a2~~.~~366 2~~.~~366~~ 0 0 0-.~~893~~-.~~575c-.347-.148-.83-.309~~-1.~~45-.482-.844-.247~~-1.~~532~~-.~~488~~-2.~~065-.723a3~~.~~824~~ 3.~~824~~ 0 0 1-1.~~357~~-1.~~094c~~-.~~372~~-.~~494~~-.~~558~~-1.~~149~~-.~~558~~-1.~~964 0~~-.~~766~~.~~192~~-1.~~434.576~~-2.~~002~~.~~385~~-.~~568~~.~~924-~~1 1.~~618~~-1.~~298~~.~~695~~-.~~308~~ 1.~~488-.463~~ 2.38-.~~463~~ 1.34 0 2.~~424~~.~~328 3~~.~~255~~.~~982~~.~~843~~.~~643~~ 1.~~308~~ 1.~~545~~ 1.~~395~~ 2.~~707h-2~~.~~864a1~~.~~443~~ ~~1.443~~ 0 0 ~~0-.577~~-1.~~094c~~-.~~347~~-.~~297-.812-.445~~-1.~~394~~-.~~445~~-.~~509 0~~-.~~918.13~~-1.~~228~~.39-.~~297~~.~~259~~-.~~446~~.~~636~~-.~~446~~ 1.13 0 .~~346~~.~~112~~.~~636~~.~~335~~.~~871~~.~~235~~.~~223~~.52.~~408~~.~~855~~.~~556~~.~~347~~.~~136~~.83.~~297~~ 1.45.~~482~~.~~844~~.~~247~~ 1.~~532~~.~~495~~ 2.~~065~~.~~742~~.~~533~~.~~247~~.~~991~~.~~617~~ 1~~.376~~ 1.~~112~~.~~384~~.~~494~~.~~576~~ 1.~~143~~.~~576~~ 1.~~946~~ 0 .~~692~~-.18 1.~~335-.539~~ 1.~~928~~-.~~36.593~~-.~~886~~ 1.~~069~~-1.58 1.~~427~~-.~~695~~.~~346~~-1.52.~~519~~-2.~~474~~.~~519Z\"\n fill=\"#196F3F\"\n />\n <path~~ ~~d=\"M13~~.~~322~~ 6.~~135h~~.~~928v15~~.~~771h~~-.~~928V6~~.~~136Z~~\" ~~fill=\"#196F3F~~\" />\n </svg>\n);\n"],"names":[],"mappings":";;AAGO,MAAM,UAAU,GAAG,CAAC,KAAyB,MAClD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,YAAA,EACvB,eAAe,EAAA,GACtB,KAAK,EAAA;AAET,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC~~,EAAC,~~oIAAoI~~,~~EACtI~~,~~IAAI~~,EAAC,~~SAAS,~~EAAA,~~CACd~~;AACF,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC~~,EAAC,~~oOAAoO~~,~~EACtO~~,~~IAAI~~,EAAC,~~MAAM~~,EAAA,~~CACX~~;~~IACF~~,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC~~,EAAC,~~wJAAwJ,EAC1J,~~MAAM,~~EAAC~~,~~SAAS~~,~~EAChB,WAAW,~~EAAC,~~MAAM~~,EAAA,~~CAClB~~;AACF,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC,EAAC,gJAAgJ,EAClJ,IAAI,EAAC,~~MAAM,~~EACX,MAAM,~~EAAC,SAAS,EAChB,~~WAAW~~,EAAC,~~MAAM~~,EAAA,~~CAClB~~;AACF,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,~~CAAC~~,EAAC,~~m4BAAm4B~~,~~EACr4B~~,~~IAAI~~,EAAC,~~SAAS,~~EAAA,~~CACd~~;IACF,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,~~EAAM~~,~~CAAC~~,EAAC,~~wCAAwC~~,~~EAAC~~,~~IAAI~~,EAAC,~~SAAS,~~EAAA,~~CAAG~~,~~CAC9D~~;;;;"}
1	+ {"version":3,"file":"CreditIcon.js","sources":["../../../../src/icons/custom/components/CreditIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const CreditIcon = (props: IconComponentProps) => (\n <svg\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"Veeqo Credits\"\n {...props}\n >\n <path\n fill=\"#1da563\"\n d=\"M31.361 17.28c0 8.597-6.813 14.388-15.411 14.388S.383 24.698.383 16.101 5.12 1.28 16.103.267C28.16.64 31.36 8.682 31.36 17.28\"\n />\n <path\n fill=\"#1da563\"\n d=\"M16 0C5.753 0 0 5.753 0 16s5.753 16 16 16 16-5.753 16-16S26.247 0 16 0m0 31.02C6.654 31.02.878 25.351.878 16S6.654.992 16 .992C25.351.992 31.21 6.654 31.21 16S25.347 31.02 16 31.02\"\n />\n <path\n fill=\"#fff\"\n d=\"M12.868 4.825a4.45 4.45 0 0 1 6.293 0l8.043 8.043a4.45 4.45 0 0 1 0 6.293l-8.043 8.043a4.45 4.45 0 0 1-6.293 0L4.825 19.16a4.45 4.45 0 0 1 0-6.292z\"\n />\n <path\n stroke=\"#1da563\"\n d=\"M12.868 4.825a4.45 4.45 0 0 1 6.293 0l8.043 8.043a4.45 4.45 0 0 1 0 6.293l-8.043 8.043a4.45 4.45 0 0 1-6.293 0L4.825 19.16a4.45 4.45 0 0 1 0-6.292z\"\n />\n <path\n fill=\"#065931\"\n d=\"M16.238 7.823c.345 0 .624.279.625.623v1.111c1.513.292 2.807 1.336 3.354 2.792a.936.936 0 0 1-1.752.658c-.37-.984-1.379-1.67-2.455-1.67h-.088c-.818-.013-1.628.277-2.097.743-.312.308-.47.686-.471 1.122a1.524 1.524 0 0 0 1.303 1.526l3.01.531c1.653.24 2.875 1.66 2.875 3.375v.157a1 1 0 0 1-.005.093c-.193 1.914-1.69 3.339-3.674 3.61v1.071c0 .344-.28.623-.625.623h-.622a.624.624 0 0 1-.624-.623v-1.151c-1.437-.337-2.655-1.351-3.182-2.75a.936.936 0 0 1 1.75-.66c.37.983 1.381 1.67 2.456 1.67h.089c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.419-1.303-1.528l-3.01-.532c-1.65-.239-2.87-1.654-2.875-3.363v-.017a3.39 3.39 0 0 1 1.024-2.442c.626-.62 1.514-1.044 2.484-1.208V8.446c0-.344.28-.623.624-.623z\"\n />\n <path\n stroke=\"#1da563\"\n d=\"M16.238 7.823c.345 0 .624.279.625.623v1.111c1.513.292 2.807 1.336 3.354 2.792a.936.936 0 0 1-1.752.658c-.37-.984-1.379-1.67-2.455-1.67h-.088c-.818-.013-1.628.277-2.097.743-.312.308-.47.686-.471 1.122a1.524 1.524 0 0 0 1.303 1.526l3.01.531c1.653.24 2.875 1.66 2.875 3.375v.157a1 1 0 0 1-.005.093c-.193 1.914-1.69 3.339-3.674 3.61v1.071c0 .344-.28.623-.625.623h-.622a.624.624 0 0 1-.624-.623v-1.151c-1.437-.337-2.655-1.351-3.182-2.75a.936.936 0 0 1 1.75-.66c.37.983 1.381 1.67 2.456 1.67h.089c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.419-1.303-1.528l-3.01-.532c-1.65-.239-2.87-1.654-2.875-3.363v-.017a3.39 3.39 0 0 1 1.024-2.442c.626-.62 1.514-1.044 2.484-1.208V8.446c0-.344.28-.623.624-.623z\"\n />\n </svg>\n);\n"],"names":[],"mappings":";;AAGO,MAAM,UAAU,GAAG,CAAC,KAAyB,MAClD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,YAAA,EACvB,eAAe,EAAA,GACtB,KAAK,EAAA;AAET,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,+HAA+H,EAAA,CACjI;AACF,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,sLAAsL,EAAA,CACxL;AACF,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,qJAAqJ,EAAA,CACvJ;AACF,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,MAAM,EAAC,SAAS,EAChB,CAAC,EAAC,qJAAqJ,EAAA,CACvJ;AACF,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,+rBAA+rB,EAAA,CACjsB;IACF,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,MAAM,EAAC,SAAS,EAChB,CAAC,EAAC,+rBAA+rB,EAAA,CACjsB,CACE;;;;"}

package/dist/icons/custom/components/ShipPlusCreditIcon.cjs ADDED Viewed

@@ -0,0 +1,30 @@
+'use strict';
+var React = require('react');
+function _interopNamespaceCompat(e) {
+    if (e && typeof e === 'object' && 'default' in e) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+const ShipPlusCreditIcon = (props) => (React__namespace.createElement("svg", { viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Ship Plus Credits", ...props },
+    React__namespace.createElement("path", { fill: "#0066c0", d: "M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" }),
+    React__namespace.createElement("path", { fill: "#fff", d: "M16.226 7.815c.344 0 .623.28.623.624v1.11c1.514.292 2.808 1.337 3.355 2.793a.936.936 0 0 1-1.752.657c-.37-.983-1.378-1.67-2.455-1.67h-.089c-.818-.012-1.627.278-2.097.744-.312.308-.47.687-.47 1.123 0 .775.549 1.416 1.303 1.525l3.01.532c1.654.24 2.875 1.661 2.875 3.376v.157a1 1 0 0 1-.004.093c-.194 1.915-1.692 3.34-3.676 3.612v1.07a.624.624 0 0 1-.623.624h-.624a.624.624 0 0 1-.623-.624V22.41c-1.437-.337-2.655-1.352-3.183-2.751a.936.936 0 0 1 1.751-.66c.37.984 1.38 1.67 2.455 1.67h.09c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.42-1.302-1.529l-3.01-.531c-1.651-.239-2.872-1.655-2.877-3.365v-.016a3.39 3.39 0 0 1 1.024-2.443c.626-.62 1.515-1.044 2.485-1.208V8.439c0-.344.279-.624.623-.624z" })));
+exports.ShipPlusCreditIcon = ShipPlusCreditIcon;
+//# sourceMappingURL=ShipPlusCreditIcon.cjs.map

package/dist/icons/custom/components/ShipPlusCreditIcon.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ShipPlusCreditIcon.cjs","sources":["../../../../src/icons/custom/components/ShipPlusCreditIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const ShipPlusCreditIcon = (props: IconComponentProps) => (\n <svg\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"Ship Plus Credits\"\n {...props}\n >\n <path\n fill=\"#0066c0\"\n d=\"M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16\"\n />\n <path\n fill=\"#fff\"\n d=\"M16.226 7.815c.344 0 .623.28.623.624v1.11c1.514.292 2.808 1.337 3.355 2.793a.936.936 0 0 1-1.752.657c-.37-.983-1.378-1.67-2.455-1.67h-.089c-.818-.012-1.627.278-2.097.744-.312.308-.47.687-.47 1.123 0 .775.549 1.416 1.303 1.525l3.01.532c1.654.24 2.875 1.661 2.875 3.376v.157a1 1 0 0 1-.004.093c-.194 1.915-1.692 3.34-3.676 3.612v1.07a.624.624 0 0 1-.623.624h-.624a.624.624 0 0 1-.623-.624V22.41c-1.437-.337-2.655-1.352-3.183-2.751a.936.936 0 0 1 1.751-.66c.37.984 1.38 1.67 2.455 1.67h.09c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.42-1.302-1.529l-3.01-.531c-1.651-.239-2.872-1.655-2.877-3.365v-.016a3.39 3.39 0 0 1 1.024-2.443c.626-.62 1.515-1.044 2.485-1.208V8.439c0-.344.279-.624.623-.624z\"\n />\n </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAyB,MAC1DA,gBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,YAAA,EACvB,mBAAmB,EAAA,GAC1B,KAAK,EAAA;AAET,IAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,wEAAwE,EAAA,CAC1E;IACFA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,6rBAA6rB,EAAA,CAC/rB,CACE;;;;"}

package/dist/icons/custom/components/ShipPlusCreditIcon.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const ShipPlusCreditIcon: (props: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/ShipPlusCreditIcon.js ADDED Viewed

@@ -0,0 +1,8 @@
+import * as React from 'react';
+const ShipPlusCreditIcon = (props) => (React.createElement("svg", { viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Ship Plus Credits", ...props },
+    React.createElement("path", { fill: "#0066c0", d: "M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" }),
+    React.createElement("path", { fill: "#fff", d: "M16.226 7.815c.344 0 .623.28.623.624v1.11c1.514.292 2.808 1.337 3.355 2.793a.936.936 0 0 1-1.752.657c-.37-.983-1.378-1.67-2.455-1.67h-.089c-.818-.012-1.627.278-2.097.744-.312.308-.47.687-.47 1.123 0 .775.549 1.416 1.303 1.525l3.01.532c1.654.24 2.875 1.661 2.875 3.376v.157a1 1 0 0 1-.004.093c-.194 1.915-1.692 3.34-3.676 3.612v1.07a.624.624 0 0 1-.623.624h-.624a.624.624 0 0 1-.623-.624V22.41c-1.437-.337-2.655-1.352-3.183-2.751a.936.936 0 0 1 1.751-.66c.37.984 1.38 1.67 2.455 1.67h.09c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.42-1.302-1.529l-3.01-.531c-1.651-.239-2.872-1.655-2.877-3.365v-.016a3.39 3.39 0 0 1 1.024-2.443c.626-.62 1.515-1.044 2.485-1.208V8.439c0-.344.279-.624.623-.624z" })));
+export { ShipPlusCreditIcon };
+//# sourceMappingURL=ShipPlusCreditIcon.js.map

package/dist/icons/custom/components/ShipPlusCreditIcon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ShipPlusCreditIcon.js","sources":["../../../../src/icons/custom/components/ShipPlusCreditIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const ShipPlusCreditIcon = (props: IconComponentProps) => (\n <svg\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"Ship Plus Credits\"\n {...props}\n >\n <path\n fill=\"#0066c0\"\n d=\"M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16\"\n />\n <path\n fill=\"#fff\"\n d=\"M16.226 7.815c.344 0 .623.28.623.624v1.11c1.514.292 2.808 1.337 3.355 2.793a.936.936 0 0 1-1.752.657c-.37-.983-1.378-1.67-2.455-1.67h-.089c-.818-.012-1.627.278-2.097.744-.312.308-.47.687-.47 1.123 0 .775.549 1.416 1.303 1.525l3.01.532c1.654.24 2.875 1.661 2.875 3.376v.157a1 1 0 0 1-.004.093c-.194 1.915-1.692 3.34-3.676 3.612v1.07a.624.624 0 0 1-.623.624h-.624a.624.624 0 0 1-.623-.624V22.41c-1.437-.337-2.655-1.352-3.183-2.751a.936.936 0 0 1 1.751-.66c.37.984 1.38 1.67 2.455 1.67h.09c1.14.008 2.405-.582 2.567-1.935v-.105c0-.776-.548-1.42-1.302-1.529l-3.01-.531c-1.651-.239-2.872-1.655-2.877-3.365v-.016a3.39 3.39 0 0 1 1.024-2.443c.626-.62 1.515-1.044 2.485-1.208V8.439c0-.344.279-.624.623-.624z\"\n />\n </svg>\n);\n"],"names":[],"mappings":";;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAyB,MAC1D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,YAAA,EACvB,mBAAmB,EAAA,GAC1B,KAAK,EAAA;AAET,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,wEAAwE,EAAA,CAC1E;IACF,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,6rBAA6rB,EAAA,CAC/rB,CACE;;;;"}

package/dist/icons/custom/index.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ export { ActiveCheckboxIcon } from './components/ActiveCheckboxIcon';
 export { ActiveRadioIcon } from './components/ActiveRadioIcon';
 export { AmazonSmileIcon } from './components/AmazonSmileIcon';
 export { CreditIcon } from './components/CreditIcon';
+export { ShipPlusCreditIcon } from './components/ShipPlusCreditIcon';
 export { DashboardIcon } from './components/DashboardIcon';
 export { DestructiveIcon } from './components/DestructiveIcon';
 export { DoubleArrowAscIcon } from './components/DoubleArrowAscIcon';

package/dist/index.cjs CHANGED Viewed

@@ -316,6 +316,7 @@ var ActiveCheckboxIcon = require('./icons/custom/components/ActiveCheckboxIcon.c
 var ActiveRadioIcon = require('./icons/custom/components/ActiveRadioIcon.cjs');
 var AmazonSmileIcon = require('./icons/custom/components/AmazonSmileIcon.cjs');
 var CreditIcon = require('./icons/custom/components/CreditIcon.cjs');
+var ShipPlusCreditIcon = require('./icons/custom/components/ShipPlusCreditIcon.cjs');
 var DashboardIcon = require('./icons/custom/components/DashboardIcon.cjs');
 var DestructiveIcon = require('./icons/custom/components/DestructiveIcon.cjs');
 var DoubleArrowAscIcon = require('./icons/custom/components/DoubleArrowAscIcon.cjs');
@@ -686,6 +687,7 @@ exports.ActiveCheckboxIcon = ActiveCheckboxIcon.ActiveCheckboxIcon;
 exports.ActiveRadioIcon = ActiveRadioIcon.ActiveRadioIcon;
 exports.AmazonSmileIcon = AmazonSmileIcon.AmazonSmileIcon;
 exports.CreditIcon = CreditIcon.CreditIcon;
+exports.ShipPlusCreditIcon = ShipPlusCreditIcon.ShipPlusCreditIcon;
 exports.DashboardIcon = DashboardIcon.DashboardIcon;
 exports.DestructiveIcon = DestructiveIcon.DestructiveIcon;
 exports.DoubleArrowAscIcon = DoubleArrowAscIcon.DoubleArrowAscIcon;

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js CHANGED Viewed

@@ -314,6 +314,7 @@ export { ActiveCheckboxIcon } from './icons/custom/components/ActiveCheckboxIcon
 export { ActiveRadioIcon } from './icons/custom/components/ActiveRadioIcon.js';
 export { AmazonSmileIcon } from './icons/custom/components/AmazonSmileIcon.js';
 export { CreditIcon } from './icons/custom/components/CreditIcon.js';
+export { ShipPlusCreditIcon } from './icons/custom/components/ShipPlusCreditIcon.js';
 export { DashboardIcon } from './icons/custom/components/DashboardIcon.js';
 export { DestructiveIcon } from './icons/custom/components/DestructiveIcon.js';
 export { DoubleArrowAscIcon } from './icons/custom/components/DoubleArrowAscIcon.js';

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/storybook/pseudoStates.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * Tag that opts a story (or its meta) into the pseudo-state matrix rendered by
+ * the global `withPseudoStates` decorator (see `.storybook/withPseudoStates.tsx`).
+ *
+ * IMPORTANT: Storybook's CSF indexer requires `tags` to be **string-literal**
+ * arrays, so this tag CANNOT be spread into a meta — add the literal string
+ * `'allStates'` to the meta's `tags` array, and spread {@link pseudoStatesParameters}
+ * for the accompanying a11y suppressions:
+ *
+ * ```ts
+ * const meta = {
+ *   title: 'Components/Actions/Action',
+ *   component: Action,
+ *   tags: ['autodocs', 'allStates'],
+ *   parameters: pseudoStatesParameters,
+ * } satisfies Meta<typeof Action>;
+ * ```
+ */
+export declare const PSEUDO_STATES_TAG = "allStates";
+/**
+ * Parameters to attach to any meta that opts into the pseudo-state matrix.
+ *
+ * The story is rendered four times (normal, hover, active, focus-visible), so
+ * any `id` inside it is duplicated across columns — this disables the a11y
+ * rules that would otherwise fire on that duplication.
+ *
+ * ⚠️ Presentational components only. Do not apply the `allStates` tag to
+ * components that rely on unique `id`s (form fields), and do not combine it
+ * with `play` functions — `canvasElement` queries become ambiguous.
+ */
+export declare const pseudoStatesParameters: {
+    a11y: {
+        config: {
+            rules: {
+                id: string;
+                enabled: boolean;
+            }[];
+        };
+    };
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "15.21.0",
+  "version": "15.23.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -71,11 +71,13 @@
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "10.3.3",
-    "@storybook/addon-links": "10.3.3",
-    "@storybook/addon-mcp": "0.5.0",
-    "@storybook/addon-onboarding": "10.3.3",
-    "@storybook/react-vite": "10.3.3",
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
+    "@storybook/addon-mcp": "0.7.0",
+    "@storybook/addon-onboarding": "10.5.10",
+    "@storybook/addon-vitest": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
@@ -106,7 +108,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "10.3.3",
+    "eslint-plugin-storybook": "10.5.10",
     "framer-motion": "^6.5.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "~29.0.3",
@@ -128,13 +130,18 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sass": "^1.15.2",
     "sass-loader": "^16.0.5",
-    "storybook": "10.3.3",
+    "storybook": "10.5.10",
+    "storybook-addon-pseudo-states": "10.5.10",
     "style-loader": "^2.0.0",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "ts-jest": "^29.1.1",
     "tsc-alias": "^1.8.8",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vitest": "^4.1.11",
+    "playwright": "^1.62.1",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11"
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.27.19",