@veeqo/ui 10.4.0 → 11.0.0-beta-2

package/dist/components/VideoModal/VideoModal.cjs

@@ -7,7 +7,7 @@ var useClickOutside = require('../../hooks/useClickOutside.cjs');
 require('../../hooks/useFocusVisible.cjs');
 require('uid/secure');
 require('lodash.throttle');
-var CrossIcon = require('../../icons/CrossIcon.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -19,7 +19,7 @@ const VideoModal = ({ id, youtubeVideoId, showVideoModal, handleCloseClick, }) =
         React__default.default.createElement(styled.PopupContent, { "data-testid": "video-modal_popup-content", className: `video-modal--${showVideoModal ? 'visible' : 'hidden'}` },
             React__default.default.createElement(styled.VideoWrapper, { ref: ref },
                 React__default.default.createElement("iframe", { title: `${id}-video`, src: `https://www.youtube.com/embed/${youtubeVideoId}`, frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }),
-                React__default.default.createElement(styled.ButtonSC, { variant: "flat", onClick: handleCloseClick, "data-testid": "video-modal--close", iconSlot: React__default.default.createElement(CrossIcon.CrossIcon, { color: "white" }) })))));
+                React__default.default.createElement(styled.ButtonSC, { variant: "flat", onClick: handleCloseClick, "data-testid": "video-modal--close", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }) })))));
 };
 
 exports.VideoModal = VideoModal;

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

