@persona/design-system 0.1.7 → 0.1.9

package/dist/HoverCopyableField.d.mts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region components/HoverCopyableField/HoverCopyableField.d.ts
 interface HoverCopyableFieldProps {

package/dist/{IconButton-ZcyTFjPn.d.cts → IconButton-BHCmHIx5.d.mts}

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "./Button-C_3p5Xfi.cjs";
+import { r as ButtonProps } from "./Button-Vd5O4DUp.mjs";
 import * as _$react from "react";
 
 //#region components/Button/IconButton.d.ts
@@ -21,4 +21,4 @@ interface IconButtonProps extends Omit<ButtonProps, 'width' | 'prefixIcon' | 'pr
 declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=IconButton-ZcyTFjPn.d.cts.map
+//# sourceMappingURL=IconButton-BHCmHIx5.d.mts.map

package/dist/{IconButton-DC4rh6ow.mjs → IconButton-P8w0JDI5.mjs}

@@ -3,14 +3,14 @@ import { focusOutlineControlled } from "./mixins/focus.mjs";
 import "./variables/transitions.mjs";
 import { printMixins } from "./mixins/print/index.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as useToggle } from "./useToggle-3k3EkV8V.mjs";
+import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
 import { rotate } from "./variables/keyframes.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
 import { forwardRef, useCallback } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { LoaderIcon } from "@persona/icons";
-import { Link } from "react-router-dom";
 import { isEmpty, isFunction } from "lodash/fp.js";
 //#region components/Button/Button.tsx
 const noop = () => void 0;
@@ -284,7 +284,7 @@ const Button = forwardRef(function Button({ id, children, prefixIcon, suffixIcon
 		}), /* @__PURE__ */ jsxs(ButtonChildren, {
 			isPending: loading,
 			children: [
-				prefixIcon != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [prefixIconType === "basic" && /* @__PURE__ */ jsx(PrefixIconContainer, { children: prefixIcon }), prefixIconType === "inherit" && /* @__PURE__ */ jsx(InheritPrefixIconContainer, { children: prefixIcon })] }),
+				prefixIcon != null && /* @__PURE__ */ jsxs(Fragment, { children: [prefixIconType === "basic" && /* @__PURE__ */ jsx(PrefixIconContainer, { children: prefixIcon }), prefixIconType === "inherit" && /* @__PURE__ */ jsx(InheritPrefixIconContainer, { children: prefixIcon })] }),
 				children && /* @__PURE__ */ jsx(ButtonText, {
 					width,
 					size,
@@ -338,4 +338,4 @@ const IconButton = forwardRef(function IconButton({ size = "xs", ...props }, ref
 //#endregion
 export { SuffixIconContainer as a, StyledButton as i, Button as n, ButtonChildren as r, IconButton as t };
 
-//# sourceMappingURL=IconButton-DC4rh6ow.mjs.map
+//# sourceMappingURL=IconButton-P8w0JDI5.mjs.map

package/dist/{IconButton-DC4rh6ow.mjs.map → IconButton-P8w0JDI5.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"IconButton-DC4rh6ow.mjs","names":[],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash/fp';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n  md: css`\n    ${paragraphMixins.md}\n    height: ${({ theme }) => theme.button.height.md};\n    padding: ${Spacing[2]};\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n    height: ${({ theme }) => theme.button.height.sm};\n    padding: ${Spacing[1]} 6px;\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  `,\n};\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n  full: css`\n    width: 100%;\n  `,\n  auto: css`\n    width: auto;\n  `,\n  // TODO: rename this prop to 'element' as a standard unresponsive element width\n  button: css`\n    width: ${({ theme }) => theme.element.width.md};\n  `,\n  icon: css<ButtonProps>`\n    width: ${({ theme, size }) => {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      return theme.button.height[size];\n    }};\n    padding: 0;\n    flex: none;\n  `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n  $isPending: boolean;\n  $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n  if (isEmpty(to)) {\n    return 'button';\n  } else if (typeof to === 'string' && to.startsWith('https://')) {\n    return {\n      as: 'a',\n      href: to,\n      target: target ?? '_blank',\n      rel: 'noreferrer',\n    };\n  } else {\n    return {\n      as: Link,\n    };\n  }\n})<ButtonPropsWithTransientProps>`\n  cursor: pointer;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  ${({ theme, variant }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const palette = theme.color.variants[variant] as any;\n    return css`\n      &:disabled {\n        background-color: ${palette.disabled};\n        color: ${palette.textDisabled};\n        svg path {\n          stroke: ${palette.textDisabled};\n        }\n\n        /* For backwards compatibility with current coloring scheme (targeting stroke property) */\n        svg.pds-icon {\n          path {\n            stroke: unset;\n          }\n\n          /* Support icons with stroke */\n          path[stroke] {\n            stroke: currentColor;\n          }\n        }\n\n        user-select: none;\n      }\n    `;\n  }}\n\n  ${({ variant }) =>\n    variant === 'outline' &&\n    css`\n      border: 1px solid ${({ theme }) => theme.color.border.input};\n    `}\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* To properly position loading spinner */\n  position: relative;\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  ${({ size }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return sizeStyles[size];\n  }}\n  ${({ width }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return widthStyles[width];\n  }}\n\n  /* Variant styling */\n  ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    let palette = theme.color.variants[variant] as any;\n\n    if (variant === 'basic' && $onSecondaryBackground) {\n      palette = {\n        ...palette,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        default: Color.CoreSlate300,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        hover: Color.CoreSlate400,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        active: Color.CoreSlate400,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        disabled: Color.CoreSlate100,\n      };\n    }\n\n    return css`\n      background-color: ${palette.default};\n      color: ${palette.text};\n      svg path {\n        stroke: ${palette.text};\n      }\n\n      svg.pds-icon {\n        path {\n          stroke: unset;\n        }\n\n        path[stroke] {\n          stroke: currentColor;\n        }\n      }\n\n      &${isHovered}${isNotDisabled} {\n        background-color: ${palette.hover};\n      }\n\n      &${isDisabled} {\n        cursor: not-allowed;\n      }\n\n      &${isActive} {\n        background-color: ${palette.active};\n      }\n\n      ${focusOutlineControlled}\n\n      ${\n        $isPending &&\n        css`\n        cursor: default;\n        background-color: ${palette.active};\n        &:disabled {\n          background-color: ${({ theme }) => {\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return theme.color.variants[variant].active;\n          }};\n          user-select: none;\n        }\n\n        svg path {\n          stroke: ${palette.highlightDark};\n        }\n\n        // For backwards compatibility with current coloring scheme (targeting stroke property)\n        svg.pds-icon {\n          path {\n            stroke: unset;\n          }\n\n          path[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `\n      }\n    `;\n  }}\n\n\n  ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 2s;\n  opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n  animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n  ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  transition: opacity ${TransitionDuration.Fast};\n  opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n  gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n  display: flex;\n  align-items: center;\n\n  & svg {\n    width: inherit;\n    height: inherit;\n  }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n  margin-right: 0;\n  flex-grow: 1;\n  justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' | 'sm'; width: 'full' | 'auto' | 'button' | 'icon' }>`\n  position: relative;\n\n  /* Needed to align for browsers that don't support text-box yet\n  (which at this time, is firefox, and opera, and a few niche browsers)\n  This checks firefox. Otherwise, it will default back to the original\n  which is a slightly misaligned button\n  */\n\n  /* Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n  work */\n\n  line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n  @-moz-document url-prefix() {\n    top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n  }\n\n  @supports (text-box: cap alphabetic) {\n    text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n  }\n`;\n\ntype MaybePromise =\n  | ((e: MouseEvent<HTMLButtonElement>) => void)\n  | ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n  extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n  /**\n   * Visual style of the button.\n   *\n   * - `primary` – filled brand colour, for the primary action on a surface.\n   * - `basic` – subtle grey fill, for secondary actions.\n   * - `outline` – transparent with a border, alternative secondary style.\n   * - `text` – no background or border, for tertiary / inline actions.\n   * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n   * - `danger` – red fill, for destructive actions.\n   *\n   * @defaultValue 'primary'\n   */\n  variant?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';\n  /**\n   * Shows a loading spinner and disables the button. Also triggers automatically\n   * when `onClick` returns a Promise, clearing once the promise settles.\n   */\n  isPending?: boolean;\n  /**\n   * Icon rendered to the left of the button label.\n   * Import from `@persona-id/icons`.\n   */\n  prefixIcon?: ReactNode;\n  /**\n   * Controls how the prefix icon inherits sizing.\n   *\n   * - `basic` – icon is rendered inside a fixed-size container.\n   * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n   *\n   * @defaultValue 'basic'\n   */\n  prefixIconType?: 'basic' | 'inherit';\n\n  /**\n   * Icon rendered to the right of the button label.\n   * Import from `@persona-id/icons`.\n   */\n  suffixIcon?: ReactNode;\n\n  /**\n   * Height and typography scale of the button.\n   *\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n\n  /**\n   * Changes the button into a link.\n   * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n   * `https://` URL to render an `<a>` tag that opens in a new tab.\n   */\n  to?: LinkProps['to'];\n\n  /**\n   * Overrides the target of the link if `to` is provided and is an external link.\n   */\n  target?: LinkProps['target'];\n\n  /**\n   * Note: we may want to default this to 'button' in the future, but many instances of this Button component\n   * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n   * so we'll have to comb through and manually add the type='submit' prop.\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Controls the width of the button.\n   *\n   * - `full` – stretches to fill its container (`width: 100%`).\n   * - `auto` – shrinks to fit its content.\n   * - `button` – a fixed medium element width (from design tokens).\n   * - `icon` – square, sized to match the button height; use for icon-only buttons.\n   *\n   * @defaultValue 'full'\n   */\n  width?: 'full' | 'auto' | 'button' | 'icon';\n  onClick?: MaybePromise;\n  ref?: Ref<HTMLButtonElement>;\n\n  /**\n   * In some cases we render a button on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    id,\n    children,\n    prefixIcon,\n    suffixIcon,\n    disabled,\n    isPending,\n    type = 'button',\n    prefixIconType = 'basic',\n    variant = 'primary',\n    size = 'md',\n    width = 'full',\n    onClick,\n    onSecondaryBackground,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const [isResolving, { enable, disable }] = useToggle(false);\n  const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n  const loading = isPending || isResolving;\n\n  const handleClick = useCallback(\n    async (e: MouseEvent<HTMLButtonElement>) => {\n      if (loading) {\n        return;\n      }\n\n      const maybePromise = innerOnClick(e);\n\n      if (maybePromise instanceof Promise) {\n        enable();\n        await maybePromise;\n        disable();\n      }\n    },\n    [loading, innerOnClick],\n  );\n\n  return (\n    <StyledButton\n      id={id}\n      type={type}\n      data-test={'button__' + variant}\n      variant={variant}\n      size={size}\n      width={width}\n      disabled={disabled || loading}\n      $isPending={loading}\n      $onSecondaryBackground={onSecondaryBackground}\n      {...props}\n      onClick={handleClick}\n      ref={ref}\n    >\n      {loading && (\n        <LoaderContainer isPending={loading}>\n          <Loader aria-label={`Loading ${props['aria-label'] || ''}`} />\n        </LoaderContainer>\n      )}\n      <ButtonChildren isPending={loading}>\n        {prefixIcon != null && (\n          <>\n            {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n            {prefixIconType === 'inherit' && (\n              <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n            )}\n          </>\n        )}\n        {children && (\n          <ButtonText width={width} size={size}>\n            {children}\n          </ButtonText>\n        )}\n        {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n      </ButtonChildren>\n    </StyledButton>\n  );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n  xs: '16px',\n  sm: '24px',\n  md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n  xs: '12px',\n  sm: '16px',\n  md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n  width: 'icon',\n  variant: 'basic',\n})`\n  background-color: transparent;\n  padding: 0;\n  border-radius: ${BorderRadius.Md};\n\n  ${({ size }) => css`\n    height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n    width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n    svg {\n      width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n      height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n    }\n  `}\n`;\n\nexport interface IconButtonProps extends Omit<\n  ButtonProps,\n  'width' | 'prefixIcon' | 'prefixIconType' | 'suffixIcon' | 'variant' | 'size'\n> {\n  /**\n   * `xs` - 16px. `sm` - 24px. `md` - 32px.\n   * Pair with a PDS icon in the prescribed size.\n   */\n  size?: IconBtnSize;\n}\n\n/**\n * Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { size = 'xs', ...props },\n  ref,\n) {\n  return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"IconButton-P8w0JDI5.mjs","names":[],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash/fp';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n  md: css`\n    ${paragraphMixins.md}\n    height: ${({ theme }) => theme.button.height.md};\n    padding: ${Spacing[2]};\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n    height: ${({ theme }) => theme.button.height.sm};\n    padding: ${Spacing[1]} 6px;\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  `,\n};\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n  full: css`\n    width: 100%;\n  `,\n  auto: css`\n    width: auto;\n  `,\n  // TODO: rename this prop to 'element' as a standard unresponsive element width\n  button: css`\n    width: ${({ theme }) => theme.element.width.md};\n  `,\n  icon: css<ButtonProps>`\n    width: ${({ theme, size }) => {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      return theme.button.height[size];\n    }};\n    padding: 0;\n    flex: none;\n  `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n  $isPending: boolean;\n  $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n  if (isEmpty(to)) {\n    return 'button';\n  } else if (typeof to === 'string' && to.startsWith('https://')) {\n    return {\n      as: 'a',\n      href: to,\n      target: target ?? '_blank',\n      rel: 'noreferrer',\n    };\n  } else {\n    return {\n      as: Link,\n    };\n  }\n})<ButtonPropsWithTransientProps>`\n  cursor: pointer;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  ${({ theme, variant }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const palette = theme.color.variants[variant] as any;\n    return css`\n      &:disabled {\n        background-color: ${palette.disabled};\n        color: ${palette.textDisabled};\n        svg path {\n          stroke: ${palette.textDisabled};\n        }\n\n        /* For backwards compatibility with current coloring scheme (targeting stroke property) */\n        svg.pds-icon {\n          path {\n            stroke: unset;\n          }\n\n          /* Support icons with stroke */\n          path[stroke] {\n            stroke: currentColor;\n          }\n        }\n\n        user-select: none;\n      }\n    `;\n  }}\n\n  ${({ variant }) =>\n    variant === 'outline' &&\n    css`\n      border: 1px solid ${({ theme }) => theme.color.border.input};\n    `}\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* To properly position loading spinner */\n  position: relative;\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  ${({ size }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return sizeStyles[size];\n  }}\n  ${({ width }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return widthStyles[width];\n  }}\n\n  /* Variant styling */\n  ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    let palette = theme.color.variants[variant] as any;\n\n    if (variant === 'basic' && $onSecondaryBackground) {\n      palette = {\n        ...palette,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        default: Color.CoreSlate300,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        hover: Color.CoreSlate400,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        active: Color.CoreSlate400,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        disabled: Color.CoreSlate100,\n      };\n    }\n\n    return css`\n      background-color: ${palette.default};\n      color: ${palette.text};\n      svg path {\n        stroke: ${palette.text};\n      }\n\n      svg.pds-icon {\n        path {\n          stroke: unset;\n        }\n\n        path[stroke] {\n          stroke: currentColor;\n        }\n      }\n\n      &${isHovered}${isNotDisabled} {\n        background-color: ${palette.hover};\n      }\n\n      &${isDisabled} {\n        cursor: not-allowed;\n      }\n\n      &${isActive} {\n        background-color: ${palette.active};\n      }\n\n      ${focusOutlineControlled}\n\n      ${\n        $isPending &&\n        css`\n        cursor: default;\n        background-color: ${palette.active};\n        &:disabled {\n          background-color: ${({ theme }) => {\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return theme.color.variants[variant].active;\n          }};\n          user-select: none;\n        }\n\n        svg path {\n          stroke: ${palette.highlightDark};\n        }\n\n        // For backwards compatibility with current coloring scheme (targeting stroke property)\n        svg.pds-icon {\n          path {\n            stroke: unset;\n          }\n\n          path[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `\n      }\n    `;\n  }}\n\n\n  ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 2s;\n  opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n  animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n  ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  transition: opacity ${TransitionDuration.Fast};\n  opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n  gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n  display: flex;\n  align-items: center;\n\n  & svg {\n    width: inherit;\n    height: inherit;\n  }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n  margin-right: 0;\n  flex-grow: 1;\n  justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' | 'sm'; width: 'full' | 'auto' | 'button' | 'icon' }>`\n  position: relative;\n\n  /* Needed to align for browsers that don't support text-box yet\n  (which at this time, is firefox, and opera, and a few niche browsers)\n  This checks firefox. Otherwise, it will default back to the original\n  which is a slightly misaligned button\n  */\n\n  /* Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n  work */\n\n  line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n  @-moz-document url-prefix() {\n    top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n  }\n\n  @supports (text-box: cap alphabetic) {\n    text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n  }\n`;\n\ntype MaybePromise =\n  | ((e: MouseEvent<HTMLButtonElement>) => void)\n  | ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n  extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n  /**\n   * Visual style of the button.\n   *\n   * - `primary` – filled brand colour, for the primary action on a surface.\n   * - `basic` – subtle grey fill, for secondary actions.\n   * - `outline` – transparent with a border, alternative secondary style.\n   * - `text` – no background or border, for tertiary / inline actions.\n   * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n   * - `danger` – red fill, for destructive actions.\n   *\n   * @defaultValue 'primary'\n   */\n  variant?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';\n  /**\n   * Shows a loading spinner and disables the button. Also triggers automatically\n   * when `onClick` returns a Promise, clearing once the promise settles.\n   */\n  isPending?: boolean;\n  /**\n   * Icon rendered to the left of the button label.\n   * Import from `@persona/icons`.\n   */\n  prefixIcon?: ReactNode;\n  /**\n   * Controls how the prefix icon inherits sizing.\n   *\n   * - `basic` – icon is rendered inside a fixed-size container.\n   * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n   *\n   * @defaultValue 'basic'\n   */\n  prefixIconType?: 'basic' | 'inherit';\n\n  /**\n   * Icon rendered to the right of the button label.\n   * Import from `@persona/icons`.\n   */\n  suffixIcon?: ReactNode;\n\n  /**\n   * Height and typography scale of the button.\n   *\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n\n  /**\n   * Changes the button into a link.\n   * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n   * `https://` URL to render an `<a>` tag that opens in a new tab.\n   */\n  to?: LinkProps['to'];\n\n  /**\n   * Overrides the target of the link if `to` is provided and is an external link.\n   */\n  target?: LinkProps['target'];\n\n  /**\n   * Note: we may want to default this to 'button' in the future, but many instances of this Button component\n   * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n   * so we'll have to comb through and manually add the type='submit' prop.\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Controls the width of the button.\n   *\n   * - `full` – stretches to fill its container (`width: 100%`).\n   * - `auto` – shrinks to fit its content.\n   * - `button` – a fixed medium element width (from design tokens).\n   * - `icon` – square, sized to match the button height; use for icon-only buttons.\n   *\n   * @defaultValue 'full'\n   */\n  width?: 'full' | 'auto' | 'button' | 'icon';\n  onClick?: MaybePromise;\n  ref?: Ref<HTMLButtonElement>;\n\n  /**\n   * In some cases we render a button on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    id,\n    children,\n    prefixIcon,\n    suffixIcon,\n    disabled,\n    isPending,\n    type = 'button',\n    prefixIconType = 'basic',\n    variant = 'primary',\n    size = 'md',\n    width = 'full',\n    onClick,\n    onSecondaryBackground,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const [isResolving, { enable, disable }] = useToggle(false);\n  const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n  const loading = isPending || isResolving;\n\n  const handleClick = useCallback(\n    async (e: MouseEvent<HTMLButtonElement>) => {\n      if (loading) {\n        return;\n      }\n\n      const maybePromise = innerOnClick(e);\n\n      if (maybePromise instanceof Promise) {\n        enable();\n        await maybePromise;\n        disable();\n      }\n    },\n    [loading, innerOnClick],\n  );\n\n  return (\n    <StyledButton\n      id={id}\n      type={type}\n      data-test={'button__' + variant}\n      variant={variant}\n      size={size}\n      width={width}\n      disabled={disabled || loading}\n      $isPending={loading}\n      $onSecondaryBackground={onSecondaryBackground}\n      {...props}\n      onClick={handleClick}\n      ref={ref}\n    >\n      {loading && (\n        <LoaderContainer isPending={loading}>\n          <Loader aria-label={`Loading ${props['aria-label'] || ''}`} />\n        </LoaderContainer>\n      )}\n      <ButtonChildren isPending={loading}>\n        {prefixIcon != null && (\n          <>\n            {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n            {prefixIconType === 'inherit' && (\n              <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n            )}\n          </>\n        )}\n        {children && (\n          <ButtonText width={width} size={size}>\n            {children}\n          </ButtonText>\n        )}\n        {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n      </ButtonChildren>\n    </StyledButton>\n  );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n  xs: '16px',\n  sm: '24px',\n  md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n  xs: '12px',\n  sm: '16px',\n  md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n  width: 'icon',\n  variant: 'basic',\n})`\n  background-color: transparent;\n  padding: 0;\n  border-radius: ${BorderRadius.Md};\n\n  ${({ size }) => css`\n    height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n    width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n    svg {\n      width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n      height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n    }\n  `}\n`;\n\nexport interface IconButtonProps extends Omit<\n  ButtonProps,\n  'width' | 'prefixIcon' | 'prefixIconType' | 'suffixIcon' | 'variant' | 'size'\n> {\n  /**\n   * `xs` - 16px. `sm` - 24px. `md` - 32px.\n   * Pair with a PDS icon in the prescribed size.\n   */\n  size?: IconBtnSize;\n}\n\n/**\n * Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { size = 'xs', ...props },\n  ref,\n) {\n  return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/IconButton.d.mts

@@ -1,2 +1,2 @@
-import { n as IconButtonProps, t as IconButton } from "./IconButton-Dnnlf9uO.mjs";
+import { n as IconButtonProps, t as IconButton } from "./IconButton-BHCmHIx5.mjs";
 export { IconButtonProps, IconButton as default };

package/dist/ImageTile.d.mts

@@ -1,6 +1,6 @@
-import { i as TextAction } from "./Action-DkNqzc2X.mjs";
-import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { i as TextAction } from "./Action-CVtzREhU.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
 
 //#region components/ImageTile/ImageTile.d.ts
 interface ImageTileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {

package/dist/InlineCombobox.d.mts

@@ -1,6 +1,6 @@
-import { r as InlineEditConfig } from "./TableBoxCell-D1bjYv7b.mjs";
-import { RefObject } from "react";
+import { r as InlineEditConfig } from "./TableBoxCell-CvjLYhTV.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { RefObject } from "react";
 
 //#region components/TableBox/InlineCombobox.d.ts
 interface InlineComboboxProps {

package/dist/InlineInput.d.mts

@@ -1,4 +1,4 @@
-import { r as InlineEditConfig } from "./TableBoxCell-D1bjYv7b.mjs";
+import { r as InlineEditConfig } from "./TableBoxCell-CvjLYhTV.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/TableBox/InlineInput.d.ts

package/dist/{Input-CEcTvtX2.d.cts → Input-DMgVyZyq.d.mts}

@@ -1,9 +1,9 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
-import { r as ButtonProps } from "./Button-C_3p5Xfi.cjs";
-import { n as InputSizes, t as InputMixinProps } from "./input-BkzqXwn7.cjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-DLxPxo7T.mjs";
+import { r as ButtonProps } from "./Button-Vd5O4DUp.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-Bv5fKt5J.mjs";
+import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
 
 //#region components/Input/Input.d.ts
 declare const ClearButton: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {
@@ -39,7 +39,7 @@ interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, Omit<InputMix
   /**
    * Icon to render to the left of the input field.
    *
-   * Import icon from `@persona-id/icons`. Use 24px for `lg` input size.
+   * Import icon from `@persona/icons`. Use 24px for `lg` input size.
    */
   leftIcon?: ReactNode;
   /**
@@ -62,4 +62,4 @@ interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, Omit<InputMix
 declare const InputGroup: _$react.ForwardRefExoticComponent<InputGroupProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { InputProps as a, InputGroupProps as i, Input as n, InputGroup as r, ClearButton as t };
-//# sourceMappingURL=Input-CEcTvtX2.d.cts.map
+//# sourceMappingURL=Input-DMgVyZyq.d.mts.map

package/dist/{Input-PWfwMSJ7.mjs → Input-QC6xla6I.mjs}

@@ -1,12 +1,12 @@
 import { isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
-import { n as Button } from "./IconButton-DC4rh6ow.mjs";
-import { n as useFormField, t as FormControlContext } from "./useFormField-eftOPiXj.mjs";
+import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
+import { n as Button } from "./IconButton-P8w0JDI5.mjs";
+import { n as useFormField, t as FormControlContext } from "./useFormField-DhYd6bNn.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
 import { CircleXInverseIcon } from "@persona/icons";
 import { CircleXInverseIcon as CircleXInverseIcon$1 } from "@persona/icons/12px";
 //#region components/Input/Input.tsx
@@ -187,4 +187,4 @@ const InputGroup = forwardRef(function InputGroup({ size = "md", leftIcon, onCle
 //#endregion
 export { Input as n, InputGroup as r, ClearButton as t };
 
-//# sourceMappingURL=Input-PWfwMSJ7.mjs.map
+//# sourceMappingURL=Input-QC6xla6I.mjs.map

package/dist/Input-QC6xla6I.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-QC6xla6I.mjs","names":["SmallCircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n  FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n  display: flex;\n  position: relative;\n  width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes }>`\n  position: absolute;\n  left: ${Spacing[2]};\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  font-size: 0px;\n  color: ${Color.BorderIconSecondary};\n  height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n  width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n  pointer-events: none;\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n  position: absolute;\n  display: flex;\n  gap: ${Spacing[2]};\n  right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n  width: 'icon',\n  variant: 'basic',\n})`\n  background-color: transparent;\n  padding: 0;\n  height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n  width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n  border-radius: ${BorderRadius.Md};\n  color: ${Color.BorderIconSecondary};\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      color: ${Color.BorderIconDisabled};\n    `}\n\n  &${isHovered}${isNotDisabled} {\n    background-color: transparent;\n  }\n\n  svg {\n    height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n    width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n  }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n  position: absolute;\n  right: ${Spacing[2]};\n  top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n  $leftIcon?: ReactNode;\n  $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n  /**\n   * Size of the input. If you need the HTML size attr, use inputSize.\n   */\n  size?: InputSizes;\n\n  /**\n   * `size` HTML attr on `<input>`\n   */\n  inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n  leftIcon?: StyledInputProps['$leftIcon'];\n  hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n  ${inputMixin};\n  line-height: 1;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.color.text.secondary};\n  }\n\n  ${({ $size, $leftIcon, $hasRightItem }) => {\n    let btnSpacing: string;\n    switch ($size) {\n      default:\n      case 'md':\n        btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n        return css`\n          padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n          padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n        `;\n      case 'sm':\n        btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n        return css`\n          padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n          padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n        `;\n    }\n  }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n  ref,\n) {\n  const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n  return (\n    <InputBase\n      $size={size}\n      $leftIcon={leftIcon}\n      $hasRightItem={hasRightItem}\n      ref={ref}\n      id={field.inputId}\n      aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n      aria-errormessage={field.hasError ? field.errorTextId : undefined}\n      aria-invalid={field.hasError}\n      hasWarning={field.hasWarning}\n      hasError={field.hasError}\n      disabled={field.disabled}\n      maxLength={field.maxLength}\n      {...props}\n      size={props.inputSize}\n    />\n  );\n});\n\nexport interface InputGroupProps\n  extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n  /**\n   * Input\n   */\n  children: ReactElement<InputProps>;\n\n  /**\n   * Size of the input. If you need the HTML size attr, use inputSize.\n   */\n  size?: InputSizes;\n\n  /**\n   * Icon to render to the left of the input field.\n   *\n   * Import icon from `@persona/icons`. Use 24px for `lg` input size.\n   */\n  leftIcon?: ReactNode;\n\n  /**\n   * Renders clear button to the right and calls function upon click.\n   */\n  onClear?: MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * Button to be rendered to the right of the input\n   */\n  rightButton?: ReactElement<ButtonProps>;\n\n  /**\n   * Disabled prop will be passed down to `<Input>`\n   */\n  disabled?: boolean;\n\n  /**\n   * Suffix text to be shown to the right of the input (inside the input field)\n   */\n  suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  {\n    size = 'md',\n    leftIcon,\n    onClear,\n    rightButton,\n    children,\n    disabled,\n    hasWarning,\n    hasError,\n    suffix,\n    ...props\n  },\n  ref,\n) {\n  const field = useFormField({ hasWarning, hasError, disabled });\n  const inputButtonContainerRef = useRef<HTMLDivElement>();\n  const [inputPaddingRight, setInputPaddingRight] = useState<string | null>(null);\n\n  const suffixContainerRef = useRef<HTMLDivElement | null>(null);\n  const [suffixPaddingRight, setSuffixPaddingRight] = useState<string | null>(null);\n\n  useEffect(() => {\n    // We only need to calculate padding in presence of the right button\n    if (rightButton && inputButtonContainerRef.current) {\n      setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n    }\n  }, [setInputPaddingRight]);\n\n  useEffect(() => {\n    if (suffix && suffixContainerRef.current) {\n      // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n      setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n    }\n  }, [suffix, setSuffixPaddingRight]);\n\n  const rightButtonStyles: CSSProperties =\n    size === 'sm'\n      ? {\n          height: '18px',\n        }\n      : {};\n\n  return (\n    <FormControlContext.Provider value={field}>\n      <Container ref={ref} {...props}>\n        {leftIcon && <LeftIcon $size={size}>{leftIcon}</LeftIcon>}\n        {cloneElement(children, {\n          size,\n          leftIcon: leftIcon,\n          ...(rightButton ? { rightButton } : {}),\n          hasRightItem: onClear || suffix,\n          style:\n            inputPaddingRight || suffixPaddingRight\n              ? {\n                  paddingRight: inputPaddingRight || suffixPaddingRight,\n                }\n              : {},\n        })}\n\n        {/* Renders only if there's a suffix and NO button */}\n        {/* At some point, this should be moved so that it's not absolutely positioned, and\n        these are both wrapped within an \"input\" container */}\n        {suffix && !(onClear || rightButton) && (\n          <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n            <Paragraph size={size}>{suffix}</Paragraph>\n          </SuffixTextContainer>\n        )}\n\n        {(onClear || rightButton) && ( // TODO: Render only if value is present\n          /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n          <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n            {onClear && (\n              <ClearButton\n                onClick={onClear}\n                disabled={field.disabled}\n                aria-label='Clear'\n                size={size}\n              >\n                {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n              </ClearButton>\n            )}\n            {rightButton &&\n              cloneElement(rightButton, {\n                size: 'sm',\n                width: rightButton.props.width || 'auto',\n                style: rightButtonStyles,\n              })}\n          </InputButtonContainer>\n        )}\n      </Container>\n    </FormControlContext.Provider>\n  );\n});\n\nexport default Input;\n"],"mappings":"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"}

package/dist/Input.d.mts

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-4KeYlOWM.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-DMgVyZyq.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/{InputProps-DNlik5IZ.d.cts → InputProps-BnjxrdWQ.d.mts}

@@ -1,4 +1,4 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-BkzqXwn7.cjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-Bv5fKt5J.mjs";
 
 //#region types/InputProps.d.ts
 interface InputProps extends Omit<InputMixinProps, '$size'> {
@@ -13,4 +13,4 @@ interface InputProps extends Omit<InputMixinProps, '$size'> {
 }
 //#endregion
 export { InputProps as t };
-//# sourceMappingURL=InputProps-DNlik5IZ.d.cts.map
+//# sourceMappingURL=InputProps-BnjxrdWQ.d.mts.map

package/dist/InputProps.d.mts

@@ -1,2 +1,2 @@
-import { t as InputProps } from "./InputProps-CTLG2Tr0.mjs";
+import { t as InputProps } from "./InputProps-BnjxrdWQ.mjs";
 export { InputProps };

package/dist/IntegerValueControl.d.mts

@@ -0,0 +1,39 @@
+import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/DataTable/TableControls/FiltersV2/value-controls/IntegerValueControl/IntegerValueControl.d.ts
+type IntegerValueControlProps = ValueControlProps;
+/**
+ * Integer-typed value control for the Filter UI v2 popover.
+ *
+ * Used for `integer` fields with operators `is` / `is_not`. The popover
+ * renders nothing when the operator is valueless (`is_empty` /
+ * `is_not_empty`). Range operators are not part of the current numeric
+ * field vocabulary.
+ *
+ * The control accepts any numeric input but always emits an integer via
+ * `onChange`. We truncate (rather than round) so that typing `3` -> `3.` -> `3.7`
+ * does not jump to `4` mid-typing; the wire-format value follows `parseInt`
+ * semantics, matching common backend integer-coercion behavior.
+ *
+ * `isFocused` ref guards the external-value sync effect: while the user
+ * is actively typing, an external value change (which we ourselves
+ * triggered by emitting `onChange`) must NOT clobber the local display
+ * string. Without this guard, typing `3` -> emits `3` -> external value
+ * becomes `3` -> the sync effect resets local back to `'3'`, which
+ * looks fine until you type `-` to clear and the sync races against
+ * the user's next keystroke.
+ *
+ * `onChange` is debounced (300ms) to avoid committing on every keystroke;
+ * the debounce flushes on blur and on unmount so no pending value is lost.
+ */
+declare const IntegerValueControl: ({
+  field,
+  operator,
+  value,
+  onChange,
+  ariaLabel
+}: IntegerValueControlProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { IntegerValueControl, IntegerValueControl as default, IntegerValueControlProps };
+//# sourceMappingURL=IntegerValueControl.d.mts.map

package/dist/LayoutLoadingShimmer.d.mts

@@ -0,0 +1,20 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region layouts/LayoutLoadingShimmer/LayoutLoadingShimmer.d.ts
+declare const DataTableShimmer: () => _$react_jsx_runtime0.JSX.Element;
+/**
+ * Render a single full-width card with a loading state mimicking a DataTable.
+ */
+declare const IndexViewLayoutShimmer: () => _$react_jsx_runtime0.JSX.Element;
+/**
+ * Render `cards.length` full-width cards of the specified height in a loading state.
+ */
+declare const SimpleLayoutShimmer: ({
+  cards
+}: {
+  cards?: number[];
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const ShowViewLayoutShimmer: () => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer };
+//# sourceMappingURL=LayoutLoadingShimmer.d.mts.map

package/dist/Link.d.mts

@@ -1,6 +1,6 @@
-import { AnchorHTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { LinkProps as LinkProps$1 } from "react-router-dom";
+import { AnchorHTMLAttributes, ReactNode } from "react";
 
 //#region components/Link/Link.d.ts
 type Target = '_blank' | '_self' | '_parent' | '_top';

package/dist/{ListBox-DZIAlPbc.d.mts → ListBox-D09N1a5D.d.mts}

@@ -1,9 +1,9 @@
-import { r as ButtonProps } from "./Button-DXsYU5qU.mjs";
-import { l as MenuItemProps } from "./Menu-BJ5c7HGD.mjs";
-import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+import { r as ButtonProps } from "./Button-Vd5O4DUp.mjs";
+import { l as MenuItemProps } from "./Menu-Bv8dsrz6.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react_aria_components0 from "react-aria-components";
 import { GridList, GridListItem, Header } from "react-aria-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
 
 //#region components/ListBox/ListBox.d.ts
 interface ListBoxContextValue {
@@ -61,6 +61,10 @@ interface ListBoxProps<T extends object> extends Omit<ComponentPropsWithoutRef<t
    * Size of the list box.
    */
   size?: 'sm' | 'md';
+  /**
+   * Caps the list height and scrolls vertically inside the bordered container.
+   */
+  maxHeight?: number | string;
 }
 declare const ListBox: {
   <T extends object>({
@@ -75,6 +79,7 @@ declare const ListBox: {
     size,
     reorderConfig,
     items,
+    maxHeight,
     ...props
   }: PropsWithChildren<ListBoxProps<T>>): _$react_jsx_runtime0.JSX.Element;
   Item: ({
@@ -135,4 +140,4 @@ interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem>
 }
 //#endregion
 export { useListBoxContext as i, ListBoxItemProps as n, ListBoxProps as r, ListBox as t };
-//# sourceMappingURL=ListBox-DZIAlPbc.d.mts.map
+//# sourceMappingURL=ListBox-D09N1a5D.d.mts.map

package/dist/{ListBox-CDNOJmvz.mjs → ListBox-TrL3Tb7X.mjs}

@@ -1,20 +1,21 @@
 import { isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
+import { n as Stack } from "./Stack-Bl54WmhY.mjs";
 import { HeadlessAriaButton } from "./lib/HeadlessAriaButton.mjs";
 import { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Stack } from "./Stack-ckRN7LrP.mjs";
-import { n as Button$1, t as IconButton } from "./IconButton-DC4rh6ow.mjs";
-import { t as FormGroupContext } from "./useFormGroup-BMukAMAd.mjs";
-import { o as MenuHeading, r as ListItem } from "./Menu-CVuFAxl2.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-cnkoGc7C.mjs";
-import { s as Popover_default } from "./Popover-D0QY5f-J.mjs";
-import { t as Container } from "./FormControl-ArDcvmir.mjs";
+import { n as Button$1, t as IconButton } from "./IconButton-P8w0JDI5.mjs";
+import { o as MenuHeading, r as ListItem } from "./Menu-DmeMgN-i.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-D25WBCah.mjs";
+import { t as FormGroupContext } from "./useFormGroup-DWVW7A9f.mjs";
+import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer } from "./Sticker-CyGb9dEu.mjs";
+import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
+import { t as Container } from "./FormControl-CFU9uKF7.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DropIndicator, GridList, GridListItem, Header, ListBoxSection, useDragAndDrop } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { DragIcon } from "@persona/icons";
 import { MoreIcon as MoreIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
 import uniqueId from "lodash/fp/uniqueId.js";
@@ -35,6 +36,11 @@ const StyledListBox = styled(GridList)`
   border: 1px solid ${Color.BorderDivider};
   padding: ${Spacing[1]};
 
+  ${({ $maxHeight }) => $maxHeight != null && css`
+      max-height: ${typeof $maxHeight === "number" ? `${$maxHeight}px` : $maxHeight};
+      overflow-y: auto;
+    `}
+
   ${({ fullWidth }) => !fullWidth && css`
       width: 204px;
     `}
@@ -57,7 +63,7 @@ const ListBoxEmptyStateButton = styled(ListBoxEmptyState)`
     cursor: pointer;
   }
 `;
-const ListBox = ({ children, onAdd, onDelete, emptyText, deleteDisabled, selectedKeys, onSelectionChange, editable = true, size = "md", reorderConfig, items, ...props }) => {
+const ListBox$1 = ({ children, onAdd, onDelete, emptyText, deleteDisabled, selectedKeys, onSelectionChange, editable = true, size = "md", reorderConfig, items, maxHeight, ...props }) => {
 	const listBoxRef = useRef(null);
 	const listBoxId = useMemo(() => uniqueId("listbox-"), []);
 	const rowDropdownId = `${listBoxId}-row-dropdown`;
@@ -120,6 +126,7 @@ const ListBox = ({ children, onAdd, onDelete, emptyText, deleteDisabled, selecte
 				}),
 				selectedKeys,
 				$size: size,
+				$maxHeight: maxHeight,
 				items,
 				...itemHasActionsOrDelete && { shouldSelectOnPressUp: true },
 				...reorderConfig && { dragAndDropHooks },
@@ -356,10 +363,78 @@ const ListBoxHeader = (props) => {
 		...props
 	});
 };
-ListBox.Item = ListBoxItem;
-ListBox.Section = ListBoxSection;
-ListBox.Header = ListBoxHeader;
+ListBox$1.Item = ListBoxItem;
+ListBox$1.Section = ListBoxSection;
+ListBox$1.Header = ListBoxHeader;
+//#endregion
+//#region components/ListBox/LogicRow.tsx
+const LogicRowSticker = styled(Sticker)`
+  display: inline;
+  height: initial;
+
+  ${StickerContainer}, ${StickerContentContainer}, ${StyledTruncatedText} {
+    display: inline;
+  }
+`;
+const LogicListBoxItem = styled(ListBox$1.Item)`
+  padding: 0;
+
+  &[data-selected],
+  &[data-selected]${isFocused}, &[data-selected]:focus,
+  &[data-selected]${isHovered}, &[data-selected]:hover,
+  &[data-selected]:not(:disabled)${isHovered}, &[data-selected]:not(:disabled):hover {
+    color: ${Color.TextPrimary};
+
+    ${LogicRowSticker} {
+      background-color: ${Color.BackgroundLabelPurple};
+    }
+  }
+
+  &:hover:not([data-selected]) {
+    ${LogicRowSticker} {
+      background-color: ${Color.BackgroundLabelGreyHover};
+    }
+  }
+`;
+const LogicRuleContainer = styled.div`
+  display: grid;
+  grid-template-columns: ${({ $hideCondition }) => $hideCondition ? "repeat(3, min-content)" : "32px repeat(3, min-content)"};
+  grid-gap: 6px;
+  align-items: baseline;
+  padding: ${Spacing[1]};
+  width: 100%;
+  ${({ $size }) => $size === "md" ? Typography.TextMedium : Typography.TextSmall}
+`;
+const LogicRow = ({ condition, attributeName, operator, matchLevelName, editable = true, id, onDelete, dropdownHeadingText, dropdownFormFields, size, hideCondition = false, ...listBoxItemProps }) => {
+	return /* @__PURE__ */ jsx(LogicListBoxItem, {
+		id,
+		disabled: !editable,
+		onDelete,
+		dropdownHeadingText,
+		dropdownFormFields,
+		...listBoxItemProps,
+		size,
+		children: /* @__PURE__ */ jsxs(LogicRuleContainer, {
+			$hideCondition: hideCondition,
+			$size: size,
+			children: [!hideCondition && (condition || "\xA0"), attributeName && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(LogicRowSticker, {
+					disabled: !editable,
+					children: attributeName
+				}),
+				operator,
+				matchLevelName && /* @__PURE__ */ jsx(LogicRowSticker, {
+					disabled: !editable,
+					children: matchLevelName
+				})
+			] })]
+		})
+	});
+};
+//#endregion
+//#region components/ListBox/index.ts
+const ListBox = Object.assign(ListBox$1, { LogicRow });
 //#endregion
 export { useListBoxContext as n, ListBox as t };
 
-//# sourceMappingURL=ListBox-CDNOJmvz.mjs.map
+//# sourceMappingURL=ListBox-TrL3Tb7X.mjs.map