@veeqo/ui 10.0.1 → 10.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAA,KAAK,CAAC,EAAE,CACP,QAAA,EAAA,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n  minWidth: number | string;\n  last: boolean;\n}>`\n  background-color: ${theme.colors.neutral.ink.dark};\n  padding: 12px 24px 12px 12px;\n  box-shadow: ${theme.shadows.lg};\n  border-radius: ${theme.radius.md};\n  pointer-events: auto;\n  z-index: 40;\n  min-width: ${({ minWidth }) => minWidth};\n  max-width: 80vw;\n\n  &.veeqo-components-toast-enter {\n    transform: translateY(12px);\n    opacity: 0;\n  }\n\n  &.veeqo-components-toast-enter-active {\n    transform: translateY(0);\n    opacity: 1;\n    transition: 500ms ease;\n  }\n\n  &.veeqo-components-toast-exit {\n    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n    opacity: 1;\n  }\n\n  &.veeqo-components-toast-exit-active {\n    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n    opacity: 0;\n    transition: 500ms ease;\n  }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: ${theme.radius.md};\n  background-color: ${({ color }) => color};\n  color: #fff;\n\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n  }\n`;\n\nexport const ContentStack = styled(Stack)`\n  flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n  color: white;\n  font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAA,KAAK,CAAC,EAAE,CACP,QAAA,EAAA,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}

package/dist/components/Toggle/Toggle.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var generateId = require('../../utils/generateId.cjs');
 var styled = require('./styled.cjs');
 var Choice = require('../Choice/Choice.cjs');
 
@@ -11,11 +12,14 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 /**
  * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
  */
-const Toggle = React.forwardRef(({ id = 'testid', className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => (React__default.default.createElement(Choice.Choice, { id: id, inputPosition: inputPosition, ...choiceProps },
-    React__default.default.createElement(styled.Wrapper, { className: className, disabled: disabled },
-        React__default.default.createElement(styled.Switch, { small: small, disabled: disabled, className: className },
-            React__default.default.createElement(styled.Input, { id: id, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
-            React__default.default.createElement(styled.Slider, { switched: switched, disabled: disabled }))))));
+const Toggle = React.forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
+    const componentId = React.useMemo(() => id !== null && id !== undefined ? id : generateId.generateId('toggle'), [id]);
+    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
+        React__default.default.createElement(styled.Wrapper, { className: className, disabled: disabled },
+            React__default.default.createElement(styled.Switch, { small: small, disabled: disabled, className: className },
+                React__default.default.createElement(styled.Input, { id: componentId, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
+                React__default.default.createElement(styled.Slider, { switched: switched, disabled: disabled })))));
+});
 
 exports.Toggle = Toggle;
 //# sourceMappingURL=Toggle.cjs.map

package/dist/components/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id = 'testid',\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => (\n    <Choice id={id} inputPosition={inputPosition} {...(choiceProps as ForwardedChoiceProps)}>\n      <Wrapper className={className} disabled={disabled}>\n        <Switch small={small} disabled={disabled} className={className}>\n          <Input\n            id={id}\n            role=\"switch\"\n            type=\"checkbox\"\n            name={name}\n            aria-label={ariaLabel}\n            checked={!!switched}\n            onChange={(e) => (disabled ? undefined : onClick(e))}\n            disabled={disabled}\n            ref={ref}\n          />\n          <Slider switched={switched} disabled={disabled} />\n        </Switch>\n      </Wrapper>\n    </Choice>\n  ),\n);\n"],"names":["forwardRef","React","Choice","Wrapper","Switch","Input","Slider"],"mappings":";;;;;;;;;;AAMA;;AAEG;AACU,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,GAAG,QAAQ,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,GAAG,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,MAEHC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAAa,EAAA,GAAO,WAAoC,EAAA;IACrFD,sBAAC,CAAA,aAAA,CAAAE,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,QAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;YAC5DH,sBAAC,CAAA,aAAA,CAAAI,YAAK,EACJ,EAAA,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,YAAAJ,sBAAA,CAAA,aAAA,CAACK,aAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC3C,CACD,CACH,CACV;;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <Wrapper className={className} disabled={disabled}>\n          <Switch small={small} disabled={disabled} className={className}>\n            <Input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n            />\n            <Slider switched={switched} disabled={disabled} />\n          </Switch>\n        </Wrapper>\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useMemo","generateId","React","Choice","Wrapper","Switch","Input","Slider"],"mappings":";;;;;;;;;;;AAOA;;AAEG;AACU,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAO,GAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCD,sBAAC,CAAA,aAAA,CAAAE,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,YAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;gBAC5DH,sBAAC,CAAA,aAAA,CAAAI,YAAK,EACJ,EAAA,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,aAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC3C,CACD,CACH;AAEb,CAAC;;;;"}

package/dist/components/Toggle/Toggle.js

@@ -1,15 +1,19 @@
-import React__default, { forwardRef } from 'react';
+import React__default, { forwardRef, useMemo } from 'react';
+import { generateId } from '../../utils/generateId.js';
 import { Wrapper, Switch, Input, Slider } from './styled.js';
 import { Choice } from '../Choice/Choice.js';
 
 /**
  * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
  */
-const Toggle = forwardRef(({ id = 'testid', className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => (React__default.createElement(Choice, { id: id, inputPosition: inputPosition, ...choiceProps },
-    React__default.createElement(Wrapper, { className: className, disabled: disabled },
-        React__default.createElement(Switch, { small: small, disabled: disabled, className: className },
-            React__default.createElement(Input, { id: id, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
-            React__default.createElement(Slider, { switched: switched, disabled: disabled }))))));
+const Toggle = forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
+    const componentId = useMemo(() => id !== null && id !== undefined ? id : generateId('toggle'), [id]);
+    return (React__default.createElement(Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
+        React__default.createElement(Wrapper, { className: className, disabled: disabled },
+            React__default.createElement(Switch, { small: small, disabled: disabled, className: className },
+                React__default.createElement(Input, { id: componentId, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
+                React__default.createElement(Slider, { switched: switched, disabled: disabled })))));
+});
 
 export { Toggle };
 //# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id = 'testid',\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => (\n    <Choice id={id} inputPosition={inputPosition} {...(choiceProps as ForwardedChoiceProps)}>\n      <Wrapper className={className} disabled={disabled}>\n        <Switch small={small} disabled={disabled} className={className}>\n          <Input\n            id={id}\n            role=\"switch\"\n            type=\"checkbox\"\n            name={name}\n            aria-label={ariaLabel}\n            checked={!!switched}\n            onChange={(e) => (disabled ? undefined : onClick(e))}\n            disabled={disabled}\n            ref={ref}\n          />\n          <Slider switched={switched} disabled={disabled} />\n        </Switch>\n      </Wrapper>\n    </Choice>\n  ),\n);\n"],"names":["React"],"mappings":";;;;AAMA;;AAEG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,GAAG,QAAQ,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,GAAG,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,MAEHA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAAa,EAAA,GAAO,WAAoC,EAAA;IACrFA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;YAC5DA,cAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC3C,CACD,CACH,CACV;;;;"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <Wrapper className={className} disabled={disabled}>\n          <Switch small={small} disabled={disabled} className={className}>\n            <Input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n            />\n            <Slider switched={switched} disabled={disabled} />\n          </Switch>\n        </Wrapper>\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAOA;;AAEG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAO,GAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;gBAC5DA,cAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC3C,CACD,CACH;AAEb,CAAC;;;;"}

package/dist/components/Toggle/styled.cjs

@@ -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--1lpbm63" }) `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--wwolwa" }) `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--1g5erfv" }) `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--smi5gh" }) `display:inline-block;user-select:none;`;
+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;`;
 
 exports.Input = Input;
 exports.Slider = Slider;

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