@@ -1 +1 @@
-{"version":3,"file":"VideoModal.cjs","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Popup } from './components/Popup';\nimport { VideoModalProps } from './types';\nimport { PopupContent, VideoWrapper, ButtonSC } from './styled';\nimport { useClickOutside } from '../../hooks';\nimport { CrossIcon } from '../../icons/CrossIcon';\n\nexport const VideoModal = ({\n  id,\n  youtubeVideoId,\n  showVideoModal,\n  handleCloseClick,\n}: VideoModalProps) => {\n  const ref = useClickOutside(showVideoModal, handleCloseClick);\n\n  return (\n    <Popup shouldShow={showVideoModal} className={`${id}-video`}>\n      <PopupContent\n        data-testid=\"video-modal_popup-content\"\n        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}\n      >\n        <VideoWrapper ref={ref}>\n          <iframe\n            title={`${id}-video`}\n            src={`https://www.youtube.com/embed/${youtubeVideoId}`}\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n          <ButtonSC\n            variant=\"flat\"\n            onClick={handleCloseClick}\n            data-testid=\"video-modal--close\"\n            iconSlot={<CrossIcon color=\"white\" />}\n          />\n        </VideoWrapper>\n      </PopupContent>\n    </Popup>\n  );\n};\n"],"names":["useClickOutside","React","Popup","PopupContent","VideoWrapper","ButtonSC","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAGA,+BAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAF,sBAAA,CAAA,aAAA,CAACG,mBAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBH,sBACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,sBAAC,CAAA,aAAA,CAAAI,eAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAK,mBAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}
+{"version":3,"file":"VideoModal.cjs","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Popup } from './components/Popup';\nimport { VideoModalProps } from './types';\nimport { PopupContent, VideoWrapper, ButtonSC } from './styled';\nimport { useClickOutside } from '../../hooks';\nimport { CrossIcon } from '../../icons';\n\nexport const VideoModal = ({\n  id,\n  youtubeVideoId,\n  showVideoModal,\n  handleCloseClick,\n}: VideoModalProps) => {\n  const ref = useClickOutside(showVideoModal, handleCloseClick);\n\n  return (\n    <Popup shouldShow={showVideoModal} className={`${id}-video`}>\n      <PopupContent\n        data-testid=\"video-modal_popup-content\"\n        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}\n      >\n        <VideoWrapper ref={ref}>\n          <iframe\n            title={`${id}-video`}\n            src={`https://www.youtube.com/embed/${youtubeVideoId}`}\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n          <ButtonSC\n            variant=\"flat\"\n            onClick={handleCloseClick}\n            data-testid=\"video-modal--close\"\n            iconSlot={<CrossIcon color=\"white\" />}\n          />\n        </VideoWrapper>\n      </PopupContent>\n    </Popup>\n  );\n};\n"],"names":["useClickOutside","React","Popup","PopupContent","VideoWrapper","ButtonSC","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAGA,+BAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAF,sBAAA,CAAA,aAAA,CAACG,mBAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBH,sBACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,sBAAC,CAAA,aAAA,CAAAI,eAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAK,wBAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}

package/dist/components/VideoModal/VideoModal.js

@@ -5,7 +5,7 @@ import { useClickOutside } from '../../hooks/useClickOutside.js';
 import '../../hooks/useFocusVisible.js';
 import 'uid/secure';
 import 'lodash.throttle';
-import { CrossIcon } from '../../icons/CrossIcon.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 
 const VideoModal = ({ id, youtubeVideoId, showVideoModal, handleCloseClick, }) => {
     const ref = useClickOutside(showVideoModal, handleCloseClick);

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

@@ -1 +1 @@
-{"version":3,"file":"VideoModal.js","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Popup } from './components/Popup';\nimport { VideoModalProps } from './types';\nimport { PopupContent, VideoWrapper, ButtonSC } from './styled';\nimport { useClickOutside } from '../../hooks';\nimport { CrossIcon } from '../../icons/CrossIcon';\n\nexport const VideoModal = ({\n  id,\n  youtubeVideoId,\n  showVideoModal,\n  handleCloseClick,\n}: VideoModalProps) => {\n  const ref = useClickOutside(showVideoModal, handleCloseClick);\n\n  return (\n    <Popup shouldShow={showVideoModal} className={`${id}-video`}>\n      <PopupContent\n        data-testid=\"video-modal_popup-content\"\n        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}\n      >\n        <VideoWrapper ref={ref}>\n          <iframe\n            title={`${id}-video`}\n            src={`https://www.youtube.com/embed/${youtubeVideoId}`}\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n          <ButtonSC\n            variant=\"flat\"\n            onClick={handleCloseClick}\n            data-testid=\"video-modal--close\"\n            iconSlot={<CrossIcon color=\"white\" />}\n          />\n        </VideoWrapper>\n      </PopupContent>\n    </Popup>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAG,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBA,cACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,cAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}
+{"version":3,"file":"VideoModal.js","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Popup } from './components/Popup';\nimport { VideoModalProps } from './types';\nimport { PopupContent, VideoWrapper, ButtonSC } from './styled';\nimport { useClickOutside } from '../../hooks';\nimport { CrossIcon } from '../../icons';\n\nexport const VideoModal = ({\n  id,\n  youtubeVideoId,\n  showVideoModal,\n  handleCloseClick,\n}: VideoModalProps) => {\n  const ref = useClickOutside(showVideoModal, handleCloseClick);\n\n  return (\n    <Popup shouldShow={showVideoModal} className={`${id}-video`}>\n      <PopupContent\n        data-testid=\"video-modal_popup-content\"\n        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}\n      >\n        <VideoWrapper ref={ref}>\n          <iframe\n            title={`${id}-video`}\n            src={`https://www.youtube.com/embed/${youtubeVideoId}`}\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n          <ButtonSC\n            variant=\"flat\"\n            onClick={handleCloseClick}\n            data-testid=\"video-modal--close\"\n            iconSlot={<CrossIcon color=\"white\" />}\n          />\n        </VideoWrapper>\n      </PopupContent>\n    </Popup>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAG,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBA,cACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,cAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}

package/dist/components/View/View.cjs

@@ -9,8 +9,8 @@ require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
 var types = require('./types.cjs');
 var styled = require('./styled.cjs');
-var CrossIcon = require('../../icons/CrossIcon.cjs');
-var EditIcon = require('../../icons/EditIcon.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var EditIcon = require('../../icons/design-system/components/EditIcon.cjs');
 var Text = require('../Text/Text.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -56,8 +56,8 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.colo
             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.CrossIcon, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.delete, onClick: handleDelete })),
-            isSaved && active && (React__default.default.createElement(EditIcon.EditIcon, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.edit, onClick: handleEdit })))));
+            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 })))));
 };
 
 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 } from '../../icons/CrossIcon';\nimport { EditIcon } from '../../icons/EditIcon';\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

@@ -7,8 +7,8 @@ import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
 import { ViewTypes } from './types.js';
 import { Container, Contour, CustomIconWrapper, CounterContainer, CounterText, IconStyling } from './styled.js';
