@veeqo/ui 15.15.3 → 15.15.4

package/README.md

@@ -118,8 +118,7 @@ src/icons/
 2. Run the following commands to update the icon library:
 
 ```terminal
-npm run figma:export  # Export SVGs from Figma
-npm run build:icons   # Convert SVGs to React components
+npm run figma:export-icons  # Export icon SVGs from Figma & build React components
 ```
 
 These scripts:
@@ -147,7 +146,7 @@ For more detailed information about the icon system, see our [Icon System Figma
 
 ### Adding additional SVG icon sets
 
-The build script supports multiple icon sets through the `ICON_SETS` configuration object. To add a new icon set:
+Each icon set has its own build script that calls the shared `buildSvgSet` pipeline. To add a new set:
 
 #### Create a new directory structure for your icons
 
@@ -158,33 +157,42 @@ src/icons/
     └── imports/        # Raw SVGs
 ```
 
-#### Add your configuration to ICON_SETS in the build script
-
-```typescript
-const ICON_SETS = {
-  // Existing configurations...
-  yourIconSet: {
-    import: './src/icons/your-icon-set/imports', // Directory containing source SVG files
-    output: './src/icons/your-icon-set/components', // Directory where React components will be generated
-    svgrConfig: {
-      plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
-      typescript: true,
-      exportType: 'named',
-      ref: false,
-      prettierConfig: './.prettierrc',
-      // Additional SVGR configurations as needed:
-      replaceAttrValues: {
-        '#000000': 'currentColor', // Replace specific colors
-      }, // SVGR transformation options, for full list of options see: https://react-svgr.com/docs/options/
-      icon: 24, // Set default icon size
-    },
+#### Create a build script
+
+Create `scripts/build-your-icons.js` that imports `buildSvgSet` from the shared module:
+
+```js
+import { buildSvgSet } from './shared/build-svg-set.js';
+
+buildSvgSet({
+  importDir: './src/icons/your-icon-set/imports',
+  outputDir: './src/icons/your-icon-set/components',
+  indexPath: './src/icons/your-icon-set/components/index.ts',
+  importPrefix: './',
+  buildMode: 'parallel',
+  label: 'icons',
+  logNoun: 'icon',
+  lintGlob: './src/icons/your-icon-set/**/*.tsx',
+  svgrConfig: {
+    plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
+    typescript: true,
+    exportType: 'named',
+    ref: false,
+    prettierConfig: './.prettierrc',
+    // Additional SVGR options: https://react-svgr.com/docs/options/
+    replaceAttrValues: { '#000000': 'currentColor' },
+    icon: 24,
   },
-};
+});
 ```
 
-This will add it to the build script `npm run build`
+#### Add a package.json script
+
+```json
+"build:your-icons": "node scripts/build-your-icons.js"
+```
 
-The build script will automatically:
+The `buildSvgSet` pipeline will automatically:
 
 - Clean the output directory
 - Generate React components from SVGs
@@ -198,9 +206,12 @@ The UI library includes automated scripts to export assets from Figma files. For
 ### Quick Start
 
 ```bash
-# Export design system icons
+# Export all icons and logos
 npm run figma:export
 
-# Export integration marks
-npm run figma:export-integrations
+# Export icons only
+npm run figma:export-icons
+
+# Export logos (formerly "integration marks")
+npm run figma:export-logos
 ```

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

@@ -1,24 +1,40 @@
 import { ReactElement } from 'react';
 import { TextFieldProps } from '../TextField';
 export type PhoneOption = {
+    /** Unique identifier for the phone option */
     id: string;
+    /** Display label for the phone option */
     label: string;
+    /** Additional info slot element */
     itemInfoSlot: ReactElement;
+    /** Whether to disable selection rendering */
     shouldDisableSelectionRender: boolean;
+    /** Media slot element (typically flag icon) */
     mediaSlot: ReactElement;
 };
 export type InternationalCode = {
+    /** Country code (e.g., "US", "GB", "FR") */
     countryCode: string;
+    /** Full country name */
     country: string;
+    /** Country flag asset identifier used to resolve the flag SVG URL */
     countryFlag: string;
+    /** Expected phone number length for this country */
     length: number;
 };
+/** Props for the PhoneInput component */
 export type PhoneInputProps = TextFieldProps & {
+    /** Phone number value including country code */
     value?: string;
+    /** Callback fired when phone number changes */
     onChange?: (value: string) => void;
+    /** Whether the input has validation errors */
     hasError?: boolean;
+    /** Whether the input is disabled */
     disabled?: boolean;
+    /** Error message to display */
     error?: string;
+    /** Additional CSS class name */
     className?: string;
 };
 export type PhoneOptions = PhoneOption[];

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

@@ -1,12 +1,22 @@
 import { ComponentSizeType } from '../types';
+/** Base props for the PriceInput component */
 export interface PriceInputProps {
+    /** Additional CSS class name */
     className?: string;
+    /** Whether the input is disabled and non-interactive */
     disabled?: boolean;
+    /** Size of the input field */
     size?: ComponentSizeType;
+    /** Currency symbol displayed as prefix */
     currency: string;
+    /** Step value for increment/decrement buttons */
     step?: string;
+    /** Whether the input has validation errors */
     hasError?: boolean;
+    /** Current price value as string */
     priceValue: string;
+    /** Callback fired when the input value changes */
     onChange: (value: string) => void;
+    /** Callback fired when the price value changes */
     onPriceChange: (value: string) => void;
 }

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

@@ -1,8 +1,13 @@
 import { SyntheticEvent } from 'react';
 import { TextFieldProps } from '../TextField/types';
+/** Props for the Search component */
 export type SearchProps = TextFieldProps & {
+    /** Whether to show loading spinner instead of search icon */
     isLoading?: boolean;
+    /** Fill color for the search/clear icon and loading spinner */
     fill?: string;
+    /** Callback fired when the clear button is clicked */
     onClearClick?: (event: SyntheticEvent) => void;
+    /** Whether to position the search icon on the left side */
     reversed?: boolean;
 };

package/dist/hoc/withLabels/withLabels.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <MiniAlert\n              id={`${componentId}-error`}\n              variant=\"error\"\n              isBold={false}\n              role=\"alert\"\n              title={error}\n            />\n          )}\n          {disabledMessage && (\n            <MiniAlert\n              id={`${componentId}-disabled`}\n              isBold={false}\n              title={disabledMessage}\n            />\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":";;;;;;;;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,qCAACC,eAAO,EAAA,EAAC,SAAS,EAAEC,iBAAM,CAAC,SAAS,EAAA;AAClC,YAAAF,sBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,IAAA;AACN,gBAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBJ,sBAAA,CAAA,aAAA,CAACK,yBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAL,sBAAA,CAAA,aAAA,CAACM,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHP,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEF,iBAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDF,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,sBAAA,CAAA,aAAA,CAACQ,mBAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdR,sBAAA,CAAA,aAAA,CAACQ,mBAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  /** Unique identifier for the component */\n  id?: string;\n  /** Label text displayed above the component */\n  label?: ReactNode;\n  /** Hint text displayed below the component for additional context */\n  hint?: ReactNode;\n  /** Error message displayed when validation fails */\n  error?: ReactNode;\n  /** Message displayed when the component is disabled */\n  disabledMessage?: ReactNode;\n  /** Tooltip text displayed on hover via help icon */\n  tooltip?: string;\n  /** Custom rich content for tooltip (ReactNode) */\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <MiniAlert\n              id={`${componentId}-error`}\n              variant=\"error\"\n              isBold={false}\n              role=\"alert\"\n              title={error}\n            />\n          )}\n          {disabledMessage && (\n            <MiniAlert\n              id={`${componentId}-disabled`}\n              isBold={false}\n              title={disabledMessage}\n            />\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":";;;;;;;;;;;;;;;;;AA8BA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,qCAACC,eAAO,EAAA,EAAC,SAAS,EAAEC,iBAAM,CAAC,SAAS,EAAA;AAClC,YAAAF,sBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,IAAA;AACN,gBAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBJ,sBAAA,CAAA,aAAA,CAACK,yBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAL,sBAAA,CAAA,aAAA,CAACM,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHP,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEF,iBAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDF,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,sBAAA,CAAA,aAAA,CAACQ,mBAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdR,sBAAA,CAAA,aAAA,CAACQ,mBAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/hoc/withLabels/withLabels.d.ts

@@ -1,11 +1,18 @@
 import React, { ComponentType, ReactNode } from 'react';
 export interface WithLabelsProps {
+    /** Unique identifier for the component */
     id?: string;
+    /** Label text displayed above the component */
     label?: ReactNode;
+    /** Hint text displayed below the component for additional context */
     hint?: ReactNode;
+    /** Error message displayed when validation fails */
     error?: ReactNode;
+    /** Message displayed when the component is disabled */
     disabledMessage?: ReactNode;
+    /** Tooltip text displayed on hover via help icon */
     tooltip?: string;
+    /** Custom rich content for tooltip (ReactNode) */
     tooltipContent?: ReactNode;
 }
 export declare const withLabels: <P, R = unknown>(Component: React.ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & WithLabelsProps> & React.RefAttributes<R>>;

package/dist/hoc/withLabels/withLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <MiniAlert\n              id={`${componentId}-error`}\n              variant=\"error\"\n              isBold={false}\n              role=\"alert\"\n              title={error}\n            />\n          )}\n          {disabledMessage && (\n            <MiniAlert\n              id={`${componentId}-disabled`}\n              isBold={false}\n              title={disabledMessage}\n            />\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAEC,WAAM,CAAC,SAAS,EAAA;AAClC,YAAAD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEC,WAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDD,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n  /** Unique identifier for the component */\n  id?: string;\n  /** Label text displayed above the component */\n  label?: ReactNode;\n  /** Hint text displayed below the component for additional context */\n  hint?: ReactNode;\n  /** Error message displayed when validation fails */\n  error?: ReactNode;\n  /** Message displayed when the component is disabled */\n  disabledMessage?: ReactNode;\n  /** Tooltip text displayed on hover via help icon */\n  tooltip?: string;\n  /** Custom rich content for tooltip (ReactNode) */\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <FlexCol className={styles.rootStack}>\n          <FlexRow>\n            <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Text>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && (\n            <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n              {hint}\n            </Text>\n          )}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            disabledMessage={disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <MiniAlert\n              id={`${componentId}-error`}\n              variant=\"error\"\n              isBold={false}\n              role=\"alert\"\n              title={error}\n            />\n          )}\n          {disabledMessage && (\n            <MiniAlert\n              id={`${componentId}-disabled`}\n              isBold={false}\n              title={disabledMessage}\n            />\n          )}\n        </FlexCol>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;;;AA8BA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAEC,WAAM,CAAC,SAAS,EAAA;AAClC,YAAAD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEC,WAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDD,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/hoc/withLabels/withLabels.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._rootStack_1rs8c_1 {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to use body font-size/line-height */\n._hint_1rs8c_6 {\n  margin-top: var(--sizes-xs);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n._error_1rs8c_13 {\n  font-weight: normal;\n}");
-var labelStyles = {"rootStack":"_rootStack_1rs8c_1","hint":"_hint_1rs8c_6","error":"_error_1rs8c_13"};
+___$insertStyle("._rootStack_idlam_1 {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to use body font-size/line-height */\n._hint_idlam_6 {\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n._error_idlam_12 {\n  font-weight: normal;\n}");
+var labelStyles = {"rootStack":"_rootStack_idlam_1","hint":"_hint_idlam_6","error":"_error_idlam_12"};
 
 module.exports = labelStyles;
 //# sourceMappingURL=withLabels.module.scss.cjs.map

package/dist/hoc/withLabels/withLabels.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.module.scss.cjs","sources":["../../../src/hoc/withLabels/withLabels.module.scss"],"sourcesContent":[".rootStack {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to use body font-size/line-height */\n.hint {\n  margin-top: var(--sizes-xs);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n.error {\n  font-weight: normal;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,iZAAA;;;;;"}
+{"version":3,"file":"withLabels.module.scss.cjs","sources":["../../../src/hoc/withLabels/withLabels.module.scss"],"sourcesContent":[".rootStack {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to use body font-size/line-height */\n.hint {\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n.error {\n  font-weight: normal;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,iXAAA;;;;;"}

package/dist/hoc/withLabels/withLabels.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._rootStack_1rs8c_1 {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to use body font-size/line-height */\n._hint_1rs8c_6 {\n  margin-top: var(--sizes-xs);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n._error_1rs8c_13 {\n  font-weight: normal;\n}");
-var labelStyles = {"rootStack":"_rootStack_1rs8c_1","hint":"_hint_1rs8c_6","error":"_error_1rs8c_13"};
+insertStyle("._rootStack_idlam_1 {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to use body font-size/line-height */\n._hint_idlam_6 {\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n._error_idlam_12 {\n  font-weight: normal;\n}");
+var labelStyles = {"rootStack":"_rootStack_idlam_1","hint":"_hint_idlam_6","error":"_error_idlam_12"};
 
 export { labelStyles as default };
 //# sourceMappingURL=withLabels.module.scss.js.map

package/dist/hoc/withLabels/withLabels.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.module.scss.js","sources":["../../../src/hoc/withLabels/withLabels.module.scss"],"sourcesContent":[".rootStack {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to use body font-size/line-height */\n.hint {\n  margin-top: var(--sizes-xs);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n.error {\n  font-weight: normal;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,iZAAA;;;;;"}
+{"version":3,"file":"withLabels.module.scss.js","sources":["../../../src/hoc/withLabels/withLabels.module.scss"],"sourcesContent":[".rootStack {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to use body font-size/line-height */\n.hint {\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n.error {\n  font-weight: normal;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,iXAAA;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "15.15.3",
+  "version": "15.15.4",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -42,13 +42,16 @@
     "tags:remove": "node scripts/remove-tag.cjs",
     "tags:update": "git fetch --tags && git push --follow-tags",
     "changelog:update": "npm run tags:update && auto-changelog -p && bash ./scripts/ai-changelog.sh && git add CHANGELOG.md NEW_CHANGELOG.md && (git diff --cached --quiet || git commit -m \"Update CHANGELOG and NEW_CHANGELOG\")",
-    "figma:export": "rimraf ./src/icons/design-system/imports && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.icons.js ",
+    "figma:export": "npm run figma:export-icons && npm run figma:export-logos",
+    "figma:export-icons": "rimraf ./src/icons/design-system/imports && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.icons.js && npm run build:icons",
     "figma:publish": "if [ ! -f ./.env ]; then echo 'Error: .env not found — copy .env.sample to .env and set FIGMA_TOKEN' >&2; exit 1; fi; set -a && . ./.env && set +a; if [ -z \"$FIGMA_TOKEN\" ]; then echo 'Error: FIGMA_TOKEN is empty — set it in .env' >&2; exit 1; fi; FIGMA_ACCESS_TOKEN=\"$FIGMA_TOKEN\" npx figma connect publish --force",
     "icons:code-connect": "node scripts/figma-export/generate-icon-code-connect.js",
-    "figma:export-integrations": "rimraf ./imports/integrations && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.integrations.js -- --type=all",
-    "figma:export-integrations:accounting": "rimraf ./imports/integrations/accounting && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.integrations.js -- --type=accounting",
-    "figma:export-integrations:carriers": "rimraf ./imports/integrations/carriers && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.integrations.js -- --type=carriers",
-    "figma:export-integrations:channels": "rimraf ./imports/integrations/channels && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.integrations.js -- --type=channels"
+    "logos:code-connect": "node scripts/figma-export/generate-logo-code-connect.js",
+    "figma:export-code-connect": "npm run icons:code-connect && npm run logos:code-connect",
+    "figma:export-logos": "rimraf ./src/logos/imports && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.logos.js -- --type=all && npm run build:logos",
+    "figma:export-logos:channels": "dotenv figma-export use-config scripts/figma-export/.figmaexportrc.logos.js -- --type=channels && npm run build:logos",
+    "figma:export-logos:carriers": "dotenv figma-export use-config scripts/figma-export/.figmaexportrc.logos.js -- --type=carriers && npm run build:logos",
+    "figma:export-logos:accounting": "dotenv figma-export use-config scripts/figma-export/.figmaexportrc.logos.js -- --type=accounting && npm run build:logos"
   },
   "auto-changelog": {
     "issueUrl": "https://sim.amazon.com/issues/{id}",