npm - @veeqo/ui - Versions diffs - 9.9.3 → 10.0.0-beta.1 - Mend

@veeqo/ui 9.9.3 → 10.0.0-beta.1

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

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

@@ -8,10 +8,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const Slider = styled__default.default.span.withConfig({ displayName: "vui--Slider", componentId: "vui--x03mdi" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? index.theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1ccelw2" }) `width:100%;height:100%;border-radius:${index.theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${index.theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${index.theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${index.theme.colors.secondary.blue.light};}`;
-const Switch = styled__default.default.span.withConfig({ displayName: "vui--Switch", componentId: "vui--13yy1uj" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
-const Wrapper = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--69792q" }) `display:inline-block;user-select:none;`;
+const Slider = styled__default.default.span.withConfig({ displayName: "vui--Slider", componentId: "vui--10ka3tn" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? index.theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1f7rwsl" }) `width:100%;height:100%;border-radius:${index.theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${index.theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${index.theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${index.theme.colors.secondary.blue.light};}`;
+const Switch = styled__default.default.span.withConfig({ displayName: "vui--Switch", componentId: "vui--16c93z6" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
+const Wrapper = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--13u3unt" }) `display:inline-block;user-select:none;`;
 exports.Input = Input;
 exports.Slider = Slider;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ToggleProps } from './types';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: #cdd1d5;\n -webkit-transition: 0.3s;\n transition: 0.3s;\n\n &:after {\n content: '';\n position: absolute;\n border-radius: 50%;\n background-color: ${({ disabled, switched }) =>\n disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};\n -webkit-transition: 0.3s;\n transition: 0.3s;\n }\n`;\n\nconst Input = styled.input`\n width: 100%;\n height: 100%;\n border-radius: ${theme.radius.base};\n z-index: 2;\n margin: 0;\n\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n\n &:focus-visible + ${Slider} {\n box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};\n }\n\n &:checked + ${Slider} {\n background-color: #0079d1;\n }\n\n &:disabled + ${Slider} {\n background-color: ${theme.colors.neutral.grey.base};\n }\n\n &:checked:disabled + ${Slider} {\n background-color: ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Switch = styled.span<ToggleProps>`\n display: flex;\n position: relative;\n height: ${({ small }) => (small ? '28px' : '36px')};\n width: ${({ small }) => (small ? '56px' : '72px')};\n z-index: 1;\n\n input {\n position: absolute;\n opacity: 0;\n }\n\n // configure size and animation\n ${Slider}:after {\n height: ${({ small }) => (small ? '22px' : '28px')};\n width: ${({ small }) => (small ? '22px' : '28px')};\n left: ${({ small }) => (small ? '3px' : '4px')};\n bottom: ${({ small }) => (small ? '3px' : '4px')};\n }\n\n ${Input}:checked + ${Slider} {\n &:after,\n svg {\n -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n }\n }\n`;\n\nconst Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`\n display: inline-block;\n user-select: none;\n`;\n\nexport { Switch, Slider, Input, Wrapper };\n"],"names":["styled","theme","BaseContainer"],"mappings":";;;;;;;;;;AAMA,MAAM,MAAM,GAAGA,uBAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACPA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAGD,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAGA,uBAAM,CAACE,2BAAa,CAAC;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ToggleProps } from './types';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: #cdd1d5;\n -webkit-transition: 0.3s;\n transition: 0.3s;\n\n &:after {\n content: '';\n position: absolute;\n border-radius: 50%;\n background-color: ${({ disabled, switched }) =>\n disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};\n -webkit-transition: 0.3s;\n transition: 0.3s;\n }\n`;\n\nconst Input = styled.input`\n width: 100%;\n height: 100%;\n border-radius: ${theme.radius.base};\n z-index: 2;\n margin: 0;\n\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n\n &:focus-visible + ${Slider} {\n box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};\n }\n\n &:checked + ${Slider} {\n background-color: #0079d1;\n }\n\n &:disabled + ${Slider} {\n background-color: ${theme.colors.neutral.grey.base};\n }\n\n &:checked:disabled + ${Slider} {\n background-color: ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Switch = styled.span<ToggleProps>`\n display: flex;\n position: relative;\n height: ${({ small }) => (small ? '28px' : '36px')};\n width: ${({ small }) => (small ? '56px' : '72px')};\n z-index: 1;\n\n input {\n position: absolute;\n opacity: 0;\n }\n\n // configure size and animation\n ${Slider}:after {\n height: ${({ small }) => (small ? '22px' : '28px')};\n width: ${({ small }) => (small ? '22px' : '28px')};\n left: ${({ small }) => (small ? '3px' : '4px')};\n bottom: ${({ small }) => (small ? '3px' : '4px')};\n }\n\n ${Input}:checked + ${Slider} {\n &:after,\n svg {\n -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n }\n }\n`;\n\nconst Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`\n display: inline-block;\n user-select: none;\n`;\n\nexport { Switch, Slider, Input, Wrapper };\n"],"names":["styled","theme","BaseContainer"],"mappings":";;;;;;;;;;AAMA,MAAM,MAAM,GAAGA,uBAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACPA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAGD,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAGA,uBAAM,CAACE,2BAAa,CAAC;;;;;;;"}

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

@@ -2,10 +2,10 @@ import styled from 'styled-components';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { theme } from '../../theme/index.js';
-const Slider = styled.span.withConfig({ displayName: "vui--Slider", componentId: "vui--x03mdi" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1ccelw2" }) `width:100%;height:100%;border-radius:${theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${theme.colors.secondary.blue.light};}`;
-const Switch = styled.span.withConfig({ displayName: "vui--Switch", componentId: "vui--13yy1uj" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
-const Wrapper = styled(BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--69792q" }) `display:inline-block;user-select:none;`;
+const Slider = styled.span.withConfig({ displayName: "vui--Slider", componentId: "vui--10ka3tn" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1f7rwsl" }) `width:100%;height:100%;border-radius:${theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${theme.colors.secondary.blue.light};}`;
+const Switch = styled.span.withConfig({ displayName: "vui--Switch", componentId: "vui--16c93z6" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
+const Wrapper = styled(BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--13u3unt" }) `display:inline-block;user-select:none;`;
 export { Input, Slider, Switch, Wrapper };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ToggleProps } from './types';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: #cdd1d5;\n -webkit-transition: 0.3s;\n transition: 0.3s;\n\n &:after {\n content: '';\n position: absolute;\n border-radius: 50%;\n background-color: ${({ disabled, switched }) =>\n disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};\n -webkit-transition: 0.3s;\n transition: 0.3s;\n }\n`;\n\nconst Input = styled.input`\n width: 100%;\n height: 100%;\n border-radius: ${theme.radius.base};\n z-index: 2;\n margin: 0;\n\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n\n &:focus-visible + ${Slider} {\n box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};\n }\n\n &:checked + ${Slider} {\n background-color: #0079d1;\n }\n\n &:disabled + ${Slider} {\n background-color: ${theme.colors.neutral.grey.base};\n }\n\n &:checked:disabled + ${Slider} {\n background-color: ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Switch = styled.span<ToggleProps>`\n display: flex;\n position: relative;\n height: ${({ small }) => (small ? '28px' : '36px')};\n width: ${({ small }) => (small ? '56px' : '72px')};\n z-index: 1;\n\n input {\n position: absolute;\n opacity: 0;\n }\n\n // configure size and animation\n ${Slider}:after {\n height: ${({ small }) => (small ? '22px' : '28px')};\n width: ${({ small }) => (small ? '22px' : '28px')};\n left: ${({ small }) => (small ? '3px' : '4px')};\n bottom: ${({ small }) => (small ? '3px' : '4px')};\n }\n\n ${Input}:checked + ${Slider} {\n &:after,\n svg {\n -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n }\n }\n`;\n\nconst Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`\n display: inline-block;\n user-select: none;\n`;\n\nexport { Switch, Slider, Input, Wrapper };\n"],"names":[],"mappings":";;;;AAMA,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACP,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ToggleProps } from './types';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: #cdd1d5;\n -webkit-transition: 0.3s;\n transition: 0.3s;\n\n &:after {\n content: '';\n position: absolute;\n border-radius: 50%;\n background-color: ${({ disabled, switched }) =>\n disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};\n -webkit-transition: 0.3s;\n transition: 0.3s;\n }\n`;\n\nconst Input = styled.input`\n width: 100%;\n height: 100%;\n border-radius: ${theme.radius.base};\n z-index: 2;\n margin: 0;\n\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n\n &:focus-visible + ${Slider} {\n box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};\n }\n\n &:checked + ${Slider} {\n background-color: #0079d1;\n }\n\n &:disabled + ${Slider} {\n background-color: ${theme.colors.neutral.grey.base};\n }\n\n &:checked:disabled + ${Slider} {\n background-color: ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Switch = styled.span<ToggleProps>`\n display: flex;\n position: relative;\n height: ${({ small }) => (small ? '28px' : '36px')};\n width: ${({ small }) => (small ? '56px' : '72px')};\n z-index: 1;\n\n input {\n position: absolute;\n opacity: 0;\n }\n\n // configure size and animation\n ${Slider}:after {\n height: ${({ small }) => (small ? '22px' : '28px')};\n width: ${({ small }) => (small ? '22px' : '28px')};\n left: ${({ small }) => (small ? '3px' : '4px')};\n bottom: ${({ small }) => (small ? '3px' : '4px')};\n }\n\n ${Input}:checked + ${Slider} {\n &:after,\n svg {\n -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n transform: translateX(${({ small }) => (small ? '28px' : '36px')});\n }\n }\n`;\n\nconst Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`\n display: inline-block;\n user-select: none;\n`;\n\nexport { Switch, Slider, Input, Wrapper };\n"],"names":[],"mappings":";;;;AAMA,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACP,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;;;;"}

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

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const StyledButton = styled__default.default.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--x718nd" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
+const StyledButton = styled__default.default.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--xt3hiw" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
     let height = '40px';
     let paddingLeft = '24px';
     let paddingRight = '24px';

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
-const StyledButton = styled.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--x718nd" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
+const StyledButton = styled.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--xt3hiw" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
     let height = '40px';
     let paddingLeft = '24px';
     let paddingRight = '24px';

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

@@ -8,15 +8,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1exlfc5" }) `display:inline-block;`;
-const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--bq60f" }) `background-color:${index.theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${index.theme.layers.tooltip};`;
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--t7r6of" }) `display:inline-block;`;
+const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--18xnftt" }) `background-color:${index.theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${index.theme.layers.tooltip};`;
 const Tip = styled__default.default(framerMotion.motion.div).attrs({
     initial: { opacity: 0 },
     animate: { opacity: 1 },
     exit: { opacity: 0 },
     transition: { duration: 0.15 },
-}).withConfig({ displayName: "vui--Tip", componentId: "vui--1mrdz3b" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
-const Wrap = styled__default.default(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1q7vib9" }) `padding:${index.theme.sizes.base} ${index.theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.base};background:${index.theme.colors.neutral.ink.dark};`;
+}).withConfig({ displayName: "vui--Tip", componentId: "vui--hap6gu" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled__default.default(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1xvencu" }) `padding:${index.theme.sizes.base} ${index.theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.base};background:${index.theme.colors.neutral.ink.dark};`;
 exports.Container = Container;
 exports.Tip = Tip;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, WrapProps } from './types';\n\nconst Container = styled.div`\n display: inline-block;\n`;\n\nconst Triangle = styled.div`\n background-color: ${theme.colors.neutral.ink.dark};\n height: 16px;\n width: 16px;\n position: absolute;\n transform: rotate(45deg);\n z-index: ${theme.layers.tooltip};\n`;\n\nconst Tip = styled(motion.div).attrs({\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.15 },\n})<TriangleProps>`\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n\n &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n left: 8px;\n bottom: 0px;\n }\n &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n right: 8px;\n bottom: 0px;\n }\n\n &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n left: 8px;\n top: -4px;\n }\n &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n right: 8px;\n top: -4px;\n }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n padding: ${theme.sizes.base} ${theme.sizes[5]};\n overflow: hidden;\n z-index: 10;\n\n min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n\n color: #fff;\n border-radius: ${theme.sizes.sm};\n box-shadow: ${theme.shadows.base};\n background: ${theme.colors.neutral.ink.dark};\n`;\n\nexport { Container, Tip, Wrap, Triangle };\n"],"names":["styled","theme","motion"],"mappings":";;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG;AAItB,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CACL,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~YAAA~~,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAKtC,0EAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAA,CAAA;AAG3B,MAAA,GAAG,GAAGD,uBAAM,CAACE,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACnC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC/B,CAAA,CAAC;AAwBF,MAAM,IAAI,GAAGF,uBAAM,CAAC,SAAS,CAAC,CACjB,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,IAAI,CAAI,CAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,sCAAA,EAIhC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,4BAAA,EAG5BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjBA,WAAK,CAAC,OAAO,CAAC,IAAI,CAAA,YAAA,EAClBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, WrapProps } from './types';\n\nconst Container = styled.div`\n display: inline-block;\n`;\n\nconst Triangle = styled.div`\n background-color: ${theme.colors.neutral.ink.dark};\n height: 16px;\n width: 16px;\n position: absolute;\n transform: rotate(45deg);\n z-index: ${theme.layers.tooltip};\n`;\n\nconst Tip = styled(motion.div).attrs({\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.15 },\n})<TriangleProps>`\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n\n &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n left: 8px;\n bottom: 0px;\n }\n &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n right: 8px;\n bottom: 0px;\n }\n\n &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n left: 8px;\n top: -4px;\n }\n &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n right: 8px;\n top: -4px;\n }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n padding: ${theme.sizes.base} ${theme.sizes[5]};\n overflow: hidden;\n z-index: 10;\n\n min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n\n color: #fff;\n border-radius: ${theme.sizes.sm};\n box-shadow: ${theme.shadows.base};\n background: ${theme.colors.neutral.ink.dark};\n`;\n\nexport { Container, Tip, Wrap, Triangle };\n"],"names":["styled","theme","motion"],"mappings":";;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG;AAItB,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CACL,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAKtC,0EAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAA,CAAA;AAG3B,MAAA,GAAG,GAAGD,uBAAM,CAACE,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACnC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC/B,CAAA,CAAC;AAwBF,MAAM,IAAI,GAAGF,uBAAM,CAAC,SAAS,CAAC,CACjB,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,IAAI,CAAI,CAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,sCAAA,EAIhC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,4BAAA,EAG5BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjBA,WAAK,CAAC,OAAO,CAAC,IAAI,CAAA,YAAA,EAClBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;;;;;;"}

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

@@ -2,15 +2,15 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import { theme } from '../../../theme/index.js';
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1exlfc5" }) `display:inline-block;`;
-const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--bq60f" }) `background-color:${theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${theme.layers.tooltip};`;
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--t7r6of" }) `display:inline-block;`;
+const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--18xnftt" }) `background-color:${theme.colors.neutral.ink.dark};height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:${theme.layers.tooltip};`;
 const Tip = styled(motion.div).attrs({
     initial: { opacity: 0 },
     animate: { opacity: 1 },
     exit: { opacity: 0 },
     transition: { duration: 0.15 },
-}).withConfig({ displayName: "vui--Tip", componentId: "vui--1mrdz3b" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
-const Wrap = styled(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1q7vib9" }) `padding:${theme.sizes.base} ${theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.base};background:${theme.colors.neutral.ink.dark};`;
+}).withConfig({ displayName: "vui--Tip", componentId: "vui--hap6gu" }) `width:max-content;pointer-events:none;will-change:opacity,transform;&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1xvencu" }) `padding:${theme.sizes.base} ${theme.sizes[5]};overflow:hidden;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;color:#fff;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.base};background:${theme.colors.neutral.ink.dark};`;
 export { Container, Tip, Triangle, Wrap };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, WrapProps } from './types';\n\nconst Container = styled.div`\n display: inline-block;\n`;\n\nconst Triangle = styled.div`\n background-color: ${theme.colors.neutral.ink.dark};\n height: 16px;\n width: 16px;\n position: absolute;\n transform: rotate(45deg);\n z-index: ${theme.layers.tooltip};\n`;\n\nconst Tip = styled(motion.div).attrs({\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.15 },\n})<TriangleProps>`\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n\n &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n left: 8px;\n bottom: 0px;\n }\n &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n right: 8px;\n bottom: 0px;\n }\n\n &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n left: 8px;\n top: -4px;\n }\n &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n right: 8px;\n top: -4px;\n }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n padding: ${theme.sizes.base} ${theme.sizes[5]};\n overflow: hidden;\n z-index: 10;\n\n min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n\n color: #fff;\n border-radius: ${theme.sizes.sm};\n box-shadow: ${theme.shadows.base};\n background: ${theme.colors.neutral.ink.dark};\n`;\n\nexport { Container, Tip, Wrap, Triangle };\n"],"names":[],"mappings":";;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG;AAItB,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CACL,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,~~YAAA~~,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAKtC,0EAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAA,CAAA;AAG3B,MAAA,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACnC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC/B,CAAA,CAAC;AAwBF,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CACjB,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAI,CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,sCAAA,EAIhC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,4BAAA,EAG5B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAA,YAAA,EAClB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../../theme';\n\nimport { TriangleProps, WrapProps } from './types';\n\nconst Container = styled.div`\n display: inline-block;\n`;\n\nconst Triangle = styled.div`\n background-color: ${theme.colors.neutral.ink.dark};\n height: 16px;\n width: 16px;\n position: absolute;\n transform: rotate(45deg);\n z-index: ${theme.layers.tooltip};\n`;\n\nconst Tip = styled(motion.div).attrs({\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.15 },\n})<TriangleProps>`\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n\n &[data-popper-placement^='top-start'] > #veeqo-components-triangle {\n left: 8px;\n bottom: 0px;\n }\n &[data-popper-placement^='top-end'] > #veeqo-components-triangle {\n right: 8px;\n bottom: 0px;\n }\n\n &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {\n left: 8px;\n top: -4px;\n }\n &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {\n right: 8px;\n top: -4px;\n }\n`;\n\nconst Wrap = styled(Container)<WrapProps>`\n padding: ${theme.sizes.base} ${theme.sizes[5]};\n overflow: hidden;\n z-index: 10;\n\n min-width: ${({ tipMinWidth }) => tipMinWidth}px;\n max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;\n\n color: #fff;\n border-radius: ${theme.sizes.sm};\n box-shadow: ${theme.shadows.base};\n background: ${theme.colors.neutral.ink.dark};\n`;\n\nexport { Container, Tip, Wrap, Triangle };\n"],"names":[],"mappings":";;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG;AAItB,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CACL,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAKtC,0EAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAA,CAAA;AAG3B,MAAA,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACnC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC/B,CAAA,CAAC;AAwBF,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CACjB,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAI,CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,sCAAA,EAIhC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,4BAAA,EAG5B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAA,YAAA,EAClB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;;;"}

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

@@ -11,8 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const SingleLineText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--1aguyhc" }) `display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;`;
-const UploadedFilesListStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--UploadedFilesListStack", componentId: "vui--1g0ca18" }) `border:1px solid ${colors.colors.neutral.ink.lightest};border-radius:${radius.radius.base};padding:${sizes.sizes.xs};${Text.Text}{padding-left:${sizes.sizes.xs};}`;
+const SingleLineText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--2zjkq9" }) `display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;`;
+const UploadedFilesListStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--UploadedFilesListStack", componentId: "vui--r41a54" }) `border:1px solid ${colors.colors.neutral.ink.lightest};border-radius:${radius.radius.base};padding:${sizes.sizes.xs};${Text.Text}{padding-left:${sizes.sizes.xs};}`;
 exports.SingleLineText = SingleLineText;
 exports.UploadedFilesListStack = UploadedFilesListStack;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","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":["styled","Text","Stack","colors","radius","sizes"],"mappings":";;;;;;;;;;;;;MAOa,cAAc,GAAGA,uBAAM,CAACC,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,qFAAA;AAOnC,MAAM,sBAAsB,GAAGD,uBAAM,CAACE,WAAK,CAAC,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EAC9BC,aAAM,CAAC,IAAI,CAAA,SAAA,EACjBC,WAAK,CAAC,EAAE,CAEjB,CAAA,EAAAJ,SAAI,CACY,cAAA,EAAAI,WAAK,CAAC,EAAE;;;;;"}
1	+ {"version":3,"file":"styled.cjs","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":["styled","Text","Stack","colors","radius","sizes"],"mappings":";;;;;;;;;;;;;MAOa,cAAc,GAAGA,uBAAM,CAACC,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qFAAA;AAOnC,MAAM,sBAAsB,GAAGD,uBAAM,CAACE,WAAK,CAAC,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EAC9BC,aAAM,CAAC,IAAI,CAAA,SAAA,EACjBC,WAAK,CAAC,EAAE,CAEjB,CAAA,EAAAJ,SAAI,CACY,cAAA,EAAAI,WAAK,CAAC,EAAE;;;;;"}

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

@@ -5,8 +5,8 @@ import { radius } from '../../../../theme/modules/radius.js';
 import { sizes } from '../../../../theme/modules/sizes.js';
 import { Stack } from '../../../Stack/Stack.js';
-const SingleLineText = styled(Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--1aguyhc" }) `display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;`;
-const UploadedFilesListStack = styled(Stack).withConfig({ displayName: "vui--UploadedFilesListStack", componentId: "vui--1g0ca18" }) `border:1px solid ${colors.neutral.ink.lightest};border-radius:${radius.base};padding:${sizes.xs};${Text}{padding-left:${sizes.xs};}`;
+const SingleLineText = styled(Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--2zjkq9" }) `display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;`;
+const UploadedFilesListStack = styled(Stack).withConfig({ displayName: "vui--UploadedFilesListStack", componentId: "vui--r41a54" }) `border:1px solid ${colors.neutral.ink.lightest};border-radius:${radius.base};padding:${sizes.xs};${Text}{padding-left:${sizes.xs};}`;
 export { SingleLineText, UploadedFilesListStack };
 //# sourceMappingURL=styled.js.map

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,~~cAAA~~,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,aAAA,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/UploadFile/styled.cjs CHANGED Viewed

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.md};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.colors.secondary.red.base};:hover{border:2px dashed ${colors.colors.secondary.red.base};background-color:${colors.colors.secondary.red.lightest};}:active{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};}`;
+const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--ljd9es" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.md};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.colors.secondary.red.base};:hover{border:2px dashed ${colors.colors.secondary.red.base};background-color:${colors.colors.secondary.red.lightest};}:active{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};}`;
 exports.DropZoneContainer = DropZoneContainer;
 //# sourceMappingURL=styled.cjs.map

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

	@@ -1 +1 @@
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 display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ${sizes.md};\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 :active {\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 :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\n &:has(input:invalid) {\n border: 2px dashed ${colors.secondary.red.base};\n :hover {\n border: 2px dashed ${colors.secondary.red.base};\n background-color: ${colors.secondary.red.lightest};\n }\n\n :active {\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 :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 }\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`;\n"],"names":["styled","sizes","radius","colors"],"mappings":";;;;;;;;;;;MAKa,iBAAiB,GAAGA,uBAAM,CAAC,GAAG,~~sJAK9BC~~,WAAK,CAAC,EAAE,CACF,eAAA,EAAAC,aAAM,CAAC,IAAI,CAAA,sHAAA,EAYPC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC5B,kBAAA,EAAAA,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,+BAG7BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,qCAG7BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,yCAAA,EAI7BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAEvB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,qBAC1BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAI5BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CACtB,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,qBAC9BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAI5B,kCAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,yBACtBA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EAC9BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAO/B,6EAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,iBAC7BA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClCA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;"}
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 display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ${sizes.md};\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 :active {\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 :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\n &:has(input:invalid) {\n border: 2px dashed ${colors.secondary.red.base};\n :hover {\n border: 2px dashed ${colors.secondary.red.base};\n background-color: ${colors.secondary.red.lightest};\n }\n\n :active {\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 :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 }\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`;\n"],"names":["styled","sizes","radius","colors"],"mappings":";;;;;;;;;;;MAKa,iBAAiB,GAAGA,uBAAM,CAAC,GAAG,qJAK9BC,WAAK,CAAC,EAAE,CACF,eAAA,EAAAC,aAAM,CAAC,IAAI,CAAA,sHAAA,EAYPC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC5B,kBAAA,EAAAA,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,+BAG7BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,qCAG7BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,yCAAA,EAI7BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAEvB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,qBAC1BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAI5BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CACtB,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,qBAC9BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAI5B,kCAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,yBACtBA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EAC9BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAO/B,6EAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,iBAC7BA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClCA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;"}

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

@@ -3,7 +3,7 @@ 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.md};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};}:active{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};}: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};}&:has(input:invalid){border:2px dashed ${colors.secondary.red.base};:hover{border:2px dashed ${colors.secondary.red.base};background-color:${colors.secondary.red.lightest};}:active{border:2px dashed ${colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.secondary.red.light};background-color:${colors.secondary.red.lightest};}: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};}}&: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};}`;
+const DropZoneContainer = styled.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--ljd9es" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.md};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};}:active{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};}: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};}&:has(input:invalid){border:2px dashed ${colors.secondary.red.base};:hover{border:2px dashed ${colors.secondary.red.base};background-color:${colors.secondary.red.lightest};}:active{border:2px dashed ${colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.secondary.red.light};background-color:${colors.secondary.red.lightest};}: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};}}&: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};}`;
 export { DropZoneContainer };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
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 display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ${sizes.md};\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 :active {\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 :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\n &:has(input:invalid) {\n border: 2px dashed ${colors.secondary.red.base};\n :hover {\n border: 2px dashed ${colors.secondary.red.base};\n background-color: ${colors.secondary.red.lightest};\n }\n\n :active {\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 :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 }\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`;\n"],"names":[],"mappings":";;;;;MAKa,iBAAiB,GAAG,MAAM,CAAC,GAAG,~~sJAK9B~~,KAAK,CAAC,EAAE,CACF,eAAA,EAAA,MAAM,CAAC,IAAI,CAAA,sHAAA,EAYP,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC5B,kBAAA,EAAA,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,+BAG7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,qCAG7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,yCAAA,EAI7B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAEvB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,qBAC1B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAI5B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CACtB,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,qBAC9B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAI5B,kCAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,yBACtB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EAC9B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAO/B,6EAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,iBAC7B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;"}
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 display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ${sizes.md};\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 :active {\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 :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\n &:has(input:invalid) {\n border: 2px dashed ${colors.secondary.red.base};\n :hover {\n border: 2px dashed ${colors.secondary.red.base};\n background-color: ${colors.secondary.red.lightest};\n }\n\n :active {\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 :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 }\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`;\n"],"names":[],"mappings":";;;;;MAKa,iBAAiB,GAAG,MAAM,CAAC,GAAG,qJAK9B,KAAK,CAAC,EAAE,CACF,eAAA,EAAA,MAAM,CAAC,IAAI,CAAA,sHAAA,EAYP,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC5B,kBAAA,EAAA,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,+BAG7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,qCAG7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,yCAAA,EAI7B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAEvB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,qBAC1B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAI5B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CACtB,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,qBAC9B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAI5B,kCAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,yBACtB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EAC9B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAO/B,6EAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,iBAC7B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;"}

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

@@ -16,9 +16,9 @@ const commonStyles = `
   bottom: 0;
   left: 0;
 `;
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1xg3v52" }) `${commonStyles} display:${(props) => (props.shouldShow ? 'initial' : 'none')};z-index:${index.theme.layers.modal};`;
-const Shadow = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Shadow", componentId: "vui--nz3cc" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
-const Wrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1pbqe6" }) `position:relative;height:100%;width:100%;z-index:1;`;
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--5gocp5" }) `${commonStyles} display:${(props) => (props.shouldShow ? 'initial' : 'none')};z-index:${index.theme.layers.modal};`;
+const Shadow = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Shadow", componentId: "vui--p8qe4b" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
+const Wrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1u28do5" }) `position:relative;height:100%;width:100%;z-index:1;`;
 exports.Container = Container;
 exports.Shadow = Shadow;

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

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

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

@@ -10,9 +10,9 @@ const commonStyles = `
   bottom: 0;
   left: 0;
 `;
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1xg3v52" }) `${commonStyles} display:${(props) => (props.shouldShow ? 'initial' : 'none')};z-index:${theme.layers.modal};`;
-const Shadow = styled(BaseContainer).withConfig({ displayName: "vui--Shadow", componentId: "vui--nz3cc" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
-const Wrap = styled(BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1pbqe6" }) `position:relative;height:100%;width:100%;z-index:1;`;
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--5gocp5" }) `${commonStyles} display:${(props) => (props.shouldShow ? 'initial' : 'none')};z-index:${theme.layers.modal};`;
+const Shadow = styled(BaseContainer).withConfig({ displayName: "vui--Shadow", componentId: "vui--p8qe4b" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
+const Wrap = styled(BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1u28do5" }) `position:relative;height:100%;width:100%;z-index:1;`;
 export { Container, Shadow, Wrap };
 //# sourceMappingURL=styled.js.map

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

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

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

@@ -7,9 +7,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const PopupContent = styled__default.default.div.withConfig({ displayName: "vui--PopupContent", componentId: "vui--17gmyeh" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
-const VideoWrapper = styled__default.default.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--rcrl58" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
-const ButtonSC = styled__default.default(Button.Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--srigr3" }) `position:absolute;top:0px;right:-45px;`;
+const PopupContent = styled__default.default.div.withConfig({ displayName: "vui--PopupContent", componentId: "vui--ohq9qo" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
+const VideoWrapper = styled__default.default.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--55zou" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
+const ButtonSC = styled__default.default(Button.Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--2rc7ks" }) `position:absolute;top:0px;right:-45px;`;
 exports.ButtonSC = ButtonSC;
 exports.PopupContent = PopupContent;

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

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { Button } from '../Button/Button.js';
-const PopupContent = styled.div.withConfig({ displayName: "vui--PopupContent", componentId: "vui--17gmyeh" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
-const VideoWrapper = styled.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--rcrl58" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
-const ButtonSC = styled(Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--srigr3" }) `position:absolute;top:0px;right:-45px;`;
+const PopupContent = styled.div.withConfig({ displayName: "vui--PopupContent", componentId: "vui--ohq9qo" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
+const VideoWrapper = styled.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--55zou" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
+const ButtonSC = styled(Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--2rc7ks" }) `position:absolute;top:0px;right:-45px;`;
 export { ButtonSC, PopupContent, VideoWrapper };
 //# sourceMappingURL=styled.js.map

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

@@ -10,9 +10,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 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 }) => `
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--m1gs4v" }) `padding:14px 24px;`;
+const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--1ilv3bg" }) `line-height:1;`;
+const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--b8oq7f" }) `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};
@@ -25,7 +25,7 @@ const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig(
     `
     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 &&
+const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1xuhw17" }) `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};
@@ -41,7 +41,7 @@ const IconStyling = {
         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};}`;
+const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--122jw7g" }) `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;

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

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

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

@@ -4,9 +4,9 @@ import { Text } from '../Text/Text.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.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 }) => `
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--m1gs4v" }) `padding:14px 24px;`;
+const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--1ilv3bg" }) `line-height:1;`;
+const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--b8oq7f" }) `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};
@@ -19,7 +19,7 @@ const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour",
     `
     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 &&
+const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1xuhw17" }) `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};
@@ -35,7 +35,7 @@ const IconStyling = {
         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};}`;
+const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--122jw7g" }) `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 CHANGED Viewed

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

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

@@ -14,10 +14,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
-const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
-const CrossIconStyling = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
-const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--3am01d" }) `line-height:1;`;
+const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--1uc98sf" }) ``;
+const CrossIconStyling = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--1te682y" }) ``;
+const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1giom5i" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
       background-color: ${colourPalette.dark};
@@ -25,7 +25,7 @@ const CounterContainer = styled__default.default(Text.Text).withConfig({ display
         color: ${colors.colors.neutral.grey.lightest};
       }
   `}`;
-const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1fc3r48" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${index.theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
+const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--jegwey" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${index.theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
   &:hover {
     background-color: ${colors.colors.neutral.grey.base};
@@ -64,7 +64,7 @@ const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig(
       color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
     }
   `}`;
-const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--i4ro1b" }) `padding:${index.theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
+const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--176jtjf" }) `padding:${index.theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
   &:focus-visible {
     ${Contour} {
       background-color: ${colors.colors.neutral.grey.base};
@@ -93,7 +93,7 @@ const IconStyling = {
         width: sizes.sizes.base,
     },
 };
-const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1cuc9yu" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
+const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1omb2tl" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
 exports.Text = Text.Text;
 exports.Contour = Contour;