-import { CrossIcon } from '../../icons/CrossIcon.js';
-import { EditIcon } from '../../icons/EditIcon.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { ReactComponent as EditIcon } from '../../icons/design-system/components/EditIcon.js';
 import { Text } from '../Text/Text.js';
 
 const generateClassNames = (prefix) => ({

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 } from '../../icons/CrossIcon';\nimport { EditIcon } from '../../icons/EditIcon';\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":"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"}

package/dist/components/ViewTab/styled.cjs

@@ -5,8 +5,9 @@ var colors = require('../../theme/modules/colors.cjs');
 var Text = require('../Text/Text.cjs');
 var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
 var sizes = require('../../theme/modules/sizes.cjs');
-var ThreeDotsIcon = require('../../icons/ThreeDotsIcon.cjs');
-var CrossIcon = require('../../icons/CrossIcon.cjs');
+require('react');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var ThreeDotsIcon = require('../../icons/custom/components/ThreeDotsIcon.cjs');
 var styled$1 = require('../Button/components/styled.cjs');
 var index = require('../../theme/index.cjs');
 
@@ -16,7 +17,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
 const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
-const CrossIconStyling = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
+const CrossIconStyling = styled__default.default(CrossIcon.ReactComponent).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
 const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
       background-color: ${colourPalette.dark};

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/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 { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\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.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\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: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\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 {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":"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"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/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 { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\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.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\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: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\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 {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,WAAW,GAAGA,uBAAM,CAACC,SAAI,CAAC;AAIhC,MAAM,oBAAoB,GAAGD,uBAAM,CAACE,2BAAa,CAAC;AAClD,MAAM,gBAAgB,GAAGF,uBAAM,CAACG,wBAAS,CAAC;AAE1C,MAAM,gBAAgB,GAAGH,uBAAM,CAACC,SAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACsB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;YAEhC,WAAW,CAAA;AACN,eAAA,EAAAG,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;AAE1C,EAAA,CAAA,CAAA;AAGH,MAAM,OAAO,GAAGJ,uBAAM,CAACK,2BAAa,CAAC,wLAOxBC,WAAK,CAAC,KAAK,CAAC,EAAE,6EAKvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;;AAGN,sBAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;UACtC,gBAAgB,CAAA;AACA,wBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,WAAW,CAAA;AACN,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;UAG9BH,SAAI,CAAA;eACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAEhD,oBAAoB,CAAA;AACf,aAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAE5B,gBAAgB,CAAA;AACX,aAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;;QAI9BH,SAAI,CAAA;aACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAErD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAC5C,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;UAEpC,oBAAoB,CAAA;AACf,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEvB,gBAAgB,CAAA;AACX,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;;UAGvBH,SAAI,CAAA;AACC,aAAA,EAAA,gBAAgB,aAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,aAAa,CAAC,IAAI,CAAA;;AAElD,EAAA,CAAA,CAAA;AAGH,MAAM,UAAU,GAAGD,uBAAM,CAACO,mBAAU,CAAC,uFACxBD,WAAK,CAAC,KAAK,CAAC,EAAE,6FAQvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;MAExB,OAAO,CAAA;AACa,wBAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,gBAAgB,CAAA;AACA,0BAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;cACtC,WAAW,CAAA;AACN,iBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;YAG9BH,SAAI,CAAA;iBACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAEhD,oBAAoB,CAAA;AACf,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAE5B,gBAAgB,CAAA;AACX,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGrC,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEI,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,GAAGR,uBAAM,CAAC,GAAG,oIAGzBQ,WAAK,CAAC,EAAE,CAGZ,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;;;"}

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

@@ -9,8 +9,8 @@ export type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & R
 export type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;
 export type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;
 declare const CounterText: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
-declare const ThreeDotsIconStyling: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
-declare const CrossIconStyling: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+declare const ThreeDotsIconStyling: import("styled-components").StyledComponent<(props: import("../../icons/types").IconComponentProps) => import("react").JSX.Element, any, {}, never>;
+declare const CrossIconStyling: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {}, never>;
 declare const CounterContainer: import("styled-components").StyledComponent<"span", any, ({} & import("../Text/types").TextProps) & Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
 declare const Contour: import("styled-components").StyledComponent<"div", any, Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
 declare const ViewButton: import("styled-components").StyledComponent<any, any, object & ViewButtonProps, string | number | symbol>;

package/dist/components/ViewTab/styled.js

@@ -3,8 +3,9 @@ import { colors } from '../../theme/modules/colors.js';
 import { Text } from '../Text/Text.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { sizes } from '../../theme/modules/sizes.js';
-import { ThreeDotsIcon } from '../../icons/ThreeDotsIcon.js';
-import { CrossIcon } from '../../icons/CrossIcon.js';
+import 'react';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { ThreeDotsIcon } from '../../icons/custom/components/ThreeDotsIcon.js';
 import { FlatButton } from '../Button/components/styled.js';
 import { theme } from '../../theme/index.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/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 { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\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.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\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: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\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 {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/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 { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\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.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\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: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\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 {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ViewsContainer/styled.cjs

@@ -4,10 +4,11 @@ var styled = require('styled-components');
 var Stack = require('../Stack/Stack.cjs');
 require('../Stack/types.cjs');
 var Button = require('../Button/Button.cjs');
-var LeftArrowIcon = require('../../icons/LeftArrowIcon.cjs');
-var RightArrowIcon = require('../../icons/RightArrowIcon.cjs');
+require('react');
+var LeftArrowIcon = require('../../icons/design-system/components/LeftArrowIcon.cjs');
+var RightArrowIcon = require('../../icons/design-system/components/RightArrowIcon.cjs');
+var ThreeDotsIcon = require('../../icons/custom/components/ThreeDotsIcon.cjs');
 var colors = require('../../theme/modules/colors.cjs');
-var ThreeDotsIcon = require('../../icons/ThreeDotsIcon.cjs');
 var index = require('../InputGroup/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -16,8 +17,8 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const ViewsWrapper = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--x8ukf0" }) `overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}gap:8px;height:inherit;padding:8px 6px 8px 12px;margin-left:0;`;
 const Container = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Container", componentId: "vui--mlh8wa" }) `background-color:${colors.colors.neutral.grey.lightest};`;
-const StyledLeftIcon = styled__default.default(LeftArrowIcon.LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--193620d" }) `color:${colors.colors.neutral.ink.base};`;
-const StyledRightIcon = styled__default.default(RightArrowIcon.RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--erlipg" }) `color:${colors.colors.neutral.ink.base};`;
+const StyledLeftIcon = styled__default.default(LeftArrowIcon.ReactComponent).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--193620d" }) `color:${colors.colors.neutral.ink.base};`;
+const StyledRightIcon = styled__default.default(RightArrowIcon.ReactComponent).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--erlipg" }) `color:${colors.colors.neutral.ink.base};`;
 const StyledMenuIcon = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--eg23b0" }) `color:${colors.colors.neutral.ink.base};`;
 const StyledMenuButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--1o9jbht" }) `background-color:white;&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
 const StyledLeftButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--wtwmiz" }) `background-color:white;&:disabled{background-color:white;${StyledLeftIcon}{color:${colors.colors.neutral.ink.lightest};}}&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  gap: 8px;\n  height: inherit;\n  padding: 8px 6px 8px 12px;\n  margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n  background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n  background-color: white;\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledLeftIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledRightButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledRightIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n  padding-right: 8px;\n  margin-left: 0;\n\n  & > *:first-child:last-child {\n    border-radius: 4px !important;\n  }\n`;\n"],"names":["styled","Stack","colors","LeftArrowIcon","RightArrowIcon","ThreeDotsIcon","Button","InputGroup"],"mappings":";;;;;;;;;;;;;;;;MASa,YAAY,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAGD,uBAAM,CAACC,WAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAD,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAGF,uBAAM,CAACI,6BAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAGF,uBAAM,CAACK,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAH,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAAJ,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACLJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACNJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAGF,uBAAM,CAACO,gBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  gap: 8px;\n  height: inherit;\n  padding: 8px 6px 8px 12px;\n  margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n  background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n  background-color: white;\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledLeftIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledRightButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledRightIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n  padding-right: 8px;\n  margin-left: 0;\n\n  & > *:first-child:last-child {\n    border-radius: 4px !important;\n  }\n`;\n"],"names":["styled","Stack","colors","LeftArrowIcon","RightArrowIcon","ThreeDotsIcon","Button","InputGroup"],"mappings":";;;;;;;;;;;;;;;;;MAOa,YAAY,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAGD,uBAAM,CAACC,WAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAGF,uBAAM,CAACG,4BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAD,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAGF,uBAAM,CAACI,6BAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAGF,uBAAM,CAACK,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAH,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAAJ,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACLJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACNJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAGF,uBAAM,CAACO,gBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;;;;;;;;;"}

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const ViewsWrapper: import("styled-components").StyledComponent<"div", any, import("../Stack").StackProps, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, import("../Stack").StackProps, never>;
-export declare const StyledLeftIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
-export declare const StyledRightIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
-export declare const StyledMenuIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export declare const StyledLeftIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {}, never>;
+export declare const StyledRightIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {}, never>;
+export declare const StyledMenuIcon: import("styled-components").StyledComponent<(props: import("../../icons/types").IconComponentProps) => import("react").JSX.Element, any, {}, never>;
 export declare const StyledMenuButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: import("react").ReactNode;
     variant?: import("../Button/types").ButtonVariant | undefined;

package/dist/components/ViewsContainer/styled.js

@@ -2,10 +2,11 @@ import styled from 'styled-components';
 import { Stack } from '../Stack/Stack.js';
 import '../Stack/types.js';
 import { Button } from '../Button/Button.js';
-import { LeftArrowIcon } from '../../icons/LeftArrowIcon.js';
-import { RightArrowIcon } from '../../icons/RightArrowIcon.js';
+import 'react';
+import { ReactComponent as LeftArrowIcon } from '../../icons/design-system/components/LeftArrowIcon.js';
+import { ReactComponent as RightArrowIcon } from '../../icons/design-system/components/RightArrowIcon.js';
+import { ThreeDotsIcon } from '../../icons/custom/components/ThreeDotsIcon.js';
 import { colors } from '../../theme/modules/colors.js';
-import { ThreeDotsIcon } from '../../icons/ThreeDotsIcon.js';
 import { InputGroup } from '../InputGroup/index.js';
 
 const ViewsWrapper = styled(Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--x8ukf0" }) `overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}gap:8px;height:inherit;padding:8px 6px 8px 12px;margin-left:0;`;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  gap: 8px;\n  height: inherit;\n  padding: 8px 6px 8px 12px;\n  margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n  background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n  background-color: white;\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledLeftIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledRightButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledRightIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n  padding-right: 8px;\n  margin-left: 0;\n\n  & > *:first-child:last-child {\n    border-radius: 4px !important;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;;MASa,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACL,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACN,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  gap: 8px;\n  height: inherit;\n  padding: 8px 6px 8px 12px;\n  margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n  background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n  background-color: white;\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledLeftIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledRightButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledRightIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n  padding-right: 8px;\n  margin-left: 0;\n\n  & > *:first-child:last-child {\n    border-radius: 4px !important;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;MAOa,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACL,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACN,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;"}

package/dist/hoc/withLabels/withLabels.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
 var React = require('react');
-var CriticalIcon = require('../../icons/CriticalIcon.cjs');
+var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
+var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var index = require('../../theme/index.cjs');
 var Stack = require('../../components/Stack/Stack.cjs');
 require('../../components/Stack/types.cjs');
 var styled = require('./styled.cjs');
-var HelpIcon = require('../../icons/HelpIcon.cjs');
 var useId = require('../../hooks/useId.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -22,11 +22,11 @@ function withLabels(Component) {
             React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 React__default.default.createElement(styled.Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
-                    React__default.default.createElement(HelpIcon.HelpIcon, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
+                    React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
             hint && React__default.default.createElement(styled.Hint, { id: `${componentId}-hint` }, hint),
             React__default.default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
             error && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
-                React__default.default.createElement(CriticalIcon.CriticalIcon, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
+                React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
                 React__default.default.createElement(styled.Error, null, error)))));
     };
 }

