npm - @veeqo/ui - Versions diffs - 10.0.0-beta.3 → 10.0.0-beta.5 - Mend

@veeqo/ui 10.0.0-beta.3 → 10.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (636) hide show

package/dist/components/UploadFile/components/UploadedFile/styled.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { colors } from '../../../../theme/modules/colors.js';
 import { radius } from '../../../../theme/modules/radius.js';
 import { sizes } from '../../../../theme/modules/sizes.js';
 import { Stack } from '../../../Stack/Stack.js';
+import '../../../Stack/types.js';
 const SingleLineText = styled(Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--1koybls" }) `display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;`;
 const UploadedFilesListStack = styled(Stack).withConfig({ displayName: "vui--UploadedFilesListStack", componentId: "vui--cbt5s4" }) `border:1px solid ${colors.neutral.ink.lightest};border-radius:${radius.base};padding:${sizes.xs};${Text}{padding-left:${sizes.xs};}`;

package/dist/components/UploadFile/components/UploadedFile/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../../../src/components/UploadFile/components/UploadedFile/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Text } from '../../../Text';\nimport { colors } from '../../../../theme/modules/colors';\nimport { radius } from '../../../../theme/modules/radius';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Stack } from '../../../Stack';\n\nexport const SingleLineText = styled(Text)`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n overflow: hidden;\n`;\n\nexport const UploadedFilesListStack = styled(Stack)`\n border: 1px solid ${colors.neutral.ink.lightest};\n border-radius: ${radius.base};\n padding: ${sizes.xs};\n\n ${Text} {\n padding-left: ${sizes.xs};\n }\n`;\n"],"names":[],"mappings":"~~;;;;;;;~~MAOa,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qFAAA;AAOnC,MAAM,sBAAsB,GAAG,MAAM,CAAC,KAAK,CAAC,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EAC9B,MAAM,CAAC,IAAI,CAAA,SAAA,EACjB,KAAK,CAAC,EAAE,CAEjB,CAAA,EAAA,IAAI,CACY,cAAA,EAAA,KAAK,CAAC,EAAE;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../../../src/components/UploadFile/components/UploadedFile/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Text } from '../../../Text';\nimport { colors } from '../../../../theme/modules/colors';\nimport { radius } from '../../../../theme/modules/radius';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Stack } from '../../../Stack';\n\nexport const SingleLineText = styled(Text)`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n overflow: hidden;\n`;\n\nexport const UploadedFilesListStack = styled(Stack)`\n border: 1px solid ${colors.neutral.ink.lightest};\n border-radius: ${radius.base};\n padding: ${sizes.xs};\n\n ${Text} {\n padding-left: ${sizes.xs};\n }\n`;\n"],"names":[],"mappings":";;;;;;;;MAOa,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qFAAA;AAOnC,MAAM,sBAAsB,GAAG,MAAM,CAAC,KAAK,CAAC,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EAC9B,MAAM,CAAC,IAAI,CAAA,SAAA,EACjB,KAAK,CAAC,EAAE,CAEjB,CAAA,EAAA,IAAI,CACY,cAAA,EAAA,KAAK,CAAC,EAAE;;;;"}

package/dist/components/VideoModal/VideoModal.cjs CHANGED Viewed

@@ -7,7 +7,7 @@ var useClickOutside = require('../../hooks/useClickOutside.cjs');
 require('../../hooks/useFocusVisible.cjs');
 require('uid/secure');
 require('lodash.throttle');
