@veeqo/ui 9.4.0 → 9.5.0

package/dist/components/DescriptionList/DescriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.js","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kCAAA,EAIJ,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,EAAA,CAEjC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qBAAA,EAEL,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,CAE/B;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iEAAA,EAKP,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,EAAA,CAElC;AAED,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,2BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAIrB,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,CAE/B;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CACL,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,cAChC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAC1B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,gBAC9B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAA,OAAA,EACpC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,CAAA,CACnC;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAGZ,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,cAC5B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CACtB,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,gBAC1B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,OAAA,EAChC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,CAAA,CAC/B;AAYY,MAAA,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAwB,KAAI;AAC7E,IAAA,MAAM,iBAAiB,GAAG,CAAC,WAA8B,KAAI;AAC3D,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AAC9B,YAAA,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,oBAAC,WAAW,EAAA,EAAC,GAAG,EAAE,CAAC,IAAG,CAAC,CAAe,CAAC;AACtE;AACD,QAAA,OAAO,KAAC,CAAA,aAAA,CAAA,WAAW,EAAE,IAAA,EAAA,WAAW,CAAe;AACjD,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,IAAyB,KAAI;AAC/C,QAAA,IAAI,UAAU,EAAE;YACd,QACE,oBAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAA;AACrB,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAE,IAAI,CAAC,IAAI,CAAQ;gBACxB,KAAC,CAAA,aAAA,CAAA,oBAAoB,EAAE,IAAA,EAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAwB,CAC1E;AAEb;QACD,QACE,oBAAC,IAAI,EAAA,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAA;AAClB,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAE,IAAI,CAAC,IAAI,CAAQ;AACvB,YAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAC/B;AAEX,KAAC;IAED,OAAO,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAQ;AAC7C;;;;"}
+{"version":3,"file":"DescriptionList.js","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DetailPage/DetailPage.js

@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import { ContentContainer, ColumnGrid } from './styled.js';
 
 const DetailPage = ({ renderHeader, children }) => {
     const [shouldShowSidebar, setShouldShowSidebar] = useState(true);
     const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);
-    return (React.createElement("main", null,
+    return (React__default.createElement("main", null,
         renderHeader(toggleSidebar, shouldShowSidebar),
-        React.createElement(ContentContainer, null,
-            React.createElement(ColumnGrid, { showSidebar: shouldShowSidebar }, children))));
+        React__default.createElement(ContentContainer, null,
+            React__default.createElement(ColumnGrid, { showSidebar: shouldShowSidebar }, children))));
 };
 
 export { DetailPage };

package/dist/components/DetailPage/DetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailPage.js","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { ColumnGrid, ContentContainer } from './styled';\n\nexport interface PageHeaderProps {\n  renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n  children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n  const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n  const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n  return (\n    <main>\n      {renderHeader(toggleSidebar, shouldShowSidebar)}\n      <ContentContainer>\n        <ColumnGrid showSidebar={shouldShowSidebar}>{children}</ColumnGrid>\n      </ContentContainer>\n    </main>\n  );\n};\n"],"names":[],"mappings":";;;AASa,MAAA,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,IAAA;YACf,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,WAAW,EAAE,iBAAiB,EAAG,EAAA,QAAQ,CAAc,CAClD,CACd;AAEX;;;;"}
+{"version":3,"file":"DetailPage.js","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { ColumnGrid, ContentContainer } from './styled';\n\nexport interface PageHeaderProps {\n  renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n  children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n  const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n  const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n  return (\n    <main>\n      {renderHeader(toggleSidebar, shouldShowSidebar)}\n      <ContentContainer>\n        <ColumnGrid showSidebar={shouldShowSidebar}>{children}</ColumnGrid>\n      </ContentContainer>\n    </main>\n  );\n};\n"],"names":["React"],"mappings":";;;AASa,MAAA,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,IAAA;YACfA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,WAAW,EAAE,iBAAiB,EAAG,EAAA,QAAQ,CAAc,CAClD,CACd;AAEX;;;;"}

package/dist/components/DimensionsInput/DimensionsInput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { InputGroup } from '../InputGroup/index.js';
 import { ComponentSize } from '../types.js';
 import { Container, Row, TextField as StyledTextField } from './styled.js';
