@persona/design-system 0.1.7 → 0.1.9

package/dist/ProgressBar.d.cts

@@ -1,83 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-import { Color } from "@persona/design-tokens";
-
-//#region components/ProgressBar/ProgressBar.d.ts
-type ProgressBarStatus = 'default' | 'exception' | 'success';
-type ProgressBarSize = 'sm' | 'md';
-type ProgressBarType = 'determinate' | 'indeterminate';
-interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {
-  /** Completion percentage, 0–100 */
-  percent?: number;
-  /** Size of the bar track */
-  size?: ProgressBarSize;
-  /** Status — affects fill color */
-  status?: ProgressBarStatus;
-  /**
-   * `'determinate'` shows a filled bar for a known percentage.
-   * `'indeterminate'` shows a scanning animation for unknown progress.
-   * @defaultValue 'determinate'
-   */
-  type?: ProgressBarType;
-  /** Label text */
-  label?: string;
-  /**
-   * Show a right-hand info slot: percentage while in progress, status icon when
-   * success or exception. The two are mutually exclusive — icon replaces percentage
-   * once the bar reaches a terminal state.
-   * Defaults to `true` when `successPercent` is set.
-   */
-  showInfo?: boolean;
-  /** Custom fill color (design-system token) — overrides status color */
-  fillColor?: Color;
-  /** Custom track/rail background color (design-system token) */
-  railColor?: Color;
-  /**
-   * Format function for the displayed percentage value.
-   * @defaultValue (percent) => `${percent}%`
-   */
-  format?: (percent: number) => string;
-  /**
-   * When set, renders a green success segment from 0 to `successPercent`%,
-   * with the main fill continuing from `successPercent`% to `percent`%.
-   * Clamped to [0, percent]. Also enables `showInfo` by default.
-   */
-  successPercent?: number;
-  /**
-   * Tooltip content shown when hovering the bar track.
-   * Use to surface a segment breakdown, e.g. "3 done / 3 in progress / 4 to do".
-   */
-  tooltip?: string;
-}
-/**
- * ProgressBar shows the completion status of an operation as a filled bar.
- *
- * @example
- * ```tsx
- * <ProgressBar
- *   percent={60}
- *   size="md"
- *   label="Uploading"
- *   showInfo
- * />
- * ```
- */
-declare const ProgressBar: ({
-  percent,
-  size,
-  status,
-  type,
-  label,
-  showInfo,
-  fillColor,
-  railColor,
-  format,
-  successPercent,
-  tooltip,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  ...props
-}: ProgressBarProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { ProgressBar, ProgressBar as default, ProgressBarProps, ProgressBarSize, ProgressBarStatus, ProgressBarType };
-//# sourceMappingURL=ProgressBar.d.cts.map

package/dist/ProgressIndicator.d.cts

@@ -1,64 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/ProgressIndicator/ProgressIndicator.d.ts
-type StepStatus = 'uncompleted' | 'completed' | 'error';
-interface ProgressIndicatorStep {
-  id: string;
-  label: string;
-  /** @default 'uncompleted' */
-  status?: StepStatus;
-  disabled?: boolean;
-}
-interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {
-  steps: ProgressIndicatorStep[];
-  /** id of the step that should receive the active visual state */
-  activeStepId?: string;
-  /** @default 'vertical' */
-  layout?: 'vertical' | 'horizontal';
-  /**
-   * Called when a clickable step is activated via click or keyboard.
-   *
-   * Clickability rules:
-   * - `completed` and `error` steps are clickable (navigate back to review/edit)
-   * - The active step is not clickable (user is already there)
-   * - Upcoming `uncompleted` steps are not clickable (sequential progression required)
-   */
-  onStepClick?: (stepId: string) => void;
-}
-/**
- * ProgressIndicator guides users through a sequence of steps.
- *
- * Interaction rules:
- * - **Completed / error** steps are clickable — navigate back to review or fix.
- * - **Active** step is not clickable — the user is already there.
- * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
- *
- * Navigation does not clear later steps. If a change on an earlier step
- * invalidates later data, the affected steps should be flagged and require
- * re-confirmation before submission — this logic lives in the consuming component.
- *
- * @example
- * ```tsx
- * <ProgressIndicator
- *   steps={[
- *     { id: 'identity', label: 'Identity', status: 'completed' },
- *     { id: 'address',  label: 'Address',  status: 'uncompleted' },
- *     { id: 'review',   label: 'Review',   status: 'uncompleted' },
- *   ]}
- *   activeStepId="address"
- *   onStepClick={(id) => navigate(id)}
- * />
- * ```
- */
-declare const ProgressIndicator: ({
-  steps,
-  activeStepId,
-  layout,
-  onStepClick,
-  "aria-label": ariaLabel,
-  ...rest
-}: ProgressIndicatorProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };
-//# sourceMappingURL=ProgressIndicator.d.cts.map

package/dist/PseudoClassProps-C5jpj6Rp.d.cts

@@ -1,12 +0,0 @@
-//#region types/PseudoClassProps.d.ts
-interface PseudoClassProps {
-  hovered?: boolean;
-  focused?: boolean;
-  active?: boolean;
-  disabled?: boolean;
-  checked?: boolean;
-  mixed?: boolean;
-}
-//#endregion
-export { PseudoClassProps as t };
-//# sourceMappingURL=PseudoClassProps-C5jpj6Rp.d.cts.map

package/dist/PseudoClassProps.d.cts

@@ -1,2 +0,0 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
-export = PseudoClassProps;

package/dist/Radio-nw846eRv.cjs

@@ -1,154 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
-const require_mixins_focus = require("./mixins/focus.cjs");
-require("./variables/transitions.cjs");
-const require_useFormField = require("./useFormField-B98dmreO.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 lodash = require("lodash");
-//#region components/Radio/Radio.tsx
-const Container = styled_components.default.div`
-  cursor: pointer;
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: nowrap;
-  position: relative;
-
-  ${({ size }) => size === "sm" && styled_components.css`
-      align-items: center;
-      height: 16px;
-    `}
-
-  &${require_lib_pseudoClass.isDisabled} {
-    cursor: default;
-  }
-`;
-const Label = styled_components.default.label`
-  cursor: inherit;
-  padding: 0 ${_persona_design_tokens.Spacing[2]};
-  color: ${_persona_design_tokens.Color.TextSecondary};
-
-  ${({ size }) => size === "sm" ? styled_components.css`
-          ${_persona_design_tokens.Typography.TextSmall};
-          line-height: 16px;
-        ` : styled_components.css`
-          ${_persona_design_tokens.Typography.TextMedium};
-        `}
-
-  ${({ theme, disabled }) => disabled && styled_components.css`
-      cursor: default;
-      color: ${theme.color.text.disabled};
-    `}
-`;
-const RadioCircle = styled_components.default.div`
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: box-shadow ${"200ms"};
-  border-radius: 100%;
-  height: ${_persona_design_tokens.Spacing[4]};
-  width: ${_persona_design_tokens.Spacing[4]};
-  flex: 0 0 16px;
-  box-sizing: border-box;
-  margin-top: ${({ size }) => size === "sm" ? 0 : "2px"};
-  border: 1px solid ${_persona_design_tokens.Color.BorderInputCheckbox};
-  background: ${_persona_design_tokens.Color.PrimaryWhite};
-`;
-const RadioInput = styled_components.default.input`
-  cursor: inherit;
-  height: ${_persona_design_tokens.Spacing[4]};
-  width: ${_persona_design_tokens.Spacing[4]};
-  margin: 0;
-  border: 0;
-  opacity: 0;
-  overflow: hidden;
-  position: absolute;
-  top: ${({ $size }) => $size === "sm" ? 0 : "2px"};
-  border-radius: 100%;
-  z-index: 10; // this needs to be above the dot in the checked input
-
-  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} ~ ${RadioCircle} {
-    border-color: ${_persona_design_tokens.Color.BorderInputCheckboxHover};
-  }
-
-  &${require_lib_pseudoClass.isChecked}, &:checked {
-    &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} ~ ${RadioCircle} {
-      background: ${_persona_design_tokens.Color.BackgroundInputActiveHover};
-      border-color: ${_persona_design_tokens.Color.BackgroundInputActiveHover};
-    }
-  }
-
-  &${require_lib_pseudoClass.isFocusedVisible}${require_lib_pseudoClass.isNotDisabled} ~ ${RadioCircle} {
-    ${require_mixins_focus.focusStyle}
-  }
-
-  // RadioCircle state styles; Uses pure CSS
-  &${require_lib_pseudoClass.isDisabled} + ${RadioCircle} {
-    cursor: default;
-    background: ${_persona_design_tokens.Color.BackgroundInputDisabled};
-    border-color: ${_persona_design_tokens.Color.BorderInputDisabled};
-  }
-
-  &:checked + ${RadioCircle}, &${require_lib_pseudoClass.isChecked} + ${RadioCircle} {
-    border-color: ${_persona_design_tokens.Color.BackgroundInputActive};
-    background: ${_persona_design_tokens.Color.BackgroundInputActive};
-
-    &::after {
-      background: ${_persona_design_tokens.Color.BackgroundInputDefault};
-      height: 6px;
-      width: 6px;
-      border-radius: 100%;
-      content: '';
-      position: absolute;
-    }
-  }
-
-  &:checked${require_lib_pseudoClass.isDisabled} + ${RadioCircle}, &${require_lib_pseudoClass.isChecked}${require_lib_pseudoClass.isDisabled} + ${RadioCircle} {
-    border-color: ${_persona_design_tokens.Color.BackgroundInputActiveDisabled};
-    background: ${_persona_design_tokens.Color.BackgroundInputActiveDisabled};
-  }
-`;
-const Radio = (0, react.forwardRef)(function Radio({ id, label, className, value, disabled, checked, defaultChecked, onChange, "data-test": dataTest, size = "md", ...elemProps }, ref) {
-	const field = require_useFormField.useFormField({ disabled });
-	const generatedId = (0, react.useMemo)(() => (0, lodash.uniqueId)("pds_radio__"), []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
-		className,
-		disabled,
-		"data-test": dataTest,
-		size,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioInput, {
-				id: id || generatedId,
-				disabled: field.disabled,
-				onChange,
-				type: "radio",
-				value,
-				checked,
-				defaultChecked,
-				ref,
-				$size: size,
-				...elemProps
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioCircle, { size }),
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-				htmlFor: id || generatedId,
-				disabled: disabled ?? false,
-				size,
-				children: label
-			})
-		]
-	});
-});
-//#endregion
-Object.defineProperty(exports, "Radio", {
-	enumerable: true,
-	get: function() {
-		return Radio;
-	}
-});
-
-//# sourceMappingURL=Radio-nw846eRv.cjs.map

