@persona/design-system 0.1.6 → 0.1.8

package/dist/{Input-DQS-BEym.cjs → Input-OJPQ07TW.cjs}

@@ -1,14 +1,14 @@
 const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
 const require_mixins_input = require("./mixins/input.cjs");
-const require_Text = require("./Text-CzN0DOXV.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_useFormField = require("./useFormField-BpYf3CAW.cjs");
+const require_Text = require("./Text-G9QmYf0P.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_useFormField = require("./useFormField-BZlArnsI.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let _persona_icons = require("@persona/icons");
 let _persona_icons_12px = require("@persona/icons/12px");
 //#region components/Input/Input.tsx
@@ -206,4 +206,4 @@ Object.defineProperty(exports, "InputGroup", {
 	}
 });
 
-//# sourceMappingURL=Input-DQS-BEym.cjs.map
+//# sourceMappingURL=Input-OJPQ07TW.cjs.map

package/dist/{Input-DQS-BEym.cjs.map → Input-OJPQ07TW.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Input-DQS-BEym.cjs","names":["Spacing","Color","Button","BorderRadius","isHovered","isNotDisabled","inputMixin","useFormField","FormControlContext","Paragraph","SmallCircleXInverseIcon","CircleXInverseIcon"],"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-id/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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"}
+{"version":3,"file":"Input-OJPQ07TW.cjs","names":["Spacing","Color","Button","BorderRadius","isHovered","isNotDisabled","inputMixin","useFormField","FormControlContext","Paragraph","SmallCircleXInverseIcon","CircleXInverseIcon"],"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-id/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.cts

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-XppkvfUf.cjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-BM0DzWEf.cjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

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-DW7oacjc.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-BPClVzwD.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

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

@@ -1,4 +1,4 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-Bm_anD8X.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-7rEMxBED.d.cts.map
+//# sourceMappingURL=InputProps-BnjxrdWQ.d.mts.map

package/dist/{InputProps-DQpb2_E3.d.mts → InputProps-CoVNpQSj.d.cts}

@@ -1,4 +1,4 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-FEaQ66an.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-DPB0cX2m.cjs";
 
 //#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-DQpb2_E3.d.mts.map
+//# sourceMappingURL=InputProps-CoVNpQSj.d.cts.map

package/dist/InputProps.d.cts

@@ -1,2 +1,2 @@
-import { t as InputProps } from "./InputProps-7rEMxBED.cjs";
+import { t as InputProps } from "./InputProps-CoVNpQSj.cjs";
 export { InputProps };

package/dist/InputProps.d.mts

@@ -1,2 +1,2 @@
-import { t as InputProps } from "./InputProps-DQpb2_E3.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.cts

@@ -0,0 +1,20 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#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.cts.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-B4uoo_PT.cjs → ListBox-BP1eaG7L.cjs}

@@ -1,22 +1,23 @@
 const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
 const require_mixins_text = require("./mixins/text.cjs");
+const require_Stack = require("./Stack-UeifHn3c.cjs");
 const require_lib_HeadlessAriaButton = require("./lib/HeadlessAriaButton.cjs");
 const require_lib_reorderItems = require("./lib/reorderItems.cjs");
 const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Stack = require("./Stack-BF-9YjA1.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_useFormGroup = require("./useFormGroup-DQJdKaL9.cjs");
-const require_Menu = require("./Menu-BLbEcodU.cjs");
-const require_DropdownMenu = require("./DropdownMenu-CeqZAxjs.cjs");
-const require_Popover = require("./Popover-jHZICnQt.cjs");
-const require_FormControl = require("./FormControl-DjxkL5Ft.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_Menu = require("./Menu-t2q8NrV0.cjs");
+const require_DropdownMenu = require("./DropdownMenu-DnlQqTjs.cjs");
+const require_useFormGroup = require("./useFormGroup-Bmnzgq0S.cjs");
+const require_Sticker = require("./Sticker-CIoseh9f.cjs");
+const require_Popover = require("./Popover-BzgMAhsX.cjs");
+const require_FormControl = require("./FormControl-MkBXuUF6.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+let react = require("react");
 let _persona_icons = require("@persona/icons");
 let _persona_icons_12px = require("@persona/icons/12px");
 let lodash_fp_uniqueId_js = require("lodash/fp/uniqueId.js");
@@ -60,7 +61,7 @@ const ListBoxEmptyStateButton = (0, styled_components.default)(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, ...props }) => {
 	const listBoxRef = (0, react.useRef)(null);
 	const listBoxId = (0, react.useMemo)(() => (0, lodash_fp_uniqueId_js.default)("listbox-"), []);
 	const rowDropdownId = `${listBoxId}-row-dropdown`;
@@ -305,7 +306,7 @@ const ListBoxItem = ({ children, actions, onDelete, size, dropdownHeadingText, d
 					}),
 					align: "start",
 					portal: true,
-					children: actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+					children: actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
 						...action,
 						onClick: action.onClick,
 						size: effectiveSize,
@@ -359,9 +360,77 @@ const ListBoxHeader = (props) => {
 		...props
 	});
 };
-ListBox.Item = ListBoxItem;
-ListBox.Section = react_aria_components.ListBoxSection;
-ListBox.Header = ListBoxHeader;
+ListBox$1.Item = ListBoxItem;
+ListBox$1.Section = react_aria_components.ListBoxSection;
+ListBox$1.Header = ListBoxHeader;
+//#endregion
+//#region components/ListBox/LogicRow.tsx
+const LogicRowSticker = (0, styled_components.default)(require_Sticker.Sticker)`
+  display: inline;
+  height: initial;
+
+  ${require_Sticker.StickerContainer}, ${require_Sticker.StickerContentContainer}, ${require_Sticker.StyledTruncatedText} {
+    display: inline;
+  }
+`;
+const LogicListBoxItem = (0, styled_components.default)(ListBox$1.Item)`
+  padding: 0;
+
+  &[data-selected],
+  &[data-selected]${require_lib_pseudoClass.isFocused}, &[data-selected]:focus,
+  &[data-selected]${require_lib_pseudoClass.isHovered}, &[data-selected]:hover,
+  &[data-selected]:not(:disabled)${require_lib_pseudoClass.isHovered}, &[data-selected]:not(:disabled):hover {
+    color: ${_persona_design_tokens.Color.TextPrimary};
+
+    ${LogicRowSticker} {
+      background-color: ${_persona_design_tokens.Color.BackgroundLabelPurple};
+    }
+  }
+
+  &:hover:not([data-selected]) {
+    ${LogicRowSticker} {
+      background-color: ${_persona_design_tokens.Color.BackgroundLabelGreyHover};
+    }
+  }
+`;
+const LogicRuleContainer = styled_components.default.div`
+  display: grid;
+  grid-template-columns: ${({ $hideCondition }) => $hideCondition ? "repeat(3, min-content)" : "32px repeat(3, min-content)"};
+  grid-gap: 6px;
+  align-items: baseline;
+  padding: ${_persona_design_tokens.Spacing[1]};
+  width: 100%;
+  ${({ $size }) => $size === "md" ? _persona_design_tokens.Typography.TextMedium : _persona_design_tokens.Typography.TextSmall}
+`;
+const LogicRow = ({ condition, attributeName, operator, matchLevelName, editable = true, id, onDelete, dropdownHeadingText, dropdownFormFields, size, hideCondition = false, ...listBoxItemProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogicListBoxItem, {
+		id,
+		disabled: !editable,
+		onDelete,
+		dropdownHeadingText,
+		dropdownFormFields,
+		...listBoxItemProps,
+		size,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LogicRuleContainer, {
+			$hideCondition: hideCondition,
+			$size: size,
+			children: [!hideCondition && (condition || "\xA0"), attributeName && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogicRowSticker, {
+					disabled: !editable,
+					children: attributeName
+				}),
+				operator,
+				matchLevelName && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogicRowSticker, {
+					disabled: !editable,
+					children: matchLevelName
+				})
+			] })]
+		})
+	});
+};
+//#endregion
+//#region components/ListBox/index.ts
+const ListBox = Object.assign(ListBox$1, { LogicRow });
 //#endregion
 Object.defineProperty(exports, "ListBox", {
 	enumerable: true,
@@ -376,4 +445,4 @@ Object.defineProperty(exports, "useListBoxContext", {
 	}
 });
 
-//# sourceMappingURL=ListBox-B4uoo_PT.cjs.map
+//# sourceMappingURL=ListBox-BP1eaG7L.cjs.map

package/dist/ListBox-BP1eaG7L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox-BP1eaG7L.cjs","names":["GridList","paragraphMixins","Color","BorderRadius","Spacing","DropIndicator","ListBox","findIndexByKey","moveItemByIndex","Stack","Button","ListItem","isNotDisabled","isHovered","isFocused","HeadlessAriaButton","Typography","FormControlContainer","GridListItem","DragIcon","DropdownMenu","IconButton","MoreIcon","XIcon","Popover","Z_INDICES","FormGroupContext","MenuHeading","Header","Section","Sticker","StickerContainer","StickerContentContainer","StyledTruncatedText","ListBox","isFocused","isHovered","Color","Spacing","Typography","BaseListBox"],"sources":["../components/ListBox/ListBox.tsx","../components/ListBox/LogicRow.tsx","../components/ListBox/index.ts"],"sourcesContent":["import uniqueId from 'lodash/fp/uniqueId';\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  DropIndicator,\n  type DroppableCollectionReorderEvent,\n  GridList,\n  GridListItem,\n  Header,\n  ListBoxSection as Section,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons';\nimport { MoreIcon, XIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps, IconButton } from 'design-system/components/Button';\nimport { FormGroupContext } from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { Container as FormControlContainer } from 'design-system/components/FormControl';\nimport { ListItem, MenuHeading, type MenuItemProps } from 'design-system/components/Menu';\nimport Popover from 'design-system/components/Popover/Popover';\nimport Stack from 'design-system/components/Stack';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { findIndexByKey, moveItemByIndex } from 'design-system/lib/reorderItems';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\n// Context for sharing ListBox configuration with child items\ninterface ListBoxContextValue {\n  size: 'sm' | 'md';\n  listBoxId: string;\n  setItemHasActionsOrDelete: (value: boolean) => void;\n}\n\nconst ListBoxContext = createContext<ListBoxContextValue | null>(null);\n\n/**\n * Hook to access ListBox context values (like size) from child components\n */\nexport const useListBoxContext = () => {\n  return useContext(ListBoxContext);\n};\n\nexport interface ListBoxProps<T extends object> extends Omit<\n  ComponentPropsWithoutRef<typeof GridList<T>>,\n  'slot' | 'autoFocus' | 'orientation' | 'shouldFocusWrap' | 'dragAndDropHooks' | 'layout'\n> {\n  /**\n   * Called when \"Add\" button is clicked. Only renders \"Add\" button if this prop is present.\n   */\n  onAdd?: ButtonProps['onClick'];\n\n  /**\n   * Called when \"Delete\" button is clicked. Only renders \"Delete\" button if this prop is present.\n   */\n  onDelete?: (selectedKeys: ListBoxProps<T>['selectedKeys']) => void;\n\n  /**\n   * Whether or not delete button should be disabled.\n   */\n  deleteDisabled?: boolean;\n\n  /**\n   * Whether or not the Add/Delete buttons should be shown.\n   */\n  editable?: boolean;\n\n  /**\n   * Text to display if no options are available.\n   */\n  emptyText?: string;\n\n  /**\n   * Whether or not to expand the box to the full width of the container.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * When provided, enables drag and drop functionality.\n   */\n  reorderConfig?: {\n    /**\n     * Called when items are reordered via drag and drop. Receives the reordered\n     * array of items when an item is dropped.\n     */\n    onReorder: (reorderedItems: T[]) => void;\n    /**\n     * The name of the property on the item that was passed as the key to\n     * `ListBox.Item`. For exanple, if the item is`{ id: '1', name: 'First Item' }`,\n     * and you passed ListBox.Item `key={item.id}`, then the `itemKeyPath`\n     * should be `'id'`.\n     */\n    itemKeyPath: string;\n  };\n\n  /**\n   * Size of the list box.\n   */\n  size?: 'sm' | 'md';\n}\n\nconst StyledListBox = styled(GridList)<{ fullWidth?: boolean; $size?: 'sm' | 'md' }>`\n  ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n  box-sizing: border-box;\n  background: ${Color.BackgroundPrimary};\n  border-radius: ${BorderRadius.Md};\n  border: 1px solid ${Color.BorderDivider};\n  padding: ${Spacing[1]};\n\n  ${({ fullWidth }) =>\n    !fullWidth &&\n    css`\n      width: 204px;\n    `}\n`;\n\nconst StyledDropIndicator = styled(DropIndicator)`\n  height: 2px;\n  background: ${({ theme }) => theme.color.text.brand};\n`;\n\nconst ListBoxEmptyState = styled.button<{ $size?: 'sm' | 'md' }>`\n  ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n  background-color: transparent;\n  outline: none;\n  border: none;\n  padding: ${Spacing[1]};\n  color: ${Color.TextSecondary};\n`;\n\nconst ListBoxEmptyStateButton = styled(ListBoxEmptyState)`\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nexport const ListBox = <T extends object>({\n  children,\n  onAdd,\n  onDelete,\n  emptyText,\n  deleteDisabled,\n  selectedKeys,\n  onSelectionChange,\n  editable = true,\n  size = 'md',\n  reorderConfig,\n  items,\n  ...props\n}: PropsWithChildren<ListBoxProps<T>>) => {\n  const listBoxRef = useRef<HTMLDivElement>(null);\n  const listBoxId = useMemo(() => uniqueId('listbox-'), []);\n  const rowDropdownId = `${listBoxId}-row-dropdown`;\n  const [itemHasActionsOrDelete, setItemHasActionsOrDelete] = useState(false);\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    getItems: (keys) =>\n      Array.from(keys).map((key) => ({\n        'text/plain': String(key),\n      })),\n    getAllowedDropOperations: () => ['move'],\n    onReorder: (e: DroppableCollectionReorderEvent) => {\n      if (!reorderConfig || !items) {\n        return;\n      }\n      const { onReorder, itemKeyPath } = reorderConfig;\n      if (!onReorder || !itemKeyPath) {\n        return;\n      }\n\n      const draggedKey = Array.from(e.keys)[0];\n      if (draggedKey == null) {\n        return;\n      }\n\n      const itemsArr = Array.from(items);\n      const fromIndex = findIndexByKey(itemsArr, itemKeyPath, String(draggedKey));\n      const targetIndex = findIndexByKey(itemsArr, itemKeyPath, String(e.target.key));\n      if (fromIndex === -1 || targetIndex === -1) {\n        return;\n      }\n\n      // After removing the dragged item, a target that sat after it shifts down by one.\n      const targetIndexAfterRemoval = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;\n      const toIndex =\n        e.target.dropPosition === 'before' ? targetIndexAfterRemoval : targetIndexAfterRemoval + 1;\n\n      onReorder(moveItemByIndex(itemsArr, fromIndex, toIndex));\n    },\n    renderDropIndicator: (target) => <StyledDropIndicator target={target} />,\n  });\n\n  // If row dropdowns are open, deselect items (which also closes the dropdown) when clicking outside the ListBox\n  const handleOutsideClick = useCallback(\n    (event: MouseEvent) => {\n      const rowDropdownIsOpen = document.querySelector(\n        `[id=\"${rowDropdownId}\"][data-state=\"open\"]`,\n      );\n      if (!rowDropdownIsOpen) {\n        return;\n      }\n\n      const target = event.target as HTMLElement;\n      const isOutsideListBox = listBoxRef.current && !listBoxRef.current.contains(target);\n      const isOnRowDropdownContent = target.closest(`[id=\"${rowDropdownId}\"]`);\n\n      // Only deselect if:\n      // 1. Click is outside the ListBox\n      // 2. Click is not on popover content\n      // 3. There are selected items\n      // 4. onSelectionChange is available (to allow deselection)\n      if (\n        isOutsideListBox &&\n        !isOnRowDropdownContent &&\n        selectedKeys != null &&\n        selectedKeys !== 'all' &&\n        Array.from(selectedKeys).length > 0 &&\n        onSelectionChange\n      ) {\n        // Deselect all items when clicking outside (but not on popover content)\n        onSelectionChange(new Set());\n      }\n    },\n    [selectedKeys, onSelectionChange, rowDropdownId],\n  );\n\n  // Set up outside click listener\n  useEffect(() => {\n    document.addEventListener('mousedown', handleOutsideClick);\n    return () => {\n      document.removeEventListener('mousedown', handleOutsideClick);\n    };\n  }, [handleOutsideClick]);\n\n  return (\n    <ListBoxContext.Provider value={{ size, listBoxId, setItemHasActionsOrDelete }}>\n      <Stack spacing={Spacing[1]}>\n        <StyledListBox\n          ref={listBoxRef}\n          onSelectionChange={onSelectionChange}\n          renderEmptyState={() =>\n            onAdd ? (\n              <ListBoxEmptyStateButton as='button' onClick={onAdd} $size={size}>\n                {emptyText || 'Click to add an option'}\n              </ListBoxEmptyStateButton>\n            ) : (\n              <ListBoxEmptyState type='button' $size={size}>\n                {emptyText || 'No options.'}\n              </ListBoxEmptyState>\n            )\n          }\n          selectedKeys={selectedKeys}\n          $size={size}\n          items={items}\n          // Without this, clicking delete triggers item selection (on press down)\n          // before the delete/action callback fires (on click/press up)\n          {...(itemHasActionsOrDelete && { shouldSelectOnPressUp: true })}\n          {...(reorderConfig && { dragAndDropHooks })}\n          {...props}\n        >\n          {children}\n        </StyledListBox>\n        {editable && (onAdd || onDelete) && (\n          <Stack direction='horizontal' spacing={Spacing[1]}>\n            {onAdd && (\n              <Button size='sm' variant='basic' width='auto' onClick={onAdd}>\n                Add\n              </Button>\n            )}\n            {onDelete && (\n              <Button\n                size='sm'\n                variant='basic'\n                width='auto'\n                onClick={() => onDelete?.(selectedKeys)}\n                disabled={deleteDisabled || selectedKeys == null}\n              >\n                Delete\n              </Button>\n            )}\n          </Stack>\n        )}\n      </Stack>\n    </ListBoxContext.Provider>\n  );\n};\n\nconst IconButtonWidth = 16;\nconst BackgroundFadeWidth = parseInt(Spacing[3]);\n\nconst RowActionsContainer = styled('div')`\n  width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth + parseInt(Spacing[2])}px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  height: 100%;\n  padding-right: ${Spacing[2]};\n  display: flex;\n  align-items: center;\n  justify-content: end;\n`;\n\nconst StyledItem = styled(ListItem)<{\n  $hasActions?: boolean;\n  $hasDelete?: boolean;\n}>`\n  position: relative;\n  padding: ${Spacing[1]} ${Spacing[2]};\n  overflow: hidden;\n  white-space: nowrap;\n\n  ${RowActionsContainer} {\n    background: linear-gradient(\n      to right,\n      transparent,\n      ${Color.BackgroundPrimary} ${BackgroundFadeWidth}px\n    );\n  }\n\n  // If both actions and delete are present or only delete is present, hide actions by default, show on hover\n  ${({ $hasActions, $hasDelete }) =>\n    (($hasActions && $hasDelete) || (!$hasActions && $hasDelete)) &&\n    css`\n      ${RowActionsContainer} {\n        opacity: 0;\n      }\n    `}\n\n  // increase the width of the row actions container when both actions and delete are present\n  ${({ $hasActions, $hasDelete }) =>\n    $hasActions &&\n    $hasDelete &&\n    css`\n      ${RowActionsContainer} {\n        width: ${\n          BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth * 2 + parseInt(Spacing[2])\n        }px;\n      }\n    `}\n\n  &${isNotDisabled}${isHovered}:not([data-selected], [data-dragging]),\n  &${isNotDisabled}${isFocused}:not([data-selected], [data-dragging]),\n  &[data-hovered]:not([data-selected], [data-dragging]) {\n    cursor: pointer;\n    color: ${({ theme }) => theme.color.text.primary};\n    background-color: ${Color.BackgroundSecondary};\n\n    ${RowActionsContainer} {\n      opacity: 1;\n      background: linear-gradient(\n        to right,\n        transparent,\n        ${Color.BackgroundSecondary} ${BackgroundFadeWidth}px\n      );\n    }\n  }\n\n  &[data-selected],\n  &[data-selected]${isFocused}, &[data-selected]:focus,\n  &${isNotDisabled}${isHovered}[data-selected] {\n    outline: none;\n    color: ${({ theme }) => theme.color.text.brand};\n    background-color: ${({ theme }) => theme.color.background.highlight};\n\n    ${RowActionsContainer} {\n      opacity: 1;\n      background: linear-gradient(\n        to right,\n        transparent,\n        ${({ theme }) => theme.color.background.highlight} ${BackgroundFadeWidth}px\n      );\n    }\n  }\n\n  &[data-dragging] {\n    opacity: 0.5;\n    background-color: ${Color.BackgroundPrimary};\n  }\n\n  .react-aria-Section:not(:first-child) {\n    margin-top: ${Spacing[1]};\n  }\n`;\n\nconst ContentContainer = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\n// The drag handle wraps a 16x16 icon in an HTML <button>. Without this, the\n// button inherits the row's line-height and the icon aligns to the text\n// baseline, leaving a descender gap below it — so the icon visually sits\n// above the row's center. Making the button itself a flex container forces\n// the icon to be centered within the button's box.\nconst DragHandle = styled(HeadlessAriaButton)`\n  display: flex;\n  align-items: center;\n`;\n\nconst TextContent = styled.span`\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst DropdownPopoverHeading = styled.div<{ $size: 'sm' | 'md' }>`\n  ${({ $size }) => ($size === 'md' ? Typography.TextMediumBold : Typography.TextSmallBold)};\n  border-bottom: 1px solid ${Color.BorderHairline};\n  padding: ${Spacing[2]} ${Spacing[3]} ${Spacing[1]};\n`;\n\nconst DropdownPopoverContent = styled(Stack)`\n  min-width: var(--radix-popover-trigger-width);\n  padding: ${Spacing[3]};\n\n  ${FormControlContainer} {\n    min-width: 0;\n  }\n`;\n\nconst DropdownPopoverFooter = styled.div`\n  border-top: 1px solid ${Color.BorderHairline};\n  padding: ${Spacing[1]};\n`;\n\nexport interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem> {\n  /**\n   * Actions to display in a dropdown menu.\n   * Supports all props from `MenuItem`.\n   */\n  actions?: Array<\n    {\n      label: string;\n      onClick: () => void;\n    } & Omit<MenuItemProps, 'children'>\n  >;\n\n  /**\n   * Called when the delete (X) icon is clicked. Only renders item-level delete icon if this prop is present.\n   * Receives the item's id and the click event as parameters.\n   */\n  onDelete?: (id: string | number, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /**\n   * Size of the list box item.\n   */\n  size?: 'sm' | 'md';\n\n  /**\n   * Form fields to be rendered inside a row dropdown popover.\n   * The configField prop will be set to true for all fields via FormGroupContext.\n   * Dropdown will be opened when the item is selected.\n   */\n  dropdownFormFields?: ReactNode;\n\n  /**\n   * Content to be rendered inside the row dropdown popover.\n   * Dropdown will be opened when the item is selected.\n   */\n  dropdownContent?: ReactNode;\n\n  /**\n   * Optional heading text to display in the row dropdown popover.\n   * Either dropdownFormFields or dropdownContent must also be provided,\n   * otherwise the dropdown will not be rendered.\n   */\n  dropdownHeadingText?: string;\n\n  /**\n   * Footer to be rendered inside the row dropdown popover.\n   * Either dropdownFormFields or dropdownContent must also be provided,\n   * otherwise the dropdown will not be rendered.\n   */\n  dropdownFooter?: ReactNode;\n}\n\nconst ListBoxItem = ({\n  children,\n  actions,\n  onDelete,\n  size,\n  dropdownHeadingText,\n  dropdownFormFields,\n  dropdownContent,\n  dropdownFooter,\n  ...props\n}: ListBoxItemProps) => {\n  const context = useListBoxContext();\n  // Use explicit prop if provided, otherwise fall back to context value, then default to 'md'\n  const effectiveSize = size ?? context?.size ?? 'md';\n\n  // Update context if this item has actions or onDelete\n  useEffect(() => {\n    if (context && (actions || onDelete)) {\n      context.setItemHasActionsOrDelete(true);\n    }\n  }, [context, actions, onDelete]);\n\n  // Only render dropdown if there are form fields or content provided, not if there's just a header or footer.\n  const shouldRenderDropdown = dropdownFormFields || dropdownContent;\n\n  const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {\n    // avoid triggering row selection\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (onDelete && props.id != null) {\n      onDelete(props.id, e);\n    }\n  };\n\n  return (\n    <StyledItem\n      as={GridListItem}\n      $hasActions={actions && actions.length > 0}\n      $hasDelete={!!onDelete}\n      textValue={typeof children === 'string' ? children : undefined}\n      size={effectiveSize}\n      {...props}\n    >\n      {({ isSelected, allowsDragging }) => {\n        const contentWithDragHandle = (\n          <ContentContainer>\n            {allowsDragging && (\n              <DragHandle slot='drag' aria-label='Drag to reorder'>\n                <DragIcon />\n              </DragHandle>\n            )}\n            {typeof children === 'string' || typeof children === 'number' ? (\n              <TextContent>{children}</TextContent>\n            ) : (\n              children\n            )}\n            {(onDelete || actions) && (\n              <RowActionsContainer>\n                {actions && (\n                  <DropdownMenu\n                    trigger={\n                      <IconButton aria-label='Actions'>\n                        <MoreIcon />\n                      </IconButton>\n                    }\n                    align='start'\n                    portal\n                  >\n                    {actions.map((action) => (\n                      <DropdownMenu.Item\n                        key={action.label}\n                        {...action}\n                        onClick={action.onClick}\n                        size={effectiveSize}\n                      >\n                        {action.label}\n                      </DropdownMenu.Item>\n                    ))}\n                  </DropdownMenu>\n                )}\n                {onDelete && (\n                  <IconButton aria-label='Delete' onClick={handleDelete}>\n                    <XIcon />\n                  </IconButton>\n                )}\n              </RowActionsContainer>\n            )}\n          </ContentContainer>\n        );\n\n        return shouldRenderDropdown ? (\n          <Popover trigger={contentWithDragHandle} open={isSelected}>\n            <Popover.Card\n              id={`${context?.listBoxId}-row-dropdown`}\n              noPadding\n              style={{ zIndex: Z_INDICES.modalDropdown }}\n            >\n              {dropdownHeadingText && (\n                <DropdownPopoverHeading $size={effectiveSize}>\n                  {dropdownHeadingText}\n                </DropdownPopoverHeading>\n              )}\n              {dropdownFormFields && (\n                <DropdownPopoverContent spacing={Spacing[2]}>\n                  <FormGroupContext.Provider\n                    value={{\n                      configField: true,\n                      labelTooltipZIndex: Z_INDICES.modalDropdownTooltip,\n                    }}\n                  >\n                    {dropdownFormFields}\n                  </FormGroupContext.Provider>\n                </DropdownPopoverContent>\n              )}\n              {dropdownContent && (\n                <DropdownPopoverContent spacing={Spacing[3]}>\n                  {dropdownContent}\n                </DropdownPopoverContent>\n              )}\n              {dropdownFooter && <DropdownPopoverFooter>{dropdownFooter}</DropdownPopoverFooter>}\n            </Popover.Card>\n          </Popover>\n        ) : (\n          contentWithDragHandle\n        );\n      }}\n    </StyledItem>\n  );\n};\n\nconst StyledMenuHeading = styled(MenuHeading)`\n  padding: ${Spacing[1]} ${Spacing[2]};\n`;\n\nconst ListBoxHeader = (props: ComponentPropsWithoutRef<typeof Header>) => {\n  return <StyledMenuHeading as={Header} {...props} />;\n};\n\nListBox.Item = ListBoxItem;\n\nListBox.Section = Section;\n\nListBox.Header = ListBoxHeader;\n\nexport default ListBox;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport Sticker, {\n  StickerContainer,\n  StickerContentContainer,\n  StyledTruncatedText,\n} from 'design-system/components/Sticker';\nimport { isFocused, isHovered } from 'design-system/lib/pseudoClass';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nimport ListBox, { type ListBoxItemProps } from './ListBox';\n\nconst LogicRowSticker = styled(Sticker)`\n  display: inline;\n  height: initial;\n\n  ${StickerContainer}, ${StickerContentContainer}, ${StyledTruncatedText} {\n    display: inline;\n  }\n`;\n\nconst LogicListBoxItem = styled(ListBox.Item)`\n  padding: 0;\n\n  &[data-selected],\n  &[data-selected]${isFocused}, &[data-selected]:focus,\n  &[data-selected]${isHovered}, &[data-selected]:hover,\n  &[data-selected]:not(:disabled)${isHovered}, &[data-selected]:not(:disabled):hover {\n    color: ${Color.TextPrimary};\n\n    ${LogicRowSticker} {\n      background-color: ${Color.BackgroundLabelPurple};\n    }\n  }\n\n  &:hover:not([data-selected]) {\n    ${LogicRowSticker} {\n      background-color: ${Color.BackgroundLabelGreyHover};\n    }\n  }\n`;\n\nconst LogicRuleContainer = styled.div<{ $hideCondition?: boolean; $size?: InputSizes }>`\n  display: grid;\n  grid-template-columns: ${({ $hideCondition }) =>\n    $hideCondition ? 'repeat(3, min-content)' : '32px repeat(3, min-content)'};\n  grid-gap: 6px;\n  align-items: baseline;\n  padding: ${Spacing[1]};\n  width: 100%;\n  ${({ $size }) => ($size === 'md' ? Typography.TextMedium : Typography.TextSmall)}\n`;\n\nexport interface LogicRowProps extends ListBoxItemProps {\n  condition: string;\n  attributeName?: string;\n  operator?: string;\n  matchLevelName?: string;\n  editable?: boolean;\n  id: string | number;\n  dropdownHeadingText?: string;\n  /** Form fields rendered inside the row dropdown. */\n  dropdownFormFields?: ReactNode;\n  size?: InputSizes;\n  /**\n   * Removes the condition column when the surrounding group already communicates\n   * the conjunction.\n   */\n  hideCondition?: boolean;\n}\n\nconst LogicRow = ({\n  condition,\n  attributeName,\n  operator,\n  matchLevelName,\n  editable = true,\n  id,\n  onDelete,\n  dropdownHeadingText,\n  dropdownFormFields,\n  size,\n  hideCondition = false,\n  ...listBoxItemProps\n}: LogicRowProps) => {\n  return (\n    <LogicListBoxItem\n      id={id}\n      disabled={!editable}\n      onDelete={onDelete}\n      dropdownHeadingText={dropdownHeadingText}\n      dropdownFormFields={dropdownFormFields}\n      {...listBoxItemProps}\n      size={size}\n    >\n      <LogicRuleContainer $hideCondition={hideCondition} $size={size}>\n        {!hideCondition && (condition || '\\u00A0')}\n        {attributeName && (\n          <>\n            <LogicRowSticker disabled={!editable}>{attributeName}</LogicRowSticker>\n            {operator}\n            {matchLevelName && (\n              <LogicRowSticker disabled={!editable}>{matchLevelName}</LogicRowSticker>\n            )}\n          </>\n        )}\n      </LogicRuleContainer>\n    </LogicListBoxItem>\n  );\n};\n\nexport default LogicRow;\n","import BaseListBox, { useListBoxContext } from './ListBox';\nimport LogicRow from './LogicRow';\n\nconst ListBox = Object.assign(BaseListBox, { LogicRow });\n\nexport { ListBox, useListBoxContext };\nexport type { ListBoxProps, ListBoxItemProps } from './ListBox';\nexport type { LogicRowProps } from './LogicRow';\n\nexport default ListBox;\n"],"mappings":"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"}

package/dist/{ListBox-B7sbubm5.mjs → ListBox-BwID8jpk.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-z0epBxXn.mjs";
-import { o as MenuHeading, r as ListItem, s as MenuItem } from "./Menu-BbSyWxFD.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-cN_AnKAT.mjs";
-import { s as Popover_default } from "./Popover-D4_aqKlm.mjs";
-import { t as Container } from "./FormControl-fK4HA_yF.mjs";
+import { n as Button$1, t as IconButton } from "./IconButton-CIWiEsS-.mjs";
+import { o as MenuHeading, r as ListItem } from "./Menu-CPYXo61N.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-DGYexb7s.mjs";
+import { t as FormGroupContext } from "./useFormGroup-DWVW7A9f.mjs";
+import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer } from "./Sticker-DbqKLe33.mjs";
+import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
+import { t as Container } from "./FormControl-B28qa7aQ.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";
@@ -57,7 +58,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, ...props }) => {
 	const listBoxRef = useRef(null);
 	const listBoxId = useMemo(() => uniqueId("listbox-"), []);
 	const rowDropdownId = `${listBoxId}-row-dropdown`;
@@ -302,7 +303,7 @@ const ListBoxItem = ({ children, actions, onDelete, size, dropdownHeadingText, d
 					}),
 					align: "start",
 					portal: true,
-					children: actions.map((action) => /* @__PURE__ */ jsx(MenuItem, {
+					children: actions.map((action) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 						...action,
 						onClick: action.onClick,
 						size: effectiveSize,
@@ -356,10 +357,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-B7sbubm5.mjs.map
+//# sourceMappingURL=ListBox-BwID8jpk.mjs.map