@veeqo/ui 14.9.0 → 14.10.0-beta-1

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -4,7 +4,7 @@ import { Select } from '../Select/Select.js';
 import { DateInputField } from '../DateInputField/index.js';
 import { RangeCalendar } from '../Calendars/components/RangeCalendar/RangeCalendar.js';
 import '../Calendars/components/Calendar/styled.js';
-import '../Grid/index.js';
+import '../Grid/Grid.js';
 import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import 'react-aria-components';

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._dropdownContainer_5j8e6_1 {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}");
+var dropdownStyles = {"dropdownContainer":"_dropdownContainer_5j8e6_1"};
+
+module.exports = dropdownStyles;
+//# sourceMappingURL=Dropdown.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.module.scss.cjs","sources":["../../../src/components/Dropdown/Dropdown.module.scss"],"sourcesContent":[".dropdownContainer {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oWAAA;AACA,qBAAA,CAAA,mBAAA,CAAA,4BAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._dropdownContainer_5j8e6_1 {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}");
+var dropdownStyles = {"dropdownContainer":"_dropdownContainer_5j8e6_1"};
+
+export { dropdownStyles as default };
+//# sourceMappingURL=Dropdown.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.module.scss.js","sources":["../../../src/components/Dropdown/Dropdown.module.scss"],"sourcesContent":[".dropdownContainer {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oWAAA;AACA,qBAAA,CAAA,mBAAA,CAAA,4BAAA;;;;"}

package/dist/components/Dropdown/DropdownPopover.cjs

@@ -2,8 +2,10 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var Popover = require('../Popover/Popover.cjs');
+var Dropdown_module = require('./Dropdown.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -13,7 +15,7 @@ const DropdownPopover = ({ id, children, className, style, reversed, anchorEleme
     React.useEffect(() => () => anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus(), [anchorElement]); // Re-focus anchor when closed.
     return (React__default.default.createElement(Popover.Popover, { id: id, "data-testid": id, anchorElement: anchorElement, onShouldClose: onShouldClose, useAnchorWidth: useAnchorWidth, placement: "bottom-start", ...popoverProps },
         React__default.default.createElement(framerMotion.AnimatePresence, null,
-            React__default.default.createElement(styled.DropdownContainer, { className: className, style: style, useAnchorWidth: useAnchorWidth, reversed: reversed, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.2 } }, children))));
+            React__default.default.createElement(framerMotion.motion.div, { className: buildClassnames.buildClassnames([Dropdown_module.dropdownContainer, className]), style: style, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.2 } }, children))));
 };
 
 exports.DropdownPopover = DropdownPopover;

