@veeqo/ui 9.4.0 → 9.5.0

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport { Stack } from '../Stack';\nimport { PageInput, PaginationButton } from './styled';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon } from '../../tempIcons/RightArrowIcon';\nimport { StartArrowIcon } from '../../tempIcons/StartArrowIcon';\nimport { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';\nimport { EndArrowIcon } from '../../tempIcons/EndArrowIcon';\n\nimport { ComponentSize } from '../types';\n\nexport const Pagination = ({\n  testId,\n  e2eClassName,\n  currentPage,\n  totalPagesCount,\n  handleChangePage,\n}: PaginationProps) => {\n  const {\n    pageInputValue,\n    handleIncrement,\n    handleDecrement,\n    handleFormSubmit,\n    handleInputChange,\n    handleSubmit,\n  } = usePagination({\n    currentPage,\n    totalPagesCount,\n    handleChangePage,\n  });\n\n  /**\n   * A function to go back to the first page, provided we aren't already there.\n   */\n  const handleSkipBack = () => {\n    if (currentPage !== 1) handleChangePage(1);\n  };\n\n  /**\n   * A function to go to the last page, provided we aren't already there.\n   */\n  const handleSkipToEnd = () => {\n    if (currentPage !== totalPagesCount) handleChangePage(totalPagesCount);\n  };\n\n  return (\n    <Stack\n      direction=\"horizontal\"\n      alignY=\"center\"\n      spacing=\"xs\"\n      data-testid={testId}\n      className={e2eClassName}\n    >\n      <PaginationButton\n        onClick={handleSkipBack}\n        iconSlot={<StartArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to first page\"\n      />\n      <PaginationButton\n        onClick={handleDecrement}\n        iconSlot={<LeftArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to previous page\"\n        aria-disabled={currentPage <= 1}\n      />\n\n      <form onSubmit={handleFormSubmit}>\n        <PageInput\n          aria-live=\"polite\"\n          aria-label={`page ${currentPage} of ${totalPagesCount}`}\n          size={ComponentSize.sm}\n          type=\"number\"\n          value={pageInputValue}\n          min=\"1\"\n          max={`${totalPagesCount}`}\n          onChange={handleInputChange}\n          onBlur={handleSubmit}\n        />\n      </form>\n\n      <PageCount count={totalPagesCount} />\n\n      <PaginationButton\n        onClick={handleIncrement}\n        iconSlot={<RightArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to next page\"\n        aria-disabled={currentPage >= totalPagesCount}\n      />\n\n      <PaginationButton\n        onClick={handleSkipToEnd}\n        iconSlot={<EndArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to last page\"\n        aria-disabled={currentPage >= totalPagesCount}\n      />\n    </Stack>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACA,KAAI;AACpB,IAAA,MAAM,EACJ,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,GAAG,aAAa,CAAC;QAChB,WAAW;QACX,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,WAAW,KAAK,CAAC;YAAE,gBAAgB,CAAC,CAAC,CAAC;AAC5C,KAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,KAAC;IAED,QACE,oBAAC,KAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,IAAI,EAAA,aAAA,EACC,MAAM,EACnB,SAAS,EAAE,YAAY,EAAA;AAEvB,QAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,KAAC,CAAA,aAAA,CAAA,cAAc,OAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,kBAAkB,EAC7B,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,KAAC,CAAA,aAAA,CAAA,aAAa,OAAG,EAC3B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,qBAAqB,EACjB,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,CAAA;QAEF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,QAAQ,EAAE,gBAAgB,EAAA;AAC9B,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACE,EAAA,WAAA,EAAA,QAAQ,gBACN,CAAQ,KAAA,EAAA,WAAW,OAAO,eAAe,CAAA,CAAE,EACvD,IAAI,EAAE,aAAa,CAAC,EAAE,EACtB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,CAAG,EAAA,eAAe,EAAE,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,YAAY,GACpB,CACG;AAEP,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAI,CAAA;QAErC,KAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,KAAC,CAAA,aAAA,CAAA,cAAc,OAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,CAAA;QAEF,KAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,KAAC,CAAA,aAAA,CAAA,YAAY,EAAG,IAAA,CAAA,EAC1B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAAA,CAC7C,CACI;AAEZ;;;;"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport { Stack } from '../Stack';\nimport { PageInput, PaginationButton } from './styled';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon } from '../../tempIcons/RightArrowIcon';\nimport { StartArrowIcon } from '../../tempIcons/StartArrowIcon';\nimport { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';\nimport { EndArrowIcon } from '../../tempIcons/EndArrowIcon';\n\nimport { ComponentSize } from '../types';\n\nexport const Pagination = ({\n  testId,\n  e2eClassName,\n  currentPage,\n  totalPagesCount,\n  handleChangePage,\n}: PaginationProps) => {\n  const {\n    pageInputValue,\n    handleIncrement,\n    handleDecrement,\n    handleFormSubmit,\n    handleInputChange,\n    handleSubmit,\n  } = usePagination({\n    currentPage,\n    totalPagesCount,\n    handleChangePage,\n  });\n\n  /**\n   * A function to go back to the first page, provided we aren't already there.\n   */\n  const handleSkipBack = () => {\n    if (currentPage !== 1) handleChangePage(1);\n  };\n\n  /**\n   * A function to go to the last page, provided we aren't already there.\n   */\n  const handleSkipToEnd = () => {\n    if (currentPage !== totalPagesCount) handleChangePage(totalPagesCount);\n  };\n\n  return (\n    <Stack\n      direction=\"horizontal\"\n      alignY=\"center\"\n      spacing=\"xs\"\n      data-testid={testId}\n      className={e2eClassName}\n    >\n      <PaginationButton\n        onClick={handleSkipBack}\n        iconSlot={<StartArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to first page\"\n      />\n      <PaginationButton\n        onClick={handleDecrement}\n        iconSlot={<LeftArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to previous page\"\n        aria-disabled={currentPage <= 1}\n      />\n\n      <form onSubmit={handleFormSubmit}>\n        <PageInput\n          aria-live=\"polite\"\n          aria-label={`page ${currentPage} of ${totalPagesCount}`}\n          size={ComponentSize.sm}\n          type=\"number\"\n          value={pageInputValue}\n          min=\"1\"\n          max={`${totalPagesCount}`}\n          onChange={handleInputChange}\n          onBlur={handleSubmit}\n        />\n      </form>\n\n      <PageCount count={totalPagesCount} />\n\n      <PaginationButton\n        onClick={handleIncrement}\n        iconSlot={<RightArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to next page\"\n        aria-disabled={currentPage >= totalPagesCount}\n      />\n\n      <PaginationButton\n        onClick={handleSkipToEnd}\n        iconSlot={<EndArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to last page\"\n        aria-disabled={currentPage >= totalPagesCount}\n      />\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACA,KAAI;AACpB,IAAA,MAAM,EACJ,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,GAAG,aAAa,CAAC;QAChB,WAAW;QACX,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,WAAW,KAAK,CAAC;YAAE,gBAAgB,CAAC,CAAC,CAAC;AAC5C,KAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,KAAC;IAED,QACEA,6BAAC,KAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,IAAI,EAAA,aAAA,EACC,MAAM,EACnB,SAAS,EAAE,YAAY,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,OAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,kBAAkB,EAC7B,CAAA;QACFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,aAAa,OAAG,EAC3B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,qBAAqB,EACjB,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,CAAA;QAEFA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,QAAQ,EAAE,gBAAgB,EAAA;AAC9B,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EACE,EAAA,WAAA,EAAA,QAAQ,gBACN,CAAQ,KAAA,EAAA,WAAW,OAAO,eAAe,CAAA,CAAE,EACvD,IAAI,EAAE,aAAa,CAAC,EAAE,EACtB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,CAAG,EAAA,eAAe,EAAE,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,YAAY,GACpB,CACG;AAEP,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAI,CAAA;QAErCA,cAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,OAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,CAAA;QAEFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,YAAY,EAAG,IAAA,CAAA,EAC1B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAAA,CAC7C,CACI;AAEZ;;;;"}

package/dist/components/Pagination/components.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React__default from 'react';
 import { Text } from '../Text/Text.js';
 import { PageLimitContainer } from './styled.js';
 
-const PageCount = ({ count }) => (React.createElement(React.Fragment, null,
-    React.createElement("div", null,
-        React.createElement(Text, { variant: "bodySmall", "aria-hidden": true }, "/")),
-    React.createElement(PageLimitContainer, { alignX: "center", alignY: "center", "aria-hidden": true },
-        React.createElement(Text, { variant: "bodySmall" }, count))));
+const PageCount = ({ count }) => (React__default.createElement(React__default.Fragment, null,
+    React__default.createElement("div", null,
+        React__default.createElement(Text, { variant: "bodySmall", "aria-hidden": true }, "/")),
+    React__default.createElement(PageLimitContainer, { alignX: "center", alignY: "center", "aria-hidden": true },
+        React__default.createElement(Text, { variant: "bodySmall" }, count))));
 
 export { PageCount };
 //# sourceMappingURL=components.js.map

package/dist/components/Pagination/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n  <>\n    <div>\n      <Text variant=\"bodySmall\" aria-hidden>\n        /\n      </Text>\n    </div>\n    <PageLimitContainer alignX=\"center\" alignY=\"center\" aria-hidden>\n      <Text variant=\"bodySmall\">{count}</Text>\n    </PageLimitContainer>\n  </>\n);\n"],"names":[],"mappings":";;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,WAAW,6BAElB,CACH;IACN,KAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QACjD,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,WAAW,EAAE,EAAA,KAAK,CAAQ,CACrB,CACpB;;;;"}
+{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n  <>\n    <div>\n      <Text variant=\"bodySmall\" aria-hidden>\n        /\n      </Text>\n    </div>\n    <PageLimitContainer alignX=\"center\" alignY=\"center\" aria-hidden>\n      <Text variant=\"bodySmall\">{count}</Text>\n    </PageLimitContainer>\n  </>\n);\n"],"names":["React"],"mappings":";;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,WAAW,6BAElB,CACH;IACNA,cAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QACjDA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,WAAW,EAAE,EAAA,KAAK,CAAQ,CACrB,CACpB;;;;"}