@@ -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,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,aAAA,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;;;;;;;"}
+{"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;;;;;;;"}

package/dist/components/Toggle/styled.js

@@ -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--1lpbm63" }) `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--wwolwa" }) `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--1g5erfv" }) `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--smi5gh" }) `display:inline-block;user-select:none;`;
+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;`;
 
 export { Input, Slider, Switch, Wrapper };
 //# sourceMappingURL=styled.js.map

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

@@ -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,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,aAAA,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;;;;"}
+{"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;;;;"}

package/dist/components/ToggleButton/styled.cjs

@@ -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--2wt2qd" }) `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--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 }) => {
     let height = '40px';
     let paddingLeft = '24px';
     let paddingRight = '24px';

package/dist/components/ToggleButton/styled.js

@@ -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--2wt2qd" }) `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--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 }) => {
     let height = '40px';
     let paddingLeft = '24px';
     let paddingRight = '24px';

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

@@ -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--xoiqij" }) `display:inline-block;`;
-const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--16f4d0n" }) `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--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 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--j2ddij" }) `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--1mtkjub" }) `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--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};`;
 
 exports.Container = Container;
 exports.Tip = Tip;

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

@@ -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,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;;;;;;;"}
+{"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;;;;;;;"}

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

@@ -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--xoiqij" }) `display:inline-block;`;
-const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--16f4d0n" }) `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--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 Tip = styled(motion.div).attrs({
     initial: { opacity: 0 },
     animate: { opacity: 1 },
     exit: { opacity: 0 },
     transition: { duration: 0.15 },
-}).withConfig({ displayName: "vui--Tip", componentId: "vui--j2ddij" }) `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--1mtkjub" }) `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--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};`;
 
 export { Container, Tip, Triangle, Wrap };
 //# sourceMappingURL=styled.js.map

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

@@ -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,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;;;;"}
+{"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;;;;"}

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

@@ -12,8 +12,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--1koybls" }) `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--cbt5s4" }) `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--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};}`;
 
 exports.SingleLineText = SingleLineText;
 exports.UploadedFilesListStack = UploadedFilesListStack;

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