@@ -9,15 +9,15 @@ import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
 import { InputGroupLabel } from '../InputGroup/components/InputGroupLabel/InputGroupLabel.js';
 
 const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
-const DimensionsInput = ({ size = ComponentSize.base, handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', ...rest }) => (React.createElement(Container, { className: className, role: "group", "aria-label": "Dimensions" },
-    React.createElement(Row, null,
-        React.createElement(StyledTextField, { name: "length", type: "number", value: length, "aria-label": "Length", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeLength, onKeyDown: blockInvalidChars, size: size, placeholder: "L", ...rest }),
-        React.createElement(CrossIcon, { height: theme.sizes.base, width: theme.sizes.base, role: "presentation" }),
-        React.createElement(StyledTextField, { name: "width", type: "number", value: width, "aria-label": "Width", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeWidth, onKeyDown: blockInvalidChars, size: size, placeholder: "W", ...rest }),
-        React.createElement(CrossIcon, { height: theme.sizes.base, width: theme.sizes.base, role: "presentation" }),
-        React.createElement(InputGroup, null,
-            React.createElement(StyledTextField, { name: "height", type: "number", value: height, "aria-label": "Height", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeHeight, onKeyDown: blockInvalidChars, size: size, placeholder: "H", ...rest }),
-            React.createElement(InputGroupLabel, { size: size, unit: unit, id: "dimensions-unit" })))));
+const DimensionsInput = ({ size = ComponentSize.base, handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', ...rest }) => (React__default.createElement(Container, { className: className, role: "group", "aria-label": "Dimensions" },
+    React__default.createElement(Row, null,
+        React__default.createElement(StyledTextField, { name: "length", type: "number", value: length, "aria-label": "Length", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeLength, onKeyDown: blockInvalidChars, size: size, placeholder: "L", ...rest }),
+        React__default.createElement(CrossIcon, { height: theme.sizes.base, width: theme.sizes.base, role: "presentation" }),
+        React__default.createElement(StyledTextField, { name: "width", type: "number", value: width, "aria-label": "Width", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeWidth, onKeyDown: blockInvalidChars, size: size, placeholder: "W", ...rest }),
+        React__default.createElement(CrossIcon, { height: theme.sizes.base, width: theme.sizes.base, role: "presentation" }),
+        React__default.createElement(InputGroup, null,
+            React__default.createElement(StyledTextField, { name: "height", type: "number", value: height, "aria-label": "Height", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeHeight, onKeyDown: blockInvalidChars, size: size, placeholder: "H", ...rest }),
+            React__default.createElement(InputGroupLabel, { size: size, unit: unit, id: "dimensions-unit" })))));
 DimensionsInput.displayName = 'DimensionsInput';
 
 export { DimensionsInput };

