@veeqo/ui 14.9.0 → 14.10.0-beta-1

package/dist/components/LegacyDataTable/styled.js

@@ -1,116 +1,138 @@
-import styled from 'styled-components';
-import { theme } from '../../theme/index.js';
+import React__default, { createContext, useRef, useContext } from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import styles from './LegacyDataTable.module.scss.js';
 import { ScrollPosition } from './utils/constants.js';
 
-const { text, sizes } = theme;
-const { blue } = theme.colors.secondary;
-const { grey } = theme.colors.neutral;
-const { scrollbar } = theme.colors.system;
-const fixedColumnShadow = `
-  position: absolute;
-  top: 0;
-  bottom: -1px;
-  width: 30px;
-  content: "";
-  pointer-events: none;
-  box-sizing: border-box;
-  transition: box-shadow .3s;
-`;
-const startFixedColumnShadow = `
-  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);
-`;
-const endFixedColumnShadow = `
-  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
-`;
-const TooltipContent = styled.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
-const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
-    ? `
-    scrollbar-width: auto;
-
-    &::-webkit-scrollbar {
-      margin-top: 10px;
-      width: 6px;
-      height: 6px;
-    }
-    
-    &::-webkit-scrollbar-track {
-      background: ${scrollbar.background}; 
-    }
-    
-    &::-webkit-scrollbar-thumb {
-      background: ${scrollbar.thumb};
-      border-radius: 4px; 
+/* --- Instance ID for scoped styles --- */
+let legacyTableIdCounter = 0;
+function useLegacyTableId() {
+    const idRef = useRef(null);
+    if (idRef.current === null) {
+        legacyTableIdCounter += 1;
+        idRef.current = `ldt-${legacyTableIdCounter}`;
     }
-    `
-    : ''} ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) => scrollDisabled
-    ? ''
-    : `
+    return idRef.current;
+}
+const TableIdContext = createContext('');
+function useScopedShadowCss({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, }) {
+    if (scrollDisabled)
+        return '';
+    if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex)
+        return '';
+    const fixedColumnShadow = `
+    position: absolute;
+    top: 0;
+    bottom: -1px;
+    width: 30px;
+    content: "";
+    pointer-events: none;
+    box-sizing: border-box;
+    transition: box-shadow .3s;
+  `;
+    const startShadowVisible = scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end;
+    const endShadowVisible = scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle;
+    const startShadow = startShadowVisible
+        ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'
+        : '';
+    const endShadow = endShadowVisible
+        ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'
+        : '';
+    const startBlock = lastStartFixedColumnsIndex ? `
     td:nth-child(${lastStartFixedColumnsIndex}):after,
     th:nth-child(${lastStartFixedColumnsIndex}):after {
       right: 0;
       transform: translate(100%);
-      ${fixedColumnShadow};
-
-      ${scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end
-        ? startFixedColumnShadow
-        : ''};
-    };
-
+      ${fixedColumnShadow}
+      ${startShadow}
+    }
+  ` : '';
+    const endBlock = firstEndFixedColumnsIndex ? `
     td:nth-last-child(${firstEndFixedColumnsIndex}):after,
     th:nth-last-child(${firstEndFixedColumnsIndex}):after {
       left: 0;
       transform: translate(-100%);
-      ${fixedColumnShadow};
-
-      ${scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle
-        ? endFixedColumnShadow
-        : ''};
-    };
-  `}`;
-const WrapperBordered = styled(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
-const Head = styled.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
-const Body = styled.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
-styled.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
-const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
-    `
-    & > td:first-child::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 4px;
-      background-color: ${accentColor};  
+      ${fixedColumnShadow}
+      ${endShadow}
     }
-  `}`;
-const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
-const HeaderCell = styled(Cell).attrs({
-    as: 'th',
-}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
+  ` : '';
+    return `${startBlock}${endBlock}`;
+}
+const Wrapper = React__default.forwardRef(({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, showScrollbar, className, children, ...rest }, ref) => {
+    const tableId = useLegacyTableId();
+    const scopedCss = useScopedShadowCss({
+        scrollDisabled,
+        scrollPosition,
+        lastStartFixedColumnsIndex,
+        firstEndFixedColumnsIndex,
+    });
+    return (React__default.createElement("div", { ref: ref, "data-legacy-table-id": tableId, className: buildClassnames([
+            styles.wrapper,
+            scrollDisabled ? styles.wrapperScrollDisabled : styles.wrapperScrollEnabled,
+            showScrollbar && styles.wrapperShowScrollbar,
+            className,
+        ]), ...rest },
+        scopedCss && React__default.createElement("style", null, `[data-legacy-table-id="${tableId}"] { ${scopedCss} }`),
+        React__default.createElement(TableIdContext.Provider, { value: tableId }, children)));
+});
+Wrapper.displayName = 'Wrapper';
+const WrapperBordered = React__default.forwardRef((props, ref) => (React__default.createElement(Wrapper, { ref: ref, ...props, className: buildClassnames([styles.wrapperBordered, props.className]) })));
+WrapperBordered.displayName = 'WrapperBordered';
+/* --- TooltipContent --- */
+const TooltipContent = ({ children, ...rest }) => (React__default.createElement("div", { className: styles.tooltipContent, ...rest }, children));
+/* --- Head --- */
+const Head = ({ children, ...rest }) => (React__default.createElement("thead", { className: styles.head, ...rest }, children));
+const Body = ({ fixedColumnsStyle, className, children, ...rest }) => {
+    const tableId = useContext(TableIdContext);
+    const scopeSelector = tableId ? `[data-legacy-table-id="${tableId}"]` : '';
+    return (React__default.createElement("tbody", { className: buildClassnames([styles.body, styles.bodyBorderTop, className]), ...rest },
+        fixedColumnsStyle && React__default.createElement("style", null, `${scopeSelector} .${styles.body} tr { ${fixedColumnsStyle} }`),
+        children));
+};
+const Row = ({ accentColor, className, children, style, ...rest }) => (React__default.createElement("tr", { className: buildClassnames([styles.row, accentColor && styles.rowAccentColor, className]), style: {
+        ...assignCssVars({ rowAccentColor: accentColor }),
+        ...style,
+    }, ...rest }, children));
+const Cell = ({ align, grow, className, children, style, ...rest }) => (React__default.createElement("td", { className: buildClassnames([styles.cell, grow && styles.cellGrow, className]), style: {
+        ...assignCssVars({ cellAlign: align }),
+        ...style,
+    }, ...rest }, children));
+const HeaderCell = ({ align, grow, className, children, style, ...rest }) => (React__default.createElement("th", { className: buildClassnames([styles.headerCell, grow && styles.cellGrow, className]), style: {
+        ...assignCssVars({ cellAlign: align }),
+        ...style,
+    }, ...rest }, children));
+/* --- HeaderCellLayout --- */
 const alignmentMap = {
     left: 'flex-start',
     center: 'center',
     right: 'flex-end',
 };
