@veeqo/ui 15.13.0 → 15.14.1

package/dist/components/Alerts/Alert/types.d.ts

@@ -1,13 +1,14 @@
 import { ReactNode } from 'react';
 import { ActionProps } from '../../Action/types';
 import { AlertColours, BaseAlertProps } from '../types';
+import { DataAttributes } from '../../types';
 /** Controls the padding density of the alert */
 export type AlertSizes = 'base' | 'sm' | 'xs';
 /** Direction of content flow */
 export type AlertDirection = 'horizontal' | 'vertical';
 export type AlertAction = {
     label: string;
-} & ActionProps<'button'>;
+} & ActionProps<'button'> & DataAttributes;
 export type AlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
     /** Controls padding density */
     size?: AlertSizes;

package/dist/components/Modal/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n  /** Whether the modal is visible. */\n  shouldShow: boolean;\n  /** Show the close button in the header. */\n  showHeaderCloseButton?: boolean;\n  /** Prevent the modal from closing via backdrop click or ESC. */\n  preventClose?: boolean;\n  /** Remove internal padding from content area. */\n  fullBleed?: boolean;\n  /** Size of the modal. */\n  size?: ModalSizes;\n  /** Display type — standard modal or side drawer. */\n  displayMode?: ModalTypes;\n  /** Custom inline styles applied to the dialog element. */\n  style?: CSSProperties;\n  /** Handler called when close is triggered. Return `false` to cancel. */\n  onClose: () => void | boolean;\n  /** Modal body content. */\n  children?: React.ReactNode;\n  /** Additional CSS class applied to the dialog element. */\n  className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  /** Custom ReactNode replacing the default header. */\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  /** Custom ReactNode replacing the default footer. */\n  footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n  /** Display mode set to a side drawer direction. */\n  displayMode: 'leftDrawer' | 'rightDrawer';\n  /** Appearance style (applies to side drawers). */\n  appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  /** Title text shown in the default header. */\n  headerTitle: string;\n  /** Subtitle text shown below the header title. */\n  headerSubtitle?: string;\n};\n\ntype ModalType = {\n  /** Display mode set to standard centered modal. */\n  displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'>;\ntype DefaultFooterOptions = {\n  /** Action buttons on the left side of the footer. */\n  leftActions?: Action[];\n  /** Action buttons on the right side of the footer. */\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n  return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":";;AAgFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\nimport { DataAttributes } from '../types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n  /** Whether the modal is visible. */\n  shouldShow: boolean;\n  /** Show the close button in the header. */\n  showHeaderCloseButton?: boolean;\n  /** Prevent the modal from closing via backdrop click or ESC. */\n  preventClose?: boolean;\n  /** Remove internal padding from content area. */\n  fullBleed?: boolean;\n  /** Size of the modal. */\n  size?: ModalSizes;\n  /** Display type — standard modal or side drawer. */\n  displayMode?: ModalTypes;\n  /** Custom inline styles applied to the dialog element. */\n  style?: CSSProperties;\n  /** Handler called when close is triggered. Return `false` to cancel. */\n  onClose: () => void | boolean;\n  /** Modal body content. */\n  children?: React.ReactNode;\n  /** Additional CSS class applied to the dialog element. */\n  className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  /** Custom ReactNode replacing the default header. */\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  /** Custom ReactNode replacing the default footer. */\n  footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n  /** Display mode set to a side drawer direction. */\n  displayMode: 'leftDrawer' | 'rightDrawer';\n  /** Appearance style (applies to side drawers). */\n  appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  /** Title text shown in the default header. */\n  headerTitle: string;\n  /** Subtitle text shown below the header title. */\n  headerSubtitle?: string;\n};\n\ntype ModalType = {\n  /** Display mode set to standard centered modal. */\n  displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'> & DataAttributes;\ntype DefaultFooterOptions = {\n  /** Action buttons on the left side of the footer. */\n  leftActions?: Action[];\n  /** Action buttons on the right side of the footer. */\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n  return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":";;AAiFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;;;"}

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

@@ -1,5 +1,6 @@
 import { CSSProperties, HTMLAttributes } from 'react';
 import { ActionProps } from '../Action/types';
+import { DataAttributes } from '../types';
 export type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';
 export type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';
 export type ModalAppearance = 'primary' | 'secondary';
@@ -51,7 +52,7 @@ type ModalType = {
 };
 export type Action = {
     label: string;
-} & ActionProps<'button'>;
+} & ActionProps<'button'> & DataAttributes;
 type DefaultFooterOptions = {
     /** Action buttons on the left side of the footer. */
     leftActions?: Action[];

package/dist/components/Modal/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n  /** Whether the modal is visible. */\n  shouldShow: boolean;\n  /** Show the close button in the header. */\n  showHeaderCloseButton?: boolean;\n  /** Prevent the modal from closing via backdrop click or ESC. */\n  preventClose?: boolean;\n  /** Remove internal padding from content area. */\n  fullBleed?: boolean;\n  /** Size of the modal. */\n  size?: ModalSizes;\n  /** Display type — standard modal or side drawer. */\n  displayMode?: ModalTypes;\n  /** Custom inline styles applied to the dialog element. */\n  style?: CSSProperties;\n  /** Handler called when close is triggered. Return `false` to cancel. */\n  onClose: () => void | boolean;\n  /** Modal body content. */\n  children?: React.ReactNode;\n  /** Additional CSS class applied to the dialog element. */\n  className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  /** Custom ReactNode replacing the default header. */\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  /** Custom ReactNode replacing the default footer. */\n  footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n  /** Display mode set to a side drawer direction. */\n  displayMode: 'leftDrawer' | 'rightDrawer';\n  /** Appearance style (applies to side drawers). */\n  appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  /** Title text shown in the default header. */\n  headerTitle: string;\n  /** Subtitle text shown below the header title. */\n  headerSubtitle?: string;\n};\n\ntype ModalType = {\n  /** Display mode set to standard centered modal. */\n  displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'>;\ntype DefaultFooterOptions = {\n  /** Action buttons on the left side of the footer. */\n  leftActions?: Action[];\n  /** Action buttons on the right side of the footer. */\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n  return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":"AAgFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\nimport { DataAttributes } from '../types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n  /** Whether the modal is visible. */\n  shouldShow: boolean;\n  /** Show the close button in the header. */\n  showHeaderCloseButton?: boolean;\n  /** Prevent the modal from closing via backdrop click or ESC. */\n  preventClose?: boolean;\n  /** Remove internal padding from content area. */\n  fullBleed?: boolean;\n  /** Size of the modal. */\n  size?: ModalSizes;\n  /** Display type — standard modal or side drawer. */\n  displayMode?: ModalTypes;\n  /** Custom inline styles applied to the dialog element. */\n  style?: CSSProperties;\n  /** Handler called when close is triggered. Return `false` to cancel. */\n  onClose: () => void | boolean;\n  /** Modal body content. */\n  children?: React.ReactNode;\n  /** Additional CSS class applied to the dialog element. */\n  className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  /** Custom ReactNode replacing the default header. */\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  /** Custom ReactNode replacing the default footer. */\n  footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n  /** Display mode set to a side drawer direction. */\n  displayMode: 'leftDrawer' | 'rightDrawer';\n  /** Appearance style (applies to side drawers). */\n  appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  /** Title text shown in the default header. */\n  headerTitle: string;\n  /** Subtitle text shown below the header title. */\n  headerSubtitle?: string;\n};\n\ntype ModalType = {\n  /** Display mode set to standard centered modal. */\n  displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'> & DataAttributes;\ntype DefaultFooterOptions = {\n  /** Action buttons on the left side of the footer. */\n  leftActions?: Action[];\n  /** Action buttons on the right side of the footer. */\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n  return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":"AAiFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;"}

package/dist/components/Modal/types.test-d.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Type-only assertions for `Action` in Modal's `leftActions`/`rightActions`.
+ *
+ * Tracks VQCL-8277 — consumers need to pass arbitrary `data-*` attributes
+ * (e.g. `data-pensieve-action`) on action descriptors without `as` casts
+ * or `@ts-expect-error` suppressions. The file is never executed; tsc
+ * checks the assignments at build time.
+ */
+export {};

package/dist/components/types.d.ts

@@ -22,3 +22,13 @@ export type FormComponentProps = {
     disabled?: boolean;
     compact?: boolean;
 };
+/**
+ * Allows arbitrary `data-*` attributes on a type. React's built-in `HTMLAttributes`
+ * permits `data-*` attributes in JSX but not in plain object literals, so we add this
+ * template-literal index signature wherever a component accepts an array of action
+ * descriptors (e.g. `Modal#rightActions`, `Alert#rightActions`) and consumers need to
+ * pass analytics attributes like `data-pensieve-action`.
+ */
+export type DataAttributes = {
+    [key: `data-${string}`]: string | undefined;
+};

package/dist/utils/forms/form.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._fullStyles_1x1rs_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1x1rs_1:disabled, ._fullStyles_1x1rs_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1x1rs_1._compact_1x1rs_12 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1x1rs_1._error_1x1rs_16 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1x1rs_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1x1rs_1::placeholder {\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._fullStyles_1x1rs_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1x1rs_40 {\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  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_1x1rs_62 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_1x1rs_62 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_1x1rs_62 > *:focus, ._inputGroup_1x1rs_62 > *:active {\n  z-index: 5;\n}\n._inputGroup_1x1rs_62 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_1x1rs_62 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_1x1rs_62 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
-var formStyles = {"fullStyles":"_fullStyles_1x1rs_1","compact":"_compact_1x1rs_12","error":"_error_1x1rs_16","base":"_base_1x1rs_40","inputGroup":"_inputGroup_1x1rs_62"};
+___$insertStyle("._fullStyles_x8hsa_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_x8hsa_1:disabled, ._fullStyles_x8hsa_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_x8hsa_1._compact_x8hsa_12 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_x8hsa_1._error_x8hsa_16 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_x8hsa_1:focus {\n  border-color: var(--colors-secondary-blue-base);\n  outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n  outline-offset: var(--sizes-line);\n}\n._fullStyles_x8hsa_1::placeholder {\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._fullStyles_x8hsa_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_x8hsa_40 {\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  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_x8hsa_40._inputGroup_x8hsa_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_x8hsa_40._inputGroup_x8hsa_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_x8hsa_40._inputGroup_x8hsa_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_x8hsa_62 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_x8hsa_62 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_x8hsa_62 > *:focus, ._inputGroup_x8hsa_62 > *:active {\n  z-index: 5;\n}\n._inputGroup_x8hsa_62 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_x8hsa_62 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_x8hsa_62 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
+var formStyles = {"fullStyles":"_fullStyles_x8hsa_1","compact":"_compact_x8hsa_12","error":"_error_x8hsa_16","base":"_base_x8hsa_40","inputGroup":"_inputGroup_x8hsa_62"};
 
 module.exports = formStyles;
 //# sourceMappingURL=form.module.scss.cjs.map

package/dist/utils/forms/form.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._fullStyles_1x1rs_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1x1rs_1:disabled, ._fullStyles_1x1rs_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1x1rs_1._compact_1x1rs_12 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1x1rs_1._error_1x1rs_16 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1x1rs_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1x1rs_1::placeholder {\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._fullStyles_1x1rs_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1x1rs_40 {\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  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1x1rs_40._inputGroup_1x1rs_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_1x1rs_62 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_1x1rs_62 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_1x1rs_62 > *:focus, ._inputGroup_1x1rs_62 > *:active {\n  z-index: 5;\n}\n._inputGroup_1x1rs_62 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_1x1rs_62 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_1x1rs_62 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
-var formStyles = {"fullStyles":"_fullStyles_1x1rs_1","compact":"_compact_1x1rs_12","error":"_error_1x1rs_16","base":"_base_1x1rs_40","inputGroup":"_inputGroup_1x1rs_62"};
+insertStyle("._fullStyles_x8hsa_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_x8hsa_1:disabled, ._fullStyles_x8hsa_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_x8hsa_1._compact_x8hsa_12 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_x8hsa_1._error_x8hsa_16 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_x8hsa_1:focus {\n  border-color: var(--colors-secondary-blue-base);\n  outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n  outline-offset: var(--sizes-line);\n}\n._fullStyles_x8hsa_1::placeholder {\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._fullStyles_x8hsa_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_x8hsa_40 {\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  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* When inside an InputGroup, reduce inline padding to bring content closer together */\n}\n._base_x8hsa_40._inputGroup_x8hsa_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_x8hsa_40._inputGroup_x8hsa_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_x8hsa_40._inputGroup_x8hsa_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n\n/** InputGroup styles from the InputGroup component */\n._inputGroup_x8hsa_62 {\n  display: flex;\n  /* Remove inline margins from all children */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._inputGroup_x8hsa_62 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none;\n}\n._inputGroup_x8hsa_62 > *:focus, ._inputGroup_x8hsa_62 > *:active {\n  z-index: 5;\n}\n._inputGroup_x8hsa_62 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._inputGroup_x8hsa_62 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._inputGroup_x8hsa_62 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}");
+var formStyles = {"fullStyles":"_fullStyles_x8hsa_1","compact":"_compact_x8hsa_12","error":"_error_x8hsa_16","base":"_base_x8hsa_40","inputGroup":"_inputGroup_x8hsa_62"};
 
 export { formStyles as default };
 //# sourceMappingURL=form.module.scss.js.map

package/package.json

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