@persona/design-system 0.7.1 → 0.7.2

package/dist/components/DataTable/types.d.mts

@@ -1,5 +1,5 @@
-import { l as MenuItemProps } from "../../Menu-CSwzFqdv.mjs";
-import { o as StickerProps } from "../../Sticker-Bf9rhSkv.mjs";
+import { l as MenuItemProps } from "../../Menu-Bu7-KBhp.mjs";
+import { o as StickerProps } from "../../Sticker-BVX38LKi.mjs";
 import { ReactNode } from "react";
 import { Column, DeepKeys, FilterFnOption, Header, RowData, SortingState, Table } from "@tanstack/react-table";
 

package/dist/components/DatePicker/index.d.mts

@@ -1,6 +1,6 @@
-import { n as DatePickerProps, t as DatePicker } from "../../DatePicker-DC_RKjdM.mjs";
-import { i as DateRangePickerProps, n as DateRange, r as DateRangePicker, t as DateFilterChange } from "../../DateRangePicker-ByD6IsLB.mjs";
-import { t as DateField } from "../../DateField-2aigfD4u.mjs";
-import { t as Calendar } from "../../Calendar-DrdTvzAa.mjs";
-import { n as RangeCalendarProps, t as RangeCalendar } from "../../RangeCalendar-B7TwRJbg.mjs";
+import { n as DatePickerProps, t as DatePicker } from "../../DatePicker-C3xNSkPG.mjs";
+import { i as DateRangePickerProps, n as DateRange, r as DateRangePicker, t as DateFilterChange } from "../../DateRangePicker-C4QKMo2a.mjs";
+import { t as DateField } from "../../DateField-BamAk9_w.mjs";
+import { t as Calendar } from "../../Calendar-CMeIZ0BO.mjs";
+import { n as RangeCalendarProps, t as RangeCalendar } from "../../RangeCalendar-CPnLaM-J.mjs";
 export { Calendar, DateField, DateFilterChange, DatePicker, DatePicker as default, DatePickerProps, DateRange, DateRangePicker, DateRangePickerProps, RangeCalendar, RangeCalendarProps };

package/dist/components/DatePicker/index.mjs

@@ -1,2 +1,2 @@
-import { a as Calendar, i as DateField, n as RangeCalendar, r as DatePicker, t as DateRangePicker } from "../../DatePicker-D9JurBBj.mjs";
+import { a as Calendar, i as DateField, n as RangeCalendar, r as DatePicker, t as DateRangePicker } from "../../DatePicker-IgiUI3Wj.mjs";
 export { Calendar, DateField, DatePicker, DatePicker as default, DateRangePicker, RangeCalendar };

package/dist/components/DropdownMenu/index.d.mts

@@ -1,2 +1,2 @@
-import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-Xl1BYXsY.mjs";
+import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-DL5ye-0m.mjs";
 export { DropdownMenu, DropdownMenuProps, _default as default };

package/dist/components/FormControl/index.d.mts

@@ -1,3 +1,3 @@
-import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-CJfYdgZF.mjs";
-import { r as useFormField } from "../../useFormField-DDbo-ExT.mjs";
+import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-D5xyPkST.mjs";
+import { r as useFormField } from "../../useFormField-DPFClB5h.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText, useFormField };

package/dist/components/FormControl/index.mjs

@@ -1,3 +1,3 @@
-import { n as useFormField } from "../../useFormField-DsvC5dOb.mjs";
-import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText, t as Container } from "../../FormControl-BEk4F1EV.mjs";
+import { n as useFormField } from "../../useFormField-BzhMbl5P.mjs";
+import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText, t as Container } from "../../FormControl-DnfZTli_.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormInputContainer, FormLabel, HelperText, WarningText, useFormField };

package/dist/components/FormField/index.d.mts

@@ -1,4 +1,4 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-CK8o1sMB.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-BJZUj6jg.mjs";
 import { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps } from "../../inputFields.mjs";
 import CheckboxGroupField from "../../CheckboxGroupField.mjs";
 import ListBoxField from "../../ListBoxField.mjs";

