@persona/design-system 0.1.5-pre.4

package/dist/Card2.d.mts

@@ -0,0 +1,96 @@
+import { t as SectionHeading } from "./SectionHeading-QvAmhVmD.mjs";
+import * as _$styled_components0 from "styled-components";
+import { ComponentProps, FC, ReactNode } from "react";
+
+//#region components/CardV2/Card.d.ts
+declare const CardContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const _default: FC<{
+  /**
+   * Optional footer to render at the bottom of the card. Footer content is rendered as a
+   * paragraph with the items separated by a dot.
+   */
+  footer?: ReactNode[];
+  /**
+   * Optional arbitrary footer content to render as-is.
+   */
+  footerContent?: ReactNode;
+  /**
+   * Whether the card heading and footer are sticky.
+   */
+  sticky?: boolean;
+  /**
+   * Force the card to render in an errored state. Errors bubbling up from children will also
+   * render the errored state.
+   */
+  errored?: boolean;
+  /**
+   * Props for the errored state.
+   */
+  erroredProps?: {
+    /**
+     * Message to render in the errored state.
+     */
+    message?: string;
+    /**
+     * Callback to handle errors. Note this callback is only called when the error is bubbled up
+     * from children, not when `errored` is set to true.
+     */
+    onError?: (error: Error) => void;
+  };
+  containerProps?: ComponentProps<typeof CardContainer>;
+  /**
+   * Whether the card should render its content with 100% height. This is a bit of a hack for cards
+   * that want full control of their content and don't use sections.
+   */
+  fullHeight?: boolean;
+} & Pick<{
+  children?: ReactNode;
+  isTopSection: boolean;
+  heading?: Pick<ComponentProps<typeof SectionHeading>, "title" | "actions" | "menuActions" | "headerActionsRowContent" | "sticker" | "leftDecorativeIcon" | "headingProps">;
+  footer?: ReactNode[];
+  footerContent?: ReactNode;
+  collapsible?: boolean;
+  sticky?: boolean;
+  defaultCollapsed?: boolean;
+  loading?: boolean;
+  loadingProps?: {
+    height?: string;
+  };
+  empty?: boolean;
+  emptyProps?: {
+    message?: string;
+  };
+  fullHeight?: boolean;
+} & {
+  children?: ReactNode | undefined;
+}, "children" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps"> & {
+  children?: ReactNode | undefined;
+}> & {
+  Section: FC<Pick<{
+    children?: ReactNode;
+    isTopSection: boolean;
+    heading?: Pick<ComponentProps<typeof SectionHeading>, "title" | "actions" | "menuActions" | "headerActionsRowContent" | "sticker" | "leftDecorativeIcon" | "headingProps">;
+    footer?: ReactNode[];
+    footerContent?: ReactNode;
+    collapsible?: boolean;
+    sticky?: boolean;
+    defaultCollapsed?: boolean;
+    loading?: boolean;
+    loadingProps?: {
+      height?: string;
+    };
+    empty?: boolean;
+    emptyProps?: {
+      message?: string;
+    };
+    fullHeight?: boolean;
+  } & {
+    children?: ReactNode | undefined;
+  }, "children" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps">>;
+  Stacked: FC<{
+    children: ReactNode[];
+  }>;
+};
+//#endregion
+export { _default as default };
+//# sourceMappingURL=Card2.d.mts.map

package/dist/Checkbox-BWJNAP27.d.mts

