@persona/design-system 0.1.8 → 0.2.0

package/dist/Spacer-B2CerL6e.cjs

@@ -1,20 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.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-B2CerL6e.cjs.map

package/dist/Spacer-B2CerL6e.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spacer-B2CerL6e.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.d.cts

@@ -1,17 +0,0 @@
-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/Spinner-B6bx70yR.cjs

@@ -1,48 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.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-B6bx70yR.cjs.map

package/dist/Spinner-B6bx70yR.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner-B6bx70yR.cjs","names":["Color","rotate","LoaderIcon","LoaderIconMedium"],"sources":["../components/Spinner/Spinner.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { 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';\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":";;;;;;;;;;AAUA,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

@@ -1,26 +0,0 @@
-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/Stack-BzVkf3cz.d.cts

@@ -1,47 +0,0 @@
-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";
-import * as CSS from "csstype";
-
-//#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?: CSS.Property.AlignItems;
-  /**
-   * Passed through as `justify-content`
-   */
-  justify?: CSS.Property.JustifyContent;
-  /**
-   * Passed through as `flex-wrap`
-   */
-  wrap?: CSS.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-BzVkf3cz.d.cts.map

package/dist/Stack-UeifHn3c.cjs

@@ -1,53 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.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-UeifHn3c.cjs.map

package/dist/Stack-UeifHn3c.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack-UeifHn3c.cjs","names":["Spacing"],"sources":["../components/Stack/Stack.tsx"],"sourcesContent":["import type * as CSS from 'csstype';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\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":";;;;;;AA+CA,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.d.cts

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

package/dist/StatusIndicator.d.cts

@@ -1,82 +0,0 @@
-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';
-/**
- * Narrow set of status presets — one value per type+icon combination.
- * Override color with `type` or icon with `leadingIcon` when needed.
- */
-type Status = 'open' | 'pending' | 'completed' | 'active' | 'failed' | 'needs_review' | 'canceled' | 'archived';
-/** All supported `status` preset keys, derived from the config map. */
-declare const STATUSES: Status[];
-interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
-  /**
-   * Preset that sets a default semantic type and icon.
-   * Explicit `type` and `leadingIcon` override the preset.
-   */
-  status?: Status;
-  /**
-   * The semantic status type to display. Overrides `status` when both are set.
-   */
-  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): Uses `status` icon when set, otherwise 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;
-  /**
-   * Truncate the label with an ellipsis instead of letting it overflow its container. Adds a
-   * title tooltip with the full text when it doesn't fit.
-   * @default false
-   */
-  truncate?: boolean;
-  /**
-   * Render the label exactly as given instead of capitalizing each word. Use for labels that are
-   * authored outside the product, where the casing is not ours to change.
-   * @default false
-   */
-  preserveCase?: boolean;
-  /**
-   * 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 status="active">Active</StatusIndicator>
- * <StatusIndicator type="success" background="filled">Approved</StatusIndicator>
- * <StatusIndicator type="critical" background="none">Failed</StatusIndicator>
- * ```
- */
-declare const StatusIndicator: ({
-  status,
-  type,
-  background,
-  showIcon,
-  leadingIcon,
-  truncate,
-  preserveCase,
-  children,
-  ...props
-}: StatusIndicatorProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { BackgroundType, STATUSES, Status, StatusIndicator, StatusIndicator as default, StatusIndicatorProps, StatusType };
-//# sourceMappingURL=StatusIndicator.d.cts.map

package/dist/Sticker-CI-XxUmM.d.cts

@@ -1,68 +0,0 @@
-import { i as Variant } from "./theme-Cadb1xzQ.cjs";
-import { i as StackProps } from "./Stack-BzVkf3cz.cjs";
-import { r as TruncatedTextProps } from "./TruncatedText-Dit2NJI6.cjs";
-import * as _$react from "react";
-import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Sticker/Sticker.d.ts
-declare const STICKER_COLOR_CONFIG: {
-  readonly white: "White";
-  readonly blue: "Blue";
-  readonly teal: "Teal";
-  readonly green: "Green";
-  readonly yellow: "Yellow";
-  readonly orange: "Orange";
-  readonly pink: "Pink";
-  readonly red: "Red";
-  readonly purple: "Purple";
-  readonly darkGrey: "Dark Grey";
-  readonly grey: "Grey";
-};
-type LabelBackgrounds = keyof typeof STICKER_COLOR_CONFIG;
-interface StickerProps extends ComponentPropsWithoutRef<'div'> {
-  variant?: LabelBackgrounds | Exclude<Variant, 'inverse'>;
-  /**
-   * Icon to render to the left of the Sticker. 12px icons recommended.
-   */
-  icon?: ReactNode;
-  /**
-   * Callback to call upon clicking "x" button. Non-null will render the button.
-   */
-  onDismiss?: MouseEventHandler;
-  /**
-   * Additional props to pass to the dismiss "x" button.
-   */
-  dismissButtonProps?: ComponentPropsWithoutRef<'button'>;
-  /**
-   * Renders disabled style for the entire Sticker and disables "x" button.
-   */
-  disabled?: boolean;
-  /**
-   * Shows a required asterisk (*) that won't be cut off when text is truncated.
-   */
-  isRequired?: boolean;
-  /**
-   * In some cases we render a sticker/badge on a secondary background, which needs an adjustment
-   * for certain variants.
-   */
-  onSecondaryBackground?: boolean;
-}
-declare const StickerContainer: _$styled_components0.StyledComponent<"div", any, StackProps, never>;
-declare const StickerContentContainer: _$styled_components0.StyledComponent<"div", any, StackProps & _$styled_components0.ThemeProps<_$styled_components0.DefaultTheme>, never>;
-declare const StyledTruncatedText: _$styled_components0.StyledComponent<_$react.FC<TruncatedTextProps>, any, _$styled_components0.ThemeProps<_$styled_components0.DefaultTheme>, never>;
-declare const Sticker: ({
-  variant,
-  icon,
-  children,
-  onDismiss,
-  disabled,
-  dismissButtonProps,
-  isRequired,
-  onSecondaryBackground,
-  ...props
-}: StickerProps) => _$react_jsx_runtime0.JSX.Element | null;
-//#endregion
-export { StickerContentContainer as a, StickerContainer as i, STICKER_COLOR_CONFIG as n, StickerProps as o, Sticker as r, StyledTruncatedText as s, LabelBackgrounds as t };
-//# sourceMappingURL=Sticker-CI-XxUmM.d.cts.map

package/dist/Sticker-CIoseh9f.cjs

@@ -1,244 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-const require_Stack = require("./Stack-UeifHn3c.cjs");
-const require_lib_TruncatedText = require("./lib/TruncatedText.cjs");
-const require_IconButton = require("./IconButton-nlgjJQCS.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/Sticker/Sticker.tsx
-const STICKER_COLOR_CONFIG = {
-	white: "White",
-	blue: "Blue",
-	teal: "Teal",
-	green: "Green",
-	yellow: "Yellow",
-	orange: "Orange",
-	pink: "Pink",
-	red: "Red",
-	purple: "Purple",
-	darkGrey: "Dark Grey",
-	grey: "Grey"
-};
-const StickerIcon = (0, styled_components.default)("div")`
-  color: ${({ theme, variant }) => {
-	switch (variant) {
-		case "darkGrey":
-		case "red": return theme.color.text.inverse;
-		default: return "inherit";
-	}
-}};
-  line-height: 0;
-  svg {
-    width: 12px;
-    height: 12px;
-  }
-`;
-const RequiredAsterisk = styled_components.default.span`
-  color: ${_persona_design_tokens.Color.TextDanger};
-  /* Ensure asterisk never gets hidden and takes minimal space */
-  flex-shrink: 0;
-`;
-const StickerContainer = (0, styled_components.default)(require_Stack.Stack)`
-  padding: 2px ${_persona_design_tokens.Spacing[1]};
-  /* Ensure container can shrink for text truncation */
-  min-width: 0;
-  flex: 1;
-`;
-const StickerContentContainer = (0, styled_components.default)(StickerContainer)`
-  ${require_mixins_text.paragraphMixins.sm}
-  padding: 0;
-`;
-const StyledTruncatedText = (0, styled_components.default)(require_lib_TruncatedText.TruncatedText)`
-  ${require_mixins_text.paragraphMixins.sm}
-  flex: 1;
-  min-width: 0;
-  line-height: 1;
-  transform: translateY(0.5px);
-`;
-const DismissButton = (0, styled_components.default)(require_IconButton.IconButton)`
-  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */
-  --background-color-behind-sticker: ${_persona_design_tokens.Color.PrimaryWhite};
-
-  border: none;
-
-  padding: 0 ${_persona_design_tokens.Spacing[1]};
-  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
-  width: 1rem;
-
-  height: 100%;
-
-  display: inline-flex;
-  align-items: center;
-
-  svg {
-    width: 12px;
-    height: 12px;
-  }
-  color: ${({ theme, variant, disabled }) => {
-	if (variant === "red" || variant === "darkGrey") return theme.color.text.inverse;
-	return disabled ? "inherit" : _persona_design_tokens.Color.BorderIconPrimary;
-}};
-
-  &${require_lib_pseudoClass.isDisabled} {
-    background-color: inherit !important;
-    color: inherit !important;
-  }
-
-  &${require_lib_pseudoClass.isFocusedVisible}${require_lib_pseudoClass.isNotDisabled} {
-    box-shadow: 0 0 0 1px var(--background-color-behind-sticker);
-  }
-
-  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
-    cursor: pointer;
-
-    background: ${({ variant }) => {
-	if (variant === "grey" || variant === "basic") return _persona_design_tokens.Color.BackgroundLabelGreyHover;
-	else if (variant === "darkGrey") return _persona_design_tokens.Color.BackgroundLabelDarkGreyHover;
-	else if (variant === "purple") return _persona_design_tokens.Color.BackgroundLabelPurpleHover;
-	else if (variant === "red" || variant === "danger") return _persona_design_tokens.Color.BackgroundLabelDarkRedHover;
-	else if (variant === "orange") return _persona_design_tokens.Color.BackgroundLabelOrangeHover;
-	else if (variant === "yellow" || variant === "caution") return _persona_design_tokens.Color.BackgroundLabelYellowHover;
-	else if (variant === "green" || variant === "success") return _persona_design_tokens.Color.BackgroundLabelGreenHover;
-	else if (variant === "teal") return _persona_design_tokens.Color.BackgroundLabelTealHover;
-	else if (variant === "blue") return _persona_design_tokens.Color.BackgroundLabelBlueHover;
-	else if (variant === "pink") return _persona_design_tokens.Color.BackgroundLabelRedHover;
-	else if (variant === "white") return _persona_design_tokens.Color.BackgroundLabelWhiteHover;
-	else return "inherit";
-}};
-  }
-`;
-const StyledSticker = (0, styled_components.default)("div")`
-  display: inline-flex;
-  white-space: nowrap;
-
-  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
-  height: 1rem;
-  max-width: 100%;
-
-  color: ${({ theme, variant, disabled }) => {
-	if (disabled) return variant === "red" || variant === "darkGrey" ? theme.color.text.inverse : theme.color.text.disabled;
-	switch (variant) {
-		case "darkGrey":
-		case "red": return theme.color.text.inverse;
-		default: return theme.color.text.primary;
-	}
-}};
-  background: ${({ variant, disabled, $onSecondaryBackground }) => {
-	if (disabled) switch (variant) {
-		case "white": return _persona_design_tokens.Color.BackgroundLabelWhite;
-		case "blue": return _persona_design_tokens.Color.BackgroundLabelBlueDisabled;
-		case "teal": return _persona_design_tokens.Color.BackgroundLabelTealDisabled;
-		case "green":
-		case "success": return _persona_design_tokens.Color.BackgroundLabelGreenDisabled;
-		case "yellow":
-		case "caution": return _persona_design_tokens.Color.BackgroundLabelYellowDisabled;
-		case "orange": return _persona_design_tokens.Color.BackgroundLabelOrangeDisabled;
-		case "pink":
-		case "danger": return _persona_design_tokens.Color.BackgroundLabelRedDisabled;
-		case "red": return _persona_design_tokens.Color.BackgroundLabelDarkRedDisabled;
-		case "purple":
-		case "primary": return _persona_design_tokens.Color.BackgroundLabelPurpleDisabled;
-		case "darkGrey": return _persona_design_tokens.Color.BackgroundLabelDarkGreyDisabled;
-		default:
-			if ($onSecondaryBackground) return _persona_design_tokens.Color.CoreSlate100;
-			return _persona_design_tokens.Color.BackgroundLabelGreyDisabled;
-	}
-	switch (variant) {
-		case "white": return _persona_design_tokens.Color.BackgroundLabelWhiteDisabled;
-		case "blue": return _persona_design_tokens.Color.BackgroundLabelBlue;
-		case "teal": return _persona_design_tokens.Color.BackgroundLabelTeal;
-		case "green":
-		case "success": return _persona_design_tokens.Color.BackgroundLabelGreen;
-		case "yellow":
-		case "caution": return _persona_design_tokens.Color.BackgroundLabelYellow;
-		case "orange": return _persona_design_tokens.Color.BackgroundLabelOrange;
-		case "pink":
-		case "danger": return _persona_design_tokens.Color.BackgroundLabelRed;
-		case "red": return _persona_design_tokens.Color.BackgroundLabelDarkRed;
-		case "purple":
-		case "primary": return _persona_design_tokens.Color.BackgroundLabelPurple;
-		case "darkGrey": return _persona_design_tokens.Color.BackgroundLabelDarkGrey;
-		default:
-			if ($onSecondaryBackground) return _persona_design_tokens.Color.CoreSlate200;
-			return _persona_design_tokens.Color.BackgroundLabelGrey;
-	}
-}};
-`;
-const Sticker = ({ variant, icon, children, onDismiss, disabled, dismissButtonProps, isRequired, onSecondaryBackground, ...props }) => {
-	const hasContent = children != null;
-	if (!hasContent) {
-		const hasIcon = icon != null;
-		if (!hasIcon) {
-			console.warn("Sticker component requires content and/or an icon to render");
-			return null;
-		}
-		if (hasIcon && !props["aria-label"]) console.warn("Sticker component requires an aria-label when only rendering an icon");
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSticker, {
-		$onSecondaryBackground: onSecondaryBackground,
-		variant,
-		disabled,
-		sizeIcon: !!icon && !hasContent,
-		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StickerContainer, {
-			direction: "horizontal",
-			align: "center",
-			spacing: _persona_design_tokens.Spacing[0],
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StickerContentContainer, {
-				direction: "horizontal",
-				align: "center",
-				spacing: _persona_design_tokens.Spacing[1],
-				children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StickerIcon, {
-					variant,
-					children: icon
-				}), hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTruncatedText, { children })]
-			}), isRequired && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequiredAsterisk, { children: "*" })]
-		}), onDismiss && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissButton, {
-			variant,
-			disabled,
-			id: "sticker__dismiss-button",
-			size: "sm",
-			onClick: onDismiss,
-			"aria-label": "Remove",
-			...dismissButtonProps,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.XIcon, {})
-		})]
-	});
-};
-//#endregion
-Object.defineProperty(exports, "STICKER_COLOR_CONFIG", {
-	enumerable: true,
-	get: function() {
-		return STICKER_COLOR_CONFIG;
-	}
-});
-Object.defineProperty(exports, "Sticker", {
-	enumerable: true,
-	get: function() {
-		return Sticker;
-	}
-});
-Object.defineProperty(exports, "StickerContainer", {
-	enumerable: true,
-	get: function() {
-		return StickerContainer;
-	}
-});
-Object.defineProperty(exports, "StickerContentContainer", {
-	enumerable: true,
-	get: function() {
-		return StickerContentContainer;
-	}
-});
-Object.defineProperty(exports, "StyledTruncatedText", {
-	enumerable: true,
-	get: function() {
-		return StyledTruncatedText;
-	}
-});
-
-//# sourceMappingURL=Sticker-CIoseh9f.cjs.map