package/dist/hoc/withLabels/withLabels.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon } from '../../icons/CriticalIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label) return <Component id={componentId} hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\n          {(tooltip || tooltipContent) && (\n            <BlockTooltip text={tooltip} content={tooltipContent}>\n              <HelpIcon\n                data-testid=\"tooltip-help\"\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n            </BlockTooltip>\n          )}\n        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["useId","React","RootStack","Stack","Label","BlockTooltip","HelpIcon","theme","Hint","CriticalIcon","Error"],"mappings":";;;;;;;;;;;;;;;AAkBM,SAAU,UAAU,CAAI,SAA2B,EAAA;AACvD,IAAA,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,KAAI;AAC5E,QAAA,MAAM,WAAW,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAOC,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAO,GAAA,UAAgB,GAAI;QAE3F,QACEA,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,YAAAD,sBAAA,CAAA,aAAA,CAACE,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAF,sBAAA,CAAA,aAAA,CAACG,YAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBH,sBAAA,CAAA,aAAA,CAACI,mBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAJ,sBAAA,CAAA,aAAA,CAACK,iBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIN,sBAAC,CAAA,aAAA,CAAAO,WAAI,EAAC,EAAA,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAG,EAAA,IAAI,CAAQ;AACvD,YAAAP,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,YAAA,KAAK,KACJA,sBAAC,CAAA,aAAA,CAAAE,WAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACxDF,sBAAC,CAAA,aAAA,CAAAQ,yBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEF,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;gBAC/EN,sBAAC,CAAA,aAAA,CAAAS,YAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB,KAAC;AACH;;;;"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon, HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label) return <Component id={componentId} hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\n          {(tooltip || tooltipContent) && (\n            <BlockTooltip text={tooltip} content={tooltipContent}>\n              <HelpIcon\n                data-testid=\"tooltip-help\"\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n            </BlockTooltip>\n          )}\n        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["useId","React","RootStack","Stack","Label","BlockTooltip","HelpIcon","theme","Hint","CriticalIcon","Error"],"mappings":";;;;;;;;;;;;;;;AAiBM,SAAU,UAAU,CAAI,SAA2B,EAAA;AACvD,IAAA,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,KAAI;AAC5E,QAAA,MAAM,WAAW,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAOC,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAO,GAAA,UAAgB,GAAI;QAE3F,QACEA,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,YAAAD,sBAAA,CAAA,aAAA,CAACE,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAF,sBAAA,CAAA,aAAA,CAACG,YAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBH,sBAAA,CAAA,aAAA,CAACI,mBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAJ,sBAAA,CAAA,aAAA,CAACK,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIN,sBAAC,CAAA,aAAA,CAAAO,WAAI,EAAC,EAAA,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAG,EAAA,IAAI,CAAQ;AACvD,YAAAP,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,YAAA,KAAK,KACJA,sBAAC,CAAA,aAAA,CAAAE,WAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACxDF,sBAAC,CAAA,aAAA,CAAAQ,2BAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEF,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;gBAC/EN,sBAAC,CAAA,aAAA,CAAAS,YAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB,KAAC;AACH;;;;"}