package/dist/Radio-nw846eRv.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Radio-nw846eRv.cjs","names":["isDisabled","Spacing","Color","Typography","isHovered","isNotDisabled","isChecked","isFocusedVisible","focusStyle","useFormField"],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${Color.TextSecondary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActive};\n    background: ${Color.BackgroundInputActive};\n\n    &::after {\n      background: ${Color.BackgroundInputDefault};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActiveDisabled};\n    background: ${Color.BackgroundInputActiveDisabled};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,YAAY,kBAAA,QAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,kBAAA,GAAG;;;MAGD;;KAEDA,wBAAAA,WAAW;;;;AAKhB,MAAM,QAAQ,kBAAA,QAAO,KAA+C;;eAErDC,uBAAAA,QAAQ,GAAG;WACfC,uBAAAA,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,kBAAA,GAAG;YACCC,uBAAAA,WAAW,UAAU;;YAGzB,kBAAA,GAAG;YACCA,uBAAAA,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,kBAAA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,kBAAA,QAAO,GAA0B;;;;;mCAKF;;YAEvCF,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpCC,uBAAAA,MAAM,oBAAoB;gBAChCA,uBAAAA,MAAM,aAAa;;AAGnC,MAAM,aAAa,kBAAA,QAAO,KAA6B;;YAE3CD,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhDG,wBAAAA,YAAYC,wBAAAA,cAAc,KAAK,YAAY;oBAC5BH,uBAAAA,MAAM,yBAAyB;;;KAG9CI,wBAAAA,UAAU;OACRF,wBAAAA,YAAYC,wBAAAA,cAAc,KAAK,YAAY;oBAC9BH,uBAAAA,MAAM,2BAA2B;sBAC/BA,uBAAAA,MAAM,2BAA2B;;;;KAIlDK,wBAAAA,mBAAmBF,wBAAAA,cAAc,KAAK,YAAY;MACjDG,qBAAAA,WAAW;;;;KAIZR,wBAAAA,WAAW,KAAK,YAAY;;kBAEfE,uBAAAA,MAAM,wBAAwB;oBAC5BA,uBAAAA,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAKI,wBAAAA,UAAU,KAAK,YAAY;oBACxCJ,uBAAAA,MAAM,sBAAsB;kBAC9BA,uBAAAA,MAAM,sBAAsB;;;oBAG1BA,uBAAAA,MAAM,uBAAuB;;;;;;;;;aASpCF,wBAAAA,WAAW,KAAK,YAAY,KAAKM,wBAAAA,YAAYN,wBAAAA,WAAW,KAAK,YAAY;oBAClEE,uBAAAA,MAAM,8BAA8B;kBACtCA,uBAAAA,MAAM,8BAA8B;;;AAkBtD,MAAa,SAAA,GAAA,MAAA,YAAiD,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQO,qBAAAA,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,eAAA,GAAA,MAAA,gBAAA,GAAA,OAAA,UAAqC,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,iBAAA,GAAA,kBAAA,MAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}