package/dist/components/FormField/index.mjs

@@ -1,2 +1,2 @@
-import { a as CheckboxField, c as SegmentedControlField, d as TextField, f as ToggleField, i as CheckboxGroupField, l as SelectField, m as FormField, n as TableBoxField, o as ComboboxField, p as splitOutFormFieldProps, r as ListBoxField, s as RadioGroupField, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, u as TextAreaField } from "../../FormField-ByT0avVx.mjs";
+import { a as CheckboxField, c as SegmentedControlField, d as TextField, f as ToggleField, i as CheckboxGroupField, l as SelectField, m as FormField, n as TableBoxField, o as ComboboxField, p as splitOutFormFieldProps, r as ListBoxField, s as RadioGroupField, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, u as TextAreaField } from "../../FormField-74TPV8-8.mjs";
 export { CheckboxField, CheckboxGroupField, ComboboxField, FormField, FormField as default, ListBoxField, RadioGroupField, SegmentedControlField, SelectField, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxField, TextAreaField, TextField, ToggleField, splitOutFormFieldProps };

package/dist/components/Grid/index.d.mts

@@ -1,3 +1,3 @@
-import { GRID_BREAKPOINTS, Grid, GridProps } from "../../Grid.mjs";
+import { GRID_BREAKPOINTS, Grid, GridProps, useGridBreakpoint } from "../../Grid.mjs";
 import { GridItem, GridItemProps, GridSpan } from "../../GridItem.mjs";
-export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem, type GridItemProps, type GridProps, type GridSpan };
+export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem, type GridItemProps, type GridProps, type GridSpan, useGridBreakpoint };

package/dist/components/Grid/index.mjs

@@ -1,85 +1,2 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { Spacing } from "@persona/design-tokens";
-import { useLayoutEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region components/Grid/Grid.tsx
-const GRID_BREAKPOINTS = {
-	sm: 768,
-	md: 1024,
-	lg: 1408
-};
-const getBreakpoint = (width) => {
-	if (width >= GRID_BREAKPOINTS.lg) return "lg";
-	if (width >= GRID_BREAKPOINTS.md) return "md";
-	if (width >= GRID_BREAKPOINTS.sm) return "sm";
-	return "xs";
-};
-const useGridBreakpoint = (ref) => {
-	const [breakpoint, setBreakpoint] = useState("md");
-	useLayoutEffect(() => {
-		const node = ref.current;
-		if (!node) return;
-		const update = () => setBreakpoint(getBreakpoint(node.offsetWidth));
-		update();
-		const observer = new ResizeObserver(update);
-		observer.observe(node);
-		return () => observer.disconnect();
-	}, [ref]);
-	return breakpoint;
-};
-const Root = styled.div`
-  display: grid;
-  width: 100%;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  box-sizing: border-box;
-
-  ${({ $breakpoint }) => $breakpoint === "xs" && css`
-      min-width: ${GRID_BREAKPOINTS.sm - 1}px;
-    `}
-
-  ${({ $breakpoint }) => $breakpoint === "xs" || $breakpoint === "sm" ? css`
-          gap: ${Spacing[3]};
-          padding-inline: ${Spacing[5]};
-        ` : css`
-          gap: ${Spacing[4]};
-          padding-inline: ${Spacing[6]};
-        `}
-
-  // max-width equals the lg threshold; offsetWidth reads the clamped border-box width and getBreakpoint uses >=, so the clamp stays 'lg'
-  ${({ $mode, $breakpoint }) => $mode === "fixed" && $breakpoint === "lg" && css`
-      max-width: ${GRID_BREAKPOINTS.lg}px;
-      margin-inline: auto;
-    `}
-`;
-/**
-* Provides a 12-column CSS grid that measures its own width with a ResizeObserver for responsive
-* horizontal margins and gutters. Vertical spacing is left to the consumer.
-*
-* The grid measures breakpoints against its own width rather than the viewport. Use `fixed` to
-* center the grid at its large-screen maximum width, or `fluid` to keep it at 100% width.
-*/
-const Grid = ({ mode, children, ...rest }) => {
-	const ref = useRef(null);
-	return /* @__PURE__ */ jsx(Root, {
-		ref,
-		$mode: mode,
-		$breakpoint: useGridBreakpoint(ref),
-		...rest,
-		children
-	});
-};
-//#endregion
-//#region components/Grid/GridItem.tsx
-const Item = styled.div`
-  grid-column: span ${({ $span }) => $span};
-  min-width: 0;
-`;
-const GridItem = ({ span, children, ...rest }) => /* @__PURE__ */ jsx(Item, {
-	$span: span,
-	...rest,
-	children
-});
-//#endregion
-export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem };
-
-//# sourceMappingURL=index.mjs.map
+import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "../../Grid-DOyYYsvk.mjs";
+export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem, useGridBreakpoint };