@@ -0,0 +1,46 @@
+import * as _$react from "react";
+import { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#region components/Checkbox/Checkbox.d.ts
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {
+  /**
+   * `id` for the underlying `<input>`. If not provided a unique ID is generated
+   * automatically and linked to the label.
+   */
+  id?: string;
+  /** Called whenever the checked state changes. */
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  /** Visible label rendered to the right of the checkbox box. */
+  label?: ReactNode;
+  /** Disables interaction and renders the checkbox in a muted style. */
+  disabled?: boolean;
+  /**
+   * When true the checkbox displays a dash (−) instead of a tick, indicating a
+   * mixed / partially-selected state. Sets `aria-checked="mixed"` for screen readers.
+   */
+  indeterminate?: boolean;
+  /**
+   * Controlled checked state. Omit (or pass `undefined`) to let the component
+   * manage state internally via `defaultChecked`.
+   */
+  checked?: boolean;
+  /** Value submitted with a form. */
+  value?: unknown;
+  'data-test'?: string;
+  /** Additional props forwarded to the outer container `<div>`. */
+  containerProps?: ComponentPropsWithoutRef<'div'>;
+  /**
+   * Size of the checkbox and its label text.
+   * @defaultValue 'md'
+   */
+  size?: 'md' | 'sm';
+  /**
+   * Tooltip content to display when hovering over the label.
+   * When provided, the label will be wrapped in a tooltip.
+   */
+  tooltip?: ReactNode;
+}
+declare const Checkbox: _$react.ForwardRefExoticComponent<CheckboxProps & _$react.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { CheckboxProps as n, Checkbox as t };
+//# sourceMappingURL=Checkbox-BWJNAP27.d.mts.map

package/dist/Checkbox-BmjK0Wac.d.cts

@@ -0,0 +1,46 @@
+import * as _$react from "react";
+import { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#region components/Checkbox/Checkbox.d.ts
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {
+  /**
+   * `id` for the underlying `<input>`. If not provided a unique ID is generated
+   * automatically and linked to the label.
+   */
+  id?: string;
+  /** Called whenever the checked state changes. */
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  /** Visible label rendered to the right of the checkbox box. */
+  label?: ReactNode;
+  /** Disables interaction and renders the checkbox in a muted style. */
+  disabled?: boolean;
+  /**
+   * When true the checkbox displays a dash (−) instead of a tick, indicating a
+   * mixed / partially-selected state. Sets `aria-checked="mixed"` for screen readers.
+   */
+  indeterminate?: boolean;
+  /**
+   * Controlled checked state. Omit (or pass `undefined`) to let the component
+   * manage state internally via `defaultChecked`.
+   */
+  checked?: boolean;
+  /** Value submitted with a form. */
+  value?: unknown;
+  'data-test'?: string;
+  /** Additional props forwarded to the outer container `<div>`. */
+  containerProps?: ComponentPropsWithoutRef<'div'>;
+  /**
+   * Size of the checkbox and its label text.
+   * @defaultValue 'md'
+   */
+  size?: 'md' | 'sm';
+  /**
+   * Tooltip content to display when hovering over the label.
+   * When provided, the label will be wrapped in a tooltip.
+   */
+  tooltip?: ReactNode;
+}
+declare const Checkbox: _$react.ForwardRefExoticComponent<CheckboxProps & _$react.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { CheckboxProps as n, Checkbox as t };
+//# sourceMappingURL=Checkbox-BmjK0Wac.d.cts.map

package/dist/Checkbox-C5bGcb-r.mjs

@@ -0,0 +1,176 @@
+import { isChecked, isDisabled, isFocusedVisible, isHovered, isIndeterminate, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { focusStyle } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
+import { n as Stack } from "./Stack-hwgS2FU1.mjs";
+import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-T7RQpy_a.mjs";
+import useControlled from "./lib/useControlled.mjs";
+import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { InputCheckIcon, InputDashIcon } from "@persona/icons";
+import { uniqueId } from "lodash";
+//#region components/Checkbox/Checkbox.tsx
+const Container = styled(Stack)`
+  position: relative;
+  cursor: pointer;
+
+  flex-wrap: nowrap;
+
+  ${({ size }) => size === "sm" && css`
+      height: 16px;
+    `}
+
+  &${isDisabled} {
+    cursor: default;
+  }
+`;
+const CheckboxBox = styled.div`
+  cursor: pointer;
+  display: flex;
+  flex: 0 0 16px;
+  justify-content: center;
+  align-items: center;
+  transition:
+    box-shadow ${"200ms"},
+    background-color ${"200ms"},
+    border-color ${"200ms"};
+  border-radius: 3px;
+  height: ${Spacing[4]};
+  width: ${Spacing[4]};
+  box-sizing: border-box;
+  border: 1px solid ${Color.BorderInputCheckbox};
+  background: ${Color.BackgroundInputDefault};
+
+  svg {
+    color: ${Color.BorderIconInverse};
+  }
+
+  &${isDisabled} {
+    cursor: default;
+    background: ${Color.BackgroundInputDisabled};
+    border-color: ${Color.BorderInputDisabled};
+  }
+
+  ${({ checked }) => checked && css`
+      border-color: ${Color.BackgroundInputActive};
+      background: ${Color.BackgroundInputActive};
+
+      &${isDisabled} {
+        border-color: ${Color.BackgroundInputActiveDisabled};
+        background: ${Color.BackgroundInputActiveDisabled};
+      }
+    `}
+`;
+const CheckboxInput = styled.input`
+  cursor: inherit;
+  height: 16px;
+  width: 16px;
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+
+  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {
+    border-color: ${Color.BorderInputCheckboxHover};
+  }
+
+  &${isChecked}, &${isIndeterminate} {
+    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {
+      background: ${Color.BackgroundInputActiveHover};
+      border-color: ${Color.BackgroundInputActiveHover};
+    }
+  }
+
+  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {
+    ${focusStyle}
+  }
+`;
+const Label = styled.label`
+  cursor: inherit;
+  color: ${Color.TextPrimary};
+
+  ${({ size }) => size === "sm" ? css`
+          ${Typography.TextSmall};
+          line-height: 16px;
+        ` : css`
+          ${Typography.TextMedium};
+
+          /** Nudge text for visual alignment */
+          position: relative;
+          bottom: -1px;
+        `}
+
+  ${({ theme, disabled }) => disabled && css`
+      cursor: default;
+      color: ${theme.color.text.disabled};
+    `}
+`;
+const Checkbox = forwardRef(function Checkbox({ className, disabled, indeterminate, onChange, checked: checkedProp, defaultChecked, id, label, "data-test": dataTest, containerProps, value, size = "md", tooltip, ...elemProps }, ref) {
+	const field = useFormField({ disabled });
+	const [checked, setChecked] = useControlled({
+		controlledValue: checkedProp,
+		default: defaultChecked
+	});
+	const generatedId = useMemo(() => uniqueId("pds_checkbox__"), []);
+	const inputRef = useRef();
+	const inputId = field.inputId || id || generatedId;
+	useImperativeHandle(ref, () => inputRef.current, [inputRef]);
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+	}, [indeterminate, inputRef]);
+	return /* @__PURE__ */ jsxs(Container, {
+		direction: "horizontal",
+		className,
+		"data-test": dataTest,
+		disabled: field.disabled,
+		align: "center",
+		size,
+		...containerProps,
+		children: [
+			/* @__PURE__ */ jsx(CheckboxInput, {
+				id: inputId,
+				ref: ref || inputRef,
+				"data-test": dataTest && `${dataTest}-input`,
+				disabled: field.disabled,
+				type: "checkbox",
+				checked: checkedProp == null ? void 0 : checked,
+				defaultChecked,
+				onChange: (e) => {
+					setChecked(e.target.checked);
+					if (onChange) onChange(e);
+				},
+				"aria-checked": indeterminate ? "mixed" : checked,
+				value,
+				...elemProps
+			}),
+			/* @__PURE__ */ jsx(CheckboxBox, {
+				"aria-hidden": "true",
+				disabled: field.disabled,
+				checked: checked != null && checked || indeterminate,
+				children: indeterminate ? /* @__PURE__ */ jsx(InputDashIcon, {}) : checked ? /* @__PURE__ */ jsx(InputCheckIcon, {}) : null
+			}),
+			label && (tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+				size,
+				trigger: /* @__PURE__ */ jsx(Label, {
+					htmlFor: inputId,
+					disabled: !!field.disabled,
+					size,
+					children: /* @__PURE__ */ jsx(TextWithDashedUnderline, { children: label })
+				}),
+				children: tooltip
+			}) : /* @__PURE__ */ jsx(Label, {
+				htmlFor: inputId,
+				disabled: !!field.disabled,
+				size,
+				children: label
+			}))
+		]
+	});
+});
+//#endregion
+export { Checkbox as t };
+
+//# sourceMappingURL=Checkbox-C5bGcb-r.mjs.map

