npm - @veeqo/ui - Versions diffs - 14.9.0-beta-2 → 14.9.0 - Mend

@veeqo/ui 14.9.0-beta-2 → 14.9.0

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 (135) hide show

package/dist/components/UploadFile/styled.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/UploadFile/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from '../../theme/modules/colors';\nimport { radius } from '../../theme/modules/radius';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const DropZoneContainer = styled.div<{\n hasError: boolean;\n isDragOver?: boolean;\n}>`\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ${sizes.base};\n border-radius: ${radius.base};\n\n input[type='file'] {\n position: absolute;\n opacity: 0;\n width: 1px;\n height: 1px;\n cursor: pointer;\n }\n\n cursor: pointer;\n\n border: 2px dashed ${colors.neutral.ink.lightest};\n background-color: ${colors.neutral.grey.lightest};\n\n :hover {\n border: 2px dashed ${colors.secondary.blue.base};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n }\n :active,\n :focus-within {\n border: 2px dashed ${colors.secondary.blue.base};\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n }\n\n ${({ isDragOver }) =>\n isDragOver &&\n `\n border: 2px dashed ${colors.secondary.blue.base};\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n `}\n\n ${({ hasError, isDragOver }) =>\n hasError &&\n `\n border: 2px dashed ${colors.secondary.red.base};\n\n :hover {\n border: 2px dashed ${colors.secondary.red.base};\n background-color: ${colors.secondary.red.lightest};\n\n svg {\n color: ${colors.secondary.red.base};\n }\n }\n\n :active, :focus-within {\n border: 2px dashed ${colors.secondary.red.base};\n box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n background-color: ${colors.secondary.red.lightest};\n\n svg {\n color: ${colors.secondary.red.base};\n }\n }\n\n ${\n isDragOver\n ? `\n border: 2px dashed ${colors.secondary.red.base};\n box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n background-color: ${colors.secondary.red.lightest};\n `\n : ''\n }\n `}\n\n\n &:has(input:disabled) {\n cursor: not-allowed;\n box-shadow: none;\n background-color: ${colors.neutral.grey.light};\n border-color: ${colors.neutral.ink.lightest};\n color: ${colors.neutral.ink.light};\n\n svg {\n color: ${colors.neutral.ink.lightest};\n }\n }\n`;\n"],"names":["styled","sizes","radius","colors"],"mappings":";;;;;;;;;;;MAKa,iBAAiB,GAAGA,uBAAM,CAAC,GAAG,sJAQ9BC,WAAK,CAAC,IAAI,CAAA,eAAA,EACJC,aAAM,CAAC,IAAI,CAAA,sHAAA,EAYPC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAC5BA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,6BAGzBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EAC3BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,cAGvCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2CAAA,EAKhBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAC/BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,WAAA,EAGvCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAIrC,CAAC,EAAE,UAAU,EAAE,KACf,UAAU;AACV,IAAA;AACqB,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;AACvB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA;AAC/B,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA;;;AAGvC,aAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEtC,CAAA,CAAA,EAEC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KACzB,QAAQ;AACR,IAAA;AACqB,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGvB,yBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC1B,wBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;;AAKf,yBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,4BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,wBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;MAKpC;AACE,UAAE;AACe,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;AAClD,EAAA;AACK,UAAE,EACN;AACD,EAAA,CAAA,CAAA,2EAAA,EAMqBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAC7BA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClCA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,WAAA,EAGtBA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;;;;"}

package/dist/components/UploadFile/styled.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare const DropZoneContainer: import("styled-components").StyledComponent<"div", any, {
+    hasError: boolean;
+    isDragOver?: boolean | undefined;
+}, never>;

