@veeqo/ui 14.5.0-beta-2 → 14.5.0

package/dist/components/Button/components/styled.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
+import { sizes } from '../../../theme/modules/sizes.js';
+
+const MainContent = styled.span.withConfig({ displayName: "vui--MainContent", componentId: "vui--exbqdz" }) `display:inline-flex;align-items:center;gap:${({ hasText }) => (hasText ? '8px' : '4px')};${({ $loading }) => ($loading ? 'opacity: 0;' : null)};svg{width:${({ size }) => sizes[size]};height:${({ size }) => sizes[size]};}`;
+const BaseButton = styled.button.withConfig({ displayName: "vui--BaseButton", componentId: "vui--nvz516" }) `position:relative;box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;background-color:transparent;white-space:nowrap;${(props) => {
+    let height = '40px';
+    let paddingLeft = '24px';
+    let paddingRight = '24px';
+    let borderRadius = '8px';
+    let fontSize = '16px';
+    let outlineWidth = '4px';
+    if (props.hasIcon) {
+        paddingLeft = '16px';
+    }
+    if (props.hasDropdown) {
+        paddingRight = '16px';
+    }
+    if (props.size === 'sm') {
+        height = '32px';
+        paddingLeft = '16px';
+        paddingRight = '16px';
+        borderRadius = '4px';
+        fontSize = '14px';
+        outlineWidth = '2px';
+        if (props.hasIcon) {
+            paddingLeft = '8px';
+        }
+        if (props.hasDropdown) {
+            paddingRight = '8px';
+        }
+    }
+    if (!props.hasText) {
+        paddingLeft = '8px';
+        paddingRight = '8px';
+    }
+    return `
+      --outline-width: ${outlineWidth};
+
+      height: ${height};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      border-radius: ${borderRadius};
+      font-size: ${fontSize};
+      line-height: ${fontSize};
+    `;
+}} &:hover{cursor:pointer;}&:disabled{pointer-events:none;cursor:unset !important;}`;
+const DefaultButton = styled(BaseButton).withConfig({ displayName: "vui--DefaultButton", componentId: "vui--1xzjfje" }) `border-color:${theme.colors.neutral.grey.dark};background-color:white;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);color:${({ hasText }) => hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};&:hover{background-color:${theme.colors.neutral.grey.lightest};}&:active{background-color:${theme.colors.neutral.grey.lightest};border-color:${theme.colors.secondary.blue.base};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};outline:0;}&:disabled{box-shadow:none !important;background-color:${theme.colors.neutral.grey.base} !important;border-color:${theme.colors.neutral.grey.base} !important;color:${theme.colors.neutral.ink.light} !important;}`;
+const DefaultDestructiveButton = styled(DefaultButton).withConfig({ displayName: "vui--DefaultDestructiveButton", componentId: "vui--1ixaf03" }) `color:${theme.colors.secondary.red.base};&:hover{color:${theme.colors.secondary.red.dark};}&:active{border-color:${theme.colors.secondary.red.base};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};color:${theme.colors.secondary.red.dark};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}`;
+const PrimaryButton = styled(DefaultButton).withConfig({ displayName: "vui--PrimaryButton", componentId: "vui--16w0ufk" }) `background-color:var(--theme-primary, ${theme.colors.secondary.blue.base});border-color:var(--theme-primary, ${theme.colors.secondary.blue.base});color:var(--theme-on-primary, white);&:hover{background-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});border-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});}&:active{background-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});border-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}`;
+const PrimaryDestructiveButton = styled(PrimaryButton).withConfig({ displayName: "vui--PrimaryDestructiveButton", componentId: "vui--1w3lv3r" }) `background-color:${theme.colors.secondary.red.base};border-color:${theme.colors.secondary.red.base};color:white;&:hover{background-color:${theme.colors.secondary.red.dark};border-color:${theme.colors.secondary.red.dark};}&:active{background-color:${theme.colors.secondary.red.dark};border-color:${theme.colors.secondary.red.dark};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}`;
+const FlatButton = styled(BaseButton).withConfig({ displayName: "vui--FlatButton", componentId: "vui--fqczse" }) `border-color:transparent;box-shadow:none;color:${theme.colors.neutral.ink.base};&:hover{background-color:${theme.colors.neutral.grey.light};}&:active{background-color:${theme.colors.neutral.grey.light};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};outline:0;}&:disabled{background-color:transparent;border-color:transparent;}`;
+const UnstyledButton = styled.button.withConfig({ displayName: "vui--UnstyledButton", componentId: "vui--1fxilc" }) `appearance:none;border:0;background-color:transparent;padding:0;font:inherit;&:hover{cursor:pointer;}`;
+const LinkButton = styled(UnstyledButton).withConfig({ displayName: "vui--LinkButton", componentId: "vui--z932nb" }) `display:inline-flex;flex-direction:row;align-items:center;font-family:${theme.text.link.fontFamily};font-size:${theme.text.link.fontSize};line-height:${theme.text.link.fontSize};font-weight:${theme.text.link.fontWeight};line-height:${theme.text.link.lineHeight};text-decoration:${theme.text.link.textDecoration};color:${theme.colors.secondary.blue.base};&:hover{color:${theme.colors.secondary.blue.dark};}& > * + *{margin-left:${theme.sizes.xs};}&:focus-visible{outline:0;box-shadow:0 0 0 4px white,0 0 0 8px ${theme.colors.secondary.blue.light};border-radius:4px;}`;
+const LoadingWrapper = styled.div.withConfig({ displayName: "vui--LoadingWrapper", componentId: "vui--1qt232p" }) `position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin-left:0;`;
+
+export { DefaultButton, DefaultDestructiveButton, FlatButton, LinkButton, LoadingWrapper, MainContent, PrimaryButton, PrimaryDestructiveButton, UnstyledButton };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Button/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\ninterface ButtonDisplayProps {\n  size: 'sm' | 'base';\n  hasText: boolean;\n  hasIcon: boolean;\n  hasDropdown: boolean;\n}\n\nexport const MainContent = styled.span<{\n  $loading?: boolean;\n  hasText: boolean;\n  size: 'base' | 'md';\n}>`\n  display: inline-flex;\n  align-items: center;\n\n  gap: ${({ hasText }) => (hasText ? '8px' : '4px')};\n  ${({ $loading }) => ($loading ? 'opacity: 0;' : null)};\n\n  svg {\n    width: ${({ size }) => sizes[size]};\n    height: ${({ size }) => sizes[size]};\n  }\n`;\n\nconst BaseButton = styled.button<ButtonDisplayProps>`\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: ${theme.fontFamily};\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n\n  ${(props) => {\n    let height = '40px';\n    let paddingLeft = '24px';\n    let paddingRight = '24px';\n    let borderRadius = '8px';\n    let fontSize = '16px';\n    let outlineWidth = '4px';\n\n    if (props.hasIcon) {\n      paddingLeft = '16px';\n    }\n\n    if (props.hasDropdown) {\n      paddingRight = '16px';\n    }\n\n    if (props.size === 'sm') {\n      height = '32px';\n      paddingLeft = '16px';\n      paddingRight = '16px';\n      borderRadius = '4px';\n      fontSize = '14px';\n      outlineWidth = '2px';\n\n      if (props.hasIcon) {\n        paddingLeft = '8px';\n      }\n\n      if (props.hasDropdown) {\n        paddingRight = '8px';\n      }\n    }\n\n    if (!props.hasText) {\n      paddingLeft = '8px';\n      paddingRight = '8px';\n    }\n\n    return `\n      --outline-width: ${outlineWidth};\n\n      height: ${height};\n      padding-left: ${paddingLeft};\n      padding-right: ${paddingRight};\n      border-radius: ${borderRadius};\n      font-size: ${fontSize};\n      line-height: ${fontSize};\n    `;\n  }}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    pointer-events: none;\n    cursor: unset !important;\n  }\n`;\n\nexport const DefaultButton = styled(BaseButton as any)`\n  border-color: ${theme.colors.neutral.grey.dark};\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: ${({ hasText }) =>\n    hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.lightest};\n    border-color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: ${theme.colors.neutral.grey.base} !important;\n    border-color: ${theme.colors.neutral.grey.base} !important;\n    color: ${theme.colors.neutral.ink.light} !important;\n  }\n`;\n\nexport const DefaultDestructiveButton = styled(DefaultButton as any)`\n  color: ${theme.colors.secondary.red.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    border-color: ${theme.colors.secondary.red.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const PrimaryButton = styled(DefaultButton as any)`\n  background-color: var(--theme-primary, ${theme.colors.secondary.blue.base});\n  border-color: var(--theme-primary, ${theme.colors.secondary.blue.base});\n  color: var(--theme-on-primary, white);\n\n  &:hover {\n    background-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    border-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n  }\n\n  &:active {\n    background-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    border-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport const PrimaryDestructiveButton = styled(PrimaryButton as any)`\n  background-color: ${theme.colors.secondary.red.base};\n  border-color: ${theme.colors.secondary.red.base};\n  color: white;\n\n  &:hover {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const FlatButton = styled(BaseButton as any)`\n  border-color: transparent;\n  box-shadow: none;\n  color: ${theme.colors.neutral.ink.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.light};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: transparent;\n    border-color: transparent;\n  }\n`;\n\nexport const UnstyledButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nexport const LinkButton = styled(UnstyledButton)<ButtonDisplayProps>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-family: ${theme.text.link.fontFamily};\n  font-size: ${theme.text.link.fontSize};\n  line-height: ${theme.text.link.fontSize};\n  font-weight: ${theme.text.link.fontWeight};\n  line-height: ${theme.text.link.lineHeight};\n  text-decoration: ${theme.text.link.textDecoration};\n  color: ${theme.colors.secondary.blue.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  & > * + * {\n    margin-left: ${theme.sizes.xs};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow:\n      0 0 0 4px white,\n      0 0 0 8px ${theme.colors.secondary.blue.light};\n    border-radius: 4px;\n  }\n`;\n\nexport const LoadingWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n`;\n"],"names":[],"mappings":"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"}

package/dist/components/Button/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties, ElementType } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties } from 'react';
 import { WithTokensProps } from '../../hoc/withTokens/withTokens';
 export type ButtonVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat' | 'link' | 'unstyled';
 /**
@@ -18,6 +18,4 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithTokensPr
     loading?: boolean;
     /** Additional styles for mainContent */
     contentStyles?: CSSProperties;
-    /** Render as a different element type (e.g. 'a' for links) */
-    as?: ElementType;
 };

package/dist/components/DataGrid/DataGrid.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n      var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n    transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n    opacity: var(--pinned-left-shadow-opacity, 1);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n    opacity: var(--pinned-right-shadow-opacity, 1);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8iCAAA;AACA,aAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n      var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n    transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n    opacity: var(--pinned-left-shadow-opacity, 1);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n    opacity: var(--pinned-right-shadow-opacity, 1);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8iCAAA;AACA,aAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/DataGrid.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n      var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n    transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n    opacity: var(--pinned-left-shadow-opacity, 1);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n    opacity: var(--pinned-right-shadow-opacity, 1);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8iCAAA;AACA,aAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n      var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n    transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n    opacity: var(--pinned-left-shadow-opacity, 1);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n    opacity: var(--pinned-right-shadow-opacity, 1);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8iCAAA;AACA,aAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

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

@@ -14,7 +14,6 @@ export declare const PaginationButton: import("styled-components").StyledCompone
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
     contentStyles?: import("react").CSSProperties | undefined;
-    as?: import("react").ElementType | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
     rel?: string | undefined;

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
+var ScreenReaderOnly_module = require('./ScreenReaderOnly.module.scss.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ScreenReaderOnlyElement = styled__default.default.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--ejkp56" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
 /**
  * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
  *  * **This is not a replacement for `aria-label`.**
@@ -20,11 +20,10 @@ const ScreenReaderOnlyElement = styled__default.default.span.withConfig({ displa
  * **Example use cases:**
  * - Adding instructional cues and indicators
  * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with "Search orders"
- * - Skip to links to take the user to the main content (still need to be visibile when focused)
  * - Breadcrumb navigation, making it clear with a "you are here" screen reader text
  */
-const ScreenReaderOnly = ({ children }) => {
-    return React__default.default.createElement(ScreenReaderOnlyElement, null, children);
+const ScreenReaderOnly = ({ children, className, as: Component = 'span', ...rest }) => {
+    return (React__default.default.createElement(Component, { className: buildClassnames.buildClassnames([ScreenReaderOnly_module.screenReaderOnly, className]), ...rest }, children));
 };
 
 exports.ScreenReaderOnly = ScreenReaderOnly;

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderOnly.cjs","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype ScreenReaderOnlyProps = {\n  children: ReactNode;\n};\n\nconst ScreenReaderOnlyElement = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`;\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n *  * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Skip to links to take the user to the main content (still need to be visibile when focused)\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({ children }: ScreenReaderOnlyProps) => {\n  return <ScreenReaderOnlyElement>{children}</ScreenReaderOnlyElement>;\n};\n"],"names":["styled","React"],"mappings":";;;;;;;;;;AAOA,MAAM,uBAAuB,GAAGA,uBAAM,CAAC,IAAI,0NAU1C;AACD;;;;;;;;;;;;;AAaG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;AACtE,IAAA,OAAOC,sBAAA,CAAA,aAAA,CAAC,uBAAuB,EAAA,IAAA,EAAE,QAAQ,CAA2B;AACtE;;;;"}
+{"version":3,"file":"ScreenReaderOnly.cjs","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport styles from './ScreenReaderOnly.module.scss';\nimport { buildClassnames } from '../../utils';\n\ntype ScreenReaderOnlyProps = HTMLAttributes<HTMLElement> & {\n  children: ReactNode;\n  as?: ElementType;\n};\n\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n *  * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({\n  children,\n  className,\n  as: Component = 'span',\n  ...rest\n}: ScreenReaderOnlyProps) => {\n  return (\n    <Component className={buildClassnames([styles.screenReaderOnly, className])} {...rest}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;AASA;;;;;;;;;;;;AAYG;MACU,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,GAAG,IAAI,EACe,KAAI;IAC1B,QACEA,qCAAC,SAAS,EAAA,EAAC,SAAS,EAAEC,+BAAe,CAAC,CAACC,uBAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,EAClF,QAAQ,CACC;AAEhB;;;;"}

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.d.ts