package/dist/Checkbox-C5bGcb-r.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-C5bGcb-r.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${Color.BackgroundInputActiveDisabled};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${Color.TextPrimary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={ref || inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAM,YAAY,OAAO,MAAM;;;;;;KAM1B,EAAE,WACH,SAAS,QACT,GAAG;;MAED;;KAED,WAAW;;;;AAKhB,MAAM,cAAc,OAAO,GAA8C;;;;;;;yBAOhC;+BACM;2BACJ;;YAE/B,QAAQ,GAAG;WACZ,QAAQ,GAAG;;sBAEA,MAAM,oBAAoB;gBAChC,MAAM,uBAAuB;;;aAGhC,MAAM,kBAAkB;;;KAGhC,WAAW;;kBAEE,MAAM,wBAAwB;oBAC5B,MAAM,oBAAoB;;;KAGzC,EAAE,cACH,WACA,GAAG;sBACe,MAAM,sBAAsB;oBAC9B,MAAM,sBAAsB;;SAEvC,WAAW;wBACI,MAAM,8BAA8B;sBACtC,MAAM,8BAA8B;;MAEpD;;AAGN,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;KAU7B,YAAY,cAAc,KAAK,YAAY;oBAC5B,MAAM,yBAAyB;;;KAG9C,UAAU,KAAK,gBAAgB;OAC7B,YAAY,cAAc,KAAK,YAAY;oBAC9B,MAAM,2BAA2B;sBAC/B,MAAM,2BAA2B;;;;KAIlD,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;AAIjB,MAAM,QAAQ,OAAO,KAA+C;;WAEzD,MAAM,YAAY;;KAExB,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;;;;;UAKxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AA0CN,MAAa,WAAW,WAA4C,SAAS,SAC3E,EACE,WACA,UACA,eACA,UACA,SAAS,aACT,gBACA,IACA,OACA,aAAa,UACb,gBACA,OACA,OAAO,MACP,SACA,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,CAAC,SAAS,cAAc,cAAc;EAC1C,iBAAiB;EACjB,SAAS;EACV,CAAC;CACF,MAAM,cAAc,cAAc,SAAS,iBAAiB,EAAE,EAAE,CAAC;CACjE,MAAM,WAAW,QAA0B;CAG3C,MAAM,UAAU,MAAM,WAAW,MAAM;AAGvC,qBAAoB,WAAW,SAAS,SAAS,CAAC,SAAS,CAAC;AAE5D,iBAAgB;AACd,MAAI,SAAS,QAEX,UAAS,QAAQ,gBAAgB;IAElC,CAAC,eAAe,SAAS,CAAC;AAE7B,QACE,qBAAC,WAAD;EACE,WAAU;EACC;EACX,aAAW;EACX,UAAU,MAAM;EAChB,OAAM;EACA;EACN,GAAI;YAPN;GASE,oBAAC,eAAD;IACE,IAAI;IAEJ,KAAK,OAAO;IACZ,aAAW,YAAY,GAAG,SAAS;IACnC,UAAU,MAAM;IAChB,MAAK;IACL,SAAS,eAAe,OAAO,KAAA,IAAY;IAC3B;IAChB,WAAW,MAAM;AACf,gBAAW,EAAE,OAAO,QAAQ;AAC5B,SAAI,SACF,UAAS,EAAE;;IAGf,gBAAc,gBAAgB,UAAU;IACjC;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD;IACE,eAAY;IACZ,UAAU,MAAM;IAChB,SAAU,WAAW,QAAQ,WAAY;cAExC,gBAAgB,oBAAC,eAAD,EAAiB,CAAA,GAAG,UAAU,oBAAC,gBAAD,EAAkB,CAAA,GAAG;IACxD,CAAA;GACb,UACE,UACC,oBAAC,SAAD;IACQ;IACN,SACE,oBAAC,OAAD;KAAO,SAAS;KAAS,UAAU,CAAC,CAAC,MAAM;KAAgB;eACzD,oBAAC,yBAAD,EAAA,UAA0B,OAAgC,CAAA;KACpD,CAAA;cAGT;IACO,CAAA,GAEV,oBAAC,OAAD;IAAO,SAAS;IAAS,UAAU,CAAC,CAAC,MAAM;IAAgB;cACxD;IACK,CAAA;GAEF;;EAEd"}

package/dist/Checkbox-D4nv7eNs.cjs

@@ -0,0 +1,183 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+const require_mixins_focus = require("./mixins/focus.cjs");
+require("./variables/transitions.cjs");
+const require_Stack = require("./Stack-BHb3ZB2A.cjs");
+const require_Tooltip = require("./Tooltip-0i_15ysU.cjs");
+const require_lib_useControlled = require("./lib/useControlled.cjs");
+const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _persona_icons = require("@persona/icons");
+let lodash = require("lodash");
+//#region components/Checkbox/Checkbox.tsx
+const Container = (0, styled_components.default)(require_Stack.Stack)`
+  position: relative;
+  cursor: pointer;
+
+  flex-wrap: nowrap;
+
+  ${({ size }) => size === "sm" && styled_components.css`
+      height: 16px;
+    `}
+
+  &${require_lib_pseudoClass.isDisabled} {
+    cursor: default;
+  }
+`;
+const CheckboxBox = styled_components.default.div`
+  cursor: pointer;
+  display: flex;
+  flex: 0 0 16px;
+  justify-content: center;
+  align-items: center;
+  transition:
+    box-shadow ${"200ms"},
+    background-color ${"200ms"},
+    border-color ${"200ms"};
+  border-radius: 3px;
+  height: ${_persona_design_tokens.Spacing[4]};
+  width: ${_persona_design_tokens.Spacing[4]};
+  box-sizing: border-box;
+  border: 1px solid ${_persona_design_tokens.Color.BorderInputCheckbox};
+  background: ${_persona_design_tokens.Color.BackgroundInputDefault};
+
+  svg {
+    color: ${_persona_design_tokens.Color.BorderIconInverse};
+  }
+
+  &${require_lib_pseudoClass.isDisabled} {
+    cursor: default;
+    background: ${_persona_design_tokens.Color.BackgroundInputDisabled};
+    border-color: ${_persona_design_tokens.Color.BorderInputDisabled};
+  }
+
+  ${({ checked }) => checked && styled_components.css`
+      border-color: ${_persona_design_tokens.Color.BackgroundInputActive};
+      background: ${_persona_design_tokens.Color.BackgroundInputActive};
+
+      &${require_lib_pseudoClass.isDisabled} {
+        border-color: ${_persona_design_tokens.Color.BackgroundInputActiveDisabled};
+        background: ${_persona_design_tokens.Color.BackgroundInputActiveDisabled};
+      }
+    `}
+`;
+const CheckboxInput = styled_components.default.input`
+  cursor: inherit;
+  height: 16px;
+  width: 16px;
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+
+  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} ~ ${CheckboxBox} {
+    border-color: ${_persona_design_tokens.Color.BorderInputCheckboxHover};
+  }
+
+  &${require_lib_pseudoClass.isChecked}, &${require_lib_pseudoClass.isIndeterminate} {
+    &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} ~ ${CheckboxBox} {
+      background: ${_persona_design_tokens.Color.BackgroundInputActiveHover};
+      border-color: ${_persona_design_tokens.Color.BackgroundInputActiveHover};
+    }
+  }
+
+  &${require_lib_pseudoClass.isFocusedVisible}${require_lib_pseudoClass.isNotDisabled} ~ ${CheckboxBox} {
+    ${require_mixins_focus.focusStyle}
+  }
+`;
+const Label = styled_components.default.label`
+  cursor: inherit;
+  color: ${_persona_design_tokens.Color.TextPrimary};
+
+  ${({ size }) => size === "sm" ? styled_components.css`
+          ${_persona_design_tokens.Typography.TextSmall};
+          line-height: 16px;
+        ` : styled_components.css`
+          ${_persona_design_tokens.Typography.TextMedium};
+
+          /** Nudge text for visual alignment */
+          position: relative;
+          bottom: -1px;
+        `}
+
+  ${({ theme, disabled }) => disabled && styled_components.css`
+      cursor: default;
+      color: ${theme.color.text.disabled};
+    `}
+`;
+const Checkbox = (0, react.forwardRef)(function Checkbox({ className, disabled, indeterminate, onChange, checked: checkedProp, defaultChecked, id, label, "data-test": dataTest, containerProps, value, size = "md", tooltip, ...elemProps }, ref) {
+	const field = require_useFormField.useFormField({ disabled });
+	const [checked, setChecked] = require_lib_useControlled({
+		controlledValue: checkedProp,
+		default: defaultChecked
+	});
+	const generatedId = (0, react.useMemo)(() => (0, lodash.uniqueId)("pds_checkbox__"), []);
+	const inputRef = (0, react.useRef)();
+	const inputId = field.inputId || id || generatedId;
+	(0, react.useImperativeHandle)(ref, () => inputRef.current, [inputRef]);
+	(0, react.useEffect)(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+	}, [indeterminate, inputRef]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
+		direction: "horizontal",
+		className,
+		"data-test": dataTest,
+		disabled: field.disabled,
+		align: "center",
+		size,
+		...containerProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxInput, {
+				id: inputId,
+				ref: ref || inputRef,
+				"data-test": dataTest && `${dataTest}-input`,
+				disabled: field.disabled,
+				type: "checkbox",
+				checked: checkedProp == null ? void 0 : checked,
+				defaultChecked,
+				onChange: (e) => {
+					setChecked(e.target.checked);
+					if (onChange) onChange(e);
+				},
+				"aria-checked": indeterminate ? "mixed" : checked,
+				value,
+				...elemProps
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxBox, {
+				"aria-hidden": "true",
+				disabled: field.disabled,
+				checked: checked != null && checked || indeterminate,
+				children: indeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.InputDashIcon, {}) : checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.InputCheckIcon, {}) : null
+			}),
+			label && (tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+				size,
+				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+					htmlFor: inputId,
+					disabled: !!field.disabled,
+					size,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TextWithDashedUnderline, { children: label })
+				}),
+				children: tooltip
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+				htmlFor: inputId,
+				disabled: !!field.disabled,
+				size,
+				children: label
+			}))
+		]
+	});
+});
+//#endregion
+Object.defineProperty(exports, "Checkbox", {
+	enumerable: true,
+	get: function() {
+		return Checkbox;
+	}
+});
+
+//# sourceMappingURL=Checkbox-D4nv7eNs.cjs.map

