@persona/design-system 0.1.5-pre.4

package/dist/components/StatusIndicator/index.cjs

@@ -0,0 +1,174 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_mixins_text = require("../../mixins/text.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_12px = require("@persona/icons/12px");
+//#region components/StatusIndicator/StatusIndicator.tsx
+const FILLED_STATUS_COLORS = {
+	neutral: {
+		background: _persona_design_tokens.Color.BackgroundStatusIndicatorDefault,
+		text: _persona_design_tokens.Color.TextStatusIndicatorDefault,
+		icon: _persona_design_tokens.Color.BorderIconLabelGrey
+	},
+	attention: {
+		background: _persona_design_tokens.Color.BackgroundStatusIndicatorAttention,
+		text: _persona_design_tokens.Color.TextStatusIndicatorAttention,
+		icon: _persona_design_tokens.Color.BorderIconLabelYellow
+	},
+	warning: {
+		background: _persona_design_tokens.Color.BackgroundStatusIndicatorWarning,
+		text: _persona_design_tokens.Color.TextStatusIndicatorWarning,
+		icon: _persona_design_tokens.Color.BorderIconLabelOrange
+	},
+	critical: {
+		background: _persona_design_tokens.Color.BackgroundStatusIndicatorCritical,
+		text: _persona_design_tokens.Color.TextStatusIndicatorCritical,
+		icon: _persona_design_tokens.Color.BorderIconLabelRed
+	},
+	success: {
+		background: _persona_design_tokens.Color.BackgroundStatusIndicatorSuccess,
+		text: _persona_design_tokens.Color.TextStatusIndicatorSuccess,
+		icon: _persona_design_tokens.Color.BorderIconLabelGreen
+	},
+	feature: {
+		background: _persona_design_tokens.Color.BackgroundStatusIndicatorFeature,
+		text: _persona_design_tokens.Color.TextStatusIndicatorFeature,
+		icon: _persona_design_tokens.Color.BorderIconLabelPurple
+	},
+	informational: {
+		background: _persona_design_tokens.Color.BackgroundStatusIndicatorInformational,
+		text: _persona_design_tokens.Color.TextStatusIndicatorInformational,
+		icon: _persona_design_tokens.Color.BorderIconLabelBlue
+	},
+	miscellaneous: {
+		background: _persona_design_tokens.Color.BackgroundStatusIndicatorMiscellaneous,
+		text: _persona_design_tokens.Color.TextStatusIndicatorMiscellaneous,
+		icon: _persona_design_tokens.Color.BorderIconLabelTeal
+	}
+};
+const TRANSPARENT_STATUS_COLORS = {
+	neutral: {
+		background: "transparent",
+		text: _persona_design_tokens.Color.TextPrimary,
+		icon: _persona_design_tokens.Color.BorderIconSecondary
+	},
+	attention: {
+		background: "transparent",
+		text: _persona_design_tokens.Color.TextPrimary,
+		icon: _persona_design_tokens.Color.BorderIconWarning
+	},
+	warning: {
+		background: "transparent",
+		text: _persona_design_tokens.Color.TextPrimary,
+		icon: _persona_design_tokens.Color.BorderIconWarning
+	},
+	critical: {
+		background: "transparent",
+		text: _persona_design_tokens.Color.TextPrimary,
+		icon: _persona_design_tokens.Color.BorderIconDanger
+	},
+	success: {
+		background: "transparent",
+		text: _persona_design_tokens.Color.TextPrimary,
+		icon: _persona_design_tokens.Color.BorderIconSuccess
+	},
+	feature: {
+		background: "transparent",
+		text: _persona_design_tokens.Color.TextPrimary,
+		icon: _persona_design_tokens.Color.BorderIconActive
+	},
+	informational: {
+		background: "transparent",
+		text: _persona_design_tokens.Color.TextPrimary,
+		icon: _persona_design_tokens.Color.BorderIconLabelBlue
+	},
+	miscellaneous: {
+		background: "transparent",
+		text: _persona_design_tokens.Color.TextPrimary,
+		icon: _persona_design_tokens.Color.BorderIconLabelTeal
+	}
+};
+const Label = styled_components.default.div`
+  ${require_mixins_text.paragraphMixins.sm}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 8px;
+  white-space: nowrap;
+  text-transform: capitalize;
+  /* Slight optical centering adjustment */
+  transform: translateY(0.5px);
+  color: ${({ $type, $background }) => {
+	return ($background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS)[$type].text;
+}};
+`;
+const IconContainer = styled_components.default.span`
+  line-height: 0;
+  color: ${({ $iconColor }) => $iconColor};
+`;
+const LabelContainer = styled_components.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[1]};
+  padding: ${({ $hasIcon }) => $hasIcon ? `${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[1]}` : `6px ${_persona_design_tokens.Spacing[2]}`};
+  position: relative;
+  flex-shrink: 0;
+`;
+const StyledStatusIndicator = styled_components.default.div`
+  display: inline-flex;
+  align-items: center;
+  border-radius: ${_persona_design_tokens.BorderRadius.Xl};
+  width: fit-content;
+
+  ${({ $type, $background }) => {
+	return styled_components.css`
+      background-color: ${($background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS)[$type].background};
+    `;
+}}
+`;
+/**
+* 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>
+* ```
+*/
+const StatusIndicator = ({ type = "neutral", background = "filled", showIcon = true, leadingIcon, children, ...props }) => {
+	const colors = background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;
+	let iconToRender;
+	if (!showIcon && background === "filled") iconToRender = null;
+	else if (typeof leadingIcon !== "undefined") iconToRender = leadingIcon;
+	else iconToRender = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleNullIcon, {});
+	const hasIcon = iconToRender != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledStatusIndicator, {
+		$type: type,
+		$background: background,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabelContainer, {
+			$hasIcon: hasIcon,
+			children: [hasIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconContainer, {
+				$iconColor: colors[type].icon,
+				children: iconToRender
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+				$type: type,
+				$background: background,
+				children
+			})]
+		})
+	});
+};
+//#endregion
+exports.StatusIndicator = StatusIndicator;
+exports.default = StatusIndicator;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/StatusIndicator/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Color","paragraphMixins","Spacing","BorderRadius","CircleNullIcon"],"sources":["../../../components/StatusIndicator/StatusIndicator.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleNullIcon } from '@persona/icons/12px';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport type StatusType =\n  | 'neutral'\n  | 'attention'\n  | 'warning'\n  | 'critical'\n  | 'success'\n  | 'feature'\n  | 'informational'\n  | 'miscellaneous';\nexport type BackgroundType = 'filled' | 'none';\n\nexport interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * The semantic status type to display\n   */\n  type?: StatusType;\n\n  /**\n   * Whether to show filled background or transparent\n   */\n  background?: BackgroundType;\n\n  /**\n   * Whether to show the icon. When false, displays label-only variant\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Optional custom icon to replace the default icon indicator (12px recommended)\n   * - undefined (default): Shows the default CircleNullIcon\n   * - null: Hides the icon completely\n   * - ReactNode: Shows the provided custom icon\n   * Note: showIcon must be true for this to take effect\n   */\n  leadingIcon?: ReactNode | null;\n\n  /**\n   * The text label to display\n   */\n  children?: ReactNode;\n}\n\ninterface StatusColors {\n  background: string;\n  text: string;\n  icon: string;\n}\n\nconst FILLED_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: Color.BackgroundStatusIndicatorDefault,\n    text: Color.TextStatusIndicatorDefault,\n    icon: Color.BorderIconLabelGrey,\n  },\n  attention: {\n    background: Color.BackgroundStatusIndicatorAttention,\n    text: Color.TextStatusIndicatorAttention,\n    icon: Color.BorderIconLabelYellow,\n  },\n  warning: {\n    background: Color.BackgroundStatusIndicatorWarning,\n    text: Color.TextStatusIndicatorWarning,\n    icon: Color.BorderIconLabelOrange,\n  },\n  critical: {\n    background: Color.BackgroundStatusIndicatorCritical,\n    text: Color.TextStatusIndicatorCritical,\n    icon: Color.BorderIconLabelRed,\n  },\n  success: {\n    background: Color.BackgroundStatusIndicatorSuccess,\n    text: Color.TextStatusIndicatorSuccess,\n    icon: Color.BorderIconLabelGreen,\n  },\n  feature: {\n    background: Color.BackgroundStatusIndicatorFeature,\n    text: Color.TextStatusIndicatorFeature,\n    icon: Color.BorderIconLabelPurple,\n  },\n  informational: {\n    background: Color.BackgroundStatusIndicatorInformational,\n    text: Color.TextStatusIndicatorInformational,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: Color.BackgroundStatusIndicatorMiscellaneous,\n    text: Color.TextStatusIndicatorMiscellaneous,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst TRANSPARENT_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSecondary,\n  },\n  attention: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  warning: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  critical: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconDanger,\n  },\n  success: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSuccess,\n  },\n  feature: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconActive,\n  },\n  informational: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst Label = styled.div<{ $type: StatusType; $background: BackgroundType }>`\n  ${paragraphMixins.sm}\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 8px;\n  white-space: nowrap;\n  text-transform: capitalize;\n  /* Slight optical centering adjustment */\n  transform: translateY(0.5px);\n  color: ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return colors[$type].text;\n  }};\n`;\n\nconst IconContainer = styled.span<{ $iconColor: string }>`\n  line-height: 0;\n  color: ${({ $iconColor }) => $iconColor};\n`;\n\nconst LabelContainer = styled.div<{ $hasIcon: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  padding: ${({ $hasIcon }) =>\n    $hasIcon ? `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${Spacing[1]}` : `6px ${Spacing[2]}`};\n  position: relative;\n  flex-shrink: 0;\n`;\n\nconst StyledStatusIndicator = styled.div<{ $type: StatusType; $background: BackgroundType }>`\n  display: inline-flex;\n  align-items: center;\n  border-radius: ${BorderRadius.Xl};\n  width: fit-content;\n\n  ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return css`\n      background-color: ${colors[$type].background};\n    `;\n  }}\n`;\n\n/**\n * StatusIndicator displays semantic status information with a colored icon and label.\n * Supports both filled backgrounds and transparent styles.\n *\n * @example\n * ```tsx\n * <StatusIndicator type=\"success\" background=\"filled\">Approved</StatusIndicator>\n * <StatusIndicator type=\"critical\" background=\"none\">Failed</StatusIndicator>\n * ```\n */\nexport const StatusIndicator = ({\n  type = 'neutral',\n  background = 'filled',\n  showIcon = true,\n  leadingIcon,\n  children,\n  ...props\n}: StatusIndicatorProps) => {\n  const colors = background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n\n  // Determine which icon to show:\n  // - showIcon=false with background='filled': label-only variant (no icon)\n  // - leadingIcon=null: explicitly hide icon\n  // - leadingIcon=undefined: show default icon\n  // - leadingIcon=<ReactNode>: show custom icon (auto-colored via CSS color inheritance)\n  // - background='none' always shows icon (showIcon is ignored for none background)\n  let iconToRender;\n  if (!showIcon && background === 'filled') {\n    iconToRender = null;\n  } else if (typeof leadingIcon !== 'undefined') {\n    iconToRender = leadingIcon;\n  } else {\n    iconToRender = <CircleNullIcon />;\n  }\n  const hasIcon = iconToRender != null;\n\n  return (\n    <StyledStatusIndicator $type={type} $background={background} {...props}>\n      <LabelContainer $hasIcon={hasIcon}>\n        {hasIcon && <IconContainer $iconColor={colors[type].icon}>{iconToRender}</IconContainer>}\n        <Label $type={type} $background={background}>\n          {children}\n        </Label>\n      </LabelContainer>\n    </StyledStatusIndicator>\n  );\n};\n\nexport default StatusIndicator;\n"],"mappings":"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"}

