@veeqo/ui 14.9.0-beta-2 → 14.9.1

package/dist/components/FilterTag/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":["styled","BaseContainer","colors","sizes","theme","Text","DownArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAWA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAIoBC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjCC,WAAK,CAAC,IAAI,CAAA,QAAA,EACTA,WAAK,CAAC,IAAI,+CAKIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAGJ,uBAAM,CAACK,SAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAGL,uBAAM,CAAC,iBAAiB,CAAC;AAI5C,MAAM,QAAQ,GAAGA,uBAAM,CAACM,4BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAGN,uBAAM,CAACO,wBAAS,CAAC;AAMzC,MAAM,OAAO,GAAGP,uBAAM,CAACC,2BAAa,CAAC;AAOrC,MAAM,MAAM,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMPC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpBC,WAAK,CAAC,CAAC,CAAC,WACPA,WAAK,CAAC,CAAC,CAAC;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":["styled","BaseContainer","colors","sizes","theme","Text","DownArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAWA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAIoBC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjCC,WAAK,CAAC,IAAI,CAAA,QAAA,EACTA,WAAK,CAAC,IAAI,+CAKIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAGJ,uBAAM,CAACK,SAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAGL,uBAAM,CAAC,iBAAiB,CAAC;AAI5C,MAAM,QAAQ,GAAGA,uBAAM,CAACM,4BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAGN,uBAAM,CAACO,wBAAS,CAAC;AAMzC,MAAM,OAAO,GAAGP,uBAAM,CAACC,2BAAa,CAAC;AAOrC,MAAM,MAAM,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMPC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpBC,WAAK,CAAC,CAAC,CAAC,WACPA,WAAK,CAAC,CAAC,CAAC;;;;;;;;;;"}

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

