@persona/design-system 0.1.5-pre.4

package/dist/SliderRHF.d.cts

@@ -0,0 +1,2 @@
+import { t as SliderRHF } from "./SliderRHF-Cc-9RuPe.cjs";
+export = SliderRHF;

package/dist/SliderRHF.d.mts

@@ -0,0 +1,2 @@
+import { t as SliderRHF } from "./SliderRHF-DIV-tCEv.mjs";
+export { SliderRHF as default };

package/dist/SliderThumb.d.mts

@@ -0,0 +1,139 @@
+import { t as Orientation } from "./index-CKu60b9I.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { OutputHTMLAttributes, ReactNode, RefObject } from "react";
+
+//#region ../../node_modules/@react-stately/slider/dist/types.d.ts
+interface SliderState {
+  /**
+   * Values managed by the slider by thumb index.
+   */
+  readonly values: number[];
+  /**
+   * The default values for each thumb.
+   */
+  readonly defaultValues: number[];
+  /**
+   * Get the value for the specified thumb.
+   * @param index
+   */
+  getThumbValue(index: number): number;
+  /**
+   * Sets the value for the specified thumb.
+   * The actual value set will be clamped and rounded according to min/max/step.
+   * @param index
+   * @param value
+   */
+  setThumbValue(index: number, value: number): void;
+  /**
+   * Sets value for the specified thumb by percent offset (between 0 and 1).
+   * @param index
+   * @param percent
+   */
+  setThumbPercent(index: number, percent: number): void;
+  /**
+   * Whether the specific thumb is being dragged.
+   * @param index
+   */
+  isThumbDragging(index: number): boolean;
+  /**
+   * Set is dragging on the specified thumb.
+   * @param index
+   * @param dragging
+   */
+  setThumbDragging(index: number, dragging: boolean): void;
+  /**
+   * Currently-focused thumb index.
+   */
+  readonly focusedThumb: number | undefined;
+  /**
+   * Set focused true on specified thumb. This will remove focus from
+   * any thumb that had it before.
+   * @param index
+   */
+  setFocusedThumb(index: number | undefined): void;
+  /**
+   * Returns the specified thumb's value as a percentage from 0 to 1.
+   * @param index
+   */
+  getThumbPercent(index: number): number;
+  /**
+   * Returns the value as a percent between the min and max of the slider.
+   * @param index
+   */
+  getValuePercent(value: number): number;
+  /**
+   * Returns the string label for the specified thumb's value, per props.formatOptions.
+   * @param index
+   */
+  getThumbValueLabel(index: number): string;
+  /**
+   * Returns the string label for the value, per props.formatOptions.
+   * @param index
+   */
+  getFormattedValue(value: number): string;
+  /**
+   * Returns the min allowed value for the specified thumb.
+   * @param index
+   */
+  getThumbMinValue(index: number): number;
+  /**
+   * Returns the max allowed value for the specified thumb.
+   * @param index
+   */
+  getThumbMaxValue(index: number): number;
+  /**
+   * Converts a percent along track (between 0 and 1) to the corresponding value.
+   * @param percent
+   */
+  getPercentValue(percent: number): number;
+  /**
+   * Returns if the specified thumb is editable.
+   * @param index
+   */
+  isThumbEditable(index: number): boolean;
+  /**
+   * Set the specified thumb's editable state.
+   * @param index
+   * @param editable
+   */
+  setThumbEditable(index: number, editable: boolean): void;
+  /**
+   * Increments the value of the thumb by the step or page amount.
+   */
+  incrementThumb(index: number, stepSize?: number): void;
+  /**
+   * Decrements the value of the thumb by the step or page amount.
+   */
+  decrementThumb(index: number, stepSize?: number): void;
+  /**
+   * The step amount for the slider.
+   */
+  readonly step: number;
+  /**
+   * The page size for the slider, used to do a bigger step.
+   */
+  readonly pageSize: number;
+  /** The orientation of the slider. */
+  readonly orientation: Orientation;
+  /** Whether the slider is disabled. */
+  readonly isDisabled: boolean;
+}
+//#endregion
+//#region components/Slider/SliderThumb.d.ts
+interface SliderThumbProps {
+  state: SliderState;
+  trackRef: RefObject<HTMLElement>;
+  index: number;
+  outputProps: OutputHTMLAttributes<HTMLOutputElement>;
+  hideTooltips?: boolean;
+}
+declare const SliderThumb: ({
+  state,
+  trackRef,
+  index,
+  outputProps,
+  hideTooltips
+}: SliderThumbProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SliderThumb as default };
+//# sourceMappingURL=SliderThumb.d.mts.map