package/dist/components/StatusIndicator/index.d.cts

@@ -0,0 +1,2 @@
+import { BackgroundType, StatusIndicator, StatusIndicatorProps, StatusType } from "../../StatusIndicator.cjs";
+export { type BackgroundType, StatusIndicator, StatusIndicator as default, type StatusIndicatorProps, type StatusType };

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

@@ -0,0 +1,2 @@
+import { BackgroundType, StatusIndicator, StatusIndicatorProps, StatusType } from "../../StatusIndicator.mjs";
+export { type BackgroundType, StatusIndicator, StatusIndicator as default, type StatusIndicatorProps, type StatusType };

package/dist/components/StatusIndicator/index.mjs

@@ -0,0 +1,167 @@
+import { paragraphMixins } from "../../mixins/text.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleNullIcon } from "@persona/icons/12px";
+//#region components/StatusIndicator/StatusIndicator.tsx
+const FILLED_STATUS_COLORS = {
+	neutral: {
+		background: Color.BackgroundStatusIndicatorDefault,
+		text: Color.TextStatusIndicatorDefault,
+		icon: Color.BorderIconLabelGrey
+	},
+	attention: {
+		background: Color.BackgroundStatusIndicatorAttention,
+		text: Color.TextStatusIndicatorAttention,
+		icon: Color.BorderIconLabelYellow
+	},
+	warning: {
+		background: Color.BackgroundStatusIndicatorWarning,
+		text: Color.TextStatusIndicatorWarning,
+		icon: Color.BorderIconLabelOrange
+	},
+	critical: {
+		background: Color.BackgroundStatusIndicatorCritical,
+		text: Color.TextStatusIndicatorCritical,
+		icon: Color.BorderIconLabelRed
+	},
+	success: {
+		background: Color.BackgroundStatusIndicatorSuccess,
+		text: Color.TextStatusIndicatorSuccess,
+		icon: Color.BorderIconLabelGreen
+	},
+	feature: {
+		background: Color.BackgroundStatusIndicatorFeature,
+		text: Color.TextStatusIndicatorFeature,
+		icon: Color.BorderIconLabelPurple
+	},
+	informational: {
+		background: Color.BackgroundStatusIndicatorInformational,
+		text: Color.TextStatusIndicatorInformational,
+		icon: Color.BorderIconLabelBlue
+	},
+	miscellaneous: {
+		background: Color.BackgroundStatusIndicatorMiscellaneous,
+		text: Color.TextStatusIndicatorMiscellaneous,
+		icon: Color.BorderIconLabelTeal
+	}
+};
+const TRANSPARENT_STATUS_COLORS = {
+	neutral: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconSecondary
+	},
+	attention: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconWarning
+	},
+	warning: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconWarning
+	},
+	critical: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconDanger
+	},
+	success: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconSuccess
+	},
+	feature: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconActive
+	},
+	informational: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconLabelBlue
+	},
+	miscellaneous: {
+		background: "transparent",
+		text: Color.TextPrimary,
+		icon: Color.BorderIconLabelTeal
+	}
+};
+const Label = styled.div`
+  ${paragraphMixins.sm}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 8px;
+  white-space: nowrap;
+  text-transform: capitalize;
+  /* Slight optical centering adjustment */
+  transform: translateY(0.5px);
+  color: ${({ $type, $background }) => {
+	return ($background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS)[$type].text;
+}};
+`;
+const IconContainer = styled.span`
+  line-height: 0;
+  color: ${({ $iconColor }) => $iconColor};
+`;
+const LabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[1]};
+  padding: ${({ $hasIcon }) => $hasIcon ? `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${Spacing[1]}` : `6px ${Spacing[2]}`};
+  position: relative;
+  flex-shrink: 0;
+`;
+const StyledStatusIndicator = styled.div`
+  display: inline-flex;
+  align-items: center;
+  border-radius: ${BorderRadius.Xl};
+  width: fit-content;
+
+  ${({ $type, $background }) => {
+	return css`
+      background-color: ${($background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS)[$type].background};
+    `;
+}}
+`;
+/**
+* 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>
+* ```
+*/
+const StatusIndicator = ({ type = "neutral", background = "filled", showIcon = true, leadingIcon, children, ...props }) => {
+	const colors = background === "filled" ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;
+	let iconToRender;
+	if (!showIcon && background === "filled") iconToRender = null;
+	else if (typeof leadingIcon !== "undefined") iconToRender = leadingIcon;
+	else iconToRender = /* @__PURE__ */ jsx(CircleNullIcon, {});
+	const hasIcon = iconToRender != null;
+	return /* @__PURE__ */ jsx(StyledStatusIndicator, {
+		$type: type,
+		$background: background,
+		...props,
+		children: /* @__PURE__ */ jsxs(LabelContainer, {
+			$hasIcon: hasIcon,
+			children: [hasIcon && /* @__PURE__ */ jsx(IconContainer, {
+				$iconColor: colors[type].icon,
+				children: iconToRender
+			}), /* @__PURE__ */ jsx(Label, {
+				$type: type,
+				$background: background,
+				children
+			})]
+		})
+	});
+};
+//#endregion
+export { StatusIndicator, StatusIndicator as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/StatusIndicator/StatusIndicator.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleNullIcon } from '@persona/icons/12px';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport type StatusType =\n  | 'neutral'\n  | 'attention'\n  | 'warning'\n  | 'critical'\n  | 'success'\n  | 'feature'\n  | 'informational'\n  | 'miscellaneous';\nexport type BackgroundType = 'filled' | 'none';\n\nexport interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * The semantic status type to display\n   */\n  type?: StatusType;\n\n  /**\n   * Whether to show filled background or transparent\n   */\n  background?: BackgroundType;\n\n  /**\n   * Whether to show the icon. When false, displays label-only variant\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Optional custom icon to replace the default icon indicator (12px recommended)\n   * - undefined (default): Shows the default CircleNullIcon\n   * - null: Hides the icon completely\n   * - ReactNode: Shows the provided custom icon\n   * Note: showIcon must be true for this to take effect\n   */\n  leadingIcon?: ReactNode | null;\n\n  /**\n   * The text label to display\n   */\n  children?: ReactNode;\n}\n\ninterface StatusColors {\n  background: string;\n  text: string;\n  icon: string;\n}\n\nconst FILLED_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: Color.BackgroundStatusIndicatorDefault,\n    text: Color.TextStatusIndicatorDefault,\n    icon: Color.BorderIconLabelGrey,\n  },\n  attention: {\n    background: Color.BackgroundStatusIndicatorAttention,\n    text: Color.TextStatusIndicatorAttention,\n    icon: Color.BorderIconLabelYellow,\n  },\n  warning: {\n    background: Color.BackgroundStatusIndicatorWarning,\n    text: Color.TextStatusIndicatorWarning,\n    icon: Color.BorderIconLabelOrange,\n  },\n  critical: {\n    background: Color.BackgroundStatusIndicatorCritical,\n    text: Color.TextStatusIndicatorCritical,\n    icon: Color.BorderIconLabelRed,\n  },\n  success: {\n    background: Color.BackgroundStatusIndicatorSuccess,\n    text: Color.TextStatusIndicatorSuccess,\n    icon: Color.BorderIconLabelGreen,\n  },\n  feature: {\n    background: Color.BackgroundStatusIndicatorFeature,\n    text: Color.TextStatusIndicatorFeature,\n    icon: Color.BorderIconLabelPurple,\n  },\n  informational: {\n    background: Color.BackgroundStatusIndicatorInformational,\n    text: Color.TextStatusIndicatorInformational,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: Color.BackgroundStatusIndicatorMiscellaneous,\n    text: Color.TextStatusIndicatorMiscellaneous,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst TRANSPARENT_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSecondary,\n  },\n  attention: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  warning: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  critical: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconDanger,\n  },\n  success: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSuccess,\n  },\n  feature: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconActive,\n  },\n  informational: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst Label = styled.div<{ $type: StatusType; $background: BackgroundType }>`\n  ${paragraphMixins.sm}\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 8px;\n  white-space: nowrap;\n  text-transform: capitalize;\n  /* Slight optical centering adjustment */\n  transform: translateY(0.5px);\n  color: ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return colors[$type].text;\n  }};\n`;\n\nconst IconContainer = styled.span<{ $iconColor: string }>`\n  line-height: 0;\n  color: ${({ $iconColor }) => $iconColor};\n`;\n\nconst LabelContainer = styled.div<{ $hasIcon: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  padding: ${({ $hasIcon }) =>\n    $hasIcon ? `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${Spacing[1]}` : `6px ${Spacing[2]}`};\n  position: relative;\n  flex-shrink: 0;\n`;\n\nconst StyledStatusIndicator = styled.div<{ $type: StatusType; $background: BackgroundType }>`\n  display: inline-flex;\n  align-items: center;\n  border-radius: ${BorderRadius.Xl};\n  width: fit-content;\n\n  ${({ $type, $background }) => {\n    const colors = $background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n    return css`\n      background-color: ${colors[$type].background};\n    `;\n  }}\n`;\n\n/**\n * StatusIndicator displays semantic status information with a colored icon and label.\n * Supports both filled backgrounds and transparent styles.\n *\n * @example\n * ```tsx\n * <StatusIndicator type=\"success\" background=\"filled\">Approved</StatusIndicator>\n * <StatusIndicator type=\"critical\" background=\"none\">Failed</StatusIndicator>\n * ```\n */\nexport const StatusIndicator = ({\n  type = 'neutral',\n  background = 'filled',\n  showIcon = true,\n  leadingIcon,\n  children,\n  ...props\n}: StatusIndicatorProps) => {\n  const colors = background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n\n  // Determine which icon to show:\n  // - showIcon=false with background='filled': label-only variant (no icon)\n  // - leadingIcon=null: explicitly hide icon\n  // - leadingIcon=undefined: show default icon\n  // - leadingIcon=<ReactNode>: show custom icon (auto-colored via CSS color inheritance)\n  // - background='none' always shows icon (showIcon is ignored for none background)\n  let iconToRender;\n  if (!showIcon && background === 'filled') {\n    iconToRender = null;\n  } else if (typeof leadingIcon !== 'undefined') {\n    iconToRender = leadingIcon;\n  } else {\n    iconToRender = <CircleNullIcon />;\n  }\n  const hasIcon = iconToRender != null;\n\n  return (\n    <StyledStatusIndicator $type={type} $background={background} {...props}>\n      <LabelContainer $hasIcon={hasIcon}>\n        {hasIcon && <IconContainer $iconColor={colors[type].icon}>{iconToRender}</IconContainer>}\n        <Label $type={type} $background={background}>\n          {children}\n        </Label>\n      </LabelContainer>\n    </StyledStatusIndicator>\n  );\n};\n\nexport default StatusIndicator;\n"],"mappings":";;;;;;AAwDA,MAAM,uBAAyD;CAC7D,SAAS;EACP,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,WAAW;EACT,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,UAAU;EACR,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,eAAe;EACb,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,eAAe;EACb,YAAY,MAAM;EAClB,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACF;AAED,MAAM,4BAA8D;CAClE,SAAS;EACP,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,WAAW;EACT,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,UAAU;EACR,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,eAAe;EACb,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACD,eAAe;EACb,YAAY;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACb;CACF;AAED,MAAM,QAAQ,OAAO,GAAuD;IACxE,gBAAgB,GAAG;;;;;;;;;;YAUX,EAAE,OAAO,kBAAkB;AAEnC,SADe,gBAAgB,WAAW,uBAAuB,2BACnD,OAAO;EACrB;;AAGJ,MAAM,gBAAgB,OAAO,IAA4B;;YAE7C,EAAE,iBAAiB,WAAW;;AAG1C,MAAM,iBAAiB,OAAO,GAA0B;;;SAG/C,QAAQ,GAAG;cACN,EAAE,eACZ,WAAW,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,OAAO,OAAO,QAAQ,KAAK;;;;AAK/F,MAAM,wBAAwB,OAAO,GAAuD;;;mBAGzE,aAAa,GAAG;;;KAG9B,EAAE,OAAO,kBAAkB;AAE5B,QAAO,GAAG;2BADK,gBAAgB,WAAW,uBAAuB,2BAEpC,OAAO,WAAW;;EAE/C;;;;;;;;;;;;AAaJ,MAAa,mBAAmB,EAC9B,OAAO,WACP,aAAa,UACb,WAAW,MACX,aACA,UACA,GAAG,YACuB;CAC1B,MAAM,SAAS,eAAe,WAAW,uBAAuB;CAQhE,IAAI;AACJ,KAAI,CAAC,YAAY,eAAe,SAC9B,gBAAe;UACN,OAAO,gBAAgB,YAChC,gBAAe;KAEf,gBAAe,oBAAC,gBAAD,EAAkB,CAAA;CAEnC,MAAM,UAAU,gBAAgB;AAEhC,QACE,oBAAC,uBAAD;EAAuB,OAAO;EAAM,aAAa;EAAY,GAAI;YAC/D,qBAAC,gBAAD;GAAgB,UAAU;aAA1B,CACG,WAAW,oBAAC,eAAD;IAAe,YAAY,OAAO,MAAM;cAAO;IAA6B,CAAA,EACxF,oBAAC,OAAD;IAAO,OAAO;IAAM,aAAa;IAC9B;IACK,CAAA,CACO;;EACK,CAAA"}