@@ -7,7 +7,7 @@ declare const Container: import("styled-components").StyledComponent<import("rea
 declare const GroupLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare const MainIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {
     $shouldShow?: boolean | undefined;

package/dist/components/FilterTag/styled.js

@@ -4,7 +4,8 @@ import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { Text } from '../Text/Text.js';
 import 'react';
 import 'react-transition-group';
-import '../AnimatedDropdown/styled.js';
+import 'uid/secure';
+import '../AnimatedDropdown/components/BasicDropdown.js';
 import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import { ReactComponent as DownArrowIcon } from '../../icons/design-system/components/DownArrowIcon.js';
 import { sizes } from '../../theme/modules/sizes.js';

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAWA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAIoB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjC,KAAK,CAAC,IAAI,CAAA,QAAA,EACT,KAAK,CAAC,IAAI,+CAKI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAI5C,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAMzC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;AAOrC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpB,KAAK,CAAC,CAAC,CAAC,WACP,KAAK,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAIoB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjC,KAAK,CAAC,IAAI,CAAA,QAAA,EACT,KAAK,CAAC,IAAI,+CAKI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAI5C,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAMzC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;AAOrC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpB,KAAK,CAAC,CAAC,CAAC,WACP,KAAK,CAAC,CAAC,CAAC;;;;"}

package/dist/components/Flex/FlexCol/FlexCol.d.ts

@@ -5,6 +5,6 @@ export declare const FlexCol: React.ForwardRefExoticComponent<{
     alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
     justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexRow/FlexRow.d.ts

@@ -5,6 +5,6 @@ export declare const FlexRow: React.ForwardRefExoticComponent<{
     alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
     justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Image/Image.cjs

@@ -4,10 +4,10 @@ var React = require('react');
 var reactPopper = require('react-popper');
 var reactDom = require('react-dom');
 var PlaceholderImage = require('./components/PlaceholderImage.cjs');
-var styled = require('./components/styled.cjs');
 var utils = require('./utils.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 var urlUtils = require('../Anchor/utils/urlUtils.cjs');
+var Image_module = require('./Image.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -37,17 +37,27 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
     const onLoad = () => setImageState({ isLoaded: true, isError: false });
     const onError = () => setImageState({ isLoaded: true, isError: true });
     const isImageHidden = !imageState.isLoaded || imageState.isError;
-    return (React__default.default.createElement(styled.Container, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container, className]) },
-        React__default.default.createElement(styled.CommonImage, { src: contextAwareSrc, alt: alt, className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.image, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+            classNames === null || classNames === void 0 ? void 0 : classNames.container,
+            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            className,
+        ]) },
+        React__default.default.createElement("img", { src: contextAwareSrc, alt: alt, className: buildClassnames.buildClassnames([
+                Image_module.image,
+                previewEnabled && Image_module.previewEnabled,
+                classNames === null || classNames === void 0 ? void 0 : classNames.image,
+                e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.image,
+            ]), width: width, height: height, onLoad: onLoad, onError: onError, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
         !disablePlaceholder &&
             isImageHidden &&
             (placeholder || (React__default.default.createElement(PlaceholderImage.PlaceholderImage, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.placeholder, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
         isPreviewOpen &&
-            reactDom.createPortal(React__default.default.createElement(styled.PreviewImageContainer, { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames.buildClassnames([
+            reactDom.createPortal(React__default.default.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames.buildClassnames([
+                    Image_module.previewImageContainer,
                     classNames === null || classNames === void 0 ? void 0 : classNames.previewImageContainer,
                     e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.previewImageContainer,
                 ]) },
-                React__default.default.createElement(styled.PreviewImage, { src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
+                React__default.default.createElement("img", { className: Image_module.previewImage, src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
 };
 
 exports.Image = Image;

package/dist/components/Image/Image.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled';\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\n\ntype ImageProps = {\n  src: string;\n  alt?: string;\n  className?: string;\n  e2eClassName?: string;\n  width?: string;\n  height?: string;\n  previewWidth?: string;\n  previewHeight?: string;\n  previewPlacement?: Placement;\n  previewEnabled?: boolean;\n  placeholder?: React.ReactNode;\n  placeholderWidth?: string;\n  placeholderHeight?: string;\n  disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n  src,\n  alt = '',\n  className,\n  e2eClassName,\n  width,\n  height,\n  previewWidth,\n  previewHeight,\n  previewPlacement = 'right',\n  previewEnabled = false,\n  placeholder,\n  placeholderWidth,\n  placeholderHeight,\n  disablePlaceholder = false,\n}: ImageProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const contextAwareSrc = createContextAwareUrl(src);\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);\n  const { styles, attributes } = usePopper(referenceElement, popperElement, {\n    placement: previewPlacement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 12],\n        },\n      },\n    ],\n  });\n\n  const openImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n    [previewEnabled],\n  );\n  const closeImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n    [previewEnabled],\n  );\n\n  const onLoad = () => setImageState({ isLoaded: true, isError: false });\n  const onError = () => setImageState({ isLoaded: true, isError: true });\n\n  const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n  return (\n    <Container\n      className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}\n    >\n      <CommonImage\n        src={contextAwareSrc}\n        alt={alt}\n        className={buildClassnames([classNames?.image, e2eClassNames?.image])}\n        width={width}\n        height={height}\n        onLoad={onLoad}\n        onError={onError}\n        previewEnabled={previewEnabled}\n        onMouseEnter={openImagePreview}\n        onMouseLeave={closeImagePreview}\n        style={isImageHidden ? { display: 'none' } : {}}\n        ref={setReferenceElement}\n      />\n      {!disablePlaceholder &&\n        isImageHidden &&\n        (placeholder || (\n          <PlaceholderImage\n            className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n            width={placeholderWidth || width}\n            height={placeholderHeight || height}\n          />\n        ))}\n      {isPreviewOpen &&\n        createPortal(\n          <PreviewImageContainer\n            ref={setPopperElement}\n            style={styles.popper}\n            {...attributes.popper}\n            className={buildClassnames([\n              classNames?.previewImageContainer,\n              e2eClassNames?.previewImageContainer,\n            ])}\n          >\n            <PreviewImage\n              src={contextAwareSrc}\n              alt=\"\"\n              width={previewWidth}\n              height={previewHeight}\n            />\n          </PreviewImageContainer>,\n          document.body,\n        )}\n    </Container>\n  );\n};\n"],"names":["generateClassNames","createContextAwareUrl","useState","React","usePopper","useCallback","Container","buildClassnames","CommonImage","PlaceholderImage","createPortal","PreviewImageContainer","PreviewImage"],"mappings":"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"}
+{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\n\ntype ImageProps = {\n  src: string;\n  alt?: string;\n  className?: string;\n  e2eClassName?: string;\n  width?: string;\n  height?: string;\n  previewWidth?: string;\n  previewHeight?: string;\n  previewPlacement?: Placement;\n  previewEnabled?: boolean;\n  placeholder?: React.ReactNode;\n  placeholderWidth?: string;\n  placeholderHeight?: string;\n  disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n  src,\n  alt = '',\n  className,\n  e2eClassName,\n  width,\n  height,\n  previewWidth,\n  previewHeight,\n  previewPlacement = 'right',\n  previewEnabled = false,\n  placeholder,\n  placeholderWidth,\n  placeholderHeight,\n  disablePlaceholder = false,\n}: ImageProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const contextAwareSrc = createContextAwareUrl(src);\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);\n  const { styles, attributes } = usePopper(referenceElement, popperElement, {\n    placement: previewPlacement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 12],\n        },\n      },\n    ],\n  });\n\n  const openImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n    [previewEnabled],\n  );\n  const closeImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n    [previewEnabled],\n  );\n\n  const onLoad = () => setImageState({ isLoaded: true, isError: false });\n  const onError = () => setImageState({ isLoaded: true, isError: true });\n\n  const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n  return (\n    <div\n      className={buildClassnames([\n        classNames?.container,\n        e2eClassNames?.container,\n        className,\n      ])}\n    >\n      <img\n        src={contextAwareSrc}\n        alt={alt}\n        className={buildClassnames([\n          imageStyles.image,\n          previewEnabled && imageStyles.previewEnabled,\n          classNames?.image,\n          e2eClassNames?.image,\n        ])}\n        width={width}\n        height={height}\n        onLoad={onLoad}\n        onError={onError}\n        onMouseEnter={openImagePreview}\n        onMouseLeave={closeImagePreview}\n        style={isImageHidden ? { display: 'none' } : {}}\n        ref={setReferenceElement}\n      />\n      {!disablePlaceholder &&\n        isImageHidden &&\n        (placeholder || (\n          <PlaceholderImage\n            className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n            width={placeholderWidth || width}\n            height={placeholderHeight || height}\n          />\n        ))}\n      {isPreviewOpen &&\n        createPortal(\n          <div\n            ref={setPopperElement}\n            style={styles.popper}\n            {...attributes.popper}\n            className={buildClassnames([\n              imageStyles.previewImageContainer,\n              classNames?.previewImageContainer,\n              e2eClassNames?.previewImageContainer,\n            ])}\n          >\n            <img\n              className={imageStyles.previewImage}\n              src={contextAwareSrc}\n              alt=\"\"\n              width={previewWidth}\n              height={previewHeight}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n"],"names":["generateClassNames","createContextAwareUrl","useState","React","usePopper","useCallback","buildClassnames","imageStyles","PlaceholderImage","createPortal"],"mappings":"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"}

package/dist/components/Image/Image.js

@@ -2,10 +2,10 @@ import React__default, { useState, useCallback } from 'react';
 import { usePopper } from 'react-popper';
 import { createPortal } from 'react-dom';
 import { PlaceholderImage } from './components/PlaceholderImage.js';
-import { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled.js';
 import { generateClassNames } from './utils.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import { createContextAwareUrl } from '../Anchor/utils/urlUtils.js';
+import imageStyles from './Image.module.scss.js';
 
 const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
     const classNames = generateClassNames(className);
@@ -31,17 +31,27 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
     const onLoad = () => setImageState({ isLoaded: true, isError: false });
     const onError = () => setImageState({ isLoaded: true, isError: true });
     const isImageHidden = !imageState.isLoaded || imageState.isError;
-    return (React__default.createElement(Container, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container, className]) },
-        React__default.createElement(CommonImage, { src: contextAwareSrc, alt: alt, className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.image, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
+    return (React__default.createElement("div", { className: buildClassnames([
+            classNames === null || classNames === void 0 ? void 0 : classNames.container,
+            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            className,
+        ]) },
+        React__default.createElement("img", { src: contextAwareSrc, alt: alt, className: buildClassnames([
+                imageStyles.image,
+                previewEnabled && imageStyles.previewEnabled,
+                classNames === null || classNames === void 0 ? void 0 : classNames.image,
+                e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.image,
+            ]), width: width, height: height, onLoad: onLoad, onError: onError, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
         !disablePlaceholder &&
             isImageHidden &&
             (placeholder || (React__default.createElement(PlaceholderImage, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.placeholder, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
         isPreviewOpen &&
-            createPortal(React__default.createElement(PreviewImageContainer, { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames([
+            createPortal(React__default.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames([
+                    imageStyles.previewImageContainer,
                     classNames === null || classNames === void 0 ? void 0 : classNames.previewImageContainer,
                     e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.previewImageContainer,
                 ]) },
-                React__default.createElement(PreviewImage, { src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
+                React__default.createElement("img", { className: imageStyles.previewImage, src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
 };
 
 export { Image };

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled';\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\n\ntype ImageProps = {\n  src: string;\n  alt?: string;\n  className?: string;\n  e2eClassName?: string;\n  width?: string;\n  height?: string;\n  previewWidth?: string;\n  previewHeight?: string;\n  previewPlacement?: Placement;\n  previewEnabled?: boolean;\n  placeholder?: React.ReactNode;\n  placeholderWidth?: string;\n  placeholderHeight?: string;\n  disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n  src,\n  alt = '',\n  className,\n  e2eClassName,\n  width,\n  height,\n  previewWidth,\n  previewHeight,\n  previewPlacement = 'right',\n  previewEnabled = false,\n  placeholder,\n  placeholderWidth,\n  placeholderHeight,\n  disablePlaceholder = false,\n}: ImageProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const contextAwareSrc = createContextAwareUrl(src);\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);\n  const { styles, attributes } = usePopper(referenceElement, popperElement, {\n    placement: previewPlacement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 12],\n        },\n      },\n    ],\n  });\n\n  const openImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n    [previewEnabled],\n  );\n  const closeImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n    [previewEnabled],\n  );\n\n  const onLoad = () => setImageState({ isLoaded: true, isError: false });\n  const onError = () => setImageState({ isLoaded: true, isError: true });\n\n  const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n  return (\n    <Container\n      className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}\n    >\n      <CommonImage\n        src={contextAwareSrc}\n        alt={alt}\n        className={buildClassnames([classNames?.image, e2eClassNames?.image])}\n        width={width}\n        height={height}\n        onLoad={onLoad}\n        onError={onError}\n        previewEnabled={previewEnabled}\n        onMouseEnter={openImagePreview}\n        onMouseLeave={closeImagePreview}\n        style={isImageHidden ? { display: 'none' } : {}}\n        ref={setReferenceElement}\n      />\n      {!disablePlaceholder &&\n        isImageHidden &&\n        (placeholder || (\n          <PlaceholderImage\n            className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n            width={placeholderWidth || width}\n            height={placeholderHeight || height}\n          />\n        ))}\n      {isPreviewOpen &&\n        createPortal(\n          <PreviewImageContainer\n            ref={setPopperElement}\n            style={styles.popper}\n            {...attributes.popper}\n            className={buildClassnames([\n              classNames?.previewImageContainer,\n              e2eClassNames?.previewImageContainer,\n            ])}\n          >\n            <PreviewImage\n              src={contextAwareSrc}\n              alt=\"\"\n              width={previewWidth}\n              height={previewHeight}\n            />\n          </PreviewImageContainer>,\n          document.body,\n        )}\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\n\ntype ImageProps = {\n  src: string;\n  alt?: string;\n  className?: string;\n  e2eClassName?: string;\n  width?: string;\n  height?: string;\n  previewWidth?: string;\n  previewHeight?: string;\n  previewPlacement?: Placement;\n  previewEnabled?: boolean;\n  placeholder?: React.ReactNode;\n  placeholderWidth?: string;\n  placeholderHeight?: string;\n  disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n  src,\n  alt = '',\n  className,\n  e2eClassName,\n  width,\n  height,\n  previewWidth,\n  previewHeight,\n  previewPlacement = 'right',\n  previewEnabled = false,\n  placeholder,\n  placeholderWidth,\n  placeholderHeight,\n  disablePlaceholder = false,\n}: ImageProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const contextAwareSrc = createContextAwareUrl(src);\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n  const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);\n  const { styles, attributes } = usePopper(referenceElement, popperElement, {\n    placement: previewPlacement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 12],\n        },\n      },\n    ],\n  });\n\n  const openImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n    [previewEnabled],\n  );\n  const closeImagePreview = useCallback(\n    () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n    [previewEnabled],\n  );\n\n  const onLoad = () => setImageState({ isLoaded: true, isError: false });\n  const onError = () => setImageState({ isLoaded: true, isError: true });\n\n  const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n  return (\n    <div\n      className={buildClassnames([\n        classNames?.container,\n        e2eClassNames?.container,\n        className,\n      ])}\n    >\n      <img\n        src={contextAwareSrc}\n        alt={alt}\n        className={buildClassnames([\n          imageStyles.image,\n          previewEnabled && imageStyles.previewEnabled,\n          classNames?.image,\n          e2eClassNames?.image,\n        ])}\n        width={width}\n        height={height}\n        onLoad={onLoad}\n        onError={onError}\n        onMouseEnter={openImagePreview}\n        onMouseLeave={closeImagePreview}\n        style={isImageHidden ? { display: 'none' } : {}}\n        ref={setReferenceElement}\n      />\n      {!disablePlaceholder &&\n        isImageHidden &&\n        (placeholder || (\n          <PlaceholderImage\n            className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n            width={placeholderWidth || width}\n            height={placeholderHeight || height}\n          />\n        ))}\n      {isPreviewOpen &&\n        createPortal(\n          <div\n            ref={setPopperElement}\n            style={styles.popper}\n            {...attributes.popper}\n            className={buildClassnames([\n              imageStyles.previewImageContainer,\n              classNames?.previewImageContainer,\n              e2eClassNames?.previewImageContainer,\n            ])}\n          >\n            <img\n              className={imageStyles.previewImage}\n              src={contextAwareSrc}\n              alt=\"\"\n              width={previewWidth}\n              height={previewHeight}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._image_1hh00_1 {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n._previewEnabled_1hh00_6 {\n  cursor: zoom-in;\n}\n\n._previewImageContainer_1hh00_10 {\n  z-index: 10;\n  background-color: transparent;\n}\n\n._previewImage_1hh00_10 {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}");
+var imageStyles = {"image":"_image_1hh00_1","previewEnabled":"_previewEnabled_1hh00_6","previewImageContainer":"_previewImageContainer_1hh00_10","previewImage":"_previewImage_1hh00_10"};
+
+module.exports = imageStyles;
+//# sourceMappingURL=Image.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.module.scss.cjs","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.previewEnabled {\n  cursor: zoom-in;\n}\n\n.previewImageContainer {\n  z-index: 10;\n  background-color: transparent;\n}\n\n.previewImage {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,sSAAA;AACA,kBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._image_1hh00_1 {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n._previewEnabled_1hh00_6 {\n  cursor: zoom-in;\n}\n\n._previewImageContainer_1hh00_10 {\n  z-index: 10;\n  background-color: transparent;\n}\n\n._previewImage_1hh00_10 {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}");
+var imageStyles = {"image":"_image_1hh00_1","previewEnabled":"_previewEnabled_1hh00_6","previewImageContainer":"_previewImageContainer_1hh00_10","previewImage":"_previewImage_1hh00_10"};
+
+export { imageStyles as default };
+//# sourceMappingURL=Image.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.module.scss.js","sources":["../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.previewEnabled {\n  cursor: zoom-in;\n}\n\n.previewImageContainer {\n  z-index: 10;\n  background-color: transparent;\n}\n\n.previewImage {\n  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,sSAAA;AACA,kBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

package/dist/components/LegacyDataTable/SpecificState/styled.d.ts

@@ -7,11 +7,11 @@ declare const EllipseContainer: import("styled-components").StyledComponent<impo
 declare const TitleText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare const SubTitleText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };

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":";;;;;;;;;;;;;;;;;;AAAA;AAeO,MAAM,KAAK,GAAG,CAAC,KAAiB,KAAI;AACzC,IAAA,MAAM,EACJ,UAAU,EACV,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,KAAK,EACpB,WAAW,GAAG,OAAO,EACrB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,MAAM,EAChB,OAAO,EAAE,aAAa,EACtB,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAA2B,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC;IAE9EC,eAAS,CAAC,MAAK;;AACb,QAAA,IAAI,UAAU,EAAE;YACd,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAC,MAAM,CAAC,CAAC;AAC1C,YAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,EAAE;AAC9B,QAAA;AACH,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,QAAQ,EAAE,GAAGC,iCAAgB,CAAC,cAAc,CAAC;IAE1F,MAAM,WAAW,GAAG,MAAK;;AACvB,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,MAAM,MAAM,GAAG,aAAa,EAAE;QAC9B,IAAI,MAAM,KAAK,KAAK;AAAE,YAAA,OAAO;AAE7B,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;AAC3B,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAyC,KAAI;AAClE,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AACtB,YAAA,CAAC,CAAC,cAAc,EAAE,CAAC;;YAGnB,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AAC7D,YAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC;gBAAE;AAEnE,YAAA,WAAW,EAAE;AACd,QAAA;AACH,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,OAAO,CAAsC,KAAI;QAC3E,IAAI,WAAW,KAAK,OAAO;YAAE;AAC7B,QAAA,IAAI,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO;AAAE,YAAA,WAAW,EAAE;AAClD,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,4BAAe,EAAA,IAAA,EACb,UAAU,KACTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAA;AAC/D,QAAAA,sBAAA,CAAA,aAAA,CAACE,wBAAiB,EAAA,IAAA,CAAG;QACrBF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAA,kBAAA,EACY,OAAO,EACxB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,YAAY,GAAGC,8BAAwB,GAAG,aAAa,EAClE,OAAO,EAAE,mBAAmB,EAAA,GACxB,IAAI,EAAA,kBAAA,EACS,aAAa,EAC9B,UAAU,EAAE,CAACC,gBAAU,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,UAAU,KAAK,SAAS,EAAA;YAEhEL,sBAAA,CAAA,aAAA,CAACM,SAAI,CAAC,OAAO,EAAA,IAAA;gBACVC,mBAAa,CAAC,KAAK,CAAC,IACnB,KAAK,CAAC,UAAU,KAEhBP,sBAAA,CAAA,aAAA,CAACQ,qBAAU,IACT,EAAE,EAAC,aAAa,EAChB,aAAa,EAAC,cAAc,EAC5B,KAAK,EAAE,KAAK,CAAC,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,cAAc,MACzB,qBAAqB,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC,EAAA,CAC5D,CACH;AAED,gBAAAR,sBAAA,CAAA,aAAA,CAACS,kBAAW,EAAA,EACV,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,iBAAiB,EACtB,YAAY,EAAE,oBAAoB,EAClC,SAAS,EAAE,SAAS,EAAA,EAEnB,QAAQ,CACG;AAEb,gBAAAC,mBAAa,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,UAAU;AAExC,gBAAA,CAACA,mBAAa,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,YAAY,CAAC,KACjEV,sBAAA,CAAA,aAAA,CAACM,SAAI,CAAC,MAAM,EAAA,IAAA;AACV,oBAAAN,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,GAAG,KAAK,EAAA;wBACxE,KAAK,CAAC,WAAW,KAChBX,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,OAAO,EAAA,aAAA,EACF,wBAAwB,EAAA,EAEnC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC/CX,sBAAA,CAAA,aAAA,CAACY,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA,GAAK,WAAW,EAAA,EAC9C,KAAK,CACC,CACV,CAAC,CACI,CACT;AACA,wBAAA,KAAK,CAAC,YAAY,KACjBZ,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,KAAK,EAAA,aAAA,EACA,yBAAyB,EAAA,EAEpC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAChDX,sBAAA,CAAA,aAAA,CAACY,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA,GAAK,WAAW,EAAA,EAC9C,KAAK,CACC,CACV,CAAC,CACI,CACT,CACK,CACI,CACf,CACY,CACR,CACL,CACP,CACe;AAEtB;;;;"}
+{"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;;;;"}