package/dist/components/ImageTile/index.mjs

@@ -8,7 +8,7 @@ import { n as Stack } from "../../Stack-ChsImaEY.mjs";
 import { t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
 import { n as DropdownMenu_default } from "../../DropdownMenu-CuKSNxc9.mjs";
 import { t as LoadingShimmer } from "../../LoadingShimmer-Dizk2sZu.mjs";
-import { t as Checkbox } from "../../Checkbox-CyWXhuby.mjs";
+import { t as Checkbox } from "../../Checkbox-AjL7ucoR.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Input/index.d.mts

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

package/dist/components/Input/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-Bc2yWH3j.mjs";
+import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-C_3QwAAt.mjs";
 //#region components/Input/index.ts
 var Input_default = Input;
 //#endregion

package/dist/components/Link/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\nimport { RouterLink, type RouterLinkComponentProps } from 'design-system/lib/router';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\ninterface BaseLinkProps {\n  /**\n   * The content to display inside the link.\n   *\n   */\n  children?: ReactNode;\n  /**\n   * Provides an accessible name for the link when the visible text alone\n   * isn't descriptive enough for screen reader users\n   */\n  'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n   */\n  url: string;\n\n  /**\n   * Where to open the link. Use \"_blank\" for external links to open in a new tab.\n   */\n  target?: Target;\n}\n\ninterface InternalLinkProps extends BaseLinkProps, Omit<RouterLinkComponentProps, 'to' | 'children'> {\n  /**\n   * The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n   */\n  url: string;\n}\n\nexport type LinkProps = ExternalLinkProps | InternalLinkProps;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  /* Uses padding here since we can't define flex on the element for multiline support */\n  padding-left: 2px;\n  /* Needed to reset the height of the container for SVG */\n  line-height: 0;\n  position: relative;\n  /* Optical alignment adjustments */\n  bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple600)};\n  width: fit-content;\n  position: relative;\n  overflow: hidden;\n  text-decoration: underline;\n\n  transition:\n    color ${TransitionDuration.ExtraFast} ease-out,\n    text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n  text-underline-offset: 2px;\n\n  &:hover {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentHover', Color.CorePurple800)};\n    text-underline-offset: ${Spacing[1]};\n  }\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  ${focusOutline}\n\n  &:active {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentActive', Color.CorePurple900)};\n  }\n`;\n\nconst StyledAnchor = styled.a`\n  ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n  ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n  // Check if the URL is external by looking at the protocol or if target is _blank\n  const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n  const hasBlankTarget = props.target === '_blank';\n  const isExternal = isAbsoluteUrl || hasBlankTarget;\n\n  if (isExternal) {\n    const { 'aria-label': ariaLabel, ...anchorProps } = props;\n    const externalProps = {\n      href: url,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      'aria-label': ariaLabel,\n      // Automatically inform screen readers that link opens in new window\n      title: ariaLabel ? undefined : 'Opens in new window',\n      ...anchorProps,\n    };\n\n    return (\n      <StyledAnchor {...externalProps}>\n        {children}\n        <IconContainer>\n          <LinkExternalIcon size={12} />\n        </IconContainer>\n      </StyledAnchor>\n    );\n  }\n\n  const { 'aria-label': ariaLabel, ...routerProps } = props;\n  const internalProps = {\n    to: url,\n    'aria-label': ariaLabel,\n\n    ...routerProps,\n  };\n\n  return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;;AA+CA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;;;;;;;oBAOvC;oCACgB;;;;cAI3C,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,cAAc,CAAC;6BAC1D,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;cAGH,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,cAAc,CAAC;;;AAIxF,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAO,WAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAInB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\nimport { RouterLink, type RouterLinkComponentProps } from 'design-system/lib/router';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\ninterface BaseLinkProps {\n  /**\n   * The content to display inside the link.\n   *\n   */\n  children?: ReactNode;\n  /**\n   * Provides an accessible name for the link when the visible text alone\n   * isn't descriptive enough for screen reader users\n   */\n  'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n   */\n  url: string;\n\n  /**\n   * Where to open the link. Use \"_blank\" for external links to open in a new tab.\n   */\n  target?: Target;\n}\n\ninterface InternalLinkProps\n  extends BaseLinkProps, Omit<RouterLinkComponentProps, 'to' | 'children'> {\n  /**\n   * The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n   */\n  url: string;\n}\n\nexport type LinkProps = ExternalLinkProps | InternalLinkProps;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  /* Uses padding here since we can't define flex on the element for multiline support */\n  padding-left: 2px;\n  /* Needed to reset the height of the container for SVG */\n  line-height: 0;\n  position: relative;\n  /* Optical alignment adjustments */\n  bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple600)};\n  width: fit-content;\n  position: relative;\n  overflow: hidden;\n  text-decoration: underline;\n\n  transition:\n    color ${TransitionDuration.ExtraFast} ease-out,\n    text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n  text-underline-offset: 2px;\n\n  &:hover {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentHover', Color.CorePurple800)};\n    text-underline-offset: ${Spacing[1]};\n  }\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  ${focusOutline}\n\n  &:active {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentActive', Color.CorePurple900)};\n  }\n`;\n\nconst StyledAnchor = styled.a`\n  ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n  ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n  // Check if the URL is external by looking at the protocol or if target is _blank\n  const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n  const hasBlankTarget = props.target === '_blank';\n  const isExternal = isAbsoluteUrl || hasBlankTarget;\n\n  if (isExternal) {\n    const { 'aria-label': ariaLabel, ...anchorProps } = props;\n    const externalProps = {\n      href: url,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      'aria-label': ariaLabel,\n      // Automatically inform screen readers that link opens in new window\n      title: ariaLabel ? undefined : 'Opens in new window',\n      ...anchorProps,\n    };\n\n    return (\n      <StyledAnchor {...externalProps}>\n        {children}\n        <IconContainer>\n          <LinkExternalIcon size={12} />\n        </IconContainer>\n      </StyledAnchor>\n    );\n  }\n\n  const { 'aria-label': ariaLabel, ...routerProps } = props;\n  const internalProps = {\n    to: url,\n    'aria-label': ariaLabel,\n\n    ...routerProps,\n  };\n\n  return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;;AAgDA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;;;;;;;oBAOvC;oCACgB;;;;cAI3C,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,cAAc,CAAC;6BAC1D,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;cAGH,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,cAAc,CAAC;;;AAIxF,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAO,WAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAInB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}