package/dist/hoc/withLabels/withLabels.js

@@ -1,10 +1,10 @@
 import React__default from 'react';
-import { CriticalIcon } from '../../icons/CriticalIcon.js';
+import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
+import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
 import { theme } from '../../theme/index.js';
 import { Stack } from '../../components/Stack/Stack.js';
 import '../../components/Stack/types.js';
 import { RootStack, Label, BlockTooltip, Hint, Error } from './styled.js';
-import { HelpIcon } from '../../icons/HelpIcon.js';
 import { useId } from '../../hooks/useId.js';
 
 function withLabels(Component) {

package/dist/hoc/withLabels/withLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon } from '../../icons/CriticalIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label) return <Component id={componentId} hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\n          {(tooltip || tooltipContent) && (\n            <BlockTooltip text={tooltip} content={tooltipContent}>\n              <HelpIcon\n                data-testid=\"tooltip-help\"\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n            </BlockTooltip>\n          )}\n        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAkBM,SAAU,UAAU,CAAI,SAA2B,EAAA;AACvD,IAAA,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,KAAI;AAC5E,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAO,GAAA,UAAgB,GAAI;QAE3F,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAG,EAAA,IAAI,CAAQ;AACvD,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,YAAA,KAAK,KACJA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACxDA,cAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;gBAC/EA,cAAC,CAAA,aAAA,CAAA,KAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB,KAAC;AACH;;;;"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon, HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label) return <Component id={componentId} hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\n          {(tooltip || tooltipContent) && (\n            <BlockTooltip text={tooltip} content={tooltipContent}>\n              <HelpIcon\n                data-testid=\"tooltip-help\"\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n            </BlockTooltip>\n          )}\n        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAiBM,SAAU,UAAU,CAAI,SAA2B,EAAA;AACvD,IAAA,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,KAAI;AAC5E,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAO,GAAA,UAAgB,GAAI;QAE3F,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAG,EAAA,IAAI,CAAQ;AACvD,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,YAAA,KAAK,KACJA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACxDA,cAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;gBAC/EA,cAAC,CAAA,aAAA,CAAA,KAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB,KAAC;AACH;;;;"}

