@clickhouse/click-ui 0.10.0-rc2 → 0.11.0-rc1

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const sanitizedValue = parseInt(value, 10);\n    if (\n      sanitizedValue < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? sanitizedValue > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(sanitizedValue);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <Select\n          className={styles['custom-select']}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </Select>\n      )}\n    </Container>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const pageNumber = parseInt(value, 10);\n    if (\n      Number.isNaN(pageNumber) ||\n      pageNumber < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? pageNumber > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(pageNumber);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <Select\n          className={styles['custom-select']}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </Select>\n      )}\n    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8CO,MAAM,aAAa,CAAC;AAAA,EACzB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAqB,EAAC;AAAA,EACtB,QAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,gBAAA,EAAkB,oBAAA;AAAA,EAClB,QAAA,GAAW,EAAA;AAAA,EACX,SAAA,GAAY,IAAA;AAAA,EACZ,GAAA,GAAM,IAAA;AAAA,EACN,cAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,YAAA,GAAe,IAAA;AAAA,EACf,GAAG;AACL,CAAA,KAAqC;AACnC,EAAA,MAAM,cAAc,CAAC,QAAA,EAAU,QAAQ,CAAA,CAAE,QAAA,CAAS,OAAO,QAAQ,CAAA;AACjE,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAkB;AACtC,IAAA,OAAO,IAAI,IAAA,CAAK,YAAA,CAAa,IAAI,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,EACjD,CAAA;AACA,EAAA,MAAM,qBAAqB,WAAA,IAAe,CAAA;AAC1C,EAAA,MAAM,mBAAA,GACH,CAAC,CAAC,UAAA,IAAc,gBAAgB,UAAA,IAAe,iBAAA;AAElD,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAkB;AAClC,IAAA,MAAM,UAAA,GAAa,QAAA,CAAS,KAAA,EAAO,EAAE,CAAA;AACrC,IAAA,IACE,MAAA,CAAO,KAAA,CAAM,UAAU,CAAA,IACvB,aAAa,CAAA,IACb,QAAA,CAAS,OAAA,EAAS,QAAA,KACjB,OAAO,UAAA,KAAe,WAAA,GAAc,UAAA,GAAa,aAAa,KAAA,CAAA,EAC/D;AACA,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,CAAa,UAAU,CAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAkB;AAC1C,IAAA,IAAI,OAAO,yBAAyB,UAAA,EAAY;AAC9C,MAAA,oBAAA,CAAqB,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,IACpC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAoD,WAAA;AAAA,IACxD,CAAA,CAAA,KAAK;AACH,MAAA,IAAI,kBAAA,EAAoB;AACtB,QAAA;AAAA,MACF;AAEA,MAAA,YAAA,CAAa,cAAc,CAAC,CAAA;AAC5B,MAAA,IAAI,OAAO,oBAAoB,UAAA,EAAY;AACzC,QAAA,eAAA,CAAgB,CAAC,CAAA;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,WAAA,EAAa,kBAAA,EAAoB,YAAA,EAAc,eAAe;AAAA,GACjE;AAEA,EAAA,MAAM,WAAA,GAAoD,WAAA;AAAA,IACxD,CAAA,CAAA,KAAK;AACH,MAAA,IAAI,mBAAA,EAAqB;AACvB,QAAA;AAAA,MACF;AAEA,MAAA,YAAA,CAAa,cAAc,CAAC,CAAA;AAC5B,MAAA,IAAI,OAAO,oBAAoB,UAAA,EAAY;AACzC,QAAA,eAAA,CAAgB,CAAC,CAAA;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,WAAA,EAAa,YAAA,EAAc,eAAA,EAAiB,mBAAmB;AAAA,GAClE;AAGA,EAAA,IAAI,aAAa,EAAA,IAAM,CAAC,YAAA,IAAgB,kBAAA,CAAmB,SAAS,CAAA,EAAG;AACrE,IAAA,QAAA,GAAW,mBAAmB,CAAC,CAAA;AAAA,EACjC;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,gBACE,cAAA,KACC,QAAA,IAAY,kBAAA,CAAmB,MAAA,GAAS,IAAI,eAAA,GAAkB,QAAA,CAAA;AAAA,MAEjE,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACC,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,KAAA;AAAA,YACV,KAAA,EAAM,OAAA;AAAA,YACN,IAAA,EAAK,IAAA;AAAA,YAEJ,QAAA,EAAA;AAAA,cAAA,OAAO,QAAA,KAAa,QAAA,GAAW,YAAA,CAAa,QAAQ,CAAA,GAAI,QAAA;AAAA,cAAS;AAAA;AAAA;AAAA,SACpE;AAAA,wBAEF,IAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAI,KAAA;AAAA,YACJ,SAAA,EAAW,KAAA;AAAA,YAEX,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAK,cAAA;AAAA,kBACL,IAAA,EAAK,OAAA;AAAA,kBACL,QAAA,EAAU,kBAAA;AAAA,kBACV,OAAA,EAAS,WAAA;AAAA,kBACT,aAAA,EAAY;AAAA;AAAA,eACd;AAAA,8BACA,GAAA;AAAA,gBAAC,SAAA;AAAA,gBAAA;AAAA,kBACC,QAAA,EAAS,MAAA;AAAA,kBACT,SAAA,EAAW,KAAA;AAAA,kBAEX,QAAA,kBAAA,GAAA;AAAA,oBAAC,WAAA;AAAA,oBAAA;AAAA,sBACC,GAAA,EAAK,QAAA;AAAA,sBACL,QAAA;AAAA,sBACA,KAAA,EAAO,WAAA;AAAA,sBACP,OAAA,EAAS,KAAA;AAAA,sBACT,YAAA,EAAY,YAAY,QAAA,EAAS;AAAA,sBACjC,GAAA,EAAK,CAAA;AAAA,sBACL,GAAA,EAAK,UAAA;AAAA,sBACL,OAAA,EAAS,iBAAA;AAAA,sBACT,YAAA,EAAY,IAAA;AAAA,sBACZ,MAAA,EAAQ,gBAAA;AAAA,sBACR,UAAU,kBAAA,IAAsB;AAAA;AAAA;AAClC;AAAA,eACF;AAAA,cACC,CAAC,CAAC,UAAA,oBACD,IAAA;AAAA,gBAAC,IAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,KAAA;AAAA,kBACV,KAAA,EAAM,OAAA;AAAA,kBACN,IAAA,EAAK,IAAA;AAAA,kBACN,QAAA,EAAA;AAAA,oBAAA,KAAA;AAAA,oBACK,aAAa,UAAU;AAAA;AAAA;AAAA,eAC7B;AAAA,8BAEF,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAK,eAAA;AAAA,kBACL,IAAA,EAAK,OAAA;AAAA,kBACL,QAAA,EAAU,mBAAA;AAAA,kBACV,OAAA,EAAS,WAAA;AAAA,kBACT,aAAA,EAAY;AAAA;AAAA;AACd;AAAA;AAAA,SACF;AAAA,QACC,kBAAA,CAAmB,SAAS,CAAA,oBAC3B,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAO,eAAe,CAAA;AAAA,YACjC,QAAA,EAAU,gBAAA;AAAA,YACV,KAAA,EAAO,SAAS,QAAA,EAAS;AAAA,YAExB,QAAA,EAAA;AAAA,cAAA,YAAA,wBAAiB,MAAA,CAAO,IAAA,EAAP,EAAY,KAAA,EAAM,MAAK,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,cAChD,kBAAA,CAAmB,IAAI,CAAA,MAAA,qBACtB,IAAA;AAAA,gBAAC,MAAA,CAAO,IAAA;AAAA,gBAAP;AAAA,kBAEC,KAAA,EAAO,OAAO,QAAA,EAAS;AAAA,kBAEtB,QAAA,EAAA;AAAA,oBAAA,MAAA;AAAA,oBAAO;AAAA;AAAA,iBAAA;AAAA,gBAHH;AAAA,eAKR;AAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/esm/components/Popover/Popover.css