package/dist/components/UploadFile/styled.js ADDED Viewed

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import { colors } from '../../theme/modules/colors.js';
+import { radius } from '../../theme/modules/radius.js';
+import { sizes } from '../../theme/modules/sizes.js';
+const DropZoneContainer = styled.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.base};border-radius:${radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.neutral.ink.lightest};background-color:${colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};svg{color:${colors.secondary.blue.base};}}:active,:focus-within{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};svg{color:${colors.secondary.blue.base};}}${({ isDragOver }) => isDragOver &&
+    `
+    border: 2px dashed ${colors.secondary.blue.base};
+    box-shadow: 0 0 0 4px ${colors.secondary.blue.light};
+    background-color: ${colors.secondary.blue.lightest};
+    svg {
+      color: ${colors.secondary.blue.base};
+    }
+  `} ${({ hasError, isDragOver }) => hasError &&
+    `
+    border: 2px dashed ${colors.secondary.red.base};
+    :hover {
+      border: 2px dashed ${colors.secondary.red.base};
+      background-color: ${colors.secondary.red.lightest};
+      svg {
+        color: ${colors.secondary.red.base};
+      }
+    }
+    :active, :focus-within {
+      border: 2px dashed ${colors.secondary.red.base};
+      box-shadow: 0 0 0 4px ${colors.secondary.red.light};
+      background-color: ${colors.secondary.red.lightest};
+      svg {
+        color: ${colors.secondary.red.base};
+      }
+    }
+    ${isDragOver
+        ? `
+    border: 2px dashed ${colors.secondary.red.base};
+    box-shadow: 0 0 0 4px ${colors.secondary.red.light};
+    background-color: ${colors.secondary.red.lightest};
+  `
+        : ''}
+  `} &:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.neutral.grey.light};border-color:${colors.neutral.ink.lightest};color:${colors.neutral.ink.light};svg{color:${colors.neutral.ink.lightest};}}`;
+export { DropZoneContainer };
+//# sourceMappingURL=styled.js.map

package/dist/components/UploadFile/styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styled.js","sources":["../../../src/components/UploadFile/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from '../../theme/modules/colors';\nimport { radius } from '../../theme/modules/radius';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const DropZoneContainer = styled.div<{\n hasError: boolean;\n isDragOver?: boolean;\n}>`\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ${sizes.base};\n border-radius: ${radius.base};\n\n input[type='file'] {\n position: absolute;\n opacity: 0;\n width: 1px;\n height: 1px;\n cursor: pointer;\n }\n\n cursor: pointer;\n\n border: 2px dashed ${colors.neutral.ink.lightest};\n background-color: ${colors.neutral.grey.lightest};\n\n :hover {\n border: 2px dashed ${colors.secondary.blue.base};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n }\n :active,\n :focus-within {\n border: 2px dashed ${colors.secondary.blue.base};\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n }\n\n ${({ isDragOver }) =>\n isDragOver &&\n `\n border: 2px dashed ${colors.secondary.blue.base};\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n `}\n\n ${({ hasError, isDragOver }) =>\n hasError &&\n `\n border: 2px dashed ${colors.secondary.red.base};\n\n :hover {\n border: 2px dashed ${colors.secondary.red.base};\n background-color: ${colors.secondary.red.lightest};\n\n svg {\n color: ${colors.secondary.red.base};\n }\n }\n\n :active, :focus-within {\n border: 2px dashed ${colors.secondary.red.base};\n box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n background-color: ${colors.secondary.red.lightest};\n\n svg {\n color: ${colors.secondary.red.base};\n }\n }\n\n ${\n isDragOver\n ? `\n border: 2px dashed ${colors.secondary.red.base};\n box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n background-color: ${colors.secondary.red.lightest};\n `\n : ''\n }\n `}\n\n\n &:has(input:disabled) {\n cursor: not-allowed;\n box-shadow: none;\n background-color: ${colors.neutral.grey.light};\n border-color: ${colors.neutral.ink.lightest};\n color: ${colors.neutral.ink.light};\n\n svg {\n color: ${colors.neutral.ink.lightest};\n }\n }\n`;\n"],"names":[],"mappings":";;;;;MAKa,iBAAiB,GAAG,MAAM,CAAC,GAAG,sJAQ9B,KAAK,CAAC,IAAI,CAAA,eAAA,EACJ,MAAM,CAAC,IAAI,CAAA,sHAAA,EAYP,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAC5B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,6BAGzB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,cAGvC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2CAAA,EAKhB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAC/B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,WAAA,EAGvC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAIrC,CAAC,EAAE,UAAU,EAAE,KACf,UAAU;AACV,IAAA;AACqB,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;AACvB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA;AAC/B,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA;;;AAGvC,aAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEtC,CAAA,CAAA,EAEC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KACzB,QAAQ;AACR,IAAA;AACqB,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGvB,yBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC1B,wBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;;AAKf,yBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,4BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,wBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;MAKpC;AACE,UAAE;AACe,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;AAClD,EAAA;AACK,UAAE,EACN;AACD,EAAA,CAAA,CAAA,2EAAA,EAMqB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAC7B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,WAAA,EAGtB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;;;;"}

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

@@ -5,15 +5,13 @@ require('../../hooks/useFocusVisible.cjs');
 var useHover = require('../../hooks/useHover.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-var assignCssVars = require('../../utils/assignCssVars.cjs');
 require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
 var types = require('./types.cjs');
 var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var EditIcon = require('../../icons/design-system/components/EditIcon.cjs');
+var styled = require('./styled.cjs');
 var Text = require('../Text/Text.cjs');
-var View_module = require('./View.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -27,14 +25,6 @@ const generateClassNames = (prefix) => ({
     active: prefix ? `${prefix}-active` : undefined,
     counter: prefix ? `${prefix}-counter` : undefined,
 });
-const IconStyling = {
-    style: {
-        marginLeft: sizes.sizes.xs,
-        padding: sizes.sizes.xs,
-        height: sizes.sizes.base,
-        width: sizes.sizes.base,
-    },
-};
 /**
  *
  * @deprecated
@@ -60,32 +50,14 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.colo
     const isDraft = type === types.ViewTypes.draft;
     const isSaved = type === types.ViewTypes.saved;
     const fill = active ? colors.colors.neutral.ink.dark : colors.colors.neutral.ink.base;
-    const contourVars = assignCssVars.assignCssVars({
-        colourPaletteBase: colourPalette.base,
-        colourPaletteLightest: colourPalette.lightest,
-        customTextColour,
-    });
-    const textColor = customTextColour !== null && customTextColour !== void 0 ? customTextColour : colors.colors.neutral.ink.dark;
-    const isCounterActive = active || isHovered;
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
-            View_module.container,
-            classNames === null || classNames === void 0 ? void 0 : classNames.container,
-            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
-            active ? e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active : undefined,
-        ]), onClick: handleClick },
-        React__default.default.createElement("div", { className: buildClassnames.buildClassnames([View_module.contour, active ? View_module.active : undefined]), style: contourVars, onMouseEnter: handleEnter, onMouseLeave: handleLeave },
-            iconSlot && React__default.default.createElement("div", { className: View_module.customIconWrapper }, iconSlot),
-            React__default.default.createElement(Text.Text, { variant: "bodyBold", style: { color: textColor } }, name),
-            count && (React__default.default.createElement(Text.Text, { variant: "subheadingSmall", className: buildClassnames.buildClassnames([
-                    View_module.counterContainer,
-                    isCounterActive ? View_module.counterActive : undefined,
-                ]), style: {
-                    ...contourVars,
-                    ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),
-                } },
-                React__default.default.createElement("span", { className: buildClassnames.buildClassnames([View_module.counterText, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter]), style: isCounterActive ? { color: '#fff' } : undefined }, count))),
-            isDraft && (React__default.default.createElement(CrossIcon.ReactComponent, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
-            isSaved && active && (React__default.default.createElement(EditIcon.ReactComponent, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
+    return (React__default.default.createElement(styled.Container, { className: `${buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container])} ${(active && (e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active)) || ''}`, onClick: handleClick },
+        React__default.default.createElement(styled.Contour, { "$active": active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
+            iconSlot && React__default.default.createElement(styled.CustomIconWrapper, null, iconSlot),
+            React__default.default.createElement(Text.Text, { variant: "bodyBold" }, name),
+            count && (React__default.default.createElement(styled.CounterContainer, { "$active": active || isHovered, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
+                React__default.default.createElement(styled.CounterText, { className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
+            isDraft && (React__default.default.createElement(CrossIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
+            isSaved && active && (React__default.default.createElement(EditIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
 };
 exports.View = View;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback, ~~CSSProperties~~ } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\~~nimport { sizes } from '../../theme/modules/sizes';\~~n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { ~~assignCssVars } from '../../utils/assignCssVars';\nimport {~~ Text } from '~~../Text';\nimport styles from '~~./~~View.module.scss~~';\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\~~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\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 const contourVars = assignCssVars({\n colourPaletteBase: colourPalette.base,\n colourPaletteLightest: colourPalette.lightest,\n customTextColour,\n });\n\n const textColor = customTextColour ?? colors.neutral.ink.dark;\n const isCounterActive = active \|\| isHovered;\n\n return (\n <~~div~~\n className={buildClassnames([~~\n styles.container,\n~~ classNames?.container~~,\n~~ e2eClassNames?.container,\n active ? e2eClassNames?.active : ~~undefined,\~~n ])}\n onClick={handleClick}\n >\n <~~div~~\n ~~className~~={~~buildClassnames([styles.contour,~~ active ~~? styles.active : undefined])~~}\n ~~style~~={~~contourVars~~}\n ~~onMouseEnter~~={~~handleEnter~~}\n ~~onMouseLeave~~={~~handleLeave~~}\n >\n {iconSlot && <~~div className={styles.customIconWrapper}~~>{iconSlot}</~~div~~>}\n <Text variant=\"bodyBold\" ~~style={{ color: textColor }}~~>{name}</Text>\n {count && (\n <~~Text~~\n ~~variant=\"subheadingSmall\"\n className~~={~~buildClassnames([\n styles.counterContainer,\n isCounterActive~~ ? ~~styles.counterActive : undefined,\n ])~~}\n ~~style~~={~~{\n ...contourVars,\n ...(isCounterActive ? { backgroundColor:~~ colourPalette~~.base~~ } ~~: undefined),\~~n }}\n >\n <~~span\n~~ className={~~buildClassnames([styles.counterText,~~ e2eClassNames?.counter])}~~\n style={isCounterActive~~ ~~? { color: '#fff' } : undefined}~~\n >\n {count}\n </~~span~~>\n </~~Text~~>\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 </~~div~~>\n </~~div~~>\n );\n};\n"],"names":["~~sizes","~~colors","useHover","useCallback","ViewTypes","~~assignCssVars~~","~~React~~","buildClassnames","~~styles~~","Text","CrossIcon","EditIcon"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;AAuBA~~,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,MAAM,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,GAAG,SAAS;IACjD,IAAI,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,GAAG,SAAS;IAC3C,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,GAAG,SAAS;IACrD,MAAM,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,GAAG,SAAS;AAClD,CAAA,CAAC;AAEF~~,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEA,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;CACnB;AAED~~;;;;;;AAMG;AACI,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,aAAa,~~GAAGC~~,aAAM,CAAC,SAAS,CAAC,IAAI,EACrC,gBAAgB,EAChB,KAAK,EACL,MAAM,GAAG,KAAK,EACd,OAAO,EACP,QAAQ,EACR,MAAM,EACN,YAAY,GACF,KAAI;AACd,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,GAAGC,iBAAQ,EAAE;AAExD,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAAC,MAAM,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;AACjE,IAAA,MAAM,YAAY,GAAGA,iBAAW,CAC9B,CAAC,KAAK,KAAI;QACR,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,QAAQ;YAAE,QAAQ,CAAC,EAAE,CAAC;AAC5B,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,EAAE,CAAC,CACf;AACD,IAAA,MAAM,UAAU,GAAGA,iBAAW,CAC5B,CAAC,KAAK,KAAI;QACR,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,MAAM;YAAE,MAAM,CAAC,EAAE,CAAC;AACxB,IAAA,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,KAAKC,eAAS,CAAC,KAAK;AACxC,IAAA,MAAM,OAAO,GAAG,IAAI,KAAKA,eAAS,CAAC,KAAK;IACxC,MAAM,IAAI,GAAG,MAAM,GAAGH,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAGA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IAEvE,~~MAAM~~,~~WAAW~~,~~GAAGI~~,~~2BAAa~~,~~CAAC;QAChC~~,~~iBAAiB~~,EAAE,aAAa,CAAC,IAAI;QACrC,qBAAqB,EAAE,aAAa,CAAC,QAAQ;QAC7C,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAhB,gBAAgB,GAAIJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAC7D,IAAA,MAAM,eAAe,GAAG,MAAM,IAAI,SAAS;AAE3C,IAAA,QACEK,sBAAA,CAAA,~~aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC~~,+BAAe,CAAC~~;AACzB~~,~~YAAAC,WAAM,~~CAAC,~~SAAS;AAChB,YAAA,~~UAAU,KAAA,IAAA,IAAV,UAAU,~~KAAA~~,~~MAAA,GAAA,MAAA,GAAV,~~UAAU,CAAE,SAAS~~;AACrB~~,~~YAAA~~,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS~~;AACxB~~,~~YAAA~~,~~MAAM~~,~~GAAG~~,~~aAAa~~,~~KAAA~~,~~IAAA~~,~~IAAb~~,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,MAAM,~~GAAG~~,~~SAAS;SAC3C~~,~~CAAC~~,EACF,OAAO,EAAE,WAAW,EAAA;AAEpB,QAAAF,sBAAA,CAAA,aAAA,~~CAAA~~,~~KAAA~~,EAAA,~~EACE~~,~~SAAS~~,~~EAAEC,+BAAe~~,~~CAAC,CAACC,WAAM,CAAC,OAAO,EAAE,~~MAAM,~~GAAGA~~,~~WAAM~~,~~CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,EAChF,KAAK,~~EAAE,WAAW,~~EAClB~~,YAAY,EAAE,WAAW,~~EACzB~~,~~YAAY~~,~~EAAE~~,~~WAAW~~,EAAA;~~YAExB~~,QAAQ,~~IAAIF~~,~~8CAAK~~,~~SAAS~~,~~EAAEE~~,~~WAAM~~,~~CAAC~~,~~iBAAiB,~~EAAA,~~EAAG~~,QAAQ,~~CAAO~~;~~AACvE~~,~~YAAAF~~,sBAAA,CAAA,aAAA,~~CAACG~~,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,~~EAAC~~,~~KAAK,~~EAAE,~~EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,EAAG,~~IAAI,CAAQ;~~AAClE~~,~~YAAA,~~KAAK,~~KACJH~~,sBAAA,CAAA,aAAA,~~CAACG~~,~~SAAI~~,EAAA,~~EACH~~,~~OAAO~~,~~EAAC~~,~~iBAAiB~~,~~EACzB~~,SAAS,~~EAAEF,+BAAe~~,~~CAAC;AACzB~~,~~oBAAAC~~,~~WAAM,CAAC,gBAAgB;oBACvB,eAAe,GAAGA,WAAM,CAAC,~~aAAa,~~GAAG~~,~~SAAS;iBACnD~~,~~CAAC~~,~~EACF~~,~~KAAK,EAAE;AACL,oBAAA,GAAG,WAAW;AACd,oBAAA,IAAI,eAAe,GAAG,EAAE,eAAe,EAAE,aAAa,CAAC,IAAI,EAAE,GAAG,SAAS,CAAC;AAC3E,iBAAA,~~EAAA;~~AAED~~,~~gBAAAF~~,sBAAA,CAAA,aAAA,~~CAAA~~,~~MAAA~~,EAAA,~~EACE~~,SAAS,~~EAAEC,+BAAe~~,~~CAAC~~,~~CAACC~~,~~WAAM~~,~~CAAC~~,~~WAAW,EAAE,~~aAAa,~~aAAb,aAAa,~~KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,OAAO,~~CAAC,CAAC,EACxE,KAAK,~~EAAE,~~eAAe~~,~~GAAG~~,~~EAAE~~,~~KAAK~~,~~EAAE,MAAM,EAAE,GAAG,SAAS,IAErD,~~KAAK,~~CACD~~,~~CACF~~,~~CACR~~;YACA,OAAO,~~KACNF~~,sBAAA,CAAA,aAAA,~~CAACI~~,wBAAS,EAAA,EAAA,~~GACJ~~,~~WAAW~~,EACf,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,MAAM,EAChC,OAAO,EAAE,YAAY,EAAA,CACrB,CACH;AACA,YAAA,OAAO,IAAI,MAAM,~~KAChBJ~~,sBAAA,CAAA,aAAA,~~CAACK~~,uBAAQ,EAAA,EAAA,~~GACH~~,~~WAAW~~,EACf,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI,EAC9B,OAAO,EAAE,UAAU,EAAA,CACnB,CACH,~~CACG~~,~~CACF~~;~~AAEV~~;;;;"}
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 { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport {\n Container,\n Contour,\n CounterContainer,\n CounterText,\n CustomIconWrapper,\n IconStyling,\n Text,\n} from './styled';\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

@@ -3,15 +3,13 @@ import '../../hooks/useFocusVisible.js';
 import { useHover } from '../../hooks/useHover.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import { assignCssVars } from '../../utils/assignCssVars.js';
 import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
-import { sizes } from '../../theme/modules/sizes.js';
 import { ViewTypes } from './types.js';
 import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import { ReactComponent as EditIcon } from '../../icons/design-system/components/EditIcon.js';
+import { Container, Contour, CustomIconWrapper, CounterContainer, CounterText, IconStyling } from './styled.js';
 import { Text } from '../Text/Text.js';
-import styles from './View.module.scss.js';
 const generateClassNames = (prefix) => ({
     delete: prefix ? `${prefix}-delete` : undefined,
@@ -21,14 +19,6 @@ const generateClassNames = (prefix) => ({
     active: prefix ? `${prefix}-active` : undefined,
     counter: prefix ? `${prefix}-counter` : undefined,
 });
-const IconStyling = {
-    style: {
-        marginLeft: sizes.xs,
-        padding: sizes.xs,
-        height: sizes.base,
-        width: sizes.base,
-    },
-};
 /**
  *
  * @deprecated
@@ -54,30 +44,12 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.seco
     const isDraft = type === ViewTypes.draft;
     const isSaved = type === ViewTypes.saved;
     const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;
-    const contourVars = assignCssVars({
-        colourPaletteBase: colourPalette.base,
-        colourPaletteLightest: colourPalette.lightest,
-        customTextColour,
-    });
-    const textColor = customTextColour !== null && customTextColour !== void 0 ? customTextColour : colors.neutral.ink.dark;
-    const isCounterActive = active || isHovered;
-    return (React__default.createElement("div", { className: buildClassnames([
-            styles.container,
-            classNames === null || classNames === void 0 ? void 0 : classNames.container,
-            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
-            active ? e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active : undefined,
-        ]), onClick: handleClick },
-        React__default.createElement("div", { className: buildClassnames([styles.contour, active ? styles.active : undefined]), style: contourVars, onMouseEnter: handleEnter, onMouseLeave: handleLeave },
-            iconSlot && React__default.createElement("div", { className: styles.customIconWrapper }, iconSlot),
-            React__default.createElement(Text, { variant: "bodyBold", style: { color: textColor } }, name),
-            count && (React__default.createElement(Text, { variant: "subheadingSmall", className: buildClassnames([
-                    styles.counterContainer,
-                    isCounterActive ? styles.counterActive : undefined,
-                ]), style: {
-                    ...contourVars,
-                    ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),
-                } },
-                React__default.createElement("span", { className: buildClassnames([styles.counterText, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter]), style: isCounterActive ? { color: '#fff' } : undefined }, count))),
+    return (React__default.createElement(Container, { className: `${buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container])} ${(active && (e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active)) || ''}`, onClick: handleClick },
+        React__default.createElement(Contour, { "$active": active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
+            iconSlot && React__default.createElement(CustomIconWrapper, null, iconSlot),
+            React__default.createElement(Text, { variant: "bodyBold" }, name),
+            count && (React__default.createElement(CounterContainer, { "$active": active || isHovered, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
+                React__default.createElement(CounterText, { className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
             isDraft && (React__default.createElement(CrossIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
             isSaved && active && (React__default.createElement(EditIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
 };

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, ~~CSSProperties~~ } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\~~nimport { sizes } from '../../theme/modules/sizes';\~~n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { ~~assignCssVars } from '../../utils/assignCssVars';\nimport {~~ Text } from '~~../Text';\nimport styles from '~~./~~View.module.scss~~';\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\~~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\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 const contourVars = assignCssVars({\n colourPaletteBase: colourPalette.base,\n colourPaletteLightest: colourPalette.lightest,\n customTextColour,\n });\n\n const textColor = customTextColour ?? colors.neutral.ink.dark;\n const isCounterActive = active \|\| isHovered;\n\n return (\n <~~div~~\n className={buildClassnames([~~\n styles.container,\n~~ classNames?.container~~,\n~~ e2eClassNames?.container,\n active ? e2eClassNames?.active : ~~undefined,\~~n ])}\n onClick={handleClick}\n >\n <~~div~~\n ~~className~~={~~buildClassnames([styles.contour,~~ active ~~? styles.active : undefined])~~}\n ~~style~~={~~contourVars~~}\n ~~onMouseEnter~~={~~handleEnter~~}\n ~~onMouseLeave~~={~~handleLeave~~}\n >\n {iconSlot && <~~div className={styles.customIconWrapper}~~>{iconSlot}</~~div~~>}\n <Text variant=\"bodyBold\" ~~style={{ color: textColor }}~~>{name}</Text>\n {count && (\n <~~Text~~\n ~~variant=\"subheadingSmall\"\n className~~={~~buildClassnames([\n styles.counterContainer,\n isCounterActive~~ ? ~~styles.counterActive : undefined,\n ])~~}\n ~~style~~={~~{\n ...contourVars,\n ...(isCounterActive ? { backgroundColor:~~ colourPalette~~.base~~ } ~~: undefined),\~~n }}\n >\n <~~span\n~~ className={~~buildClassnames([styles.counterText,~~ e2eClassNames?.counter])}~~\n style={isCounterActive~~ ~~? { color: '#fff' } : undefined}~~\n >\n {count}\n </~~span~~>\n </~~Text~~>\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 </~~div~~>\n </~~div~~>\n );\n};\n"],"names":["React"],"mappings":"~~;;;;;;;;;;;;;;;AAuBA~~,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,MAAM,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,GAAG,SAAS;IACjD,IAAI,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,GAAG,SAAS;IAC3C,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,GAAG,SAAS;IACrD,MAAM,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,GAAG,SAAS;AAClD,CAAA,CAAC;AAEF~~,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAE,KAAK,CAAC,EAAE;QACpB,OAAO,EAAE,KAAK,CAAC,EAAE;QACjB,MAAM,EAAE,KAAK,CAAC,IAAI;QAClB,KAAK,EAAE,KAAK,CAAC,IAAI;AACD,KAAA;CACnB;AAED~~;;;;;;AAMG;AACI,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,EACrC,gBAAgB,EAChB,KAAK,EACL,MAAM,GAAG,KAAK,EACd,OAAO,EACP,QAAQ,EACR,MAAM,EACN,YAAY,GACF,KAAI;AACd,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAE;AAExD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;AACjE,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAK,KAAI;QACR,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,QAAQ;YAAE,QAAQ,CAAC,EAAE,CAAC;AAC5B,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,EAAE,CAAC,CACf;AACD,IAAA,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAK,KAAI;QACR,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,MAAM;YAAE,MAAM,CAAC,EAAE,CAAC;AACxB,IAAA,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,CAAC,KAAK;AACxC,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,CAAC,KAAK;IACxC,MAAM,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IAEvE,~~MAAM~~,~~WAAW~~,~~GAAG,aAAa,CAAC;QAChC,iBAAiB,EAAE,aAAa,CAAC,IAAI;QACrC,qBAAqB,EAAE,aAAa,CAAC,QAAQ;QAC7C,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,~~SAAS,~~GAAG~~,~~gBAAgB~~,~~KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAC7D,IAAA,MAAM,eAAe,GAAG,MAAM,IAAI,~~SAAS~~;AAE3C~~,~~IAAA~~,~~QACEA,cAAA,~~CAAA,~~aAAA~~,~~CAAA,KAAA,EAAA,EACE,SAAS,EAAE,~~eAAe,CAAC~~;AACzB~~,~~YAAA,MAAM,~~CAAC,~~SAAS;AAChB,YAAA,~~UAAU,KAAA,IAAA,IAAV,UAAU,~~KAAA~~,~~MAAA,GAAA,MAAA,GAAV,~~UAAU,CAAE,SAAS~~;AACrB~~,~~YAAA~~,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS~~;AACxB~~,~~YAAA~~,~~MAAM~~,~~GAAG~~,~~aAAa~~,~~KAAA~~,~~IAAA~~,~~IAAb~~,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,MAAM,~~GAAG~~,~~SAAS;SAC3C~~,~~CAAC~~,EACF,OAAO,EAAE,WAAW,EAAA;AAEpB,QAAAA,cAAA,CAAA,aAAA,~~CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,~~CAAC,~~CAAC,MAAM,CAAC,~~OAAO,~~EAAE~~,~~MAAM~~,~~GAAG~~,~~MAAM~~,~~CAAC,~~MAAM,~~GAAG~~,~~SAAS~~,~~CAAC,CAAC,EAChF,KAAK,~~EAAE,WAAW,~~EAClB~~,YAAY,EAAE,WAAW,~~EACzB~~,~~YAAY~~,~~EAAE~~,~~WAAW~~,EAAA;~~YAExB~~,QAAQ,IAAIA,~~sCAAK~~,~~SAAS~~,~~EAAE~~,~~MAAM,~~CAAC,iBAAiB,EAAA,~~EAAG~~,QAAQ,~~CAAO~~;~~AACvE~~,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,~~EAAC~~,~~KAAK,~~EAAE,~~EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,EAAG,~~IAAI,CAAQ;~~AAClE~~,~~YAAA,~~KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,~~IAAI~~,EAAA,~~EACH~~,~~OAAO~~,~~EAAC~~,~~iBAAiB,EACzB,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,~~MAAM,~~CAAC~~,~~gBAAgB;oBACvB,eAAe,GAAG,MAAM,CAAC,aAAa,GAAG,~~SAAS~~;iBACnD~~,~~CAAC~~,~~EACF~~,~~KAAK~~,~~EAAE;AACL,oBAAA,GAAG,WAAW;AACd,oBAAA,IAAI,eAAe,GAAG,EAAE,eAAe,EAAE,~~aAAa,~~CAAC~~,~~IAAI~~,~~EAAE~~,~~GAAG~~,~~SAAS,CAAC;AAC3E,iBAAA,~~EAAA;~~AAED~~,gBAAAA,cAAA,CAAA,aAAA,~~CAAA~~,~~MAAA~~,EAAA,~~EACE~~,SAAS,EAAE,~~eAAe~~,~~CAAC~~,~~CAAC~~,~~MAAM~~,~~CAAC,WAAW,EAAE,~~aAAa,~~aAAb,aAAa,~~KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,OAAO,~~CAAC,CAAC,EACxE,KAAK,~~EAAE,~~eAAe~~,~~GAAG~~,~~EAAE~~,~~KAAK~~,~~EAAE,MAAM,EAAE,GAAG,SAAS,IAErD,~~KAAK,~~CACD~~,~~CACF~~,~~CACR~~;YACA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GACJ,WAAW,EACf,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,MAAM,EAChC,OAAO,EAAE,YAAY,EAAA,CACrB,CACH;AACA,YAAA,OAAO,IAAI,MAAM,KAChBA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,GACH,WAAW,EACf,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI,EAC9B,OAAO,EAAE,UAAU,EAAA,CACnB,CACH,~~CACG~~,~~CACF~~;~~AAEV~~;;;;"}
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 { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport {\n Container,\n Contour,\n CounterContainer,\n CounterText,\n CustomIconWrapper,\n IconStyling,\n Text,\n} from './styled';\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/View/styled.cjs ADDED Viewed

@@ -0,0 +1,53 @@
+'use strict';
+var styled = require('styled-components');
+var colors = require('../../theme/modules/colors.cjs');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var Text = require('../Text/Text.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1vyyfhh" }) `padding:14px 24px;`;
+const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
+const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ $colourPalette, $customTextColour }) => `
+    &:hover {
+      border: 1px solid ${$colourPalette.base};
+      background-color: ${$colourPalette.lightest};
+    }
+    span {
+      color: ${$customTextColour !== null && $customTextColour !== void 0 ? $customTextColour : colors.colors.neutral.ink.dark};
+    }
+  `} ${({ $active, $colourPalette }) => $active &&
+    `
+    background-color: ${$colourPalette.lightest};
+  `}`;
+const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--chq9kr" }) `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.base};
+    & > ${CounterText} {
+      color: #fff;
+    }
+  `}`;
+const IconStyling = {
+    style: {
+        marginLeft: sizes.sizes.xs,
+        padding: sizes.sizes.xs,
+        height: sizes.sizes.base,
+        width: sizes.sizes.base,
+    },
+};
+const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
+exports.Text = Text.Text;
+exports.Container = Container;
+exports.Contour = Contour;
+exports.CounterContainer = CounterContainer;
+exports.CounterText = CounterText;
+exports.CustomIconWrapper = CustomIconWrapper;
+exports.IconStyling = IconStyling;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@

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