-const HeaderCellLayout = styled.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
-const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
-    `
-    & ${Body}:nth-child(even) td {
-      background-color: ${grey.lightest};
-    }
-  `} & *{box-sizing:border-box;${({ tableLoading }) => tableLoading &&
-    `
-      user-select: none;
-      pointer-events: none;
-    `}}${({ noWrap }) => noWrap &&
-    `
-    & ${HeaderCell}, & ${HeaderCell} span {
-      white-space: nowrap;
-    }
-  `}`;
-const Footer = styled.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
-const StickyHeaderWrapper = styled.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
-const FakeHeaderTable = styled(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
+const HeaderCellLayout = ({ align, className, children, style, ...rest }) => (React__default.createElement("div", { className: buildClassnames([styles.headerCellLayout, className]), style: {
+        ...assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),
+        ...style,
+    }, ...rest }, children));
+const Table = React__default.forwardRef(({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (React__default.createElement("table", { ref: ref, className: buildClassnames([
+        styles.table,
+        isFixedLayout && styles.tableFixedLayout,
+        tableLoading && styles.tableLoading,
+        striped && styles.tableStriped,
+        noWrap && styles.tableNoWrap,
+        className,
+    ]), ...rest }, children)));
+Table.displayName = 'Table';
+const Footer = ({ fixedColumnsStyle, className, children, ...rest }) => {
+    const tableId = useContext(TableIdContext);
+    const scopeSelector = tableId ? `[data-legacy-table-id="${tableId}"]` : '';
+    return (React__default.createElement("tfoot", { className: buildClassnames([styles.footer, className]), ...rest },
+        fixedColumnsStyle && React__default.createElement("style", null, `${scopeSelector} .${styles.footer} tr { ${fixedColumnsStyle} }`),
+        children));
+};
+/* --- StickyHeaderWrapper --- */
+const StickyHeaderWrapper = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.stickyHeaderWrapper, className]), ...rest }, children)));
+StickyHeaderWrapper.displayName = 'StickyHeaderWrapper';
+/* --- FakeHeaderTable (same as Table) --- */
+const FakeHeaderTable = Table;
 
 export { Body, Cell, FakeHeaderTable, Footer, Head, HeaderCell, HeaderCellLayout, Row, StickyHeaderWrapper, Table, TooltipContent, Wrapper, WrapperBordered };
 //# sourceMappingURL=styled.js.map

package/dist/components/LegacyDataTable/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n  position: absolute;\n  top: 0;\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n  width: 100%;\n  overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid ${grey.dark};\n  border-bottom: 1px solid ${grey.dark};\n\n  ${({ showScrollbar }) =>\n    showScrollbar\n      ? `\n    scrollbar-width: auto;\n\n    &::-webkit-scrollbar {\n      margin-top: 10px;\n      width: 6px;\n      height: 6px;\n    }\n    \n    &::-webkit-scrollbar-track {\n      background: ${scrollbar.background}; \n    }\n    \n    &::-webkit-scrollbar-thumb {\n      background: ${scrollbar.thumb};\n      border-radius: 4px; \n    }\n    `\n      : ''}\n\n  ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n    scrollDisabled\n      ? ''\n      : `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n          ? startFixedColumnShadow\n          : ''\n      };\n    };\n\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n          ? endFixedColumnShadow\n          : ''\n      };\n    };\n  `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n  border: 1px solid ${grey.dark};\n  border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n  background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & + & > tr:first-child > td {\n    border-top: 1px solid ${grey.base};\n  }\n\n  tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n\n  &&& tr:hover td {\n    background-color: #ebf4fb; /* TODO: Remove magic hex value */\n  }\n`;\n\nexport const Foot = styled.tfoot`\n  & td {\n    background-color: ${grey.lightest};\n    padding: 1.5rem 1rem;\n    border-top: 1px solid ${blue.base};\n  }\n`;\n\nexport interface RowProps {\n  accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n  &.hidden {\n    visibility: collapse;\n  }\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    & > td:first-child::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: ${accentColor};  \n    }\n  `}\n`;\n\nexport interface CellProps {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n  as: 'th',\n})`\n  user-select: none;\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n\n  & span {\n    white-space: pre-line;\n  }\n\n  &.sortable:hover {\n    cursor: pointer;\n    background-color: ${grey.light};\n  }\n`;\n\nconst alignmentMap = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n`;\n\ntype TablePropTypes = {\n  striped?: StripedType;\n  noWrap?: NoWrapType;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n  width: 100%;\n  border-spacing: 0;\n  table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n  ${({ striped }) =>\n    striped &&\n    `\n    & ${Body}:nth-child(even) td {\n      background-color: ${grey.lightest};\n    }\n  `}\n\n  & * {\n    box-sizing: border-box;\n\n    ${({ tableLoading }) =>\n      tableLoading &&\n      `\n      user-select: none;\n      pointer-events: none;\n    `}\n  }\n\n  ${({ noWrap }) =>\n    noWrap &&\n    `\n    & ${HeaderCell}, & ${HeaderCell} span {\n      white-space: nowrap;\n    }\n  `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & ${Cell} {\n    border-top: 1px solid ${grey.dark};\n    background-color: ${grey.lightest};\n    padding-top: ${sizes.base};\n    padding-bottom: ${sizes.base};\n    line-height: 2rem;\n  }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/LegacyDataTable/styled.tsx"],"sourcesContent":["import React, { createContext, useContext, useRef } from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport styles from './LegacyDataTable.module.scss';\nimport { ScrollPosition } from './utils/constants';\n\n/* --- Instance ID for scoped styles --- */\n\nlet legacyTableIdCounter = 0;\n\nfunction useLegacyTableId(): string {\n  const idRef = useRef<string | null>(null);\n\n  if (idRef.current === null) {\n    legacyTableIdCounter += 1;\n    idRef.current = `ldt-${legacyTableIdCounter}`;\n  }\n\n  return idRef.current;\n}\n\n/**\n * Reset the counter between test runs for deterministic snapshots.\n * @internal Test utility only.\n */\nexport function resetLegacyTableIdCounter(): void {\n  legacyTableIdCounter = 0;\n}\n\nconst TableIdContext = createContext<string>('');\n\n/* --- Wrapper --- */\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction useScopedShadowCss({\n  scrollDisabled,\n  scrollPosition,\n  lastStartFixedColumnsIndex,\n  firstEndFixedColumnsIndex,\n}: Pick<WrapperPropTypes, 'scrollDisabled' | 'scrollPosition' | 'lastStartFixedColumnsIndex' | 'firstEndFixedColumnsIndex'>): string {\n  if (scrollDisabled) return '';\n  if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex) return '';\n\n  const fixedColumnShadow = `\n    position: absolute;\n    top: 0;\n    bottom: -1px;\n    width: 30px;\n    content: \"\";\n    pointer-events: none;\n    box-sizing: border-box;\n    transition: box-shadow .3s;\n  `;\n\n  const startShadowVisible =\n    scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end;\n  const endShadowVisible =\n    scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle;\n\n  const startShadow = startShadowVisible\n    ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'\n    : '';\n  const endShadow = endShadowVisible\n    ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'\n    : '';\n\n  const startBlock = lastStartFixedColumnsIndex ? `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow}\n      ${startShadow}\n    }\n  ` : '';\n\n  const endBlock = firstEndFixedColumnsIndex ? `\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow}\n      ${endShadow}\n    }\n  ` : '';\n\n  return `${startBlock}${endBlock}`;\n}\n\nexport const Wrapper = React.forwardRef<HTMLDivElement, WrapperPropTypes>(\n  (\n    {\n      scrollDisabled,\n      scrollPosition,\n      lastStartFixedColumnsIndex,\n      firstEndFixedColumnsIndex,\n      showScrollbar,\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const tableId = useLegacyTableId();\n    const scopedCss = useScopedShadowCss({\n      scrollDisabled,\n      scrollPosition,\n      lastStartFixedColumnsIndex,\n      firstEndFixedColumnsIndex,\n    });\n\n    return (\n      <div\n        ref={ref}\n        data-legacy-table-id={tableId}\n        className={buildClassnames([\n          styles.wrapper,\n          scrollDisabled ? styles.wrapperScrollDisabled : styles.wrapperScrollEnabled,\n          showScrollbar && styles.wrapperShowScrollbar,\n          className,\n        ])}\n        {...rest}\n      >\n        {scopedCss && <style>{`[data-legacy-table-id=\"${tableId}\"] { ${scopedCss} }`}</style>}\n        <TableIdContext.Provider value={tableId}>\n          {children}\n        </TableIdContext.Provider>\n      </div>\n    );\n  },\n);\n\nWrapper.displayName = 'Wrapper';\n\nexport const WrapperBordered = React.forwardRef<HTMLDivElement, WrapperPropTypes>(\n  (props, ref) => (\n    <Wrapper ref={ref} {...props} className={buildClassnames([styles.wrapperBordered, props.className])} />\n  ),\n);\n\nWrapperBordered.displayName = 'WrapperBordered';\n\n/* --- TooltipContent --- */\n\nexport const TooltipContent = ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={styles.tooltipContent} {...rest}>\n    {children}\n  </div>\n);\n\n/* --- Head --- */\n\nexport const Head = ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n  <thead className={styles.head} {...rest}>\n    {children}\n  </thead>\n);\n\n/* --- Body --- */\n\ninterface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  fixedColumnsStyle?: string;\n}\n\nexport const Body = ({ fixedColumnsStyle, className, children, ...rest }: BodyProps) => {\n  const tableId = useContext(TableIdContext);\n  const scopeSelector = tableId ? `[data-legacy-table-id=\"${tableId}\"]` : '';\n  return (\n    <tbody className={buildClassnames([styles.body, styles.bodyBorderTop, className])} {...rest}>\n      {/* SAFETY: fixedColumnsStyle is internally generated by convertFixedColumnInlineStyleToStyled. Do not pass user-controlled strings. */}\n      {fixedColumnsStyle && <style>{`${scopeSelector} .${styles.body} tr { ${fixedColumnsStyle} }`}</style>}\n      {children}\n    </tbody>\n  );\n};\n\n/* --- Foot --- */\n\nexport const Foot = ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n  <tfoot className={styles.foot} {...rest}>\n    {children}\n  </tfoot>\n);\n\n/* --- Row --- */\n\nexport interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  accentColor?: string;\n}\n\nexport const Row = ({ accentColor, className, children, style, ...rest }: RowProps) => (\n  <tr\n    className={buildClassnames([styles.row, accentColor && styles.rowAccentColor, className])}\n    style={{\n      ...assignCssVars({ rowAccentColor: accentColor }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </tr>\n);\n\n/* --- Cell --- */\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = ({ align, grow, className, children, style, ...rest }: CellProps) => (\n  <td\n    className={buildClassnames([styles.cell, grow && styles.cellGrow, className])}\n    style={{\n      ...assignCssVars({ cellAlign: align }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </td>\n);\n\n/* --- HeaderCell --- */\n\nexport interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const HeaderCell = ({ align, grow, className, children, style, ...rest }: HeaderCellProps) => (\n  <th\n    className={buildClassnames([styles.headerCell, grow && styles.cellGrow, className])}\n    style={{\n      ...assignCssVars({ cellAlign: align }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </th>\n);\n\n/* --- HeaderCellLayout --- */\n\nconst alignmentMap: Record<string, string> = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = ({ align, className, children, style, ...rest }: HeaderCellLayoutProps) => (\n  <div\n    className={buildClassnames([styles.headerCellLayout, className])}\n    style={{\n      ...assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\n/* --- Table --- */\n\ninterface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  striped?: boolean;\n  noWrap?: boolean;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n}\n\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (\n    <table\n      ref={ref}\n      className={buildClassnames([\n        styles.table,\n        isFixedLayout && styles.tableFixedLayout,\n        tableLoading && styles.tableLoading,\n        striped && styles.tableStriped,\n        noWrap && styles.tableNoWrap,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </table>\n  ),\n);\n\nTable.displayName = 'Table';\n\n/* --- Footer --- */\n\ninterface FooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  fixedColumnsStyle?: string;\n}\n\nexport const Footer = ({ fixedColumnsStyle, className, children, ...rest }: FooterProps) => {\n  const tableId = useContext(TableIdContext);\n  const scopeSelector = tableId ? `[data-legacy-table-id=\"${tableId}\"]` : '';\n  return (\n    <tfoot className={buildClassnames([styles.footer, className])} {...rest}>\n      {fixedColumnsStyle && <style>{`${scopeSelector} .${styles.footer} tr { ${fixedColumnsStyle} }`}</style>}\n      {children}\n    </tfoot>\n  );\n};\n\n/* --- StickyHeaderWrapper --- */\n\nexport const StickyHeaderWrapper = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.stickyHeaderWrapper, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nStickyHeaderWrapper.displayName = 'StickyHeaderWrapper';\n\n/* --- FakeHeaderTable (same as Table) --- */\n\nexport const FakeHeaderTable = Table;\n"],"names":["React"],"mappings":"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"}