@@ -1,4 +1,6 @@
-@layer clickui {.menu-panel__-IeVm {
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+
+.menu-panel__-IeVm {
   display: block;
   padding: var(--click-popover-space-y) var(--click-popover-space-x);
   border: 1px solid var(--click-popover-color-panel-stroke-default);
@@ -23,11 +25,10 @@
   cursor: pointer;
 }
 
-.close-button__fpjhc {
+.menu-panel__-IeVm .close-button__fpjhc {
+  /* Offset by the button's own padding so the cross sits at the panel inset */
   position: absolute;
-  top: var(--click-popover-space-y);
-  right: var(--click-popover-space-x);
-  width: var(--click-popover-icon-size-width);
-  height: var(--click-popover-icon-size-height);
+  top: calc(var(--click-popover-space-y) - var(--click-button-iconButton-sm-space-y));
+  right: calc(var(--click-popover-space-x) - var(--click-button-iconButton-sm-space-x));
 }
 }

package/dist/esm/components/Popover/index.js

@@ -7,7 +7,7 @@ import { cn } from '../../lib/cva.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
 import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
 import styles from './Popover.module.css.js';
-import { Icon as SvgImage } from '../Icon/index.js';
+import { IconButton } from '../IconButton/index.js';
 import { cva } from 'class-variance-authority';
 
 const Popover = ({ children, ...props }) => {
@@ -76,14 +76,6 @@ const PopoverContent = ({
           sideOffset: 4,
           ...props,
           children: [
-            showClose && /* @__PURE__ */ jsx(
-              RadixPopover.Close,
-              {
-                asChild: true,
-                className: styles["close-button"],
-                children: /* @__PURE__ */ jsx(SvgImage, { name: "cross" })
-              }
-            ),
             showArrow && /* @__PURE__ */ jsx(
               Arrow,
               {
@@ -94,7 +86,17 @@ const PopoverContent = ({
                 children: /* @__PURE__ */ jsx(Popover_Arrow, {})
               }
             ),
-            children
+            children,
+            showClose && /* @__PURE__ */ jsx(RadixPopover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                className: styles["close-button"],
+                icon: "cross",
+                type: "ghost",
+                size: "sm",
+                "aria-label": "Close"
+              }
+            ) })
           ]
         }
       )

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <RadixPopover.Trigger\n        asChild\n        {...props}\n      >\n        <div className={styles.trigger}>{children}</div>\n      </RadixPopover.Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <RadixPopover.Close\n            asChild\n            className={styles['close-button']}\n          >\n            <Icon name=\"cross\" />\n          </RadixPopover.Close>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["Icon"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButton } from '@/components/IconButton';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <RadixPopover.Trigger\n        asChild\n        {...props}\n      >\n        <div className={styles.trigger}>{children}</div>\n      </RadixPopover.Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n        {/* Rendered last so it takes focus after the panel's interactive elements */}\n        {showClose && (\n          <RadixPopover.Close asChild>\n            <IconButton\n              className={styles['close-button']}\n              icon=\"cross\"\n              type=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Close\"\n            />\n          </RadixPopover.Close>\n        )}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ProgressBar/index.js

@@ -45,15 +45,18 @@ const ProgressBar = ({
   orientation = "horizontal",
   dir = "start",
   className,
+  style,
   ...props
 }) => {
   const completed = progress === 100;
+  const mergedStyle = {
+    "--progress": `${progress}%`,
+    ...style
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      style: {
-        "--progress": `${progress}%`
-      },
+      style: mergedStyle,
       ...props,
       className: cn(
         progressBarVariants({ type, orientation, dir, completed }),

package/dist/esm/components/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as CSSProperties\n      }\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,mBAAA,GAAsB,GAAA,CAAI,MAAA,CAAO,WAAA,EAAa;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,OAAO,0BAA0B,CAAA;AAAA,MAC1C,KAAA,EAAO,OAAO,wBAAwB;AAAA,KACxC;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,OAAO,oCAAoC,CAAA;AAAA,MACvD,QAAA,EAAU,OAAO,kCAAkC;AAAA,KACrD;AAAA,IACA,GAAA,EAAK;AAAA,MACH,KAAA,EAAO,OAAO,uBAAuB,CAAA;AAAA,MACrC,GAAA,EAAK,OAAO,qBAAqB;AAAA,KACnC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,OAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAM,mBAAA,GAAsB,GAAA,CAAI,MAAA,CAAO,mBAAA,EAAqB;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,OAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA,GAAM,OAAA;AAAA,EACN,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,YAAY,QAAA,KAAa,GAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAG,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,MAED,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,oBAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAW,CAAA;AAAA,QACzD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,KAAS,6BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,YAAA,EACrB,4BAAkB,SAAA,GAAY,cAAA,GAAiB,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAS,QAAA;AAAA,YACT,aAAA,EAAY,mBAAA;AAAA,YACZ,SAAA,EAAW,mBAAA,CAAoB,EAAE,WAAA,EAAa;AAAA;AAAA;AAChD,OAAA,EACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  style,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n  const mergedStyle = {\n    '--progress': `${progress}%`,\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={mergedStyle}\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,mBAAA,GAAsB,GAAA,CAAI,MAAA,CAAO,WAAA,EAAa;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,OAAO,0BAA0B,CAAA;AAAA,MAC1C,KAAA,EAAO,OAAO,wBAAwB;AAAA,KACxC;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,OAAO,oCAAoC,CAAA;AAAA,MACvD,QAAA,EAAU,OAAO,kCAAkC;AAAA,KACrD;AAAA,IACA,GAAA,EAAK;AAAA,MACH,KAAA,EAAO,OAAO,uBAAuB,CAAA;AAAA,MACrC,GAAA,EAAK,OAAO,qBAAqB;AAAA,KACnC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,OAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAM,mBAAA,GAAsB,GAAA,CAAI,MAAA,CAAO,mBAAA,EAAqB;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,OAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA,GAAM,OAAA;AAAA,EACN,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,YAAY,QAAA,KAAa,GAAA;AAC/B,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,YAAA,EAAc,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,IACzB,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,oBAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAW,CAAA;AAAA,QACzD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,KAAS,6BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,YAAA,EACrB,4BAAkB,SAAA,GAAY,cAAA,GAAiB,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAS,QAAA;AAAA,YACT,aAAA,EAAY,mBAAA;AAAA,YACZ,SAAA,EAAW,mBAAA,CAAoB,EAAE,WAAA,EAAa;AAAA;AAAA;AAChD,OAAA,EACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/esm/components/Text/Text.css

@@ -9,6 +9,26 @@
   width: 100%;
 }
 
+.text_wrap_wrap__RR--m {
+  white-space: normal;
+}
+
+.text_wrap_nowrap__DCK82 {
+  white-space: nowrap;
+}
+
+.text_wrap_break-word__Oc5qD {
+  white-space: normal;
+  /* `anywhere` rather than `break-word` so long words also shrink the
+   min-content width, which is what flex and table layouts measure. */
+  overflow-wrap: anywhere;
+}
+
+.text_wrap_break-all__EdYJs {
+  white-space: normal;
+  word-break: break-all;
+}
+
 /* font shorthand depends on both size and weight; one class per pairing
    emits a single `font:` declaration. */
 

package/dist/esm/components/Text/Text.module.css.js

@@ -1,4 +1,6 @@
 const text = "text__78lq0";
+const text_wrap_wrap = "text_wrap_wrap__RR--m";
+const text_wrap_nowrap = "text_wrap_nowrap__DCK82";
 const text_color_default = "text_color_default__225Wd";
 const text_color_muted = "text_color_muted__DpcbG";
 const text_color_danger = "text_color_danger__hphaQ";
@@ -10,6 +12,10 @@ const text_align_right = "text_align_right__azLA3";
 const styles = {
 	text: text,
 	"text_fill-width": "text_fill-width__zRuxC",
+	text_wrap_wrap: text_wrap_wrap,
+	text_wrap_nowrap: text_wrap_nowrap,
+	"text_wrap_break-word": "text_wrap_break-word__Oc5qD",
+	"text_wrap_break-all": "text_wrap_break-all__EdYJs",
 	"text_font_normal-xs": "text_font_normal-xs__78uM-",
 	"text_font_normal-sm": "text_font_normal-sm__nFGGC",
 	"text_font_normal-md": "text_font_normal-md__In-T2",
@@ -40,5 +46,5 @@ const styles = {
 	text_align_right: text_align_right
 };
 
-export { styles as default, text, text_align_center, text_align_left, text_align_right, text_color_danger, text_color_default, text_color_disabled, text_color_muted, text_color_warning };
+export { styles as default, text, text_align_center, text_align_left, text_align_right, text_color_danger, text_color_default, text_color_disabled, text_color_muted, text_color_warning, text_wrap_nowrap, text_wrap_wrap };
 //# sourceMappingURL=Text.module.css.js.map

package/dist/esm/components/Text/Text.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Text.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Text/index.js

@@ -22,6 +22,12 @@ const textVariants = cva(styles.text, {
     fillWidth: {
       true: styles["text_fill-width"]
     },
+    wrap: {
+      wrap: styles["text_wrap_wrap"],
+      nowrap: styles["text_wrap_nowrap"],
+      "break-word": styles["text_wrap_break-word"],
+      "break-all": styles["text_wrap_break-all"]
+    },
     size: {
       xs: "",
       sm: "",
@@ -74,6 +80,7 @@ const _Text = ({
   children,
   component,
   fillWidth,
+  wrap,
   ...props
 }, ref) => {
   const Component = component ?? "p";
@@ -82,7 +89,10 @@ const _Text = ({
     {
       ref,
       ...props,
-      className: cn(textVariants({ color, align, size, weight, fillWidth }), className),
+      className: cn(
+        textVariants({ color, align, size, weight, fillWidth, wrap }),
+        className
+      ),
       children
     }
   );

package/dist/esm/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Text.module.css';\n\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';\nexport type TextAlignment = 'left' | 'center' | 'right';\nexport type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';\n\nexport interface TextProps<T extends ElementType = 'p'> {\n  /** The text content to display */\n  children: ReactNode;\n  /** The text alignment */\n  align?: TextAlignment;\n  /** The text color variant */\n  color?: TextColor;\n  /** The font size of the text */\n  size?: TextSize;\n  /** The font weight of the text */\n  weight?: TextWeight;\n  /** Additional CSS class name */\n  className?: string;\n  /** Custom component to render as */\n  component?: T;\n  /** Whether the text should fill the full width of its container */\n  fillWidth?: boolean;\n}\n\ntype TextPolymorphicComponent = <T extends ElementType = 'p'>(\n  props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>\n) => ReactNode;\n\nconst textVariants = cva(styles.text, {\n  variants: {\n    color: {\n      default: styles['text_color_default'],\n      muted: styles['text_color_muted'],\n      danger: styles['text_color_danger'],\n      disabled: styles['text_color_disabled'],\n      warning: styles['text_color_warning'],\n    },\n    align: {\n      left: styles['text_align_left'],\n      center: styles['text_align_center'],\n      right: styles['text_align_right'],\n    },\n    fillWidth: {\n      true: styles['text_fill-width'],\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n    weight: {\n      normal: '',\n      medium: '',\n      semibold: '',\n      bold: '',\n      mono: '',\n    },\n  },\n  compoundVariants: [\n    { weight: 'normal', size: 'xs', class: styles['text_font_normal-xs'] },\n    { weight: 'normal', size: 'sm', class: styles['text_font_normal-sm'] },\n    { weight: 'normal', size: 'md', class: styles['text_font_normal-md'] },\n    { weight: 'normal', size: 'lg', class: styles['text_font_normal-lg'] },\n    { weight: 'medium', size: 'xs', class: styles['text_font_medium-xs'] },\n    { weight: 'medium', size: 'sm', class: styles['text_font_medium-sm'] },\n    { weight: 'medium', size: 'md', class: styles['text_font_medium-md'] },\n    { weight: 'medium', size: 'lg', class: styles['text_font_medium-lg'] },\n    { weight: 'semibold', size: 'xs', class: styles['text_font_semibold-xs'] },\n    { weight: 'semibold', size: 'sm', class: styles['text_font_semibold-sm'] },\n    { weight: 'semibold', size: 'md', class: styles['text_font_semibold-md'] },\n    { weight: 'semibold', size: 'lg', class: styles['text_font_semibold-lg'] },\n    { weight: 'bold', size: 'xs', class: styles['text_font_bold-xs'] },\n    { weight: 'bold', size: 'sm', class: styles['text_font_bold-sm'] },\n    { weight: 'bold', size: 'md', class: styles['text_font_bold-md'] },\n    { weight: 'bold', size: 'lg', class: styles['text_font_bold-lg'] },\n    { weight: 'mono', size: 'xs', class: styles['text_font_mono-xs'] },\n    { weight: 'mono', size: 'sm', class: styles['text_font_mono-sm'] },\n    { weight: 'mono', size: 'md', class: styles['text_font_mono-md'] },\n    { weight: 'mono', size: 'lg', class: styles['text_font_mono-lg'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst _Text = <T extends ElementType = 'p'>(\n  {\n    align,\n    color,\n    size,\n    weight,\n    className,\n    children,\n    component,\n    fillWidth,\n    ...props\n  }: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'p';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(textVariants({ color, align, size, weight, fillWidth }), className)}\n    >\n      {children}\n    </Component>\n  );\n};\n\n_Text.displayName = 'Text';\n\nexport const Text: TextPolymorphicComponent = forwardRef(_Text);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Text.module.css';\n\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';\nexport type TextAlignment = 'left' | 'center' | 'right';\nexport type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';\nexport type TextWrap = 'wrap' | 'nowrap' | 'break-word' | 'break-all';\n\nexport interface TextProps<T extends ElementType = 'p'> {\n  /** The text content to display */\n  children: ReactNode;\n  /** The text alignment */\n  align?: TextAlignment;\n  /** The text color variant */\n  color?: TextColor;\n  /** The font size of the text */\n  size?: TextSize;\n  /** The font weight of the text */\n  weight?: TextWeight;\n  /** Additional CSS class name */\n  className?: string;\n  /** Custom component to render as */\n  component?: T;\n  /** Whether the text should fill the full width of its container */\n  fillWidth?: boolean;\n  /** Text wrapping, unset by default - inherits from parent */\n  wrap?: TextWrap;\n}\n\ntype TextPolymorphicComponent = <T extends ElementType = 'p'>(\n  props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>\n) => ReactNode;\n\nconst textVariants = cva(styles.text, {\n  variants: {\n    color: {\n      default: styles['text_color_default'],\n      muted: styles['text_color_muted'],\n      danger: styles['text_color_danger'],\n      disabled: styles['text_color_disabled'],\n      warning: styles['text_color_warning'],\n    },\n    align: {\n      left: styles['text_align_left'],\n      center: styles['text_align_center'],\n      right: styles['text_align_right'],\n    },\n    fillWidth: {\n      true: styles['text_fill-width'],\n    },\n    wrap: {\n      wrap: styles['text_wrap_wrap'],\n      nowrap: styles['text_wrap_nowrap'],\n      'break-word': styles['text_wrap_break-word'],\n      'break-all': styles['text_wrap_break-all'],\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n    weight: {\n      normal: '',\n      medium: '',\n      semibold: '',\n      bold: '',\n      mono: '',\n    },\n  },\n  compoundVariants: [\n    { weight: 'normal', size: 'xs', class: styles['text_font_normal-xs'] },\n    { weight: 'normal', size: 'sm', class: styles['text_font_normal-sm'] },\n    { weight: 'normal', size: 'md', class: styles['text_font_normal-md'] },\n    { weight: 'normal', size: 'lg', class: styles['text_font_normal-lg'] },\n    { weight: 'medium', size: 'xs', class: styles['text_font_medium-xs'] },\n    { weight: 'medium', size: 'sm', class: styles['text_font_medium-sm'] },\n    { weight: 'medium', size: 'md', class: styles['text_font_medium-md'] },\n    { weight: 'medium', size: 'lg', class: styles['text_font_medium-lg'] },\n    { weight: 'semibold', size: 'xs', class: styles['text_font_semibold-xs'] },\n    { weight: 'semibold', size: 'sm', class: styles['text_font_semibold-sm'] },\n    { weight: 'semibold', size: 'md', class: styles['text_font_semibold-md'] },\n    { weight: 'semibold', size: 'lg', class: styles['text_font_semibold-lg'] },\n    { weight: 'bold', size: 'xs', class: styles['text_font_bold-xs'] },\n    { weight: 'bold', size: 'sm', class: styles['text_font_bold-sm'] },\n    { weight: 'bold', size: 'md', class: styles['text_font_bold-md'] },\n    { weight: 'bold', size: 'lg', class: styles['text_font_bold-lg'] },\n    { weight: 'mono', size: 'xs', class: styles['text_font_mono-xs'] },\n    { weight: 'mono', size: 'sm', class: styles['text_font_mono-sm'] },\n    { weight: 'mono', size: 'md', class: styles['text_font_mono-md'] },\n    { weight: 'mono', size: 'lg', class: styles['text_font_mono-lg'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst _Text = <T extends ElementType = 'p'>(\n  {\n    align,\n    color,\n    size,\n    weight,\n    className,\n    children,\n    component,\n    fillWidth,\n    wrap,\n    ...props\n  }: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'p';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        textVariants({ color, align, size, weight, fillWidth, wrap }),\n        className\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\n_Text.displayName = 'Text';\n\nexport const Text: TextPolymorphicComponent = forwardRef(_Text);\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Toast/index.js

@@ -171,7 +171,13 @@ const ToastProvider = ({
             id
           ))
         ] }),
-        /* @__PURE__ */ jsx(RadixUIToast.Viewport, { className: cn(viewportVariants({ align })) })
+        /* @__PURE__ */ jsx(
+          RadixUIToast.Viewport,
+          {
+            "aria-live": "off",
+            className: cn(viewportVariants({ align }))
+          }
+        )
       ]
     },
     `toast-provider-${align}`

package/dist/esm/components/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createContext, useEffect, useState } from 'react';\nimport * as RadixUIToast from '@radix-ui/react-toast';\nimport { cn, cva } from '@/lib/cva';\nimport { toastsEventEmitter } from './toastEmitter';\nimport { Icon, type IconName, type IconProps } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { Button } from '@/components/Button';\nimport { ToastContextProps, ToastProps, ToastAlignment, ToastType } from './Toast.types';\nimport styles from './Toast.module.css';\n\nexport const ToastContext = createContext<ToastContextProps>({\n  createToast: () => null,\n});\n\nconst toastIconVariants = cva(styles.toast__icon, {\n  variants: {\n    type: {\n      default: styles['toast__icon_type_default'],\n      success: styles['toast__icon_type_success'],\n      warning: styles['toast__icon_type_warning'],\n      danger: styles['toast__icon_type_danger'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\n// Lazy wrapper to avoid circular dependency issues at module load time\nconst ToastIcon = ({\n  $type = 'default',\n  className,\n  ...props\n}: IconProps & { $type?: ToastType }) => (\n  <Icon\n    {...props}\n    className={cn(toastIconVariants({ type: $type }), className)}\n  />\n);\n\nconst viewportVariants = cva(styles['toast-viewport'], {\n  variants: {\n    align: {\n      start: styles['toast-viewport_align_start'],\n      end: styles['toast-viewport_align_end'],\n    },\n  },\n  defaultVariants: {\n    align: 'end',\n  },\n});\n\nexport const Toast = ({\n  type,\n  toastType = 'foreground',\n  title,\n  description,\n  actions = [],\n  duration,\n  onClose,\n  className,\n  ...props\n}: ToastProps & { onClose: (open: boolean) => void }) => {\n  let iconName = '';\n  if (type === 'default') {\n    iconName = 'info-in-circle';\n  } else if (type === 'success') {\n    iconName = 'check';\n  } else if (type && ['danger', 'warning'].includes(type)) {\n    iconName = 'warning';\n  }\n  return (\n    <RadixUIToast.Root\n      onOpenChange={onClose}\n      duration={duration}\n      type={toastType}\n      {...props}\n      className={cn(styles.toast, className)}\n    >\n      <RadixUIToast.Title className={styles.toast__header}>\n        {iconName.length > 0 && (\n          <ToastIcon\n            name={iconName as IconName}\n            $type={type}\n          />\n        )}\n        <div className={styles.toast__title}>{title}</div>\n        <RadixUIToast.Close asChild>\n          <IconButton\n            icon=\"cross\"\n            type=\"ghost\"\n          />\n        </RadixUIToast.Close>\n      </RadixUIToast.Title>\n      {(description || actions.length > 0) && (\n        <div className={styles['toast__description-container']}>\n          <RadixUIToast.Description className={styles['toast__description-content']}>\n            {description}\n          </RadixUIToast.Description>\n          {actions.length > 0 && (\n            <div className={styles['toast__description-content']}>\n              {actions.map(({ altText, ...btnProps }) => (\n                <RadixUIToast.Action\n                  altText={altText}\n                  asChild\n                  key={altText}\n                >\n                  <div>\n                    <Button {...btnProps} />\n                  </div>\n                </RadixUIToast.Action>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </RadixUIToast.Root>\n  );\n};\n\nexport interface ToastProviderProps extends RadixUIToast.ToastProviderProps {\n  align?: ToastAlignment;\n}\n\nexport const ToastProvider = ({\n  children,\n  align = 'end',\n  ...props\n}: ToastProviderProps) => {\n  const [toasts, setToasts] = useState<Record<ToastAlignment, Map<string, ToastProps>>>({\n    start: new Map(),\n    end: new Map(),\n  });\n\n  useEffect(() => {\n    const listener = (toast: ToastProps) => {\n      setToasts(currentToasts => {\n        const alignment = toast.align ?? 'end';\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[alignment]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[alignment] = map;\n        return newToasts;\n      });\n    };\n\n    toastsEventEmitter.on(listener);\n\n    return () => toastsEventEmitter.off(listener);\n  }, []);\n\n  const onClose = (id: string) => (open: boolean) => {\n    if (!open) {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[align]);\n        map.delete(id);\n        newToasts[align] = map;\n        return newToasts;\n      });\n    }\n  };\n\n  const value = {\n    createToast: (toast: ToastProps, toastAlign: ToastAlignment = align) => {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[toastAlign]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[toastAlign] = map;\n        return newToasts;\n      });\n    },\n  };\n\n  return (\n    <RadixUIToast.Provider\n      swipeDirection={align === 'start' ? 'left' : 'right'}\n      key={`toast-provider-${align}`}\n      {...props}\n    >\n      <ToastContext.Provider value={value}>\n        {children}\n        {Array.from(toasts[align]).map(([id, toast]) => (\n          <Toast\n            key={id}\n            {...toast}\n            onClose={onClose(id)}\n          />\n        ))}\n      </ToastContext.Provider>\n      <RadixUIToast.Viewport className={cn(viewportVariants({ align }))} />\n    </RadixUIToast.Provider>\n  );\n};\n"],"names":["Icon"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createContext, useEffect, useState } from 'react';\nimport * as RadixUIToast from '@radix-ui/react-toast';\nimport { cn, cva } from '@/lib/cva';\nimport { toastsEventEmitter } from './toastEmitter';\nimport { Icon, type IconName, type IconProps } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { Button } from '@/components/Button';\nimport { ToastContextProps, ToastProps, ToastAlignment, ToastType } from './Toast.types';\nimport styles from './Toast.module.css';\n\nexport const ToastContext = createContext<ToastContextProps>({\n  createToast: () => null,\n});\n\nconst toastIconVariants = cva(styles.toast__icon, {\n  variants: {\n    type: {\n      default: styles['toast__icon_type_default'],\n      success: styles['toast__icon_type_success'],\n      warning: styles['toast__icon_type_warning'],\n      danger: styles['toast__icon_type_danger'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\n// Lazy wrapper to avoid circular dependency issues at module load time\nconst ToastIcon = ({\n  $type = 'default',\n  className,\n  ...props\n}: IconProps & { $type?: ToastType }) => (\n  <Icon\n    {...props}\n    className={cn(toastIconVariants({ type: $type }), className)}\n  />\n);\n\nconst viewportVariants = cva(styles['toast-viewport'], {\n  variants: {\n    align: {\n      start: styles['toast-viewport_align_start'],\n      end: styles['toast-viewport_align_end'],\n    },\n  },\n  defaultVariants: {\n    align: 'end',\n  },\n});\n\nexport const Toast = ({\n  type,\n  toastType = 'foreground',\n  title,\n  description,\n  actions = [],\n  duration,\n  onClose,\n  className,\n  ...props\n}: ToastProps & { onClose: (open: boolean) => void }) => {\n  let iconName = '';\n  if (type === 'default') {\n    iconName = 'info-in-circle';\n  } else if (type === 'success') {\n    iconName = 'check';\n  } else if (type && ['danger', 'warning'].includes(type)) {\n    iconName = 'warning';\n  }\n  return (\n    <RadixUIToast.Root\n      onOpenChange={onClose}\n      duration={duration}\n      type={toastType}\n      {...props}\n      className={cn(styles.toast, className)}\n    >\n      <RadixUIToast.Title className={styles.toast__header}>\n        {iconName.length > 0 && (\n          <ToastIcon\n            name={iconName as IconName}\n            $type={type}\n          />\n        )}\n        <div className={styles.toast__title}>{title}</div>\n        <RadixUIToast.Close asChild>\n          <IconButton\n            icon=\"cross\"\n            type=\"ghost\"\n          />\n        </RadixUIToast.Close>\n      </RadixUIToast.Title>\n      {(description || actions.length > 0) && (\n        <div className={styles['toast__description-container']}>\n          <RadixUIToast.Description className={styles['toast__description-content']}>\n            {description}\n          </RadixUIToast.Description>\n          {actions.length > 0 && (\n            <div className={styles['toast__description-content']}>\n              {actions.map(({ altText, ...btnProps }) => (\n                <RadixUIToast.Action\n                  altText={altText}\n                  asChild\n                  key={altText}\n                >\n                  <div>\n                    <Button {...btnProps} />\n                  </div>\n                </RadixUIToast.Action>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </RadixUIToast.Root>\n  );\n};\n\nexport interface ToastProviderProps extends RadixUIToast.ToastProviderProps {\n  align?: ToastAlignment;\n}\n\nexport const ToastProvider = ({\n  children,\n  align = 'end',\n  ...props\n}: ToastProviderProps) => {\n  const [toasts, setToasts] = useState<Record<ToastAlignment, Map<string, ToastProps>>>({\n    start: new Map(),\n    end: new Map(),\n  });\n\n  useEffect(() => {\n    const listener = (toast: ToastProps) => {\n      setToasts(currentToasts => {\n        const alignment = toast.align ?? 'end';\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[alignment]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[alignment] = map;\n        return newToasts;\n      });\n    };\n\n    toastsEventEmitter.on(listener);\n\n    return () => toastsEventEmitter.off(listener);\n  }, []);\n\n  const onClose = (id: string) => (open: boolean) => {\n    if (!open) {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[align]);\n        map.delete(id);\n        newToasts[align] = map;\n        return newToasts;\n      });\n    }\n  };\n\n  const value = {\n    createToast: (toast: ToastProps, toastAlign: ToastAlignment = align) => {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[toastAlign]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[toastAlign] = map;\n        return newToasts;\n      });\n    },\n  };\n\n  return (\n    <RadixUIToast.Provider\n      swipeDirection={align === 'start' ? 'left' : 'right'}\n      key={`toast-provider-${align}`}\n      {...props}\n    >\n      <ToastContext.Provider value={value}>\n        {children}\n        {Array.from(toasts[align]).map(([id, toast]) => (\n          <Toast\n            key={id}\n            {...toast}\n            onClose={onClose(id)}\n          />\n        ))}\n      </ToastContext.Provider>\n      {/* aria-live exempts the viewport from the aria-hidden sweep modal layers\n          run, keeping toasts over a Dialog or Select in the accessibility tree. */}\n      <RadixUIToast.Viewport\n        aria-live=\"off\"\n        className={cn(viewportVariants({ align }))}\n      />\n    </RadixUIToast.Provider>\n  );\n};\n"],"names":["Icon"],"mappings":"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"}

package/dist/types/components/Assets/Flags/Austria.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Austria: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Austria;

package/dist/types/components/Assets/Flags/Bahrain.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Bahrain: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Bahrain;

package/dist/types/components/Assets/Flags/Belgium.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Belgium: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Belgium;

package/dist/types/components/Assets/Flags/Canada.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { SVGAssetProps } from '../../../types';
-declare const Canada: (props: SVGAssetProps) => React.ReactElement;
+declare const Canada: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
 export default Canada;

package/dist/types/components/Assets/Flags/Chile.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Chile: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Chile;

package/dist/types/components/Assets/Flags/China.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const China: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default China;

package/dist/types/components/Assets/Flags/Denmark.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Denmark: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Denmark;

package/dist/types/components/Assets/Flags/Finland.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Finland: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Finland;

package/dist/types/components/Assets/Flags/France.d.ts

@@ -1,4 +1,3 @@
 import { SVGAssetProps } from '../../../types';
-import * as React from 'react';
-declare const France: (props: SVGAssetProps) => React.ReactElement;
+declare const France: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
 export default France;

package/dist/types/components/Assets/Flags/Greece.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Greece: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Greece;

package/dist/types/components/Assets/Flags/Indonesia.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { SVGAssetProps } from '../../../types';
-declare const Indonesia: (props: SVGAssetProps) => React.ReactElement;
+declare const Indonesia: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
 export default Indonesia;

package/dist/types/components/Assets/Flags/Ireland.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { SVGAssetProps } from '../../../types';
-declare const Ireland: (props: SVGAssetProps) => React.ReactElement;
+declare const Ireland: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
 export default Ireland;

package/dist/types/components/Assets/Flags/Italy.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Italy: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Italy;

package/dist/types/components/Assets/Flags/New-Zealand.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const New_Zealand: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default New_Zealand;

package/dist/types/components/Assets/Flags/Norway.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Norway: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Norway;

package/dist/types/components/Assets/Flags/Poland.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Poland: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Poland;

package/dist/types/components/Assets/Flags/Qatar.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Qatar: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Qatar;

package/dist/types/components/Assets/Flags/Saudi-Arabia.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Saudi_Arabia: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Saudi_Arabia;

package/dist/types/components/Assets/Flags/Singapore.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { SVGAssetProps } from '../../../types';
-declare const Singapore: (props: SVGAssetProps) => React.ReactElement;
+declare const Singapore: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
 export default Singapore;

package/dist/types/components/Assets/Flags/Spain.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Spain: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Spain;

package/dist/types/components/Assets/Flags/Sweden.d.ts

@@ -1,4 +1,3 @@
 import { SVGAssetProps } from '../../../types';
-import * as React from 'react';
-declare const Sweden: (props: SVGAssetProps) => React.ReactElement;
+declare const Sweden: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
 export default Sweden;

package/dist/types/components/Assets/Flags/Switzerland.d.ts

@@ -1,4 +1,3 @@
 import { SVGAssetProps } from '../../../types';
-import * as React from 'react';
-declare const Switzerland: (props: SVGAssetProps) => React.ReactElement;
+declare const Switzerland: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
 export default Switzerland;

package/dist/types/components/Assets/Flags/Thailand.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Thailand: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Thailand;

package/dist/types/components/Assets/Flags/United-Arab-Emirates.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { SVGAssetProps } from '../../../types';
-declare const UnitedArabEmirates: (props: SVGAssetProps) => React.ReactElement;
-export default UnitedArabEmirates;
+declare const United_Arab_Emirates: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default United_Arab_Emirates;

package/dist/types/components/Assets/Flags/system/types.d.ts

@@ -1,7 +1,7 @@
 import { SVGAttributes } from 'react';
 import { AssetSize } from '../../../../types';
 import { ThemeName } from '../../../../theme/theme.types';
-export type FlagName = 'australia' | 'brazil' | 'canada' | 'european-union' | 'france' | 'germany' | 'great-britain' | 'hong-kong' | 'india' | 'indonesia' | 'ireland' | 'israel' | 'japan' | 'malaysia' | 'mexico' | 'netherlands' | 'singapore' | 'south-africa' | 'south-korea' | 'sweden' | 'switzerland' | 'taiwan' | 'united-arab-emirates' | 'united-kingdom' | 'united-states';
+export type FlagName = 'australia' | 'austria' | 'bahrain' | 'belgium' | 'brazil' | 'canada' | 'chile' | 'china' | 'denmark' | 'european-union' | 'finland' | 'france' | 'germany' | 'great-britain' | 'greece' | 'hong-kong' | 'india' | 'indonesia' | 'ireland' | 'israel' | 'italy' | 'japan' | 'malaysia' | 'mexico' | 'netherlands' | 'new-zealand' | 'norway' | 'poland' | 'qatar' | 'saudi-arabia' | 'singapore' | 'south-africa' | 'south-korea' | 'spain' | 'sweden' | 'switzerland' | 'taiwan' | 'thailand' | 'united-arab-emirates' | 'united-kingdom' | 'united-states';
 export interface FlagProps extends SVGAttributes<SVGElement> {
     name: FlagName;
     theme?: ThemeName;

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

@@ -1,2 +1,2 @@
 import { CodeBlockProps } from './CodeBlock.types';
-export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, onCopy, onCopyError, className, style, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, ariaLabel, onCopy, onCopyError, className, style, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,6 +7,14 @@ export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
     showLineNumbers?: boolean;
     showWrapButton?: boolean;
     wrapLines?: boolean;
+    /**
+     * Accessible name for the scrollable code region. The region is a keyboard
+     * tab stop (so overflowing code can be scrolled), and a tab stop must be
+     * announced. Defaults to the `language` plus "code block", or "Code block"
+     * when no language is set. Override to localise it or to say which code this
+     * is when a page has several blocks.
+     */
+    ariaLabel?: string;
     onCopy?: (value: string) => void | Promise<void>;
     onCopyError?: (error: string) => void | Promise<void>;
 }