package/dist/icons/custom/components/ActiveCheckboxIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveCheckboxIcon.cjs","sources":["../../../../src/icons/custom/components/ActiveCheckboxIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const ActiveCheckboxIcon = (props: IconComponentProps) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    data-testid=\"active-checkbox-icon\"\n    {...props}\n  >\n    <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" fill=\"white\" />\n    <path\n      d=\"M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z\"\n      fill=\"#4CA1D9\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAyB,MAC1DA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EACtB,aAAA,EAAA,sBAAsB,KAC9B,KAAK,EAAA;AAET,IAAAA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAG,CAAA;IACxDA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,wJAAwJ,EAC1J,IAAI,EAAC,SAAS,EAAA,CACd,CACE;;;;"}

package/dist/icons/custom/components/ActiveCheckboxIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const ActiveCheckboxIcon: (props: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/ActiveCheckboxIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveCheckboxIcon.js","sources":["../../../../src/icons/custom/components/ActiveCheckboxIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const ActiveCheckboxIcon = (props: IconComponentProps) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    data-testid=\"active-checkbox-icon\"\n    {...props}\n  >\n    <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" fill=\"white\" />\n    <path\n      d=\"M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z\"\n      fill=\"#4CA1D9\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAyB,MAC1DA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EACtB,aAAA,EAAA,sBAAsB,KAC9B,KAAK,EAAA;AAET,IAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAG,CAAA;IACxDA,cACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,wJAAwJ,EAC1J,IAAI,EAAC,SAAS,EAAA,CACd,CACE;;;;"}

