@veeqo/ui 14.0.2 → 14.0.4

package/dist/components/VideoModal/components/Popup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.cjs","sources":["../../../../src/components/VideoModal/components/Popup.tsx"],"sourcesContent":["import React, { ReactNode, FC } from 'react';\n\n// @ts-ignore\nimport ScrollLock from 'react-scrolllock-configurable';\nimport { Portal } from '../../Portal';\n\nimport { Container, Shadow, Wrap } from './styled';\nimport { buildClassnames } from '../../../utils/buildClassnames';\n\ninterface WithPortalProps {\n  usePortal?: boolean;\n  children: ReactNode;\n}\n\nconst WithPortal = ({ usePortal, children }: WithPortalProps) => (\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  <>{usePortal ? <Portal>{children}</Portal> : children}</>\n);\n\nexport interface PopupProps {\n  children: ReactNode;\n  shouldShow: boolean;\n  usePortal?: boolean;\n  className?: string;\n}\n\nexport const Popup: FC<PopupProps> = ({\n  className,\n  children = null,\n  shouldShow = false,\n  usePortal = true,\n}: PopupProps) => (\n  <WithPortal usePortal={usePortal}>\n    <Container\n      className={buildClassnames([`${className}-container`, className])}\n      shouldShow={shouldShow}\n    >\n      <Shadow />\n      <ScrollLock isActive={shouldShow}>\n        <Wrap className={buildClassnames([`${className}-wrap`, className])}>{children}</Wrap>\n      </ScrollLock>\n    </Container>\n  </WithPortal>\n);\n"],"names":["React","Portal","Container","buildClassnames","Shadow","ScrollLock","Wrap"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAmB;AAC1D;AACAA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA,EAAG,SAAS,GAAGA,qCAACC,aAAM,EAAA,IAAA,EAAE,QAAQ,CAAU,GAAG,QAAQ,CAAI,CAC1D;AASM,MAAM,KAAK,GAAmB,CAAC,EACpC,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,IAAI,GACL,MACXD,sBAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,SAAS,EAAE,SAAS,EAAA;AAC9B,IAAAA,sBAAA,CAAA,aAAA,CAACE,gBAAS,EACR,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,EAAE,SAAS,CAAC,CAAC,EACjE,UAAU,EAAE,UAAU,EAAA;AAEtB,QAAAH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAG,IAAA,CAAA;AACV,QAAAJ,sBAAA,CAAA,aAAA,CAACK,2BAAU,EAAA,EAAC,QAAQ,EAAE,UAAU,EAAA;YAC9BL,sBAAC,CAAA,aAAA,CAAAM,WAAI,IAAC,SAAS,EAAEH,+BAAe,CAAC,CAAC,GAAG,SAAS,CAAA,KAAA,CAAO,EAAE,SAAS,CAAC,CAAC,EAAG,EAAA,QAAQ,CAAQ,CAC1E,CACH,CACD;;;;"}
+{"version":3,"file":"Popup.cjs","sources":["../../../../src/components/VideoModal/components/Popup.tsx"],"sourcesContent":["import React, { ReactNode, FC } from 'react';\n\n// @ts-ignore\nimport ScrollLock from 'react-scrolllock-configurable';\nimport { Portal } from '../../Portal';\n\nimport { Container, Shadow, Wrap } from './styled';\nimport { buildClassnames } from '../../../utils/buildClassnames';\n\ninterface WithPortalProps {\n  usePortal?: boolean;\n  children: ReactNode;\n}\n\nconst WithPortal = ({ usePortal, children }: WithPortalProps) => (\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  <>{usePortal ? <Portal>{children}</Portal> : children}</>\n);\n\nexport interface PopupProps {\n  children: ReactNode;\n  shouldShow: boolean;\n  usePortal?: boolean;\n  className?: string;\n}\n\nexport const Popup: FC<PopupProps> = ({\n  className,\n  children = null,\n  shouldShow = false,\n  usePortal = true,\n}: PopupProps) => (\n  <WithPortal usePortal={usePortal}>\n    <Container\n      className={buildClassnames([`${className}-container`, className])}\n      shouldShow={shouldShow}\n    >\n      <Shadow />\n      <ScrollLock isActive={shouldShow}>\n        <Wrap className={buildClassnames([`${className}-wrap`, className])}>{children}</Wrap>\n      </ScrollLock>\n    </Container>\n  </WithPortal>\n);\n"],"names":["React","Portal","Container","buildClassnames","Shadow","ScrollLock","Wrap"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAmB;AAC1D;AACAA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA,EAAG,SAAS,GAAGA,qCAACC,aAAM,EAAA,IAAA,EAAE,QAAQ,CAAU,GAAG,QAAQ,CAAI,CAC1D;AASM,MAAM,KAAK,GAAmB,CAAC,EACpC,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,IAAI,GACL,MACXD,sBAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAE,SAAS,EAAA;AAC9B,IAAAA,sBAAA,CAAA,aAAA,CAACE,gBAAS,EAAA,EACR,SAAS,EAAEC,+BAAe,CAAC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,EAAE,SAAS,CAAC,CAAC,EACjE,UAAU,EAAE,UAAU,EAAA;AAEtB,QAAAH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,IAAA,CAAG;AACV,QAAAJ,sBAAA,CAAA,aAAA,CAACK,2BAAU,EAAA,EAAC,QAAQ,EAAE,UAAU,EAAA;YAC9BL,sBAAA,CAAA,aAAA,CAACM,WAAI,IAAC,SAAS,EAAEH,+BAAe,CAAC,CAAC,GAAG,SAAS,CAAA,KAAA,CAAO,EAAE,SAAS,CAAC,CAAC,EAAA,EAAG,QAAQ,CAAQ,CAC1E,CACH,CACD;;;;"}

package/dist/components/VideoModal/components/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","sources":["../../../../src/components/VideoModal/components/Popup.tsx"],"sourcesContent":["import React, { ReactNode, FC } from 'react';\n\n// @ts-ignore\nimport ScrollLock from 'react-scrolllock-configurable';\nimport { Portal } from '../../Portal';\n\nimport { Container, Shadow, Wrap } from './styled';\nimport { buildClassnames } from '../../../utils/buildClassnames';\n\ninterface WithPortalProps {\n  usePortal?: boolean;\n  children: ReactNode;\n}\n\nconst WithPortal = ({ usePortal, children }: WithPortalProps) => (\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  <>{usePortal ? <Portal>{children}</Portal> : children}</>\n);\n\nexport interface PopupProps {\n  children: ReactNode;\n  shouldShow: boolean;\n  usePortal?: boolean;\n  className?: string;\n}\n\nexport const Popup: FC<PopupProps> = ({\n  className,\n  children = null,\n  shouldShow = false,\n  usePortal = true,\n}: PopupProps) => (\n  <WithPortal usePortal={usePortal}>\n    <Container\n      className={buildClassnames([`${className}-container`, className])}\n      shouldShow={shouldShow}\n    >\n      <Shadow />\n      <ScrollLock isActive={shouldShow}>\n        <Wrap className={buildClassnames([`${className}-wrap`, className])}>{children}</Wrap>\n      </ScrollLock>\n    </Container>\n  </WithPortal>\n);\n"],"names":["React"],"mappings":";;;;;;AAcA,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAmB;AAC1D;AACAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAG,SAAS,GAAGA,6BAAC,MAAM,EAAA,IAAA,EAAE,QAAQ,CAAU,GAAG,QAAQ,CAAI,CAC1D;AASM,MAAM,KAAK,GAAmB,CAAC,EACpC,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,IAAI,GACL,MACXA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,SAAS,EAAE,SAAS,EAAA;AAC9B,IAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EACR,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,EAAE,SAAS,CAAC,CAAC,EACjE,UAAU,EAAE,UAAU,EAAA;AAEtB,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAG,IAAA,CAAA;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,QAAQ,EAAE,UAAU,EAAA;YAC9BA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,SAAS,EAAE,eAAe,CAAC,CAAC,GAAG,SAAS,CAAA,KAAA,CAAO,EAAE,SAAS,CAAC,CAAC,EAAG,EAAA,QAAQ,CAAQ,CAC1E,CACH,CACD;;;;"}
+{"version":3,"file":"Popup.js","sources":["../../../../src/components/VideoModal/components/Popup.tsx"],"sourcesContent":["import React, { ReactNode, FC } from 'react';\n\n// @ts-ignore\nimport ScrollLock from 'react-scrolllock-configurable';\nimport { Portal } from '../../Portal';\n\nimport { Container, Shadow, Wrap } from './styled';\nimport { buildClassnames } from '../../../utils/buildClassnames';\n\ninterface WithPortalProps {\n  usePortal?: boolean;\n  children: ReactNode;\n}\n\nconst WithPortal = ({ usePortal, children }: WithPortalProps) => (\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  <>{usePortal ? <Portal>{children}</Portal> : children}</>\n);\n\nexport interface PopupProps {\n  children: ReactNode;\n  shouldShow: boolean;\n  usePortal?: boolean;\n  className?: string;\n}\n\nexport const Popup: FC<PopupProps> = ({\n  className,\n  children = null,\n  shouldShow = false,\n  usePortal = true,\n}: PopupProps) => (\n  <WithPortal usePortal={usePortal}>\n    <Container\n      className={buildClassnames([`${className}-container`, className])}\n      shouldShow={shouldShow}\n    >\n      <Shadow />\n      <ScrollLock isActive={shouldShow}>\n        <Wrap className={buildClassnames([`${className}-wrap`, className])}>{children}</Wrap>\n      </ScrollLock>\n    </Container>\n  </WithPortal>\n);\n"],"names":["React"],"mappings":";;;;;;AAcA,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAmB;AAC1D;AACAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAG,SAAS,GAAGA,6BAAC,MAAM,EAAA,IAAA,EAAE,QAAQ,CAAU,GAAG,QAAQ,CAAI,CAC1D;AASM,MAAM,KAAK,GAAmB,CAAC,EACpC,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,IAAI,GACL,MACXA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAE,SAAS,EAAA;AAC9B,IAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,EAAE,SAAS,CAAC,CAAC,EACjE,UAAU,EAAE,UAAU,EAAA;AAEtB,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,QAAQ,EAAE,UAAU,EAAA;YAC9BA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,SAAS,EAAE,eAAe,CAAC,CAAC,GAAG,SAAS,CAAA,KAAA,CAAO,EAAE,SAAS,CAAC,CAAC,EAAA,EAAG,QAAQ,CAAQ,CAC1E,CACH,CACD;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/VideoModal/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\n\ninterface IContainer {\n  shouldShow: boolean;\n}\n\nconst commonStyles = `\n  position: fixed;\n  height: 100%;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nexport const Container = styled(BaseContainer)`\n  ${commonStyles}\n  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};\n  z-index: ${theme.layers.modal};\n`;\n\nexport const Shadow = styled(BaseContainer)`\n  ${commonStyles}\n  background-color: rgba(55,66,77,0.5);\n`;\n\nexport const Wrap = styled(BaseContainer)`\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n`;\n"],"names":["styled","BaseContainer","theme"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAY,GAAG;;;;;;;CAOpB;AAEY,MAAA,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,YAAY,YACH,CAAC,KAAiB,MAAM,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA,SAAA,EAC9DC,WAAK,CAAC,MAAM,CAAC,KAAK;AAGlB,MAAA,MAAM,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,EACvC,YAAY,CAAA,qCAAA;MAIH,IAAI,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mDAAA;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/VideoModal/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\n\ninterface IContainer {\n  shouldShow: boolean;\n}\n\nconst commonStyles = `\n  position: fixed;\n  height: 100%;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nexport const Container = styled(BaseContainer)`\n  ${commonStyles}\n  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};\n  z-index: ${theme.layers.modal};\n`;\n\nexport const Shadow = styled(BaseContainer)`\n  ${commonStyles}\n  background-color: rgba(55,66,77,0.5);\n`;\n\nexport const Wrap = styled(BaseContainer)`\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n`;\n"],"names":["styled","BaseContainer","theme"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAY,GAAG;;;;;;;CAOpB;AAEM,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC1C,YAAY,YACH,CAAC,KAAiB,MAAM,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA,SAAA,EAC9DC,WAAK,CAAC,MAAM,CAAC,KAAK;AAGxB,MAAM,MAAM,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,EACvC,YAAY,CAAA,qCAAA;MAIH,IAAI,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mDAAA;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/VideoModal/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\n\ninterface IContainer {\n  shouldShow: boolean;\n}\n\nconst commonStyles = `\n  position: fixed;\n  height: 100%;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nexport const Container = styled(BaseContainer)`\n  ${commonStyles}\n  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};\n  z-index: ${theme.layers.modal};\n`;\n\nexport const Shadow = styled(BaseContainer)`\n  ${commonStyles}\n  background-color: rgba(55,66,77,0.5);\n`;\n\nexport const Wrap = styled(BaseContainer)`\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n`;\n"],"names":[],"mappings":";;;;AAQA,MAAM,YAAY,GAAG;;;;;;;CAOpB;AAEY,MAAA,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,YAAY,YACH,CAAC,KAAiB,MAAM,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA,SAAA,EAC9D,KAAK,CAAC,MAAM,CAAC,KAAK;AAGlB,MAAA,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,EACvC,YAAY,CAAA,qCAAA;MAIH,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mDAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/VideoModal/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\n\ninterface IContainer {\n  shouldShow: boolean;\n}\n\nconst commonStyles = `\n  position: fixed;\n  height: 100%;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nexport const Container = styled(BaseContainer)`\n  ${commonStyles}\n  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};\n  z-index: ${theme.layers.modal};\n`;\n\nexport const Shadow = styled(BaseContainer)`\n  ${commonStyles}\n  background-color: rgba(55,66,77,0.5);\n`;\n\nexport const Wrap = styled(BaseContainer)`\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n`;\n"],"names":[],"mappings":";;;;AAQA,MAAM,YAAY,GAAG;;;;;;;CAOpB;AAEM,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC1C,YAAY,YACH,CAAC,KAAiB,MAAM,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA,SAAA,EAC9D,KAAK,CAAC,MAAM,CAAC,KAAK;AAGxB,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,EACvC,YAAY,CAAA,qCAAA;MAIH,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mDAAA;;;;"}

package/dist/components/View/View.cjs

@@ -50,14 +50,14 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.colo
     const isDraft = type === types.ViewTypes.draft;
     const isSaved = type === types.ViewTypes.saved;
     const fill = active ? colors.colors.neutral.ink.dark : colors.colors.neutral.ink.base;
-    return (React__default.default.createElement(styled.Container, { className: `${buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container])} ${(active && (e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.active)) || ''}`, onClick: handleClick },
+    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])} ${(active && (e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active)) || ''}`, onClick: handleClick },
         React__default.default.createElement(styled.Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
             iconSlot && React__default.default.createElement(styled.CustomIconWrapper, null, iconSlot),
             React__default.default.createElement(Text.Text, { variant: "bodyBold" }, name),
             count && (React__default.default.createElement(styled.CounterContainer, { active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour },
-                React__default.default.createElement(styled.CounterText, { className: e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
-            isDraft && (React__default.default.createElement(CrossIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.delete, onClick: handleDelete })),
-            isSaved && active && (React__default.default.createElement(EditIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.edit, onClick: handleEdit })))));
+                React__default.default.createElement(styled.CounterText, { className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
+            isDraft && (React__default.default.createElement(CrossIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
+            isSaved && active && (React__default.default.createElement(EditIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
 };
 
 exports.View = View;

package/dist/components/View/View.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { CrossIcon, EditIcon } from '../../icons';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        colourPalette={colourPalette}\n        customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            active={active || isHovered}\n            colourPalette={colourPalette}\n            customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["colors","useHover","useCallback","ViewTypes","React","Container","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIcon","IconStyling","EditIcon"],"mappings":"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"}
+{"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { CrossIcon, EditIcon } from '../../icons';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        colourPalette={colourPalette}\n        customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            active={active || isHovered}\n            colourPalette={colourPalette}\n            customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["colors","useHover","useCallback","ViewTypes","React","Container","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIcon","IconStyling","EditIcon"],"mappings":"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"}

package/dist/components/View/View.js

@@ -44,14 +44,14 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.seco
     const isDraft = type === ViewTypes.draft;
     const isSaved = type === ViewTypes.saved;
     const fill = active ? colors.neutral.ink.dark : 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])} ${(active && (e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.active)) || ''}`, onClick: handleClick },
+    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])} ${(active && (e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active)) || ''}`, onClick: handleClick },
         React__default.createElement(Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
             iconSlot && React__default.createElement(CustomIconWrapper, null, iconSlot),
             React__default.createElement(Text, { variant: "bodyBold" }, name),
             count && (React__default.createElement(CounterContainer, { active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour },
-                React__default.createElement(CounterText, { className: e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
-            isDraft && (React__default.createElement(CrossIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.delete, onClick: handleDelete })),
-            isSaved && active && (React__default.createElement(EditIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.edit, onClick: handleEdit })))));
+                React__default.createElement(CounterText, { className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
+            isDraft && (React__default.createElement(CrossIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
+            isSaved && active && (React__default.createElement(EditIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
 };
 
 export { View };

package/dist/components/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { CrossIcon, EditIcon } from '../../icons';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        colourPalette={colourPalette}\n        customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            active={active || isHovered}\n            colourPalette={colourPalette}\n            customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"View.js","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { CrossIcon, EditIcon } from '../../icons';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        colourPalette={colourPalette}\n        customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            active={active || isHovered}\n            colourPalette={colourPalette}\n            customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,MAAM,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,GAAG,SAAS;IACjD,IAAI,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,GAAG,SAAS;IAC3C,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,GAAG,SAAS;IACrD,MAAM,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,GAAG,SAAS;AAClD,CAAA,CAAC;AAEF;;;;;;AAMG;AACI,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,EACrC,gBAAgB,EAChB,KAAK,EACL,MAAM,GAAG,KAAK,EACd,OAAO,EACP,QAAQ,EACR,MAAM,EACN,YAAY,GACF,KAAI;AACd,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAE;AAExD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;AACjE,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAK,KAAI;QACR,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,QAAQ;YAAE,QAAQ,CAAC,EAAE,CAAC;AAC5B,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,EAAE,CAAC,CACf;AACD,IAAA,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAK,KAAI;QACR,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,MAAM;YAAE,MAAM,CAAC,EAAE,CAAC;AACxB,IAAA,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,CAAC,KAAK;AACxC,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,CAAC,KAAK;IACxC,MAAM,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IAEvE,QACEA,6BAAC,SAAS,EAAA,EACR,SAAS,EAAE,CAAA,EAAG,eAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS,CAAC,CAAC,CAAA,CAAA,EAC9E,CAAC,MAAM,KAAI,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,MAAM,CAAA,KAAK,EACvC,CAAA,CAAE,EACF,OAAO,EAAE,WAAW,EAAA;QAEpBA,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,WAAW,EACzB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAAA;AAEjC,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,IAAA,EAAE,QAAQ,CAAqB;AAC9D,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,EAAE,IAAI,CAAQ;AACrC,YAAA,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,MAAM,EAAE,MAAM,IAAI,SAAS,EAC3B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAAA;AAElC,gBAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,OAAO,EAAE,OAAO,EAAC,iBAAiB,IACtE,KAAK,CACM,CACG,CACpB;YACA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GACJ,WAAW,EACf,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,MAAM,EAChC,OAAO,EAAE,YAAY,EAAA,CACrB,CACH;AACA,YAAA,OAAO,IAAI,MAAM,KAChBA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,GACH,WAAW,EACf,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI,EAC9B,OAAO,EAAE,UAAU,EAAA,CACnB,CACH,CACO,CACA;AAEhB;;;;"}

package/dist/components/View/styled.cjs

@@ -19,7 +19,7 @@ const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig(
     }
 
     ${Text.Text} {
-      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
+      color: ${customTextColour !== null && customTextColour !== void 0 ? customTextColour : colors.colors.neutral.ink.dark};
     }
   `} ${({ active, colourPalette }) => active &&
     `

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":["styled","BaseContainer","Text","colors","sizes"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAIvC,MAAM,WAAW,GAAGD,uBAAM,CAACE,SAAI,CAAC;AAIhC,MAAM,OAAO,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1CC,SAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAGH,uBAAM,CAACE,SAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEE,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGJ,uBAAM,CAAC,GAAG,mIAGzBI,WAAK,CAAC,EAAE,CAGZ,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":["styled","BaseContainer","Text","colors","sizes"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAIvC,MAAM,WAAW,GAAGD,uBAAM,CAACE,SAAI,CAAC;AAIhC,MAAM,OAAO,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1CC,SAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAhB,gBAAgB,GAAIC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAAA,CAAA,EAEC,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAGH,uBAAM,CAACE,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEE,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGJ,uBAAM,CAAC,GAAG,mIAGzBI,WAAK,CAAC,EAAE,CAAA,YAAA,EAGZA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;"}

package/dist/components/View/styled.js

@@ -13,7 +13,7 @@ const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour",
     }
 
     ${Text} {
-      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
+      color: ${customTextColour !== null && customTextColour !== void 0 ? customTextColour : colors.neutral.ink.dark};
     }
   `} ${({ active, colourPalette }) => active &&
     `

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAIvC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1C,IAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAE,KAAK,CAAC,EAAE;QACpB,OAAO,EAAE,KAAK,CAAC,EAAE;QACjB,MAAM,EAAE,KAAK,CAAC,IAAI;QAClB,KAAK,EAAE,KAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAG,MAAM,CAAC,GAAG,mIAGzB,KAAK,CAAC,EAAE,CAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EACX,KAAK,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAIvC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1C,IAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAAA,CAAA,EAEC,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAE,KAAK,CAAC,EAAE;QACpB,OAAO,EAAE,KAAK,CAAC,EAAE;QACjB,MAAM,EAAE,KAAK,CAAC,IAAI;QAClB,KAAK,EAAE,KAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAG,MAAM,CAAC,GAAG,mIAGzB,KAAK,CAAC,EAAE,CAAA,YAAA,EAGZ,KAAK,CAAC,IAAI,CAAA,OAAA,EACX,KAAK,CAAC,IAAI;;;;"}

package/dist/components/View/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/View/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport type ViewId = string;\n\nexport enum ViewTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport interface ViewProps {\n  /** ClassName to override styles on outer root element */\n  className?: string;\n\n  /** Colour palette for the view */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the Tab */\n  active?: boolean;\n\n  /** View name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** View's unique identifier */\n  id: ViewId;\n\n  /** View type */\n  type?: keyof typeof ViewTypes;\n\n  /** Number or string value to show near view label */\n  count?: number | string;\n\n  /** Event handler for when View component is clicked (should get activated) */\n  onClick: (id: ViewId) => void;\n\n  /** Event handler for when user clicks the delete/cross icon */\n  onDelete?: (id: ViewId) => void;\n\n  /** Event handler for when user clicks to edit the view */\n  onEdit?: (id: ViewId) => void;\n\n  /** Class name for e2e testing */\n  e2eClassName?: string;\n}\n"],"names":["ViewTypes"],"mappings":";;AAKYA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,iBAAS,KAATA,iBAAS,GAIpB,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/View/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport type ViewId = string;\n\nexport enum ViewTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport interface ViewProps {\n  /** ClassName to override styles on outer root element */\n  className?: string;\n\n  /** Colour palette for the view */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the Tab */\n  active?: boolean;\n\n  /** View name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** View's unique identifier */\n  id: ViewId;\n\n  /** View type */\n  type?: keyof typeof ViewTypes;\n\n  /** Number or string value to show near view label */\n  count?: number | string;\n\n  /** Event handler for when View component is clicked (should get activated) */\n  onClick: (id: ViewId) => void;\n\n  /** Event handler for when user clicks the delete/cross icon */\n  onDelete?: (id: ViewId) => void;\n\n  /** Event handler for when user clicks to edit the view */\n  onEdit?: (id: ViewId) => void;\n\n  /** Class name for e2e testing */\n  e2eClassName?: string;\n}\n"],"names":["ViewTypes"],"mappings":";;AAKYA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,iBAAS,KAATA,iBAAS,GAAA,EAAA,CAAA,CAAA;;"}

package/dist/components/View/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/View/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport type ViewId = string;\n\nexport enum ViewTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport interface ViewProps {\n  /** ClassName to override styles on outer root element */\n  className?: string;\n\n  /** Colour palette for the view */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the Tab */\n  active?: boolean;\n\n  /** View name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** View's unique identifier */\n  id: ViewId;\n\n  /** View type */\n  type?: keyof typeof ViewTypes;\n\n  /** Number or string value to show near view label */\n  count?: number | string;\n\n  /** Event handler for when View component is clicked (should get activated) */\n  onClick: (id: ViewId) => void;\n\n  /** Event handler for when user clicks the delete/cross icon */\n  onDelete?: (id: ViewId) => void;\n\n  /** Event handler for when user clicks to edit the view */\n  onEdit?: (id: ViewId) => void;\n\n  /** Class name for e2e testing */\n  e2eClassName?: string;\n}\n"],"names":[],"mappings":"IAKY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,SAAS,KAAT,SAAS,GAIpB,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/View/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport type ViewId = string;\n\nexport enum ViewTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport interface ViewProps {\n  /** ClassName to override styles on outer root element */\n  className?: string;\n\n  /** Colour palette for the view */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the Tab */\n  active?: boolean;\n\n  /** View name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** View's unique identifier */\n  id: ViewId;\n\n  /** View type */\n  type?: keyof typeof ViewTypes;\n\n  /** Number or string value to show near view label */\n  count?: number | string;\n\n  /** Event handler for when View component is clicked (should get activated) */\n  onClick: (id: ViewId) => void;\n\n  /** Event handler for when user clicks the delete/cross icon */\n  onDelete?: (id: ViewId) => void;\n\n  /** Event handler for when user clicks to edit the view */\n  onEdit?: (id: ViewId) => void;\n\n  /** Class name for e2e testing */\n  e2eClassName?: string;\n}\n"],"names":[],"mappings":"IAKY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,SAAS,KAAT,SAAS,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/components/ViewTab/ViewTab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { CrossIcon, ThreeDotsIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { buildClassnames, assignCssVars } from '../../utils';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport styles from './ViewTab.module.scss';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    const paletteColours = {\n      colourPaletteLightest: colourPalette.lightest,\n      colourPaletteDark: colourPalette.dark,\n    };\n\n    return (\n      <Button\n        variant=\"flat\"\n        className={buildClassnames([className, styles.viewButton, active && styles.active])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        style={assignCssVars({ customTextColour, ...paletteColours })}\n        {...props}\n      >\n        <FlexRow gap=\"none\" flexWrap=\"nowrap\" className={buildClassnames([styles.contour])}>\n          {iconSlot && (\n            <FlexRow flexWrap=\"nowrap\" className={styles.iconWrapper}>\n              {iconSlot}\n            </FlexRow>\n          )}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <FlexRow\n              flexWrap=\"nowrap\"\n              justifyContent=\"center\"\n              gap=\"none\"\n              className={buildClassnames([styles.counterContainer])}\n              data-testid=\"countContainer\"\n            >\n              {countSlot || (\n                <Text variant=\"subheadingSmall\" className={styles.counterText}>\n                  {count}\n                </Text>\n              )}\n            </FlexRow>\n          )}\n          {isDraft && <CrossIcon className={styles.iconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && (\n            <ThreeDotsIcon className={styles.iconStyling} aria-label=\"edit icon\" />\n          )}\n        </FlexRow>\n      </Button>\n    );\n  },\n);\n"],"names":["React","colors","ViewTabTypes","Button","buildClassnames","styles","assignCssVars","FlexRow","Text","CrossIcon","ThreeDotsIcon"],"mappings":"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"}
+{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { CrossIcon, ThreeDotsIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { buildClassnames, assignCssVars } from '../../utils';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport styles from './ViewTab.module.scss';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    const paletteColours = {\n      colourPaletteLightest: colourPalette.lightest,\n      colourPaletteDark: colourPalette.dark,\n    };\n\n    return (\n      <Button\n        variant=\"flat\"\n        className={buildClassnames([className, styles.viewButton, active && styles.active])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        style={assignCssVars({ customTextColour, ...paletteColours })}\n        {...props}\n      >\n        <FlexRow gap=\"none\" flexWrap=\"nowrap\" className={buildClassnames([styles.contour])}>\n          {iconSlot && (\n            <FlexRow flexWrap=\"nowrap\" className={styles.iconWrapper}>\n              {iconSlot}\n            </FlexRow>\n          )}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <FlexRow\n              flexWrap=\"nowrap\"\n              justifyContent=\"center\"\n              gap=\"none\"\n              className={buildClassnames([styles.counterContainer])}\n              data-testid=\"countContainer\"\n            >\n              {countSlot || (\n                <Text variant=\"subheadingSmall\" className={styles.counterText}>\n                  {count}\n                </Text>\n              )}\n            </FlexRow>\n          )}\n          {isDraft && <CrossIcon className={styles.iconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && (\n            <ThreeDotsIcon className={styles.iconStyling} aria-label=\"edit icon\" />\n          )}\n        </FlexRow>\n      </Button>\n    );\n  },\n);\n"],"names":["React","colors","ViewTabTypes","Button","buildClassnames","styles","assignCssVars","FlexRow","Text","CrossIcon","ThreeDotsIcon"],"mappings":"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"}

package/dist/components/ViewTab/ViewTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { CrossIcon, ThreeDotsIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { buildClassnames, assignCssVars } from '../../utils';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport styles from './ViewTab.module.scss';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    const paletteColours = {\n      colourPaletteLightest: colourPalette.lightest,\n      colourPaletteDark: colourPalette.dark,\n    };\n\n    return (\n      <Button\n        variant=\"flat\"\n        className={buildClassnames([className, styles.viewButton, active && styles.active])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        style={assignCssVars({ customTextColour, ...paletteColours })}\n        {...props}\n      >\n        <FlexRow gap=\"none\" flexWrap=\"nowrap\" className={buildClassnames([styles.contour])}>\n          {iconSlot && (\n            <FlexRow flexWrap=\"nowrap\" className={styles.iconWrapper}>\n              {iconSlot}\n            </FlexRow>\n          )}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <FlexRow\n              flexWrap=\"nowrap\"\n              justifyContent=\"center\"\n              gap=\"none\"\n              className={buildClassnames([styles.counterContainer])}\n              data-testid=\"countContainer\"\n            >\n              {countSlot || (\n                <Text variant=\"subheadingSmall\" className={styles.counterText}>\n                  {count}\n                </Text>\n              )}\n            </FlexRow>\n          )}\n          {isDraft && <CrossIcon className={styles.iconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && (\n            <ThreeDotsIcon className={styles.iconStyling} aria-label=\"edit icon\" />\n          )}\n        </FlexRow>\n      </Button>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { CrossIcon, ThreeDotsIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { buildClassnames, assignCssVars } from '../../utils';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport styles from './ViewTab.module.scss';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    const paletteColours = {\n      colourPaletteLightest: colourPalette.lightest,\n      colourPaletteDark: colourPalette.dark,\n    };\n\n    return (\n      <Button\n        variant=\"flat\"\n        className={buildClassnames([className, styles.viewButton, active && styles.active])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        style={assignCssVars({ customTextColour, ...paletteColours })}\n        {...props}\n      >\n        <FlexRow gap=\"none\" flexWrap=\"nowrap\" className={buildClassnames([styles.contour])}>\n          {iconSlot && (\n            <FlexRow flexWrap=\"nowrap\" className={styles.iconWrapper}>\n              {iconSlot}\n            </FlexRow>\n          )}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <FlexRow\n              flexWrap=\"nowrap\"\n              justifyContent=\"center\"\n              gap=\"none\"\n              className={buildClassnames([styles.counterContainer])}\n              data-testid=\"countContainer\"\n            >\n              {countSlot || (\n                <Text variant=\"subheadingSmall\" className={styles.counterText}>\n                  {count}\n                </Text>\n              )}\n            </FlexRow>\n          )}\n          {isDraft && <CrossIcon className={styles.iconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && (\n            <ThreeDotsIcon className={styles.iconStyling} aria-label=\"edit icon\" />\n          )}\n        </FlexRow>\n      </Button>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/ViewTab/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'name' | 'id' | 'type'\n> & {\n  /** Colour palette for the ViewTab */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the ViewTab */\n  active?: boolean;\n\n  /** ViewTab name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** ViewTab's unique identifier */\n  id: string;\n\n  /** ViewTab type */\n  type?: keyof typeof ViewTabTypes;\n\n  /** Number or string value to show near viewTab label */\n  count?: number | string | null;\n\n  /** Slot for custom count element */\n  /** If countSlot is provided, it will override the count prop */\n  countSlot?: ReactNode;\n\n  /** Event handler for when ViewTab component is clicked (should get activated) */\n  onClick: (id: string) => void;\n\n  /**  Event handler for when ViewTab component is clicked and isActive */\n  subAction?: (id: string) => void;\n\n  /** Context used to add to aria label, (orders or products based on page) */\n  ariaContext?: string;\n\n  /** Used to pass additonal context when using countSlot */\n  ariaDescribedBy?: string;\n};\n"],"names":["ViewTabTypes"],"mappings":";;AAGYA;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,oBAAY,KAAZA,oBAAY,GAIvB,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'name' | 'id' | 'type'\n> & {\n  /** Colour palette for the ViewTab */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the ViewTab */\n  active?: boolean;\n\n  /** ViewTab name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** ViewTab's unique identifier */\n  id: string;\n\n  /** ViewTab type */\n  type?: keyof typeof ViewTabTypes;\n\n  /** Number or string value to show near viewTab label */\n  count?: number | string | null;\n\n  /** Slot for custom count element */\n  /** If countSlot is provided, it will override the count prop */\n  countSlot?: ReactNode;\n\n  /** Event handler for when ViewTab component is clicked (should get activated) */\n  onClick: (id: string) => void;\n\n  /**  Event handler for when ViewTab component is clicked and isActive */\n  subAction?: (id: string) => void;\n\n  /** Context used to add to aria label, (orders or products based on page) */\n  ariaContext?: string;\n\n  /** Used to pass additonal context when using countSlot */\n  ariaDescribedBy?: string;\n};\n"],"names":["ViewTabTypes"],"mappings":";;AAGYA;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,oBAAY,KAAZA,oBAAY,GAAA,EAAA,CAAA,CAAA;;"}

package/dist/components/ViewTab/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'name' | 'id' | 'type'\n> & {\n  /** Colour palette for the ViewTab */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the ViewTab */\n  active?: boolean;\n\n  /** ViewTab name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** ViewTab's unique identifier */\n  id: string;\n\n  /** ViewTab type */\n  type?: keyof typeof ViewTabTypes;\n\n  /** Number or string value to show near viewTab label */\n  count?: number | string | null;\n\n  /** Slot for custom count element */\n  /** If countSlot is provided, it will override the count prop */\n  countSlot?: ReactNode;\n\n  /** Event handler for when ViewTab component is clicked (should get activated) */\n  onClick: (id: string) => void;\n\n  /**  Event handler for when ViewTab component is clicked and isActive */\n  subAction?: (id: string) => void;\n\n  /** Context used to add to aria label, (orders or products based on page) */\n  ariaContext?: string;\n\n  /** Used to pass additonal context when using countSlot */\n  ariaDescribedBy?: string;\n};\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,YAAY,KAAZ,YAAY,GAIvB,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'name' | 'id' | 'type'\n> & {\n  /** Colour palette for the ViewTab */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the ViewTab */\n  active?: boolean;\n\n  /** ViewTab name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** ViewTab's unique identifier */\n  id: string;\n\n  /** ViewTab type */\n  type?: keyof typeof ViewTabTypes;\n\n  /** Number or string value to show near viewTab label */\n  count?: number | string | null;\n\n  /** Slot for custom count element */\n  /** If countSlot is provided, it will override the count prop */\n  countSlot?: ReactNode;\n\n  /** Event handler for when ViewTab component is clicked (should get activated) */\n  onClick: (id: string) => void;\n\n  /**  Event handler for when ViewTab component is clicked and isActive */\n  subAction?: (id: string) => void;\n\n  /** Context used to add to aria label, (orders or products based on page) */\n  ariaContext?: string;\n\n  /** Used to pass additonal context when using countSlot */\n  ariaDescribedBy?: string;\n};\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,YAAY,KAAZ,YAAY,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/components/ViewsContainer/ViewsContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"space-between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n            {shouldShowNavigationArrows && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React","useRef","useSetScrollPosition","FlexRow","buildClassnames","styles","Skeleton","formStyles","Button","LeftArrowIcon","theme","RightArrowIcon","ThreeDotsIcon"],"mappings":"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"}
+{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"space-between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n            {shouldShowNavigationArrows && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React","useRef","useSetScrollPosition","FlexRow","buildClassnames","styles","Skeleton","formStyles","Button","LeftArrowIcon","theme","RightArrowIcon","ThreeDotsIcon"],"mappings":"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"}

package/dist/components/ViewsContainer/ViewsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"space-between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n            {shouldShowNavigationArrows && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"space-between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n            {shouldShowNavigationArrows && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs

@@ -9,26 +9,26 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
     const [leftDisabled, setLeftDisabled] = React.useState(true);
     const [rightDisabled, setRightDisabled] = React.useState(false);
     const [viewStartPositions, setViewStartPositions] = React.useState([]);
-    const activeTab = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.querySelector('[aria-selected = true]');
+    const activeTab = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-selected = true]');
     const prevActiveTab = reactUse.usePrevious(activeTab);
     const handleScroll = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (((_a = containerRef.current) === null || _a === undefined ? undefined : _a.scrollLeft) > 0) {
+        if (((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) > 0) {
             setLeftDisabled(false);
         }
         else {
             if (document.getElementById('left-arrow') === document.activeElement) {
-                (_b = document.getElementById('right-arrow')) === null || _b === undefined ? undefined : _b.focus();
+                (_b = document.getElementById('right-arrow')) === null || _b === void 0 ? void 0 : _b.focus();
             }
             setLeftDisabled(true);
         }
-        const maxScrollWidth = (_d = (_c = containerRef.current) === null || _c === undefined ? undefined : _c.scrollWidth) !== null && _d !== undefined ? _d : 0;
-        const maxClientWidth = (_f = (_e = containerRef.current) === null || _e === undefined ? undefined : _e.clientWidth) !== null && _f !== undefined ? _f : 0;
+        const maxScrollWidth = (_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.scrollWidth) !== null && _d !== void 0 ? _d : 0;
+        const maxClientWidth = (_f = (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 0;
         const maxScrollLeft = maxScrollWidth - maxClientWidth;
         // -10 to prevent javascript assertion errors on floating points
-        if (((_g = containerRef.current) === null || _g === undefined ? undefined : _g.scrollLeft) >= maxScrollLeft - 10) {
+        if (((_g = containerRef.current) === null || _g === void 0 ? void 0 : _g.scrollLeft) >= maxScrollLeft - 10) {
             if (document.getElementById('right-arrow') === document.activeElement) {
-                (_h = document.getElementById('left-arrow')) === null || _h === undefined ? undefined : _h.focus();
+                (_h = document.getElementById('left-arrow')) === null || _h === void 0 ? void 0 : _h.focus();
             }
             setRightDisabled(true);
             // Check if we've reached the end and should fetch more data
@@ -70,14 +70,14 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
     // Initialize view positions when container first has children
     React.useEffect(() => {
         var _a, _b;
-        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length) || viewStartPositions.length > 0)
+        if (!((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) || viewStartPositions.length > 0)
             return;
         setViewStartPositions(utils.createViewPositionArray(containerRef.current));
     }, [containerRef, viewStartPositions.length]);
     // Handle new item addition - scroll to end and update positions
     React.useEffect(() => {
         var _a, _b, _c, _d;
-        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+        if (!((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length))
             return;
         const childrenCount = containerRef.current.children.length;
         const positionsCount = viewStartPositions.length;
@@ -91,14 +91,14 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
             behavior: 'smooth',
         });
         // Compute the x position of the new item
-        const lastChildRect = (_c = containerRef.current.children[positionsCount - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect();
-        const newPosition = viewStartPositions[positionsCount - 1] + ((_d = lastChildRect === null || lastChildRect === undefined ? undefined : lastChildRect.x) !== null && _d !== undefined ? _d : 0) - 20;
+        const lastChildRect = (_c = containerRef.current.children[positionsCount - 1]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        const newPosition = viewStartPositions[positionsCount - 1] + ((_d = lastChildRect === null || lastChildRect === void 0 ? void 0 : lastChildRect.x) !== null && _d !== void 0 ? _d : 0) - 20;
         setViewStartPositions([...viewStartPositions, newPosition]);
     }, [containerRef, children, viewStartPositions]);
     // Handle active tab changes - scroll to active tab
     React.useEffect(() => {
         var _a, _b;
-        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+        if (!((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length))
             return;
         if (activeTab === prevActiveTab || activeTab === null)
             return;
@@ -116,7 +116,7 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
     // Handle fetching more views - recompute positions
     React.useEffect(() => {
         var _a, _b;
-        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+        if (!((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length))
             return;
         if (viewStartPositions.length >= containerRef.current.children.length)
             return;
@@ -130,7 +130,7 @@ const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, on
     }, [containerRef, viewStartPositions.length]);
     // Handle window resize and scroll event listeners
     React.useEffect(() => {
-        if (!(containerRef === null || containerRef === undefined ? undefined : containerRef.current))
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
             return;
         const container = containerRef.current;
         handleResize();