package/dist/components/DimensionsInput/DimensionsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { InputGroup, InputGroupLabel } from '../InputGroup';\nimport { ComponentSize } from '../types';\n\nimport { Container, Row, TextField } from './styled';\n\nimport { DimensionsProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { theme } from '../../theme';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const DimensionsInput: FC<DimensionsProps> = ({\n  size = ComponentSize.base,\n  handleChangeHeight,\n  handleChangeWidth,\n  handleChangeLength,\n  className,\n  height,\n  width,\n  length,\n  unit = 'cm',\n  ...rest\n}: DimensionsProps) => (\n  <Container className={className} role=\"group\" aria-label=\"Dimensions\">\n    <Row>\n      <TextField\n        name=\"length\"\n        type=\"number\"\n        value={length}\n        aria-label=\"Length\"\n        aria-describedby=\"dimensions-unit\"\n        min=\"0\"\n        step=\"any\"\n        onChange={handleChangeLength}\n        onKeyDown={blockInvalidChars}\n        size={size}\n        placeholder=\"L\"\n        {...rest}\n      />\n      <CrossIcon height={theme.sizes.base} width={theme.sizes.base} role=\"presentation\" />\n      <TextField\n        name=\"width\"\n        type=\"number\"\n        value={width}\n        aria-label=\"Width\"\n        aria-describedby=\"dimensions-unit\"\n        min=\"0\"\n        step=\"any\"\n        onChange={handleChangeWidth}\n        onKeyDown={blockInvalidChars}\n        size={size}\n        placeholder=\"W\"\n        {...rest}\n      />\n      <CrossIcon height={theme.sizes.base} width={theme.sizes.base} role=\"presentation\" />\n      <InputGroup>\n        <TextField\n          name=\"height\"\n          type=\"number\"\n          value={height}\n          aria-label=\"Height\"\n          aria-describedby=\"dimensions-unit\"\n          min=\"0\"\n          step=\"any\"\n          onChange={handleChangeHeight}\n          onKeyDown={blockInvalidChars}\n          size={size}\n          placeholder=\"H\"\n          {...rest}\n        />\n        <InputGroupLabel size={size} unit={unit} id=\"dimensions-unit\" />\n      </InputGroup>\n    </Row>\n  </Container>\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["TextField"],"mappings":";;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAK,sBAAsB,CAAC,CAAC,EAAE,gBAAgB,CAAC;MAEpF,eAAe,GAAwB,CAAC,EACnD,IAAI,GAAG,aAAa,CAAC,IAAI,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,GAAG,IAAI,EACX,GAAG,IAAI,EACS,MAChB,oBAAC,SAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,EAAA,YAAA,EAAY,YAAY,EAAA;AACnE,IAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,sBACF,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA;AACpF,QAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACD,YAAA,EAAA,OAAO,sBACD,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA;AACpF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACT,YAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,sBACF,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAC,iBAAiB,EAAA,CAAG,CACrD,CACT,CACI;AAGd,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { InputGroup, InputGroupLabel } from '../InputGroup';\nimport { ComponentSize } from '../types';\n\nimport { Container, Row, TextField } from './styled';\n\nimport { DimensionsProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { theme } from '../../theme';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const DimensionsInput: FC<DimensionsProps> = ({\n  size = ComponentSize.base,\n  handleChangeHeight,\n  handleChangeWidth,\n  handleChangeLength,\n  className,\n  height,\n  width,\n  length,\n  unit = 'cm',\n  ...rest\n}: DimensionsProps) => (\n  <Container className={className} role=\"group\" aria-label=\"Dimensions\">\n    <Row>\n      <TextField\n        name=\"length\"\n        type=\"number\"\n        value={length}\n        aria-label=\"Length\"\n        aria-describedby=\"dimensions-unit\"\n        min=\"0\"\n        step=\"any\"\n        onChange={handleChangeLength}\n        onKeyDown={blockInvalidChars}\n        size={size}\n        placeholder=\"L\"\n        {...rest}\n      />\n      <CrossIcon height={theme.sizes.base} width={theme.sizes.base} role=\"presentation\" />\n      <TextField\n        name=\"width\"\n        type=\"number\"\n        value={width}\n        aria-label=\"Width\"\n        aria-describedby=\"dimensions-unit\"\n        min=\"0\"\n        step=\"any\"\n        onChange={handleChangeWidth}\n        onKeyDown={blockInvalidChars}\n        size={size}\n        placeholder=\"W\"\n        {...rest}\n      />\n      <CrossIcon height={theme.sizes.base} width={theme.sizes.base} role=\"presentation\" />\n      <InputGroup>\n        <TextField\n          name=\"height\"\n          type=\"number\"\n          value={height}\n          aria-label=\"Height\"\n          aria-describedby=\"dimensions-unit\"\n          min=\"0\"\n          step=\"any\"\n          onChange={handleChangeHeight}\n          onKeyDown={blockInvalidChars}\n          size={size}\n          placeholder=\"H\"\n          {...rest}\n        />\n        <InputGroupLabel size={size} unit={unit} id=\"dimensions-unit\" />\n      </InputGroup>\n    </Row>\n  </Container>\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["React","TextField"],"mappings":";;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAK,sBAAsB,CAAC,CAAC,EAAE,gBAAgB,CAAC;MAEpF,eAAe,GAAwB,CAAC,EACnD,IAAI,GAAG,aAAa,CAAC,IAAI,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,GAAG,IAAI,EACX,GAAG,IAAI,EACS,MAChBA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,EAAA,YAAA,EAAY,YAAY,EAAA;AACnE,IAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACF,QAAAA,cAAA,CAAA,aAAA,CAACC,eAAS,EACR,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,sBACF,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;QACFD,cAAC,CAAA,aAAA,CAAA,SAAS,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA;AACpF,QAAAA,cAAA,CAAA,aAAA,CAACC,eAAS,EACR,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACD,YAAA,EAAA,OAAO,sBACD,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;QACFD,cAAC,CAAA,aAAA,CAAA,SAAS,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA;AACpF,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACT,YAAAA,cAAA,CAAA,aAAA,CAACC,eAAS,EACR,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,sBACF,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;AACF,YAAAD,cAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAC,iBAAiB,EAAA,CAAG,CACrD,CACT,CACI;AAGd,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/Dropdown/Dropdown.js

@@ -1,12 +1,12 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import { Button } from '../Button/Button.js';
 import { DropdownPopover } from './DropdownPopover.js';
 
 const Dropdown = ({ id, shouldShow, setShouldShow, ctaIconSlot, ctaProps, ...dropdownProps }) => {
     const anchorRef = useRef(null);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { ref: anchorRef, "aria-haspopup": "dialog", "aria-expanded": shouldShow, "aria-controls": id, onClick: () => setShouldShow === null || setShouldShow === undefined ? undefined : setShouldShow(!shouldShow), iconSlot: ctaIconSlot, dropdown: true, ...ctaProps }),
-        shouldShow && (React.createElement(DropdownPopover, { id: id, anchorElement: anchorRef.current, onShouldClose: () => setShouldShow === null || setShouldShow === undefined ? undefined : setShouldShow(false), ...dropdownProps }))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button, { ref: anchorRef, "aria-haspopup": "dialog", "aria-expanded": shouldShow, "aria-controls": id, onClick: () => setShouldShow === null || setShouldShow === undefined ? undefined : setShouldShow(!shouldShow), iconSlot: ctaIconSlot, dropdown: true, ...ctaProps }),
+        shouldShow && (React__default.createElement(DropdownPopover, { id: id, anchorElement: anchorRef.current, onShouldClose: () => setShouldShow === null || setShouldShow === undefined ? undefined : setShouldShow(false), ...dropdownProps }))));
 };
 
 export { Dropdown };

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Button } from '../Button';\nimport { DropdownPopover } from './DropdownPopover';\nimport { DropdownProps } from './types';\n\nexport const Dropdown = ({\n  id,\n  shouldShow,\n  setShouldShow,\n  ctaIconSlot,\n  ctaProps,\n  ...dropdownProps\n}: DropdownProps) => {\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n\n  return (\n    <>\n      <Button\n        ref={anchorRef}\n        aria-haspopup=\"dialog\"\n        aria-expanded={shouldShow}\n        aria-controls={id}\n        onClick={() => setShouldShow?.(!shouldShow)}\n        iconSlot={ctaIconSlot}\n        dropdown\n        {...ctaProps}\n      />\n\n      {shouldShow && (\n        <DropdownPopover\n          id={id}\n          anchorElement={anchorRef.current}\n          onShouldClose={() => setShouldShow?.(false)}\n          {...dropdownProps}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;MAKa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,UAAU,EACV,aAAa,EACb,WAAW,EACX,QAAQ,EACR,GAAG,aAAa,EACF,KAAI;AAClB,IAAA,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC;AAExD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,GAAG,EAAE,SAAS,EACA,eAAA,EAAA,QAAQ,EACP,eAAA,EAAA,UAAU,mBACV,EAAE,EACjB,OAAO,EAAE,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,CAAC,UAAU,CAAC,EAC3C,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAA,IAAA,EAAA,GACJ,QAAQ,EACZ,CAAA;AAED,QAAA,UAAU,KACT,KAAC,CAAA,aAAA,CAAA,eAAe,IACd,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,SAAS,CAAC,OAAO,EAChC,aAAa,EAAE,MAAM,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAG,KAAK,CAAC,KACvC,aAAa,EAAA,CACjB,CACH,CACA;AAEP;;;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Button } from '../Button';\nimport { DropdownPopover } from './DropdownPopover';\nimport { DropdownProps } from './types';\n\nexport const Dropdown = ({\n  id,\n  shouldShow,\n  setShouldShow,\n  ctaIconSlot,\n  ctaProps,\n  ...dropdownProps\n}: DropdownProps) => {\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n\n  return (\n    <>\n      <Button\n        ref={anchorRef}\n        aria-haspopup=\"dialog\"\n        aria-expanded={shouldShow}\n        aria-controls={id}\n        onClick={() => setShouldShow?.(!shouldShow)}\n        iconSlot={ctaIconSlot}\n        dropdown\n        {...ctaProps}\n      />\n\n      {shouldShow && (\n        <DropdownPopover\n          id={id}\n          anchorElement={anchorRef.current}\n          onShouldClose={() => setShouldShow?.(false)}\n          {...dropdownProps}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;MAKa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,UAAU,EACV,aAAa,EACb,WAAW,EACX,QAAQ,EACR,GAAG,aAAa,EACF,KAAI;AAClB,IAAA,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,GAAG,EAAE,SAAS,EACA,eAAA,EAAA,QAAQ,EACP,eAAA,EAAA,UAAU,mBACV,EAAE,EACjB,OAAO,EAAE,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,CAAC,UAAU,CAAC,EAC3C,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAA,IAAA,EAAA,GACJ,QAAQ,EACZ,CAAA;AAED,QAAA,UAAU,KACTA,cAAC,CAAA,aAAA,CAAA,eAAe,IACd,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,SAAS,CAAC,OAAO,EAChC,aAAa,EAAE,MAAM,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAG,KAAK,CAAC,KACvC,aAAa,EAAA,CACjB,CACH,CACA;AAEP;;;;"}

package/dist/components/Dropdown/DropdownPopover.js

@@ -1,13 +1,13 @@
-import React, { useEffect } from 'react';
+import React__default, { useEffect } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import { DropdownContainer } from './styled.js';
 import { Popover } from '../Popover/Popover.js';
 
 const DropdownPopover = ({ id, children, className, style, reversed, anchorElement, useAnchorWidth, onShouldClose, ...popoverProps }) => {
     useEffect(() => () => anchorElement === null || anchorElement === undefined ? undefined : anchorElement.focus(), [anchorElement]); // Re-focus anchor when closed.
-    return (React.createElement(Popover, { id: id, "data-testid": id, anchorElement: anchorElement, onShouldClose: onShouldClose, useAnchorWidth: useAnchorWidth, placement: "bottom-start", ...popoverProps },
-        React.createElement(AnimatePresence, null,
-            React.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))));
+    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))));
 };
 
 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":[],"mappings":";;;;;AAOa,MAAA,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,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,QACE,KAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,EAAE,EAAE,EAAE,EACO,aAAA,EAAA,EAAE,EACf,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAC,cAAc,EAAA,GACpB,YAAY,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA;AACd,YAAA,KAAA,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 } 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":";;;;;AAOa,MAAA,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,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,EAAE,EAAE,EAAE,EACO,aAAA,EAAA,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;;;;"}