package/dist/icons/custom/components/ActiveRadioIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveRadioIcon.cjs","sources":["../../../../src/icons/custom/components/ActiveRadioIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const ActiveRadioIcon = (props: IconComponentProps) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    data-testid=\"active-radio-icon\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19Z\"\n      fill=\"#0079d1\"\n    />\n    <circle cx=\"12\" cy=\"12\" r=\"5\" fill=\"#0079d1\" />\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAGO,MAAM,eAAe,GAAG,CAAC,KAAyB,MACvDA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EACtB,aAAA,EAAA,mBAAmB,KAC3B,KAAK,EAAA;AAET,IAAAA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gOAAgO,EAClO,IAAI,EAAC,SAAS,EACd,CAAA;AACF,IAAAA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,CAC3C;;;;"}

package/dist/icons/custom/components/ActiveRadioIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const ActiveRadioIcon: (props: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/ActiveRadioIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveRadioIcon.js","sources":["../../../../src/icons/custom/components/ActiveRadioIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const ActiveRadioIcon = (props: IconComponentProps) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    data-testid=\"active-radio-icon\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19Z\"\n      fill=\"#0079d1\"\n    />\n    <circle cx=\"12\" cy=\"12\" r=\"5\" fill=\"#0079d1\" />\n  </svg>\n);\n"],"names":["React"],"mappings":";;AAGO,MAAM,eAAe,GAAG,CAAC,KAAyB,MACvDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EACtB,aAAA,EAAA,mBAAmB,KAC3B,KAAK,EAAA;AAET,IAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gOAAgO,EAClO,IAAI,EAAC,SAAS,EACd,CAAA;AACF,IAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,CAC3C;;;;"}