@@ -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,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;;;;;"}
+{"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;;;;;"}

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

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

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

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

package/dist/components/UploadFile/styled.cjs

@@ -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--1hvf3l2" }) `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--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};}`;
 
 exports.DropZoneContainer = DropZoneContainer;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/UploadFile/styled.js

@@ -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--1hvf3l2" }) `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--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};}`;
 
 export { DropZoneContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -16,9 +16,9 @@ const commonStyles = `
   bottom: 0;
   left: 0;
 `;
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1rvy0dr" }) `${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--1jwhui1" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
-const Wrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1kkgtj2" }) `position:relative;height:100%;width:100%;z-index:1;`;
+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;`;
 
 exports.Container = Container;
 exports.Shadow = Shadow;

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

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

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

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

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

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

package/dist/components/VideoModal/styled.cjs

@@ -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--1hkof2c" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
-const VideoWrapper = styled__default.default.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--1lewgjy" }) `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--w178jo" }) `position:absolute;top:0px;right:-45px;`;
+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;`;
 
 exports.ButtonSC = ButtonSC;
 exports.PopupContent = PopupContent;

package/dist/components/VideoModal/styled.js

@@ -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--1hkof2c" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
-const VideoWrapper = styled.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--1lewgjy" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
-const ButtonSC = styled(Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--w178jo" }) `position:absolute;top:0px;right:-45px;`;
+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;`;
 
 export { ButtonSC, PopupContent, VideoWrapper };
 //# sourceMappingURL=styled.js.map

package/dist/components/View/styled.cjs

@@ -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--vzfchk" }) `padding:14px 24px;`;
-const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--oyd9i9" }) `line-height:1;`;
-const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1p0be95" }) `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--1vyyfhh" }) `padding:14px 24px;`;
+const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
+const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ colourPalette, customTextColour }) => `
     &:hover {
       border: 1px solid ${colourPalette.base};
       background-color: ${colourPalette.lightest};
@@ -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--1hen4ak" }) `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--chq9kr" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
     background-color: ${colourPalette.base};
 
@@ -41,7 +41,7 @@ const IconStyling = {
         width: sizes.sizes.base,
     },
 };
-const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1wzcwpm" }) `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--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
 
 exports.Text = Text.Text;
 exports.Container = Container;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":["styled","BaseContainer","Text","colors","sizes"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAIvC,MAAM,WAAW,GAAGD,uBAAM,CAACE,SAAI,CAAC;AAIhC,MAAM,OAAO,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,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;;;;;;;;;;"}
+{"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;;;;;;;;;;"}

package/dist/components/View/styled.js

@@ -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--vzfchk" }) `padding:14px 24px;`;
-const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--oyd9i9" }) `line-height:1;`;
-const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1p0be95" }) `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--1vyyfhh" }) `padding:14px 24px;`;
+const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
+const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ colourPalette, customTextColour }) => `
     &:hover {
       border: 1px solid ${colourPalette.base};
       background-color: ${colourPalette.lightest};
@@ -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--1hen4ak" }) `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--chq9kr" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
     background-color: ${colourPalette.base};
 
@@ -35,7 +35,7 @@ const IconStyling = {
         width: sizes.base,
     },
 };
-const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1wzcwpm" }) `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--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
 
 export { Container, Contour, CounterContainer, CounterText, CustomIconWrapper, IconStyling, Text };
 //# sourceMappingURL=styled.js.map