package/dist/components/FilterTag/FilterTag.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import { useDropdown } from '../../hooks/useDropdown.js';
 import '../../hooks/useFocusVisible.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
@@ -45,19 +45,19 @@ const FilterTag = ({ className, e2eClassName, label, text, iconSlot, fill = colo
     }, [onClickAway, closeDropdown, shouldCloseOnClickAway]);
     const shouldShowSimple = !content;
     if (shouldShowSimple) {
-        return (React.createElement(Container, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), onClick: onClick },
-            label && React.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
-            React.createElement(Text, null, text),
-            React.createElement(StyledCrossIcon, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.cross, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.cross]), name: "cross", size: "base", color: colors.neutral.ink.base })));
+        return (React__default.createElement(Container, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), onClick: onClick },
+            label && React__default.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+            React__default.createElement(Text, null, text),
+            React__default.createElement(StyledCrossIcon, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.cross, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.cross]), name: "cross", size: "base", color: colors.neutral.ink.base })));
     }
-    return (React.createElement(AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React.createElement(Container, { className: classNames.container, onClick: handleClick, ref: setAnchorElement },
-            label && React.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
-            React.createElement(Text, null, text),
-            React.createElement(MainIcon, { color: colors.neutral.ink.base, name: "downArrow", "$shouldShow": shouldShowDropdown })) },
-        React.createElement(Content, { ref: setPopperElement, onKeyDown: handleKeyDown },
-            React.createElement(Header, { color: fill }, header || (React.createElement(React.Fragment, null,
+    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}:`),
+            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,
                 iconSlot,
-                React.createElement(Text, { variant: "bodyBold" }, label)))),
+                React__default.createElement(Text, { variant: "bodyBold" }, label)))),
             content,
             footer)));
 };

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          size=\"base\"\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":["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 {\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          size=\"base\"\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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"}

package/dist/components/Image/Image.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import { usePopper } from 'react-popper';
 import { createPortal } from 'react-dom';
 import { PlaceholderImage } from './components/PlaceholderImage.js';
@@ -11,8 +11,8 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
     const e2eClassNames = generateClassNames(e2eClassName);
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
     const [imageState, setImageState] = useState({ isLoaded: false, isError: false });
-    const [referenceElement, setReferenceElement] = React.useState(null);
-    const [popperElement, setPopperElement] = React.useState(null);
+    const [referenceElement, setReferenceElement] = React__default.useState(null);
+    const [popperElement, setPopperElement] = React__default.useState(null);
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
         placement: previewPlacement,
         modifiers: [
@@ -29,17 +29,17 @@ 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.createElement(Container, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container, className]) },
-        React.createElement(CommonImage, { src: src, alt: alt, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.image, e2eClassNames === null || e2eClassNames === undefined ? undefined : 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(Container, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container, className]) },
+        React__default.createElement(CommonImage, { src: src, alt: alt, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.image, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
         !disablePlaceholder &&
             isImageHidden &&
-            (placeholder || (React.createElement(PlaceholderImage, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.placeholder, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
+            (placeholder || (React__default.createElement(PlaceholderImage, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.placeholder, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
         isPreviewOpen &&
-            createPortal(React.createElement(PreviewImageContainer, { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames([
+            createPortal(React__default.createElement(PreviewImageContainer, { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames([
                     classNames === null || classNames === undefined ? undefined : classNames.previewImageContainer,
                     e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.previewImageContainer,
                 ]) },
-                React.createElement(PreviewImage, { src: src, alt: "", width: previewWidth, height: previewHeight })), document.body)));
+                React__default.createElement(PreviewImage, { src: src, 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';\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\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={src}\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 src={src} alt=\"\" width={previewWidth} height={previewHeight} />\n          </PreviewImageContainer>,\n          document.body,\n        )}\n    </Container>\n  );\n};\n"],"names":[],"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 { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled';\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\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\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={src}\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 src={src} alt=\"\" width={previewWidth} height={previewHeight} />\n          </PreviewImageContainer>,\n          document.body,\n        )}\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Image/components/PlaceholderImage.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React__default from 'react';
 
-const PlaceholderImage = (props) => (React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z", fill: "#CDD1D5" })));
+const PlaceholderImage = (props) => (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z", fill: "#CDD1D5" })));
 
 export { PlaceholderImage };
 //# sourceMappingURL=PlaceholderImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlaceholderImage.js","sources":["../../../../src/components/Image/components/PlaceholderImage.tsx"],"sourcesContent":["import React from 'react';\n\nexport const PlaceholderImage = (props: any) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z\"\n      fill=\"#CDD1D5\"\n    />\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,gBAAgB,GAAG,CAAC,KAAU,MACzC,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA;AAET,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yNAAyN,EAC3N,IAAI,EAAC,SAAS,EACd,CAAA,CACE;;;;"}
+{"version":3,"file":"PlaceholderImage.js","sources":["../../../../src/components/Image/components/PlaceholderImage.tsx"],"sourcesContent":["import React from 'react';\n\nexport const PlaceholderImage = (props: any) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z\"\n      fill=\"#CDD1D5\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;AAEO,MAAM,gBAAgB,GAAG,CAAC,KAAU,MACzCA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA;AAET,IAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yNAAyN,EAC3N,IAAI,EAAC,SAAS,EACd,CAAA,CACE;;;;"}

package/dist/components/Indicator/Indicator.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { theme } from '../../theme/index.js';
 import { Wrapper } from './styled.js';
 
 const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
     const backgroundColor = color || theme.colors.neutral.grey.base;
-    return (React.createElement(Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
+    return (React__default.createElement(Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...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":[],"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,QACE,KAAA,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,EACN,GAAA,UAAU,EACd,CAAA;AAEN;;;;"}
+{"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,EACN,GAAA,UAAU,EACd,CAAA;AAEN;;;;"}

package/dist/components/InputGroup/components/InputGroupLabel/InputGroupLabel.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 import { Text } from '../../../Text/Text.js';
 import { GroupLabelWrapper } from './styled.js';
 
-const InputGroupLabel = ({ id, unit, size }) => (React.createElement(GroupLabelWrapper, { size: size },
-    React.createElement(Text, { variant: "body", id: id }, unit)));
+const InputGroupLabel = ({ id, unit, size }) => (React__default.createElement(GroupLabelWrapper, { size: size },
+    React__default.createElement(Text, { variant: "body", id: id }, unit)));
 
 export { InputGroupLabel };
 //# sourceMappingURL=InputGroupLabel.js.map

package/dist/components/InputGroup/components/InputGroupLabel/InputGroupLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroupLabel.js","sources":["../../../../../src/components/InputGroup/components/InputGroupLabel/InputGroupLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { ComponentSize } from 'src/components/types';\nimport { Text } from '../../../Text';\nimport { GroupLabelWrapper } from './styled';\n\ntype InputGroupLabelProps = {\n  id?: string;\n  unit: string;\n  size: ComponentSize;\n};\n\nexport const InputGroupLabel = ({ id, unit, size }: InputGroupLabelProps) => (\n  <GroupLabelWrapper size={size}>\n    <Text variant=\"body\" id={id}>\n      {unit}\n    </Text>\n  </GroupLabelWrapper>\n);\n"],"names":[],"mappings":";;;;MAWa,eAAe,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAwB,MACtE,oBAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA;AAC3B,IAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,EACxB,EAAA,IAAI,CACA,CACW;;;;"}
+{"version":3,"file":"InputGroupLabel.js","sources":["../../../../../src/components/InputGroup/components/InputGroupLabel/InputGroupLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { ComponentSize } from 'src/components/types';\nimport { Text } from '../../../Text';\nimport { GroupLabelWrapper } from './styled';\n\ntype InputGroupLabelProps = {\n  id?: string;\n  unit: string;\n  size: ComponentSize;\n};\n\nexport const InputGroupLabel = ({ id, unit, size }: InputGroupLabelProps) => (\n  <GroupLabelWrapper size={size}>\n    <Text variant=\"body\" id={id}>\n      {unit}\n    </Text>\n  </GroupLabelWrapper>\n);\n"],"names":["React"],"mappings":";;;;MAWa,eAAe,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAwB,MACtEA,6BAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA;AAC3B,IAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,EACxB,EAAA,IAAI,CACA,CACW;;;;"}

package/dist/components/LegacyDataTable/LegacyDataTable.cjs

@@ -15,7 +15,7 @@ var StickyHeader = require('./StickyHeader.cjs');
 var index = require('./utils/index.cjs');
 var SkeletonHeaderCell = require('./cells/SkeletonHeaderCell.cjs');
 var SkeletonContent = require('./SkeletonContent/SkeletonContent.cjs');
-var DoubleArrowIconIcon = require('../../tempIcons/DoubleArrowIconIcon.cjs');
+var DoubleArrowIcon = require('../../tempIcons/DoubleArrowIcon.cjs');
 var DoubleArrowAscIcon = require('../../tempIcons/DoubleArrowAscIcon.cjs');
 var DoubleArrowDescIcon = require('../../tempIcons/DoubleArrowDescIcon.cjs');
 
@@ -23,7 +23,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const IconUnsorted = () => (React__default.default.createElement(DoubleArrowIconIcon.DoubleArrowIcon, { width: index$1.theme.sizes.base, height: index$1.theme.sizes.base, color: "lightgrey" }));
+const IconUnsorted = () => (React__default.default.createElement(DoubleArrowIcon.DoubleArrowIcon, { width: index$1.theme.sizes.base, height: index$1.theme.sizes.base, color: "lightgrey" }));
 const IconSortAsc = () => (React__default.default.createElement(DoubleArrowAscIcon.DoubleArrowAscIcon, { width: index$1.theme.sizes.base, height: index$1.theme.sizes.base, color: "lightgrey" }));
 const IconSortDesc = () => (React__default.default.createElement(DoubleArrowDescIcon.DoubleArrowDescIcon, { width: index$1.theme.sizes.base, height: index$1.theme.sizes.base, color: "lightgrey" }));
 /**