package/dist/components/ListBox/index.d.mts

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-D-8iwYVj.mjs";
-import { n as LogicRowProps } from "../../LogicRow-CgPds2tq.mjs";
-import { t as ListBox } from "../../index-BZmGEbsA.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-nYAdYVQx.mjs";
+import { n as LogicRowProps } from "../../LogicRow-k4ZPtjN0.mjs";
+import { t as ListBox } from "../../index-BXdrzR0c.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, LogicRowProps, useListBoxContext };

package/dist/components/ListBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as useListBoxContext, t as ListBox } from "../../ListBox-CFBhILRy.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-D4j4LCT3.mjs";
 export { ListBox, ListBox as default, useListBoxContext };

package/dist/components/MaskedInput/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input } from "../../Input-Bc2yWH3j.mjs";
+import { n as Input } from "../../Input-C_3QwAAt.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { IMaskMixin } from "react-imask";

package/dist/components/Menu/index.d.mts

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-CSwzFqdv.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-Bu7-KBhp.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/components/Modal/index.d.mts

@@ -1,2 +1,2 @@
-import _default, { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger } from "../../Modal.mjs";
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "../../Modal-Dwq-QBw_.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/components/Modal/index.mjs

@@ -1,258 +1,2 @@
-import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
-import { t as Card_default } from "../../Card-Dz6jqJuJ.mjs";
-import { n as Heading$1 } from "../../Text-BdluS7Fy.mjs";
-import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "../../lib/useEmbeddedSurface.mjs";
-import useModalInsetRight from "../../lib/useModalInsetRight.mjs";
-import { n as Stack, t as HStack } from "../../Stack-ChsImaEY.mjs";
-import { n as Button$1 } from "../../IconButton-CqTPMhjV.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-BepWbJHz.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
-import { forwardRef, useContext, useEffect, useState } from "react";
-import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { XIcon } from "@persona/icons";
-//#region components/Modal/Modal.tsx
-const StyledModalOverlay = styled(ModalOverlay)`
-  @keyframes overlayShow {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: ${({ $insetRight }) => $insetRight};
-  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;
-  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;
-  animation-fill-mode: both;
-  ${({ $hostPending }) => $hostPending && `
-    animation-play-state: paused;
-  `}
-  @media (prefers-reduced-motion: reduce) {
-    animation-duration: 0ms;
-    animation-delay: 0ms;
-    animation-play-state: running;
-  }
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const StyledModal = styled(Modal)`
-  z-index: 10001;
-  outline: none;
-  width: fit-content;
-  max-width: 100%;
-  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
-`;
-/**
-* React Aria keeps the overlay mounted through the exit animation, so announcing the surface from
-* here — rather than from the persistent gate below — releases the host's backdrop exactly when the
-* modal stops being painted.
-*/
-const EmbeddedSurfaceModal = forwardRef(function EmbeddedSurfaceModal({ children, surfaceId }, ref) {
-	useEmbeddedSurface(surfaceId);
-	return /* @__PURE__ */ jsx(StyledModal, {
-		ref,
-		children
-	});
-});
-const EmbeddedSurfaceOverlay = ({ surfaceId, ...props }) => {
-	const isOpen = useContext(OverlayTriggerStateContext)?.isOpen ?? false;
-	const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);
-	const { $insetRight, $transitionMs, ...overlayProps } = props;
-	return /* @__PURE__ */ jsx(StyledModalOverlay, {
-		...overlayProps,
-		$insetRight,
-		$transitionMs,
-		$animationDelayMs: animationDelayMs,
-		$hostPending: isOpen && !ready
-	});
-};
-const ModalCloseButton = styled(Button$1)`
-  display: inline-flex;
-  padding: ${Spacing[2]};
-  border-radius: ${Spacing[1]};
-  width: fit-content;
-  min-width: unset;
-`;
-const ModalFooter = styled(HStack).attrs({
-	justify: "flex-end",
-	align: "center",
-	spacing: Spacing[2]
-})`
-  padding: ${Spacing[3]} ${Spacing[4]};
-  border-top: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
-`;
-const ModalHeaderTitle = styled.div`
-  flex: 1;
-`;
-const ModalTrigger = DialogTrigger;
-const ModalContent = StyledModal;
-const ModalClose = (props) => {
-	return /* @__PURE__ */ jsx(Button, {
-		slot: "close",
-		style: {
-			all: "unset",
-			display: "contents"
-		},
-		children: /* @__PURE__ */ jsx(ModalCloseButton, {
-			variant: "text",
-			width: "icon",
-			size: "md",
-			...props,
-			children: /* @__PURE__ */ jsx(XIcon, {})
-		})
-	});
-};
-const ModalTitle = ({ children, ...props }) => {
-	return /* @__PURE__ */ jsx(Heading$1, {
-		size: "sm",
-		color: "primary",
-		as: Heading,
-		slot: "title",
-		...props,
-		children
-	});
-};
-const ModalHeader = styled(HStack)`
-  border-bottom: ${({ $hasTabs, theme }) => $hasTabs ? "none" : `1px solid ${semanticColor(theme, "BorderSubtle", Color.BorderDivider)}`};
-  padding: ${({ $hasTabs }) => $hasTabs ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}` : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};
-`;
-const ModalTabBar = styled(TabBar)`
-  padding-left: ${Spacing[4]};
-`;
-const StyledDialog = styled(Dialog)`
-  outline: none;
-`;
-const StyledCard = styled(Card_default)`
-  position: relative;
-  width: ${({ $size }) => {
-	switch ($size) {
-		case "auto": return "auto";
-		case "full": return "calc(100vw - 160px)";
-		default: return "90vw";
-	}
-}};
-  max-width: ${({ theme, $size }) => {
-	switch ($size) {
-		case "auto": return "auto";
-		case "full": return "calc(100vw - 160px)";
-		default: return theme.modal.width[$size];
-	}
-}};
-  /* TODO: Use breakpoints to make this responsive */
-  max-height: ${({ $size }) => $size === "full" ? "calc(100vh - 160px)" : "85vh"};
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  ${({ $size }) => $size === "full" && `
-    height: calc(100vh - 160px);
-  `}
-  margin-bottom: 0;
-`;
-const StyledModalCardBody = styled(Card_default.Body)`
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-  ${({ $noPadding }) => $noPadding ? "padding: 0;" : `
-    padding-left: ${Spacing[4]};
-    padding-right: ${Spacing[4]};
-  `}
-  ${({ $hidden }) => $hidden && "display: none;"}
-`;
-/**
-* Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.
-*/
-const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, portalContainer, ...props }, ref) {
-	const [selectedTabIdx, setSelectedTabIdx] = useState(0);
-	useEffect(() => {
-		setSelectedTabIdx(0);
-	}, [tabs?.length ?? 0]);
-	const titleAndClose = /* @__PURE__ */ jsxs(ModalHeader, {
-		justify: "flex-start",
-		align: "center",
-		spacing: Spacing[2],
-		$hasTabs: Boolean(tabs),
-		children: [/* @__PURE__ */ jsx(ModalHeaderTitle, { children: title ? /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null }), showCloseButton && /* @__PURE__ */ jsx(ModalClose, { "aria-label": "Close" })]
-	});
-	const modalHeader = tabs ? /* @__PURE__ */ jsxs(Stack, { children: [titleAndClose, /* @__PURE__ */ jsx(ModalTabBar, { children: tabs.map((tab, idx) => /* @__PURE__ */ jsx(Tab, {
-		selected: selectedTabIdx === idx,
-		id: `pds-modal_tab-${idx}`,
-		onClick: () => setSelectedTabIdx(idx),
-		"aria-controls": `pds-modal_tab-panel-${idx}`,
-		children: tab.name
-	}, tab.name)) })] }) : titleAndClose;
-	return /* @__PURE__ */ jsx(StyledDialog, {
-		...props,
-		ref,
-		children: /* @__PURE__ */ jsxs(StyledCard, {
-			elevated: true,
-			$size: size,
-			children: [
-				(showCloseButton || title) && modalHeader,
-				tabs ? tabs.map((tab, idx) => /* @__PURE__ */ jsx(StyledModalCardBody, {
-					$noPadding: noBodyPadding,
-					$hidden: selectedTabIdx !== idx,
-					role: tabs ? "tabpanel" : void 0,
-					id: `pds-modal_tab-panel-${tab.name}`,
-					"aria-labelledby": `pds-modal_tab-${tab.name}`,
-					children: typeof tab.contents === "function" ? tab.contents({ portalContainer }) : tab.contents
-				}, tab.name)) : /* @__PURE__ */ jsx(StyledModalCardBody, {
-					$noPadding: noBodyPadding,
-					role: tabs ? "tabpanel" : void 0,
-					id: `pds-modal_tab-panel-${selectedTabIdx}`,
-					"aria-labelledby": `pds-modal_tab-${selectedTabIdx}`,
-					children
-				}),
-				footer && /* @__PURE__ */ jsx(ModalFooter, { children: footer })
-			]
-		})
-	});
-});
-const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size = "md", title, footer, tabs, defaultOpen, onOpenChange, isDismissable = false, isKeyboardDismissDisabled = false, open }) => {
-	const [portalContainer, setPortalContainer] = useState(null);
-	const surfaceId = useEmbeddedSurfaceId();
-	const { insetRight: modalInsetRight, panelState } = useModalInsetRight();
-	const transitionMs = panelState === "opening" ? 425 : panelState === "closing" ? 200 : 0;
-	const content = /* @__PURE__ */ jsx(ModalCard, {
-		size,
-		title,
-		footer,
-		tabs,
-		noBodyPadding,
-		...contentProps,
-		portalContainer,
-		children: typeof children === "function" ? children({ portalContainer }) : children
-	});
-	return /* @__PURE__ */ jsxs(DialogTrigger, {
-		isOpen: open,
-		defaultOpen,
-		onOpenChange,
-		children: [trigger ? /* @__PURE__ */ jsx(Pressable, { children: trigger }) : null, /* @__PURE__ */ jsx(EmbeddedSurfaceOverlay, {
-			surfaceId,
-			$insetRight: modalInsetRight,
-			$transitionMs: transitionMs,
-			isDismissable,
-			isKeyboardDismissDisabled,
-			shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
-			children: /* @__PURE__ */ jsx(EmbeddedSurfaceModal, {
-				ref: setPortalContainer,
-				surfaceId,
-				children: content
-			})
-		})]
-	});
-};
-var Modal_default = Object.assign(Modal$1, { Title: ModalTitle });
-//#endregion
+import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-BN0K8QXi.mjs";
 export { ModalClose, ModalContent, ModalTrigger, Modal_default as default };