package/dist/Checkbox-D4nv7eNs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-D4nv7eNs.cjs","names":["Stack","isDisabled","Spacing","Color","isHovered","isNotDisabled","isChecked","isIndeterminate","isFocusedVisible","focusStyle","Typography","useFormField","useControlled","InputDashIcon","InputCheckIcon","Tooltip","TextWithDashedUnderline"],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${Color.BackgroundInputActiveDisabled};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${Color.TextPrimary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={ref || inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/Checkbox.d.cts

@@ -0,0 +1,2 @@
+import { n as CheckboxProps, t as Checkbox } from "./Checkbox-BmjK0Wac.cjs";
+export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/Checkbox.d.mts

@@ -0,0 +1,2 @@
+import { n as CheckboxProps, t as Checkbox } from "./Checkbox-BWJNAP27.mjs";
+export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/CheckboxGroupField.d.cts

@@ -0,0 +1,24 @@
+import { n as CheckboxProps } from "./Checkbox-BmjK0Wac.cjs";
+import { ImplementsFormField } from "./inputFields.cjs";
+import { ReactElement } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { AriaCheckboxGroupProps } from "react-aria";
+
+//#region components/FormField/CheckboxGroupField.d.ts
+interface CheckboxGroupFieldProps extends Omit<ImplementsFormField, 'configField'>, Omit<AriaCheckboxGroupProps, 'description' | 'disabled' | 'isReadOnly' | 'isRequired' | 'errorMessage'> {
+  children?: ReactElement<CheckboxProps>[];
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+}
+declare const CheckboxGroupField: ({
+  children,
+  name,
+  onChange,
+  disabled,
+  readOnly,
+  required,
+  ...props
+}: CheckboxGroupFieldProps) => _$react_jsx_runtime0.JSX.Element;
+export = CheckboxGroupField;
+//# sourceMappingURL=CheckboxGroupField.d.cts.map

package/dist/CheckboxGroupField.d.mts

@@ -0,0 +1,25 @@
+import { n as CheckboxProps } from "./Checkbox-BWJNAP27.mjs";
+import { ImplementsFormField } from "./inputFields.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement } from "react";
+import { AriaCheckboxGroupProps } from "react-aria";
+
+//#region components/FormField/CheckboxGroupField.d.ts
+interface CheckboxGroupFieldProps extends Omit<ImplementsFormField, 'configField'>, Omit<AriaCheckboxGroupProps, 'description' | 'disabled' | 'isReadOnly' | 'isRequired' | 'errorMessage'> {
+  children?: ReactElement<CheckboxProps>[];
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+}
+declare const CheckboxGroupField: ({
+  children,
+  name,
+  onChange,
+  disabled,
+  readOnly,
+  required,
+  ...props
+}: CheckboxGroupFieldProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CheckboxGroupField as default };
+//# sourceMappingURL=CheckboxGroupField.d.mts.map