package/dist/components/Dropdown/DropdownPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPopover.cjs","sources":["../../../src/components/Dropdown/DropdownPopover.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { DropdownContainer } from './styled';\n\nimport { BasicDropdownProps } from './types';\nimport { Popover } from '../Popover';\n\nexport const DropdownPopover = ({\n  id,\n  children,\n  className,\n  style,\n  reversed,\n  anchorElement,\n  useAnchorWidth,\n  onShouldClose,\n  ...popoverProps\n}: BasicDropdownProps) => {\n  useEffect(() => () => anchorElement?.focus(), [anchorElement]); // Re-focus anchor when closed.\n\n  return (\n    <Popover\n      id={id}\n      data-testid={id}\n      anchorElement={anchorElement}\n      onShouldClose={onShouldClose}\n      useAnchorWidth={useAnchorWidth}\n      placement=\"bottom-start\"\n      {...popoverProps}\n    >\n      <AnimatePresence>\n        <DropdownContainer\n          className={className}\n          style={style}\n          useAnchorWidth={useAnchorWidth}\n          reversed={reversed}\n          initial={{ opacity: 0, y: -6 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -6 }}\n          transition={{ duration: 0.2 }}\n        >\n          {children}\n        </DropdownContainer>\n      </AnimatePresence>\n    </Popover>\n  );\n};\n"],"names":["useEffect","React","Popover","AnimatePresence","DropdownContainer"],"mappings":";;;;;;;;;;;AAOO,MAAM,eAAe,GAAG,CAAC,EAC9B,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EACd,aAAa,EACb,GAAG,YAAY,EACI,KAAI;IACvBA,eAAS,CAAC,MAAM,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,QACEC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,EAAE,EACf,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAC,cAAc,EAAA,GACpB,YAAY,EAAA;AAEhB,QAAAD,sBAAA,CAAA,aAAA,CAACE,4BAAe,EAAA,IAAA;AACd,YAAAF,sBAAA,CAAA,aAAA,CAACG,wBAAiB,EAAA,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC3B,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAE5B,QAAQ,CACS,CACJ,CACV;AAEd;;;;"}
+{"version":3,"file":"DropdownPopover.cjs","sources":["../../../src/components/Dropdown/DropdownPopover.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { AnimatePresence, motion } from 'framer-motion';\n\nimport { buildClassnames } from '../../utils';\nimport { BasicDropdownProps } from './types';\nimport { Popover } from '../Popover';\nimport dropdownStyles from './Dropdown.module.scss';\n\nexport const DropdownPopover = ({\n  id,\n  children,\n  className,\n  style,\n  reversed,\n  anchorElement,\n  useAnchorWidth,\n  onShouldClose,\n  ...popoverProps\n}: BasicDropdownProps) => {\n  useEffect(() => () => anchorElement?.focus(), [anchorElement]); // Re-focus anchor when closed.\n\n  return (\n    <Popover\n      id={id}\n      data-testid={id}\n      anchorElement={anchorElement}\n      onShouldClose={onShouldClose}\n      useAnchorWidth={useAnchorWidth}\n      placement=\"bottom-start\"\n      {...popoverProps}\n    >\n      <AnimatePresence>\n        <motion.div\n          className={buildClassnames([dropdownStyles.dropdownContainer, className])}\n          style={style}\n          initial={{ opacity: 0, y: -6 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -6 }}\n          transition={{ duration: 0.2 }}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </Popover>\n  );\n};\n"],"names":["useEffect","React","Popover","AnimatePresence","motion","buildClassnames","dropdownStyles"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,eAAe,GAAG,CAAC,EAC9B,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EACd,aAAa,EACb,GAAG,YAAY,EACI,KAAI;IACvBA,eAAS,CAAC,MAAM,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,QACEC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,EAAE,EACf,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAC,cAAc,EAAA,GACpB,YAAY,EAAA;AAEhB,QAAAD,sBAAA,CAAA,aAAA,CAACE,4BAAe,EAAA,IAAA;AACd,YAAAF,sBAAA,CAAA,aAAA,CAACG,mBAAM,CAAC,GAAG,EAAA,EACT,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAc,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,EACzE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC3B,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAE5B,QAAQ,CACE,CACG,CACV;AAEd;;;;"}

package/dist/components/Dropdown/DropdownPopover.js

@@ -1,13 +1,15 @@
 import React__default, { useEffect } from 'react';
-import { AnimatePresence } from 'framer-motion';
-import { DropdownContainer } from './styled.js';
+import { AnimatePresence, motion } from 'framer-motion';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Popover } from '../Popover/Popover.js';
+import dropdownStyles from './Dropdown.module.scss.js';
 
 const DropdownPopover = ({ id, children, className, style, reversed, anchorElement, useAnchorWidth, onShouldClose, ...popoverProps }) => {
     useEffect(() => () => anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus(), [anchorElement]); // Re-focus anchor when closed.
     return (React__default.createElement(Popover, { id: id, "data-testid": id, anchorElement: anchorElement, onShouldClose: onShouldClose, useAnchorWidth: useAnchorWidth, placement: "bottom-start", ...popoverProps },
         React__default.createElement(AnimatePresence, null,
-            React__default.createElement(DropdownContainer, { className: className, style: style, useAnchorWidth: useAnchorWidth, reversed: reversed, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.2 } }, children))));
+            React__default.createElement(motion.div, { className: buildClassnames([dropdownStyles.dropdownContainer, className]), style: style, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.2 } }, children))));
 };
 
 export { DropdownPopover };