package/dist/Radio.d.cts

@@ -1,21 +0,0 @@
-import * as _$react from "react";
-import { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
-
-//#region components/Radio/Radio.d.ts
-interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
-  /**
-   * If not provided, a unique ID will be generated.
-   */
-  id?: string;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-  label?: ReactNode;
-  disabled?: boolean;
-  checked?: boolean;
-  value: string;
-  'data-test'?: string;
-  size?: 'md' | 'sm';
-}
-declare const Radio: _$react.ForwardRefExoticComponent<RadioProps & _$react.RefAttributes<HTMLInputElement>>;
-//#endregion
-export { Radio, Radio as default, RadioProps };
-//# sourceMappingURL=Radio.d.cts.map

package/dist/RadioGroup-D_H1B7JV.d.cts

@@ -1,21 +0,0 @@
-import { ComponentPropsWithoutRef, VFC } from "react";
-
-//#region components/RadioGroup/RadioGroup.d.ts
-interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
-  defaultValue?: any;
-  name?: string;
-  value?: any;
-  onChange?: (value: any) => void;
-  /**
-   * Direction of radio group
-   */
-  horizontal?: boolean;
-  /**
-   * Size of radio buttons within the group
-   */
-  size?: 'md' | 'sm';
-}
-declare const RadioGroup: VFC<RadioGroupProps>;
-//#endregion
-export { RadioGroupProps as n, RadioGroup as t };
-//# sourceMappingURL=RadioGroup-D_H1B7JV.d.cts.map