-var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
+var CrossIcon = require('../../icons/CrossIcon.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

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

	@@ -1 +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 '../../~~tempIcons~~/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;;;;"}
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;;;;"}

package/dist/components/VideoModal/VideoModal.js CHANGED Viewed

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

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

	@@ -1 +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 '../../~~tempIcons~~/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;;;;"}
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;;;;"}

package/dist/components/View/View.cjs CHANGED Viewed

@@ -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('../../tempIcons/CrossIcon.cjs');
-var EditIcon = require('../../tempIcons/EditIcon.cjs');
+var CrossIcon = require('../../icons/CrossIcon.cjs');
+var EditIcon = require('../../icons/EditIcon.cjs');
 var Text = require('../Text/Text.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

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

	@@ -1 +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 '../../~~tempIcons~~/CrossIcon';\nimport { EditIcon } from '../../~~tempIcons~~/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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"}
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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"}

package/dist/components/View/View.js CHANGED Viewed

@@ -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 '../../tempIcons/CrossIcon.js';
-import { EditIcon } from '../../tempIcons/EditIcon.js';
+import { CrossIcon } from '../../icons/CrossIcon.js';
+import { EditIcon } from '../../icons/EditIcon.js';
 import { Text } from '../Text/Text.js';
 const generateClassNames = (prefix) => ({

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

	@@ -1 +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 '../../~~tempIcons~~/CrossIcon';\nimport { EditIcon } from '../../~~tempIcons~~/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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"}
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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"}

package/dist/components/ViewTab/styled.cjs CHANGED Viewed

@@ -5,8 +5,8 @@ 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('../../tempIcons/ThreeDotsIcon.cjs');
-var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
+var ThreeDotsIcon = require('../../icons/ThreeDotsIcon.cjs');
+var CrossIcon = require('../../icons/CrossIcon.cjs');
 var styled$1 = require('../Button/components/styled.cjs');
 var index = require('../../theme/index.cjs');

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

	@@ -1 +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 '../../~~tempIcons~~/ThreeDotsIcon';\nimport { CrossIcon } from '../../~~tempIcons~~/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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"}
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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"}

package/dist/components/ViewTab/styled.js CHANGED Viewed

@@ -3,8 +3,8 @@ 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 '../../tempIcons/ThreeDotsIcon.js';
-import { CrossIcon } from '../../tempIcons/CrossIcon.js';
+import { ThreeDotsIcon } from '../../icons/ThreeDotsIcon.js';
+import { CrossIcon } from '../../icons/CrossIcon.js';
 import { FlatButton } from '../Button/components/styled.js';
 import { theme } from '../../theme/index.js';

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

	@@ -1 +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 '../../~~tempIcons~~/ThreeDotsIcon';\nimport { CrossIcon } from '../../~~tempIcons~~/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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"}
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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"}

package/dist/components/ViewsContainer/styled.cjs CHANGED Viewed

@@ -2,11 +2,12 @@
 var styled = require('styled-components');
 var Stack = require('../Stack/Stack.cjs');
+require('../Stack/types.cjs');
 var Button = require('../Button/Button.cjs');
-var LeftArrowIcon = require('../../tempIcons/LeftArrowIcon.cjs');
-var RightArrowIcon = require('../../tempIcons/RightArrowIcon.cjs');
+var LeftArrowIcon = require('../../icons/LeftArrowIcon.cjs');
+var RightArrowIcon = require('../../icons/RightArrowIcon.cjs');
 var colors = require('../../theme/modules/colors.cjs');
-var ThreeDotsIcon = require('../../tempIcons/ThreeDotsIcon.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 }; }

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

	@@ -1 +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 '../../~~tempIcons~~/LeftArrowIcon';\nimport { RightArrowIcon } from '../../~~tempIcons~~/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../~~tempIcons~~/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,cAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAGD,uBAAM,CAACC,WAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,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,cAAA,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,aAAA,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;;;;;;;;;;;;"}
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,cAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAGD,uBAAM,CAACC,WAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,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,cAAA,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,aAAA,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const ViewsWrapper: import("styled-components").StyledComponent<"div", any, import("../Stack/types").StackProps, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, import("../Stack/types").StackProps, never>;
+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>;
@@ -31,4 +31,4 @@ export declare const StyledRightButton: import("styled-components").StyledCompon
     loading?: boolean | undefined;
     contentStyles?: import("react").CSSProperties | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare const StyledInputGroup: import("styled-components").StyledComponent<"div", any, import("../types").InputProps, never>;
+export declare const StyledInputGroup: import("styled-components").StyledComponent<"div", any, import("react").HTMLAttributes<HTMLDivElement> & import("../types").FormComponentProps, never>;

package/dist/components/ViewsContainer/styled.js CHANGED Viewed

@@ -1,10 +1,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 '../../tempIcons/LeftArrowIcon.js';
-import { RightArrowIcon } from '../../tempIcons/RightArrowIcon.js';
+import { LeftArrowIcon } from '../../icons/LeftArrowIcon.js';
+import { RightArrowIcon } from '../../icons/RightArrowIcon.js';
 import { colors } from '../../theme/modules/colors.js';
-import { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon.js';
+import { ThreeDotsIcon } from '../../icons/ThreeDotsIcon.js';
 import { InputGroup } from '../InputGroup/index.js';
 const ViewsWrapper = styled(Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--12onh8s" }) `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 CHANGED Viewed

	@@ -1 +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 '../../~~tempIcons~~/LeftArrowIcon';\nimport { RightArrowIcon } from '../../~~tempIcons~~/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../~~tempIcons~~/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,cAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,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,cAAA,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,aAAA,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;;;;"}
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,cAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,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,cAAA,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,aAAA,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/components/WeightInput/WeightInput.cjs CHANGED Viewed

@@ -2,34 +2,67 @@
 var React = require('react');
 var withLabels = require('../../hoc/withLabels/withLabels.cjs');
-var types = require('./types.cjs');
-var index = require('../InputGroup/index.cjs');
-var styled = require('./styled.cjs');
 var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
 var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
 var Stack = require('../Stack/Stack.cjs');
+require('../Stack/types.cjs');
+var index = require('../InputGroup/index.cjs');
 var InputAffix = require('../InputAffix/InputAffix.cjs');
+var index$1 = require('../TextField/index.cjs');
+var types = require('./types.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+const flexStyle = { flex: 1 };
 const blockInvalidChars = (e) => blockInvalidCharacters.blockInvalidCharacters(e, invalidCharactersNumeric.invalidCharsList);
 const WeightInput = withLabels.withLabels((props) => {
     const { size = 'base', hasError, disabled, className } = props;
     const compact = size === 'sm';
-    return (React__default.default.createElement(styled.Container, { className: className, role: "group", "aria-label": "Weight" },
-        React__default.default.createElement(styled.Row, null,
-            types.isWeightMetric(props) && (React__default.default.createElement(index.InputGroup, null,
-                React__default.default.createElement(styled.TextField, { name: "gram", type: "number", value: props.gram, "aria-label": "Grams", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangeGram, onKeyDown: blockInvalidChars }),
-                React__default.default.createElement(InputAffix.InputAffix, { compact: compact, hasError: hasError }, "g"))),
-            types.isWeightImperial(props) && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: 3 },
-                React__default.default.createElement(index.InputGroup, null,
-                    React__default.default.createElement(styled.TextField, { name: "pound", type: "number", value: props.pound, "aria-label": "Pounds", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangePound, onKeyDown: blockInvalidChars }),
-                    React__default.default.createElement(InputAffix.InputAffix, { compact: compact, hasError: hasError }, "lb")),
-                React__default.default.createElement(index.InputGroup, null,
-                    React__default.default.createElement(styled.TextField, { name: "ounce", type: "number", value: props.ounce, "aria-label": "Ounces", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangeOunce, onKeyDown: blockInvalidChars }),
-                    React__default.default.createElement(InputAffix.InputAffix, { compact: compact, hasError: hasError }, "oz")))))));
+    const childProps = {
+        stack: {
+            direction: 'horizontal',
+            alignY: 'center',
+            spacing: 'base',
+        },
+        inputGroup: {
+            style: flexStyle,
+        },
+        textField: {
+            type: 'number',
+            placeholder: '0',
+            min: '0',
+            step: 'any',
+            size,
+            disabled,
+            hasError,
+            onKeyDown: blockInvalidChars,
+            style: flexStyle,
+        },
+        inputAffix: {
+            compact,
+            hasError,
+        },
+    };
+    // If the weight is metric, render grams
+    if (types.isWeightMetric(props)) {
+        return (React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, className: className },
+            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "gram", value: props.gram, "aria-label": "Grams", onChange: props.handleChangeGram }),
+            React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "g")));
+    }
+    // If the weight is imperial, render pounds and ounces
+    if (types.isWeightImperial(props)) {
+        return (React__default.default.createElement(Stack.Stack, { ...childProps.stack, className: className },
+            React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup },
+                React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
+                React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "lb")),
+            React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup },
+                React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "ounce", value: props.ounce, "aria-label": "Ounces", onChange: props.handleChangeOunce }),
+                React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "oz"))));
+    }
+    // If neither metric nor imperial, return null or handle as needed
+    return null;
 });
 WeightInput.displayName = 'WeightInput';
 WeightInput.defaultProps = {

package/dist/components/WeightInput/WeightInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\nimport { withLabels } from '../../hoc';\n\nimport { ~~WeightProps,~~ ~~isWeightImperial, isWeightMetric~~ } from '~~./types~~';\nimport { ~~InputGroup~~ } from '~~../InputGroup~~';\n\nimport { ~~Container~~, ~~TextField,~~ ~~Row~~ } from '~~./styled~~';\nimport { ~~blockInvalidCharacters~~ } from '~~../../utils/blockInvalidCharacters~~';\nimport { ~~invalidCharsList~~ } from '~~../../utils/invalidCharactersNumeric~~';\nimport { ~~Stack~~ } from '../~~Stack~~';\nimport { ~~InputAffix~~ } from '~~../InputAffix~~';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n const { size = 'base', hasError, disabled, className } = props;\n\n const compact = size === 'sm';\n\n ~~return~~ (\n ~~<Container~~ ~~className=~~{~~className~~} ~~role=\"group~~\" ~~aria-label=\"Weight~~\~~">\~~n ~~<Row>\~~n {isWeightMetric(props) && (\n <InputGroup>\n <TextField\n name=\"gram\"\n ~~type=\"number\"\n~~ value={props.gram}\n aria-label=\"Grams\"\n ~~placeholder=\"0\"\n min=\"0\"\n step=\"any\"\n size={size}\n disabled={disabled}\n hasError={hasError}\n~~ onChange={props.handleChangeGram}\n ~~onKeyDown={blockInvalidChars}\n~~ />\n <InputAffix ~~compact=~~{~~compact~~} ~~hasError={hasError}>\n~~ g\n </InputAffix>\n </InputGroup>\n )}\n\n {isWeightImperial(props) && (\n <Stack ~~direction=\"horizontal\"~~ ~~alignY=\"center\" spacing~~={3}>\n <InputGroup>\n <TextField\n name=\"pound\"\n ~~type=\"number\"\n~~ value={props.pound}\n aria-label=\"Pounds\"\n ~~placeholder=\"0\"\n min=\"0\"\n step=\"any\"\n size={size}\n disabled={disabled}\n hasError={hasError}\n~~ onChange={props.handleChangePound}\n ~~onKeyDown={blockInvalidChars}\n~~ />\n <InputAffix ~~compact=~~{~~compact~~} ~~hasError={hasError}>\n~~ lb\n </InputAffix>\n </InputGroup>\n <InputGroup>\n <TextField\n name=\"ounce\"\n ~~type=\"number\"\n~~ value={props.ounce}\n aria-label=\"Ounces\"\n ~~placeholder=\"0\"\n min=\"0\"\n step=\"any\"\n size={size}\n disabled={disabled}\n hasError={hasError}\n~~ onChange={props.handleChangeOunce}\n ~~onKeyDown={blockInvalidChars}\n~~ />\n <InputAffix ~~compact=~~{~~compact~~} ~~hasError={hasError}>\n~~ oz\n </InputAffix>\n </InputGroup>\n </Stack>\n )}\n ~~</Row>\~~n ~~</Container>\~~n );\n});\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n weightUnit: 'lb',\n};\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","~~React~~","~~Container~~","~~Row","isWeightMetric","~~InputGroup","TextField","InputAffix","isWeightImperial","Stack"],"mappings":"~~;;;;;;;;;;;;;;;;AAYA~~,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAKA,6CAAsB,CAAC,CAAC,EAAEC,yCAAgB,CAAC;MAEpF,WAAW,GAAGC,qBAAU,CAAc,CAAC,KAAK,KAAI;AAC3D,IAAA,MAAM,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK;AAE9D,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;AAE7B,IAAA,~~QACEC~~,~~sBAAA~~,~~CAAA~~,~~aAAA~~,~~CAACC~~,~~gBAAS~~,~~EAAA~~,~~EAAC,~~SAAS,EAAE,~~SAAS~~,~~EAAE~~,~~IAAI~~,~~EAAC~~,~~OAAO~~,~~EAAA,~~YAAA,~~EAAY~~,~~QAAQ~~,~~EAAA~~;~~AAC/D~~,~~QAAAD~~,~~sBAAA~~,~~CAAA~~,~~aAAA~~,~~CAACE~~,~~UAAG~~,~~EAAA~~,~~IAAA~~;AACD,~~YAAAC~~,~~oBAAc~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~KACpBH~~,~~qCAACI~~,~~gBAAU~~,~~EAAA~~,~~IAAA~~;~~gBACTJ~~,~~sBAAC~~,~~CAAA~~,~~aAAA~~,~~CAAAK~~,~~gBAAS~~,~~IACR,~~IAAI,~~EAAC~~,~~MAAM~~,~~EACX,~~IAAI,~~EAAC~~,QAAQ,~~EACb~~,KAAK,EAAE,KAAK,CAAC,~~IAAI~~,EAAA,~~YAAA~~,~~EACN~~,~~OAAO~~,~~EAClB~~,~~WAAW~~,~~EAAC~~,~~GAAG~~,~~EACf~~,~~GAAG~~,~~EAAC~~,~~GAAG~~,~~EACP~~,~~IAAI~~,~~EAAC~~,~~KAAK~~,~~EACV~~,~~IAAI~~,~~EAAE~~,IAAI,~~EACV~~,~~QAAQ~~,EAAE,~~QAAQ~~,~~EAClB~~,~~QAAQ~~,~~EAAE~~,~~QAAQ~~,EAClB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,EAChC,~~SAAS,EAAE,iBAAiB,EAC5B,~~CAAA;~~gBACFL~~,sBAAC,CAAA,aAAA,~~CAAAM~~,qBAAU,~~EAAC~~,~~EAAA~~,~~OAAO~~,~~EAAE~~,~~OAAO~~,~~EAAE,QAAQ,EAAE,QAAQ,EAEnC,~~EAAA,GAAA,CAAA,~~CACF,CACd~~;~~AAEA~~,~~YAAAC~~,sBAAgB,CAAC,KAAK,CAAC,~~KACtBP~~,~~sBAAA~~,CAAA,aAAA,~~CAACQ~~,WAAK,~~EAAC~~,EAAA,~~SAAS~~,~~EAAC~~,~~YAAY~~,~~EAAC~~,~~MAAM~~,~~EAAC~~,~~QAAQ,EAAC,OAAO,~~EAAE,~~CAAC~~,EAAA;~~AACtD~~,~~gBAAAR~~,sBAAA,CAAA,aAAA,~~CAACI~~,gBAAU,EAAA,~~IAAA~~;~~oBACTJ~~,sBAAC,CAAA,aAAA,~~CAAAK~~,~~gBAAS~~,~~IACR~~,~~IAAI~~,~~EAAC~~,~~OAAO~~,~~EACZ~~,IAAI,EAAC,~~QAAQ~~,~~EACb~~,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,YAAA,EACP,QAAQ,EACnB,~~WAAW,EAAC,GAAG,EACf,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,~~QAAQ,EAAE,~~QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,~~KAAK,CAAC,iBAAiB,EACjC,~~SAAS,EAAE,iBAAiB,EAC5B,~~CAAA;~~oBACFL~~,~~sBAAC~~,CAAA,aAAA,~~CAAAM~~,qBAAU,~~EAAC~~,EAAA,~~OAAO~~,~~EAAE~~,~~OAAO~~,~~EAAE~~,~~QAAQ~~,~~EAAE,QAAQ,EAAA,EAAA,IAAA,CAEnC,CACF~~;AACb,~~gBAAAN~~,sBAAA,CAAA,aAAA,~~CAACI~~,gBAAU,EAAA,~~IAAA~~;~~oBACTJ~~,sBAAC,CAAA,aAAA,~~CAAAK~~,~~gBAAS~~,~~IACR~~,~~IAAI~~,~~EAAC~~,~~OAAO~~,~~EACZ~~,IAAI,EAAC,~~QAAQ~~,~~EACb~~,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,YAAA,EACP,QAAQ,EACnB,~~WAAW,EAAC,GAAG,EACf,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,~~QAAQ,EAAE,~~QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,~~KAAK,CAAC,iBAAiB,EACjC,~~SAAS,EAAE,iBAAiB,EAC5B,~~CAAA;~~AACF~~,~~oBAAAL~~,~~sBAAA,~~CAAA,aAAA,~~CAACM~~,qBAAU,~~EAAC~~,~~EAAA~~,~~OAAO~~,~~EAAE~~,~~OAAO~~,~~EAAE,QAAQ,EAAE,QAAQ,~~EAAA,~~EAAA,~~IAAA,~~CAEnC~~,~~CACF~~,CACP,~~CACT~~,~~CACG~~,~~CACI~~;~~AAEhB~~,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,WAAW,CAAC,YAAY,GAAG;AACzB,IAAA,UAAU,EAAE,IAAI;CACjB;;;;"}
1	+ {"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nimport { Stack, StackProps } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n stack: Partial<StackProps>;\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst flexStyle = { flex: 1 };\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n const { size = 'base', hasError, disabled, className } = props;\n\n const compact = size === 'sm';\n\n const childProps: ChildComponentProps = {\n stack: {\n direction: 'horizontal',\n alignY: 'center',\n spacing: 'base',\n },\n inputGroup: {\n style: flexStyle,\n },\n textField: {\n type: 'number',\n placeholder: '0',\n min: '0',\n step: 'any',\n size,\n disabled,\n hasError,\n onKeyDown: blockInvalidChars,\n style: flexStyle,\n },\n inputAffix: {\n compact,\n hasError,\n },\n };\n\n // If the weight is metric, render grams\n if (isWeightMetric(props)) {\n return (\n <InputGroup {...childProps.inputGroup} className={className}>\n <TextField\n {...childProps.textField}\n name=\"gram\"\n value={props.gram}\n aria-label=\"Grams\"\n onChange={props.handleChangeGram}\n />\n <InputAffix {...childProps.inputAffix}>g</InputAffix>\n </InputGroup>\n );\n }\n\n // If the weight is imperial, render pounds and ounces\n if (isWeightImperial(props)) {\n return (\n <Stack {...childProps.stack} className={className}>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"pound\"\n value={props.pound}\n aria-label=\"Pounds\"\n onChange={props.handleChangePound}\n />\n <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"ounce\"\n value={props.ounce}\n aria-label=\"Ounces\"\n onChange={props.handleChangeOunce}\n />\n <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n </InputGroup>\n </Stack>\n );\n }\n\n // If neither metric nor imperial, return null or handle as needed\n return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n weightUnit: 'lb',\n};\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","isWeightMetric","React","InputGroup","TextField","InputAffix","isWeightImperial","Stack"],"mappings":"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"}

package/dist/components/WeightInput/WeightInput.js CHANGED Viewed

@@ -1,29 +1,62 @@
 import React__default from 'react';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
-import { isWeightMetric, isWeightImperial } from './types.js';
-import { InputGroup } from '../InputGroup/index.js';
-import { Container, Row, TextField as StyledTextField } from './styled.js';
 import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
 import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
 import { Stack } from '../Stack/Stack.js';
+import '../Stack/types.js';
+import { InputGroup } from '../InputGroup/index.js';
 import { InputAffix } from '../InputAffix/InputAffix.js';
+import { TextField } from '../TextField/index.js';
+import { isWeightMetric, isWeightImperial } from './types.js';
+const flexStyle = { flex: 1 };
 const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
 const WeightInput = withLabels((props) => {
     const { size = 'base', hasError, disabled, className } = props;
     const compact = size === 'sm';
-    return (React__default.createElement(Container, { className: className, role: "group", "aria-label": "Weight" },
-        React__default.createElement(Row, null,
-            isWeightMetric(props) && (React__default.createElement(InputGroup, null,
-                React__default.createElement(StyledTextField, { name: "gram", type: "number", value: props.gram, "aria-label": "Grams", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangeGram, onKeyDown: blockInvalidChars }),
-                React__default.createElement(InputAffix, { compact: compact, hasError: hasError }, "g"))),
-            isWeightImperial(props) && (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: 3 },
-                React__default.createElement(InputGroup, null,
-                    React__default.createElement(StyledTextField, { name: "pound", type: "number", value: props.pound, "aria-label": "Pounds", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangePound, onKeyDown: blockInvalidChars }),
-                    React__default.createElement(InputAffix, { compact: compact, hasError: hasError }, "lb")),
-                React__default.createElement(InputGroup, null,
-                    React__default.createElement(StyledTextField, { name: "ounce", type: "number", value: props.ounce, "aria-label": "Ounces", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangeOunce, onKeyDown: blockInvalidChars }),
-                    React__default.createElement(InputAffix, { compact: compact, hasError: hasError }, "oz")))))));
+    const childProps = {
+        stack: {
+            direction: 'horizontal',
+            alignY: 'center',
+            spacing: 'base',
+        },
+        inputGroup: {
+            style: flexStyle,
+        },
+        textField: {
+            type: 'number',
+            placeholder: '0',
+            min: '0',
+            step: 'any',
+            size,
+            disabled,
+            hasError,
+            onKeyDown: blockInvalidChars,
+            style: flexStyle,
+        },
+        inputAffix: {
+            compact,
+            hasError,
+        },
+    };
+    // If the weight is metric, render grams
+    if (isWeightMetric(props)) {
+        return (React__default.createElement(InputGroup, { ...childProps.inputGroup, className: className },
+            React__default.createElement(TextField, { ...childProps.textField, name: "gram", value: props.gram, "aria-label": "Grams", onChange: props.handleChangeGram }),
+            React__default.createElement(InputAffix, { ...childProps.inputAffix }, "g")));
+    }
+    // If the weight is imperial, render pounds and ounces
+    if (isWeightImperial(props)) {
+        return (React__default.createElement(Stack, { ...childProps.stack, className: className },
+            React__default.createElement(InputGroup, { ...childProps.inputGroup },
+                React__default.createElement(TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
+                React__default.createElement(InputAffix, { ...childProps.inputAffix }, "lb")),
+            React__default.createElement(InputGroup, { ...childProps.inputGroup },
+                React__default.createElement(TextField, { ...childProps.textField, name: "ounce", value: props.ounce, "aria-label": "Ounces", onChange: props.handleChangeOunce }),
+                React__default.createElement(InputAffix, { ...childProps.inputAffix }, "oz"))));
+    }
+    // If neither metric nor imperial, return null or handle as needed
+    return null;
 });
 WeightInput.displayName = 'WeightInput';
 WeightInput.defaultProps = {