package/dist/components/Dropdown/DropdownPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPopover.js","sources":["../../../src/components/Dropdown/DropdownPopover.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { DropdownContainer } from './styled';\n\nimport { BasicDropdownProps } from './types';\nimport { Popover } from '../Popover';\n\nexport const DropdownPopover = ({\n  id,\n  children,\n  className,\n  style,\n  reversed,\n  anchorElement,\n  useAnchorWidth,\n  onShouldClose,\n  ...popoverProps\n}: BasicDropdownProps) => {\n  useEffect(() => () => anchorElement?.focus(), [anchorElement]); // Re-focus anchor when closed.\n\n  return (\n    <Popover\n      id={id}\n      data-testid={id}\n      anchorElement={anchorElement}\n      onShouldClose={onShouldClose}\n      useAnchorWidth={useAnchorWidth}\n      placement=\"bottom-start\"\n      {...popoverProps}\n    >\n      <AnimatePresence>\n        <DropdownContainer\n          className={className}\n          style={style}\n          useAnchorWidth={useAnchorWidth}\n          reversed={reversed}\n          initial={{ opacity: 0, y: -6 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -6 }}\n          transition={{ duration: 0.2 }}\n        >\n          {children}\n        </DropdownContainer>\n      </AnimatePresence>\n    </Popover>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAOO,MAAM,eAAe,GAAG,CAAC,EAC9B,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EACd,aAAa,EACb,GAAG,YAAY,EACI,KAAI;IACvB,SAAS,CAAC,MAAM,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,EAAE,EACf,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAC,cAAc,EAAA,GACpB,YAAY,EAAA;AAEhB,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA;AACd,YAAAA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC3B,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAE5B,QAAQ,CACS,CACJ,CACV;AAEd;;;;"}
+{"version":3,"file":"DropdownPopover.js","sources":["../../../src/components/Dropdown/DropdownPopover.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { AnimatePresence, motion } from 'framer-motion';\n\nimport { buildClassnames } from '../../utils';\nimport { BasicDropdownProps } from './types';\nimport { Popover } from '../Popover';\nimport dropdownStyles from './Dropdown.module.scss';\n\nexport const DropdownPopover = ({\n  id,\n  children,\n  className,\n  style,\n  reversed,\n  anchorElement,\n  useAnchorWidth,\n  onShouldClose,\n  ...popoverProps\n}: BasicDropdownProps) => {\n  useEffect(() => () => anchorElement?.focus(), [anchorElement]); // Re-focus anchor when closed.\n\n  return (\n    <Popover\n      id={id}\n      data-testid={id}\n      anchorElement={anchorElement}\n      onShouldClose={onShouldClose}\n      useAnchorWidth={useAnchorWidth}\n      placement=\"bottom-start\"\n      {...popoverProps}\n    >\n      <AnimatePresence>\n        <motion.div\n          className={buildClassnames([dropdownStyles.dropdownContainer, className])}\n          style={style}\n          initial={{ opacity: 0, y: -6 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -6 }}\n          transition={{ duration: 0.2 }}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </Popover>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAQO,MAAM,eAAe,GAAG,CAAC,EAC9B,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EACd,aAAa,EACb,GAAG,YAAY,EACI,KAAI;IACvB,SAAS,CAAC,MAAM,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,EAAE,EACf,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAC,cAAc,EAAA,GACpB,YAAY,EAAA;AAEhB,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA;AACd,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,SAAS,EAAE,eAAe,CAAC,CAAC,cAAc,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,EACzE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAC3B,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAE5B,QAAQ,CACE,CACG,CACV;AAEd;;;;"}

package/dist/components/FilterTag/styled.cjs

@@ -6,7 +6,8 @@ var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
 var Text = require('../Text/Text.cjs');
 require('react');
 require('react-transition-group');
-require('../AnimatedDropdown/styled.cjs');
+require('uid/secure');
+require('../AnimatedDropdown/components/BasicDropdown.cjs');
 var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var DownArrowIcon = require('../../icons/design-system/components/DownArrowIcon.cjs');
 var sizes = require('../../theme/modules/sizes.cjs');

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.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/Grid/Grid.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+var Grid_module = require('./Grid.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Grid = React__default.default.forwardRef(({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([Grid_module.grid, className]), style: {
+        ...assignCssVars.assignCssVars({
+            gridColumns: columns,
+            gridSpacing: spacing ? sizes.sizes[spacing] : '0',
+        }),
+        ...style,
+    }, ...rest }, children)));
+Grid.displayName = 'Grid';
+
+exports.Grid = Grid;
+//# sourceMappingURL=Grid.cjs.map