package/dist/RadioGroup-DmGVJCgT.cjs

@@ -1,57 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_lib_useControlled = require("./lib/useControlled.cjs");
-const require_Radio = require("./Radio-nw846eRv.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");
-//#region components/RadioGroup/RadioGroup.tsx
-const Container = styled_components.default.div`
-  & > div {
-    margin-bottom: ${_persona_design_tokens.Spacing[2]};
-  }
-
-  ${({ horizontal }) => horizontal && styled_components.css`
-      display: flex;
-      align-items: center;
-      & > div {
-        margin-right: ${_persona_design_tokens.Spacing[2]};
-      }
-    `}
-`;
-const RadioGroup = ({ children, defaultValue, name, value: valueProp, onChange, horizontal = false, size = "md", ...elemProps }) => {
-	const [value, setValue] = require_lib_useControlled({
-		controlledValue: valueProp,
-		default: defaultValue
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, {
-		role: "radiogroup",
-		horizontal,
-		size,
-		...elemProps,
-		children: react.Children.map(children, (child) => {
-			if (child?.type === require_Radio.Radio && (typeof valueProp !== "undefined" || onChange)) return (0, react.cloneElement)(child, {
-				name,
-				size,
-				checked: child.props.value === value,
-				onChange: (e) => {
-					const newVal = e.target.value;
-					if (typeof valueProp !== "undefined" && onChange) onChange(newVal);
-					else setValue(newVal);
-				}
-			});
-			if (name) return (0, react.cloneElement)(child, { name });
-			return child;
-		})
-	});
-};
-//#endregion
-Object.defineProperty(exports, "RadioGroup", {
-	enumerable: true,
-	get: function() {
-		return RadioGroup;
-	}
-});
-
-//# sourceMappingURL=RadioGroup-DmGVJCgT.cjs.map

package/dist/RadioGroup-DmGVJCgT.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroup-DmGVJCgT.cjs","names":["Spacing","useControlled","Children","Radio"],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type VFC,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Radio, { type RadioProps } from 'design-system/components/Radio';\nimport useControlled from 'design-system/lib/useControlled';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; horizontal?: boolean }>`\n  & > div {\n    margin-bottom: ${Spacing[2]};\n  }\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: flex;\n      align-items: center;\n      & > div {\n        margin-right: ${Spacing[2]};\n      }\n    `}\n`;\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {\n  defaultValue?: any;\n  name?: string;\n  value?: any;\n  onChange?: (value: any) => void;\n  /**\n   * Direction of radio group\n   */\n  horizontal?: boolean;\n  /**\n   * Size of radio buttons within the group\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const RadioGroup: VFC<RadioGroupProps> = ({\n  children,\n  defaultValue,\n  name,\n  value: valueProp,\n  onChange,\n  horizontal = false,\n  size = 'md',\n  ...elemProps\n}) => {\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue,\n  });\n\n  return (\n    <Container role='radiogroup' horizontal={horizontal} size={size} {...elemProps}>\n      {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n      {Children.map(children, (child: ReactElement<RadioProps>) => {\n        if (child?.type === Radio && (typeof valueProp !== 'undefined' || onChange)) {\n          return cloneElement(child, {\n            name,\n            size,\n            checked: child.props.value === value,\n            onChange: (e: ChangeEvent<HTMLInputElement>) => {\n              const newVal = e.target.value;\n              if (typeof valueProp !== 'undefined' && onChange) {\n                onChange(newVal);\n              } else {\n                setValue(newVal);\n              }\n            },\n          });\n        }\n\n        if (name) {\n          return cloneElement(child, { name });\n        }\n\n        return child;\n      })}\n    </Container>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;AAcA,MAAM,YAAY,kBAAA,QAAO,GAAgD;;qBAEpDA,uBAAAA,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,kBAAA,GAAG;;;;wBAIiBA,uBAAAA,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAYC,0BAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElEC,MAAAA,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAASC,cAAAA,UAAU,OAAO,cAAc,eAAe,UAChE,SAAA,GAAA,MAAA,cAAoB,OAAO;IACzB;IACA;IACA,SAAS,MAAM,MAAM,UAAU;IAC/B,WAAW,MAAqC;KAC9C,MAAM,SAAS,EAAE,OAAO;AACxB,SAAI,OAAO,cAAc,eAAe,SACtC,UAAS,OAAO;SAEhB,UAAS,OAAO;;IAGrB,CAAC;AAGJ,OAAI,KACF,SAAA,GAAA,MAAA,cAAoB,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}

package/dist/RadioGroup.d.cts

@@ -1,2 +0,0 @@
-import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-D_H1B7JV.cjs";
-export { RadioGroup, RadioGroup as default, RadioGroupProps };

package/dist/SearchInput-CAHYPQVX.d.cts

@@ -1,46 +0,0 @@
-import { n as InputSizes } from "./input-BkzqXwn7.cjs";
-import { FocusEventHandler, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/DataTable/SearchInput/SearchInput.d.ts
-interface OmniSearchProps {
-  className?: string;
-  title?: ReactNode;
-  handleInput: (value: string) => void;
-  id?: string;
-  value: string;
-  placeholder: string;
-  dataTest?: string;
-  autoFocus?: boolean;
-  useClearIcon?: boolean;
-  leftIcon?: ReactNode;
-  handleOnFocus?: () => void;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  disabled?: boolean;
-  disabledTooltip?: string;
-  flattenDisplay?: boolean;
-  size?: InputSizes;
-  maxLength?: number;
-}
-declare const SearchInput: ({
-  className,
-  title,
-  handleInput,
-  handleOnFocus,
-  onBlur,
-  id,
-  value,
-  placeholder,
-  dataTest,
-  autoFocus,
-  useClearIcon,
-  disabled,
-  disabledTooltip,
-  size,
-  leftIcon,
-  flattenDisplay,
-  maxLength
-}: OmniSearchProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { SearchInput as n, OmniSearchProps as t };
-//# sourceMappingURL=SearchInput-CAHYPQVX.d.cts.map

package/dist/SearchInput.d.cts

@@ -1,2 +0,0 @@
-import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-CAHYPQVX.cjs";
-export { OmniSearchProps, SearchInput as default };

package/dist/SectionHeading-D-L4uPoX.d.cts

@@ -1,71 +0,0 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-z1rV4qON.cjs";
-import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from "react";
-
-//#region components/CardV2/SectionHeading.d.ts
-/**
- * Private component for rendering the heading of a section, both the primary card heading and
- * section headings.
- */
-declare const SectionHeading: FC<{
-  /**
-   * Whether this is the top-level section of the card which has different visual treatment.
-   */
-  isTopSection: boolean;
-  /**
-   * Whether this heading's section has content.
-   */
-  sectionHasContent: boolean;
-  /**
-   * Whether this heading's section has a footer.
-   */
-  hasFooter: boolean;
-  loading: boolean;
-  /**
-   * Title text to render in the heading.
-   */
-  title: string;
-  /**
-   * Optional sticker to render after the title.
-   */
-  sticker?: ReactElement;
-  /**
-   * Optional icon to render before the title text.
-   *
-   * Usage of this icon slot should be avoided if possible to maintain left-text alignement. If
-   * using this icon slot for a section heading use it for all sections.
-   */
-  leftDecorativeIcon?: ReactElement;
-  /**
-   * Optional actions to render in the heading.
-   * Only accepts IconButton or Button components with specific prop restrictions.
-   */
-  actions?: (IconAction | TextAction | undefined)[];
-  /**
-   * Optional actions to render in the heading in a menu.
-   */
-  menuActions?: (MenuAction | undefined)[];
-  /**
-   * Optional custom content to render in the heading in the button row. Prefer setting `actions` or
-   * `menuActions` if possible.
-   */
-  headerActionsRowContent?: ReactNode;
-  /**
-   * Callback to toggle collapsed state of the section. Omit to disable collapsing.
-   */
-  toggle?: () => void;
-  /**
-   * Whether the section is currently expanded or collapsed.
-   */
-  isExpanded: boolean;
-  /**
-   * Optional props to pass to the heading element. Accepts an `as` key to override the
-   * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for
-   * section headings so that the document heading hierarchy reflects the visual hierarchy.
-   */
-  headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  };
-}>;
-//#endregion
-export { SectionHeading as t };
-//# sourceMappingURL=SectionHeading-D-L4uPoX.d.cts.map

package/dist/SectionHeading.d.cts

@@ -1,2 +0,0 @@
-import { t as SectionHeading } from "./SectionHeading-D-L4uPoX.cjs";
-export { SectionHeading };

package/dist/SegmentedControl-B1ZLgu61.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl-B1ZLgu61.mjs","names":[],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext, forwardRef, type Key, type ReactNode, useContext } from 'react';\nimport { ToggleButton, ToggleButtonGroup, type ToggleButtonProps } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SegmentedControlSizeContext = createContext<'sm' | 'md'>('md');\n\nexport interface SegmentedControlProps {\n  id?: string;\n  className?: string;\n\n  /**\n   * Current selected key (controlled)\n   */\n  selectedKey?: Key;\n\n  /**\n   * Default selected key (uncontrolled)\n   */\n  defaultSelectedKey?: Key;\n\n  /**\n   * Callback when selection changes\n   */\n  onSelectionChange?: (key: Key) => void;\n\n  /**\n   * Whether the entire component is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the component should take full width\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Size of the segmented control\n   */\n  size?: 'sm' | 'md';\n\n  /**\n   * Accessible label for the group\n   */\n  'aria-label'?: string;\n\n  /**\n   * Segment components\n   */\n  children: ReactNode;\n}\n\ninterface StyledSegmentedControlProps {\n  id?: string;\n  $fullWidth?: boolean;\n  $size?: 'sm' | 'md';\n}\n\nconst StyledSegmentedControl = styled(ToggleButtonGroup)<StyledSegmentedControlProps>`\n  display: inline-flex;\n  background-color: ${({ theme }) => theme.color.border.input};\n  border-radius: ${BorderRadius.Md};\n  padding: 1px;\n  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};\n  height: ${({ $size = 'md' }) => ($size === 'sm' ? '20px' : '24px')};\n`;\n\n/**\n * A segmented control component that allows users to select between multiple options.\n * Built with React Aria for accessibility and keyboard navigation.\n */\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      id,\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange,\n      disabled,\n      fullWidth = false,\n      size = 'md',\n      className,\n      'aria-label': ariaLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFormField({ inputId: id, disabled });\n\n    return (\n      <SegmentedControlSizeContext.Provider value={size}>\n        <StyledSegmentedControl\n          ref={ref}\n          className={className}\n          selectionMode='single'\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\n          defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}\n          onSelectionChange={(keys) => {\n            const key = Array.from(keys)[0];\n            if (key && onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          isDisabled={field.disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={field.labelId}\n          aria-describedby={field.helperTextId}\n          aria-errormessage={field.hasError ? field.helperTextId : undefined}\n          aria-invalid={field.hasError}\n          $fullWidth={fullWidth}\n          $size={size}\n          {...props}\n          id={field.inputId}\n        >\n          {children}\n        </StyledSegmentedControl>\n      </SegmentedControlSizeContext.Provider>\n    );\n  },\n);\n\nconst StyledSegment = styled(ToggleButton)<{ $size?: 'sm' | 'md' }>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 3px;\n  color: ${({ theme }) => theme.color.text.secondary};\n  cursor: pointer;\n  flex: 1;\n  line-height: 1;\n\n  & * {\n    cursor: inherit;\n  }\n  padding: 0 ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[1] : Spacing[2])};\n  position: relative;\n  transition: all 0.15s ease-in-out;\n  white-space: nowrap;\n\n  /* Hover state */\n  &[data-hovered] {\n    background-color: ${({ theme }) => theme.color.variants.basic.hover};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => theme.color.primary.white};\n    color: ${({ theme }) => theme.color.text.primary};\n  }\n\n  /* Disabled state */\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Remove focus outline unless we're using a keyboard */\n  &[data-focused]:not([data-focus-visible]) {\n    outline: none;\n  }\n`;\n\nexport interface SegmentedControlItemProps extends Omit<\n  ToggleButtonProps,\n  'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'\n> {\n  /**\n   * Whether this control item is disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * A segment item component for use within SegmentedControl.\n */\nconst SegmentedControlItem = forwardRef<HTMLButtonElement, SegmentedControlItemProps>(\n  function SegmentedControlItem({ disabled, children, ...props }, ref) {\n    const size = useContext(SegmentedControlSizeContext);\n    return (\n      <StyledSegment ref={ref} isDisabled={disabled} $size={size} {...props}>\n        {children}\n      </StyledSegment>\n    );\n  },\n);\n\nexport default SegmentedControl;\nexport { SegmentedControlItem };\n"],"mappings":";;;;;;;;AAQA,MAAM,8BAA8B,cAA2B,KAAK;AAqDpE,MAAM,yBAAyB,OAAO,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;mBAC3C,aAAa,GAAG;;YAEvB,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,mBAAmB,WAC9B,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,oBAAC,wBAAD;GACO;GACM;GACX,eAAc;GACd,cAAc,cAAc,CAAC,YAAY,GAAG,KAAA;GAC5C,qBAAqB,qBAAqB,CAAC,mBAAmB,GAAG,KAAA;GACjE,oBAAoB,SAAS;IAC3B,MAAM,MAAM,MAAM,KAAK,KAAK,CAAC;AAC7B,QAAI,OAAO,kBACT,mBAAkB,IAAI;;GAG1B,YAAY,MAAM;GAClB,cAAY;GACZ,mBAAiB,MAAM;GACvB,oBAAkB,MAAM;GACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;GACzD,gBAAc,MAAM;GACpB,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,IAAI,MAAM;GAET;GACsB,CAAA;EACY,CAAA;EAG5C;AAED,MAAM,gBAAgB,OAAO,aAAa;IACtC,gBAAgB,GAAG;;;;;;;YAOX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;cACnD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,MAAM,uBAAuB,WAC3B,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,oBAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,OAFpC,WAAW,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}

package/dist/SegmentedControl-CE845gnm.d.mts

@@ -1,59 +0,0 @@
-import * as _$react from "react";
-import { Key, ReactNode } from "react";
-import { ToggleButtonProps } from "react-aria-components";
-
-//#region components/SegmentedControl/SegmentedControl.d.ts
-interface SegmentedControlProps {
-  id?: string;
-  className?: string;
-  /**
-   * Current selected key (controlled)
-   */
-  selectedKey?: Key;
-  /**
-   * Default selected key (uncontrolled)
-   */
-  defaultSelectedKey?: Key;
-  /**
-   * Callback when selection changes
-   */
-  onSelectionChange?: (key: Key) => void;
-  /**
-   * Whether the entire component is disabled
-   */
-  disabled?: boolean;
-  /**
-   * Whether the component should take full width
-   */
-  fullWidth?: boolean;
-  /**
-   * Size of the segmented control
-   */
-  size?: 'sm' | 'md';
-  /**
-   * Accessible label for the group
-   */
-  'aria-label'?: string;
-  /**
-   * Segment components
-   */
-  children: ReactNode;
-}
-/**
- * A segmented control component that allows users to select between multiple options.
- * Built with React Aria for accessibility and keyboard navigation.
- */
-declare const SegmentedControl: _$react.ForwardRefExoticComponent<SegmentedControlProps & _$react.RefAttributes<HTMLDivElement>>;
-interface SegmentedControlItemProps extends Omit<ToggleButtonProps, 'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'> {
-  /**
-   * Whether this control item is disabled
-   */
-  disabled?: boolean;
-}
-/**
- * A segment item component for use within SegmentedControl.
- */
-declare const SegmentedControlItem: _$react.ForwardRefExoticComponent<SegmentedControlItemProps & _$react.RefAttributes<HTMLButtonElement>>;
-//#endregion
-export { SegmentedControlProps as i, SegmentedControlItem as n, SegmentedControlItemProps as r, SegmentedControl as t };
-//# sourceMappingURL=SegmentedControl-CE845gnm.d.mts.map