@clickhouse/click-ui 0.10.0 → 0.11.0-rc1

package/dist/esm/components/CodeBlock/CodeBlock.css

@@ -23,9 +23,12 @@
      colors are set inline per state via --codeblock-button, matching the
      --codeblock-numbers pattern so both track the ThemeProvider runtime. */
   --codeblock-button: initial;
+  /* assign context to be above pseudo-element 
+     can be cleaned up when background is a regular color variable with alpha */
+  z-index: 1;
   padding: 0;
   border: 0;
-  color: var(--codeblock-button, inherit);
+  color: var(--codeblock-button, inherit); 
 }
 
 .codeblock__highlighter__t4Xol {
@@ -41,9 +44,39 @@
 
 .codeblock__button-container__D6yob {
   display: flex;
+  opacity: 0;
   position: absolute;
   top: var(--click-codeblock-space-y);
   right: var(--click-codeblock-space-x);
-  gap: 0.625rem;
+  padding: var(--spaces-1);
+  gap: var(--spaces-1);
+  pointer-events: none;
+  transition: opacity 200ms ease-in-out;
 }
+
+.codeblock__pRWOC:hover .codeblock__button-container__D6yob,
+.codeblock__pRWOC:focus-within .codeblock__button-container__D6yob {
+  opacity: 1;
+  pointer-events: auto;
+  transition-duration: 150ms;
+}
+
+/* this element can be refactored to a color var with alpha when available */
+.codeblock__button-container__D6yob::before {
+  content: "";
+  opacity: 0.85;
+  position: absolute;  
+  z-index: 0;
+  inset: 0;
+  border-radius: var(--spaces-1); 
+}
+
+/* custom conditional theming can be later replaced with semantic color tokens */
+[data-cui-theme="light"] .codeblock__button-container__D6yob::before {
+  background: var(--palette-indigo-100);
+}
+
+[data-cui-theme="dark"] .codeblock__button-container__D6yob::before {
+  background: var(--palette-neutral-900);
 }
+}

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