package/dist/Spacer-DWGkX170.cjs

@@ -0,0 +1,20 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+require("./variables/spacing.cjs");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+//#endregion
+//#region components/Spacer/index.ts
+var Spacer_default = styled_components.default.div.attrs(() => ({ "aria-hidden": true }))`
+  height: ${({ height = 5 }) => height * 8}px;
+  width: ${({ width = 0 }) => width * 8}px;
+  flex: none;
+`;
+//#endregion
+Object.defineProperty(exports, "Spacer_default", {
+	enumerable: true,
+	get: function() {
+		return Spacer_default;
+	}
+});
+
+//# sourceMappingURL=Spacer-DWGkX170.cjs.map

package/dist/Spacer-DWGkX170.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer-DWGkX170.cjs","names":[],"sources":["../components/Spacer/Spacer.tsx","../components/Spacer/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface SpacerProps {\n  height?: number;\n  width?: number;\n}\n\n/**\n * A simple spacer element used to provide vertical space in grids.\n *\n * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.\n */\nconst Spacer = styled.div.attrs(() => ({ 'aria-hidden': true }))<SpacerProps>`\n  height: ${({ height = 5 }) => height * BASE}px;\n  width: ${({ width = 0 }) => width * BASE}px;\n  flex: none;\n`;\n\nexport default Spacer;\n","import Spacer from './Spacer';\n\nexport default Spacer;\n"],"mappings":";;;;;;ACEA,IAAA,iBAAe,ADYA,kBAAA,QAAO,IAAI,aAAa,EAAE,eAAe,MAAM,EAAE;aACnD,EAAE,SAAS,QAAQ,SAAA,EAAc;YAClC,EAAE,QAAQ,QAAQ,QAAA,EAAa"}

package/dist/Spacer-DxH_sQrV.mjs

@@ -0,0 +1,13 @@
+import "./variables/spacing.mjs";
+import styled from "styled-components";
+//#endregion
+//#region components/Spacer/index.ts
+var Spacer_default = styled.div.attrs(() => ({ "aria-hidden": true }))`
+  height: ${({ height = 5 }) => height * 8}px;
+  width: ${({ width = 0 }) => width * 8}px;
+  flex: none;
+`;
+//#endregion
+export { Spacer_default as t };
+
+//# sourceMappingURL=Spacer-DxH_sQrV.mjs.map

package/dist/Spacer-DxH_sQrV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer-DxH_sQrV.mjs","names":[],"sources":["../components/Spacer/Spacer.tsx","../components/Spacer/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface SpacerProps {\n  height?: number;\n  width?: number;\n}\n\n/**\n * A simple spacer element used to provide vertical space in grids.\n *\n * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.\n */\nconst Spacer = styled.div.attrs(() => ({ 'aria-hidden': true }))<SpacerProps>`\n  height: ${({ height = 5 }) => height * BASE}px;\n  width: ${({ width = 0 }) => width * BASE}px;\n  flex: none;\n`;\n\nexport default Spacer;\n","import Spacer from './Spacer';\n\nexport default Spacer;\n"],"mappings":";;;;ACEA,IAAA,iBAAe,ADYA,OAAO,IAAI,aAAa,EAAE,eAAe,MAAM,EAAE;aACnD,EAAE,SAAS,QAAQ,SAAA,EAAc;YAClC,EAAE,QAAQ,QAAQ,QAAA,EAAa"}

package/dist/Spacer.d.cts

@@ -0,0 +1,17 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Spacer/Spacer.d.ts
+interface SpacerProps {
+  height?: number;
+  width?: number;
+}
+/**
+ * A simple spacer element used to provide vertical space in grids.
+ *
+ * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.
+ */
+declare const Spacer: _$styled_components0.StyledComponent<"div", any, {
+  'aria-hidden': true;
+} & SpacerProps, "aria-hidden">;
+export = Spacer;
+//# sourceMappingURL=Spacer.d.cts.map

