@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-internal.1f9ae9a

package/dist/elements/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Fragment","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Link","Popup","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","_jsxs","_jsx","className","show","Button","props","id","type","ariaLabel","buttonStyle","disabled","el","enableSubMenu","extraButtonProps","iconPosition","iconStyle","margin","newTab","onClick","onMouseDown","ref","round","size","SubMenuPopupContent","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","undefined","onPointerEnter","onPointerLeave","rel","target","title","buttonElement","href","prefetch","Tag","button","buttonSize","horizontalAlign","noBackground","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Link } from '../Link/index.js'\nimport { Popup } from '../Popup/index.js'\nimport './index.scss'\nimport { Tooltip } from '../Tooltip/index.js'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button: React.FC<Props> = (props) => {\n  const {\n    id,\n    type = 'button',\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    enableSubMenu,\n    extraButtonProps = {},\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    margin = true,\n    newTab,\n    onClick,\n    onMouseDown,\n    ref,\n    round,\n    size = 'medium',\n    SubMenuPopupContent,\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n    !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n    !margin && `${baseClass}--no-margin`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) {\n      event.preventDefault()\n    }\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const styleClasses = [\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseDown: !disabled ? onMouseDown : undefined,\n    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n    title: ariaLabel,\n    ...extraButtonProps,\n  }\n\n  let buttonElement\n\n  switch (el) {\n    case 'anchor':\n      buttonElement = (\n        <a\n          {...buttonProps}\n          href={!disabled ? url : undefined}\n          ref={ref as React.RefObject<HTMLAnchorElement>}\n        >\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n      break\n\n    case 'link':\n      if (disabled) {\n        buttonElement = (\n          <div {...buttonProps}>\n            <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n              {children}\n            </ButtonContents>\n          </div>\n        )\n      }\n\n      buttonElement = (\n        <Link {...buttonProps} href={to || url} prefetch={false}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n      break\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      buttonElement = (\n        <Tag ref={ref} {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n      break\n  }\n  if (SubMenuPopupContent) {\n    return (\n      <div className={styleClasses}>\n        {buttonElement}\n        <Popup\n          button={<ChevronIcon />}\n          buttonSize={size}\n          className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}\n          disabled={disabled && !enableSubMenu}\n          horizontalAlign=\"right\"\n          id={`${id}-popup`}\n          noBackground\n          render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n          size=\"large\"\n          verticalAlign=\"bottom\"\n        />\n      </div>\n    )\n  }\n\n  return buttonElement\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","Fragment","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SpinnerIcon","SwapIcon","WriteIcon","XIcon","Link","Popup","Tooltip","icons","chevron","edit","link","plus","swap","write","x","baseClass","ButtonContents","children","icon","loading","showTooltip","tooltip","BuiltInIcon","undefined","isReactIcon","_jsxs","_jsx","className","show","size","Button","props","id","type","ariaLabel","buttonStyle","disabled","el","enableSubMenu","extraButtonProps","iconPosition","margin","newTab","onClick","onMouseDown","popupIconSize","ref","round","selected","SubMenuPopupContent","to","url","setShowTooltip","useState","isDisabled","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","onPointerEnter","onPointerLeave","rel","target","title","buttonElement","href","prefetch","Tag","button","buttonSize","horizontalAlign","noBackground","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SpinnerIcon } from '../../icons/Spinner/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { WriteIcon } from '../../icons/Write/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Link } from '../Link/index.js'\nimport { Popup } from '../Popup/index.js'\nimport './index.css'\nimport { Tooltip } from '../Tooltip/index.js'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  write: WriteIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, loading, showTooltip, tooltip }) => {\n  const BuiltInIcon = typeof icon === 'string' ? icons[icon] : undefined\n  // Check if icon is a React element (including RSC payloads) - not a string icon name\n  const isReactIcon = icon && typeof icon !== 'string'\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {loading && (\n        <span className={`${baseClass}__loading`}>\n          <SpinnerIcon />\n        </span>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isReactIcon && icon}\n            {BuiltInIcon && <BuiltInIcon size={24} />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button: React.FC<Props> = (props) => {\n  const {\n    id,\n    type = 'button',\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    enableSubMenu,\n    extraButtonProps = {},\n    icon,\n    iconPosition = 'right',\n    loading,\n    margin = true,\n    newTab,\n    onClick,\n    onMouseDown,\n    popupIconSize,\n    ref,\n    round,\n    selected,\n    size = 'medium',\n    SubMenuPopupContent,\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  // Explicit `=== true` check preserves `false` for aria-disabled attribute.\n  // Using `disabled || loading` would treat `false` as falsy, omitting the attribute entirely.\n  const isDisabled = disabled === true || loading === true\n\n  const classes = [\n    baseClass,\n    className && className,\n    icon && `${baseClass}--icon`,\n    icon && !children && `${baseClass}--icon-only`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n    !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n    !margin && `${baseClass}--no-margin`,\n    loading && `${baseClass}--loading`,\n    icon && !children && `${baseClass}--icon-only`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) {\n      event.preventDefault()\n    }\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const styleClasses = [\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    isDisabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    selected && `${baseClass}--selected`,\n    SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': isDisabled,\n    'aria-label': ariaLabel,\n    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n    disabled: isDisabled,\n    onClick: !isDisabled ? handleClick : undefined,\n    onMouseDown: !isDisabled ? onMouseDown : undefined,\n    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n    title: tooltip ? undefined : ariaLabel,\n    ...extraButtonProps,\n  }\n\n  let buttonElement\n\n  switch (el) {\n    case 'anchor':\n      buttonElement = (\n        <a\n          {...buttonProps}\n          href={!isDisabled ? url : undefined}\n          ref={ref as React.RefObject<HTMLAnchorElement>}\n        >\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n      break\n\n    case 'link':\n      if (isDisabled) {\n        buttonElement = (\n          <div {...buttonProps}>\n            <ButtonContents\n              icon={icon}\n              loading={loading}\n              showTooltip={showTooltip}\n              tooltip={tooltip}\n            >\n              {children}\n            </ButtonContents>\n          </div>\n        )\n      }\n\n      buttonElement = (\n        <Link {...buttonProps} href={to || url} prefetch={false}>\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n      break\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      buttonElement = (\n        <Tag ref={ref} {...buttonProps}>\n          <ButtonContents icon={icon} loading={loading} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n      break\n  }\n  if (SubMenuPopupContent) {\n    return (\n      <div className={styleClasses}>\n        {buttonElement}\n        <Popup\n          button={<ChevronIcon size={popupIconSize} />}\n          buttonSize={size}\n          className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}\n          disabled={disabled && !enableSubMenu}\n          horizontalAlign=\"right\"\n          id={`${id}-popup`}\n          noBackground\n          render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n          size=\"small\"\n          verticalAlign=\"bottom\"\n        />\n      </div>\n    )\n  }\n\n  return buttonElement\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Button/types.d.ts

@@ -7,7 +7,7 @@ type secondaryAction = {
 export type Props = {
     'aria-label'?: string;
     buttonId?: string;
-    buttonStyle?: 'dashed' | 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'subtle' | 'tab' | 'transparent';
+    buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary';
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
@@ -19,18 +19,20 @@ export type Props = {
     extraButtonProps?: Record<string, any>;
     icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode;
     iconPosition?: 'left' | 'right';
-    iconStyle?: 'none' | 'with-border' | 'without-border';
     id?: string;
     /**
-     * @deprecated
-     * This prop is deprecated and will be removed in the next major version.
-     * Components now import their own `Link` directly from `next/link`.
+     * Shows a loading spinner and hides content. Disables interactions.
      */
-    Link?: React.ElementType;
+    loading?: boolean;
     margin?: boolean;
     newTab?: boolean;
     onClick?: (event: MouseEvent) => void;
     onMouseDown?: (event: MouseEvent) => void;
+    /**
+     * Size of the chevron icon in the split-button popup trigger.
+     * @default 24
+     */
+    popupIconSize?: 16 | 24;
     /**
      * Enables form submission via an onClick handler. This is only needed if
      * type="submit" does not trigger form submission, e.g. if the button DOM
@@ -42,7 +44,11 @@ export type Props = {
     ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>;
     round?: boolean;
     secondaryActions?: secondaryAction | secondaryAction[];
-    size?: 'large' | 'medium' | 'small' | 'xsmall';
+    /**
+     * Applies selected/active styling (e.g., for popup triggers when popup is open)
+     */
+    selected?: boolean;
+    size?: 'large' | 'medium';
     SubMenuPopupContent?: (props: {
         close: () => void;
     }) => React.ReactNode;

package/dist/elements/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EACR,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,QAAQ,GACR,KAAK,GACL,aAAa,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAA;IACnF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;IACvB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}

package/dist/elements/Button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n  label: string\n  onClick: (event: MouseEvent) => void\n}\n\nexport type Props = {\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?:\n    | 'dashed'\n    | 'error'\n    | 'icon-label'\n    | 'none'\n    | 'pill'\n    | 'primary'\n    | 'secondary'\n    | 'subtle'\n    | 'tab'\n    | 'transparent'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  /**\n   * Setting to `true` will allow the submenu to be opened when the button is disabled\n   */\n  enableSubMenu?: boolean\n  extraButtonProps?: Record<string, any>\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  iconStyle?: 'none' | 'with-border' | 'without-border'\n  id?: string\n  /**\n   * @deprecated\n   * This prop is deprecated and will be removed in the next major version.\n   * Components now import their own `Link` directly from `next/link`.\n   */\n  Link?: React.ElementType\n  margin?: boolean\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  onMouseDown?: (event: MouseEvent) => void\n  /**\n   * Enables form submission via an onClick handler. This is only needed if\n   * type=\"submit\" does not trigger form submission, e.g. if the button DOM\n   * element is not a direct child of the form element.\n   *\n   * @default false\n   */\n  programmaticSubmit?: boolean\n  ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>\n  round?: boolean\n  secondaryActions?: secondaryAction | secondaryAction[]\n  size?: 'large' | 'medium' | 'small' | 'xsmall'\n  SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAQA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n  label: string\n  onClick: (event: MouseEvent) => void\n}\n\nexport type Props = {\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  /**\n   * Setting to `true` will allow the submenu to be opened when the button is disabled\n   */\n  enableSubMenu?: boolean\n  extraButtonProps?: Record<string, any>\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  id?: string\n  /**\n   * Shows a loading spinner and hides content. Disables interactions.\n   */\n  loading?: boolean\n  margin?: boolean\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  onMouseDown?: (event: MouseEvent) => void\n  /**\n   * Size of the chevron icon in the split-button popup trigger.\n   * @default 24\n   */\n  popupIconSize?: 16 | 24\n  /**\n   * Enables form submission via an onClick handler. This is only needed if\n   * type=\"submit\" does not trigger form submission, e.g. if the button DOM\n   * element is not a direct child of the form element.\n   *\n   * @default false\n   */\n  programmaticSubmit?: boolean\n  ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>\n  round?: boolean\n  secondaryActions?: secondaryAction | secondaryAction[]\n  /**\n   * Applies selected/active styling (e.g., for popup triggers when popup is open)\n   */\n  selected?: boolean\n  size?: 'large' | 'medium'\n  SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAQA","ignoreList":[]}

package/dist/elements/Card/index.css

@@ -0,0 +1,68 @@
+@layer payload-default {
+  .card {
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-2-5) var(--spacer-3);
+    width: 100%;
+    min-height: 4rem;
+    position: relative;
+    border-radius: var(--radius-medium);
+    border: var(--stroke-width-small) solid var(--color-border);
+    display: flex;
+    align-items: stretch;
+    gap: var(--spacer-2);
+  }
+
+  .card__title {
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .card__actions {
+    position: absolute;
+    top: var(--spacer-2);
+    right: var(--spacer-2);
+    z-index: 2;
+    display: inline-flex;
+  }
+
+  .card--has-onclick {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-bg-secondary-hover);
+    }
+
+    &:has(.card__click:active) {
+      background: var(--color-bg-secondary-pressed);
+    }
+  }
+
+  .card__click {
+    z-index: 1;
+    inset: 0;
+    position: absolute;
+    margin: 0;
+    height: auto;
+    width: auto;
+    border-radius: inherit;
+
+    &:hover,
+    &:active,
+    &:hover:not(.btn--disabled),
+    &:active:not(.btn--disabled) {
+      background-color: transparent;
+    }
+
+    &:focus-visible {
+      outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+      outline-offset: 0;
+    }
+  }
+}

package/dist/elements/Card/index.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type Props = {
     actions?: React.ReactNode;
     buttonAriaLabel?: string;
     href?: string;
     id?: string;
-    /**
-     * @deprecated
-     * This prop is deprecated and will be removed in the next major version.
-     * Components now import their own `Link` directly from `next/link`.
-     */
-    Link?: React.ElementType;
     onClick?: () => void;
     title: string;
     titleAs?: React.ElementType;

package/dist/elements/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAC5B,CAAA;AAID,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyBhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAC5B,CAAA;AAID,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyBhC,CAAA"}

package/dist/elements/Card/index.js

@@ -3,7 +3,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button } from '../Button/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'card';
 export const Card = props => {
   const {
@@ -23,17 +23,17 @@ export const Card = props => {
     children: [/*#__PURE__*/_jsx(Tag, {
       className: `${baseClass}__title`,
       children: title
-    }), actions && /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__actions`,
-      children: actions
     }), (onClick || href) && /*#__PURE__*/_jsx(Button, {
       "aria-label": buttonAriaLabel,
-      buttonStyle: "none",
+      buttonStyle: "ghost",
       className: `${baseClass}__click`,
       el: "link",
       onClick: onClick,
       to: href
-    })]
+    }), actions ? /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__actions`,
+      children: actions
+    }) : null]
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Button","baseClass","Card","props","id","actions","buttonAriaLabel","href","onClick","title","titleAs","classes","filter","Boolean","join","Tag","_jsxs","className","_jsx","buttonStyle","el","to"],"sources":["../../../src/elements/Card/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nexport type Props = {\n  actions?: React.ReactNode\n  buttonAriaLabel?: string\n  href?: string\n  id?: string\n  /**\n   * @deprecated\n   * This prop is deprecated and will be removed in the next major version.\n   * Components now import their own `Link` directly from `next/link`.\n   */\n  Link?: React.ElementType\n  onClick?: () => void\n  title: string\n  titleAs?: React.ElementType\n}\n\nconst baseClass = 'card'\n\nexport const Card: React.FC<Props> = (props) => {\n  const { id, actions, buttonAriaLabel, href, onClick, title, titleAs } = props\n\n  const classes = [baseClass, id, (onClick || href) && `${baseClass}--has-onclick`]\n    .filter(Boolean)\n    .join(' ')\n\n  const Tag = titleAs ?? 'div'\n\n  return (\n    <div className={classes} id={id}>\n      <Tag className={`${baseClass}__title`}>{title}</Tag>\n      {actions && <div className={`${baseClass}__actions`}>{actions}</div>}\n      {(onClick || href) && (\n        <Button\n          aria-label={buttonAriaLabel}\n          buttonStyle=\"none\"\n          className={`${baseClass}__click`}\n          el=\"link\"\n          onClick={onClick}\n          to={href}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAkBP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,IAAA,GAAyBC,KAAA;EACpC,MAAM;IAAEC,EAAE;IAAEC,OAAO;IAAEC,eAAe;IAAEC,IAAI;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAO,CAAE,GAAGP,KAAA;EAExE,MAAMQ,OAAA,GAAU,CAACV,SAAA,EAAWG,EAAA,EAAK,CAAAI,OAAA,IAAWD,IAAG,KAAM,GAAGN,SAAA,eAAwB,CAAC,CAC9EW,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,GAAA,GAAML,OAAA,IAAW;EAEvB,oBACEM,KAAA,CAAC;IAAIC,SAAA,EAAWN,OAAA;IAASP,EAAA,EAAIA,EAAA;4BAC3Bc,IAAA,CAACH,GAAA;MAAIE,SAAA,EAAW,GAAGhB,SAAA,SAAkB;gBAAGQ;QACvCJ,OAAA,iBAAWa,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGhB,SAAA,WAAoB;gBAAGI;QACpD,CAAAG,OAAA,IAAWD,IAAG,kBACdW,IAAA,CAAClB,MAAA;MACC,cAAYM,eAAA;MACZa,WAAA,EAAY;MACZF,SAAA,EAAW,GAAGhB,SAAA,SAAkB;MAChCmB,EAAA,EAAG;MACHZ,OAAA,EAASA,OAAA;MACTa,EAAA,EAAId;;;AAKd","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","Button","baseClass","Card","props","id","actions","buttonAriaLabel","href","onClick","title","titleAs","classes","filter","Boolean","join","Tag","_jsxs","className","_jsx","buttonStyle","el","to"],"sources":["../../../src/elements/Card/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nexport type Props = {\n  actions?: React.ReactNode\n  buttonAriaLabel?: string\n  href?: string\n  id?: string\n  onClick?: () => void\n  title: string\n  titleAs?: React.ElementType\n}\n\nconst baseClass = 'card'\n\nexport const Card: React.FC<Props> = (props) => {\n  const { id, actions, buttonAriaLabel, href, onClick, title, titleAs } = props\n\n  const classes = [baseClass, id, (onClick || href) && `${baseClass}--has-onclick`]\n    .filter(Boolean)\n    .join(' ')\n\n  const Tag = titleAs ?? 'div'\n\n  return (\n    <div className={classes} id={id}>\n      <Tag className={`${baseClass}__title`}>{title}</Tag>\n      {(onClick || href) && (\n        <Button\n          aria-label={buttonAriaLabel}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__click`}\n          el=\"link\"\n          onClick={onClick}\n          to={href}\n        />\n      )}\n      {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAYP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,IAAA,GAAyBC,KAAA;EACpC,MAAM;IAAEC,EAAE;IAAEC,OAAO;IAAEC,eAAe;IAAEC,IAAI;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAO,CAAE,GAAGP,KAAA;EAExE,MAAMQ,OAAA,GAAU,CAACV,SAAA,EAAWG,EAAA,EAAK,CAAAI,OAAA,IAAWD,IAAG,KAAM,GAAGN,SAAA,eAAwB,CAAC,CAC9EW,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,GAAA,GAAML,OAAA,IAAW;EAEvB,oBACEM,KAAA,CAAC;IAAIC,SAAA,EAAWN,OAAA;IAASP,EAAA,EAAIA,EAAA;4BAC3Bc,IAAA,CAACH,GAAA;MAAIE,SAAA,EAAW,GAAGhB,SAAA,SAAkB;gBAAGQ;QACtC,CAAAD,OAAA,IAAWD,IAAG,kBACdW,IAAA,CAAClB,MAAA;MACC,cAAYM,eAAA;MACZa,WAAA,EAAY;MACZF,SAAA,EAAW,GAAGhB,SAAA,SAAkB;MAChCmB,EAAA,EAAG;MACHZ,OAAA,EAASA,OAAA;MACTa,EAAA,EAAId;QAGPF,OAAA,gBAAUa,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGhB,SAAA,WAAoB;gBAAGI;SAAiB;;AAG5E","ignoreList":[]}

package/dist/elements/Chip/index.css

@@ -0,0 +1,184 @@
+@layer payload-default {
+  .chip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    border-radius: var(--button-radius);
+    border: var(--stroke-width-small) solid var(--color-border);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--text-default);
+    background-color: var(--color-bg);
+    user-select: none;
+
+    &:has(.chip__action:focus-visible) {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
+  }
+
+  /* Variant: Default (neutral grey) */
+  .chip--variant-default {
+    background-color: var(--color-bg);
+    border-color: var(--color-border);
+
+    &:has(.chip__action:hover) {
+      background-color: var(--color-bg-hover);
+    }
+
+    &:has(.chip__action:active) {
+      background-color: var(--color-bg-pressed);
+    }
+  }
+
+  /* Variant: Warning (orange/yellow) */
+  .chip--variant-warning {
+    background-color: var(--color-bg-warning-tertiary);
+    border-color: var(--color-border-warning);
+
+    &:has(.chip__action:hover) {
+      background-color: var(--color-bg-warning-tertiary-hover);
+    }
+
+    &:has(.chip__action:active) {
+      background-color: var(--color-bg-warning-pressed);
+    }
+  }
+
+  /* Variant: Success (green) */
+  .chip--variant-success {
+    background-color: var(--color-bg-success-tertiary);
+    border-color: var(--color-border-success);
+
+    &:has(.chip__action:hover) {
+      background-color: var(--color-bg-success-tertiary-hover);
+    }
+
+    &:has(.chip__action:active) {
+      background-color: var(--color-bg-success-pressed);
+    }
+  }
+
+  /* Variant: Danger (red) */
+  .chip--variant-danger {
+    background-color: var(--color-bg-danger-tertiary);
+    border-color: var(--color-border-danger);
+
+    &:has(.chip__action:hover) {
+      background-color: var(--color-bg-danger-tertiary-hover);
+    }
+
+    &:has(.chip__action:active) {
+      background-color: var(--color-bg-danger-tertiary-pressed);
+    }
+  }
+
+  /* Selected state (blue) - applies on top of any variant */
+  .chip--selected {
+    background-color: var(--color-bg-brand-tertiary);
+    border-color: var(--color-border-brand);
+
+    &:has(.chip__action:hover) {
+      background-color: var(--color-bg-brand-tertiary-hover);
+    }
+
+    &:has(.chip__action:active) {
+      background-color: var(--color-bg-brand-pressed);
+    }
+  }
+
+  .chip--is-dragging {
+    cursor: grabbing;
+    z-index: 10;
+  }
+
+  .chip__action {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: inherit;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .chip--size-medium {
+    height: var(--spacer-4);
+    padding: 0 var(--spacer-2);
+
+    &:has(.chip__remove) {
+      padding-inline-end: 0;
+    }
+
+    &:has(.chip__icon) {
+      padding-inline-start: 0;
+    }
+  }
+
+  .chip--size-large {
+    height: var(--spacer-5);
+    padding: 0 var(--spacer-3);
+
+    &:has(.chip__remove) {
+      padding-inline-end: 0;
+    }
+
+    &:has(.chip__icon) {
+      padding-inline-start: 0;
+    }
+  }
+
+  .chip__icon {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  .chip__label {
+    position: relative;
+    z-index: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+
+  .chip__remove {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    border-radius: var(--radius-small);
+
+    &:hover {
+      background-color: var(--bg-transparent-hover);
+    }
+
+    &:active {
+      background-color: var(--bg-transparent-pressed);
+    }
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
+  }
+}

package/dist/elements/Chip/index.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import './index.css';
+export type ChipVariant = 'danger' | 'default' | 'success' | 'warning';
+export type ChipProps = {
+    'aria-label'?: string;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    elementProps?: {
+        ref?: React.RefCallback<HTMLElement>;
+    } & HTMLAttributes<HTMLElement>;
+    icon?: React.ReactNode;
+    id?: string;
+    onClick?: () => void;
+    onRemove?: () => void;
+    selected?: boolean;
+    size?: 'large' | 'medium';
+    variant?: ChipVariant;
+};
+export declare const Chip: React.FC<ChipProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Chip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAEtE,MAAM,MAAM,SAAS,GAAG;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACrC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAoDpC,CAAA"}

package/dist/elements/Chip/index.js

@@ -0,0 +1,94 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { XIcon } from '../../icons/X/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.css';
+const baseClass = 'chip';
+export const Chip = t0 => {
+  const $ = _c(17);
+  const {
+    id,
+    "aria-label": ariaLabel,
+    children,
+    className,
+    disabled,
+    elementProps,
+    icon,
+    onClick,
+    onRemove,
+    selected,
+    size: t1,
+    variant: t2
+  } = t0;
+  const size = t1 === undefined ? "medium" : t1;
+  const variant = t2 === undefined ? "default" : t2;
+  const {
+    t
+  } = useTranslation();
+  const t3 = `${baseClass}--size-${size}`;
+  const t4 = `${baseClass}--variant-${variant}`;
+  const t5 = selected && `${baseClass}--selected`;
+  let t6;
+  if ($[0] !== className || $[1] !== t3 || $[2] !== t4 || $[3] !== t5) {
+    t6 = [baseClass, t3, t4, t5, className].filter(Boolean);
+    $[0] = className;
+    $[1] = t3;
+    $[2] = t4;
+    $[3] = t5;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  const classes = t6.join(" ");
+  const t7 = elementProps?.ref;
+  let t8;
+  if ($[5] !== ariaLabel || $[6] !== children || $[7] !== classes || $[8] !== disabled || $[9] !== elementProps || $[10] !== icon || $[11] !== id || $[12] !== onClick || $[13] !== onRemove || $[14] !== t || $[15] !== t7) {
+    t8 = _jsxs("div", {
+      ...elementProps,
+      className: classes,
+      id,
+      ref: t7,
+      children: [onClick ? _jsx("button", {
+        "aria-label": ariaLabel,
+        className: `${baseClass}__action`,
+        disabled,
+        onClick,
+        type: "button"
+      }) : null, icon ? _jsx("span", {
+        className: `${baseClass}__icon`,
+        children: icon
+      }) : null, _jsx("span", {
+        className: `${baseClass}__label`,
+        children
+      }), onRemove ? _jsx("button", {
+        "aria-label": t("general:remove"),
+        className: `${baseClass}__remove`,
+        disabled,
+        onClick: onRemove,
+        type: "button",
+        children: _jsx(XIcon, {
+          size: 24
+        })
+      }) : null]
+    });
+    $[5] = ariaLabel;
+    $[6] = children;
+    $[7] = classes;
+    $[8] = disabled;
+    $[9] = elementProps;
+    $[10] = icon;
+    $[11] = id;
+    $[12] = onClick;
+    $[13] = onRemove;
+    $[14] = t;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  return t8;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","XIcon","useTranslation","baseClass","Chip","t0","$","id","ariaLabel","children","className","disabled","elementProps","icon","onClick","onRemove","selected","size","t1","variant","t2","undefined","t","t3","t4","t5","t6","filter","Boolean","classes","join","t7","ref","t8","_jsxs","_jsx","type"],"sources":["../../../src/elements/Chip/index.tsx"],"sourcesContent":["'use client'\nimport type { HTMLAttributes } from 'react'\n\nimport React from 'react'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'chip'\n\nexport type ChipVariant = 'danger' | 'default' | 'success' | 'warning'\n\nexport type ChipProps = {\n  'aria-label'?: string\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  elementProps?: {\n    ref?: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  onRemove?: () => void\n  selected?: boolean\n  size?: 'large' | 'medium'\n  variant?: ChipVariant\n}\n\nexport const Chip: React.FC<ChipProps> = ({\n  id,\n  'aria-label': ariaLabel,\n  children,\n  className,\n  disabled,\n  elementProps,\n  icon,\n  onClick,\n  onRemove,\n  selected,\n  size = 'medium',\n  variant = 'default',\n}) => {\n  const { t } = useTranslation()\n\n  const classes = [\n    baseClass,\n    `${baseClass}--size-${size}`,\n    `${baseClass}--variant-${variant}`,\n    selected && `${baseClass}--selected`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div {...elementProps} className={classes} id={id} ref={elementProps?.ref}>\n      {onClick ? (\n        <button\n          aria-label={ariaLabel}\n          className={`${baseClass}__action`}\n          disabled={disabled}\n          onClick={onClick}\n          type=\"button\"\n        />\n      ) : null}\n      {icon ? <span className={`${baseClass}__icon`}>{icon}</span> : null}\n      <span className={`${baseClass}__label`}>{children}</span>\n      {onRemove ? (\n        <button\n          aria-label={t('general:remove')}\n          className={`${baseClass}__remove`}\n          disabled={disabled}\n          onClick={onRemove}\n          type=\"button\"\n        >\n          <XIcon size={24} />\n        </button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ClipboardAction/ClipboardActionLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardActionLabel.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/ClipboardActionLabel.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,wBAG9B;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,gCAiBA,CAAA"}
+{"version":3,"file":"ClipboardActionLabel.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/ClipboardActionLabel.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,GAAI,qBAGlC;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,gCAiBA,CAAA"}

package/dist/elements/ClipboardAction/ClipboardActionLabel.js

@@ -3,8 +3,8 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
+import { ClipboardIcon } from '../../icons/Clipboard/index.js';
 import { CopyIcon } from '../../icons/Copy/index.js';
-import { EditIcon } from '../../icons/Edit/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 export const ClipboardActionLabel = t0 => {
   const $ = _c(4);
@@ -30,7 +30,7 @@ export const ClipboardActionLabel = t0 => {
       }
     }
     t1 = _jsxs(Fragment, {
-      children: [isPaste ? _jsx(EditIcon, {}) : _jsx(CopyIcon, {}), " ", label]
+      children: [isPaste ? _jsx(ClipboardIcon, {}) : _jsx(CopyIcon, {}), " ", label]
     });
     $[0] = isPaste;
     $[1] = isRow;

package/dist/elements/ClipboardAction/ClipboardActionLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardActionLabel.js","names":["c","_c","Fragment","CopyIcon","EditIcon","useTranslation","ClipboardActionLabel","t0","$","isPaste","isRow","t","t1","label","_jsxs","children","_jsx"],"sources":["../../../src/elements/ClipboardAction/ClipboardActionLabel.tsx"],"sourcesContent":["'use client'\n\nimport { Fragment } from 'react'\n\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const ClipboardActionLabel = ({\n  isPaste,\n  isRow,\n}: {\n  isPaste?: boolean\n  isRow?: boolean\n}) => {\n  const { t } = useTranslation()\n\n  let label = t('general:copyField')\n  if (!isRow && isPaste) {\n    label = t('general:pasteField')\n  } else if (isRow && !isPaste) {\n    label = t('general:copyRow')\n  } else if (isRow && isPaste) {\n    label = t('general:pasteRow')\n  }\n\n  return (\n    <Fragment>\n      {isPaste ? <EditIcon /> : <CopyIcon />} {label}\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,QAAQ,QAAQ;AAEzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,oBAAA,GAAuBC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,OAAA;IAAAC;EAAA,IAAAH,EAMpC;EACC;IAAAI;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,KAAA,IAAAF,CAAA,QAAAG,CAAA;IAEd,IAAAE,KAAA,GAAYF,CAAA,CAAE;IAAA,IACV,CAACD,KAAA,IAASD,OAAA;MACZI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;IAAV;MAAA,IACSD,KAAA,KAAUD,OAAA;QACnBI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;MAAV;QAAA,IACSD,KAAA,IAASD,OAAA;UAClBI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;QAAV;MAAA;IAAA;IAIAC,EAAA,GAAAE,KAAA,CAAAZ,QAAA;MAAAa,QAAA,GACGN,OAAA,GAAUO,IAAA,CAAAZ,QAAA,IAAC,IAAcY,IAAA,CAAAb,QAAA,IAAC,GAAY,KAAEU,KAAA;IAAA,C;;;;;;;;SAD3CD,E;CAIJ","ignoreList":[]}
+{"version":3,"file":"ClipboardActionLabel.js","names":["c","_c","Fragment","ClipboardIcon","CopyIcon","useTranslation","ClipboardActionLabel","t0","$","isPaste","isRow","t","t1","label","_jsxs","children","_jsx"],"sources":["../../../src/elements/ClipboardAction/ClipboardActionLabel.tsx"],"sourcesContent":["'use client'\n\nimport { Fragment } from 'react'\n\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const ClipboardActionLabel = ({\n  isPaste,\n  isRow,\n}: {\n  isPaste?: boolean\n  isRow?: boolean\n}) => {\n  const { t } = useTranslation()\n\n  let label = t('general:copyField')\n  if (!isRow && isPaste) {\n    label = t('general:pasteField')\n  } else if (isRow && !isPaste) {\n    label = t('general:copyRow')\n  } else if (isRow && isPaste) {\n    label = t('general:pasteRow')\n  }\n\n  return (\n    <Fragment>\n      {isPaste ? <ClipboardIcon /> : <CopyIcon />} {label}\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,QAAQ,QAAQ;AAEzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,oBAAA,GAAuBC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,OAAA;IAAAC;EAAA,IAAAH,EAMpC;EACC;IAAAI;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,KAAA,IAAAF,CAAA,QAAAG,CAAA;IAEd,IAAAE,KAAA,GAAYF,CAAA,CAAE;IAAA,IACV,CAACD,KAAA,IAASD,OAAA;MACZI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;IAAV;MAAA,IACSD,KAAA,KAAUD,OAAA;QACnBI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;MAAV;QAAA,IACSD,KAAA,IAASD,OAAA;UAClBI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;QAAV;MAAA;IAAA;IAIAC,EAAA,GAAAE,KAAA,CAAAZ,QAAA;MAAAa,QAAA,GACGN,OAAA,GAAUO,IAAA,CAAAb,aAAA,IAAC,IAAmBa,IAAA,CAAAZ,QAAA,IAAC,GAAY,KAAES,KAAA;IAAA,C;;;;;;;;SADhDD,E;CAIJ","ignoreList":[]}

package/dist/elements/ClipboardAction/index.css

@@ -0,0 +1,8 @@
+@layer payload-default {
+  .clipboard-action__button.popup-button--active,
+  .clipboard-action__button.popup-button--active:hover,
+  .clipboard-action__button.popup-button--active:active {
+    background: var(--color-bg-selected);
+    color: var(--color-icon-selected);
+  }
+}

package/dist/elements/ClipboardAction/index.d.ts

@@ -1,6 +1,7 @@
 import type { FormStateWithoutComponents } from 'payload';
 import { type FC } from 'react';
 import type { ClipboardCopyData, OnPasteFn } from './types.js';
+import './index.css';
 type Props = {
     allowCopy?: boolean;
     allowPaste?: boolean;