package/dist/components/View/styled.d.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { CSSProperties } from 'react';
+import { ColourPalette } from '../../theme/modules/colors';
+import { Text } from '../Text';
+type RequiredPalette = {
+    $colourPalette: ColourPalette;
+};
+export type ContourProps = {
+    $active?: boolean;
+    $customTextColour?: string;
+} & RequiredPalette;
+export type CounterProps = {
+    $active?: boolean;
+    $customTextColour?: string;
+} & RequiredPalette;
+declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const CounterText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    as?: import("../Text").ValidTextTag | undefined;
+    muted?: boolean | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+declare const Contour: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
+    $active?: boolean | undefined;
+    $customTextColour?: string | undefined;
+} & RequiredPalette, never>;
+declare const CounterContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    as?: import("../Text").ValidTextTag | undefined;
+    muted?: boolean | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {
+    $active?: boolean | undefined;
+    $customTextColour?: string | undefined;
+} & RequiredPalette, never>;
+declare const IconStyling: {
+    style: CSSProperties;
+};
+export declare const CustomIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { Container, Contour, CounterContainer, CounterText, IconStyling, Text };

package/dist/components/View/styled.js ADDED Viewed

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { colors } from '../../theme/modules/colors.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { Text } from '../Text/Text.js';
+import { sizes } from '../../theme/modules/sizes.js';
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1vyyfhh" }) `padding:14px 24px;`;
+const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
+const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ $colourPalette, $customTextColour }) => `
+    &:hover {
+      border: 1px solid ${$colourPalette.base};
+      background-color: ${$colourPalette.lightest};
+    }
+    span {
+      color: ${$customTextColour !== null && $customTextColour !== void 0 ? $customTextColour : colors.neutral.ink.dark};
+    }
+  `} ${({ $active, $colourPalette }) => $active &&
+    `
+    background-color: ${$colourPalette.lightest};
+  `}`;
+const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--chq9kr" }) `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.base};
+    & > ${CounterText} {
+      color: #fff;
+    }
+  `}`;
+const IconStyling = {
+    style: {
+        marginLeft: sizes.xs,
+        padding: sizes.xs,
+        height: sizes.base,
+        width: sizes.base,
+    },
+};
+const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
+export { Container, Contour, CounterContainer, CounterText, CustomIconWrapper, IconStyling, Text };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@

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