package/dist/Spacer.d.mts

@@ -0,0 +1,18 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Spacer/Spacer.d.ts
+interface SpacerProps {
+  height?: number;
+  width?: number;
+}
+/**
+ * A simple spacer element used to provide vertical space in grids.
+ *
+ * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.
+ */
+declare const Spacer: _$styled_components0.StyledComponent<"div", any, {
+  'aria-hidden': true;
+} & SpacerProps, "aria-hidden">;
+//#endregion
+export { Spacer as default };
+//# sourceMappingURL=Spacer.d.mts.map

package/dist/Spinner-C05An_fn.mjs

@@ -0,0 +1,41 @@
+import "./variables/transitions.mjs";
+import { rotate } from "./variables/keyframes.mjs";
+import { Color } from "@persona/design-tokens";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LoaderIcon } from "@persona/icons";
+import { LoaderIcon as LoaderIcon$1 } from "@persona/icons/24px";
+//#region components/Spinner/Spinner.tsx
+const SPINNER_COLOR = {
+	default: Color.BorderIconPrimary,
+	inverse: Color.BorderIconInverse
+};
+const Container = styled.span`
+  line-height: 0;
+  display: inline-block;
+`;
+const VisuallyHidden = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+`;
+const IconContainer = styled.span`
+  display: inline-block;
+  animation: ${rotate} ${"1000ms"} linear infinite;
+`;
+const Spinner = ({ variant = "default", size = "sm", srText, className }) => {
+	const resolvedColor = SPINNER_COLOR[variant];
+	return /* @__PURE__ */ jsxs(Container, {
+		role: "status",
+		"aria-label": "loading spinner",
+		className,
+		children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: srText ?? "Loading..." }), /* @__PURE__ */ jsx(IconContainer, { children: size === "sm" ? /* @__PURE__ */ jsx(LoaderIcon, { color: resolvedColor }) : /* @__PURE__ */ jsx(LoaderIcon$1, { color: resolvedColor }) })]
+	});
+};
+//#endregion
+export { Spinner as t };
+
+//# sourceMappingURL=Spinner-C05An_fn.mjs.map

package/dist/Spinner-C05An_fn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner-C05An_fn.mjs","names":["LoaderIconMedium"],"sources":["../components/Spinner/Spinner.tsx"],"sourcesContent":["import { rotate } from '@persona/design-system/variables/keyframes';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Color } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { LoaderIcon as LoaderIconMedium } from '@persona/icons/24px';\nimport styled from 'styled-components';\n\nexport type SpinnerVariant = 'default' | 'inverse';\n\nconst SPINNER_COLOR: Record<SpinnerVariant, string> = {\n  default: Color.BorderIconPrimary,\n  inverse: Color.BorderIconInverse,\n};\n\ntype SpinnerSize = 'sm' | 'md';\n\ninterface SpinnerProps {\n  /**\n   * `default` uses {@link Color.BorderIconPrimary}; `inverse` uses {@link Color.BorderIconInverse}\n   * (e.g. on dark backgrounds).\n   */\n  variant?: SpinnerVariant;\n  /** Size of the spinner. Defaults to 'sm'. */\n  size?: SpinnerSize;\n  /** Screen reader text. Defaults to \"Loading...\". */\n  srText?: string;\n  className?: string;\n}\n\nconst Container = styled.span`\n  line-height: 0;\n  display: inline-block;\n`;\n\nconst VisuallyHidden = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n`;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  animation: ${rotate} ${TransitionDuration.OneSecond} linear infinite;\n`;\n\nexport const Spinner = ({ variant = 'default', size = 'sm', srText, className }: SpinnerProps) => {\n  const resolvedColor = SPINNER_COLOR[variant];\n  return (\n    <Container role='status' aria-label='loading spinner' className={className}>\n      <VisuallyHidden>{srText ?? 'Loading...'}</VisuallyHidden>\n      <IconContainer>\n        {size === 'sm' ? (\n          <LoaderIcon color={resolvedColor} />\n        ) : (\n          <LoaderIconMedium color={resolvedColor} />\n        )}\n      </IconContainer>\n    </Container>\n  );\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAgD;CACpD,SAAS,MAAM;CACf,SAAS,MAAM;CAChB;AAiBD,MAAM,YAAY,OAAO,IAAI;;;;AAK7B,MAAM,iBAAiB,OAAO,IAAI;;;;;;;;AASlC,MAAM,gBAAgB,OAAO,IAAI;;eAElB,OAAO,GAAA,SAAgC;;AAGtD,MAAa,WAAW,EAAE,UAAU,WAAW,OAAO,MAAM,QAAQ,gBAA8B;CAChG,MAAM,gBAAgB,cAAc;AACpC,QACE,qBAAC,WAAD;EAAW,MAAK;EAAS,cAAW;EAA6B;YAAjE,CACE,oBAAC,gBAAD,EAAA,UAAiB,UAAU,cAA8B,CAAA,EACzD,oBAAC,eAAD,EAAA,UACG,SAAS,OACR,oBAAC,YAAD,EAAY,OAAO,eAAiB,CAAA,GAEpC,oBAACA,cAAD,EAAkB,OAAO,eAAiB,CAAA,EAE9B,CAAA,CACN"}

package/dist/Spinner-z7DrPE1d.cjs

@@ -0,0 +1,48 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+require("./variables/transitions.cjs");
+const require_variables_keyframes = require("./variables/keyframes.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 _persona_icons = require("@persona/icons");
+let _persona_icons_24px = require("@persona/icons/24px");
+//#region components/Spinner/Spinner.tsx
+const SPINNER_COLOR = {
+	default: _persona_design_tokens.Color.BorderIconPrimary,
+	inverse: _persona_design_tokens.Color.BorderIconInverse
+};
+const Container = styled_components.default.span`
+  line-height: 0;
+  display: inline-block;
+`;
+const VisuallyHidden = styled_components.default.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+`;
+const IconContainer = styled_components.default.span`
+  display: inline-block;
+  animation: ${require_variables_keyframes.rotate} ${"1000ms"} linear infinite;
+`;
+const Spinner = ({ variant = "default", size = "sm", srText, className }) => {
+	const resolvedColor = SPINNER_COLOR[variant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
+		role: "status",
+		"aria-label": "loading spinner",
+		className,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisuallyHidden, { children: srText ?? "Loading..." }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconContainer, { children: size === "sm" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.LoaderIcon, { color: resolvedColor }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_24px.LoaderIcon, { color: resolvedColor }) })]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "Spinner", {
+	enumerable: true,
+	get: function() {
+		return Spinner;
+	}
+});
+
+//# sourceMappingURL=Spinner-z7DrPE1d.cjs.map