package/dist/components/Popover/Popover.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React__default, { useState, useMemo, useEffect } from 'react';
 import { usePopper } from 'react-popper';
 import ResizeObserver from 'resize-observer-polyfill';
 import { Portal } from '../Portal/Portal.js';
@@ -49,9 +49,9 @@ const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placemen
             window.removeEventListener('resize', update);
         };
     }, [update]);
-    return (React.createElement(Portal, { rootElementRef: rootElementRef },
-        !removeBackdrop && (React.createElement(Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),
-        React.createElement(PopoverDialog, { open: true, id: id, zIndex: zIndex, ref: setPopperElement, style: {
+    return (React__default.createElement(Portal, { rootElementRef: rootElementRef },
+        !removeBackdrop && (React__default.createElement(Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),
+        React__default.createElement(PopoverDialog, { open: true, id: id, zIndex: zIndex, ref: setPopperElement, style: {
                 ...styles.popper,
                 ...style,
                 ...(useAnchorWidth ? { minWidth: anchorElement === null || anchorElement === undefined ? undefined : anchorElement.clientWidth } : {}),

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { PopoverDialog, Backdrop } from './styled';\nimport { generateId } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n  id: passedId,\n  children,\n  zIndex = theme.layers.popup,\n  placement = 'bottom',\n  anchorElement,\n  rootElementRef,\n  onShouldClose,\n  style,\n  disableFocusLock,\n  removeBackdrop = false,\n  useAnchorWidth,\n  ignoreAriaWarnings,\n  ...dialogProps\n}: PopoverProps) => {\n  // Set up PopperJS\n  const [popperElement, setPopperElement] = useState<HTMLDialogElement | null>(null);\n  const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n  // Setup popover id to use passed, or generate its' own.\n  const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n  // Check and update aria for anchor, only works once this has rendered for the first time though.\n  useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n  const onClose = () => {\n    anchorElement?.focus();\n    onShouldClose?.();\n  };\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose,\n    disableFocusLock,\n  });\n\n  /**\n   * When content size is changed, force popper update\n   */\n  useEffect(() => {\n    if (!update || !popperElement) return undefined;\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(popperElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [update, popperElement]);\n\n  /**\n   * When window is resized, force popper update\n   */\n  useEffect(() => {\n    if (!update) return undefined;\n    window.addEventListener('resize', update);\n\n    return () => {\n      window.removeEventListener('resize', update);\n    };\n  }, [update]);\n\n  return (\n    <Portal rootElementRef={rootElementRef}>\n      {!removeBackdrop && (\n        <Backdrop onClick={onClose} zIndex={zIndex} data-testid=\"popover-backdrop\" />\n      )}\n      <PopoverDialog\n        open\n        id={id}\n        zIndex={zIndex}\n        ref={setPopperElement}\n        style={{\n          ...styles.popper,\n          ...style,\n          ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n        }}\n        onKeyDown={handleKeyDown}\n        {...attributes.popper}\n        {...dialogProps}\n      >\n        {children}\n      </PopoverDialog>\n    </Portal>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { PopoverDialog, Backdrop } from './styled';\nimport { generateId } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n  id: passedId,\n  children,\n  zIndex = theme.layers.popup,\n  placement = 'bottom',\n  anchorElement,\n  rootElementRef,\n  onShouldClose,\n  style,\n  disableFocusLock,\n  removeBackdrop = false,\n  useAnchorWidth,\n  ignoreAriaWarnings,\n  ...dialogProps\n}: PopoverProps) => {\n  // Set up PopperJS\n  const [popperElement, setPopperElement] = useState<HTMLDialogElement | null>(null);\n  const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n  // Setup popover id to use passed, or generate its' own.\n  const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n  // Check and update aria for anchor, only works once this has rendered for the first time though.\n  useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n  const onClose = () => {\n    anchorElement?.focus();\n    onShouldClose?.();\n  };\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose,\n    disableFocusLock,\n  });\n\n  /**\n   * When content size is changed, force popper update\n   */\n  useEffect(() => {\n    if (!update || !popperElement) return undefined;\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(popperElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [update, popperElement]);\n\n  /**\n   * When window is resized, force popper update\n   */\n  useEffect(() => {\n    if (!update) return undefined;\n    window.addEventListener('resize', update);\n\n    return () => {\n      window.removeEventListener('resize', update);\n    };\n  }, [update]);\n\n  return (\n    <Portal rootElementRef={rootElementRef}>\n      {!removeBackdrop && (\n        <Backdrop onClick={onClose} zIndex={zIndex} data-testid=\"popover-backdrop\" />\n      )}\n      <PopoverDialog\n        open\n        id={id}\n        zIndex={zIndex}\n        ref={setPopperElement}\n        style={{\n          ...styles.popper,\n          ...style,\n          ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n        }}\n        onKeyDown={handleKeyDown}\n        {...attributes.popper}\n        {...dialogProps}\n      >\n        {children}\n      </PopoverDialog>\n    </Portal>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Portal/Portal.cjs

@@ -2,33 +2,44 @@
 
 var React = require('react');
 var reactDom = require('react-dom');
-require('../../hooks/useFocusVisible.cjs');
-var useId = require('../../hooks/useId.cjs');
+var generateId = require('../../utils/generateId.cjs');
 var utils = require('./utils.cjs');
 
 /**
  * The portal component renders content on the document `body` unless `rootElementRef` is passed.
  */
-const Portal = ({ children, rootElementRef }) => {
-    const [isMounted, setIsMounted] = React.useState(false);
-    const [portalNode, setPortalNode] = React.useState(null);
-    const id = useId.useId({ prefix: 'portal' });
-    React.useEffect(() => {
-        const element = document.createElement('div');
-        element.id = `portal-${id}`;
-        element.style.cssText = 'position: absolute; top: 0; left: 0;';
-        const attachTo = rootElementRef || utils.getLastOpenDialog() || document.body;
-        attachTo.appendChild(element);
-        setPortalNode(element);
-        setIsMounted(true);
-        return () => {
-            if (document.contains(attachTo) && attachTo.contains(element)) {
-                attachTo.removeChild(element);
-            }
+class Portal extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.id = generateId.generateId('portal');
+        this.portalNode = null;
+        this.attachTo = null;
+        this.state = {
+            isMounted: false,
         };
-    }, [id, rootElementRef]);
-    return portalNode && isMounted ? reactDom.createPortal(children, portalNode) : null;
-};
+    }
+    componentDidMount() {
+        const { rootElementRef } = this.props;
+        this.portalNode = document.createElement('div');
+        this.portalNode.id = `portal-${this.id}`;
+        this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';
+        this.attachTo = rootElementRef || utils.getLastOpenDialog() || document.body;
+        this.attachTo.appendChild(this.portalNode);
+        this.setState({ isMounted: true });
+    }
+    componentWillUnmount() {
+        if (this.portalNode && this.attachTo) {
+            if (document.contains(this.attachTo) && this.attachTo.contains(this.portalNode)) {
+                this.attachTo.removeChild(this.portalNode);
+            }
+        }
+    }
+    render() {
+        const { children } = this.props;
+        const { isMounted } = this.state;
+        return this.portalNode && isMounted ? reactDom.createPortal(children, this.portalNode) : null;
+    }
+}
 
 exports.Portal = Portal;
 //# sourceMappingURL=Portal.cjs.map

package/dist/components/Portal/Portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.cjs","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useEffect, useState, ReactNode, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useId } from '../../hooks';\nimport { getLastOpenDialog } from './utils';\n\ntype PortalProps = {\n  children: ReactNode;\n  rootElementRef?: HTMLElement;\n};\n\n/**\n * The portal component renders content on the document `body` unless `rootElementRef` is passed.\n */\nexport const Portal: FC<PortalProps> = ({ children, rootElementRef }: PortalProps) => {\n  const [isMounted, setIsMounted] = useState(false);\n  const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);\n  const id = useId({ prefix: 'portal' });\n\n  useEffect(() => {\n    const element = document.createElement('div');\n    element.id = `portal-${id}`;\n    element.style.cssText = 'position: absolute; top: 0; left: 0;';\n\n    const attachTo = rootElementRef || getLastOpenDialog() || document.body;\n    attachTo.appendChild(element);\n\n    setPortalNode(element);\n    setIsMounted(true);\n\n    return () => {\n      if (document.contains(attachTo) && attachTo.contains(element)) {\n        attachTo.removeChild(element);\n      }\n    };\n  }, [id, rootElementRef]);\n\n  return portalNode && isMounted ? createPortal(children, portalNode) : null;\n};\n"],"names":["useState","useId","useEffect","getLastOpenDialog","createPortal"],"mappings":";;;;;;;;AAUA;;AAEG;AACU,MAAA,MAAM,GAAoB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAe,KAAI;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAqB,IAAI,CAAC;IACtE,MAAM,EAAE,GAAGC,WAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;IAEtCC,eAAS,CAAC,MAAK;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,EAAE,GAAG,CAAU,OAAA,EAAA,EAAE,EAAE;AAC3B,QAAA,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC;QAE9D,MAAM,QAAQ,GAAG,cAAc,IAAIC,uBAAiB,EAAE,IAAI,QAAQ,CAAC,IAAI;AACvE,QAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;QAE7B,aAAa,CAAC,OAAO,CAAC;QACtB,YAAY,CAAC,IAAI,CAAC;AAElB,QAAA,OAAO,MAAK;AACV,YAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC7D,gBAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;AAC9B;AACH,SAAC;AACH,KAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;AAExB,IAAA,OAAO,UAAU,IAAI,SAAS,GAAGC,qBAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,IAAI;AAC5E;;;;"}
+{"version":3,"file":"Portal.cjs","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { generateId } from '../../utils/generateId';\nimport { getLastOpenDialog } from './utils';\n\ntype PortalProps = {\n  children: ReactNode;\n  rootElementRef?: HTMLElement;\n};\n\ntype PortalState = {\n  isMounted: boolean;\n};\n\n/**\n * The portal component renders content on the document `body` unless `rootElementRef` is passed.\n */\nexport class Portal extends PureComponent<PortalProps, PortalState> {\n  id = generateId('portal');\n\n  portalNode: HTMLElement | null = null;\n\n  attachTo: HTMLElement | null = null;\n\n  constructor(props: PortalProps) {\n    super(props);\n    this.state = {\n      isMounted: false,\n    };\n  }\n\n  componentDidMount() {\n    const { rootElementRef } = this.props;\n\n    this.portalNode = document.createElement('div');\n    this.portalNode.id = `portal-${this.id}`;\n    this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';\n\n    this.attachTo = rootElementRef || getLastOpenDialog() || document.body;\n    this.attachTo.appendChild(this.portalNode);\n\n    this.setState({ isMounted: true });\n  }\n\n  componentWillUnmount() {\n    if (this.portalNode && this.attachTo) {\n      if (document.contains(this.attachTo) && this.attachTo.contains(this.portalNode)) {\n        this.attachTo.removeChild(this.portalNode);\n      }\n    }\n  }\n\n  render(): React.ReactPortal | null {\n    const { children } = this.props;\n    const { isMounted } = this.state;\n\n    return this.portalNode && isMounted ? createPortal(children, this.portalNode) : null;\n  }\n}\n"],"names":["PureComponent","generateId","getLastOpenDialog","createPortal"],"mappings":";;;;;;;AAcA;;AAEG;AACG,MAAO,MAAO,SAAQA,mBAAuC,CAAA;AAOjE,IAAA,WAAA,CAAY,KAAkB,EAAA;QAC5B,KAAK,CAAC,KAAK,CAAC;AAPd,QAAA,IAAA,CAAA,EAAE,GAAGC,qBAAU,CAAC,QAAQ,CAAC;QAEzB,IAAU,CAAA,UAAA,GAAuB,IAAI;QAErC,IAAQ,CAAA,QAAA,GAAuB,IAAI;QAIjC,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,SAAS,EAAE,KAAK;SACjB;;IAGH,iBAAiB,GAAA;AACf,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK;QAErC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QAC/C,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,UAAU,IAAI,CAAC,EAAE,CAAA,CAAE;QACxC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC;QAEtE,IAAI,CAAC,QAAQ,GAAG,cAAc,IAAIC,uBAAiB,EAAE,IAAI,QAAQ,CAAC,IAAI;QACtE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;QAE1C,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGpC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AACpC,YAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;gBAC/E,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC3C;AACF;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;AAC/B,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK;QAEhC,OAAO,IAAI,CAAC,UAAU,IAAI,SAAS,GAAGC,qBAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI;;AAEvF;;;;"}

package/dist/components/Portal/Portal.d.ts

@@ -1,10 +1,21 @@
-import { ReactNode, FC } from 'react';
+import { PureComponent, ReactNode } from 'react';
 type PortalProps = {
     children: ReactNode;
     rootElementRef?: HTMLElement;
 };
+type PortalState = {
+    isMounted: boolean;
+};
 /**
  * The portal component renders content on the document `body` unless `rootElementRef` is passed.
  */
-export declare const Portal: FC<PortalProps>;
+export declare class Portal extends PureComponent<PortalProps, PortalState> {
+    id: string;
+    portalNode: HTMLElement | null;
+    attachTo: HTMLElement | null;
+    constructor(props: PortalProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactPortal | null;
+}
 export {};

package/dist/components/Portal/Portal.js

@@ -1,32 +1,43 @@
-import { useState, useEffect } from 'react';
+import { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
-import '../../hooks/useFocusVisible.js';
-import { useId } from '../../hooks/useId.js';
+import { generateId } from '../../utils/generateId.js';
 import { getLastOpenDialog } from './utils.js';
 
 /**
  * The portal component renders content on the document `body` unless `rootElementRef` is passed.
  */
-const Portal = ({ children, rootElementRef }) => {
-    const [isMounted, setIsMounted] = useState(false);
-    const [portalNode, setPortalNode] = useState(null);
-    const id = useId({ prefix: 'portal' });
-    useEffect(() => {
-        const element = document.createElement('div');
-        element.id = `portal-${id}`;
-        element.style.cssText = 'position: absolute; top: 0; left: 0;';
-        const attachTo = rootElementRef || getLastOpenDialog() || document.body;
-        attachTo.appendChild(element);
-        setPortalNode(element);
-        setIsMounted(true);
-        return () => {
-            if (document.contains(attachTo) && attachTo.contains(element)) {
-                attachTo.removeChild(element);
-            }
+class Portal extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.id = generateId('portal');
+        this.portalNode = null;
+        this.attachTo = null;
+        this.state = {
+            isMounted: false,
         };
-    }, [id, rootElementRef]);
-    return portalNode && isMounted ? createPortal(children, portalNode) : null;
-};
+    }
+    componentDidMount() {
+        const { rootElementRef } = this.props;
+        this.portalNode = document.createElement('div');
+        this.portalNode.id = `portal-${this.id}`;
+        this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';
+        this.attachTo = rootElementRef || getLastOpenDialog() || document.body;
+        this.attachTo.appendChild(this.portalNode);
+        this.setState({ isMounted: true });
+    }
+    componentWillUnmount() {
+        if (this.portalNode && this.attachTo) {
+            if (document.contains(this.attachTo) && this.attachTo.contains(this.portalNode)) {
+                this.attachTo.removeChild(this.portalNode);
+            }
+        }
+    }
+    render() {
+        const { children } = this.props;
+        const { isMounted } = this.state;
+        return this.portalNode && isMounted ? createPortal(children, this.portalNode) : null;
+    }
+}
 
 export { Portal };
 //# sourceMappingURL=Portal.js.map

package/dist/components/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useEffect, useState, ReactNode, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useId } from '../../hooks';\nimport { getLastOpenDialog } from './utils';\n\ntype PortalProps = {\n  children: ReactNode;\n  rootElementRef?: HTMLElement;\n};\n\n/**\n * The portal component renders content on the document `body` unless `rootElementRef` is passed.\n */\nexport const Portal: FC<PortalProps> = ({ children, rootElementRef }: PortalProps) => {\n  const [isMounted, setIsMounted] = useState(false);\n  const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);\n  const id = useId({ prefix: 'portal' });\n\n  useEffect(() => {\n    const element = document.createElement('div');\n    element.id = `portal-${id}`;\n    element.style.cssText = 'position: absolute; top: 0; left: 0;';\n\n    const attachTo = rootElementRef || getLastOpenDialog() || document.body;\n    attachTo.appendChild(element);\n\n    setPortalNode(element);\n    setIsMounted(true);\n\n    return () => {\n      if (document.contains(attachTo) && attachTo.contains(element)) {\n        attachTo.removeChild(element);\n      }\n    };\n  }, [id, rootElementRef]);\n\n  return portalNode && isMounted ? createPortal(children, portalNode) : null;\n};\n"],"names":[],"mappings":";;;;;;AAUA;;AAEG;AACU,MAAA,MAAM,GAAoB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAe,KAAI;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC;IACtE,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;IAEtC,SAAS,CAAC,MAAK;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,EAAE,GAAG,CAAU,OAAA,EAAA,EAAE,EAAE;AAC3B,QAAA,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC;QAE9D,MAAM,QAAQ,GAAG,cAAc,IAAI,iBAAiB,EAAE,IAAI,QAAQ,CAAC,IAAI;AACvE,QAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;QAE7B,aAAa,CAAC,OAAO,CAAC;QACtB,YAAY,CAAC,IAAI,CAAC;AAElB,QAAA,OAAO,MAAK;AACV,YAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC7D,gBAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;AAC9B;AACH,SAAC;AACH,KAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;AAExB,IAAA,OAAO,UAAU,IAAI,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,IAAI;AAC5E;;;;"}
+{"version":3,"file":"Portal.js","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { generateId } from '../../utils/generateId';\nimport { getLastOpenDialog } from './utils';\n\ntype PortalProps = {\n  children: ReactNode;\n  rootElementRef?: HTMLElement;\n};\n\ntype PortalState = {\n  isMounted: boolean;\n};\n\n/**\n * The portal component renders content on the document `body` unless `rootElementRef` is passed.\n */\nexport class Portal extends PureComponent<PortalProps, PortalState> {\n  id = generateId('portal');\n\n  portalNode: HTMLElement | null = null;\n\n  attachTo: HTMLElement | null = null;\n\n  constructor(props: PortalProps) {\n    super(props);\n    this.state = {\n      isMounted: false,\n    };\n  }\n\n  componentDidMount() {\n    const { rootElementRef } = this.props;\n\n    this.portalNode = document.createElement('div');\n    this.portalNode.id = `portal-${this.id}`;\n    this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';\n\n    this.attachTo = rootElementRef || getLastOpenDialog() || document.body;\n    this.attachTo.appendChild(this.portalNode);\n\n    this.setState({ isMounted: true });\n  }\n\n  componentWillUnmount() {\n    if (this.portalNode && this.attachTo) {\n      if (document.contains(this.attachTo) && this.attachTo.contains(this.portalNode)) {\n        this.attachTo.removeChild(this.portalNode);\n      }\n    }\n  }\n\n  render(): React.ReactPortal | null {\n    const { children } = this.props;\n    const { isMounted } = this.state;\n\n    return this.portalNode && isMounted ? createPortal(children, this.portalNode) : null;\n  }\n}\n"],"names":[],"mappings":";;;;;AAcA;;AAEG;AACG,MAAO,MAAO,SAAQ,aAAuC,CAAA;AAOjE,IAAA,WAAA,CAAY,KAAkB,EAAA;QAC5B,KAAK,CAAC,KAAK,CAAC;AAPd,QAAA,IAAA,CAAA,EAAE,GAAG,UAAU,CAAC,QAAQ,CAAC;QAEzB,IAAU,CAAA,UAAA,GAAuB,IAAI;QAErC,IAAQ,CAAA,QAAA,GAAuB,IAAI;QAIjC,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,SAAS,EAAE,KAAK;SACjB;;IAGH,iBAAiB,GAAA;AACf,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK;QAErC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QAC/C,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,UAAU,IAAI,CAAC,EAAE,CAAA,CAAE;QACxC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC;QAEtE,IAAI,CAAC,QAAQ,GAAG,cAAc,IAAI,iBAAiB,EAAE,IAAI,QAAQ,CAAC,IAAI;QACtE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;QAE1C,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGpC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AACpC,YAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;gBAC/E,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC3C;AACF;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;AAC/B,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK;QAEhC,OAAO,IAAI,CAAC,UAAU,IAAI,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI;;AAEvF;;;;"}

package/dist/components/Portal/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../src/components/Portal/utils.ts"],"sourcesContent":["export const getLastOpenDialog = () => {\n  const dialogs = document.querySelectorAll('dialog[open]');\n  if (dialogs.length === 0) return null;\n\n  return dialogs[dialogs.length - 1];\n};\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAiB,GAAG,MAAK;IACpC,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACzD,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;IAErC,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;AACpC;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Portal/utils.ts"],"sourcesContent":["export const getLastOpenDialog = (): HTMLElement | null => {\n  const dialogs = document.querySelectorAll('dialog[open]');\n  if (dialogs.length === 0) return null;\n\n  return dialogs[dialogs.length - 1] as HTMLElement;\n};\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAiB,GAAG,MAAyB;IACxD,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACzD,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;IAErC,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAgB;AACnD;;;;"}

package/dist/components/Portal/utils.d.ts

@@ -1 +1 @@
-export declare const getLastOpenDialog: () => Element | null;
+export declare const getLastOpenDialog: () => HTMLElement | null;

package/dist/components/Portal/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Portal/utils.ts"],"sourcesContent":["export const getLastOpenDialog = () => {\n  const dialogs = document.querySelectorAll('dialog[open]');\n  if (dialogs.length === 0) return null;\n\n  return dialogs[dialogs.length - 1];\n};\n"],"names":[],"mappings":"AAAO,MAAM,iBAAiB,GAAG,MAAK;IACpC,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACzD,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;IAErC,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;AACpC;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Portal/utils.ts"],"sourcesContent":["export const getLastOpenDialog = (): HTMLElement | null => {\n  const dialogs = document.querySelectorAll('dialog[open]');\n  if (dialogs.length === 0) return null;\n\n  return dialogs[dialogs.length - 1] as HTMLElement;\n};\n"],"names":[],"mappings":"AAAO,MAAM,iBAAiB,GAAG,MAAyB;IACxD,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACzD,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;IAErC,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAgB;AACnD;;;;"}

package/dist/components/PriceInput/PriceInput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { ComponentSize } from '../types.js';
 import { Stepper } from '../Stepper/Stepper.js';
 import { PriceInputGroup, PrefixContainer, PrefixText, StyledTextField } from './styled.js';
@@ -44,11 +44,11 @@ const PriceInput = withLabels(({ className = '', hasError, currency, disabled =
         if (key === 'ArrowDown')
             handleDecrement(onChange);
     };
-    return (React.createElement(PriceInputGroup, { className: className, hasError: hasError },
-        React.createElement(PrefixContainer, { disabled: disabled, size: size },
-            React.createElement(PrefixText, { variant: "hintText" }, currency)),
-        React.createElement(StyledTextField, { placeholder: "0.00", type: "currency", value: priceValue, step: step, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, disabled: disabled, size: size, ...otherProps }),
-        React.createElement(Stepper, { onIncrement: () => handleIncrement(), onDecrement: () => handleDecrement(), disabled: disabled, size: size })));
+    return (React__default.createElement(PriceInputGroup, { className: className, hasError: hasError },
+        React__default.createElement(PrefixContainer, { disabled: disabled, size: size },
+            React__default.createElement(PrefixText, { variant: "hintText" }, currency)),
+        React__default.createElement(StyledTextField, { placeholder: "0.00", type: "currency", value: priceValue, step: step, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, disabled: disabled, size: size, ...otherProps }),
+        React__default.createElement(Stepper, { onIncrement: () => handleIncrement(), onDecrement: () => handleDecrement(), disabled: disabled, size: size })));
 });
 PriceInput.displayName = 'PriceInput';
 

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

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.js","sources":["../../../src/components/PriceInput/PriceInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ComponentSize } from '../types';\nimport { Stepper } from '../Stepper';\nimport type { TextFieldProps } from '../TextField/types';\n\nimport { PriceInputGroup, StyledTextField, PrefixContainer, PrefixText } from './styled';\n\nimport { CurrencyProps } from './types';\nimport { withLabels } from '../../hoc';\n\nconst fractionDigits = 2;\n\nfunction stringToFixed(price: string) {\n  const floatPrice = parseFloat(price.replace(',', '.'));\n  return floatPrice.toFixed(fractionDigits);\n}\n\nexport const PriceInput = withLabels(\n  ({\n    className = '',\n    hasError,\n    currency,\n    disabled = false,\n    onChange,\n    onPriceChange,\n    priceValue,\n    step = '0.1',\n    size = ComponentSize.base,\n    ...otherProps\n  }: CurrencyProps) => {\n    const handleChange = (value: string) =>\n      onChange(value.replace(/[a-zA-Z]/g, '').replace(',', '.'));\n\n    const handleBlur: TextFieldProps['onBlur'] = (e) => {\n      const target = e.target as HTMLInputElement;\n      const { value } = target;\n\n      if (!value) {\n        onPriceChange('');\n\n        return;\n      }\n\n      const roundedValue = stringToFixed(value);\n\n      onPriceChange(roundedValue);\n    };\n\n    const handleIncrement = (callback = onPriceChange) => {\n      const currentPrice = parseFloat(priceValue) || 0;\n      const currentStep = parseFloat(step);\n\n      callback((currentPrice + currentStep).toFixed(fractionDigits));\n    };\n    const handleDecrement = (callback = onPriceChange) => {\n      const currentPrice = parseFloat(priceValue) || 0;\n      const currentStep = parseFloat(step);\n\n      callback((currentPrice - currentStep).toFixed(fractionDigits));\n    };\n\n    const handleKeyDown: TextFieldProps['onKeyDown'] = (e) => {\n      const { key } = e;\n      const target = e.target as HTMLInputElement;\n      const isInForm = target.form;\n\n      if (!isInForm) {\n        if (key === 'Enter') target.blur();\n      }\n      if (key === 'ArrowUp') handleIncrement(onChange);\n      if (key === 'ArrowDown') handleDecrement(onChange);\n    };\n\n    return (\n      <PriceInputGroup className={className} hasError={hasError}>\n        <PrefixContainer disabled={disabled} size={size}>\n          <PrefixText variant=\"hintText\">{currency}</PrefixText>\n        </PrefixContainer>\n        <StyledTextField\n          placeholder=\"0.00\"\n          type=\"currency\"\n          value={priceValue}\n          step={step}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          disabled={disabled}\n          size={size}\n          {...otherProps}\n        />\n        <Stepper\n          onIncrement={() => handleIncrement()}\n          onDecrement={() => handleDecrement()}\n          disabled={disabled}\n          size={size}\n        />\n      </PriceInputGroup>\n    );\n  },\n);\n\nPriceInput.displayName = 'PriceInput';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PriceInput.js","sources":["../../../src/components/PriceInput/PriceInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ComponentSize } from '../types';\nimport { Stepper } from '../Stepper';\nimport type { TextFieldProps } from '../TextField/types';\n\nimport { PriceInputGroup, StyledTextField, PrefixContainer, PrefixText } from './styled';\n\nimport { CurrencyProps } from './types';\nimport { withLabels } from '../../hoc';\n\nconst fractionDigits = 2;\n\nfunction stringToFixed(price: string) {\n  const floatPrice = parseFloat(price.replace(',', '.'));\n  return floatPrice.toFixed(fractionDigits);\n}\n\nexport const PriceInput = withLabels(\n  ({\n    className = '',\n    hasError,\n    currency,\n    disabled = false,\n    onChange,\n    onPriceChange,\n    priceValue,\n    step = '0.1',\n    size = ComponentSize.base,\n    ...otherProps\n  }: CurrencyProps) => {\n    const handleChange = (value: string) =>\n      onChange(value.replace(/[a-zA-Z]/g, '').replace(',', '.'));\n\n    const handleBlur: TextFieldProps['onBlur'] = (e) => {\n      const target = e.target as HTMLInputElement;\n      const { value } = target;\n\n      if (!value) {\n        onPriceChange('');\n\n        return;\n      }\n\n      const roundedValue = stringToFixed(value);\n\n      onPriceChange(roundedValue);\n    };\n\n    const handleIncrement = (callback = onPriceChange) => {\n      const currentPrice = parseFloat(priceValue) || 0;\n      const currentStep = parseFloat(step);\n\n      callback((currentPrice + currentStep).toFixed(fractionDigits));\n    };\n    const handleDecrement = (callback = onPriceChange) => {\n      const currentPrice = parseFloat(priceValue) || 0;\n      const currentStep = parseFloat(step);\n\n      callback((currentPrice - currentStep).toFixed(fractionDigits));\n    };\n\n    const handleKeyDown: TextFieldProps['onKeyDown'] = (e) => {\n      const { key } = e;\n      const target = e.target as HTMLInputElement;\n      const isInForm = target.form;\n\n      if (!isInForm) {\n        if (key === 'Enter') target.blur();\n      }\n      if (key === 'ArrowUp') handleIncrement(onChange);\n      if (key === 'ArrowDown') handleDecrement(onChange);\n    };\n\n    return (\n      <PriceInputGroup className={className} hasError={hasError}>\n        <PrefixContainer disabled={disabled} size={size}>\n          <PrefixText variant=\"hintText\">{currency}</PrefixText>\n        </PrefixContainer>\n        <StyledTextField\n          placeholder=\"0.00\"\n          type=\"currency\"\n          value={priceValue}\n          step={step}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          disabled={disabled}\n          size={size}\n          {...otherProps}\n        />\n        <Stepper\n          onIncrement={() => handleIncrement()}\n          onDecrement={() => handleDecrement()}\n          disabled={disabled}\n          size={size}\n        />\n      </PriceInputGroup>\n    );\n  },\n);\n\nPriceInput.displayName = 'PriceInput';\n"],"names":["React"],"mappings":"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"}

package/dist/components/Radio/Radio.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import React__default, { forwardRef, useCallback } from 'react';
 import { Choice } from '../Choice/Choice.js';
 import { Input } from './styled.js';
 import { generateId } from '../../utils/generateId.js';
@@ -8,8 +8,8 @@ const Radio = forwardRef(({ checked, value, name, disabled, onChange, id, childr
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
     const componentId = id !== null && id !== undefined ? id : generateId('radio');
-    return (React.createElement(Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref }),
+    return (React__default.createElement(Choice, { id: componentId, disabled: disabled, ...otherProps },
+        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref }),
         children));
 });
 

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  ({ checked, value, name, disabled, onChange, id, children, ...otherProps }: RadioProps, ref) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EACR,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps {\n  id?: string;\n  className?: string;\n  checked: boolean;\n  value?: RadioValue;\n  disabled?: boolean;\n  name?: string;\n  onChange: (checked: boolean, value?: RadioValue) => void;\n  children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  ({ checked, value, name, disabled, onChange, id, children, ...otherProps }: RadioProps, ref) => {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(e.currentTarget.checked, value);\n      },\n      [onChange, value],\n    );\n\n    const componentId = id ?? generateId('radio');\n\n    return (\n      <Choice id={componentId} disabled={disabled} {...otherProps}>\n        <Input\n          id={componentId}\n          type=\"radio\"\n          checked={checked}\n          value={value}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          ref={ref}\n        />\n        {children}\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EACR,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js

@@ -1,4 +1,4 @@
-import React from 'react';
+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;`;
@@ -17,7 +17,7 @@ const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--Scre
  * - Breadcrumb navigation, making it clear with a "you are here" screen reader text
  */
 const ScreenReaderOnly = ({ children }) => {
-    return React.createElement(ScreenReaderOnlyElement, null, children);
+    return React__default.createElement(ScreenReaderOnlyElement, null, children);
 };
 
 export { ScreenReaderOnly };

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

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

package/dist/components/Search/Search.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Button } from '../Button/Button.js';
 import { theme } from '../../theme/index.js';
 import { Container, Input, IconContainer } from './styled.js';
@@ -11,18 +11,18 @@ const Search = ({ type = 'text', disabled = false, onClearClick, onChange, onBlu
     const shouldShowClear = value && value.length > 0;
     const renderIcon = () => {
         if (isLoading) {
-            return React.createElement(Loader, { height: 24, color: fill || theme.colors.secondary.blue.base });
+            return React__default.createElement(Loader, { height: 24, color: fill || theme.colors.secondary.blue.base });
         }
         if (shouldShowClear && onClearClick) {
-            return (React.createElement(Button, { variant: "unstyled", onClick: onClearClick, style: { display: 'flex' }, "aria-label": "Clear text", type: "button" },
-                React.createElement(CrossIcon, { color: fill || theme.colors.neutral.ink.dark })));
+            return (React__default.createElement(Button, { variant: "unstyled", onClick: onClearClick, style: { display: 'flex' }, "aria-label": "Clear text", type: "button" },
+                React__default.createElement(CrossIcon, { color: fill || theme.colors.neutral.ink.dark })));
         }
-        return (React.createElement(Button, { variant: "unstyled", onClick: () => onChange(value), style: { display: 'flex' }, "aria-label": "Search", type: "button" },
-            React.createElement(SearchIcon, { color: fill || theme.colors.neutral.ink.dark, height: sizes.md, width: sizes.md })));
+        return (React__default.createElement(Button, { variant: "unstyled", onClick: () => onChange(value), style: { display: 'flex' }, "aria-label": "Search", type: "button" },
+            React__default.createElement(SearchIcon, { color: fill || theme.colors.neutral.ink.dark, height: sizes.md, width: sizes.md })));
     };
-    return (React.createElement(Container, { className: className, iconPosition: reversed ? 'left' : 'right' },
-        React.createElement(Input, { size: size, type: type, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onKeyPress: onKeyPress, placeholder: placeholder, name: name, disabled: disabled, error: error, autoComplete: autoComplete }),
-        React.createElement(IconContainer, null, renderIcon())));
+    return (React__default.createElement(Container, { className: className, iconPosition: reversed ? 'left' : 'right' },
+        React__default.createElement(Input, { size: size, type: type, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onKeyPress: onKeyPress, placeholder: placeholder, name: name, disabled: disabled, error: error, autoComplete: autoComplete }),
+        React__default.createElement(IconContainer, null, renderIcon())));
 };
 
 export { Search };

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\n\nimport { theme } from '../../theme';\n\nimport { Container, Input, IconContainer, Loader } from './styled';\nimport { SearchProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { SearchIcon } from '../../tempIcons/SearchIcon';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Search = ({\n  type = 'text',\n  disabled = false,\n  onClearClick,\n  onChange,\n  onBlur,\n  onFocus,\n  onKeyUp,\n  onKeyDown,\n  onKeyPress,\n  value = '',\n  error,\n  placeholder = '',\n  className = '',\n  name,\n  isLoading = false,\n  fill,\n  reversed = false,\n  autoComplete = 'on',\n  size = 'base',\n}: SearchProps) => {\n  const shouldShowClear = value && value.length > 0;\n\n  const renderIcon = () => {\n    if (isLoading) {\n      return <Loader height={24} color={fill || theme.colors.secondary.blue.base} />;\n    }\n    if (shouldShowClear && onClearClick) {\n      return (\n        <Button\n          variant=\"unstyled\"\n          onClick={onClearClick}\n          style={{ display: 'flex' }}\n          aria-label=\"Clear text\"\n          type=\"button\"\n        >\n          <CrossIcon color={fill || theme.colors.neutral.ink.dark} />\n        </Button>\n      );\n    }\n    return (\n      <Button\n        variant=\"unstyled\"\n        onClick={() => onChange(value)}\n        style={{ display: 'flex' }}\n        aria-label=\"Search\"\n        type=\"button\"\n      >\n        <SearchIcon\n          color={fill || theme.colors.neutral.ink.dark}\n          height={sizes.md}\n          width={sizes.md}\n        />\n      </Button>\n    );\n  };\n\n  return (\n    <Container className={className} iconPosition={reversed ? 'left' : 'right'}>\n      <Input\n        size={size}\n        type={type}\n        value={value}\n        onChange={onChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        onKeyPress={onKeyPress}\n        placeholder={placeholder}\n        name={name}\n        disabled={disabled}\n        error={error}\n        autoComplete={autoComplete}\n      />\n      <IconContainer>{renderIcon()}</IconContainer>\n    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,GAAG,EAAE,EACV,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,IAAI,GAAG,MAAM,GACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAEjD,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAO,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,CAAI;AAC/E;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACE,KAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;AAEb,gBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA,CACpD;AAEZ;AACD,QAAA,QACE,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EACf,YAAA,EAAA,QAAQ,EACnB,IAAI,EAAC,QAAQ,EAAA;AAEb,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC5C,MAAM,EAAE,KAAK,CAAC,EAAE,EAChB,KAAK,EAAE,KAAK,CAAC,EAAE,EACf,CAAA,CACK;AAEb,KAAC;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;QACxE,KAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAE,IAAA,EAAA,UAAU,EAAE,CAAiB,CACnC;AAEhB;;;;"}
+{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\n\nimport { theme } from '../../theme';\n\nimport { Container, Input, IconContainer, Loader } from './styled';\nimport { SearchProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { SearchIcon } from '../../tempIcons/SearchIcon';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Search = ({\n  type = 'text',\n  disabled = false,\n  onClearClick,\n  onChange,\n  onBlur,\n  onFocus,\n  onKeyUp,\n  onKeyDown,\n  onKeyPress,\n  value = '',\n  error,\n  placeholder = '',\n  className = '',\n  name,\n  isLoading = false,\n  fill,\n  reversed = false,\n  autoComplete = 'on',\n  size = 'base',\n}: SearchProps) => {\n  const shouldShowClear = value && value.length > 0;\n\n  const renderIcon = () => {\n    if (isLoading) {\n      return <Loader height={24} color={fill || theme.colors.secondary.blue.base} />;\n    }\n    if (shouldShowClear && onClearClick) {\n      return (\n        <Button\n          variant=\"unstyled\"\n          onClick={onClearClick}\n          style={{ display: 'flex' }}\n          aria-label=\"Clear text\"\n          type=\"button\"\n        >\n          <CrossIcon color={fill || theme.colors.neutral.ink.dark} />\n        </Button>\n      );\n    }\n    return (\n      <Button\n        variant=\"unstyled\"\n        onClick={() => onChange(value)}\n        style={{ display: 'flex' }}\n        aria-label=\"Search\"\n        type=\"button\"\n      >\n        <SearchIcon\n          color={fill || theme.colors.neutral.ink.dark}\n          height={sizes.md}\n          width={sizes.md}\n        />\n      </Button>\n    );\n  };\n\n  return (\n    <Container className={className} iconPosition={reversed ? 'left' : 'right'}>\n      <Input\n        size={size}\n        type={type}\n        value={value}\n        onChange={onChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        onKeyPress={onKeyPress}\n        placeholder={placeholder}\n        name={name}\n        disabled={disabled}\n        error={error}\n        autoComplete={autoComplete}\n      />\n      <IconContainer>{renderIcon()}</IconContainer>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAYO,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,GAAG,EAAE,EACV,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,IAAI,GAAG,MAAM,GACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAEjD,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,CAAI;AAC/E;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;AAEb,gBAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA,CACpD;AAEZ;AACD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EACf,YAAA,EAAA,QAAQ,EACnB,IAAI,EAAC,QAAQ,EAAA;AAEb,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC5C,MAAM,EAAE,KAAK,CAAC,EAAE,EAChB,KAAK,EAAE,KAAK,CAAC,EAAE,EACf,CAAA,CACK;AAEb,KAAC;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;QACxEA,cAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,CAAA;AACF,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAE,IAAA,EAAA,UAAU,EAAE,CAAiB,CACnC;AAEhB;;;;"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { Button } from '../Button/Button.js';
 import { SegmentedControlContainer } from './styled.js';
 
-const SegmentedControl = ({ options, selected, className, onChange, }) => (React.createElement(SegmentedControlContainer, { className: className ? `${className}-container` : undefined }, options.map((option) => (React.createElement(Button, { type: "button", "aria-pressed": option.value === selected, variant: option.value === selected ? 'primary' : 'default', key: option.key, onClick: () => onChange(option.value), disabled: option.disabled, className: option.value === selected ? 'veeqo-components-active-button' : '' }, option.label)))));
+const SegmentedControl = ({ options, selected, className, onChange, }) => (React__default.createElement(SegmentedControlContainer, { className: className ? `${className}-container` : undefined }, options.map((option) => (React__default.createElement(Button, { type: "button", "aria-pressed": option.value === selected, variant: option.value === selected ? 'primary' : 'default', key: option.key, onClick: () => onChange(option.value), disabled: option.disabled, className: option.value === selected ? 'veeqo-components-active-button' : '' }, option.label)))));
 
 export { SegmentedControl };
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\nimport { SegmentedControlContainer } from './styled';\n\nimport { SegmentedControlProps } from './types';\n\nexport const SegmentedControl = ({\n  options,\n  selected,\n  className,\n  onChange,\n}: SegmentedControlProps) => (\n  <SegmentedControlContainer className={className ? `${className}-container` : undefined}>\n    {options.map((option) => (\n      <Button\n        type=\"button\"\n        aria-pressed={option.value === selected}\n        variant={option.value === selected ? 'primary' : 'default'}\n        key={option.key}\n        onClick={() => onChange(option.value)}\n        disabled={option.disabled}\n        className={option.value === selected ? 'veeqo-components-active-button' : ''}\n      >\n        {option.label}\n      </Button>\n    ))}\n  </SegmentedControlContainer>\n);\n"],"names":[],"mappings":";;;;AAOa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACc,MACtB,KAAA,CAAA,aAAA,CAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,SAAS,GAAG,CAAG,EAAA,SAAS,CAAY,UAAA,CAAA,GAAG,SAAS,EAAA,EACnF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClB,KAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,IAAI,EAAC,QAAQ,EACC,cAAA,EAAA,MAAM,CAAC,KAAK,KAAK,QAAQ,EACvC,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,EAC1D,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EAAA,EAE3E,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACwB;;;;"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\nimport { SegmentedControlContainer } from './styled';\n\nimport { SegmentedControlProps } from './types';\n\nexport const SegmentedControl = ({\n  options,\n  selected,\n  className,\n  onChange,\n}: SegmentedControlProps) => (\n  <SegmentedControlContainer className={className ? `${className}-container` : undefined}>\n    {options.map((option) => (\n      <Button\n        type=\"button\"\n        aria-pressed={option.value === selected}\n        variant={option.value === selected ? 'primary' : 'default'}\n        key={option.key}\n        onClick={() => onChange(option.value)}\n        disabled={option.disabled}\n        className={option.value === selected ? 'veeqo-components-active-button' : ''}\n      >\n        {option.label}\n      </Button>\n    ))}\n  </SegmentedControlContainer>\n);\n"],"names":["React"],"mappings":";;;;AAOa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACc,MACtBA,cAAA,CAAA,aAAA,CAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,SAAS,GAAG,CAAG,EAAA,SAAS,CAAY,UAAA,CAAA,GAAG,SAAS,EAAA,EACnF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,IAAI,EAAC,QAAQ,EACC,cAAA,EAAA,MAAM,CAAC,KAAK,KAAK,QAAQ,EACvC,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,EAC1D,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EAAA,EAE3E,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACwB;;;;"}

package/dist/components/Select/Select.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import React__default, { forwardRef, useCallback } from 'react';
 import { SelectInput } from './styled.js';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
 
@@ -8,8 +8,8 @@ const Select = withLabels(forwardRef(({ className, options, value, onChange, siz
             return;
         onChange(e.currentTarget.value);
     }, [onChange]);
-    return (React.createElement(SelectInput, { className: className, sizeVariant: size, value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
-        options.map((option) => (React.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
+    return (React__default.createElement(SelectInput, { className: className, sizeVariant: size, value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
+        options.map((option) => (React__default.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
 }));
 Select.displayName = 'Select';
 

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          sizeVariant={size}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":[],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,aAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjB,gCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          sizeVariant={size}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,aAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBA,yCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}