package/dist/icons/custom/components/AmazonSmileIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmazonSmileIcon.cjs","sources":["../../../../src/icons/custom/components/AmazonSmileIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const AmazonSmileIcon = (props: IconComponentProps) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 32 32\" {...props}>\n    <g fill=\"#FF6200\">\n      <path d=\"M2.38 12.526q-.19.15-.08.497.1.308.467.765a13 13 0 0 0 3.526 3.038 16.1 16.1 0 0 0 4.38 1.788q2.343.585 4.786.586 3.128 0 5.959-.914 2.83-.904 4.727-2.542.666-.586.665-.934a.4.4 0 0 0-.109-.258q-.149-.148-.358-.099a2.8 2.8 0 0 0-.585.248q-1.818.953-4.43 1.52a25 25 0 0 1-5.432.576q-3.506 0-6.773-.954-3.267-.952-5.79-2.979-.367-.288-.596-.367-.218-.08-.357.03\" />\n      <path d=\"M24.447 13.023q-.21.198-.11.417.07.159.268.179.2.03.566-.04a9 9 0 0 1 1.242-.179q.645-.04 1.122.02.477.07.596.239.179.268-.13 1.132a8 8 0 0 1-.814 1.678q-.198.327-.238.516a.32.32 0 0 0 .1.318q.088.09.198.09.288 0 .834-.507a4.6 4.6 0 0 0 1.38-2.026q.22-.606.269-1.271t-.15-.953q-.188-.279-.833-.457A4.7 4.7 0 0 0 27.465 12q-1.26 0-2.393.596a3 3 0 0 0-.625.427\" />\n    </g>\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;MAGa,eAAe,GAAG,CAAC,KAAyB,MACvDA,gBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAA,GAAK,KAAK,EAAA;IAC/EA,gBAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA;QACfA,gBAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,yWAAyW,EAAG,CAAA;AACpX,QAAAA,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wWAAwW,GAAG,CACjX,CACA;;;;"}

package/dist/icons/custom/components/AmazonSmileIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const AmazonSmileIcon: (props: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/AmazonSmileIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmazonSmileIcon.js","sources":["../../../../src/icons/custom/components/AmazonSmileIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const AmazonSmileIcon = (props: IconComponentProps) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 32 32\" {...props}>\n    <g fill=\"#FF6200\">\n      <path d=\"M2.38 12.526q-.19.15-.08.497.1.308.467.765a13 13 0 0 0 3.526 3.038 16.1 16.1 0 0 0 4.38 1.788q2.343.585 4.786.586 3.128 0 5.959-.914 2.83-.904 4.727-2.542.666-.586.665-.934a.4.4 0 0 0-.109-.258q-.149-.148-.358-.099a2.8 2.8 0 0 0-.585.248q-1.818.953-4.43 1.52a25 25 0 0 1-5.432.576q-3.506 0-6.773-.954-3.267-.952-5.79-2.979-.367-.288-.596-.367-.218-.08-.357.03\" />\n      <path d=\"M24.447 13.023q-.21.198-.11.417.07.159.268.179.2.03.566-.04a9 9 0 0 1 1.242-.179q.645-.04 1.122.02.477.07.596.239.179.268-.13 1.132a8 8 0 0 1-.814 1.678q-.198.327-.238.516a.32.32 0 0 0 .1.318q.088.09.198.09.288 0 .834-.507a4.6 4.6 0 0 0 1.38-2.026q.22-.606.269-1.271t-.15-.953q-.188-.279-.833-.457A4.7 4.7 0 0 0 27.465 12q-1.26 0-2.393.596a3 3 0 0 0-.625.427\" />\n    </g>\n  </svg>\n);\n"],"names":[],"mappings":";;MAGa,eAAe,GAAG,CAAC,KAAyB,MACvD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAA,GAAK,KAAK,EAAA;IAC/E,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA;QACf,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,yWAAyW,EAAG,CAAA;AACpX,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wWAAwW,GAAG,CACjX,CACA;;;;"}

package/dist/icons/custom/components/ArrowDownIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const ArrowDownIcon: (props: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/ArrowUpIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const ArrowUpIcon: (props: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/AttentionIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const AttentionIcon: (props: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/CalendarIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const CalendarIcon: (props: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/ClipboardIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+export declare const ClipboardIcon: (props: IconComponentProps) => React.JSX.Element;