@veeqo/ui 14.12.0-beta-1 → 14.12.0

package/dist/components/FilterTag/FilterTag.cjs

@@ -5,12 +5,15 @@ var useDropdown = require('../../hooks/useDropdown.cjs');
 require('../../hooks/useFocusVisible.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
 require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
-var styled = require('./styled.cjs');
 var useHandleFocus = require('../Popover/hooks/useHandleFocus.cjs');
 var Text = require('../Text/Text.cjs');
 var AnimatedDropdown = require('../AnimatedDropdown/AnimatedDropdown.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var DownArrowIcon = require('../../icons/design-system/components/DownArrowIcon.cjs');
+var FilterTag_module = require('./FilterTag.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -52,17 +55,21 @@ const FilterTag = ({ className, e2eClassName, label, text, iconSlot, fill = colo
     }, [onClickAway, closeDropdown, shouldCloseOnClickAway]);
     const shouldShowSimple = !content;
     if (shouldShowSimple) {
-        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]), onClick: onClick },
-            label && React__default.default.createElement(styled.GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+        return (React__default.default.createElement("button", { type: "button", className: buildClassnames.buildClassnames([
+                FilterTag_module.container,
+                classNames === null || classNames === void 0 ? void 0 : classNames.container,
+                e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            ]), onClick: onClick },
+            label && (React__default.default.createElement(Text.Text, { className: FilterTag_module.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
             React__default.default.createElement(Text.Text, null, text),
-            React__default.default.createElement(styled.CrossIcon, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.colors.neutral.ink.base })));
+            React__default.default.createElement(CrossIcon.ReactComponent, { className: buildClassnames.buildClassnames([FilterTag_module.crossIcon, classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.colors.neutral.ink.base })));
     }
-    return (React__default.default.createElement(AnimatedDropdown.AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.default.createElement(styled.Container, { className: classNames.container, onClick: handleClick, ref: setAnchorElement },
-            label && React__default.default.createElement(styled.GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+    return (React__default.default.createElement(AnimatedDropdown.AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.default.createElement("button", { type: "button", className: buildClassnames.buildClassnames([FilterTag_module.container, classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: handleClick, ref: setAnchorElement },
+            label && (React__default.default.createElement(Text.Text, { className: FilterTag_module.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
             React__default.default.createElement(Text.Text, null, text),
-            React__default.default.createElement(styled.MainIcon, { color: colors.colors.neutral.ink.base, name: "downArrow", "$shouldShow": shouldShowDropdown })) },
-        React__default.default.createElement(styled.Content, { ref: setPopperElement, onKeyDown: handleKeyDown },
-            React__default.default.createElement(styled.Header, { color: fill }, header || (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(DownArrowIcon.ReactComponent, { className: buildClassnames.buildClassnames([FilterTag_module.mainIcon, shouldShowDropdown && FilterTag_module.rotated]), color: colors.colors.neutral.ink.base, name: "downArrow" })) },
+        React__default.default.createElement("div", { className: FilterTag_module.content, ref: setPopperElement, onKeyDown: handleKeyDown },
+            React__default.default.createElement("div", { className: FilterTag_module.header, style: assignCssVars.assignCssVars({ headerColor: fill }) }, header || (React__default.default.createElement(React__default.default.Fragment, null,
                 iconSlot,
                 React__default.default.createElement(Text.Text, { variant: "bodyBold" }, label)))),
             content,

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

@@ -1 +1 @@
-{"version":3,"file":"FilterTag.cjs","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport {\n  Container,\n  Text,\n  Dropdown,\n  GroupLabel,\n  MainIcon,\n  CrossIcon,\n  Content,\n  Header,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\n\nexport interface ClassNamesReturnPayload {\n  filterTagDropdown?: string;\n  container?: string;\n  cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n  className,\n  e2eClassName,\n  label,\n  text,\n  iconSlot,\n  fill = colors.secondary.blue.base,\n  content,\n  footer,\n  header,\n  onClickAway,\n  onClick,\n  shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n    anchorElement,\n  });\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose: closeDropdown,\n  });\n\n  const handleClick: MouseEventHandler<HTMLDivElement> = useCallback(\n    (event) => {\n      if (shouldShowDropdown) closeDropdown();\n      else toggleShouldShowDropdown();\n\n      if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n    },\n    [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n  );\n\n  const handleClickAway = useCallback(\n    (event: any) => {\n      // Escape hatch to apply custom behavior when clicked away\n      if (onClickAway) onClickAway(event, closeDropdown);\n\n      // Default clickAway behavior (closes the dropdown)\n      if (shouldCloseOnClickAway) closeDropdown();\n    },\n    [onClickAway, closeDropdown, shouldCloseOnClickAway],\n  );\n\n  const shouldShowSimple = !content;\n\n  if (shouldShowSimple) {\n    return (\n      <Container\n        className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n        onClick={onClick}\n      >\n        {label && <GroupLabel variant=\"subheadingSmallBold\">{`${label}:`}</GroupLabel>}\n        <Text>{text}</Text>\n        <CrossIcon\n          className={buildClassnames([classNames?.cross, e2eClassNames?.cross])}\n          name=\"cross\"\n          color={colors.neutral.ink.base}\n        />\n      </Container>\n    );\n  }\n\n  return (\n    <Dropdown\n      className={classNames.filterTagDropdown}\n      shouldShowDropdown={shouldShowDropdown}\n      onClickAway={handleClickAway}\n      cta={\n        <Container className={classNames.container} onClick={handleClick} ref={setAnchorElement}>\n          {label && <GroupLabel variant=\"subheadingSmallBold\">{`${label}:`}</GroupLabel>}\n          <Text>{text}</Text>\n          <MainIcon\n            color={colors.neutral.ink.base}\n            name=\"downArrow\"\n            $shouldShow={shouldShowDropdown}\n          />\n        </Container>\n      }\n    >\n      <Content ref={setPopperElement} onKeyDown={handleKeyDown}>\n        <Header color={fill}>\n          {header || (\n            <>\n              {iconSlot}\n              <Text variant=\"bodyBold\">{label}</Text>\n            </>\n          )}\n        </Header>\n        {content}\n        {footer}\n      </Content>\n    </Dropdown>\n  );\n};\n"],"names":["colors","useState","useDropdown","useHandleFocus","useCallback","React","Container","buildClassnames","GroupLabel","Text","CrossIcon","Dropdown","MainIcon","Content","Header"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,iBAAiB,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,oBAAA,CAAsB,GAAG,SAAS;IACvE,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,GAAG,SAAS;IACrD,KAAK,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,MAAA,CAAQ,GAAG,SAAS;AAC9C,CAAA,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,GAAGA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EACjC,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,sBAAsB,GAAG,IAAI,GACd,KAAI;AACnB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;IAEtD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;IAC/E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,aAAa,EAAE,GAAGC,uBAAW,CAAC;QAClF,aAAa;AACd,KAAA,CAAC;AAEF,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;QACvC,aAAa;QACb,aAAa;AACb,QAAA,OAAO,EAAE,aAAa;AACvB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAsCC,iBAAW,CAChE,CAAC,KAAK,KAAI;AACR,QAAA,IAAI,kBAAkB;AAAE,YAAA,aAAa,EAAE;;AAClC,YAAA,wBAAwB,EAAE;QAE/B,IAAI,WAAW,IAAI,kBAAkB;YAAE,WAAW,CAAC,KAAY,CAAC;IAClE,CAAC,EACD,CAAC,kBAAkB,EAAE,aAAa,EAAE,wBAAwB,EAAE,WAAW,CAAC,CAC3E;AAED,IAAA,MAAM,eAAe,GAAGA,iBAAW,CACjC,CAAC,KAAU,KAAI;;AAEb,QAAA,IAAI,WAAW;AAAE,YAAA,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC;;AAGlD,QAAA,IAAI,sBAAsB;AAAE,YAAA,aAAa,EAAE;IAC7C,CAAC,EACD,CAAC,WAAW,EAAE,aAAa,EAAE,sBAAsB,CAAC,CACrD;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,OAAO;AAEjC,IAAA,IAAI,gBAAgB,EAAE;AACpB,QAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,gBAAS,EAAA,EACR,SAAS,EAAEC,+BAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS,CAAC,CAAC,EAC7E,OAAO,EAAE,OAAO,EAAA;YAEf,KAAK,IAAIF,sBAAA,CAAA,aAAA,CAACG,iBAAU,EAAA,EAAC,OAAO,EAAC,qBAAqB,EAAA,EAAE,CAAA,EAAG,KAAK,CAAA,CAAA,CAAG,CAAc;YAC9EH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,IAAA,EAAE,IAAI,CAAQ;AACnB,YAAAJ,sBAAA,CAAA,aAAA,CAACK,gBAAS,EAAA,EACR,SAAS,EAAEH,+BAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,CAAC,CAAC,EACrE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAEP,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC9B,CACQ;AAEf,IAAA;AAED,IAAA,QACEK,sBAAA,CAAA,aAAA,CAACM,iCAAQ,EAAA,EACP,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,eAAe,EAC5B,GAAG,EACDN,sBAAA,CAAA,aAAA,CAACC,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,gBAAgB,EAAA;YACpF,KAAK,IAAID,sBAAA,CAAA,aAAA,CAACG,iBAAU,EAAA,EAAC,OAAO,EAAC,qBAAqB,EAAA,EAAE,CAAA,EAAG,KAAK,CAAA,CAAA,CAAG,CAAc;YAC9EH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,IAAA,EAAE,IAAI,CAAQ;AACnB,YAAAJ,sBAAA,CAAA,aAAA,CAACO,eAAQ,EAAA,EACP,KAAK,EAAEZ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC9B,IAAI,EAAC,WAAW,EAAA,aAAA,EACH,kBAAkB,GAC/B,CACQ,EAAA;QAGdK,sBAAA,CAAA,aAAA,CAACQ,cAAO,IAAC,GAAG,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAA;YACtDR,sBAAA,CAAA,aAAA,CAACS,aAAM,IAAC,KAAK,EAAE,IAAI,EAAA,EAChB,MAAM,KACLT,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACG,QAAQ;gBACTA,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,KAAK,CAAQ,CACtC,CACJ,CACM;YACR,OAAO;YACP,MAAM,CACC,CACD;AAEf;;;;"}
+{"version":3,"file":"FilterTag.cjs","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\nimport { Text } from '../Text';\nimport { AnimatedDropdown as Dropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport styles from './FilterTag.module.scss';\n\nexport interface ClassNamesReturnPayload {\n  filterTagDropdown?: string;\n  container?: string;\n  cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n  className,\n  e2eClassName,\n  label,\n  text,\n  iconSlot,\n  fill = colors.secondary.blue.base,\n  content,\n  footer,\n  header,\n  onClickAway,\n  onClick,\n  shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n    anchorElement,\n  });\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose: closeDropdown,\n  });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (event) => {\n      if (shouldShowDropdown) closeDropdown();\n      else toggleShouldShowDropdown();\n\n      if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n    },\n    [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n  );\n\n  const handleClickAway = useCallback(\n    (event: any) => {\n      // Escape hatch to apply custom behavior when clicked away\n      if (onClickAway) onClickAway(event, closeDropdown);\n\n      // Default clickAway behavior (closes the dropdown)\n      if (shouldCloseOnClickAway) closeDropdown();\n    },\n    [onClickAway, closeDropdown, shouldCloseOnClickAway],\n  );\n\n  const shouldShowSimple = !content;\n\n  if (shouldShowSimple) {\n    return (\n      <button\n        type=\"button\"\n        className={buildClassnames([\n          styles.container,\n          classNames?.container,\n          e2eClassNames?.container,\n        ])}\n        onClick={onClick}\n      >\n        {label && (\n          <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n        )}\n        <Text>{text}</Text>\n        <CrossIcon\n          className={buildClassnames([styles.crossIcon, classNames?.cross, e2eClassNames?.cross])}\n          name=\"cross\"\n          color={colors.neutral.ink.base}\n        />\n      </button>\n    );\n  }\n\n  return (\n    <Dropdown\n      className={classNames.filterTagDropdown}\n      shouldShowDropdown={shouldShowDropdown}\n      onClickAway={handleClickAway}\n      cta={\n        <button\n          type=\"button\"\n          className={buildClassnames([styles.container, classNames.container, e2eClassNames?.container])}\n          onClick={handleClick}\n          ref={setAnchorElement}\n        >\n          {label && (\n            <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n          )}\n          <Text>{text}</Text>\n          <DownArrowIcon\n            className={buildClassnames([styles.mainIcon, shouldShowDropdown && styles.rotated])}\n            color={colors.neutral.ink.base}\n            name=\"downArrow\"\n          />\n        </button>\n      }\n    >\n      <div className={styles.content} ref={setPopperElement} onKeyDown={handleKeyDown}>\n        <div className={styles.header} style={assignCssVars({ headerColor: fill })}>\n          {header || (\n            <>\n              {iconSlot}\n              <Text variant=\"bodyBold\">{label}</Text>\n            </>\n          )}\n        </div>\n        {content}\n        {footer}\n      </div>\n    </Dropdown>\n  );\n};\n"],"names":["colors","useState","useDropdown","useHandleFocus","useCallback","React","buildClassnames","styles","Text","CrossIcon","Dropdown","DownArrowIcon","assignCssVars"],"mappings":"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"}

package/dist/components/FilterTag/FilterTag.js

@@ -3,12 +3,15 @@ import { useDropdown } from '../../hooks/useDropdown.js';
 import '../../hooks/useFocusVisible.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
 import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
-import { Container, GroupLabel, CrossIcon as StyledCrossIcon, MainIcon, Content, Header } from './styled.js';
 import { useHandleFocus } from '../Popover/hooks/useHandleFocus.js';
 import { Text } from '../Text/Text.js';
 import { AnimatedDropdown } from '../AnimatedDropdown/AnimatedDropdown.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { ReactComponent as DownArrowIcon } from '../../icons/design-system/components/DownArrowIcon.js';
+import styles from './FilterTag.module.scss.js';
 
 const generateClassNames = (prefix) => ({
     filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,
@@ -46,17 +49,21 @@ const FilterTag = ({ className, e2eClassName, label, text, iconSlot, fill = colo
     }, [onClickAway, closeDropdown, shouldCloseOnClickAway]);
     const shouldShowSimple = !content;
     if (shouldShowSimple) {
-        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]), onClick: onClick },
-            label && React__default.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+        return (React__default.createElement("button", { type: "button", className: buildClassnames([
+                styles.container,
+                classNames === null || classNames === void 0 ? void 0 : classNames.container,
+                e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            ]), onClick: onClick },
+            label && (React__default.createElement(Text, { className: styles.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
             React__default.createElement(Text, null, text),
-            React__default.createElement(StyledCrossIcon, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.neutral.ink.base })));
+            React__default.createElement(CrossIcon, { className: buildClassnames([styles.crossIcon, classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.neutral.ink.base })));
     }
-    return (React__default.createElement(AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.createElement(Container, { className: classNames.container, onClick: handleClick, ref: setAnchorElement },
-            label && React__default.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+    return (React__default.createElement(AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.createElement("button", { type: "button", className: buildClassnames([styles.container, classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: handleClick, ref: setAnchorElement },
+            label && (React__default.createElement(Text, { className: styles.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
             React__default.createElement(Text, null, text),
-            React__default.createElement(MainIcon, { color: colors.neutral.ink.base, name: "downArrow", "$shouldShow": shouldShowDropdown })) },
-        React__default.createElement(Content, { ref: setPopperElement, onKeyDown: handleKeyDown },
-            React__default.createElement(Header, { color: fill }, header || (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(DownArrowIcon, { className: buildClassnames([styles.mainIcon, shouldShowDropdown && styles.rotated]), color: colors.neutral.ink.base, name: "downArrow" })) },
+        React__default.createElement("div", { className: styles.content, ref: setPopperElement, onKeyDown: handleKeyDown },
+            React__default.createElement("div", { className: styles.header, style: assignCssVars({ headerColor: fill }) }, header || (React__default.createElement(React__default.Fragment, null,
                 iconSlot,
                 React__default.createElement(Text, { variant: "bodyBold" }, label)))),
             content,

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

@@ -1 +1 @@
-{"version":3,"file":"FilterTag.js","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport {\n  Container,\n  Text,\n  Dropdown,\n  GroupLabel,\n  MainIcon,\n  CrossIcon,\n  Content,\n  Header,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\n\nexport interface ClassNamesReturnPayload {\n  filterTagDropdown?: string;\n  container?: string;\n  cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n  className,\n  e2eClassName,\n  label,\n  text,\n  iconSlot,\n  fill = colors.secondary.blue.base,\n  content,\n  footer,\n  header,\n  onClickAway,\n  onClick,\n  shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n    anchorElement,\n  });\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose: closeDropdown,\n  });\n\n  const handleClick: MouseEventHandler<HTMLDivElement> = useCallback(\n    (event) => {\n      if (shouldShowDropdown) closeDropdown();\n      else toggleShouldShowDropdown();\n\n      if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n    },\n    [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n  );\n\n  const handleClickAway = useCallback(\n    (event: any) => {\n      // Escape hatch to apply custom behavior when clicked away\n      if (onClickAway) onClickAway(event, closeDropdown);\n\n      // Default clickAway behavior (closes the dropdown)\n      if (shouldCloseOnClickAway) closeDropdown();\n    },\n    [onClickAway, closeDropdown, shouldCloseOnClickAway],\n  );\n\n  const shouldShowSimple = !content;\n\n  if (shouldShowSimple) {\n    return (\n      <Container\n        className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n        onClick={onClick}\n      >\n        {label && <GroupLabel variant=\"subheadingSmallBold\">{`${label}:`}</GroupLabel>}\n        <Text>{text}</Text>\n        <CrossIcon\n          className={buildClassnames([classNames?.cross, e2eClassNames?.cross])}\n          name=\"cross\"\n          color={colors.neutral.ink.base}\n        />\n      </Container>\n    );\n  }\n\n  return (\n    <Dropdown\n      className={classNames.filterTagDropdown}\n      shouldShowDropdown={shouldShowDropdown}\n      onClickAway={handleClickAway}\n      cta={\n        <Container className={classNames.container} onClick={handleClick} ref={setAnchorElement}>\n          {label && <GroupLabel variant=\"subheadingSmallBold\">{`${label}:`}</GroupLabel>}\n          <Text>{text}</Text>\n          <MainIcon\n            color={colors.neutral.ink.base}\n            name=\"downArrow\"\n            $shouldShow={shouldShowDropdown}\n          />\n        </Container>\n      }\n    >\n      <Content ref={setPopperElement} onKeyDown={handleKeyDown}>\n        <Header color={fill}>\n          {header || (\n            <>\n              {iconSlot}\n              <Text variant=\"bodyBold\">{label}</Text>\n            </>\n          )}\n        </Header>\n        {content}\n        {footer}\n      </Content>\n    </Dropdown>\n  );\n};\n"],"names":["React","CrossIcon","Dropdown"],"mappings":"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"}
+{"version":3,"file":"FilterTag.js","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\nimport { Text } from '../Text';\nimport { AnimatedDropdown as Dropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport styles from './FilterTag.module.scss';\n\nexport interface ClassNamesReturnPayload {\n  filterTagDropdown?: string;\n  container?: string;\n  cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n  className,\n  e2eClassName,\n  label,\n  text,\n  iconSlot,\n  fill = colors.secondary.blue.base,\n  content,\n  footer,\n  header,\n  onClickAway,\n  onClick,\n  shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n    anchorElement,\n  });\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose: closeDropdown,\n  });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (event) => {\n      if (shouldShowDropdown) closeDropdown();\n      else toggleShouldShowDropdown();\n\n      if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n    },\n    [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n  );\n\n  const handleClickAway = useCallback(\n    (event: any) => {\n      // Escape hatch to apply custom behavior when clicked away\n      if (onClickAway) onClickAway(event, closeDropdown);\n\n      // Default clickAway behavior (closes the dropdown)\n      if (shouldCloseOnClickAway) closeDropdown();\n    },\n    [onClickAway, closeDropdown, shouldCloseOnClickAway],\n  );\n\n  const shouldShowSimple = !content;\n\n  if (shouldShowSimple) {\n    return (\n      <button\n        type=\"button\"\n        className={buildClassnames([\n          styles.container,\n          classNames?.container,\n          e2eClassNames?.container,\n        ])}\n        onClick={onClick}\n      >\n        {label && (\n          <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n        )}\n        <Text>{text}</Text>\n        <CrossIcon\n          className={buildClassnames([styles.crossIcon, classNames?.cross, e2eClassNames?.cross])}\n          name=\"cross\"\n          color={colors.neutral.ink.base}\n        />\n      </button>\n    );\n  }\n\n  return (\n    <Dropdown\n      className={classNames.filterTagDropdown}\n      shouldShowDropdown={shouldShowDropdown}\n      onClickAway={handleClickAway}\n      cta={\n        <button\n          type=\"button\"\n          className={buildClassnames([styles.container, classNames.container, e2eClassNames?.container])}\n          onClick={handleClick}\n          ref={setAnchorElement}\n        >\n          {label && (\n            <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n          )}\n          <Text>{text}</Text>\n          <DownArrowIcon\n            className={buildClassnames([styles.mainIcon, shouldShowDropdown && styles.rotated])}\n            color={colors.neutral.ink.base}\n            name=\"downArrow\"\n          />\n        </button>\n      }\n    >\n      <div className={styles.content} ref={setPopperElement} onKeyDown={handleKeyDown}>\n        <div className={styles.header} style={assignCssVars({ headerColor: fill })}>\n          {header || (\n            <>\n              {iconSlot}\n              <Text variant=\"bodyBold\">{label}</Text>\n            </>\n          )}\n        </div>\n        {content}\n        {footer}\n      </div>\n    </Dropdown>\n  );\n};\n"],"names":["React","Dropdown"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_1g0hs_1 {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: var(--colors-neutral-grey-base);\n  padding: var(--sizes-xs) var(--sizes-sm);\n  cursor: pointer;\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n._container_1g0hs_1 svg {\n  width: var(--sizes-base);\n  height: var(--sizes-base);\n}\n._container_1g0hs_1:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1g0hs_20 {\n  margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1g0hs_24 {\n  margin-left: var(--sizes-xs);\n  transform: rotate(0);\n  width: 10px;\n  height: 10px;\n}\n\n._rotated_1g0hs_31 {\n  transform: rotate(180deg);\n}\n\n._crossIcon_1g0hs_35 {\n  margin-left: var(--sizes-xs);\n  height: 10px;\n  width: 10px;\n}\n\n._content_1g0hs_41 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n._header_1g0hs_48 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: var(--sizes-3) 18px;\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._header_1g0hs_48 svg {\n  color: var(--header-color);\n  width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-right: 10px;\n}");
+var styles = {"container":"_container_1g0hs_1","groupLabel":"_groupLabel_1g0hs_20","mainIcon":"_mainIcon_1g0hs_24","rotated":"_rotated_1g0hs_31","crossIcon":"_crossIcon_1g0hs_35","content":"_content_1g0hs_41","header":"_header_1g0hs_48"};
+
+module.exports = styles;
+//# sourceMappingURL=FilterTag.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTag.module.scss.cjs","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: var(--colors-neutral-grey-base);\n  padding: var(--sizes-xs) var(--sizes-sm);\n  cursor: pointer;\n\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n\n  svg {\n    width: var(--sizes-base);\n    height: var(--sizes-base);\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n  }\n}\n\n.groupLabel {\n  margin-right: var(--sizes-xs);\n}\n\n.mainIcon {\n  margin-left: var(--sizes-xs);\n  transform: rotate(0);\n\n  width: 10px;\n  height: 10px;\n}\n\n.rotated {\n  transform: rotate(180deg);\n}\n\n.crossIcon {\n  margin-left: var(--sizes-xs);\n  height: 10px;\n  width: 10px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n.header {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: var(--sizes-3) 18px;\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  svg {\n    color: var(--header-color);\n    width: var(--sizes-5);\n    height: var(--sizes-5);\n    margin-right: 10px;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+yCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_1g0hs_1 {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: var(--colors-neutral-grey-base);\n  padding: var(--sizes-xs) var(--sizes-sm);\n  cursor: pointer;\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n._container_1g0hs_1 svg {\n  width: var(--sizes-base);\n  height: var(--sizes-base);\n}\n._container_1g0hs_1:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1g0hs_20 {\n  margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1g0hs_24 {\n  margin-left: var(--sizes-xs);\n  transform: rotate(0);\n  width: 10px;\n  height: 10px;\n}\n\n._rotated_1g0hs_31 {\n  transform: rotate(180deg);\n}\n\n._crossIcon_1g0hs_35 {\n  margin-left: var(--sizes-xs);\n  height: 10px;\n  width: 10px;\n}\n\n._content_1g0hs_41 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n._header_1g0hs_48 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: var(--sizes-3) 18px;\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._header_1g0hs_48 svg {\n  color: var(--header-color);\n  width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-right: 10px;\n}");
+var styles = {"container":"_container_1g0hs_1","groupLabel":"_groupLabel_1g0hs_20","mainIcon":"_mainIcon_1g0hs_24","rotated":"_rotated_1g0hs_31","crossIcon":"_crossIcon_1g0hs_35","content":"_content_1g0hs_41","header":"_header_1g0hs_48"};
+
+export { styles as default };
+//# sourceMappingURL=FilterTag.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTag.module.scss.js","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: var(--colors-neutral-grey-base);\n  padding: var(--sizes-xs) var(--sizes-sm);\n  cursor: pointer;\n\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n\n  svg {\n    width: var(--sizes-base);\n    height: var(--sizes-base);\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n  }\n}\n\n.groupLabel {\n  margin-right: var(--sizes-xs);\n}\n\n.mainIcon {\n  margin-left: var(--sizes-xs);\n  transform: rotate(0);\n\n  width: 10px;\n  height: 10px;\n}\n\n.rotated {\n  transform: rotate(180deg);\n}\n\n.crossIcon {\n  margin-left: var(--sizes-xs);\n  height: 10px;\n  width: 10px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n.header {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: var(--sizes-3) 18px;\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  svg {\n    color: var(--header-color);\n    width: var(--sizes-5);\n    height: var(--sizes-5);\n    margin-right: 10px;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+yCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

package/dist/components/Indicator/Indicator.cjs

@@ -1,16 +1,23 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var Indicator_module = require('./Indicator.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
-    const backgroundColor = color || index.theme.colors.neutral.grey.base;
-    return (React__default.default.createElement(styled.Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
+const Indicator = ({ color, style, textColour, size = 'base', className, ...otherProps }) => {
+    return (React__default.default.createElement("div", { role: "status", className: buildClassnames.buildClassnames([Indicator_module.indicator, Indicator_module[`${size}-size`], className]), style: {
+            ...assignCssVars.assignCssVars({
+                indicatorColor: color,
+                indicatorTextColor: textColour,
+            }),
+            ...style,
+        }, ...otherProps }));
 };
 
 exports.Indicator = Indicator;

package/dist/components/Indicator/Indicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.cjs","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Wrapper } from './styled';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  ...otherProps\n}: IndicatorProps) => {\n  const backgroundColor = color || theme.colors.neutral.grey.base;\n  return (\n    <Wrapper\n      role=\"status\"\n      style={{ backgroundColor, color: textColour, ...style }}\n      size={size}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["theme","React","Wrapper"],"mappings":";;;;;;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,GAAG,UAAU,EACE,KAAI;AACnB,IAAA,MAAM,eAAe,GAAG,KAAK,IAAIA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC/D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,cAAO,EAAA,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EACvD,IAAI,EAAE,IAAI,EAAA,GACN,UAAU,EAAA,CACd;AAEN;;;;"}
+{"version":3,"file":"Indicator.cjs","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport styles from './Indicator.module.scss';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  className,\n  ...otherProps\n}: IndicatorProps) => {\n  return (\n    <div\n      role=\"status\"\n      className={buildClassnames([styles.indicator, styles[`${size}-size`], className])}\n      style={{\n        ...assignCssVars({\n          indicatorColor: color,\n          indicatorTextColor: textColour,\n        }),\n        ...style,\n      }}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React","buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,UAAU,EACE,KAAI;IACnB,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,SAAS,EAAEA,gBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EACjF,KAAK,EAAE;AACL,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,kBAAkB,EAAE,UAAU;aAC/B,CAAC;AACF,YAAA,GAAG,KAAK;SACT,EAAA,GACG,UAAU,EAAA,CACd;AAEN;;;;"}

package/dist/components/Indicator/Indicator.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IndicatorProps } from './types';
-export declare const Indicator: ({ color, style, textColour, size, ...otherProps }: IndicatorProps) => React.JSX.Element;
+export declare const Indicator: ({ color, style, textColour, size, className, ...otherProps }: IndicatorProps) => React.JSX.Element;

package/dist/components/Indicator/Indicator.js

@@ -1,10 +1,17 @@
 import React__default from 'react';
-import { theme } from '../../theme/index.js';
-import { Wrapper } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import styles from './Indicator.module.scss.js';
 
-const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
-    const backgroundColor = color || theme.colors.neutral.grey.base;
-    return (React__default.createElement(Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
+const Indicator = ({ color, style, textColour, size = 'base', className, ...otherProps }) => {
+    return (React__default.createElement("div", { role: "status", className: buildClassnames([styles.indicator, styles[`${size}-size`], className]), style: {
+            ...assignCssVars({
+                indicatorColor: color,
+                indicatorTextColor: textColour,
+            }),
+            ...style,
+        }, ...otherProps }));
 };
 
 export { Indicator };

package/dist/components/Indicator/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Wrapper } from './styled';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  ...otherProps\n}: IndicatorProps) => {\n  const backgroundColor = color || theme.colors.neutral.grey.base;\n  return (\n    <Wrapper\n      role=\"status\"\n      style={{ backgroundColor, color: textColour, ...style }}\n      size={size}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,GAAG,UAAU,EACE,KAAI;AACnB,IAAA,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC/D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EACvD,IAAI,EAAE,IAAI,EAAA,GACN,UAAU,EAAA,CACd;AAEN;;;;"}
+{"version":3,"file":"Indicator.js","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport styles from './Indicator.module.scss';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  className,\n  ...otherProps\n}: IndicatorProps) => {\n  return (\n    <div\n      role=\"status\"\n      className={buildClassnames([styles.indicator, styles[`${size}-size`], className])}\n      style={{\n        ...assignCssVars({\n          indicatorColor: color,\n          indicatorTextColor: textColour,\n        }),\n        ...style,\n      }}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,UAAU,EACE,KAAI;IACnB,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EACjF,KAAK,EAAE;AACL,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,kBAAkB,EAAE,UAAU;aAC/B,CAAC;AACF,YAAA,GAAG,KAAK;SACT,EAAA,GACG,UAAU,EAAA,CACd;AAEN;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._indicator_1oemz_1 {\n  position: absolute;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n._base-size_1oemz_15 {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n._sm-size_1oemz_23 {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n._xs-size_1oemz_31 {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}");
+var styles = {"indicator":"_indicator_1oemz_1","base-size":"_base-size_1oemz_15","sm-size":"_sm-size_1oemz_23","xs-size":"_xs-size_1oemz_31"};
+
+module.exports = styles;
+//# sourceMappingURL=Indicator.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.module.scss.cjs","sources":["../../../src/components/Indicator/Indicator.module.scss"],"sourcesContent":[".indicator {\n  position: absolute;\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n.base-size {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n.sm-size {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n.xs-size {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g5BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._indicator_1oemz_1 {\n  position: absolute;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n._base-size_1oemz_15 {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n._sm-size_1oemz_23 {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n._xs-size_1oemz_31 {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}");
+var styles = {"indicator":"_indicator_1oemz_1","base-size":"_base-size_1oemz_15","sm-size":"_sm-size_1oemz_23","xs-size":"_xs-size_1oemz_31"};
+
+export { styles as default };
+//# sourceMappingURL=Indicator.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.module.scss.js","sources":["../../../src/components/Indicator/Indicator.module.scss"],"sourcesContent":[".indicator {\n  position: absolute;\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n.base-size {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n.sm-size {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n.xs-size {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g5BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -1 +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: var(--radius-base);\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: var(--radius-base);\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  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\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: var(--sizes-md) var(--sizes-base);\n    border-top: 1px solid var(--colors-secondary-blue-base);\n  }\n}\n\n/* Row */\n.row {\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: var(--sizes-5) var(--sizes-base);\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: var(--sizes-5) var(--sizes-base);\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  &: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: var(--sizes-xs);\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: var(--sizes-lg);\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,g1IAAA;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;;;;"}
+{"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: var(--radius-base);\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: var(--radius-base);\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  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\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: var(--sizes-md) var(--sizes-base);\n    border-top: 1px solid var(--colors-secondary-blue-base);\n  }\n}\n\n/* Row */\n.row {\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: var(--sizes-5) var(--sizes-base);\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: var(--sizes-5) var(--sizes-base);\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\n  & > * {\n    vertical-align: middle;\n  }\n\n  & span {\n    white-space: pre-line;\n  }\n\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: var(--sizes-xs);\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: var(--sizes-lg);\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,g1IAAA;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.map

@@ -1 +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: var(--radius-base);\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: var(--radius-base);\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  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\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: var(--sizes-md) var(--sizes-base);\n    border-top: 1px solid var(--colors-secondary-blue-base);\n  }\n}\n\n/* Row */\n.row {\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: var(--sizes-5) var(--sizes-base);\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: var(--sizes-5) var(--sizes-base);\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  &: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: var(--sizes-xs);\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: var(--sizes-lg);\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,g1IAAA;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;;;;"}
+{"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: var(--radius-base);\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: var(--radius-base);\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  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\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: var(--sizes-md) var(--sizes-base);\n    border-top: 1px solid var(--colors-secondary-blue-base);\n  }\n}\n\n/* Row */\n.row {\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: var(--sizes-5) var(--sizes-base);\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: var(--sizes-5) var(--sizes-base);\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\n  & > * {\n    vertical-align: middle;\n  }\n\n  & span {\n    white-space: pre-line;\n  }\n\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: var(--sizes-xs);\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: var(--sizes-lg);\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,g1IAAA;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/Loader/Grid.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Grid = ({ width, height, className, color, label }) => (React__default.default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 105 105", fill: color, "aria-label": label },
+const Grid = ({ width, height, className, label }) => (React__default.default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 105 105", fill: "currentColor", "aria-label": label },
     React__default.default.createElement("circle", { cx: "12.5", cy: "12.5", r: "12.5" },
         React__default.default.createElement("animate", { attributeName: "fill-opacity", begin: "0s", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })),
     React__default.default.createElement("circle", { cx: "12.5", cy: "52.5", r: "12.5" },

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.cjs","sources":["../../../src/components/Loader/Grid.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface GridProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  color?: string;\n  label?: string;\n}\n\nexport const Grid = ({ width, height, className, color, label }: GridProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 105 105\"\n    fill={color}\n    aria-label={label}\n  >\n    <circle cx=\"12.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"0s\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"12.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"100ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"300ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"600ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"800ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"400ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"12.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"700ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"500ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"200ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n  </svg>\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Grid.cjs","sources":["../../../src/components/Loader/Grid.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface GridProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  label?: string;\n}\n\nexport const Grid = ({ width, height, className, label }: GridProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 105 105\"\n    fill=\"currentColor\"\n    aria-label={label}\n  >\n    <circle cx=\"12.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"0s\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"12.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"100ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"300ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"600ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"800ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"400ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"12.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"700ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"500ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"200ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n  </svg>\n);\n"],"names":["React"],"mappings":"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"}

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

@@ -3,7 +3,6 @@ export interface GridProps {
     width?: number;
     height?: number;
     className?: string;
-    color?: string;
     label?: string;
 }
-export declare const Grid: ({ width, height, className, color, label }: GridProps) => React.JSX.Element;
+export declare const Grid: ({ width, height, className, label }: GridProps) => React.JSX.Element;

package/dist/components/Loader/Grid.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 
-const Grid = ({ width, height, className, color, label }) => (React__default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 105 105", fill: color, "aria-label": label },
+const Grid = ({ width, height, className, label }) => (React__default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 105 105", fill: "currentColor", "aria-label": label },
     React__default.createElement("circle", { cx: "12.5", cy: "12.5", r: "12.5" },
         React__default.createElement("animate", { attributeName: "fill-opacity", begin: "0s", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })),
     React__default.createElement("circle", { cx: "12.5", cy: "52.5", r: "12.5" },

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/Loader/Grid.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface GridProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  color?: string;\n  label?: string;\n}\n\nexport const Grid = ({ width, height, className, color, label }: GridProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 105 105\"\n    fill={color}\n    aria-label={label}\n  >\n    <circle cx=\"12.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"0s\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"12.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"100ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"300ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"600ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"800ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"400ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"12.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"700ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"500ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"200ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n  </svg>\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Loader/Grid.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface GridProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  label?: string;\n}\n\nexport const Grid = ({ width, height, className, label }: GridProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 105 105\"\n    fill=\"currentColor\"\n    aria-label={label}\n  >\n    <circle cx=\"12.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"0s\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"12.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"100ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"300ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"600ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"12.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"800ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"52.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"400ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"12.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"700ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"52.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"500ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"92.5\" cy=\"92.5\" r=\"12.5\">\n      <animate\n        attributeName=\"fill-opacity\"\n        begin=\"200ms\"\n        dur=\"1s\"\n        values=\"1;.2;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n  </svg>\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/Loader/Loader.cjs

@@ -1,25 +1,29 @@
 'use strict';
 
 var React = require('react');
-var TailSpin = require('./TailSpin.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var Grid = require('./Grid.cjs');
+var TailSpin = require('./TailSpin.cjs');
 var ThreeDots = require('./ThreeDots.cjs');
+var loader_module = require('./loader.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Loader = ({ className, height = 24, width = 24, color = '#588CB0', type = 'TailSpin', }) => {
+const Loader = ({ className, height = 24, width = 24, type = 'TailSpin', }) => {
+    const classNames = buildClassnames.buildClassnames([loader_module.loader, className]);
     switch (type) {
         case 'Grid': {
-            return React__default.default.createElement(Grid.Grid, { className: className, height: height, width: width, color: color });
+            return React__default.default.createElement(Grid.Grid, { className: classNames, height: height, width: width });
         }
         case 'ThreeDots': {
-            return React__default.default.createElement(ThreeDots.ThreeDots, { className: className, height: height, width: width, color: color });
+            return React__default.default.createElement(ThreeDots.ThreeDots, { className: classNames, height: height, width: width });
         }
         case 'TailSpin':
         default: {
-            return React__default.default.createElement(TailSpin.TailSpin, { className: className, height: height, width: width, color: color });
+            return React__default.default.createElement(TailSpin.TailSpin, { className: classNames, height: height, width: width });
         }
     }
 };

package/dist/components/Loader/Loader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.cjs","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TailSpin } from './TailSpin';\nimport { Grid } from './Grid';\nimport { ThreeDots } from './ThreeDots';\n\nimport { LoaderProps } from './loaderTypes';\n\nexport const Loader = ({\n  className,\n  height = 24,\n  width = 24,\n  color = '#588CB0',\n  type = 'TailSpin',\n}: LoaderProps) => {\n  switch (type) {\n    case 'Grid': {\n      return <Grid className={className} height={height} width={width} color={color} />;\n    }\n    case 'ThreeDots': {\n      return <ThreeDots className={className} height={height} width={width} color={color} />;\n    }\n    case 'TailSpin':\n    default: {\n      return <TailSpin className={className} height={height} width={width} color={color} />;\n    }\n  }\n};\n"],"names":["React","Grid","ThreeDots","TailSpin"],"mappings":";;;;;;;;;;;AAQO,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,UAAU,GACL,KAAI;AAChB,IAAA,QAAQ,IAAI;QACV,KAAK,MAAM,EAAE;AACX,YAAA,OAAOA,qCAACC,SAAI,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI;AAClF,QAAA;QACD,KAAK,WAAW,EAAE;AAChB,YAAA,OAAOD,qCAACE,mBAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI;AACvF,QAAA;AACD,QAAA,KAAK,UAAU;AACf,QAAA,SAAS;AACP,YAAA,OAAOF,qCAACG,iBAAQ,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI;AACtF,QAAA;AACF;AACH;;;;"}
+{"version":3,"file":"Loader.cjs","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Grid } from './Grid';\nimport { TailSpin } from './TailSpin';\nimport { ThreeDots } from './ThreeDots';\nimport styles from './loader.module.scss';\n\nimport { LoaderProps } from './loaderTypes';\n\nexport const Loader = ({\n  className,\n  height = 24,\n  width = 24,\n  type = 'TailSpin',\n}: LoaderProps) => {\n  const classNames = buildClassnames([styles.loader, className]);\n\n  switch (type) {\n    case 'Grid': {\n      return <Grid className={classNames} height={height} width={width} />;\n    }\n    case 'ThreeDots': {\n      return <ThreeDots className={classNames} height={height} width={width} />;\n    }\n    case 'TailSpin':\n    default: {\n      return <TailSpin className={classNames} height={height} width={width} />;\n    }\n  }\n};\n"],"names":["buildClassnames","styles","React","Grid","ThreeDots","TailSpin"],"mappings":";;;;;;;;;;;;;;MAUa,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,UAAU,GACL,KAAI;AAChB,IAAA,MAAM,UAAU,GAAGA,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAE9D,IAAA,QAAQ,IAAI;QACV,KAAK,MAAM,EAAE;AACX,YAAA,OAAOC,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI;AACrE,QAAA;QACD,KAAK,WAAW,EAAE;AAChB,YAAA,OAAOD,sBAAA,CAAA,aAAA,CAACE,mBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI;AAC1E,QAAA;AACD,QAAA,KAAK,UAAU;AACf,QAAA,SAAS;AACP,YAAA,OAAOF,sBAAA,CAAA,aAAA,CAACG,iBAAQ,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI;AACzE,QAAA;AACF;AACH;;;;"}

package/dist/components/Loader/Loader.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { LoaderProps } from './loaderTypes';
-export declare const Loader: ({ className, height, width, color, type, }: LoaderProps) => React.JSX.Element;
+export declare const Loader: ({ className, height, width, type, }: LoaderProps) => React.JSX.Element;