package/dist/components/ViewTab/ViewTab.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface ClassNamesReturnPayload {
     active?: string;
     counter?: string;
 }
-export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "onClick" | "name" | "type"> & {
+export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "onClick" | "type" | "name"> & {
     colourPalette?: import("../../theme/modules/colors").ColourPalette | undefined;
     customTextColour?: string | undefined;
     active?: boolean | undefined;

package/dist/components/index.d.ts CHANGED Viewed

@@ -13,7 +13,7 @@ export { BaseContainer, type BaseContainerProps } from './BaseContainer';
 export { Breadcrumbs } from './Breadcrumbs';
 export { Button, type ButtonProps } from './Button';
 export { RangeCalendar, Calendar, useIsDateUnavailable } from './Calendars';
-export { Card, type CardElevation, type SurfaceProps } from './Card';
+export { Card } from './Card';
 export { CardHeader } from './CardHeader';
 export { Checkbox } from './Checkbox';
 export { Choice } from './Choice';
@@ -60,7 +60,7 @@ export { Tag } from './Tag';
 export { Text } from './Text';
 export type { TextProps, TextVariant, ValidTextTag } from './Text';
 export { TextField, type TextFieldType } from './TextField';
-export { ToastsLayout, type Notification } from './ToastsLayout';
+export { ToastsLayout, type Notification, type ToastsLayoutPropTypes } from './ToastsLayout';
 export { Toggle } from './Toggle';
 export { ToggleButton } from './ToggleButton';
 export { Tooltip } from './Tooltip';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "14.9.0-beta-2",
+  "version": "14.9.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",

package/dist/components/Accordion/Accordion.module.scss.cjs DELETED Viewed

@@ -1,9 +0,0 @@
-'use strict';
-var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-___$insertStyle("._details_1n935_1 summary {\n  list-style-type: none;\n}\n._details_1n935_1 summary::-webkit-details-marker {\n  display: none;\n}\n\n/* Default styled summary */\n._summary_1n935_9 {\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n}\n._summary_1n935_9:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._summary_1n935_9:active {\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n/* Unstyled summary: minimal, only focus ring */\n._unstyledSummary_1n935_27:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n/* Top row: icon + label + arrow */\n._top_1n935_33 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n}\n\n/* Left section: icon + text */\n._left_1n935_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n._left_1n935_41 svg {\n  margin-right: 12px;\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n  color: var(--glyph-color);\n}\n\n/* Right section: arrow */\n._right_1n935_54 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  flex-grow: 2;\n}\n\n/* Description text below summary */\n._description_1n935_63 {\n  margin-top: 8px;\n}\n\n/* Default content area */\n._content_1n935_68 {\n  margin-top: 4px;\n  /* Intentionally hardcoded: 50% transparent tint of blue.lightest with no theme token equivalent */\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n}\n\n/* Unstyled content: no additional styles, motion wrapper only */\n._unstyledContent_1n935_76 {\n  /* Motion wrapper for unstyled variant */\n}");
-var styles = {"details":"_details_1n935_1","summary":"_summary_1n935_9","unstyledSummary":"_unstyledSummary_1n935_27","top":"_top_1n935_33","left":"_left_1n935_41","right":"_right_1n935_54","description":"_description_1n935_63","content":"_content_1n935_68","unstyledContent":"_unstyledContent_1n935_76"};
-module.exports = styles;
-//# sourceMappingURL=Accordion.module.scss.cjs.map

package/dist/components/Accordion/Accordion.module.scss.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Accordion.module.scss.cjs","sources":["../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":[".details summary {\n list-style-type: none;\n\n &::-webkit-details-marker {\n display: none;\n }\n}\n\n/* Default styled summary */\n.summary {\n display: flex;\n flex-direction: column;\n padding: 12px;\n border-radius: 4px;\n user-select: none;\n cursor: pointer;\n\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:active {\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* Unstyled summary: minimal, only focus ring */\n.unstyledSummary {\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* Top row: icon + label + arrow */\n.top {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 16px;\n}\n\n/* Left section: icon + text */\n.left {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 12px;\n height: var(--sizes-base);\n width: var(--sizes-base);\n color: var(--glyph-color);\n }\n}\n\n/* Right section: arrow */\n.right {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-grow: 2;\n}\n\n/* Description text below summary */\n.description {\n margin-top: 8px;\n}\n\n/* Default content area */\n.content {\n margin-top: 4px;\n /* Intentionally hardcoded: 50% transparent tint of blue.lightest with no theme token equivalent */\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n}\n\n/* Unstyled content: no additional styles, motion wrapper only */\n.unstyledContent {\n /* Motion wrapper for unstyled variant */\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2wDAAA;;;;;"}

package/dist/components/Accordion/Accordion.module.scss.js DELETED Viewed

@@ -1,7 +0,0 @@
-import insertStyle from '../../_virtual/____insertStyle.js';
-insertStyle("._details_1n935_1 summary {\n  list-style-type: none;\n}\n._details_1n935_1 summary::-webkit-details-marker {\n  display: none;\n}\n\n/* Default styled summary */\n._summary_1n935_9 {\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n}\n._summary_1n935_9:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._summary_1n935_9:active {\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n/* Unstyled summary: minimal, only focus ring */\n._unstyledSummary_1n935_27:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n/* Top row: icon + label + arrow */\n._top_1n935_33 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n}\n\n/* Left section: icon + text */\n._left_1n935_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n._left_1n935_41 svg {\n  margin-right: 12px;\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n  color: var(--glyph-color);\n}\n\n/* Right section: arrow */\n._right_1n935_54 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  flex-grow: 2;\n}\n\n/* Description text below summary */\n._description_1n935_63 {\n  margin-top: 8px;\n}\n\n/* Default content area */\n._content_1n935_68 {\n  margin-top: 4px;\n  /* Intentionally hardcoded: 50% transparent tint of blue.lightest with no theme token equivalent */\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n}\n\n/* Unstyled content: no additional styles, motion wrapper only */\n._unstyledContent_1n935_76 {\n  /* Motion wrapper for unstyled variant */\n}");
-var styles = {"details":"_details_1n935_1","summary":"_summary_1n935_9","unstyledSummary":"_unstyledSummary_1n935_27","top":"_top_1n935_33","left":"_left_1n935_41","right":"_right_1n935_54","description":"_description_1n935_63","content":"_content_1n935_68","unstyledContent":"_unstyledContent_1n935_76"};
-export { styles as default };
-//# sourceMappingURL=Accordion.module.scss.js.map

package/dist/components/Accordion/Accordion.module.scss.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Accordion.module.scss.js","sources":["../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":[".details summary {\n list-style-type: none;\n\n &::-webkit-details-marker {\n display: none;\n }\n}\n\n/* Default styled summary */\n.summary {\n display: flex;\n flex-direction: column;\n padding: 12px;\n border-radius: 4px;\n user-select: none;\n cursor: pointer;\n\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:active {\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* Unstyled summary: minimal, only focus ring */\n.unstyledSummary {\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* Top row: icon + label + arrow */\n.top {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 16px;\n}\n\n/* Left section: icon + text */\n.left {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 12px;\n height: var(--sizes-base);\n width: var(--sizes-base);\n color: var(--glyph-color);\n }\n}\n\n/* Right section: arrow */\n.right {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-grow: 2;\n}\n\n/* Description text below summary */\n.description {\n margin-top: 8px;\n}\n\n/* Default content area */\n.content {\n margin-top: 4px;\n /* Intentionally hardcoded: 50% transparent tint of blue.lightest with no theme token equivalent */\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n}\n\n/* Unstyled content: no additional styles, motion wrapper only */\n.unstyledContent {\n /* Motion wrapper for unstyled variant */\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2wDAAA;;;;;"}

package/dist/components/Card/Card.module.scss.cjs DELETED Viewed

@@ -1,9 +0,0 @@
-'use strict';
-var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-___$insertStyle("._surface_1a6rc_1 {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n._elevation-0_1a6rc_12 {\n  box-shadow: none;\n}\n\n._elevation-1_1a6rc_16 {\n  box-shadow: var(--shadows-sm);\n}\n\n._elevation-2_1a6rc_20 {\n  box-shadow: var(--shadows-base);\n}\n\n._elevation-3_1a6rc_24 {\n  box-shadow: var(--shadows-md);\n}\n\n._elevation-4_1a6rc_28 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n._accent-info_1a6rc_33::after,\n._accent-success_1a6rc_34::after,\n._accent-error_1a6rc_35::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n._accent-info_1a6rc_33::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n._accent-success_1a6rc_34::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n._accent-error_1a6rc_35::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n._body_1a6rc_57 {\n  overflow-y: hidden;\n}\n._body_1a6rc_57:not(:first-child) > ._section_1a6rc_60:first-child {\n  margin-top: 0;\n}\n\n/* Section */\n._section_1a6rc_60 {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n}\n._section_1a6rc_60 + ._section_1a6rc_60 {\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  padding-top: var(--sizes-md);\n}\n\n/* FullBleed */\n._fullBleed_1a6rc_82 {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n._footer_1a6rc_88 {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}");
-var styles = {"surface":"_surface_1a6rc_1","elevation-0":"_elevation-0_1a6rc_12","elevation-1":"_elevation-1_1a6rc_16","elevation-2":"_elevation-2_1a6rc_20","elevation-3":"_elevation-3_1a6rc_24","elevation-4":"_elevation-4_1a6rc_28","accent-info":"_accent-info_1a6rc_33","accent-success":"_accent-success_1a6rc_34","accent-error":"_accent-error_1a6rc_35","body":"_body_1a6rc_57","section":"_section_1a6rc_60","fullBleed":"_fullBleed_1a6rc_82","footer":"_footer_1a6rc_88"};
-module.exports = styles;
-//# sourceMappingURL=Card.module.scss.cjs.map

package/dist/components/Card/Card.module.scss.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Card.module.scss.cjs","sources":["../../../src/components/Card/Card.module.scss"],"sourcesContent":[".surface {\n position: relative;\n width: 100%;\n background-color: white;\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n border-radius: var(--radius-md);\n overflow: hidden;\n box-sizing: border-box;\n}\n\n/* Elevation levels */\n.elevation-0 {\n box-shadow: none;\n}\n\n.elevation-1 {\n box-shadow: var(--shadows-sm);\n}\n\n.elevation-2 {\n box-shadow: var(--shadows-base);\n}\n\n.elevation-3 {\n box-shadow: var(--shadows-md);\n}\n\n.elevation-4 {\n box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n.accent-info::after,\n.accent-success::after,\n.accent-error::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: var(--sizes-xs);\n}\n\n.accent-info::after {\n background-color: var(--colors-secondary-blue-base);\n}\n\n.accent-success::after {\n background-color: var(--colors-secondary-green-base);\n}\n\n.accent-error::after {\n background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n.body {\n overflow-y: hidden;\n\n &:not(:first-child) > .section:first-child {\n margin-top: 0;\n }\n}\n\n/* Section */\n.section {\n padding-right: var(--sizes-md);\n padding-left: var(--sizes-md);\n margin-top: var(--sizes-md);\n margin-bottom: var(--sizes-md);\n\n font-family: var(--text-body-font-family);\n font-size: var(--text-body-font-size);\n font-weight: var(--text-body-font-weight);\n line-height: var(--text-body-line-height);\n color: var(--text-body-color);\n\n & + & {\n border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n padding-top: var(--sizes-md);\n }\n}\n\n/* FullBleed */\n.fullBleed {\n margin-left: calc(-1 * var(--sizes-md));\n margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n.footer {\n margin-top: var(--sizes-base);\n padding: var(--sizes-md);\n z-index: 2;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8iEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

package/dist/components/Card/Card.module.scss.js DELETED Viewed

@@ -1,7 +0,0 @@
-import insertStyle from '../../_virtual/____insertStyle.js';
-insertStyle("._surface_1a6rc_1 {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n._elevation-0_1a6rc_12 {\n  box-shadow: none;\n}\n\n._elevation-1_1a6rc_16 {\n  box-shadow: var(--shadows-sm);\n}\n\n._elevation-2_1a6rc_20 {\n  box-shadow: var(--shadows-base);\n}\n\n._elevation-3_1a6rc_24 {\n  box-shadow: var(--shadows-md);\n}\n\n._elevation-4_1a6rc_28 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n._accent-info_1a6rc_33::after,\n._accent-success_1a6rc_34::after,\n._accent-error_1a6rc_35::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n._accent-info_1a6rc_33::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n._accent-success_1a6rc_34::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n._accent-error_1a6rc_35::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n._body_1a6rc_57 {\n  overflow-y: hidden;\n}\n._body_1a6rc_57:not(:first-child) > ._section_1a6rc_60:first-child {\n  margin-top: 0;\n}\n\n/* Section */\n._section_1a6rc_60 {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n}\n._section_1a6rc_60 + ._section_1a6rc_60 {\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  padding-top: var(--sizes-md);\n}\n\n/* FullBleed */\n._fullBleed_1a6rc_82 {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n._footer_1a6rc_88 {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}");
-var styles = {"surface":"_surface_1a6rc_1","elevation-0":"_elevation-0_1a6rc_12","elevation-1":"_elevation-1_1a6rc_16","elevation-2":"_elevation-2_1a6rc_20","elevation-3":"_elevation-3_1a6rc_24","elevation-4":"_elevation-4_1a6rc_28","accent-info":"_accent-info_1a6rc_33","accent-success":"_accent-success_1a6rc_34","accent-error":"_accent-error_1a6rc_35","body":"_body_1a6rc_57","section":"_section_1a6rc_60","fullBleed":"_fullBleed_1a6rc_82","footer":"_footer_1a6rc_88"};
-export { styles as default };
-//# sourceMappingURL=Card.module.scss.js.map