package/dist/Spinner-z7DrPE1d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner-z7DrPE1d.cjs","names":["Color","rotate","LoaderIcon","LoaderIconMedium"],"sources":["../components/Spinner/Spinner.tsx"],"sourcesContent":["import { rotate } from '@persona/design-system/variables/keyframes';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Color } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { LoaderIcon as LoaderIconMedium } from '@persona/icons/24px';\nimport styled from 'styled-components';\n\nexport type SpinnerVariant = 'default' | 'inverse';\n\nconst SPINNER_COLOR: Record<SpinnerVariant, string> = {\n  default: Color.BorderIconPrimary,\n  inverse: Color.BorderIconInverse,\n};\n\ntype SpinnerSize = 'sm' | 'md';\n\ninterface SpinnerProps {\n  /**\n   * `default` uses {@link Color.BorderIconPrimary}; `inverse` uses {@link Color.BorderIconInverse}\n   * (e.g. on dark backgrounds).\n   */\n  variant?: SpinnerVariant;\n  /** Size of the spinner. Defaults to 'sm'. */\n  size?: SpinnerSize;\n  /** Screen reader text. Defaults to \"Loading...\". */\n  srText?: string;\n  className?: string;\n}\n\nconst Container = styled.span`\n  line-height: 0;\n  display: inline-block;\n`;\n\nconst VisuallyHidden = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n`;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  animation: ${rotate} ${TransitionDuration.OneSecond} linear infinite;\n`;\n\nexport const Spinner = ({ variant = 'default', size = 'sm', srText, className }: SpinnerProps) => {\n  const resolvedColor = SPINNER_COLOR[variant];\n  return (\n    <Container role='status' aria-label='loading spinner' className={className}>\n      <VisuallyHidden>{srText ?? 'Loading...'}</VisuallyHidden>\n      <IconContainer>\n        {size === 'sm' ? (\n          <LoaderIcon color={resolvedColor} />\n        ) : (\n          <LoaderIconMedium color={resolvedColor} />\n        )}\n      </IconContainer>\n    </Container>\n  );\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;;AASA,MAAM,gBAAgD;CACpD,SAASA,uBAAAA,MAAM;CACf,SAASA,uBAAAA,MAAM;CAChB;AAiBD,MAAM,YAAY,kBAAA,QAAO,IAAI;;;;AAK7B,MAAM,iBAAiB,kBAAA,QAAO,IAAI;;;;;;;;AASlC,MAAM,gBAAgB,kBAAA,QAAO,IAAI;;eAElBC,4BAAAA,OAAO,GAAA,SAAgC;;AAGtD,MAAa,WAAW,EAAE,UAAU,WAAW,OAAO,MAAM,QAAQ,gBAA8B;CAChG,MAAM,gBAAgB,cAAc;AACpC,QACE,iBAAA,GAAA,kBAAA,MAAC,WAAD;EAAW,MAAK;EAAS,cAAW;EAA6B;YAAjE,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAA,UAAiB,UAAU,cAA8B,CAAA,EACzD,iBAAA,GAAA,kBAAA,KAAC,eAAD,EAAA,UACG,SAAS,OACR,iBAAA,GAAA,kBAAA,KAACC,eAAAA,YAAD,EAAY,OAAO,eAAiB,CAAA,GAEpC,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,YAAD,EAAkB,OAAO,eAAiB,CAAA,EAE9B,CAAA,CACN"}

package/dist/Spinner.d.cts

@@ -0,0 +1,26 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Spinner/Spinner.d.ts
+type SpinnerVariant = 'default' | 'inverse';
+type SpinnerSize = 'sm' | 'md';
+interface SpinnerProps {
+  /**
+   * `default` uses {@link Color.BorderIconPrimary}; `inverse` uses {@link Color.BorderIconInverse}
+   * (e.g. on dark backgrounds).
+   */
+  variant?: SpinnerVariant;
+  /** Size of the spinner. Defaults to 'sm'. */
+  size?: SpinnerSize;
+  /** Screen reader text. Defaults to "Loading...". */
+  srText?: string;
+  className?: string;
+}
+declare const Spinner: ({
+  variant,
+  size,
+  srText,
+  className
+}: SpinnerProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Spinner, Spinner as default, SpinnerVariant };
+//# sourceMappingURL=Spinner.d.cts.map

package/dist/Spinner.d.mts

@@ -0,0 +1,26 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Spinner/Spinner.d.ts
+type SpinnerVariant = 'default' | 'inverse';
+type SpinnerSize = 'sm' | 'md';
+interface SpinnerProps {
+  /**
+   * `default` uses {@link Color.BorderIconPrimary}; `inverse` uses {@link Color.BorderIconInverse}
+   * (e.g. on dark backgrounds).
+   */
+  variant?: SpinnerVariant;
+  /** Size of the spinner. Defaults to 'sm'. */
+  size?: SpinnerSize;
+  /** Screen reader text. Defaults to "Loading...". */
+  srText?: string;
+  className?: string;
+}
+declare const Spinner: ({
+  variant,
+  size,
+  srText,
+  className
+}: SpinnerProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Spinner, Spinner as default, SpinnerVariant };
+//# sourceMappingURL=Spinner.d.mts.map

package/dist/Stack-BHb3ZB2A.cjs

@@ -0,0 +1,53 @@
+const require_chunk = require("./chunk-CoPdw6nB.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");
+//#region components/Stack/Stack.tsx
+const Stack = (0, styled_components.default)("div")`
+  display: flex;
+  flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
+  gap: ${({ spacing }) => spacing || _persona_design_tokens.Spacing[2]};
+
+  ${({ align }) => align && styled_components.css`
+      align-items: ${align};
+    `}
+
+  ${({ justify }) => justify && styled_components.css`
+      justify-content: ${justify};
+    `}
+
+  ${({ wrap }) => wrap && styled_components.css`
+      flex-wrap: ${wrap};
+    `}
+
+  ${({ equal }) => equal && styled_components.css`
+      > * {
+        flex-grow: 1;
+        flex-basis: 0;
+      }
+    `}
+
+  ${({ fullWidth }) => fullWidth && styled_components.css`
+      width: 100%;
+    `}
+`;
+const HStack = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stack, {
+	...props,
+	direction: "horizontal"
+});
+//#endregion
+Object.defineProperty(exports, "HStack", {
+	enumerable: true,
+	get: function() {
+		return HStack;
+	}
+});
+Object.defineProperty(exports, "Stack", {
+	enumerable: true,
+	get: function() {
+		return Stack;
+	}
+});
+
+//# sourceMappingURL=Stack-BHb3ZB2A.cjs.map