@@ -24,6 +24,7 @@ const CodeBlock = ({
   showLineNumbers,
   showWrapButton = false,
   wrapLines = false,
+  ariaLabel,
   onCopy,
   onCopyError,
   className,
@@ -56,6 +57,7 @@ const CodeBlock = ({
       setTimeout(() => setErrorCopy(false), 2e3);
     }
   };
+  const codeRegionLabel = ariaLabel ?? (language ? `${language} code block` : "Code block");
   const wrapElement = () => {
     setWrap((wrap2) => !wrap2);
   };
@@ -73,30 +75,12 @@ const CodeBlock = ({
       style: { "--codeblock-numbers": numbersColor, ...style },
       className: cn(styles.codeblock, className),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles["codeblock__button-container"], children: [
-          showWrapButton && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              className: styles["codeblock__button"],
-              icon: "document",
-              onClick: wrapElement
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              className: styles["codeblock__button"],
-              style: {
-                "--codeblock-button": copied ? buttonStateColors.success : errorCopy ? buttonStateColors.danger : void 0
-              },
-              icon: copied ? "check" : errorCopy ? "warning" : "copy",
-              onClick: copyCodeToClipboard
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsx(
           Light,
           {
+            tabIndex: 0,
+            role: "group",
+            "aria-label": codeRegionLabel,
             language,
             style: customStyle,
             CodeTag: CodeWithRef,
@@ -131,7 +115,28 @@ const CodeBlock = ({
             wrapLongLines: wrap || wrapLines,
             children
           }
-        )
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles["codeblock__button-container"], children: [
+          showWrapButton && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: styles["codeblock__button"],
+              icon: "document",
+              onClick: wrapElement
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: styles["codeblock__button"],
+              style: {
+                "--codeblock-button": copied ? buttonStateColors.success : errorCopy ? buttonStateColors.danger : void 0
+              },
+              icon: copied ? "check" : errorCopy ? "warning" : "copy",
+              onClick: copyCodeToClipboard
+            }
+          )
+        ] })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { IconButton } from '@/components/IconButton';\n\nimport { cn } from '@/lib/cva';\nimport useColorStyle, { useButtonStateColors, useNumbersColor } from './useColorStyle';\nimport { CodeBlockProps } from './CodeBlock.types';\nimport styles from './CodeBlock.module.css';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  onCopy,\n  onCopyError,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n  const numbersColor = useNumbersColor(theme);\n  const buttonStateColors = useButtonStateColors();\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => (\n    <code\n      {...props}\n      className={cn(styles['codeblock__content'], props.className)}\n    />\n  );\n  return (\n    <div\n      {...props}\n      style={{ '--codeblock-numbers': numbersColor, ...style } as React.CSSProperties}\n      className={cn(styles.codeblock, className)}\n    >\n      <div className={styles['codeblock__button-container']}>\n        {showWrapButton && (\n          <IconButton\n            className={styles['codeblock__button']}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <IconButton\n          className={styles['codeblock__button']}\n          style={\n            {\n              '--codeblock-button': copied\n                ? buttonStateColors.success\n                : errorCopy\n                  ? buttonStateColors.danger\n                  : undefined,\n            } as React.CSSProperties\n          }\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        className={styles['codeblock__highlighter']}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter","wrap","props","children"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { IconButton } from '@/components/IconButton';\n\nimport { cn } from '@/lib/cva';\nimport useColorStyle, { useButtonStateColors, useNumbersColor } from './useColorStyle';\nimport { CodeBlockProps } from './CodeBlock.types';\nimport styles from './CodeBlock.module.css';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  ariaLabel,\n  onCopy,\n  onCopyError,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n  const numbersColor = useNumbersColor(theme);\n  const buttonStateColors = useButtonStateColors();\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n\n  const codeRegionLabel =\n    ariaLabel ?? (language ? `${language} code block` : 'Code block');\n\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => (\n    <code\n      {...props}\n      className={cn(styles['codeblock__content'], props.className)}\n    />\n  );\n  return (\n    <div\n      {...props}\n      style={{ '--codeblock-numbers': numbersColor, ...style } as React.CSSProperties}\n      className={cn(styles.codeblock, className)}\n    >\n      <SyntaxHighlighter\n        tabIndex={0}\n        role=\"group\"\n        aria-label={codeRegionLabel}\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        className={styles['codeblock__highlighter']}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </SyntaxHighlighter>\n      <div className={styles['codeblock__button-container']}>\n        {showWrapButton && (\n          <IconButton\n            className={styles['codeblock__button']}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <IconButton\n          className={styles['codeblock__button']}\n          style={\n            {\n              '--codeblock-button': copied\n                ? buttonStateColors.success\n                : errorCopy\n                  ? buttonStateColors.danger\n                  : undefined,\n            } as React.CSSProperties\n          }\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter","wrap","props","children"],"mappings":"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"}

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

@@ -24,6 +24,7 @@ const formatDateDetails = (date, timezone) => {
   }
   return date.format(formatForPastYear).replace("am", "a.m.").replace("pm", "p.m.");
 };
+const fallbackSystemTimeZone = "America/New_York";
 const DateDetails = ({
   date,
   side = "top",
@@ -33,11 +34,13 @@ const DateDetails = ({
 }) => {
   const dayjsDate = dayjs(date);
   let systemTime;
-  if (systemTimeZone) {
+  let resolvedSystemTimeZone = systemTimeZone;
+  if (resolvedSystemTimeZone) {
     try {
-      systemTime = dayjsDate.tz(systemTimeZone);
+      systemTime = dayjsDate.tz(resolvedSystemTimeZone);
     } catch {
-      systemTime = dayjsDate.tz("America/New_York");
+      resolvedSystemTimeZone = fallbackSystemTimeZone;
+      systemTime = dayjsDate.tz(resolvedSystemTimeZone);
     }
   }
   return /* @__PURE__ */ jsxs(Popover, { children: [
@@ -97,11 +100,11 @@ const DateDetails = ({
                   }
                 ),
                 /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
-                  formatDateDetails(systemTime, systemTimeZone),
+                  formatDateDetails(systemTime, resolvedSystemTimeZone),
                   " (",
                   formatTimezone({
                     date: systemTime,
-                    timezone: systemTimeZone
+                    timezone: resolvedSystemTimeZone
                   }),
                   ")"
                 ] }) })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/DateDetails/DateDetails.tsx"],"sourcesContent":["import { Popover } from '@/components/Popover';\nimport { Text } from '@/components/Text';\nimport { Link } from '@/components/Link';\nimport { GridContainer } from '@/components/GridContainer';\nimport { Container } from '@/components/Container';\n\nimport { dayjs, Dayjs, formatTimezone } from '@/utils/date';\n\nconst formatDateDetails = (date: Dayjs, timezone?: string): string => {\n  const isCurrentYear = dayjs().year() === date.year();\n  const formatForCurrentYear = 'MMM D, h:mm a';\n  const formatForPastYear = 'MMM D, YYYY, h:mm a';\n\n  if (isCurrentYear) {\n    if (timezone) {\n      const dateWithTimezone = date.tz(timezone);\n      return dateWithTimezone\n        .format(formatForCurrentYear)\n        .replace('am', 'a.m.')\n        .replace('pm', 'p.m.');\n    }\n\n    return date.format(formatForCurrentYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n  }\n\n  if (timezone) {\n    const dateWithTimezone = date.tz(timezone);\n    return dateWithTimezone\n      .format(formatForPastYear)\n      .replace('am', 'a.m.')\n      .replace('pm', 'p.m.');\n  }\n  return date.format(formatForPastYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n};\n\nimport { DateDetailsProps } from './DateDetails.types';\n\nexport const DateDetails = ({\n  date,\n  side = 'top',\n  size = 'sm',\n  systemTimeZone,\n  weight = 'normal',\n}: DateDetailsProps) => {\n  const dayjsDate = dayjs(date);\n\n  let systemTime;\n  if (systemTimeZone) {\n    try {\n      systemTime = dayjsDate.tz(systemTimeZone);\n    } catch {\n      systemTime = dayjsDate.tz('America/New_York');\n    }\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <Link\n          component=\"span\"\n          size=\"sm\"\n          weight=\"medium\"\n        >\n          <Text\n            component=\"span\"\n            size={size}\n            weight={weight}\n          >\n            {dayjs.utc(date).fromNow()}\n          </Text>\n        </Link>\n      </Popover.Trigger>\n      <Popover.Content\n        side={side}\n        showArrow\n      >\n        <GridContainer\n          columnGap=\"xl\"\n          gridTemplateColumns=\"repeat(2, auto)\"\n          gap=\"sm\"\n        >\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Local\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">\n              {formatDateDetails(dayjsDate)} (\n              {formatTimezone({\n                date: dayjsDate,\n                timezone: dayjs.tz.guess(),\n              })}\n              )\n            </Text>\n          </Container>\n\n          {systemTime && (\n            <>\n              <Text\n                color=\"muted\"\n                size=\"sm\"\n              >\n                System\n              </Text>\n\n              <Container justifyContent=\"end\">\n                <Text size=\"sm\">\n                  {formatDateDetails(systemTime, systemTimeZone)} (\n                  {formatTimezone({\n                    date: systemTime,\n                    timezone: systemTimeZone,\n                  })}\n                  )\n                </Text>\n              </Container>\n            </>\n          )}\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            UTC\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{formatDateDetails(dayjsDate.utc(), 'UTC')}</Text>\n          </Container>\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Unix\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{Math.round(dayjsDate.valueOf() / 1000)}</Text>\n          </Container>\n        </GridContainer>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/DateDetails/DateDetails.tsx"],"sourcesContent":["import { Popover } from '@/components/Popover';\nimport { Text } from '@/components/Text';\nimport { Link } from '@/components/Link';\nimport { GridContainer } from '@/components/GridContainer';\nimport { Container } from '@/components/Container';\n\nimport { dayjs, Dayjs, formatTimezone } from '@/utils/date';\n\nconst formatDateDetails = (date: Dayjs, timezone?: string): string => {\n  const isCurrentYear = dayjs().year() === date.year();\n  const formatForCurrentYear = 'MMM D, h:mm a';\n  const formatForPastYear = 'MMM D, YYYY, h:mm a';\n\n  if (isCurrentYear) {\n    if (timezone) {\n      const dateWithTimezone = date.tz(timezone);\n      return dateWithTimezone\n        .format(formatForCurrentYear)\n        .replace('am', 'a.m.')\n        .replace('pm', 'p.m.');\n    }\n\n    return date.format(formatForCurrentYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n  }\n\n  if (timezone) {\n    const dateWithTimezone = date.tz(timezone);\n    return dateWithTimezone\n      .format(formatForPastYear)\n      .replace('am', 'a.m.')\n      .replace('pm', 'p.m.');\n  }\n  return date.format(formatForPastYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n};\n\nimport { DateDetailsProps } from './DateDetails.types';\n\nconst fallbackSystemTimeZone = 'America/New_York';\n\nexport const DateDetails = ({\n  date,\n  side = 'top',\n  size = 'sm',\n  systemTimeZone,\n  weight = 'normal',\n}: DateDetailsProps) => {\n  const dayjsDate = dayjs(date);\n\n  let systemTime;\n  let resolvedSystemTimeZone = systemTimeZone;\n  if (resolvedSystemTimeZone) {\n    try {\n      systemTime = dayjsDate.tz(resolvedSystemTimeZone);\n    } catch {\n      resolvedSystemTimeZone = fallbackSystemTimeZone;\n      systemTime = dayjsDate.tz(resolvedSystemTimeZone);\n    }\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <Link\n          component=\"span\"\n          size=\"sm\"\n          weight=\"medium\"\n        >\n          <Text\n            component=\"span\"\n            size={size}\n            weight={weight}\n          >\n            {dayjs.utc(date).fromNow()}\n          </Text>\n        </Link>\n      </Popover.Trigger>\n      <Popover.Content\n        side={side}\n        showArrow\n      >\n        <GridContainer\n          columnGap=\"xl\"\n          gridTemplateColumns=\"repeat(2, auto)\"\n          gap=\"sm\"\n        >\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Local\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">\n              {formatDateDetails(dayjsDate)} (\n              {formatTimezone({\n                date: dayjsDate,\n                timezone: dayjs.tz.guess(),\n              })}\n              )\n            </Text>\n          </Container>\n\n          {systemTime && (\n            <>\n              <Text\n                color=\"muted\"\n                size=\"sm\"\n              >\n                System\n              </Text>\n\n              <Container justifyContent=\"end\">\n                <Text size=\"sm\">\n                  {formatDateDetails(systemTime, resolvedSystemTimeZone)} (\n                  {formatTimezone({\n                    date: systemTime,\n                    timezone: resolvedSystemTimeZone,\n                  })}\n                  )\n                </Text>\n              </Container>\n            </>\n          )}\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            UTC\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{formatDateDetails(dayjsDate.utc(), 'UTC')}</Text>\n          </Container>\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Unix\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{Math.round(dayjsDate.valueOf() / 1000)}</Text>\n          </Container>\n        </GridContainer>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -27,7 +27,7 @@ const DropdownTrigger = ({
   ...props
 }) => {
   if (sub) {
-    const { icon, iconDir, ...menuProps } = props;
+    const { icon, iconDir, tooltipProps, ...menuProps } = props;
     return /* @__PURE__ */ jsxs(
       DropdownMenuItem,
       {
@@ -39,6 +39,7 @@ const DropdownTrigger = ({
             {
               icon,
               iconDir,
+              tooltipProps: { side: "right", ...tooltipProps },
               children
             }
           ),
@@ -130,6 +131,7 @@ const DropdownItem = ({
   icon,
   iconDir,
   type = "default",
+  tooltipProps,
   children,
   ...props
 }) => {
@@ -144,6 +146,7 @@ const DropdownItem = ({
         {
           icon,
           iconDir,
+          tooltipProps: { side: "right", ...tooltipProps },
           children
         }
       )

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dropdown.module.css';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\ntype DropdownMenuItemComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuItem<T>>\n) => ReactNode;\n\nconst _DropdownMenuItem = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuItem<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuItem\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuItem>)}\n    className={cn(styles['dropdown-menu-item'], className)}\n  />\n);\n\nconst DropdownMenuItem: DropdownMenuItemComponent = forwardRef(_DropdownMenuItem);\n\ninterface SubDropdownProps {\n  sub?: true;\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  const { className, ...triggerProps } = props as DropdownTriggerProps;\n  return (\n    <DropdownMenu.Trigger\n      asChild\n      {...triggerProps}\n      className={cn(styles['dropdown-trigger'], className)}\n    >\n      <div>{children}</div>\n    </DropdownMenu.Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n  showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\ntype DropdownMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>>\n) => ReactNode;\n\nconst _DropdownMenuContent = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuPanel<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(styles['dropdown-menu-content'], className)}\n  />\n);\n\nconst DropdownMenuContent: DropdownMenuContentComponent =\n  forwardRef(_DropdownMenuContent);\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        type=\"dropdown-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownGroup = ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return (\n    <DropdownMenu.Group\n      {...props}\n      className={cn(styles['dropdown-group'], className)}\n    />\n  );\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\n// DropdownMenu.Sub is a context-only Radix primitive that renders no DOM node, so\n// the original styled(DropdownMenu.Sub) border-bottom never applied (the className\n// was dropped). The migration preserves that behavior: no class is forwarded.\nconst DropdownSub = (props: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenu.Sub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n  /** Icon to display in the menu item */\n  icon?: IconName;\n  /** The direction of the icon relative to the label */\n  iconDir?: HorizontalDirection;\n  /** The type of the menu item */\n  type?: 'default' | 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: DropdownItemProps) => {\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Icon"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport type { IconWrapperProps } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport type { ArrowProps, DropdownItemProps } from './Dropdown.types';\nimport styles from './Dropdown.module.css';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\ntype DropdownMenuItemComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuItem<T>>\n) => ReactNode;\n\nconst _DropdownMenuItem = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuItem<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuItem\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuItem>)}\n    className={cn(styles['dropdown-menu-item'], className)}\n  />\n);\n\nconst DropdownMenuItem: DropdownMenuItemComponent = forwardRef(_DropdownMenuItem);\n\n// `sub` alone discriminates the two shapes of Trigger and Content. The label\n// fields live separately so only the sub-trigger accepts them — Content spreads\n// what it does not read straight onto the Radix element, i.e. into the DOM.\ninterface SubDiscriminant {\n  sub?: true;\n}\n\ninterface SubTriggerFields {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n  /**\n   * Positions the tooltip shown when the label is truncated. Defaults to\n   * `side: 'right'` so the tooltip does not cover the items above it.\n   */\n  tooltipProps?: IconWrapperProps['tooltipProps'];\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDiscriminant &\n  SubTriggerFields;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, tooltipProps, ...menuProps } =\n      props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n          tooltipProps={{ side: 'right', ...tooltipProps }}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  const { className, ...triggerProps } = props as DropdownTriggerProps;\n  return (\n    <DropdownMenu.Trigger\n      asChild\n      {...triggerProps}\n      className={cn(styles['dropdown-trigger'], className)}\n    >\n      <div>{children}</div>\n    </DropdownMenu.Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDiscriminant & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\ntype DropdownMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>>\n) => ReactNode;\n\nconst _DropdownMenuContent = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuPanel<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(styles['dropdown-menu-content'], className)}\n  />\n);\n\nconst DropdownMenuContent: DropdownMenuContentComponent =\n  forwardRef(_DropdownMenuContent);\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        type=\"dropdown-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownGroup = ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return (\n    <DropdownMenu.Group\n      {...props}\n      className={cn(styles['dropdown-group'], className)}\n    />\n  );\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\n// DropdownMenu.Sub is a context-only Radix primitive that renders no DOM node, so\n// the original styled(DropdownMenu.Sub) border-bottom never applied (the className\n// was dropped). The migration preserves that behavior: no class is forwarded.\nconst DropdownSub = (props: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenu.Sub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  tooltipProps,\n  children,\n  ...props\n}: DropdownItemProps) => {\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n        tooltipProps={{ side: 'right', ...tooltipProps }}\n      >\n        {children}\n      </IconWrapper>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Icon"],"mappings":"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"}

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

@@ -9,6 +9,7 @@ import styles from './EllipsisContent.module.css.js';
 const EllipsisContentComponent = ({
   component,
   className,
+  tooltipProps,
   ...props
 }, ref) => {
   const Component = component ?? "div";
@@ -33,9 +34,9 @@ const EllipsisContentComponent = ({
   if (!tooltipContent) {
     return content;
   }
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs(Tooltip, { disableHoverableContent: true, children: [
     /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: content }),
-    /* @__PURE__ */ jsx(Tooltip.Content, { children: tooltipContent })
+    /* @__PURE__ */ jsx(Tooltip.Content, { ...tooltipProps, children: tooltipContent })
   ] });
 };
 const EllipsisContent = forwardRef(

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useState,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { cn } from '@/lib/cva';\nimport { Tooltip } from '@/components/Tooltip';\nimport styles from './EllipsisContent.module.css';\n\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst EllipsisContentComponent = <T extends ElementType = 'div'>(\n  {\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> &\n    EllipsisContentProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  const [tooltipContent, setTooltipContent] = useState<string | null>(null);\n\n  const content = (\n    <Component\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node) {\n            setTooltipContent(\n              node.scrollWidth > node.clientWidth ? node.innerText : null\n            );\n          }\n        },\n      ])}\n      {...props}\n      className={cn(styles['ellipsis-content'], className)}\n    />\n  );\n\n  if (!tooltipContent) {\n    return content;\n  }\n\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>{content}</Tooltip.Trigger>\n      <Tooltip.Content>{tooltipContent}</Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(\n  EllipsisContentComponent\n);\n"],"names":[],"mappings":";;;;;;;AAqBA,MAAM,2BAA2B,CAC/B;AAAA,EACE,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,KAAA;AAC/B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAwB,IAAI,CAAA;AAExE,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAK,SAAA,CAAU;AAAA,QACb,GAAA;AAAA,QACA,CAAA,IAAA,KAAQ;AACN,UAAA,IAAI,IAAA,EAAM;AACR,YAAA,iBAAA;AAAA,cACE,IAAA,CAAK,WAAA,GAAc,IAAA,CAAK,WAAA,GAAc,KAAK,SAAA,GAAY;AAAA,aACzD;AAAA,UACF;AAAA,QACF;AAAA,OACD,CAAA;AAAA,MACA,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,kBAAkB,GAAG,SAAS;AAAA;AAAA,GACrD;AAGF,EAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,IAAA,OAAO,OAAA;AAAA,EACT;AAEA,EAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAgB,OAAA,EAAO,MAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAClC,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAiB,QAAA,EAAA,cAAA,EAAe;AAAA,GAAA,EACnC,CAAA;AAEJ,CAAA;AAEO,MAAM,eAAA,GAAgD,UAAA;AAAA,EAC3D;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useState,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { cn } from '@/lib/cva';\nimport { Tooltip } from '@/components/Tooltip';\nimport { EllipsisContentProps } from './EllipsisContent.types';\nimport styles from './EllipsisContent.module.css';\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst EllipsisContentComponent = <T extends ElementType = 'div'>(\n  {\n    component,\n    className,\n    tooltipProps,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> &\n    EllipsisContentProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  const [tooltipContent, setTooltipContent] = useState<string | null>(null);\n\n  const content = (\n    <Component\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node) {\n            setTooltipContent(\n              node.scrollWidth > node.clientWidth ? node.innerText : null\n            );\n          }\n        },\n      ])}\n      {...props}\n      className={cn(styles['ellipsis-content'], className)}\n    />\n  );\n\n  if (!tooltipContent) {\n    return content;\n  }\n\n  return (\n    <Tooltip disableHoverableContent>\n      <Tooltip.Trigger asChild>{content}</Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps}>{tooltipContent}</Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(\n  EllipsisContentComponent\n);\n"],"names":[],"mappings":";;;;;;;AAkBA,MAAM,2BAA2B,CAC/B;AAAA,EACE,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,KAAA;AAC/B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAwB,IAAI,CAAA;AAExE,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAK,SAAA,CAAU;AAAA,QACb,GAAA;AAAA,QACA,CAAA,IAAA,KAAQ;AACN,UAAA,IAAI,IAAA,EAAM;AACR,YAAA,iBAAA;AAAA,cACE,IAAA,CAAK,WAAA,GAAc,IAAA,CAAK,WAAA,GAAc,KAAK,SAAA,GAAY;AAAA,aACzD;AAAA,UACF;AAAA,QACF;AAAA,OACD,CAAA;AAAA,MACA,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,kBAAkB,GAAG,SAAS;AAAA;AAAA,GACrD;AAGF,EAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,IAAA,OAAO,OAAA;AAAA,EACT;AAEA,EAAA,uBACE,IAAA,CAAC,OAAA,EAAA,EAAQ,uBAAA,EAAuB,IAAA,EAC9B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAgB,OAAA,EAAO,MAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBACjC,OAAA,CAAQ,OAAA,EAAR,EAAiB,GAAG,cAAe,QAAA,EAAA,cAAA,EAAe;AAAA,GAAA,EACrD,CAAA;AAEJ,CAAA;AAEO,MAAM,eAAA,GAAgD,UAAA;AAAA,EAC3D;AACF;;;;"}

package/dist/esm/components/IconButton/IconButton.css

@@ -8,6 +8,11 @@
   cursor: pointer;
 }
 
+.iconbutton__G-cEu:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
 .iconbutton_size_sm__tT3BV {
   padding: var(--click-button-iconButton-sm-space-y)
     var(--click-button-iconButton-sm-space-x);

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

@@ -27,22 +27,32 @@ const iconButtonVariants = cva(styles.iconbutton, {
   }
 });
 const IconButton = forwardRef(
-  ({ type = "primary", htmlType, icon, size, disabled, className, ...props }, ref) => {
+  ({
+    type = "primary",
+    htmlType = "button",
+    icon,
+    size,
+    disabled,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
     const iconName = icon ? icon.toString() : "unknown icon";
     return /* @__PURE__ */ jsx(
       "button",
       {
+        "aria-label": ariaLabel || iconName,
         ...props,
         type: htmlType,
         className: cn(iconButtonVariants({ type, size }), className),
         disabled,
         ref,
         role: "button",
-        "aria-label": iconName,
         children: /* @__PURE__ */ jsx(
           SvgImage,
           {
             name: icon,
+            "aria-hidden": true,
             size: "sm"
           }
         )

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', htmlType, icon, size, disabled, className, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        {...props}\n        type={htmlType}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["Icon"],"mappings":";;;;;;;AAMA,MAAM,kBAAA,GAAqB,GAAA,CAAI,MAAA,CAAO,UAAA,EAAY;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,OAAO,yBAAyB,CAAA;AAAA,MACzC,SAAA,EAAW,OAAO,2BAA2B,CAAA;AAAA,MAC7C,KAAA,EAAO,OAAO,uBAAuB,CAAA;AAAA,MACrC,MAAA,EAAQ,OAAO,wBAAwB,CAAA;AAAA,MACvC,IAAA,EAAM,OAAO,sBAAsB;AAAA,KACrC;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,EAAA;AAAA,MACT,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,EAAE,IAAA,GAAO,SAAA,EAAW,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClF,IAAA,MAAM,QAAA,GAAW,IAAA,GAAO,IAAA,CAAK,QAAA,EAAS,GAAI,cAAA;AAE1C,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,IAAA,EAAM,QAAA;AAAA,QACN,SAAA,EAAW,GAAG,kBAAA,CAAmB,EAAE,MAAM,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAC3D,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,QAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      type = 'primary',\n      htmlType = 'button',\n      icon,\n      size,\n      disabled,\n      className,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        aria-label={ariaLabel || iconName}\n        {...props}\n        type={htmlType}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n      >\n        <Icon\n          name={icon}\n          aria-hidden\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["Icon"],"mappings":";;;;;;;AAMA,MAAM,kBAAA,GAAqB,GAAA,CAAI,MAAA,CAAO,UAAA,EAAY;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,OAAO,yBAAyB,CAAA;AAAA,MACzC,SAAA,EAAW,OAAO,2BAA2B,CAAA;AAAA,MAC7C,KAAA,EAAO,OAAO,uBAAuB,CAAA;AAAA,MACrC,MAAA,EAAQ,OAAO,wBAAwB,CAAA;AAAA,MACvC,IAAA,EAAM,OAAO,sBAAsB;AAAA,KACrC;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,EAAA;AAAA,MACT,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CACE;AAAA,IACE,IAAA,GAAO,SAAA;AAAA,IACP,QAAA,GAAW,QAAA;AAAA,IACX,IAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,IAAA,GAAO,IAAA,CAAK,QAAA,EAAS,GAAI,cAAA;AAE1C,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,cAAY,SAAA,IAAa,QAAA;AAAA,QACxB,GAAG,KAAA;AAAA,QACJ,IAAA,EAAM,QAAA;AAAA,QACN,SAAA,EAAW,GAAG,kBAAA,CAAmB,EAAE,MAAM,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAC3D,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QAEL,QAAA,kBAAA,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,aAAA,EAAW,IAAA;AAAA,YACX,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -11,11 +11,11 @@ const IconWrapper = ({
   height,
   children,
   ellipsisContent = true,
+  tooltipProps,
   gap = "sm",
   isResponsive = true,
   ...props
 }) => {
-  const TextWrapper = ellipsisContent ? EllipsisContent : "div";
   return /* @__PURE__ */ jsxs(
     Container,
     {
@@ -34,13 +34,14 @@ const IconWrapper = ({
             height
           }
         ),
-        /* @__PURE__ */ jsx(
-          TextWrapper,
+        ellipsisContent ? /* @__PURE__ */ jsx(
+          EllipsisContent,
           {
-            "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`,
+            "data-testid": "ellipsed-icon-wrapper-text",
+            tooltipProps,
             children
           }
-        ),
+        ) : /* @__PURE__ */ jsx("div", { "data-testid": "normal-icon-wrapper-text", children }),
         icon && iconDir === "end" && /* @__PURE__ */ jsx(
           SvgImage,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { EllipsisContent } from '@/components/EllipsisContent';\nimport { Icon } from '@/components/Icon';\nimport { IconWrapperProps } from './IconWrapper.types';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  size = 'sm',\n  width,\n  height,\n  children,\n  ellipsisContent = true,\n  gap = 'sm',\n  isResponsive = true,\n  ...props\n}: IconWrapperProps) => {\n  const TextWrapper = ellipsisContent ? EllipsisContent : 'div';\n  return (\n    <Container\n      orientation=\"horizontal\"\n      gap={gap}\n      overflow=\"hidden\"\n      isResponsive={isResponsive}\n      {...props}\n    >\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n      <TextWrapper\n        data-testid={`${ellipsisContent ? 'ellipsed' : 'normal'}-icon-wrapper-text`}\n      >\n        {children}\n      </TextWrapper>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n    </Container>\n  );\n};\n"],"names":["Icon"],"mappings":";;;;;AAKO,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA,GAAkB,IAAA;AAAA,EAClB,GAAA,GAAM,IAAA;AAAA,EACN,YAAA,GAAe,IAAA;AAAA,EACf,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,WAAA,GAAc,kBAAkB,eAAA,GAAkB,KAAA;AACxD,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,YAAA;AAAA,MACZ,GAAA;AAAA,MACA,QAAA,EAAS,QAAA;AAAA,MACT,YAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,IAAQ,YAAY,OAAA,oBACnB,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEF,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,CAAA,EAAG,eAAA,GAAkB,UAAA,GAAa,QAAQ,CAAA,kBAAA,CAAA;AAAA,YAEtD;AAAA;AAAA,SACH;AAAA,QACC,IAAA,IAAQ,YAAY,KAAA,oBACnB,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { EllipsisContent } from '@/components/EllipsisContent';\nimport { Icon } from '@/components/Icon';\nimport { IconWrapperProps } from './IconWrapper.types';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  size = 'sm',\n  width,\n  height,\n  children,\n  ellipsisContent = true,\n  tooltipProps,\n  gap = 'sm',\n  isResponsive = true,\n  ...props\n}: IconWrapperProps) => {\n  return (\n    <Container\n      orientation=\"horizontal\"\n      gap={gap}\n      overflow=\"hidden\"\n      isResponsive={isResponsive}\n      {...props}\n    >\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n      {ellipsisContent ? (\n        <EllipsisContent\n          data-testid=\"ellipsed-icon-wrapper-text\"\n          tooltipProps={tooltipProps}\n        >\n          {children}\n        </EllipsisContent>\n      ) : (\n        <div data-testid=\"normal-icon-wrapper-text\">{children}</div>\n      )}\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n    </Container>\n  );\n};\n"],"names":["Icon"],"mappings":";;;;;AAKO,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA,GAAkB,IAAA;AAAA,EAClB,YAAA;AAAA,EACA,GAAA,GAAM,IAAA;AAAA,EACN,YAAA,GAAe,IAAA;AAAA,EACf,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,YAAA;AAAA,MACZ,GAAA;AAAA,MACA,QAAA,EAAS,QAAA;AAAA,MACT,YAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,IAAQ,YAAY,OAAA,oBACnB,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QAED,eAAA,mBACC,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,4BAAA;AAAA,YACZ,YAAA;AAAA,YAEC;AAAA;AAAA,SACH,mBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,4BAA4B,QAAA,EAAS,CAAA;AAAA,QAEvD,IAAA,IAAQ,YAAY,KAAA,oBACnB,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/esm/components/Link/Link.css

@@ -1,7 +1,6 @@
 @layer clickui {.link__Ly-e3 {
   display: inline-flex;
   margin: 0;
-  margin-right: var(--link-gap);
   align-items: center;
   gap: var(--link-gap);
   color: var(--click-global-color-text-link-default);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn(iconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["Icon"],"mappings":";;;;;;;AA6BA,MAAM,YAAA,GAAe,GAAA,CAAI,MAAA,CAAO,IAAA,EAAM;AAAA,EACpC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc;AAAA,KAC3B;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ,OAAO,oBAAoB,CAAA;AAAA,MACnC,MAAA,EAAQ,OAAO,oBAAoB,CAAA;AAAA,MACnC,QAAA,EAAU,OAAO,sBAAsB,CAAA;AAAA,MACvC,IAAA,EAAM,OAAO,kBAAkB,CAAA;AAAA,MAC/B,IAAA,EAAM,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAM,YAAA,GAAe,GAAA,CAAI,MAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAM,QAAQ,CACZ;AAAA,EACE,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,QAAA;AAAA,EACT,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,GAAG,YAAA,CAAa,EAAE,MAAM,MAAA,EAAQ,GAAG,SAAS,CAAA;AAAA,MAEtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,IAAA,wBACE,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,WAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,YACpC,aAAA,EAAa;AAAA;AAAA,SACf,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AACO,MAAM,IAAA,GAAiC,WAAW,KAAK;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\n\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nimport styles from './Link.module.css';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn(iconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["Icon"],"mappings":";;;;;;;AA+BA,MAAM,YAAA,GAAe,GAAA,CAAI,MAAA,CAAO,IAAA,EAAM;AAAA,EACpC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc;AAAA,KAC3B;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ,OAAO,oBAAoB,CAAA;AAAA,MACnC,MAAA,EAAQ,OAAO,oBAAoB,CAAA;AAAA,MACnC,QAAA,EAAU,OAAO,sBAAsB,CAAA;AAAA,MACvC,IAAA,EAAM,OAAO,kBAAkB,CAAA;AAAA,MAC/B,IAAA,EAAM,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAM,YAAA,GAAe,GAAA,CAAI,MAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAM,QAAQ,CACZ;AAAA,EACE,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,QAAA;AAAA,EACT,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,GAAG,YAAA,CAAa,EAAE,MAAM,MAAA,EAAQ,GAAG,SAAS,CAAA;AAAA,MAEtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,IAAA,wBACE,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,WAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,YACpC,aAAA,EAAa;AAAA;AAAA,SACf,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AACO,MAAM,IAAA,GAAiC,WAAW,KAAK;;;;"}

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

@@ -35,11 +35,11 @@ const Pagination = ({
   const leftButtonDisabled = currentPage <= 1;
   const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
   const onChange = (value) => {
-    const sanitizedValue = parseInt(value, 10);
-    if (sanitizedValue < 1 || inputRef.current?.disabled || (typeof totalPages !== "undefined" ? sanitizedValue > totalPages : false)) {
+    const pageNumber = parseInt(value, 10);
+    if (Number.isNaN(pageNumber) || pageNumber < 1 || inputRef.current?.disabled || (typeof totalPages !== "undefined" ? pageNumber > totalPages : false)) {
       return;
     }
-    onChangeProp(sanitizedValue);
+    onChangeProp(pageNumber);
   };
   const onPageSizeChange = (value) => {
     if (typeof onPageSizeChangeProp === "function") {

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":"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"}