package/dist/components/Sticker/index.cjs

@@ -0,0 +1,12 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_Sticker = require("../../Sticker-D_dutvp_.cjs");
+exports.STICKER_COLOR_CONFIG = require_Sticker.STICKER_COLOR_CONFIG;
+exports.Sticker = require_Sticker.Sticker;
+exports.StickerContainer = require_Sticker.StickerContainer;
+exports.StickerContentContainer = require_Sticker.StickerContentContainer;
+exports.StyledTruncatedText = require_Sticker.StyledTruncatedText;
+exports.default = require_Sticker.Sticker;

package/dist/components/Sticker/index.d.cts

@@ -0,0 +1,2 @@
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "../../Sticker-S6QWjlEJ.cjs";
+export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

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

@@ -0,0 +1,2 @@
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "../../Sticker-Bd7KkekO.mjs";
+export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/components/Sticker/index.mjs

@@ -0,0 +1,2 @@
+import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer, t as STICKER_COLOR_CONFIG } from "../../Sticker-D6bwBTGr.mjs";
+export { STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StyledTruncatedText };

package/dist/components/SwatchPicker/index.cjs

@@ -0,0 +1,65 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+require("../../variables/effect.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/SwatchPicker/SwatchPicker.tsx
+const SwatchGrid = styled_components.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: ${_persona_design_tokens.Spacing[1]};
+`;
+const SwatchPicker = ({ value, onChange, colors, ...restProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwatchGrid, {
+		...restProps,
+		children: colors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, {
+			color,
+			selected: color === value,
+			onSelect: onChange
+		}, color))
+	});
+};
+const ColorSwatch = styled_components.default.button`
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background-color: transparent;
+  border-radius: ${_persona_design_tokens.BorderRadius.Circle};
+  border: 2px solid ${_persona_design_tokens.Color.PrimaryWhite};
+  transition: all 100ms ease-out;
+  cursor: pointer;
+  ${({ selected }) => selected ? `outline: 2px solid ${_persona_design_tokens.Color.BorderIconActive}` : ""};
+
+  &:hover {
+    box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
+  }
+`;
+const WhiteSwatch = (0, styled_components.default)(ColorSwatch)`
+  border-color: ${_persona_design_tokens.Color.BorderHairline};
+`;
+const Swatch = ({ color, selected, onSelect }) => {
+	return color.toUpperCase() === "#FFFFFF" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WhiteSwatch, {
+		selected,
+		title: "#FFFFFF",
+		onClick: () => onSelect(color)
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorSwatch, {
+		css: `
+        background-color: ${color};
+      `,
+		selected,
+		title: color,
+		onClick: () => onSelect(color)
+	});
+};
+//#endregion
+exports.SwatchPicker = SwatchPicker;
+exports.default = SwatchPicker;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/SwatchPicker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Spacing","BorderRadius","Color"],"sources":["../../../components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Elevation } from 'design-system/variables/effect';\n\nconst SwatchGrid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: ${Spacing[1]};\n`;\n\nexport interface SwatchPickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {\n  value: string;\n  onChange: (color: string) => void;\n  colors: string[];\n}\n\nexport const SwatchPicker = ({ value, onChange, colors, ...restProps }: SwatchPickerProps) => {\n  return (\n    <SwatchGrid {...restProps}>\n      {colors.map((color) => (\n        <Swatch key={color} color={color} selected={color === value} onSelect={onChange} />\n      ))}\n    </SwatchGrid>\n  );\n};\n\nconst ColorSwatch = styled.button<{ selected: boolean }>`\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background-color: transparent;\n  border-radius: ${BorderRadius.Circle};\n  border: 2px solid ${Color.PrimaryWhite};\n  transition: all 100ms ease-out;\n  cursor: pointer;\n  ${({ selected }) => (selected ? `outline: 2px solid ${Color.BorderIconActive}` : '')};\n\n  &:hover {\n    box-shadow: ${Elevation.Low};\n  }\n`;\n\nconst WhiteSwatch = styled(ColorSwatch)`\n  border-color: ${Color.BorderHairline};\n`;\n\ninterface SwatchProps {\n  color: string;\n  selected: boolean;\n  onSelect: (color: string) => void;\n}\n\nconst Swatch = ({ color, selected, onSelect }: SwatchProps) => {\n  // NOTE: This is a hack to get the white color to show up. In theory we may want to do this\n  // for all colors close to white, but this gets the job done for now.\n  return color.toUpperCase() === '#FFFFFF' ? (\n    <WhiteSwatch selected={selected} title='#FFFFFF' onClick={() => onSelect(color)} />\n  ) : (\n    <ColorSwatch\n      css={`\n        background-color: ${color};\n      `}\n      selected={selected}\n      title={color}\n      onClick={() => onSelect(color)}\n    />\n  );\n};\n\nexport default SwatchPicker;\n"],"mappings":";;;;;;;;;;;AAMA,MAAM,aAAa,kBAAA,QAAO,GAAG;;;;SAIpBA,uBAAAA,QAAQ,GAAG;;AASpB,MAAa,gBAAgB,EAAE,OAAO,UAAU,QAAQ,GAAG,gBAAmC;AAC5F,QACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EAAY,GAAI;YACb,OAAO,KAAK,UACX,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAA2B;GAAO,UAAU,UAAU;GAAO,UAAU;GAAY,EAAtE,MAAsE,CACnF;EACS,CAAA;;AAIjB,MAAM,cAAc,kBAAA,QAAO,MAA6B;;;;;;mBAMrCC,uBAAAA,aAAa,OAAO;sBACjBC,uBAAAA,MAAM,aAAa;;;KAGpC,EAAE,eAAgB,WAAW,sBAAsBA,uBAAAA,MAAM,qBAAqB,GAAI;;;oIAGvD;;;AAIhC,MAAM,cAAc,CAAA,GAAA,kBAAA,SAAO,YAAY;kBACrBA,uBAAAA,MAAM,eAAe;;AASvC,MAAM,UAAU,EAAE,OAAO,UAAU,eAA4B;AAG7D,QAAO,MAAM,aAAa,KAAK,YAC7B,iBAAA,GAAA,kBAAA,KAAC,aAAD;EAAuB;EAAU,OAAM;EAAU,eAAe,SAAS,MAAM;EAAI,CAAA,GAEnF,iBAAA,GAAA,kBAAA,KAAC,aAAD;EACE,KAAK;4BACiB,MAAM;;EAElB;EACV,OAAO;EACP,eAAe,SAAS,MAAM;EAC9B,CAAA"}

package/dist/components/SwatchPicker/index.d.cts

@@ -0,0 +1,2 @@
+import { SwatchPicker } from "../../SwatchPicker.cjs";
+export { SwatchPicker, SwatchPicker as default };

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

@@ -0,0 +1,2 @@
+import { SwatchPicker } from "../../SwatchPicker.mjs";
+export { SwatchPicker, SwatchPicker as default };

package/dist/components/SwatchPicker/index.mjs

@@ -0,0 +1,58 @@
+import "../../variables/effect.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region components/SwatchPicker/SwatchPicker.tsx
+const SwatchGrid = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: ${Spacing[1]};
+`;
+const SwatchPicker = ({ value, onChange, colors, ...restProps }) => {
+	return /* @__PURE__ */ jsx(SwatchGrid, {
+		...restProps,
+		children: colors.map((color) => /* @__PURE__ */ jsx(Swatch, {
+			color,
+			selected: color === value,
+			onSelect: onChange
+		}, color))
+	});
+};
+const ColorSwatch = styled.button`
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background-color: transparent;
+  border-radius: ${BorderRadius.Circle};
+  border: 2px solid ${Color.PrimaryWhite};
+  transition: all 100ms ease-out;
+  cursor: pointer;
+  ${({ selected }) => selected ? `outline: 2px solid ${Color.BorderIconActive}` : ""};
+
+  &:hover {
+    box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
+  }
+`;
+const WhiteSwatch = styled(ColorSwatch)`
+  border-color: ${Color.BorderHairline};
+`;
+const Swatch = ({ color, selected, onSelect }) => {
+	return color.toUpperCase() === "#FFFFFF" ? /* @__PURE__ */ jsx(WhiteSwatch, {
+		selected,
+		title: "#FFFFFF",
+		onClick: () => onSelect(color)
+	}) : /* @__PURE__ */ jsx(ColorSwatch, {
+		css: `
+        background-color: ${color};
+      `,
+		selected,
+		title: color,
+		onClick: () => onSelect(color)
+	});
+};
+//#endregion
+export { SwatchPicker, SwatchPicker as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Elevation } from 'design-system/variables/effect';\n\nconst SwatchGrid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: ${Spacing[1]};\n`;\n\nexport interface SwatchPickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {\n  value: string;\n  onChange: (color: string) => void;\n  colors: string[];\n}\n\nexport const SwatchPicker = ({ value, onChange, colors, ...restProps }: SwatchPickerProps) => {\n  return (\n    <SwatchGrid {...restProps}>\n      {colors.map((color) => (\n        <Swatch key={color} color={color} selected={color === value} onSelect={onChange} />\n      ))}\n    </SwatchGrid>\n  );\n};\n\nconst ColorSwatch = styled.button<{ selected: boolean }>`\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background-color: transparent;\n  border-radius: ${BorderRadius.Circle};\n  border: 2px solid ${Color.PrimaryWhite};\n  transition: all 100ms ease-out;\n  cursor: pointer;\n  ${({ selected }) => (selected ? `outline: 2px solid ${Color.BorderIconActive}` : '')};\n\n  &:hover {\n    box-shadow: ${Elevation.Low};\n  }\n`;\n\nconst WhiteSwatch = styled(ColorSwatch)`\n  border-color: ${Color.BorderHairline};\n`;\n\ninterface SwatchProps {\n  color: string;\n  selected: boolean;\n  onSelect: (color: string) => void;\n}\n\nconst Swatch = ({ color, selected, onSelect }: SwatchProps) => {\n  // NOTE: This is a hack to get the white color to show up. In theory we may want to do this\n  // for all colors close to white, but this gets the job done for now.\n  return color.toUpperCase() === '#FFFFFF' ? (\n    <WhiteSwatch selected={selected} title='#FFFFFF' onClick={() => onSelect(color)} />\n  ) : (\n    <ColorSwatch\n      css={`\n        background-color: ${color};\n      `}\n      selected={selected}\n      title={color}\n      onClick={() => onSelect(color)}\n    />\n  );\n};\n\nexport default SwatchPicker;\n"],"mappings":";;;;;AAMA,MAAM,aAAa,OAAO,GAAG;;;;SAIpB,QAAQ,GAAG;;AASpB,MAAa,gBAAgB,EAAE,OAAO,UAAU,QAAQ,GAAG,gBAAmC;AAC5F,QACE,oBAAC,YAAD;EAAY,GAAI;YACb,OAAO,KAAK,UACX,oBAAC,QAAD;GAA2B;GAAO,UAAU,UAAU;GAAO,UAAU;GAAY,EAAtE,MAAsE,CACnF;EACS,CAAA;;AAIjB,MAAM,cAAc,OAAO,MAA6B;;;;;;mBAMrC,aAAa,OAAO;sBACjB,MAAM,aAAa;;;KAGpC,EAAE,eAAgB,WAAW,sBAAsB,MAAM,qBAAqB,GAAI;;;oIAGvD;;;AAIhC,MAAM,cAAc,OAAO,YAAY;kBACrB,MAAM,eAAe;;AASvC,MAAM,UAAU,EAAE,OAAO,UAAU,eAA4B;AAG7D,QAAO,MAAM,aAAa,KAAK,YAC7B,oBAAC,aAAD;EAAuB;EAAU,OAAM;EAAU,eAAe,SAAS,MAAM;EAAI,CAAA,GAEnF,oBAAC,aAAD;EACE,KAAK;4BACiB,MAAM;;EAElB;EACV,OAAO;EACP,eAAe,SAAS,MAAM;EAC9B,CAAA"}

package/dist/components/TabBar/index.cjs

@@ -0,0 +1,12 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_TabBar = require("../../TabBar-BMv8dAS3.cjs");
+exports.StyledTab = require_TabBar.StyledTab;
+exports.Tab = require_TabBar.Tab;
+exports.TabBar = require_TabBar.TabBar;
+exports.TabBarIconButton = require_TabBar.TabBarIconButton_default;
+exports.TabContainer = require_TabBar.TabContainer;
+exports.default = require_TabBar.TabBar;

package/dist/components/TabBar/index.d.cts

@@ -0,0 +1,4 @@
+import Tab, { StyledTab } from "../../Tab.cjs";
+import { TabBar, TabBarProps, TabContainer } from "../../TabBar.cjs";
+import _default from "../../TabBarIconButton.cjs";
+export { StyledTab, Tab, TabBar, TabBar as default, _default as TabBarIconButton, TabBarProps, TabContainer };

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

@@ -0,0 +1,4 @@
+import Tab, { StyledTab } from "../../Tab.mjs";
+import { TabBar, TabBarProps, TabContainer } from "../../TabBar.mjs";
+import _default from "../../TabBarIconButton.mjs";
+export { StyledTab, Tab, TabBar, TabBar as default, _default as TabBarIconButton, TabBarProps, TabContainer };

package/dist/components/TabBar/index.mjs

@@ -0,0 +1,2 @@
+import { a as TabContainer, i as TabBar, n as StyledTab, r as Tab, t as TabBarIconButton_default } from "../../TabBar-Bf89XksH.mjs";
+export { StyledTab, Tab, TabBar, TabBar as default, TabBarIconButton_default as TabBarIconButton, TabContainer };