package/dist/components/Grid/Grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.cjs","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { sizes } from '../../theme/modules/sizes';\nimport { GridProps } from './types';\nimport styles from './Grid.module.scss';\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps & React.HTMLAttributes<HTMLDivElement>>(\n  ({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.grid, className])}\n      style={{\n        ...assignCssVars({\n          gridColumns: columns,\n          gridSpacing: spacing ? sizes[spacing] : '0',\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nGrid.displayName = 'Grid';\n"],"names":["React","buildClassnames","styles","assignCssVars","sizes"],"mappings":";;;;;;;;;;;;;MAMa,IAAI,GAAGA,sBAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtEA,8CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAGC,2BAAa,CAAC;AACf,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,WAAW,EAAE,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,GAAG;SAC5C,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { GridProps } from './types';
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import styles from './Grid.module.scss.js';
+
+const Grid = React__default.forwardRef(({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.grid, className]), style: {
+        ...assignCssVars({
+            gridColumns: columns,
+            gridSpacing: spacing ? sizes[spacing] : '0',
+        }),
+        ...style,
+    }, ...rest }, children)));
+Grid.displayName = 'Grid';
+
+export { Grid };
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { sizes } from '../../theme/modules/sizes';\nimport { GridProps } from './types';\nimport styles from './Grid.module.scss';\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps & React.HTMLAttributes<HTMLDivElement>>(\n  ({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.grid, className])}\n      style={{\n        ...assignCssVars({\n          gridColumns: columns,\n          gridSpacing: spacing ? sizes[spacing] : '0',\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nGrid.displayName = 'Grid';\n"],"names":["React"],"mappings":";;;;;;;MAMa,IAAI,GAAGA,cAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtEA,sCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAG,aAAa,CAAC;AACf,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG;SAC5C,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._grid_qdgts_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}");
+var styles = {"grid":"_grid_qdgts_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Grid.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.scss.cjs","sources":["../../../src/components/Grid/Grid.module.scss"],"sourcesContent":[".grid {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+MAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._grid_qdgts_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}");
+var styles = {"grid":"_grid_qdgts_1"};
+
+export { styles as default };
+//# sourceMappingURL=Grid.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.scss.js","sources":["../../../src/components/Grid/Grid.module.scss"],"sourcesContent":[".grid {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+MAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

package/dist/components/Grid/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { GridProps } from './types';
-export declare const Grid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, GridProps, never>;
+export { Grid } from './Grid';
+export type { GridProps } from './types';

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/LegacyDataTable.d.ts

@@ -10,7 +10,7 @@ export declare const IconSortDesc: () => React.JSX.Element;
  */
 export declare const LegacyDataTable: {
     ({ borderless, striped, noWrap, showScrollbar, headers, rows, renderRow, renderNestedRow, expandedRowIds, renderLoadingRow, renderFooterRow, renderFooterLoadingRow, omitFooterSelectionCell, selectedRowIds, disabledSelectionInputRowIds, selectionMode, onChangeSelectedRowIds, sortColumnId, sortDirection, onChangeSort, isError, isLoading, skeletonRowsNumber, isHeaderSticky, stickyHeaderStyle, customSpecificState, bodyHeightInSpecificStates, startFixedColumnsNumber, endFixedColumnsNumber, }: LegacyDataTableProps): React.JSX.Element;
-    Cell: import("styled-components").StyledComponent<"td", any, import("./styled").CellProps, never>;
+    Cell: ({ align, grow, className, children, style, ...rest }: import("./styled").CellProps) => React.JSX.Element;
     ClickableCell: ({ onClick, children, ...otherProps }: import("./cells/ClickableCell").ClickableCellProps) => React.JSX.Element;
     EditableCell: ({ onClick, children, ...otherProps }: import("./cells/EditableCell").EditableCellProps) => React.JSX.Element;
     SkeletonCell: {

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("/* LegacyDataTable sub-component styles */\n/* Wrapper */\n._wrapper_14cvc_3 {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n._wrapperScrollDisabled_14cvc_11 {\n  overflow-x: hidden;\n}\n\n._wrapperScrollEnabled_14cvc_15 {\n  overflow-x: auto;\n}\n\n._wrapperBordered_14cvc_19 {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: 4px;\n}\n\n._wrapperShowScrollbar_14cvc_24 {\n  scrollbar-width: auto;\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar {\n  margin-top: 10px;\n  width: 6px;\n  height: 6px;\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar-track {\n  background: var(--colors-system-scrollbar-background);\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar-thumb {\n  background: var(--colors-system-scrollbar-thumb);\n  border-radius: 4px;\n}\n\n/* TooltipContent */\n._tooltipContent_14cvc_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n._head_14cvc_48 {\n  background-color: white;\n}\n\n/* Body */\n._body_14cvc_53 tr:not(:first-child) > td {\n  border-top: 1px solid transparent;\n}\n\n._body_14cvc_53._body_14cvc_53._body_14cvc_53 tr:hover td {\n  background-color: var(--colors-brand-blue-lightest); /* TODO: verify exact shade matches design */\n}\n\n._bodyBorderTop_14cvc_61 + ._bodyBorderTop_14cvc_61 > tr:first-child > td {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n/* Foot */\n._foot_14cvc_66 td {\n  background-color: var(--colors-neutral-grey-lightest);\n  padding: 1.5rem 1rem;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n}\n\n/* Row */\n._row_14cvc_73 {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._row_14cvc_73.hidden {\n  visibility: collapse;\n}\n\n._rowAccentColor_14cvc_80 > td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n._cell_14cvc_91 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n  width: var(--cell-width, auto);\n}\n._cell_14cvc_91 > * {\n  vertical-align: middle;\n}\n\n._cellGrow_14cvc_107 {\n  width: 100%;\n}\n\n/* HeaderCell */\n._headerCell_14cvc_112 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._headerCell_14cvc_112 > * {\n  vertical-align: middle;\n}\n._headerCell_14cvc_112 span {\n  white-space: pre-line;\n}\n._headerCell_14cvc_112.sortable:hover {\n  cursor: pointer;\n  background-color: var(--colors-neutral-grey-light);\n}\n\n/* HeaderCellLayout */\n._headerCellLayout_14cvc_137 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n}\n._headerCellLayout_14cvc_137 > * + * {\n  margin-left: 0.25rem;\n}\n\n/* Table */\n._table_14cvc_147 {\n  width: 100%;\n  border-spacing: 0;\n}\n._table_14cvc_147 * {\n  box-sizing: border-box;\n}\n\n._tableFixedLayout_14cvc_155 {\n  table-layout: fixed;\n}\n\n._tableLoading_14cvc_159 * {\n  user-select: none;\n  pointer-events: none;\n}\n\n._tableStriped_14cvc_164 ._body_14cvc_53:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._tableNoWrap_14cvc_168 ._headerCell_14cvc_112, ._tableNoWrap_14cvc_168 ._headerCell_14cvc_112 span {\n  white-space: nowrap;\n}\n\n/* Footer */\n._footer_14cvc_173 ._cell_14cvc_91 {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n._stickyHeaderWrapper_14cvc_182 {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}");
+var styles = {"wrapper":"_wrapper_14cvc_3","wrapperScrollDisabled":"_wrapperScrollDisabled_14cvc_11","wrapperScrollEnabled":"_wrapperScrollEnabled_14cvc_15","wrapperBordered":"_wrapperBordered_14cvc_19","wrapperShowScrollbar":"_wrapperShowScrollbar_14cvc_24","tooltipContent":"_tooltipContent_14cvc_41","head":"_head_14cvc_48","body":"_body_14cvc_53","bodyBorderTop":"_bodyBorderTop_14cvc_61","row":"_row_14cvc_73","rowAccentColor":"_rowAccentColor_14cvc_80","cell":"_cell_14cvc_91","cellGrow":"_cellGrow_14cvc_107","headerCell":"_headerCell_14cvc_112","headerCellLayout":"_headerCellLayout_14cvc_137","table":"_table_14cvc_147","tableFixedLayout":"_tableFixedLayout_14cvc_155","tableLoading":"_tableLoading_14cvc_159","tableStriped":"_tableStriped_14cvc_164","tableNoWrap":"_tableNoWrap_14cvc_168","footer":"_footer_14cvc_173","stickyHeaderWrapper":"_stickyHeaderWrapper_14cvc_182"};
+
+module.exports = styles;
+//# sourceMappingURL=LegacyDataTable.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyDataTable.module.scss.cjs","sources":["../../../src/components/LegacyDataTable/LegacyDataTable.module.scss"],"sourcesContent":["/* LegacyDataTable sub-component styles */\n\n/* Wrapper */\n.wrapper {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n.wrapperScrollDisabled {\n  overflow-x: hidden;\n}\n\n.wrapperScrollEnabled {\n  overflow-x: auto;\n}\n\n.wrapperBordered {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: 4px;\n}\n\n.wrapperShowScrollbar {\n  scrollbar-width: auto;\n\n  &::-webkit-scrollbar {\n    margin-top: 10px;\n    width: 6px;\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--colors-system-scrollbar-background);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--colors-system-scrollbar-thumb);\n    border-radius: 4px;\n  }\n}\n\n/* TooltipContent */\n.tooltipContent {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n.head {\n  background-color: white;\n}\n\n/* Body */\n.body {\n  & tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n}\n\n.body.body.body tr:hover td {\n  background-color: var(--colors-brand-blue-lightest); /* TODO: verify exact shade matches design */\n}\n\n.bodyBorderTop {\n  & + & > tr:first-child > td {\n    border-top: 1px solid var(--colors-neutral-grey-base);\n  }\n}\n\n/* Foot */\n.foot {\n  & td {\n    background-color: var(--colors-neutral-grey-lightest);\n    padding: 1.5rem 1rem;\n    border-top: 1px solid var(--colors-secondary-blue-base);\n  }\n}\n\n/* Row */\n.row {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  &:global(.hidden) {\n    visibility: collapse;\n  }\n}\n\n.rowAccentColor > td:first-child::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n.cell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n\n  width: var(--cell-width, auto);\n\n  & > * {\n    vertical-align: middle;\n  }\n}\n\n.cellGrow {\n  width: 100%;\n}\n\n/* HeaderCell */\n.headerCell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n\n  & > * {\n    vertical-align: middle;\n  }\n\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n\n  & span {\n    white-space: pre-line;\n  }\n\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  &:global(.sortable):hover {\n    cursor: pointer;\n    background-color: var(--colors-neutral-grey-light);\n  }\n}\n\n/* HeaderCellLayout */\n.headerCellLayout {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n}\n\n/* Table */\n.table {\n  width: 100%;\n  border-spacing: 0;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tableFixedLayout {\n  table-layout: fixed;\n}\n\n.tableLoading {\n  & * {\n    user-select: none;\n    pointer-events: none;\n  }\n}\n\n.tableStriped .body:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n.tableNoWrap {\n  & .headerCell,\n  & .headerCell span {\n    white-space: nowrap;\n  }\n}\n\n/* Footer */\n.footer .cell {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n.stickyHeaderWrapper {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}\n"],"names":[],"mappings":";;;;AAEA,eAAA,CAAA,w5IAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,sBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,sBAAA,CAAA,gCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,KAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,gCAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("/* LegacyDataTable sub-component styles */\n/* Wrapper */\n._wrapper_14cvc_3 {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n._wrapperScrollDisabled_14cvc_11 {\n  overflow-x: hidden;\n}\n\n._wrapperScrollEnabled_14cvc_15 {\n  overflow-x: auto;\n}\n\n._wrapperBordered_14cvc_19 {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: 4px;\n}\n\n._wrapperShowScrollbar_14cvc_24 {\n  scrollbar-width: auto;\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar {\n  margin-top: 10px;\n  width: 6px;\n  height: 6px;\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar-track {\n  background: var(--colors-system-scrollbar-background);\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar-thumb {\n  background: var(--colors-system-scrollbar-thumb);\n  border-radius: 4px;\n}\n\n/* TooltipContent */\n._tooltipContent_14cvc_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n._head_14cvc_48 {\n  background-color: white;\n}\n\n/* Body */\n._body_14cvc_53 tr:not(:first-child) > td {\n  border-top: 1px solid transparent;\n}\n\n._body_14cvc_53._body_14cvc_53._body_14cvc_53 tr:hover td {\n  background-color: var(--colors-brand-blue-lightest); /* TODO: verify exact shade matches design */\n}\n\n._bodyBorderTop_14cvc_61 + ._bodyBorderTop_14cvc_61 > tr:first-child > td {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n/* Foot */\n._foot_14cvc_66 td {\n  background-color: var(--colors-neutral-grey-lightest);\n  padding: 1.5rem 1rem;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n}\n\n/* Row */\n._row_14cvc_73 {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._row_14cvc_73.hidden {\n  visibility: collapse;\n}\n\n._rowAccentColor_14cvc_80 > td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n._cell_14cvc_91 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n  width: var(--cell-width, auto);\n}\n._cell_14cvc_91 > * {\n  vertical-align: middle;\n}\n\n._cellGrow_14cvc_107 {\n  width: 100%;\n}\n\n/* HeaderCell */\n._headerCell_14cvc_112 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._headerCell_14cvc_112 > * {\n  vertical-align: middle;\n}\n._headerCell_14cvc_112 span {\n  white-space: pre-line;\n}\n._headerCell_14cvc_112.sortable:hover {\n  cursor: pointer;\n  background-color: var(--colors-neutral-grey-light);\n}\n\n/* HeaderCellLayout */\n._headerCellLayout_14cvc_137 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n}\n._headerCellLayout_14cvc_137 > * + * {\n  margin-left: 0.25rem;\n}\n\n/* Table */\n._table_14cvc_147 {\n  width: 100%;\n  border-spacing: 0;\n}\n._table_14cvc_147 * {\n  box-sizing: border-box;\n}\n\n._tableFixedLayout_14cvc_155 {\n  table-layout: fixed;\n}\n\n._tableLoading_14cvc_159 * {\n  user-select: none;\n  pointer-events: none;\n}\n\n._tableStriped_14cvc_164 ._body_14cvc_53:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._tableNoWrap_14cvc_168 ._headerCell_14cvc_112, ._tableNoWrap_14cvc_168 ._headerCell_14cvc_112 span {\n  white-space: nowrap;\n}\n\n/* Footer */\n._footer_14cvc_173 ._cell_14cvc_91 {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n._stickyHeaderWrapper_14cvc_182 {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}");
+var styles = {"wrapper":"_wrapper_14cvc_3","wrapperScrollDisabled":"_wrapperScrollDisabled_14cvc_11","wrapperScrollEnabled":"_wrapperScrollEnabled_14cvc_15","wrapperBordered":"_wrapperBordered_14cvc_19","wrapperShowScrollbar":"_wrapperShowScrollbar_14cvc_24","tooltipContent":"_tooltipContent_14cvc_41","head":"_head_14cvc_48","body":"_body_14cvc_53","bodyBorderTop":"_bodyBorderTop_14cvc_61","row":"_row_14cvc_73","rowAccentColor":"_rowAccentColor_14cvc_80","cell":"_cell_14cvc_91","cellGrow":"_cellGrow_14cvc_107","headerCell":"_headerCell_14cvc_112","headerCellLayout":"_headerCellLayout_14cvc_137","table":"_table_14cvc_147","tableFixedLayout":"_tableFixedLayout_14cvc_155","tableLoading":"_tableLoading_14cvc_159","tableStriped":"_tableStriped_14cvc_164","tableNoWrap":"_tableNoWrap_14cvc_168","footer":"_footer_14cvc_173","stickyHeaderWrapper":"_stickyHeaderWrapper_14cvc_182"};
+
+export { styles as default };
+//# sourceMappingURL=LegacyDataTable.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyDataTable.module.scss.js","sources":["../../../src/components/LegacyDataTable/LegacyDataTable.module.scss"],"sourcesContent":["/* LegacyDataTable sub-component styles */\n\n/* Wrapper */\n.wrapper {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n.wrapperScrollDisabled {\n  overflow-x: hidden;\n}\n\n.wrapperScrollEnabled {\n  overflow-x: auto;\n}\n\n.wrapperBordered {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: 4px;\n}\n\n.wrapperShowScrollbar {\n  scrollbar-width: auto;\n\n  &::-webkit-scrollbar {\n    margin-top: 10px;\n    width: 6px;\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--colors-system-scrollbar-background);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--colors-system-scrollbar-thumb);\n    border-radius: 4px;\n  }\n}\n\n/* TooltipContent */\n.tooltipContent {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n.head {\n  background-color: white;\n}\n\n/* Body */\n.body {\n  & tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n}\n\n.body.body.body tr:hover td {\n  background-color: var(--colors-brand-blue-lightest); /* TODO: verify exact shade matches design */\n}\n\n.bodyBorderTop {\n  & + & > tr:first-child > td {\n    border-top: 1px solid var(--colors-neutral-grey-base);\n  }\n}\n\n/* Foot */\n.foot {\n  & td {\n    background-color: var(--colors-neutral-grey-lightest);\n    padding: 1.5rem 1rem;\n    border-top: 1px solid var(--colors-secondary-blue-base);\n  }\n}\n\n/* Row */\n.row {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  &:global(.hidden) {\n    visibility: collapse;\n  }\n}\n\n.rowAccentColor > td:first-child::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n.cell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n\n  width: var(--cell-width, auto);\n\n  & > * {\n    vertical-align: middle;\n  }\n}\n\n.cellGrow {\n  width: 100%;\n}\n\n/* HeaderCell */\n.headerCell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n\n  & > * {\n    vertical-align: middle;\n  }\n\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n\n  & span {\n    white-space: pre-line;\n  }\n\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  &:global(.sortable):hover {\n    cursor: pointer;\n    background-color: var(--colors-neutral-grey-light);\n  }\n}\n\n/* HeaderCellLayout */\n.headerCellLayout {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n}\n\n/* Table */\n.table {\n  width: 100%;\n  border-spacing: 0;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tableFixedLayout {\n  table-layout: fixed;\n}\n\n.tableLoading {\n  & * {\n    user-select: none;\n    pointer-events: none;\n  }\n}\n\n.tableStriped .body:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n.tableNoWrap {\n  & .headerCell,\n  & .headerCell span {\n    white-space: nowrap;\n  }\n}\n\n/* Footer */\n.footer .cell {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n.stickyHeaderWrapper {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEAA,WAAA,CAAA,w5IAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,sBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,sBAAA,CAAA,gCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,KAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,gCAAA;;;;"}