package/dist/components/Modal/Modal.cjs

@@ -2,21 +2,42 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var styled = require('./components/styled.cjs');
 var types = require('./types.cjs');
 var Dialog = require('./components/Dialog/Dialog.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var useIsOverflowing = require('../../hooks/useIsOverflowing.cjs');
 var Button = require('../Button/Button.cjs');
 var Card = require('../Card/Card.cjs');
 var CardHeader = require('../CardHeader/CardHeader.cjs');
 var Stack = require('../Stack/Stack.cjs');
 var utils = require('./utils.cjs');
+var Modal_module = require('./Modal.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /* eslint-disable react/destructuring-assignment */
+/**
+ * Manages body scroll-lock as a component mounted inside AnimatePresence.
+ * Reference-counted so multiple simultaneous modals don't conflict:
+ * the class only removes when the last modal unmounts.
+ */
+let scrollLockCount = 0;
+const ScrollLock = () => {
+    React.useEffect(() => {
+        scrollLockCount += 1;
+        document.body.classList.add('veeqo-modal-open');
+        return () => {
+            scrollLockCount -= 1;
+            if (scrollLockCount === 0) {
+                document.body.classList.remove('veeqo-modal-open');
+            }
+        };
+    }, []);
+    return null;
+};
 const Modal = (props) => {
     const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, variant = 'base', onClose: parentOnClose, children, ...rest } = props;
     const modalRef = React.useRef(null);
@@ -55,11 +76,15 @@ const Modal = (props) => {
             handleClose();
     };
     return (React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement("div", { "data-testid": "dialog-wrapper", style: { position: 'absolute' } },
-        React__default.default.createElement(styled.NonScrollableBody, null),
+        React__default.default.createElement(ScrollLock, null),
         React__default.default.createElement(Dialog.Dialog, { "data-dialog-type": "modal", displayMode: displayMode, variant: variant, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? utils.preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (types.isSideDraw(props) && props.appearance) || 'primary' },
             React__default.default.createElement(Card.Card.Surface, null,
                 types.hasHeaderSlot(props) ? (props.headerSlot) : (React__default.default.createElement(CardHeader.CardHeader, { id: "modal_title", headerVariant: "headingLarge", title: props.headerTitle, subtitle: props.headerSubtitle, ...(showHeaderCloseButton && { onClickClose: handleClose }) })),
-                React__default.default.createElement(styled.MainSection, { onScroll: onScroll, ref: setMainSectionRef, isScrollable: isContentOverflowing, fullBleed: fullBleed }, children),
+                React__default.default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames.buildClassnames([
+                        Modal_module.mainSection,
+                        fullBleed && Modal_module.fullBleed,
+                        isContentOverflowing && Modal_module.scrollable,
+                    ]) }, children),
                 types.hasFooterSlot(props) && props.footerSlot,
                 !types.hasFooterSlot(props) && (props.leftActions || props.rightActions) && (React__default.default.createElement(Card.Card.Footer, null,
                     React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignX: props.leftActions ? 'between' : 'end' },

package/dist/components/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { MainSection, NonScrollableBody } from './components/styled';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <NonScrollableBody />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <MainSection\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                isScrollable={isContentOverflowing}\n                fullBleed={fullBleed}\n              >\n                {children}\n              </MainSection>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["useRef","useState","useEffect","useIsOverflowing","React","AnimatePresence","NonScrollableBody","Dialog","preventDefaultEventOnESC","isSideDraw","Card","hasHeaderSlot","CardHeader","MainSection","hasFooterSlot","Stack","Button"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { buildClassnames } from '../../utils';\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\nimport modalStyles from './Modal.module.scss';\n\n/**\n * Manages body scroll-lock as a component mounted inside AnimatePresence.\n * Reference-counted so multiple simultaneous modals don't conflict:\n * the class only removes when the last modal unmounts.\n */\nlet scrollLockCount = 0;\n\nconst ScrollLock = () => {\n  useEffect(() => {\n    scrollLockCount += 1;\n    document.body.classList.add('veeqo-modal-open');\n    return () => {\n      scrollLockCount -= 1;\n      if (scrollLockCount === 0) {\n        document.body.classList.remove('veeqo-modal-open');\n      }\n    };\n  }, []);\n  return null;\n};\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <ScrollLock />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <section\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                className={buildClassnames([\n                  modalStyles.mainSection,\n                  fullBleed && modalStyles.fullBleed,\n                  isContentOverflowing && modalStyles.scrollable,\n                ])}\n              >\n                {children}\n              </section>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["useEffect","useRef","useState","useIsOverflowing","React","AnimatePresence","Dialog","preventDefaultEventOnESC","isSideDraw","Card","hasHeaderSlot","CardHeader","buildClassnames","modalStyles","hasFooterSlot","Stack","Button"],"mappings":"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"}

package/dist/components/Modal/Modal.js

@@ -1,16 +1,37 @@
 import React__default, { useRef, useState, useEffect } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import { NonScrollableBody, MainSection } from './components/styled.js';
 import { isSideDraw, hasHeaderSlot, hasFooterSlot } from './types.js';
 import { Dialog } from './components/Dialog/Dialog.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { useIsOverflowing } from '../../hooks/useIsOverflowing.js';
 import { Button } from '../Button/Button.js';
 import { Card } from '../Card/Card.js';
 import { CardHeader } from '../CardHeader/CardHeader.js';
 import { Stack } from '../Stack/Stack.js';
 import { preventDefaultEventOnESC } from './utils.js';
+import modalStyles from './Modal.module.scss.js';
 
 /* eslint-disable react/destructuring-assignment */
+/**
+ * Manages body scroll-lock as a component mounted inside AnimatePresence.
+ * Reference-counted so multiple simultaneous modals don't conflict:
+ * the class only removes when the last modal unmounts.
+ */
+let scrollLockCount = 0;
+const ScrollLock = () => {
+    useEffect(() => {
+        scrollLockCount += 1;
+        document.body.classList.add('veeqo-modal-open');
+        return () => {
+            scrollLockCount -= 1;
+            if (scrollLockCount === 0) {
+                document.body.classList.remove('veeqo-modal-open');
+            }
+        };
+    }, []);
+    return null;
+};
 const Modal = (props) => {
     const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, variant = 'base', onClose: parentOnClose, children, ...rest } = props;
     const modalRef = useRef(null);
@@ -49,11 +70,15 @@ const Modal = (props) => {
             handleClose();
     };
     return (React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement("div", { "data-testid": "dialog-wrapper", style: { position: 'absolute' } },
-        React__default.createElement(NonScrollableBody, null),
+        React__default.createElement(ScrollLock, null),
         React__default.createElement(Dialog, { "data-dialog-type": "modal", displayMode: displayMode, variant: variant, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (isSideDraw(props) && props.appearance) || 'primary' },
             React__default.createElement(Card.Surface, null,
                 hasHeaderSlot(props) ? (props.headerSlot) : (React__default.createElement(CardHeader, { id: "modal_title", headerVariant: "headingLarge", title: props.headerTitle, subtitle: props.headerSubtitle, ...(showHeaderCloseButton && { onClickClose: handleClose }) })),
-                React__default.createElement(MainSection, { onScroll: onScroll, ref: setMainSectionRef, isScrollable: isContentOverflowing, fullBleed: fullBleed }, children),
+                React__default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames([
+                        modalStyles.mainSection,
+                        fullBleed && modalStyles.fullBleed,
+                        isContentOverflowing && modalStyles.scrollable,
+                    ]) }, children),
                 hasFooterSlot(props) && props.footerSlot,
                 !hasFooterSlot(props) && (props.leftActions || props.rightActions) && (React__default.createElement(Card.Footer, null,
                     React__default.createElement(Stack, { direction: "horizontal", alignX: props.leftActions ? 'between' : 'end' },

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { MainSection, NonScrollableBody } from './components/styled';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <NonScrollableBody />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <MainSection\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                isScrollable={isContentOverflowing}\n                fullBleed={fullBleed}\n              >\n                {children}\n              </MainSection>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { buildClassnames } from '../../utils';\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\nimport modalStyles from './Modal.module.scss';\n\n/**\n * Manages body scroll-lock as a component mounted inside AnimatePresence.\n * Reference-counted so multiple simultaneous modals don't conflict:\n * the class only removes when the last modal unmounts.\n */\nlet scrollLockCount = 0;\n\nconst ScrollLock = () => {\n  useEffect(() => {\n    scrollLockCount += 1;\n    document.body.classList.add('veeqo-modal-open');\n    return () => {\n      scrollLockCount -= 1;\n      if (scrollLockCount === 0) {\n        document.body.classList.remove('veeqo-modal-open');\n      }\n    };\n  }, []);\n  return null;\n};\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <ScrollLock />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <section\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                className={buildClassnames([\n                  modalStyles.mainSection,\n                  fullBleed && modalStyles.fullBleed,\n                  isContentOverflowing && modalStyles.scrollable,\n                ])}\n              >\n                {children}\n              </section>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Modal/Modal.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_6h63u_1 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n._dialog_6h63u_17 {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  /* Targets Card.Footer */\n}\n._dialog_6h63u_17::backdrop {\n  animation: _fadeIn_6h63u_1 0.25s ease forwards;\n  background-color: rgba(55, 66, 77, 0.5);\n  width: 100%;\n  height: 100%;\n}\n._dialog_6h63u_17 > :first-child {\n  display: flex;\n  flex-direction: column;\n}\n._dialog_6h63u_17 > :first-child ._mainSection_6h63u_37 {\n  padding-bottom: var(--sizes-md);\n}\n._dialog_6h63u_17 > :first-child footer {\n  margin-top: 0;\n}\n\n._secondaryAppearance_6h63u_44::backdrop {\n  animation: none;\n  opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_6h63u_37 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n._mainSection_6h63u_37:not(._fullBleed_6h63u_55) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_6h63u_37._scrollable_6h63u_60 + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_6h63u_65 {\n  min-width: 464px;\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_6h63u_65:not([open]) {\n  display: block;\n  position: fixed;\n  inset: 0;\n  transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_6h63u_78,\n._rightDrawer_6h63u_79 {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n  /* Critical for framer-motion exit animations */\n}\n._leftDrawer_6h63u_78 > :first-child,\n._rightDrawer_6h63u_79 > :first-child {\n  border-radius: 0;\n  height: 100%;\n}\n._leftDrawer_6h63u_78:not([open]),\n._rightDrawer_6h63u_79:not([open]) {\n  display: block;\n}\n\n._leftDrawer_6h63u_78 {\n  inset: 0 auto 0 0;\n}\n\n._rightDrawer_6h63u_79 {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-variant_6h63u_111 {\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-variant_6h63u_111 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 640px) {\n  ._xs-variant_6h63u_111 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._xs-variant_6h63u_111, ._xs-variant_6h63u_111 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 60vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 48vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 36vw;\n  }\n}\n@media (width >= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 32vw;\n  }\n}\n\n._sm-variant_6h63u_152 {\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-variant_6h63u_152 > :first-child {\n  max-height: 72vh;\n}\n@media (width <= 640px) {\n  ._sm-variant_6h63u_152 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._sm-variant_6h63u_152, ._sm-variant_6h63u_152 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 56vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 44vw;\n  }\n}\n@media (width >= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 40vw;\n  }\n}\n\n._base-variant_6h63u_193 {\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-variant_6h63u_193 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 720px) {\n  ._base-variant_6h63u_193 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._base-variant_6h63u_193, ._base-variant_6h63u_193 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._base-variant_6h63u_193 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 52vw;\n  }\n}\n\n._lg-variant_6h63u_229 {\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-variant_6h63u_229 > :first-child {\n  max-height: 96vh;\n}\n@media (width <= 960px) {\n  ._lg-variant_6h63u_229 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._lg-variant_6h63u_229, ._lg-variant_6h63u_229 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 80vw;\n  }\n}");
+var modalStyles = {"dialog":"_dialog_6h63u_17","fadeIn":"_fadeIn_6h63u_1","mainSection":"_mainSection_6h63u_37","secondaryAppearance":"_secondaryAppearance_6h63u_44","fullBleed":"_fullBleed_6h63u_55","scrollable":"_scrollable_6h63u_60","modal":"_modal_6h63u_65","leftDrawer":"_leftDrawer_6h63u_78","rightDrawer":"_rightDrawer_6h63u_79","xs-variant":"_xs-variant_6h63u_111","sm-variant":"_sm-variant_6h63u_152","base-variant":"_base-variant_6h63u_193","lg-variant":"_lg-variant_6h63u_229"};
+
+module.exports = modalStyles;
+//# sourceMappingURL=Modal.module.scss.cjs.map

package/dist/components/Modal/Modal.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.scss.cjs","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.dialog {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: rgba(55, 66, 77, 0.5);\n    width: 100%;\n    height: 100%;\n  }\n\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  & > :first-child {\n    display: flex;\n    flex-direction: column;\n  }\n\n  & > :first-child .mainSection {\n    padding-bottom: var(--sizes-md);\n  }\n\n  /* Targets Card.Footer */\n  & > :first-child footer {\n    margin-top: 0;\n  }\n}\n\n.secondaryAppearance {\n  &::backdrop {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n  min-width: 464px;\n\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > :first-child {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  /* Critical for framer-motion exit animations */\n  &:not([open]) {\n    display: block;\n  }\n}\n\n.leftDrawer {\n  inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-variant {\n  & > :first-child {\n    max-height: 84vh;\n  }\n\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n  @media (width <= 640px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 641px) and (width <= 720px) {\n    max-width: 60vw;\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 48vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 36vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 32vw;\n  }\n}\n\n.sm-variant {\n  & > :first-child {\n    max-height: 72vh;\n  }\n\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n  @media (width <= 640px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 641px) and (width <= 720px) {\n    max-width: 72vw;\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 56vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 44vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 40vw;\n  }\n}\n\n.base-variant {\n  & > :first-child {\n    max-height: 84vh;\n  }\n\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n  @media (width <= 720px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 88vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 72vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 52vw;\n  }\n}\n\n.lg-variant {\n  & > :first-child {\n    max-height: 96vh;\n  }\n\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n  @media (width <= 960px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 88vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 80vw;\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,4yLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,uBAAA;;;;"}

package/dist/components/Modal/Modal.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_6h63u_1 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n._dialog_6h63u_17 {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  /* Targets Card.Footer */\n}\n._dialog_6h63u_17::backdrop {\n  animation: _fadeIn_6h63u_1 0.25s ease forwards;\n  background-color: rgba(55, 66, 77, 0.5);\n  width: 100%;\n  height: 100%;\n}\n._dialog_6h63u_17 > :first-child {\n  display: flex;\n  flex-direction: column;\n}\n._dialog_6h63u_17 > :first-child ._mainSection_6h63u_37 {\n  padding-bottom: var(--sizes-md);\n}\n._dialog_6h63u_17 > :first-child footer {\n  margin-top: 0;\n}\n\n._secondaryAppearance_6h63u_44::backdrop {\n  animation: none;\n  opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_6h63u_37 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n._mainSection_6h63u_37:not(._fullBleed_6h63u_55) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_6h63u_37._scrollable_6h63u_60 + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_6h63u_65 {\n  min-width: 464px;\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_6h63u_65:not([open]) {\n  display: block;\n  position: fixed;\n  inset: 0;\n  transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_6h63u_78,\n._rightDrawer_6h63u_79 {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n  /* Critical for framer-motion exit animations */\n}\n._leftDrawer_6h63u_78 > :first-child,\n._rightDrawer_6h63u_79 > :first-child {\n  border-radius: 0;\n  height: 100%;\n}\n._leftDrawer_6h63u_78:not([open]),\n._rightDrawer_6h63u_79:not([open]) {\n  display: block;\n}\n\n._leftDrawer_6h63u_78 {\n  inset: 0 auto 0 0;\n}\n\n._rightDrawer_6h63u_79 {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-variant_6h63u_111 {\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-variant_6h63u_111 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 640px) {\n  ._xs-variant_6h63u_111 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._xs-variant_6h63u_111, ._xs-variant_6h63u_111 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 60vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 48vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 36vw;\n  }\n}\n@media (width >= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 32vw;\n  }\n}\n\n._sm-variant_6h63u_152 {\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-variant_6h63u_152 > :first-child {\n  max-height: 72vh;\n}\n@media (width <= 640px) {\n  ._sm-variant_6h63u_152 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._sm-variant_6h63u_152, ._sm-variant_6h63u_152 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 56vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 44vw;\n  }\n}\n@media (width >= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 40vw;\n  }\n}\n\n._base-variant_6h63u_193 {\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-variant_6h63u_193 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 720px) {\n  ._base-variant_6h63u_193 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._base-variant_6h63u_193, ._base-variant_6h63u_193 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._base-variant_6h63u_193 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 52vw;\n  }\n}\n\n._lg-variant_6h63u_229 {\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-variant_6h63u_229 > :first-child {\n  max-height: 96vh;\n}\n@media (width <= 960px) {\n  ._lg-variant_6h63u_229 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._lg-variant_6h63u_229, ._lg-variant_6h63u_229 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 80vw;\n  }\n}");
+var modalStyles = {"dialog":"_dialog_6h63u_17","fadeIn":"_fadeIn_6h63u_1","mainSection":"_mainSection_6h63u_37","secondaryAppearance":"_secondaryAppearance_6h63u_44","fullBleed":"_fullBleed_6h63u_55","scrollable":"_scrollable_6h63u_60","modal":"_modal_6h63u_65","leftDrawer":"_leftDrawer_6h63u_78","rightDrawer":"_rightDrawer_6h63u_79","xs-variant":"_xs-variant_6h63u_111","sm-variant":"_sm-variant_6h63u_152","base-variant":"_base-variant_6h63u_193","lg-variant":"_lg-variant_6h63u_229"};
+
+export { modalStyles as default };
+//# sourceMappingURL=Modal.module.scss.js.map

package/dist/components/Modal/Modal.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.scss.js","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.dialog {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: rgba(55, 66, 77, 0.5);\n    width: 100%;\n    height: 100%;\n  }\n\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  & > :first-child {\n    display: flex;\n    flex-direction: column;\n  }\n\n  & > :first-child .mainSection {\n    padding-bottom: var(--sizes-md);\n  }\n\n  /* Targets Card.Footer */\n  & > :first-child footer {\n    margin-top: 0;\n  }\n}\n\n.secondaryAppearance {\n  &::backdrop {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n  min-width: 464px;\n\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > :first-child {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  /* Critical for framer-motion exit animations */\n  &:not([open]) {\n    display: block;\n  }\n}\n\n.leftDrawer {\n  inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-variant {\n  & > :first-child {\n    max-height: 84vh;\n  }\n\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n  @media (width <= 640px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 641px) and (width <= 720px) {\n    max-width: 60vw;\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 48vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 36vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 32vw;\n  }\n}\n\n.sm-variant {\n  & > :first-child {\n    max-height: 72vh;\n  }\n\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n  @media (width <= 640px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 641px) and (width <= 720px) {\n    max-width: 72vw;\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 56vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 44vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 40vw;\n  }\n}\n\n.base-variant {\n  & > :first-child {\n    max-height: 84vh;\n  }\n\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n  @media (width <= 720px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 88vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 72vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 52vw;\n  }\n}\n\n.lg-variant {\n  & > :first-child {\n    max-height: 96vh;\n  }\n\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n  @media (width <= 960px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 88vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 80vw;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAAAA,WAAA,CAAA,4yLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,uBAAA;;;;"}