-
-//# sourceMappingURL=index.mjs.map

package/dist/components/PageHeader/index.mjs

@@ -1,2 +1,2 @@
-import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-DJOlcAiW.mjs";
+import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-BTtm3hRQ.mjs";
 export { PageHeaderContainer, PageHeader as default };

package/dist/components/Pagination/index.d.mts

@@ -1,4 +1,4 @@
-import { t as Pagination } from "../../Pagination-ne9hnVoe.mjs";
-import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-BMz2Q4P6.mjs";
-import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-D8bzZ-7B.mjs";
+import { t as Pagination } from "../../Pagination-H-CcXrCD.mjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-CeGC84N1.mjs";
+import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-BpwnTzcv.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

package/dist/components/Pagination/index.mjs

@@ -1,2 +1,2 @@
-import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-B1u203DE.mjs";
+import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-CPd4mSnw.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };

package/dist/components/ProgressIndicator/index.d.mts

@@ -1,2 +1,2 @@
-import { ProgressIndicator, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus } from "../../ProgressIndicator.mjs";
-export { ProgressIndicator, ProgressIndicator as default, type ProgressIndicatorProps, type ProgressIndicatorStep, type StepStatus };
+import { i as StepStatus, n as ProgressIndicatorProps, r as ProgressIndicatorStep, t as ProgressIndicator } from "../../ProgressIndicator-DbOLOaxJ.mjs";
+export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };