@veeqo/ui 9.9.2 → 10.0.0-beta.1

package/dist/components/Popover/hooks/useHandleFocus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleFocus.cjs","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":["import { KeyboardEventHandler, useEffect } from 'react';\n\nconst TABBABLE_SELECTORS =\n  'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n\ntype UseHandleFocusArgs = {\n  popperElement: HTMLDialogElement | HTMLDivElement | null;\n  anchorElement: HTMLElement | null;\n  onClose: () => void;\n  disableFocusLock?: boolean;\n};\n\nexport const useHandleFocus = ({\n  popperElement,\n  anchorElement,\n  onClose,\n  disableFocusLock = false,\n}: UseHandleFocusArgs) => {\n  /**\n   * Focuses first element, when this gets rendered for the first time.\n   */\n  useEffect(() => {\n    if (!popperElement || disableFocusLock) return;\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n\n    if (focusableElements.length < 1) return;\n\n    setTimeout(() => {\n      (focusableElements[0] as HTMLElement).focus();\n    }, 0);\n  }, [popperElement, disableFocusLock]);\n\n  /**\n   * Sets up tabbing into the popover.\n   *\n   * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`\n   * then the tab should move **into** the popover, instead of the natural tab order.\n   */\n  useEffect(() => {\n    if (!popperElement || !popperElement) return;\n\n    const focusWithinPopper = (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n        // When nothing is focusable within the popover, close popover and allow natural tab order.\n        if (focusableElements.length < 1) {\n          onClose();\n          return;\n        }\n\n        (focusableElements[0] as HTMLElement).focus();\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    };\n\n    // When tab occurs on ref focus, if focusable elements in popover focus first.\n    anchorElement?.addEventListener('keydown', focusWithinPopper);\n\n    // eslint-disable-next-line consistent-return\n    return () => anchorElement?.removeEventListener('keydown', focusWithinPopper);\n  }, [anchorElement, popperElement, onClose]);\n\n  /**\n   * Creates focus trap within the popover itself. Stopping users tabbing back to outside the\n   * popover, or forward past the last scrollable element within.\n   */\n  const handleFocusTrap: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    // If shift tabbing (BACK) and on the first element, loop to last element.\n    if (event.shiftKey && document.activeElement === firstElement) {\n      event.preventDefault();\n      (lastElement as HTMLElement).focus();\n\n      // If tabbing (FORWARD) and on the last element, loop to first element.\n    } else if (!event.shiftKey && document.activeElement === lastElement) {\n      event.preventDefault();\n      (firstElement as HTMLElement).focus();\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    if (!popperElement) return;\n\n    // Handle escape\n    if (event.key === 'Escape') {\n      onClose();\n      event.stopPropagation(); // Should only close THIS dialog.\n      event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of\n\n      // Check we should enforce focus trap.\n    } else if (!disableFocusLock && event.key === 'Tab') {\n      handleFocusTrap(event);\n    }\n  };\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":["useEffect"],"mappings":";;;;AAEA,MAAM,kBAAkB,GACtB,oMAAoM;AASzL,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACHA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACHA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}
+{"version":3,"file":"useHandleFocus.cjs","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":["import { KeyboardEventHandler, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\n\ntype UseHandleFocusArgs = {\n  popperElement: HTMLDialogElement | HTMLDivElement | null;\n  anchorElement: HTMLElement | null;\n  onClose: () => void;\n  disableFocusLock?: boolean;\n};\n\nexport const useHandleFocus = ({\n  popperElement,\n  anchorElement,\n  onClose,\n  disableFocusLock = false,\n}: UseHandleFocusArgs) => {\n  /**\n   * Focuses first element, when this gets rendered for the first time.\n   */\n  useEffect(() => {\n    if (!popperElement || disableFocusLock) return;\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n\n    if (focusableElements.length < 1) return;\n\n    setTimeout(() => {\n      (focusableElements[0] as HTMLElement).focus();\n    }, 0);\n  }, [popperElement, disableFocusLock]);\n\n  /**\n   * Sets up tabbing into the popover.\n   *\n   * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`\n   * then the tab should move **into** the popover, instead of the natural tab order.\n   */\n  useEffect(() => {\n    if (!popperElement || !popperElement) return;\n\n    const focusWithinPopper = (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n        // When nothing is focusable within the popover, close popover and allow natural tab order.\n        if (focusableElements.length < 1) {\n          onClose();\n          return;\n        }\n\n        (focusableElements[0] as HTMLElement).focus();\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    };\n\n    // When tab occurs on ref focus, if focusable elements in popover focus first.\n    anchorElement?.addEventListener('keydown', focusWithinPopper);\n\n    // eslint-disable-next-line consistent-return\n    return () => anchorElement?.removeEventListener('keydown', focusWithinPopper);\n  }, [anchorElement, popperElement, onClose]);\n\n  /**\n   * Creates focus trap within the popover itself. Stopping users tabbing back to outside the\n   * popover, or forward past the last scrollable element within.\n   */\n  const handleFocusTrap: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    // If shift tabbing (BACK) and on the first element, loop to last element.\n    if (event.shiftKey && document.activeElement === firstElement) {\n      event.preventDefault();\n      (lastElement as HTMLElement).focus();\n\n      // If tabbing (FORWARD) and on the last element, loop to first element.\n    } else if (!event.shiftKey && document.activeElement === lastElement) {\n      event.preventDefault();\n      (firstElement as HTMLElement).focus();\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    if (!popperElement) return;\n\n    // Handle escape\n    if (event.key === 'Escape') {\n      onClose();\n      event.stopPropagation(); // Should only close THIS dialog.\n      event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of\n\n      // Check we should enforce focus trap.\n    } else if (!disableFocusLock && event.key === 'Tab') {\n      handleFocusTrap(event);\n    }\n  };\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":["useEffect","TABBABLE_SELECTORS"],"mappings":";;;;;AAWa,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACHA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAACC,oCAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACHD,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAACC,oCAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAACA,oCAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}

package/dist/components/Popover/hooks/useHandleFocus.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
+import { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors.js';
 
-const TABBABLE_SELECTORS = 'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
 const useHandleFocus = ({ popperElement, anchorElement, onClose, disableFocusLock = false, }) => {
     /**
      * Focuses first element, when this gets rendered for the first time.

package/dist/components/Popover/hooks/useHandleFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleFocus.js","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":["import { KeyboardEventHandler, useEffect } from 'react';\n\nconst TABBABLE_SELECTORS =\n  'input:not([disabled]), summary:not([disabled]), a[href]:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n\ntype UseHandleFocusArgs = {\n  popperElement: HTMLDialogElement | HTMLDivElement | null;\n  anchorElement: HTMLElement | null;\n  onClose: () => void;\n  disableFocusLock?: boolean;\n};\n\nexport const useHandleFocus = ({\n  popperElement,\n  anchorElement,\n  onClose,\n  disableFocusLock = false,\n}: UseHandleFocusArgs) => {\n  /**\n   * Focuses first element, when this gets rendered for the first time.\n   */\n  useEffect(() => {\n    if (!popperElement || disableFocusLock) return;\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n\n    if (focusableElements.length < 1) return;\n\n    setTimeout(() => {\n      (focusableElements[0] as HTMLElement).focus();\n    }, 0);\n  }, [popperElement, disableFocusLock]);\n\n  /**\n   * Sets up tabbing into the popover.\n   *\n   * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`\n   * then the tab should move **into** the popover, instead of the natural tab order.\n   */\n  useEffect(() => {\n    if (!popperElement || !popperElement) return;\n\n    const focusWithinPopper = (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n        // When nothing is focusable within the popover, close popover and allow natural tab order.\n        if (focusableElements.length < 1) {\n          onClose();\n          return;\n        }\n\n        (focusableElements[0] as HTMLElement).focus();\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    };\n\n    // When tab occurs on ref focus, if focusable elements in popover focus first.\n    anchorElement?.addEventListener('keydown', focusWithinPopper);\n\n    // eslint-disable-next-line consistent-return\n    return () => anchorElement?.removeEventListener('keydown', focusWithinPopper);\n  }, [anchorElement, popperElement, onClose]);\n\n  /**\n   * Creates focus trap within the popover itself. Stopping users tabbing back to outside the\n   * popover, or forward past the last scrollable element within.\n   */\n  const handleFocusTrap: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    // If shift tabbing (BACK) and on the first element, loop to last element.\n    if (event.shiftKey && document.activeElement === firstElement) {\n      event.preventDefault();\n      (lastElement as HTMLElement).focus();\n\n      // If tabbing (FORWARD) and on the last element, loop to first element.\n    } else if (!event.shiftKey && document.activeElement === lastElement) {\n      event.preventDefault();\n      (firstElement as HTMLElement).focus();\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    if (!popperElement) return;\n\n    // Handle escape\n    if (event.key === 'Escape') {\n      onClose();\n      event.stopPropagation(); // Should only close THIS dialog.\n      event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of\n\n      // Check we should enforce focus trap.\n    } else if (!disableFocusLock && event.key === 'Tab') {\n      handleFocusTrap(event);\n    }\n  };\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB,GACtB,oMAAoM;AASzL,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACH,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}
+{"version":3,"file":"useHandleFocus.js","sources":["../../../../src/components/Popover/hooks/useHandleFocus.ts"],"sourcesContent":["import { KeyboardEventHandler, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\n\ntype UseHandleFocusArgs = {\n  popperElement: HTMLDialogElement | HTMLDivElement | null;\n  anchorElement: HTMLElement | null;\n  onClose: () => void;\n  disableFocusLock?: boolean;\n};\n\nexport const useHandleFocus = ({\n  popperElement,\n  anchorElement,\n  onClose,\n  disableFocusLock = false,\n}: UseHandleFocusArgs) => {\n  /**\n   * Focuses first element, when this gets rendered for the first time.\n   */\n  useEffect(() => {\n    if (!popperElement || disableFocusLock) return;\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n\n    if (focusableElements.length < 1) return;\n\n    setTimeout(() => {\n      (focusableElements[0] as HTMLElement).focus();\n    }, 0);\n  }, [popperElement, disableFocusLock]);\n\n  /**\n   * Sets up tabbing into the popover.\n   *\n   * When the popover is open (pre-requisite for this being ran), and the user clicks `TAB`\n   * then the tab should move **into** the popover, instead of the natural tab order.\n   */\n  useEffect(() => {\n    if (!popperElement || !popperElement) return;\n\n    const focusWithinPopper = (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n        // When nothing is focusable within the popover, close popover and allow natural tab order.\n        if (focusableElements.length < 1) {\n          onClose();\n          return;\n        }\n\n        (focusableElements[0] as HTMLElement).focus();\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    };\n\n    // When tab occurs on ref focus, if focusable elements in popover focus first.\n    anchorElement?.addEventListener('keydown', focusWithinPopper);\n\n    // eslint-disable-next-line consistent-return\n    return () => anchorElement?.removeEventListener('keydown', focusWithinPopper);\n  }, [anchorElement, popperElement, onClose]);\n\n  /**\n   * Creates focus trap within the popover itself. Stopping users tabbing back to outside the\n   * popover, or forward past the last scrollable element within.\n   */\n  const handleFocusTrap: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    const focusableElements = popperElement!.querySelectorAll(TABBABLE_SELECTORS);\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    // If shift tabbing (BACK) and on the first element, loop to last element.\n    if (event.shiftKey && document.activeElement === firstElement) {\n      event.preventDefault();\n      (lastElement as HTMLElement).focus();\n\n      // If tabbing (FORWARD) and on the last element, loop to first element.\n    } else if (!event.shiftKey && document.activeElement === lastElement) {\n      event.preventDefault();\n      (firstElement as HTMLElement).focus();\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDialogElement | HTMLDivElement> = (event) => {\n    if (!popperElement) return;\n\n    // Handle escape\n    if (event.key === 'Escape') {\n      onClose();\n      event.stopPropagation(); // Should only close THIS dialog.\n      event.preventDefault(); // Shouldn't close any fullscreen dialogs (Modal) it's part of\n\n      // Check we should enforce focus trap.\n    } else if (!disableFocusLock && event.key === 'Tab') {\n      handleFocusTrap(event);\n    }\n  };\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;AAWa,MAAA,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,gBAAgB,GAAG,KAAK,GACL,KAAI;AACvB;;AAEG;IACH,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,aAAa,IAAI,gBAAgB;YAAE;QACxC,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAE7E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAAE;QAElC,UAAU,CAAC,MAAK;AACb,YAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;SAC9C,EAAE,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAErC;;;;;AAKG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa;YAAE;AAEtC,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;;AAE7E,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,oBAAA,OAAO,EAAE;oBACT;AACD;AAEA,gBAAA,iBAAiB,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE;gBAC7C,KAAK,CAAC,eAAe,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;AACvB;AACH,SAAC;;QAGD,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC;;AAG7D,QAAA,OAAO,MAAM,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC;KAC9E,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC;AAE3C;;;AAGG;AACH,IAAA,MAAM,eAAe,GAA6D,CAAC,KAAK,KAAI;QAC1F,MAAM,iBAAiB,GAAG,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC7E,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;QAGnE,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;YAC7D,KAAK,CAAC,cAAc,EAAE;YACrB,WAA2B,CAAC,KAAK,EAAE;;AAGrC;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;YACpE,KAAK,CAAC,cAAc,EAAE;YACrB,YAA4B,CAAC,KAAK,EAAE;AACtC;AACH,KAAC;AAED,IAAA,MAAM,aAAa,GAA6D,CAAC,KAAK,KAAI;AACxF,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,OAAO,EAAE;AACT,YAAA,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,YAAA,KAAK,CAAC,cAAc,EAAE,CAAC;;AAGxB;aAAM,IAAI,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACnD,eAAe,CAAC,KAAK,CAAC;AACvB;AACH,KAAC;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}

package/dist/components/Popover/styled.cjs

@@ -6,8 +6,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const PopoverDialog = styled__default.default.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--kmoo2l" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
-const Backdrop = styled__default.default.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--9esryp" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
+const PopoverDialog = styled__default.default.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--cg48a2" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
+const Backdrop = styled__default.default.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--49or9l" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
 
 exports.Backdrop = Backdrop;
 exports.PopoverDialog = PopoverDialog;

package/dist/components/Popover/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-const PopoverDialog = styled.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--kmoo2l" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
-const Backdrop = styled.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--9esryp" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
+const PopoverDialog = styled.dialog.withConfig({ displayName: "vui--PopoverDialog", componentId: "vui--cg48a2" }) `z-index:${({ zIndex }) => zIndex + 1};padding:0;margin:0;border:none;background:transparent;`;
+const Backdrop = styled.div.withConfig({ displayName: "vui--Backdrop", componentId: "vui--49or9l" }) `position:fixed;top:0;right:0;bottom:0;left:0;z-index:${({ zIndex }) => zIndex};`;
 
 export { Backdrop, PopoverDialog };
 //# sourceMappingURL=styled.js.map

package/dist/components/PriceInput/styled.cjs

@@ -11,10 +11,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const StyledTextField = styled__default.default(index.TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--8gyz01" }) `color:${index$1.theme.colors.neutral.ink.dark};width:100%;&:focus{box-shadow:none;border-color:none;border-right-width:0;border-color:${index$1.theme.colors.neutral.ink.lightest};}`;
-const PrefixContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--PrefixContainer", componentId: "vui--fsc9el" }) `user-select:none;border:1px solid ${index$1.theme.colors.neutral.ink.lightest};border-radius:4px;display:flex;align-items:center;justify-content:center;width:${({ size }) => (size === 'sm' ? '30px' : '36px')};background-color:${({ disabled }) => (disabled ? index$1.theme.colors.neutral.grey.light : 'white')};flex-shrink:0;${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};&:active{z-index:0;border-right-width:0;+ input{z-index:0;border-left-width:1px;}}`;
-const PrefixText = styled__default.default(Text.Text).withConfig({ displayName: "vui--PrefixText", componentId: "vui--w81sf" }) `font-size:14px;`;
-const PriceInputGroup = styled__default.default(index$2.InputGroup).withConfig({ displayName: "vui--PriceInputGroup", componentId: "vui--jpuoo1" }) `display:inline-flex;border-radius:4px;min-width:125px;width:100%;${({ hasError }) => hasError &&
+const StyledTextField = styled__default.default(index.TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--bdxre8" }) `color:${index$1.theme.colors.neutral.ink.dark};width:100%;&:focus{box-shadow:none;border-color:none;border-right-width:0;border-color:${index$1.theme.colors.neutral.ink.lightest};}`;
+const PrefixContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--PrefixContainer", componentId: "vui--1pz53n4" }) `user-select:none;border:1px solid ${index$1.theme.colors.neutral.ink.lightest};border-radius:4px;display:flex;align-items:center;justify-content:center;width:${({ size }) => (size === 'sm' ? '30px' : '36px')};background-color:${({ disabled }) => (disabled ? index$1.theme.colors.neutral.grey.light : 'white')};flex-shrink:0;${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};&:active{z-index:0;border-right-width:0;+ input{z-index:0;border-left-width:1px;}}`;
+const PrefixText = styled__default.default(Text.Text).withConfig({ displayName: "vui--PrefixText", componentId: "vui--1n3xr2g" }) `font-size:14px;`;
+const PriceInputGroup = styled__default.default(index$2.InputGroup).withConfig({ displayName: "vui--PriceInputGroup", componentId: "vui--1sahwox" }) `display:inline-flex;border-radius:4px;min-width:125px;width:100%;${({ hasError }) => hasError &&
     `
     box-shadow: 0 0 0 4px ${index$1.theme.colors.secondary.red.light};
 

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/PriceInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { theme } from '../../theme';\n\nexport const StyledTextField = styled(TextField)`\n  color: ${theme.colors.neutral.ink.dark};\n  width: 100%;\n\n  &:focus {\n    box-shadow: none;\n    border-color: none;\n    border-right-width: 0;\n    border-color: ${theme.colors.neutral.ink.lightest};\n  }\n`;\n\nexport const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`\n  user-select: none;\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};\n  background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};\n  flex-shrink: 0;\n\n  ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};\n\n  &:active {\n    z-index: 0;\n    border-right-width: 0;\n\n    + input {\n      z-index: 0;\n      border-left-width: 1px;\n    }\n  }\n`;\n\nexport const PrefixText = styled(Text)`\n  font-size: 14px;\n`;\n\nexport const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`\n  display: inline-flex;\n  border-radius: 4px;\n  min-width: 125px;\n  width: 100%;\n\n  ${({ hasError }) =>\n    hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n\n    > * {\n      border-top-color: ${theme.colors.secondary.red.base};\n      border-bottom-color: ${theme.colors.secondary.red.base};\n    }\n\n    > *:first-child {\n      border-left-color: ${theme.colors.secondary.red.base};\n    }\n\n    > div:last-child {\n      > button:first-child {\n        border-top-color: ${theme.colors.secondary.red.base};\n        border-right-color: ${theme.colors.secondary.red.base};\n      }\n\n      > button:last-child {\n        border-right-color: ${theme.colors.secondary.red.base};\n        border-bottom-color: ${theme.colors.secondary.red.base};\n      }\n    }\n  `}\n\n  &:focus-within {\n    outline: 0;\n    box-shadow: ${({ hasError }) =>\n      hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};\n  }\n\n  &:focus-within > * {\n    border-top-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    border-bottom-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n  }\n\n  &:focus-within > *:first-child {\n    border-left-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n  }\n\n  &:focus-within > div:last-child {\n    > button:first-child {\n      border-top-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n      border-right-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    }\n\n    > button:last-child {\n      border-right-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n      border-bottom-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    }\n  }\n`;\n"],"names":["styled","TextField","theme","BaseContainer","Text","InputGroup"],"mappings":"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"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/PriceInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { theme } from '../../theme';\n\nexport const StyledTextField = styled(TextField)`\n  color: ${theme.colors.neutral.ink.dark};\n  width: 100%;\n\n  &:focus {\n    box-shadow: none;\n    border-color: none;\n    border-right-width: 0;\n    border-color: ${theme.colors.neutral.ink.lightest};\n  }\n`;\n\nexport const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`\n  user-select: none;\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};\n  background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};\n  flex-shrink: 0;\n\n  ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};\n\n  &:active {\n    z-index: 0;\n    border-right-width: 0;\n\n    + input {\n      z-index: 0;\n      border-left-width: 1px;\n    }\n  }\n`;\n\nexport const PrefixText = styled(Text)`\n  font-size: 14px;\n`;\n\nexport const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`\n  display: inline-flex;\n  border-radius: 4px;\n  min-width: 125px;\n  width: 100%;\n\n  ${({ hasError }) =>\n    hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n\n    > * {\n      border-top-color: ${theme.colors.secondary.red.base};\n      border-bottom-color: ${theme.colors.secondary.red.base};\n    }\n\n    > *:first-child {\n      border-left-color: ${theme.colors.secondary.red.base};\n    }\n\n    > div:last-child {\n      > button:first-child {\n        border-top-color: ${theme.colors.secondary.red.base};\n        border-right-color: ${theme.colors.secondary.red.base};\n      }\n\n      > button:last-child {\n        border-right-color: ${theme.colors.secondary.red.base};\n        border-bottom-color: ${theme.colors.secondary.red.base};\n      }\n    }\n  `}\n\n  &:focus-within {\n    outline: 0;\n    box-shadow: ${({ hasError }) =>\n      hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};\n  }\n\n  &:focus-within > * {\n    border-top-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    border-bottom-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n  }\n\n  &:focus-within > *:first-child {\n    border-left-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n  }\n\n  &:focus-within > div:last-child {\n    > button:first-child {\n      border-top-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n      border-right-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    }\n\n    > button:last-child {\n      border-right-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n      border-bottom-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    }\n  }\n`;\n"],"names":["styled","TextField","theme","BaseContainer","Text","InputGroup"],"mappings":"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"}

package/dist/components/PriceInput/styled.js

@@ -5,10 +5,10 @@ import { Text } from '../Text/Text.js';
 import { InputGroup } from '../InputGroup/index.js';
 import { theme } from '../../theme/index.js';
 
-const StyledTextField = styled(TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--8gyz01" }) `color:${theme.colors.neutral.ink.dark};width:100%;&:focus{box-shadow:none;border-color:none;border-right-width:0;border-color:${theme.colors.neutral.ink.lightest};}`;
-const PrefixContainer = styled(BaseContainer).withConfig({ displayName: "vui--PrefixContainer", componentId: "vui--fsc9el" }) `user-select:none;border:1px solid ${theme.colors.neutral.ink.lightest};border-radius:4px;display:flex;align-items:center;justify-content:center;width:${({ size }) => (size === 'sm' ? '30px' : '36px')};background-color:${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};flex-shrink:0;${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};&:active{z-index:0;border-right-width:0;+ input{z-index:0;border-left-width:1px;}}`;
-const PrefixText = styled(Text).withConfig({ displayName: "vui--PrefixText", componentId: "vui--w81sf" }) `font-size:14px;`;
-const PriceInputGroup = styled(InputGroup).withConfig({ displayName: "vui--PriceInputGroup", componentId: "vui--jpuoo1" }) `display:inline-flex;border-radius:4px;min-width:125px;width:100%;${({ hasError }) => hasError &&
+const StyledTextField = styled(TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--bdxre8" }) `color:${theme.colors.neutral.ink.dark};width:100%;&:focus{box-shadow:none;border-color:none;border-right-width:0;border-color:${theme.colors.neutral.ink.lightest};}`;
+const PrefixContainer = styled(BaseContainer).withConfig({ displayName: "vui--PrefixContainer", componentId: "vui--1pz53n4" }) `user-select:none;border:1px solid ${theme.colors.neutral.ink.lightest};border-radius:4px;display:flex;align-items:center;justify-content:center;width:${({ size }) => (size === 'sm' ? '30px' : '36px')};background-color:${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};flex-shrink:0;${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};&:active{z-index:0;border-right-width:0;+ input{z-index:0;border-left-width:1px;}}`;
+const PrefixText = styled(Text).withConfig({ displayName: "vui--PrefixText", componentId: "vui--1n3xr2g" }) `font-size:14px;`;
+const PriceInputGroup = styled(InputGroup).withConfig({ displayName: "vui--PriceInputGroup", componentId: "vui--1sahwox" }) `display:inline-flex;border-radius:4px;min-width:125px;width:100%;${({ hasError }) => hasError &&
     `
     box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};
 

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/PriceInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { theme } from '../../theme';\n\nexport const StyledTextField = styled(TextField)`\n  color: ${theme.colors.neutral.ink.dark};\n  width: 100%;\n\n  &:focus {\n    box-shadow: none;\n    border-color: none;\n    border-right-width: 0;\n    border-color: ${theme.colors.neutral.ink.lightest};\n  }\n`;\n\nexport const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`\n  user-select: none;\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};\n  background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};\n  flex-shrink: 0;\n\n  ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};\n\n  &:active {\n    z-index: 0;\n    border-right-width: 0;\n\n    + input {\n      z-index: 0;\n      border-left-width: 1px;\n    }\n  }\n`;\n\nexport const PrefixText = styled(Text)`\n  font-size: 14px;\n`;\n\nexport const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`\n  display: inline-flex;\n  border-radius: 4px;\n  min-width: 125px;\n  width: 100%;\n\n  ${({ hasError }) =>\n    hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n\n    > * {\n      border-top-color: ${theme.colors.secondary.red.base};\n      border-bottom-color: ${theme.colors.secondary.red.base};\n    }\n\n    > *:first-child {\n      border-left-color: ${theme.colors.secondary.red.base};\n    }\n\n    > div:last-child {\n      > button:first-child {\n        border-top-color: ${theme.colors.secondary.red.base};\n        border-right-color: ${theme.colors.secondary.red.base};\n      }\n\n      > button:last-child {\n        border-right-color: ${theme.colors.secondary.red.base};\n        border-bottom-color: ${theme.colors.secondary.red.base};\n      }\n    }\n  `}\n\n  &:focus-within {\n    outline: 0;\n    box-shadow: ${({ hasError }) =>\n      hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};\n  }\n\n  &:focus-within > * {\n    border-top-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    border-bottom-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n  }\n\n  &:focus-within > *:first-child {\n    border-left-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n  }\n\n  &:focus-within > div:last-child {\n    > button:first-child {\n      border-top-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n      border-right-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    }\n\n    > button:last-child {\n      border-right-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n      border-bottom-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    }\n  }\n`;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/PriceInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { theme } from '../../theme';\n\nexport const StyledTextField = styled(TextField)`\n  color: ${theme.colors.neutral.ink.dark};\n  width: 100%;\n\n  &:focus {\n    box-shadow: none;\n    border-color: none;\n    border-right-width: 0;\n    border-color: ${theme.colors.neutral.ink.lightest};\n  }\n`;\n\nexport const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`\n  user-select: none;\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};\n  background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};\n  flex-shrink: 0;\n\n  ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};\n\n  &:active {\n    z-index: 0;\n    border-right-width: 0;\n\n    + input {\n      z-index: 0;\n      border-left-width: 1px;\n    }\n  }\n`;\n\nexport const PrefixText = styled(Text)`\n  font-size: 14px;\n`;\n\nexport const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`\n  display: inline-flex;\n  border-radius: 4px;\n  min-width: 125px;\n  width: 100%;\n\n  ${({ hasError }) =>\n    hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n\n    > * {\n      border-top-color: ${theme.colors.secondary.red.base};\n      border-bottom-color: ${theme.colors.secondary.red.base};\n    }\n\n    > *:first-child {\n      border-left-color: ${theme.colors.secondary.red.base};\n    }\n\n    > div:last-child {\n      > button:first-child {\n        border-top-color: ${theme.colors.secondary.red.base};\n        border-right-color: ${theme.colors.secondary.red.base};\n      }\n\n      > button:last-child {\n        border-right-color: ${theme.colors.secondary.red.base};\n        border-bottom-color: ${theme.colors.secondary.red.base};\n      }\n    }\n  `}\n\n  &:focus-within {\n    outline: 0;\n    box-shadow: ${({ hasError }) =>\n      hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};\n  }\n\n  &:focus-within > * {\n    border-top-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    border-bottom-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n  }\n\n  &:focus-within > *:first-child {\n    border-left-color: ${({ hasError }) =>\n      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n  }\n\n  &:focus-within > div:last-child {\n    > button:first-child {\n      border-top-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n      border-right-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    }\n\n    > button:last-child {\n      border-right-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n      border-bottom-color: ${({ hasError }) =>\n        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};\n    }\n  }\n`;\n"],"names":[],"mappings":"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"}

package/dist/components/Radio/styled.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1e1oks4" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--14lc9u" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
 
 exports.Input = Input;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Radio/styled.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1e1oks4" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--14lc9u" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
 
 export { Input };
 //# sourceMappingURL=styled.js.map

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 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;`;
+const ScreenReaderOnlyElement = styled__default.default.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--o1yf2n" }) `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`.**

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
 
-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;`;
+const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--o1yf2n" }) `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`.**

package/dist/components/Search/styled.cjs

@@ -9,9 +9,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Input = styled__default.default(index.TextField).withConfig({ displayName: "vui--Input", componentId: "vui--je6y84" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
-const IconContainer = styled__default.default.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--113gfe8" }) `position:absolute;`;
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18q9h8i" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
+const Input = styled__default.default(index.TextField).withConfig({ displayName: "vui--Input", componentId: "vui--1jvzatv" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
+const IconContainer = styled__default.default.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--12eib7v" }) `position:absolute;`;
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--g7dno3" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
     let padding = 'padding-right: 2.5rem;';
     let position = 'right: 0.5rem;';
     if (iconPosition === 'left') {

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer)<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":["styled","TextField","BaseContainer"],"mappings":";;;;;;;;;;;AAMA,MAAM,KAAK,GAAGA,uBAAM,CAACC,eAAS,CAAC;AAM/B,MAAM,aAAa,GAAGD,uBAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAGA,uBAAM,CAACE,2BAAa,CAAC,CAOnC,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mGAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer)<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":["styled","TextField","BaseContainer"],"mappings":";;;;;;;;;;;AAMA,MAAM,KAAK,GAAGA,uBAAM,CAACC,eAAS,CAAC;AAM/B,MAAM,aAAa,GAAGD,uBAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAGA,uBAAM,CAACE,2BAAa,CAAC,CAOnC,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mGAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;;;"}

package/dist/components/Search/styled.js

@@ -3,9 +3,9 @@ import { TextField } from '../TextField/index.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import 'react';
 
-const Input = styled(TextField).withConfig({ displayName: "vui--Input", componentId: "vui--je6y84" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
-const IconContainer = styled.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--113gfe8" }) `position:absolute;`;
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18q9h8i" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
+const Input = styled(TextField).withConfig({ displayName: "vui--Input", componentId: "vui--1jvzatv" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
+const IconContainer = styled.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--12eib7v" }) `position:absolute;`;
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--g7dno3" }) `position:relative;display:flex;justify-content:flex-start;align-items:center;border-radius:0.25rem;${({ iconPosition }) => {
     let padding = 'padding-right: 2.5rem;';
     let position = 'right: 0.5rem;';
     if (iconPosition === 'left') {

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer)<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":[],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC;AAM/B,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAOnC,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mGAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer)<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":[],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC;AAM/B,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAOnC,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mGAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;"}

package/dist/components/SegmentedControl/styled.cjs

@@ -11,7 +11,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const buttonBackgroundColor = index.theme.colors.neutral.grey.lightest;
 const buttonBorderColor = index.theme.colors.neutral.grey.dark;
 const activeButtonColor = index.theme.colors.secondary.blue.dark;
-const SegmentedControlContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--s4yyqq" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${index.theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
+const SegmentedControlContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--mxpi9o" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${index.theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
 
 exports.SegmentedControlContainer = SegmentedControlContainer;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/SegmentedControl/styled.js

@@ -5,7 +5,7 @@ import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 const buttonBackgroundColor = theme.colors.neutral.grey.lightest;
 const buttonBorderColor = theme.colors.neutral.grey.dark;
 const activeButtonColor = theme.colors.secondary.blue.dark;
-const SegmentedControlContainer = styled(BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--s4yyqq" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
+const SegmentedControlContainer = styled(BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--mxpi9o" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
 
 export { SegmentedControlContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/Select/styled.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
+const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1h93380" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
     let height = '40px';
     let fontSize = '14px';
     if (sizeVariant === 'sm') {

package/dist/components/Select/styled.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
+const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1h93380" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
     let height = '40px';
     let fontSize = '14px';
     if (sizeVariant === 'sm') {

package/dist/components/SelectDropdown/ListItem/styled.cjs

@@ -15,21 +15,21 @@ const colourStatesMap = {
     pressed: '#E3F0FA',
     disabled: index.theme.colors.neutral.grey.light,
 };
-const StyledListItem = styled__default.default(reactAriaComponents.ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `border-radius:${index.theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : index.theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${index.theme.sizes.xs} ${index.theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${index.theme.colors.neutral.grey.base};border-color:${index.theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${index.theme.colors.secondary.green.base};border-color:${index.theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${index.theme.sizes.sm};border-radius:${index.theme.radius.base};}`;
-styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--6npxd" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${index.theme.colors.secondary.blue.base};}width:100%;`;
+const StyledListItem = styled__default.default(reactAriaComponents.ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--yavsc2" }) `border-radius:${index.theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : index.theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${index.theme.sizes.xs} ${index.theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${index.theme.colors.neutral.grey.base};border-color:${index.theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${index.theme.colors.secondary.green.base};border-color:${index.theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${index.theme.sizes.sm};border-radius:${index.theme.radius.base};}`;
+styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1ejdbz1" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${index.theme.colors.secondary.blue.base};}width:100%;`;
 const LinkIcon = styled__default.default(ArrowUpIcon.ArrowUpIcon).attrs({
     width: index.theme.sizes.md,
     height: index.theme.sizes.md,
-}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `transform:rotate(90deg);color:${index.theme.colors.neutral.ink.base};`;
+}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--v71fmp" }) `transform:rotate(90deg);color:${index.theme.colors.neutral.ink.base};`;
 const HorizontalContainer = styled__default.default(Stack.Stack).attrs({
     direction: 'horizontal',
     alignY: 'center',
-}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--11udtca" }) `width:100%;`;
+}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--wvywcl" }) `width:100%;`;
 const VerticalContainer = styled__default.default(Stack.Stack).attrs({
     spacing: 'xs',
-}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--1tl5q7x" }) `width:100%;`;
-const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--i2xz7h" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${index.theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
-const ItemInfoContainer = styled__default.default.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--1gj2fqj" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
+}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--y15xnh" }) `width:100%;`;
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--15w3s8y" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${index.theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
+const ItemInfoContainer = styled__default.default.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--dgqagr" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
 
 exports.HorizontalContainer = HorizontalContainer;
 exports.InfoContainer = InfoContainer;

package/dist/components/SelectDropdown/ListItem/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../tempIcons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":["theme","styled","ListBoxItem","ListBox","ArrowUpIcon","Stack"],"mappings":"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"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../tempIcons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":["theme","styled","ListBoxItem","ListBox","ArrowUpIcon","Stack"],"mappings":"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"}

package/dist/components/SelectDropdown/ListItem/styled.js

@@ -9,21 +9,21 @@ const colourStatesMap = {
     pressed: '#E3F0FA',
     disabled: theme.colors.neutral.grey.light,
 };
-const StyledListItem = styled(ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `border-radius:${theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${theme.colors.neutral.grey.base};border-color:${theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${theme.colors.secondary.green.base};border-color:${theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${theme.sizes.sm};border-radius:${theme.radius.base};}`;
-styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--6npxd" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${theme.colors.secondary.blue.base};}width:100%;`;
+const StyledListItem = styled(ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--yavsc2" }) `border-radius:${theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${theme.colors.neutral.grey.base};border-color:${theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${theme.colors.secondary.green.base};border-color:${theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${theme.sizes.sm};border-radius:${theme.radius.base};}`;
+styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1ejdbz1" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${theme.colors.secondary.blue.base};}width:100%;`;
 const LinkIcon = styled(ArrowUpIcon).attrs({
     width: theme.sizes.md,
     height: theme.sizes.md,
-}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `transform:rotate(90deg);color:${theme.colors.neutral.ink.base};`;
+}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--v71fmp" }) `transform:rotate(90deg);color:${theme.colors.neutral.ink.base};`;
 const HorizontalContainer = styled(Stack).attrs({
     direction: 'horizontal',
     alignY: 'center',
-}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--11udtca" }) `width:100%;`;
+}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--wvywcl" }) `width:100%;`;
 const VerticalContainer = styled(Stack).attrs({
     spacing: 'xs',
-}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--1tl5q7x" }) `width:100%;`;
-const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--i2xz7h" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
-const ItemInfoContainer = styled.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--1gj2fqj" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
+}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--y15xnh" }) `width:100%;`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--15w3s8y" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
+const ItemInfoContainer = styled.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--dgqagr" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
 
 export { HorizontalContainer, InfoContainer, ItemInfoContainer, LinkIcon, StyledListItem, VerticalContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/SelectDropdown/ListItem/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../tempIcons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAIT,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAES,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../tempIcons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAIT,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAES,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAG,MAAM,CAAC,GAAG;;;;"}

package/dist/components/SelectDropdown/ListItemSection/styled.cjs

@@ -8,8 +8,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `display:flex;flex-direction:row;align-items:center;gap:${index.theme.sizes.sm};`;
-const StyledSection = styled__default.default(reactAriaComponents.Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--6na2yk" }) `border-radius:${index.theme.sizes.base};`;
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--699bks" }) `display:flex;flex-direction:row;align-items:center;gap:${index.theme.sizes.sm};`;
+const StyledSection = styled__default.default(reactAriaComponents.Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--y61rg1" }) `border-radius:${index.theme.sizes.base};`;
 
 exports.InfoContainer = InfoContainer;
 exports.StyledSection = StyledSection;

package/dist/components/SelectDropdown/ListItemSection/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":["styled","theme","Section"],"mappings":";;;;;;;;;;AAIO,MAAM,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAGD,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzBD,WAAK,CAAC,KAAK,CAAC,IAAI;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":["styled","theme","Section"],"mappings":";;;;;;;;;;AAIO,MAAM,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAGD,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzBD,WAAK,CAAC,KAAK,CAAC,IAAI;;;;;"}

package/dist/components/SelectDropdown/ListItemSection/styled.js

@@ -2,8 +2,8 @@ import { Section } from 'react-aria-components';
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
-const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
-const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--6na2yk" }) `border-radius:${theme.sizes.base};`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--699bks" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
+const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--y61rg1" }) `border-radius:${theme.sizes.base};`;
 
 export { InfoContainer, StyledSection };
 //# sourceMappingURL=styled.js.map

package/dist/components/SelectDropdown/ListItemSection/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/SelectDropdown/styled.cjs

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1fqdcy1" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
+const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--8u3k3v" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
 const StyledDropdown = styled__default.default(Dropdown.Dropdown).attrs((props) => ({
     ctaProps: {
         ...props.ctaProps,
@@ -24,12 +24,12 @@ const StyledDropdown = styled__default.default(Dropdown.Dropdown).attrs((props)
             flex: 1,
         },
     },
-})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--to2qbd" }) `padding:0;`;
-const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--122i7bz" }) `margin:${index.theme.sizes.sm};`;
-const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1vuemb8" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
+})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--1au29pg" }) `padding:0;`;
+const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--1mbksln" }) `margin:${index.theme.sizes.sm};`;
+const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--y8yx6s" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
 const CTAButton = styled__default.default(Button.Button).attrs({
     variant: 'flat',
-}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--1udm7tz" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
+}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--jmck4k" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
 
 exports.CTAButton = CTAButton;
 exports.Separator = Separator;