@@ -1,6 +1,7 @@
-import React, { ReactNode } from 'react';
-type ScreenReaderOnlyProps = {
+import React, { ElementType, HTMLAttributes, ReactNode } from 'react';
+type ScreenReaderOnlyProps = HTMLAttributes<HTMLElement> & {
     children: ReactNode;
+    as?: ElementType;
 };
 /**
  * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
@@ -13,8 +14,7 @@ type ScreenReaderOnlyProps = {
  * **Example use cases:**
  * - Adding instructional cues and indicators
  * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with "Search orders"
- * - Skip to links to take the user to the main content (still need to be visibile when focused)
  * - Breadcrumb navigation, making it clear with a "you are here" screen reader text
  */
-export declare const ScreenReaderOnly: ({ children }: ScreenReaderOnlyProps) => React.JSX.Element;
+export declare const ScreenReaderOnly: ({ children, className, as: Component, ...rest }: ScreenReaderOnlyProps) => React.JSX.Element;
 export {};

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js

@@ -1,7 +1,8 @@
 import React__default from 'react';
-import styled from 'styled-components';
+import styles from './ScreenReaderOnly.module.scss.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 
-const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--ejkp56" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
 /**
  * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
  *  * **This is not a replacement for `aria-label`.**
@@ -13,11 +14,10 @@ const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--Scre
  * **Example use cases:**
  * - Adding instructional cues and indicators
  * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with "Search orders"
- * - Skip to links to take the user to the main content (still need to be visibile when focused)
  * - Breadcrumb navigation, making it clear with a "you are here" screen reader text
  */
-const ScreenReaderOnly = ({ children }) => {
-    return React__default.createElement(ScreenReaderOnlyElement, null, children);
+const ScreenReaderOnly = ({ children, className, as: Component = 'span', ...rest }) => {
+    return (React__default.createElement(Component, { className: buildClassnames([styles.screenReaderOnly, className]), ...rest }, children));
 };
 
 export { ScreenReaderOnly };

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport styled from 'styled-components';\n\ntype ScreenReaderOnlyProps = {\n  children: ReactNode;\n};\n\nconst ScreenReaderOnlyElement = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n`;\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n *  * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Skip to links to take the user to the main content (still need to be visibile when focused)\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({ children }: ScreenReaderOnlyProps) => {\n  return <ScreenReaderOnlyElement>{children}</ScreenReaderOnlyElement>;\n};\n"],"names":["React"],"mappings":";;;AAOA,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,0NAU1C;AACD;;;;;;;;;;;;;AAaG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;AACtE,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,uBAAuB,EAAA,IAAA,EAAE,QAAQ,CAA2B;AACtE;;;;"}
+{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport styles from './ScreenReaderOnly.module.scss';\nimport { buildClassnames } from '../../utils';\n\ntype ScreenReaderOnlyProps = HTMLAttributes<HTMLElement> & {\n  children: ReactNode;\n  as?: ElementType;\n};\n\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n *  * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({\n  children,\n  className,\n  as: Component = 'span',\n  ...rest\n}: ScreenReaderOnlyProps) => {\n  return (\n    <Component className={buildClassnames([styles.screenReaderOnly, className])} {...rest}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AASA;;;;;;;;;;;;AAYG;MACU,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,GAAG,IAAI,EACe,KAAI;IAC1B,QACEA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,EAClF,QAAQ,CACC;AAEhB;;;;"}

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._screenReaderOnly_pq7po_1 {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}");
+var styles = {"screenReaderOnly":"_screenReaderOnly_pq7po_1"};
+
+module.exports = styles;
+//# sourceMappingURL=ScreenReaderOnly.module.scss.cjs.map

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenReaderOnly.module.scss.cjs","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.module.scss"],"sourcesContent":[".screenReaderOnly {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6MAAA;AACA,aAAA,CAAA,kBAAA,CAAA,2BAAA;;;;"}

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._screenReaderOnly_pq7po_1 {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}");
+var styles = {"screenReaderOnly":"_screenReaderOnly_pq7po_1"};
+
+export { styles as default };
+//# sourceMappingURL=ScreenReaderOnly.module.scss.js.map

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenReaderOnly.module.scss.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.module.scss"],"sourcesContent":[".screenReaderOnly {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6MAAA;AACA,aAAA,CAAA,kBAAA,CAAA,2BAAA;;;;"}

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

@@ -9,5 +9,4 @@ export declare const ButtonSC: import("styled-components").StyledComponent<impor
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
     contentStyles?: import("react").CSSProperties | undefined;
-    as?: import("react").ElementType | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/theme/index.js

@@ -4,7 +4,7 @@ import { layers } from './modules/layers.js';
 import { radius } from './modules/radius.js';
 import { Shadows } from './modules/shadows.js';
 import { sizes } from './modules/sizes.js';
-import { text, common } from './modules/text.js';
+import { common, text } from './modules/text.js';
 import 'styled-components';
 
 const theme = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "14.5.0-beta-2",
+  "version": "14.5.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -139,7 +139,7 @@
     "@internationalized/date": "^3.5.4",
     "@popperjs/core": "^2.11.8",
     "@tanstack/react-table": "^8.21.2",
-    "framer-motion": "^6.5.1",
+    "framer-motion": ">=6.5.1",
     "lodash.throttle": "^4.1.1",
     "react": "^17.0.2",
     "react-aria-components": "^1.2.1",

package/dist/components/Banner/styled.cjs

@@ -1,49 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var Text = require('../Text/Text.cjs');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const BannerLayout = styled__default.default(BaseContainer.BaseContainer).withConfig({
-    shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),
-}) `
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  padding: 20px 24px 24px 24px;
-  border-radius: 4px;
-  ${({ accentColor }) => accentColor &&
-    `
-      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
-    `}
-  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
-`;
-const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--efzdvm" }) `display:flex;flex-direction:row;`;
-const Col = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1c3cv6m" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
-const IconCol = styled__default.default(Col).withConfig({
-    shouldForwardProp: (prop) => !['accentColor'].includes(prop),
-}) `
-  svg {
-    width: ${sizes.sizes.md};
-    height: ${sizes.sizes.md};
-    color: ${({ accentColor }) => accentColor};
-  }
-`;
-const ChildContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--1ryyp4c" }) `width:100%;`;
-const HeaderCol = styled__default.default(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--2c6441" }) `flex-grow:2;margin-right:12px;`;
-const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--53focc" }) `position:relative;top:-2px;`;
-
-exports.ChildContainer = ChildContainer;
-exports.Col = Col;
-exports.HeaderCol = HeaderCol;
-exports.IconCol = IconCol;
-exports.Pill = BannerLayout;
-exports.Row = Row;
-exports.Text = StyledText;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),\n})<PillProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  padding: 20px 24px 24px 24px;\n  border-radius: 4px;\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n    `}\n  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col).withConfig({\n  shouldForwardProp: (prop) => !['accentColor'].includes(prop),\n})<{ accentColor: string }>`\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n    color: ${({ accentColor }) => accentColor};\n  }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n  width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n  flex-grow: 2;\n  margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n  position: relative;\n  top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":["styled","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAY,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,UAAU,CAAC;AACpD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAChF,CAAA,CAAC,CAAW;;;;;;;AAOT,EAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;AAChF,IAAA,CAAA;sBACiB,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA;;AAGzE,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAKjC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAO1B,MAAM,OAAO,GAAGD,uBAAM,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC7D,CAAA,CAAC,CAAyB;;AAEd,WAAA,EAAAE,WAAK,CAAC,EAAE,CAAA;AACP,YAAA,EAAAA,WAAK,CAAC,EAAE,CAAA;AACT,WAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA;;;MAIhC,cAAc,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAGA,uBAAM,CAACG,SAAI,CAAC;;;;;;;;;;"}

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

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-declare const BannerLayout: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
-    className?: string | undefined;
-    accentColor?: string | undefined;
-    backgroundColor?: string | undefined;
-}, never>;
-declare const Row: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-declare const Col: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const IconCol: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
-    accentColor: string;
-}, never>;
-export declare const ChildContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-declare const HeaderCol: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-declare const StyledText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    as?: import("../Text").ValidTextTag | undefined;
-    muted?: boolean | undefined;
-    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
-} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
-export { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };

package/dist/components/Banner/styled.js

@@ -1,37 +0,0 @@
-import styled from 'styled-components';
-import { Text } from '../Text/Text.js';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
-import { sizes } from '../../theme/modules/sizes.js';
-
-const BannerLayout = styled(BaseContainer).withConfig({
-    shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),
-}) `
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  padding: 20px 24px 24px 24px;
-  border-radius: 4px;
-  ${({ accentColor }) => accentColor &&
-    `
-      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
-    `}
-  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
-`;
-const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--efzdvm" }) `display:flex;flex-direction:row;`;
-const Col = styled(BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1c3cv6m" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
-const IconCol = styled(Col).withConfig({
-    shouldForwardProp: (prop) => !['accentColor'].includes(prop),
-}) `
-  svg {
-    width: ${sizes.md};
-    height: ${sizes.md};
-    color: ${({ accentColor }) => accentColor};
-  }
-`;
-const ChildContainer = styled(BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--1ryyp4c" }) `width:100%;`;
-const HeaderCol = styled(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--2c6441" }) `flex-grow:2;margin-right:12px;`;
-const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--53focc" }) `position:relative;top:-2px;`;
-
-export { ChildContainer, Col, HeaderCol, IconCol, BannerLayout as Pill, Row, StyledText as Text };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),\n})<PillProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  padding: 20px 24px 24px 24px;\n  border-radius: 4px;\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n    `}\n  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col).withConfig({\n  shouldForwardProp: (prop) => !['accentColor'].includes(prop),\n})<{ accentColor: string }>`\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n    color: ${({ accentColor }) => accentColor};\n  }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n  width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n  flex-grow: 2;\n  margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n  position: relative;\n  top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":[],"mappings":";;;;;AAOA,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AACpD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAChF,CAAA,CAAC,CAAW;;;;;;;AAOT,EAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;AAChF,IAAA,CAAA;sBACiB,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA;;AAGzE,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAKjC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAO1B,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC7D,CAAA,CAAC,CAAyB;;AAEd,WAAA,EAAA,KAAK,CAAC,EAAE,CAAA;AACP,YAAA,EAAA,KAAK,CAAC,EAAE,CAAA;AACT,WAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA;;;MAIhC,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;;;;"}

package/dist/components/Button/Button.module.scss.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-
-___$insertStyle("._heading-xxl_1fh1o_1 {\n  font-family: var(--text-heading-xxl-font-family);\n  font-style: var(--text-heading-xxl-font-style);\n  font-weight: var(--text-heading-xxl-font-weight);\n  font-size: var(--text-heading-xxl-font-size);\n  line-height: var(--text-heading-xxl-line-height);\n  color: var(--text-heading-xxl-color);\n  text-decoration: var(--text-heading-xxl-text-decoration);\n  letter-spacing: var(--text-heading-xxl-letter-spacing);\n}\n\n._heading-xl_1fh1o_12 {\n  font-family: var(--text-heading-xl-font-family);\n  font-style: var(--text-heading-xl-font-style);\n  font-weight: var(--text-heading-xl-font-weight);\n  font-size: var(--text-heading-xl-font-size);\n  line-height: var(--text-heading-xl-line-height);\n  color: var(--text-heading-xl-color);\n  text-decoration: var(--text-heading-xl-text-decoration);\n  letter-spacing: var(--text-heading-xl-letter-spacing);\n}\n\n._heading-large_1fh1o_23 {\n  font-family: var(--text-heading-large-font-family);\n  font-style: var(--text-heading-large-font-style);\n  font-weight: var(--text-heading-large-font-weight);\n  font-size: var(--text-heading-large-font-size);\n  line-height: var(--text-heading-large-line-height);\n  color: var(--text-heading-large-color);\n  text-decoration: var(--text-heading-large-text-decoration);\n  letter-spacing: var(--text-heading-large-letter-spacing);\n}\n\n._heading-medium_1fh1o_34 {\n  font-family: var(--text-heading-medium-font-family);\n  font-style: var(--text-heading-medium-font-style);\n  font-weight: var(--text-heading-medium-font-weight);\n  font-size: var(--text-heading-medium-font-size);\n  line-height: var(--text-heading-medium-line-height);\n  color: var(--text-heading-medium-color);\n  text-decoration: var(--text-heading-medium-text-decoration);\n  letter-spacing: var(--text-heading-medium-letter-spacing);\n}\n\n._heading-small_1fh1o_45 {\n  font-family: var(--text-heading-small-font-family);\n  font-style: var(--text-heading-small-font-style);\n  font-weight: var(--text-heading-small-font-weight);\n  font-size: var(--text-heading-small-font-size);\n  line-height: var(--text-heading-small-line-height);\n  color: var(--text-heading-small-color);\n  text-decoration: var(--text-heading-small-text-decoration);\n  letter-spacing: var(--text-heading-small-letter-spacing);\n}\n\n._heading-table_1fh1o_56 {\n  font-family: var(--text-heading-table-font-family);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  font-size: var(--text-heading-table-font-size);\n  line-height: var(--text-heading-table-line-height);\n  color: var(--text-heading-table-color);\n  text-decoration: var(--text-heading-table-text-decoration);\n  letter-spacing: var(--text-heading-table-letter-spacing);\n}\n\n._subheading-large_1fh1o_67 {\n  font-family: var(--text-subheading-large-font-family);\n  font-style: var(--text-subheading-large-font-style);\n  font-weight: var(--text-subheading-large-font-weight);\n  font-size: var(--text-subheading-large-font-size);\n  line-height: var(--text-subheading-large-line-height);\n  color: var(--text-subheading-large-color);\n  text-decoration: var(--text-subheading-large-text-decoration);\n  letter-spacing: var(--text-subheading-large-letter-spacing);\n}\n\n._subheading-medium_1fh1o_78 {\n  font-family: var(--text-subheading-medium-font-family);\n  font-style: var(--text-subheading-medium-font-style);\n  font-weight: var(--text-subheading-medium-font-weight);\n  font-size: var(--text-subheading-medium-font-size);\n  line-height: var(--text-subheading-medium-line-height);\n  color: var(--text-subheading-medium-color);\n  text-decoration: var(--text-subheading-medium-text-decoration);\n  letter-spacing: var(--text-subheading-medium-letter-spacing);\n}\n\n._subheading-small_1fh1o_89 {\n  font-family: var(--text-subheading-small-font-family);\n  font-style: var(--text-subheading-small-font-style);\n  font-weight: var(--text-subheading-small-font-weight);\n  font-size: var(--text-subheading-small-font-size);\n  line-height: var(--text-subheading-small-line-height);\n  color: var(--text-subheading-small-color);\n  text-decoration: var(--text-subheading-small-text-decoration);\n  letter-spacing: var(--text-subheading-small-letter-spacing);\n}\n\n._subheading-small-bold_1fh1o_100 {\n  font-family: var(--text-subheading-small-bold-font-family);\n  font-style: var(--text-subheading-small-bold-font-style);\n  font-weight: var(--text-subheading-small-bold-font-weight);\n  font-size: var(--text-subheading-small-bold-font-size);\n  line-height: var(--text-subheading-small-bold-line-height);\n  color: var(--text-subheading-small-bold-color);\n  text-decoration: var(--text-subheading-small-bold-text-decoration);\n  letter-spacing: var(--text-subheading-small-bold-letter-spacing);\n}\n\n._body_1fh1o_111 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n}\n\n._body-small_1fh1o_122 {\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  font-size: var(--text-body-small-font-size);\n  line-height: var(--text-body-small-line-height);\n  color: var(--text-body-small-color);\n  text-decoration: var(--text-body-small-text-decoration);\n  letter-spacing: var(--text-body-small-letter-spacing);\n}\n\n._body-bold_1fh1o_133 {\n  font-family: var(--text-body-bold-font-family);\n  font-style: var(--text-body-bold-font-style);\n  font-weight: var(--text-body-bold-font-weight);\n  font-size: var(--text-body-bold-font-size);\n  line-height: var(--text-body-bold-line-height);\n  color: var(--text-body-bold-color);\n  text-decoration: var(--text-body-bold-text-decoration);\n  letter-spacing: var(--text-body-bold-letter-spacing);\n}\n\n._body-bold-dark_1fh1o_144 {\n  font-family: var(--text-body-bold-dark-font-family);\n  font-style: var(--text-body-bold-dark-font-style);\n  font-weight: var(--text-body-bold-dark-font-weight);\n  font-size: var(--text-body-bold-dark-font-size);\n  line-height: var(--text-body-bold-dark-line-height);\n  color: var(--text-body-bold-dark-color);\n  text-decoration: var(--text-body-bold-dark-text-decoration);\n  letter-spacing: var(--text-body-bold-dark-letter-spacing);\n}\n\n._body-small-bold_1fh1o_155 {\n  font-family: var(--text-body-small-bold-font-family);\n  font-style: var(--text-body-small-bold-font-style);\n  font-weight: var(--text-body-small-bold-font-weight);\n  font-size: var(--text-body-small-bold-font-size);\n  line-height: var(--text-body-small-bold-line-height);\n  color: var(--text-body-small-bold-color);\n  text-decoration: var(--text-body-small-bold-text-decoration);\n  letter-spacing: var(--text-body-small-bold-letter-spacing);\n}\n\n._button_1fh1o_166 {\n  font-family: var(--text-button-font-family);\n  font-style: var(--text-button-font-style);\n  font-weight: var(--text-button-font-weight);\n  font-size: var(--text-button-font-size);\n  line-height: var(--text-button-line-height);\n  color: var(--text-button-color);\n  text-decoration: var(--text-button-text-decoration);\n  letter-spacing: var(--text-button-letter-spacing);\n}\n\n._button-small_1fh1o_177 {\n  font-family: var(--text-button-small-font-family);\n  font-style: var(--text-button-small-font-style);\n  font-weight: var(--text-button-small-font-weight);\n  font-size: var(--text-button-small-font-size);\n  line-height: var(--text-button-small-line-height);\n  color: var(--text-button-small-color);\n  text-decoration: var(--text-button-small-text-decoration);\n  letter-spacing: var(--text-button-small-letter-spacing);\n}\n\n._link-large_1fh1o_188 {\n  font-family: var(--text-link-large-font-family);\n  font-style: var(--text-link-large-font-style);\n  font-weight: var(--text-link-large-font-weight);\n  font-size: var(--text-link-large-font-size);\n  line-height: var(--text-link-large-line-height);\n  color: var(--text-link-large-color);\n  text-decoration: var(--text-link-large-text-decoration);\n  letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._link-medium_1fh1o_199 {\n  font-family: var(--text-link-medium-font-family);\n  font-style: var(--text-link-medium-font-style);\n  font-weight: var(--text-link-medium-font-weight);\n  font-size: var(--text-link-medium-font-size);\n  line-height: var(--text-link-medium-line-height);\n  color: var(--text-link-medium-color);\n  text-decoration: var(--text-link-medium-text-decoration);\n  letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._link_1fh1o_188 {\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n}\n\n._link-small_1fh1o_221 {\n  font-family: var(--text-link-small-font-family);\n  font-style: var(--text-link-small-font-style);\n  font-weight: var(--text-link-small-font-weight);\n  font-size: var(--text-link-small-font-size);\n  line-height: var(--text-link-small-line-height);\n  color: var(--text-link-small-color);\n  text-decoration: var(--text-link-small-text-decoration);\n  letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._input-label_1fh1o_232 {\n  font-family: var(--text-input-label-font-family);\n  font-style: var(--text-input-label-font-style);\n  font-weight: var(--text-input-label-font-weight);\n  font-size: var(--text-input-label-font-size);\n  line-height: var(--text-input-label-line-height);\n  color: var(--text-input-label-color);\n  text-decoration: var(--text-input-label-text-decoration);\n  letter-spacing: var(--text-input-label-letter-spacing);\n}\n\n._input-label-small_1fh1o_243 {\n  font-family: var(--text-input-label-small-font-family);\n  font-style: var(--text-input-label-small-font-style);\n  font-weight: var(--text-input-label-small-font-weight);\n  font-size: var(--text-input-label-small-font-size);\n  line-height: var(--text-input-label-small-line-height);\n  color: var(--text-input-label-small-color);\n  text-decoration: var(--text-input-label-small-text-decoration);\n  letter-spacing: var(--text-input-label-small-letter-spacing);\n}\n\n._hint-text_1fh1o_254 {\n  font-family: var(--text-hint-text-font-family);\n  font-style: var(--text-hint-text-font-style);\n  font-weight: var(--text-hint-text-font-weight);\n  font-size: var(--text-hint-text-font-size);\n  line-height: var(--text-hint-text-line-height);\n  color: var(--text-hint-text-color);\n  text-decoration: var(--text-hint-text-text-decoration);\n  letter-spacing: var(--text-hint-text-letter-spacing);\n}\n\n._placeholder_1fh1o_265 {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n\n._placeholder-small_1fh1o_276 {\n  font-family: var(--text-placeholder-small-font-family);\n  font-style: var(--text-placeholder-small-font-style);\n  font-weight: var(--text-placeholder-small-font-weight);\n  font-size: var(--text-placeholder-small-font-size);\n  line-height: var(--text-placeholder-small-line-height);\n  color: var(--text-placeholder-small-color);\n  text-decoration: var(--text-placeholder-small-text-decoration);\n  letter-spacing: var(--text-placeholder-small-letter-spacing);\n}\n\n._placeholder-code_1fh1o_287 {\n  font-family: var(--text-placeholder-code-font-family);\n  font-style: var(--text-placeholder-code-font-style);\n  font-weight: var(--text-placeholder-code-font-weight);\n  font-size: var(--text-placeholder-code-font-size);\n  line-height: var(--text-placeholder-code-line-height);\n  color: var(--text-placeholder-code-color);\n  text-decoration: var(--text-placeholder-code-text-decoration);\n  letter-spacing: var(--text-placeholder-code-letter-spacing);\n}\n\n._placeholder-code-small_1fh1o_298 {\n  font-family: var(--text-placeholder-code-small-font-family);\n  font-style: var(--text-placeholder-code-small-font-style);\n  font-weight: var(--text-placeholder-code-small-font-weight);\n  font-size: var(--text-placeholder-code-small-font-size);\n  line-height: var(--text-placeholder-code-small-line-height);\n  color: var(--text-placeholder-code-small-color);\n  text-decoration: var(--text-placeholder-code-small-text-decoration);\n  letter-spacing: var(--text-placeholder-code-small-letter-spacing);\n}\n\n._error_1fh1o_309 {\n  font-family: var(--text-error-font-family);\n  font-style: var(--text-error-font-style);\n  font-weight: var(--text-error-font-weight);\n  font-size: var(--text-error-font-size);\n  line-height: var(--text-error-line-height);\n  color: var(--text-error-color);\n  text-decoration: var(--text-error-text-decoration);\n  letter-spacing: var(--text-error-letter-spacing);\n}\n\n._error-small_1fh1o_320 {\n  font-family: var(--text-error-small-font-family);\n  font-style: var(--text-error-small-font-style);\n  font-weight: var(--text-error-small-font-weight);\n  font-size: var(--text-error-small-font-size);\n  line-height: var(--text-error-small-line-height);\n  color: var(--text-error-small-color);\n  text-decoration: var(--text-error-small-text-decoration);\n  letter-spacing: var(--text-error-small-letter-spacing);\n}\n\n._success-small_1fh1o_331 {\n  font-family: var(--text-success-small-font-family);\n  font-style: var(--text-success-small-font-style);\n  font-weight: var(--text-success-small-font-weight);\n  font-size: var(--text-success-small-font-size);\n  line-height: var(--text-success-small-line-height);\n  color: var(--text-success-small-color);\n  text-decoration: var(--text-success-small-text-decoration);\n  letter-spacing: var(--text-success-small-letter-spacing);\n}\n\n._base_1fh1o_342 {\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: var(--font-family);\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n}\n._base_1fh1o_342:hover {\n  cursor: pointer;\n}\n._base_1fh1o_342:disabled {\n  pointer-events: none;\n  cursor: unset !important;\n}\n\n._base-size_1fh1o_364 {\n  --outline-width: 4px;\n  height: 40px;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 8px;\n  font-size: 16px;\n  line-height: 16px;\n}\n\n._base-size_1fh1o_364._hasIcon_1fh1o_374 {\n  padding-left: 16px;\n}\n\n._base-size_1fh1o_364._hasDropdown_1fh1o_378 {\n  padding-right: 16px;\n}\n\n._sm-size_1fh1o_382 {\n  --outline-width: 2px;\n  height: 32px;\n  padding-left: 16px;\n  padding-right: 16px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 14px;\n}\n\n._sm-size_1fh1o_382._hasIcon_1fh1o_374 {\n  padding-left: 8px;\n}\n\n._sm-size_1fh1o_382._hasDropdown_1fh1o_378 {\n  padding-right: 8px;\n}\n\n._base_1fh1o_342:not(._hasText_1fh1o_400) {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n._default-variant_1fh1o_405 {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._default-variant_1fh1o_405:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._default-variant_1fh1o_405:active {\n  background-color: var(--colors-neutral-grey-lightest);\n  border-color: var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._default-variant_1fh1o_405:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._default-variant_1fh1o_405:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._default-variant_1fh1o_405._hasText_1fh1o_400 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._default-variant_1fh1o_405:not(._hasText_1fh1o_400) {\n  color: var(--colors-secondary-blue-base);\n}\n\n._destructive-variant_1fh1o_437 {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: var(--colors-secondary-red-base);\n}\n._destructive-variant_1fh1o_437:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n  color: var(--colors-secondary-red-dark);\n}\n._destructive-variant_1fh1o_437:active {\n  background-color: var(--colors-neutral-grey-lightest);\n  border-color: var(--colors-secondary-red-base);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  color: var(--colors-secondary-red-dark);\n}\n._destructive-variant_1fh1o_437:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  outline: 0;\n}\n._destructive-variant_1fh1o_437:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._primary-variant_1fh1o_464 {\n  background-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  border-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  color: var(--theme-on-primary, white);\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._primary-variant_1fh1o_464:hover {\n  background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n}\n._primary-variant_1fh1o_464:active {\n  background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._primary-variant_1fh1o_464:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._primary-variant_1fh1o_464:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._primaryDestructive-variant_1fh1o_490 {\n  background-color: var(--colors-secondary-red-base);\n  border-color: var(--colors-secondary-red-base);\n  color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._primaryDestructive-variant_1fh1o_490:hover {\n  background-color: var(--colors-secondary-red-dark);\n  border-color: var(--colors-secondary-red-dark);\n}\n._primaryDestructive-variant_1fh1o_490:active {\n  background-color: var(--colors-secondary-red-dark);\n  border-color: var(--colors-secondary-red-dark);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n}\n._primaryDestructive-variant_1fh1o_490:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  outline: 0;\n}\n._primaryDestructive-variant_1fh1o_490:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._flat-variant_1fh1o_516 {\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--colors-neutral-ink-base);\n}\n._flat-variant_1fh1o_516:hover {\n  background-color: var(--colors-neutral-grey-light);\n}\n._flat-variant_1fh1o_516:active {\n  background-color: var(--colors-neutral-grey-light);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._flat-variant_1fh1o_516:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._flat-variant_1fh1o_516:disabled {\n  background-color: transparent;\n  border-color: transparent;\n}\n\n._link-variant_1fh1o_537 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n  letter-spacing: normal;\n  color: var(--colors-secondary-blue-base);\n}\n._link-variant_1fh1o_537:hover {\n  cursor: pointer;\n  color: var(--colors-secondary-blue-dark);\n}\n._link-variant_1fh1o_537 > * + * {\n  margin-left: var(--sizes-xs);\n}\n._link-variant_1fh1o_537:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 4px white, 0 0 0 8px var(--colors-secondary-blue-light);\n  border-radius: 4px;\n}\n\n._unstyled-variant_1fh1o_570 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n}\n._unstyled-variant_1fh1o_570:hover {\n  cursor: pointer;\n}\n\n._mainContent_1fh1o_581 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n}\n._mainContent_1fh1o_581 svg {\n  width: var(--button-icon-size);\n  height: var(--button-icon-size);\n}\n\n._hasText_1fh1o_400 ._mainContent_1fh1o_581 {\n  gap: var(--sizes-sm);\n}\n\n._mainContent_1fh1o_581._loading_1fh1o_595 {\n  opacity: 0;\n}\n\n._loadingWrapper_1fh1o_599 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n}");
-var styles = {"heading-xxl":"_heading-xxl_1fh1o_1","heading-xl":"_heading-xl_1fh1o_12","heading-large":"_heading-large_1fh1o_23","heading-medium":"_heading-medium_1fh1o_34","heading-small":"_heading-small_1fh1o_45","heading-table":"_heading-table_1fh1o_56","subheading-large":"_subheading-large_1fh1o_67","subheading-medium":"_subheading-medium_1fh1o_78","subheading-small":"_subheading-small_1fh1o_89","subheading-small-bold":"_subheading-small-bold_1fh1o_100","body":"_body_1fh1o_111","body-small":"_body-small_1fh1o_122","body-bold":"_body-bold_1fh1o_133","body-bold-dark":"_body-bold-dark_1fh1o_144","body-small-bold":"_body-small-bold_1fh1o_155","button":"_button_1fh1o_166","button-small":"_button-small_1fh1o_177","link-large":"_link-large_1fh1o_188","link-medium":"_link-medium_1fh1o_199","link":"_link_1fh1o_188","link-small":"_link-small_1fh1o_221","input-label":"_input-label_1fh1o_232","input-label-small":"_input-label-small_1fh1o_243","hint-text":"_hint-text_1fh1o_254","placeholder":"_placeholder_1fh1o_265","placeholder-small":"_placeholder-small_1fh1o_276","placeholder-code":"_placeholder-code_1fh1o_287","placeholder-code-small":"_placeholder-code-small_1fh1o_298","error":"_error_1fh1o_309","error-small":"_error-small_1fh1o_320","success-small":"_success-small_1fh1o_331","base":"_base_1fh1o_342","base-size":"_base-size_1fh1o_364","hasIcon":"_hasIcon_1fh1o_374","hasDropdown":"_hasDropdown_1fh1o_378","sm-size":"_sm-size_1fh1o_382","hasText":"_hasText_1fh1o_400","default-variant":"_default-variant_1fh1o_405","destructive-variant":"_destructive-variant_1fh1o_437","primary-variant":"_primary-variant_1fh1o_464","primaryDestructive-variant":"_primaryDestructive-variant_1fh1o_490","flat-variant":"_flat-variant_1fh1o_516","link-variant":"_link-variant_1fh1o_537","unstyled-variant":"_unstyled-variant_1fh1o_570","mainContent":"_mainContent_1fh1o_581","loading":"_loading_1fh1o_595","loadingWrapper":"_loadingWrapper_1fh1o_599"};
-
-module.exports = styles;
-//# sourceMappingURL=Button.module.scss.cjs.map

package/dist/components/Button/Button.module.scss.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.module.scss.cjs","sources":["../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n// Base class (shared by default, primary, destructive, primaryDestructive, flat)\n\n.base {\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: var(--font-family);\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    pointer-events: none;\n    cursor: unset !important;\n  }\n}\n\n// Size classes\n\n.base-size {\n  --outline-width: 4px;\n\n  height: 40px;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 8px;\n  font-size: 16px;\n  line-height: 16px;\n}\n\n.base-size.hasIcon {\n  padding-left: 16px;\n}\n\n.base-size.hasDropdown {\n  padding-right: 16px;\n}\n\n.sm-size {\n  --outline-width: 2px;\n\n  height: 32px;\n  padding-left: 16px;\n  padding-right: 16px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 14px;\n}\n\n.sm-size.hasIcon {\n  padding-left: 8px;\n}\n\n.sm-size.hasDropdown {\n  padding-right: 8px;\n}\n\n// Icon-only (no text) overrides all padding to 8px\n.base:not(.hasText) {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n// Variant: default\n\n.default-variant {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 15%);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-lightest);\n    border-color: var(--colors-secondary-blue-base);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Default variant conditional color based on hasText\n.default-variant.hasText {\n  color: var(--colors-neutral-ink-base);\n}\n\n.default-variant:not(.hasText) {\n  color: var(--colors-secondary-blue-base);\n}\n\n// Variant: destructive (extends default visually)\n\n.destructive-variant {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 15%);\n  color: var(--colors-secondary-red-base);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n    color: var(--colors-secondary-red-dark);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-lightest);\n    border-color: var(--colors-secondary-red-base);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    color: var(--colors-secondary-red-dark);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: primary\n\n.primary-variant {\n  background-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  border-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  color: var(--theme-on-primary, white);\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 15%);\n\n  &:hover {\n    background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  }\n\n  &:active {\n    background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: primaryDestructive\n\n.primaryDestructive-variant {\n  background-color: var(--colors-secondary-red-base);\n  border-color: var(--colors-secondary-red-base);\n  color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 15%);\n\n  &:hover {\n    background-color: var(--colors-secondary-red-dark);\n    border-color: var(--colors-secondary-red-dark);\n  }\n\n  &:active {\n    background-color: var(--colors-secondary-red-dark);\n    border-color: var(--colors-secondary-red-dark);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: flat\n\n.flat-variant {\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--colors-neutral-ink-base);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-light);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-light);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}\n\n// Variant: link (standalone — does NOT use .base)\n\n.link-variant {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n\n  @include text.link;\n\n  // Override mixin's letter-spacing: the SC version never set it\n  letter-spacing: normal;\n  color: var(--colors-secondary-blue-base);\n\n  &:hover {\n    cursor: pointer;\n    color: var(--colors-secondary-blue-dark);\n  }\n\n  & > * + * {\n    margin-left: var(--sizes-xs);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow:\n      0 0 0 4px white,\n      0 0 0 8px var(--colors-secondary-blue-light);\n    border-radius: 4px;\n  }\n}\n\n// Variant: unstyled (standalone — does NOT use .base)\n\n.unstyled-variant {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n// Sub-elements\n\n.mainContent {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n\n  svg {\n    width: var(--button-icon-size);\n    height: var(--button-icon-size);\n  }\n}\n\n.hasText .mainContent {\n  gap: var(--sizes-sm);\n}\n\n.mainContent.loading {\n  opacity: 0;\n}\n\n.loadingWrapper {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,qurBAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,kCAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,8BAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,qBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,4BAAA,CAAA,uCAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,2BAAA;;;;"}