package/dist/Stack-BHb3ZB2A.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack-BHb3ZB2A.cjs","names":["Spacing"],"sources":["../components/Stack/Stack.tsx"],"sourcesContent":["import { Spacing } from '@persona/design-tokens';\nimport type * as CSS from 'csstype';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport interface StackProps {\n  /**\n   * Spacing between items. Defaults to Spacing[3].\n   *\n   * @defaultValue Spacing[3]\n   */\n  spacing?: Spacing;\n\n  /**\n   * Direction of Stack. Defaults to vertical.\n   *\n   * @defaultValue 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n\n  /**\n   * Passed through as `align-items`\n   */\n  align?: CSS.Property.AlignItems;\n\n  /**\n   * Passed through as `justify-content`\n   */\n  justify?: CSS.Property.JustifyContent;\n\n  /**\n   * Passed through as `flex-wrap`\n   */\n  wrap?: CSS.Property.FlexWrap;\n\n  /**\n   * Give each item an equal width/height.\n   */\n  equal?: boolean;\n\n  /**\n   * Passed through as `width: 100%`\n   */\n  fullWidth?: boolean;\n}\n\nexport const Stack = styled('div')<StackProps>`\n  display: flex;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  gap: ${({ spacing }) => spacing || Spacing[2]};\n\n  ${({ align }) =>\n    align &&\n    css`\n      align-items: ${align};\n    `}\n\n  ${({ justify }) =>\n    justify &&\n    css`\n      justify-content: ${justify};\n    `}\n\n  ${({ wrap }) =>\n    wrap &&\n    css`\n      flex-wrap: ${wrap};\n    `}\n\n  ${({ equal }) =>\n    equal &&\n    css`\n      > * {\n        flex-grow: 1;\n        flex-basis: 0;\n      }\n    `}\n\n  ${({ fullWidth }) =>\n    fullWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nexport default Stack;\n\nexport type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;\n\nexport const HStack = (props: HStackProps) => <Stack {...props} direction='horizontal' />;\n"],"mappings":";;;;;;AA8CA,MAAa,QAAQ,CAAA,GAAA,kBAAA,SAAO,MAAM;;qBAEb,EAAE,gBAAiB,cAAc,eAAe,QAAQ,SAAU;UAC7E,EAAE,cAAc,WAAWA,uBAAAA,QAAQ,GAAG;;KAE3C,EAAE,YACH,SACA,kBAAA,GAAG;qBACc,MAAM;MACrB;;KAED,EAAE,cACH,WACA,kBAAA,GAAG;yBACkB,QAAQ;MAC3B;;KAED,EAAE,WACH,QACA,kBAAA,GAAG;mBACY,KAAK;MAClB;;KAED,EAAE,YACH,SACA,kBAAA,GAAG;;;;;MAKD;;KAED,EAAE,gBACH,aACA,kBAAA,GAAG;;MAED;;AAON,MAAa,UAAU,UAAuB,iBAAA,GAAA,kBAAA,KAAC,OAAD;CAAO,GAAI;CAAO,WAAU;CAAe,CAAA"}

package/dist/Stack-BntgUvsW.d.mts

@@ -0,0 +1,47 @@
+import { t as Property } from "./index-DQvVmqvS.mjs";
+import { Spacing } from "@persona/design-tokens";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
+
+//#region components/Stack/Stack.d.ts
+interface StackProps {
+  /**
+   * Spacing between items. Defaults to Spacing[3].
+   *
+   * @defaultValue Spacing[3]
+   */
+  spacing?: Spacing;
+  /**
+   * Direction of Stack. Defaults to vertical.
+   *
+   * @defaultValue 'vertical'
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * Passed through as `align-items`
+   */
+  align?: Property.AlignItems;
+  /**
+   * Passed through as `justify-content`
+   */
+  justify?: Property.JustifyContent;
+  /**
+   * Passed through as `flex-wrap`
+   */
+  wrap?: Property.FlexWrap;
+  /**
+   * Give each item an equal width/height.
+   */
+  equal?: boolean;
+  /**
+   * Passed through as `width: 100%`
+   */
+  fullWidth?: boolean;
+}
+declare const Stack: _$styled_components0.StyledComponent<"div", any, StackProps, never>;
+type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;
+declare const HStack: (props: HStackProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StackProps as i, HStackProps as n, Stack as r, HStack as t };
+//# sourceMappingURL=Stack-BntgUvsW.d.mts.map

package/dist/Stack-hwgS2FU1.mjs

@@ -0,0 +1,40 @@
+import { Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region components/Stack/Stack.tsx
+const Stack = styled("div")`
+  display: flex;
+  flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
+  gap: ${({ spacing }) => spacing || Spacing[2]};
+
+  ${({ align }) => align && css`
+      align-items: ${align};
+    `}
+
+  ${({ justify }) => justify && css`
+      justify-content: ${justify};
+    `}
+
+  ${({ wrap }) => wrap && css`
+      flex-wrap: ${wrap};
+    `}
+
+  ${({ equal }) => equal && css`
+      > * {
+        flex-grow: 1;
+        flex-basis: 0;
+      }
+    `}
+
+  ${({ fullWidth }) => fullWidth && css`
+      width: 100%;
+    `}
+`;
+const HStack = (props) => /* @__PURE__ */ jsx(Stack, {
+	...props,
+	direction: "horizontal"
+});
+//#endregion
+export { Stack as n, HStack as t };
+
+//# sourceMappingURL=Stack-hwgS2FU1.mjs.map

package/dist/Stack-hwgS2FU1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack-hwgS2FU1.mjs","names":[],"sources":["../components/Stack/Stack.tsx"],"sourcesContent":["import { Spacing } from '@persona/design-tokens';\nimport type * as CSS from 'csstype';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport interface StackProps {\n  /**\n   * Spacing between items. Defaults to Spacing[3].\n   *\n   * @defaultValue Spacing[3]\n   */\n  spacing?: Spacing;\n\n  /**\n   * Direction of Stack. Defaults to vertical.\n   *\n   * @defaultValue 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n\n  /**\n   * Passed through as `align-items`\n   */\n  align?: CSS.Property.AlignItems;\n\n  /**\n   * Passed through as `justify-content`\n   */\n  justify?: CSS.Property.JustifyContent;\n\n  /**\n   * Passed through as `flex-wrap`\n   */\n  wrap?: CSS.Property.FlexWrap;\n\n  /**\n   * Give each item an equal width/height.\n   */\n  equal?: boolean;\n\n  /**\n   * Passed through as `width: 100%`\n   */\n  fullWidth?: boolean;\n}\n\nexport const Stack = styled('div')<StackProps>`\n  display: flex;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  gap: ${({ spacing }) => spacing || Spacing[2]};\n\n  ${({ align }) =>\n    align &&\n    css`\n      align-items: ${align};\n    `}\n\n  ${({ justify }) =>\n    justify &&\n    css`\n      justify-content: ${justify};\n    `}\n\n  ${({ wrap }) =>\n    wrap &&\n    css`\n      flex-wrap: ${wrap};\n    `}\n\n  ${({ equal }) =>\n    equal &&\n    css`\n      > * {\n        flex-grow: 1;\n        flex-basis: 0;\n      }\n    `}\n\n  ${({ fullWidth }) =>\n    fullWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nexport default Stack;\n\nexport type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;\n\nexport const HStack = (props: HStackProps) => <Stack {...props} direction='horizontal' />;\n"],"mappings":";;;;AA8CA,MAAa,QAAQ,OAAO,MAAM;;qBAEb,EAAE,gBAAiB,cAAc,eAAe,QAAQ,SAAU;UAC7E,EAAE,cAAc,WAAW,QAAQ,GAAG;;KAE3C,EAAE,YACH,SACA,GAAG;qBACc,MAAM;MACrB;;KAED,EAAE,cACH,WACA,GAAG;yBACkB,QAAQ;MAC3B;;KAED,EAAE,WACH,QACA,GAAG;mBACY,KAAK;MAClB;;KAED,EAAE,YACH,SACA,GAAG;;;;;MAKD;;KAED,EAAE,gBACH,aACA,GAAG;;MAED;;AAON,MAAa,UAAU,UAAuB,oBAAC,OAAD;CAAO,GAAI;CAAO,WAAU;CAAe,CAAA"}

package/dist/Stack-toDRLy--.d.cts

@@ -0,0 +1,47 @@
+import { t as Property } from "./index-BM1DqNZf.cjs";
+import { ComponentPropsWithoutRef } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { Spacing } from "@persona/design-tokens";
+
+//#region components/Stack/Stack.d.ts
+interface StackProps {
+  /**
+   * Spacing between items. Defaults to Spacing[3].
+   *
+   * @defaultValue Spacing[3]
+   */
+  spacing?: Spacing;
+  /**
+   * Direction of Stack. Defaults to vertical.
+   *
+   * @defaultValue 'vertical'
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * Passed through as `align-items`
+   */
+  align?: Property.AlignItems;
+  /**
+   * Passed through as `justify-content`
+   */
+  justify?: Property.JustifyContent;
+  /**
+   * Passed through as `flex-wrap`
+   */
+  wrap?: Property.FlexWrap;
+  /**
+   * Give each item an equal width/height.
+   */
+  equal?: boolean;
+  /**
+   * Passed through as `width: 100%`
+   */
+  fullWidth?: boolean;
+}
+declare const Stack: _$styled_components0.StyledComponent<"div", any, StackProps, never>;
+type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;
+declare const HStack: (props: HStackProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StackProps as i, HStackProps as n, Stack as r, HStack as t };
+//# sourceMappingURL=Stack-toDRLy--.d.cts.map

package/dist/Stack.d.cts

@@ -0,0 +1,2 @@
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "./Stack-toDRLy--.cjs";
+export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/Stack.d.mts

@@ -0,0 +1,2 @@
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "./Stack-BntgUvsW.mjs";
+export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/StatusIndicator.d.cts

@@ -0,0 +1,54 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/StatusIndicator/StatusIndicator.d.ts
+type StatusType = 'neutral' | 'attention' | 'warning' | 'critical' | 'success' | 'feature' | 'informational' | 'miscellaneous';
+type BackgroundType = 'filled' | 'none';
+interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * The semantic status type to display
+   */
+  type?: StatusType;
+  /**
+   * Whether to show filled background or transparent
+   */
+  background?: BackgroundType;
+  /**
+   * Whether to show the icon. When false, displays label-only variant
+   * @default true
+   */
+  showIcon?: boolean;
+  /**
+   * Optional custom icon to replace the default icon indicator (12px recommended)
+   * - undefined (default): Shows the default CircleNullIcon
+   * - null: Hides the icon completely
+   * - ReactNode: Shows the provided custom icon
+   * Note: showIcon must be true for this to take effect
+   */
+  leadingIcon?: ReactNode | null;
+  /**
+   * The text label to display
+   */
+  children?: ReactNode;
+}
+/**
+ * StatusIndicator displays semantic status information with a colored icon and label.
+ * Supports both filled backgrounds and transparent styles.
+ *
+ * @example
+ * ```tsx
+ * <StatusIndicator type="success" background="filled">Approved</StatusIndicator>
+ * <StatusIndicator type="critical" background="none">Failed</StatusIndicator>
+ * ```
+ */
+declare const StatusIndicator: ({
+  type,
+  background,
+  showIcon,
+  leadingIcon,
+  children,
+  ...props
+}: StatusIndicatorProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BackgroundType, StatusIndicator, StatusIndicator as default, StatusIndicatorProps, StatusType };
+//# sourceMappingURL=StatusIndicator.d.cts.map