@persona/design-system 0.1.5-pre.4

package/dist/StatusIndicator.d.mts

@@ -0,0 +1,54 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#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.mts.map

package/dist/Sticker-Bd7KkekO.d.mts

@@ -0,0 +1,68 @@
+import { i as Variant } from "./theme-DGAqgnUa.mjs";
+import { i as StackProps } from "./Stack-BntgUvsW.mjs";
+import { r as TruncatedTextProps } from "./TruncatedText-0Tf8CwFX.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
+
+//#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-Bd7KkekO.d.mts.map

package/dist/Sticker-D6bwBTGr.mjs

@@ -0,0 +1,215 @@
+import { isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { n as Stack } from "./Stack-hwgS2FU1.mjs";
+import "./components/Stack/index.mjs";
+import { TruncatedText } from "./lib/TruncatedText.mjs";
+import { t as IconButton } from "./IconButton-C28qxOdi.mjs";
+import "./components/Button/index.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "@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 = styled("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.span`
+  color: ${Color.TextDanger};
+  /* Ensure asterisk never gets hidden and takes minimal space */
+  flex-shrink: 0;
+`;
+const StickerContainer = styled(Stack)`
+  padding: 2px ${Spacing[1]};
+  /* Ensure container can shrink for text truncation */
+  min-width: 0;
+  flex: 1;
+`;
+const StickerContentContainer = styled(StickerContainer)`
+  ${paragraphMixins.sm}
+  padding: 0;
+`;
+const StyledTruncatedText = styled(TruncatedText)`
+  ${paragraphMixins.sm}
+  flex: 1;
+  min-width: 0;
+  line-height: 1;
+  transform: translateY(0.5px);
+`;
+const DismissButton = styled(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: ${Color.PrimaryWhite};
+
+  border: none;
+
+  padding: 0 ${Spacing[1]};
+  border-radius: ${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" : Color.BorderIconPrimary;
+}};
+
+  &${isDisabled} {
+    background-color: inherit !important;
+    color: inherit !important;
+  }
+
+  &${isFocusedVisible}${isNotDisabled} {
+    box-shadow: 0 0 0 1px var(--background-color-behind-sticker);
+  }
+
+  &${isHovered}${isNotDisabled} {
+    cursor: pointer;
+
+    background: ${({ variant }) => {
+	if (variant === "grey" || variant === "basic") return Color.BackgroundLabelGreyHover;
+	else if (variant === "darkGrey") return Color.BackgroundLabelDarkGreyHover;
+	else if (variant === "purple") return Color.BackgroundLabelPurpleHover;
+	else if (variant === "red" || variant === "danger") return Color.BackgroundLabelDarkRedHover;
+	else if (variant === "orange") return Color.BackgroundLabelOrangeHover;
+	else if (variant === "yellow" || variant === "caution") return Color.BackgroundLabelYellowHover;
+	else if (variant === "green" || variant === "success") return Color.BackgroundLabelGreenHover;
+	else if (variant === "teal") return Color.BackgroundLabelTealHover;
+	else if (variant === "blue") return Color.BackgroundLabelBlueHover;
+	else if (variant === "pink") return Color.BackgroundLabelRedHover;
+	else if (variant === "white") return Color.BackgroundLabelWhiteHover;
+	else return "inherit";
+}};
+  }
+`;
+const StyledSticker = styled("div")`
+  display: inline-flex;
+  white-space: nowrap;
+
+  border-radius: ${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 Color.BackgroundLabelWhite;
+		case "blue": return Color.BackgroundLabelBlueDisabled;
+		case "teal": return Color.BackgroundLabelTealDisabled;
+		case "green":
+		case "success": return Color.BackgroundLabelGreenDisabled;
+		case "yellow":
+		case "caution": return Color.BackgroundLabelYellowDisabled;
+		case "orange": return Color.BackgroundLabelOrangeDisabled;
+		case "pink":
+		case "danger": return Color.BackgroundLabelRedDisabled;
+		case "red": return Color.BackgroundLabelDarkRedDisabled;
+		case "purple":
+		case "primary": return Color.BackgroundLabelPurpleDisabled;
+		case "darkGrey": return Color.BackgroundLabelDarkGreyDisabled;
+		default:
+			if ($onSecondaryBackground) return Color.CoreSlate100;
+			return Color.BackgroundLabelGreyDisabled;
+	}
+	switch (variant) {
+		case "white": return Color.BackgroundLabelWhiteDisabled;
+		case "blue": return Color.BackgroundLabelBlue;
+		case "teal": return Color.BackgroundLabelTeal;
+		case "green":
+		case "success": return Color.BackgroundLabelGreen;
+		case "yellow":
+		case "caution": return Color.BackgroundLabelYellow;
+		case "orange": return Color.BackgroundLabelOrange;
+		case "pink":
+		case "danger": return Color.BackgroundLabelRed;
+		case "red": return Color.BackgroundLabelDarkRed;
+		case "purple":
+		case "primary": return Color.BackgroundLabelPurple;
+		case "darkGrey": return Color.BackgroundLabelDarkGrey;
+		default:
+			if ($onSecondaryBackground) return Color.CoreSlate200;
+			return 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__ */ jsxs(StyledSticker, {
+		$onSecondaryBackground: onSecondaryBackground,
+		variant,
+		disabled,
+		sizeIcon: !!icon && !hasContent,
+		...props,
+		children: [/* @__PURE__ */ jsxs(StickerContainer, {
+			direction: "horizontal",
+			align: "center",
+			spacing: Spacing[0],
+			children: [/* @__PURE__ */ jsxs(StickerContentContainer, {
+				direction: "horizontal",
+				align: "center",
+				spacing: Spacing[1],
+				children: [icon && /* @__PURE__ */ jsx(StickerIcon, {
+					variant,
+					children: icon
+				}), hasContent && /* @__PURE__ */ jsx(StyledTruncatedText, { children })]
+			}), isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, { children: "*" })]
+		}), onDismiss && /* @__PURE__ */ jsx(DismissButton, {
+			variant,
+			disabled,
+			id: "sticker__dismiss-button",
+			size: "sm",
+			onClick: onDismiss,
+			"aria-label": "Remove",
+			...dismissButtonProps,
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		})]
+	});
+};
+//#endregion
+export { StyledTruncatedText as a, StickerContentContainer as i, Sticker as n, StickerContainer as r, STICKER_COLOR_CONFIG as t };
+
+//# sourceMappingURL=Sticker-D6bwBTGr.mjs.map

package/dist/Sticker-D6bwBTGr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticker-D6bwBTGr.mjs","names":[],"sources":["../components/Sticker/Sticker.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons/12px';\nimport type { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from 'design-system/components/Button';\nimport Stack from 'design-system/components/Stack';\nimport {\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { Variant } from 'design-system/theme';\n// Define the options with labels\nexport const STICKER_COLOR_CONFIG = {\n  white: 'White',\n  blue: 'Blue',\n  teal: 'Teal',\n  green: 'Green',\n  yellow: 'Yellow',\n  orange: 'Orange',\n  pink: 'Pink',\n  red: 'Red',\n  purple: 'Purple',\n  darkGrey: 'Dark Grey',\n  grey: 'Grey',\n} as const;\n\n// Derive the type from the object keys\nexport type LabelBackgrounds = keyof typeof STICKER_COLOR_CONFIG;\n\nexport interface StickerProps extends ComponentPropsWithoutRef<'div'> {\n  variant?: LabelBackgrounds | Exclude<Variant, 'inverse'>;\n\n  /**\n   * Icon to render to the left of the Sticker. 12px icons recommended.\n   */\n  icon?: ReactNode;\n\n  /**\n   * Callback to call upon clicking \"x\" button. Non-null will render the button.\n   */\n  onDismiss?: MouseEventHandler;\n\n  /**\n   * Additional props to pass to the dismiss \"x\" button.\n   */\n  dismissButtonProps?: ComponentPropsWithoutRef<'button'>;\n\n  /**\n   * Renders disabled style for the entire Sticker and disables \"x\" button.\n   */\n  disabled?: boolean;\n\n  /**\n   * Shows a required asterisk (*) that won't be cut off when text is truncated.\n   */\n  isRequired?: boolean;\n\n  /**\n   * In some cases we render a sticker/badge on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst StickerIcon = styled('div')<Pick<StickerProps, 'variant'>>`\n  color: ${({ theme, variant }) => {\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return 'inherit';\n    }\n  }};\n  line-height: 0;\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n`;\n\nconst RequiredAsterisk = styled.span`\n  color: ${Color.TextDanger};\n  /* Ensure asterisk never gets hidden and takes minimal space */\n  flex-shrink: 0;\n`;\n\nexport const StickerContainer = styled(Stack)`\n  padding: 2px ${Spacing[1]};\n  /* Ensure container can shrink for text truncation */\n  min-width: 0;\n  flex: 1;\n`;\n\nexport const StickerContentContainer = styled(StickerContainer)`\n  ${paragraphMixins.sm}\n  padding: 0;\n`;\n\nexport const StyledTruncatedText = styled(TruncatedText)`\n  ${paragraphMixins.sm}\n  flex: 1;\n  min-width: 0;\n  line-height: 1;\n  transform: translateY(0.5px);\n`;\n\nconst DismissButton = styled(IconButton)<Pick<StickerProps, 'variant' | 'disabled'>>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-sticker: ${Color.PrimaryWhite};\n\n  border: none;\n\n  padding: 0 ${Spacing[1]};\n  border-radius: ${BorderRadius.Sm};\n  width: 1rem;\n\n  height: 100%;\n\n  display: inline-flex;\n  align-items: center;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  color: ${({ theme, variant, disabled }) => {\n    if (variant === 'red' || variant === 'darkGrey') {\n      return theme.color.text.inverse;\n    }\n    return disabled ? 'inherit' : Color.BorderIconPrimary;\n  }};\n\n  &${isDisabled} {\n    background-color: inherit !important;\n    color: inherit !important;\n  }\n\n  &${isFocusedVisible}${isNotDisabled} {\n    box-shadow: 0 0 0 1px var(--background-color-behind-sticker);\n  }\n\n  &${isHovered}${isNotDisabled} {\n    cursor: pointer;\n\n    background: ${({ variant }) => {\n      if (variant === 'grey' || variant === 'basic') {\n        return Color.BackgroundLabelGreyHover;\n      } else if (variant === 'darkGrey') {\n        return Color.BackgroundLabelDarkGreyHover;\n      } else if (variant === 'purple') {\n        return Color.BackgroundLabelPurpleHover;\n      } else if (variant === 'red' || variant === 'danger') {\n        return Color.BackgroundLabelDarkRedHover;\n      } else if (variant === 'orange') {\n        return Color.BackgroundLabelOrangeHover;\n      } else if (variant === 'yellow' || variant === 'caution') {\n        return Color.BackgroundLabelYellowHover;\n      } else if (variant === 'green' || variant === 'success') {\n        return Color.BackgroundLabelGreenHover;\n      } else if (variant === 'teal') {\n        return Color.BackgroundLabelTealHover;\n      } else if (variant === 'blue') {\n        return Color.BackgroundLabelBlueHover;\n      } else if (variant === 'pink') {\n        return Color.BackgroundLabelRedHover;\n      } else if (variant === 'white') {\n        return Color.BackgroundLabelWhiteHover;\n      } else {\n        return 'inherit';\n      }\n    }};\n  }\n`;\n\nconst StyledSticker = styled('div')<\n  StickerProps & { sizeIcon?: boolean; $onSecondaryBackground?: boolean }\n>`\n  display: inline-flex;\n  white-space: nowrap;\n\n  border-radius: ${BorderRadius.Sm};\n  height: 1rem;\n  max-width: 100%;\n\n  color: ${({ theme, variant, disabled }) => {\n    if (disabled) {\n      return variant === 'red' || variant === 'darkGrey'\n        ? theme.color.text.inverse\n        : theme.color.text.disabled;\n    }\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return theme.color.text.primary;\n    }\n  }};\n  background: ${({ variant, disabled, $onSecondaryBackground }) => {\n    if (disabled) {\n      switch (variant) {\n        case 'white':\n          return Color.BackgroundLabelWhite;\n        case 'blue':\n          return Color.BackgroundLabelBlueDisabled;\n        case 'teal':\n          return Color.BackgroundLabelTealDisabled;\n        case 'green':\n        case 'success':\n          return Color.BackgroundLabelGreenDisabled;\n        case 'yellow':\n        case 'caution':\n          return Color.BackgroundLabelYellowDisabled;\n        case 'orange':\n          return Color.BackgroundLabelOrangeDisabled;\n        case 'pink':\n        case 'danger':\n          return Color.BackgroundLabelRedDisabled;\n        case 'red':\n          return Color.BackgroundLabelDarkRedDisabled;\n        case 'purple':\n        case 'primary':\n          return Color.BackgroundLabelPurpleDisabled;\n        case 'darkGrey':\n          return Color.BackgroundLabelDarkGreyDisabled;\n        case 'basic':\n        case 'grey':\n        default:\n          if ($onSecondaryBackground) {\n            // eslint-disable-next-line rulesdir/no-core-color-tokens\n            return Color.CoreSlate100;\n          }\n          return Color.BackgroundLabelGreyDisabled;\n      }\n    }\n    switch (variant) {\n      case 'white':\n        return Color.BackgroundLabelWhiteDisabled;\n      case 'blue':\n        return Color.BackgroundLabelBlue;\n      case 'teal':\n        return Color.BackgroundLabelTeal;\n      case 'green':\n      case 'success':\n        return Color.BackgroundLabelGreen;\n      case 'yellow':\n      case 'caution':\n        return Color.BackgroundLabelYellow;\n      case 'orange':\n        return Color.BackgroundLabelOrange;\n      case 'pink':\n      case 'danger':\n        return Color.BackgroundLabelRed;\n      case 'red':\n        return Color.BackgroundLabelDarkRed;\n      case 'purple':\n      case 'primary':\n        return Color.BackgroundLabelPurple;\n      case 'darkGrey':\n        return Color.BackgroundLabelDarkGrey;\n      case 'basic':\n      default:\n        if ($onSecondaryBackground) {\n          // eslint-disable-next-line rulesdir/no-core-color-tokens\n          return Color.CoreSlate200;\n        }\n        return Color.BackgroundLabelGrey;\n    }\n  }};\n`;\n\nexport const Sticker = ({\n  variant,\n  icon,\n  children,\n  onDismiss,\n  disabled,\n  dismissButtonProps,\n  isRequired,\n  onSecondaryBackground,\n  ...props\n}: StickerProps) => {\n  const hasContent = children != null;\n\n  if (!hasContent) {\n    const hasIcon = icon != null;\n    if (!hasIcon) {\n      console.warn('Sticker component requires content and/or an icon to render');\n      return null;\n    }\n\n    if (hasIcon && !props['aria-label']) {\n      console.warn('Sticker component requires an aria-label when only rendering an icon');\n    }\n  }\n\n  return (\n    <StyledSticker\n      $onSecondaryBackground={onSecondaryBackground}\n      variant={variant}\n      disabled={disabled}\n      sizeIcon={!!icon && !hasContent}\n      {...props}\n    >\n      <StickerContainer direction='horizontal' align='center' spacing={Spacing[0]}>\n        <StickerContentContainer direction='horizontal' align='center' spacing={Spacing[1]}>\n          {icon && <StickerIcon variant={variant}>{icon}</StickerIcon>}\n          {hasContent && <StyledTruncatedText>{children}</StyledTruncatedText>}\n        </StickerContentContainer>\n        {isRequired && <RequiredAsterisk>*</RequiredAsterisk>}\n      </StickerContainer>\n\n      {onDismiss && (\n        <DismissButton\n          variant={variant}\n          disabled={disabled}\n          id='sticker__dismiss-button'\n          size='sm'\n          onClick={onDismiss}\n          aria-label='Remove'\n          {...dismissButtonProps}\n        >\n          <XIcon />\n        </DismissButton>\n      )}\n    </StyledSticker>\n  );\n};\n\nexport default Sticker;\n"],"mappings":"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"}

package/dist/Sticker-D_dutvp_.cjs

@@ -0,0 +1,246 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+const require_mixins_text = require("./mixins/text.cjs");
+const require_Stack = require("./Stack-BHb3ZB2A.cjs");
+require("./components/Stack/index.cjs");
+const require_lib_TruncatedText = require("./lib/TruncatedText.cjs");
+const require_IconButton = require("./IconButton-B1ZL8BqW.cjs");
+require("./components/Button/index.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-D_dutvp_.cjs.map

package/dist/Sticker-D_dutvp_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticker-D_dutvp_.cjs","names":["Color","Stack","Spacing","paragraphMixins","TruncatedText","IconButton","BorderRadius","isDisabled","isFocusedVisible","isNotDisabled","isHovered","XIcon"],"sources":["../components/Sticker/Sticker.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons/12px';\nimport type { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from 'design-system/components/Button';\nimport Stack from 'design-system/components/Stack';\nimport {\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { Variant } from 'design-system/theme';\n// Define the options with labels\nexport const STICKER_COLOR_CONFIG = {\n  white: 'White',\n  blue: 'Blue',\n  teal: 'Teal',\n  green: 'Green',\n  yellow: 'Yellow',\n  orange: 'Orange',\n  pink: 'Pink',\n  red: 'Red',\n  purple: 'Purple',\n  darkGrey: 'Dark Grey',\n  grey: 'Grey',\n} as const;\n\n// Derive the type from the object keys\nexport type LabelBackgrounds = keyof typeof STICKER_COLOR_CONFIG;\n\nexport interface StickerProps extends ComponentPropsWithoutRef<'div'> {\n  variant?: LabelBackgrounds | Exclude<Variant, 'inverse'>;\n\n  /**\n   * Icon to render to the left of the Sticker. 12px icons recommended.\n   */\n  icon?: ReactNode;\n\n  /**\n   * Callback to call upon clicking \"x\" button. Non-null will render the button.\n   */\n  onDismiss?: MouseEventHandler;\n\n  /**\n   * Additional props to pass to the dismiss \"x\" button.\n   */\n  dismissButtonProps?: ComponentPropsWithoutRef<'button'>;\n\n  /**\n   * Renders disabled style for the entire Sticker and disables \"x\" button.\n   */\n  disabled?: boolean;\n\n  /**\n   * Shows a required asterisk (*) that won't be cut off when text is truncated.\n   */\n  isRequired?: boolean;\n\n  /**\n   * In some cases we render a sticker/badge on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst StickerIcon = styled('div')<Pick<StickerProps, 'variant'>>`\n  color: ${({ theme, variant }) => {\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return 'inherit';\n    }\n  }};\n  line-height: 0;\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n`;\n\nconst RequiredAsterisk = styled.span`\n  color: ${Color.TextDanger};\n  /* Ensure asterisk never gets hidden and takes minimal space */\n  flex-shrink: 0;\n`;\n\nexport const StickerContainer = styled(Stack)`\n  padding: 2px ${Spacing[1]};\n  /* Ensure container can shrink for text truncation */\n  min-width: 0;\n  flex: 1;\n`;\n\nexport const StickerContentContainer = styled(StickerContainer)`\n  ${paragraphMixins.sm}\n  padding: 0;\n`;\n\nexport const StyledTruncatedText = styled(TruncatedText)`\n  ${paragraphMixins.sm}\n  flex: 1;\n  min-width: 0;\n  line-height: 1;\n  transform: translateY(0.5px);\n`;\n\nconst DismissButton = styled(IconButton)<Pick<StickerProps, 'variant' | 'disabled'>>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-sticker: ${Color.PrimaryWhite};\n\n  border: none;\n\n  padding: 0 ${Spacing[1]};\n  border-radius: ${BorderRadius.Sm};\n  width: 1rem;\n\n  height: 100%;\n\n  display: inline-flex;\n  align-items: center;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n  color: ${({ theme, variant, disabled }) => {\n    if (variant === 'red' || variant === 'darkGrey') {\n      return theme.color.text.inverse;\n    }\n    return disabled ? 'inherit' : Color.BorderIconPrimary;\n  }};\n\n  &${isDisabled} {\n    background-color: inherit !important;\n    color: inherit !important;\n  }\n\n  &${isFocusedVisible}${isNotDisabled} {\n    box-shadow: 0 0 0 1px var(--background-color-behind-sticker);\n  }\n\n  &${isHovered}${isNotDisabled} {\n    cursor: pointer;\n\n    background: ${({ variant }) => {\n      if (variant === 'grey' || variant === 'basic') {\n        return Color.BackgroundLabelGreyHover;\n      } else if (variant === 'darkGrey') {\n        return Color.BackgroundLabelDarkGreyHover;\n      } else if (variant === 'purple') {\n        return Color.BackgroundLabelPurpleHover;\n      } else if (variant === 'red' || variant === 'danger') {\n        return Color.BackgroundLabelDarkRedHover;\n      } else if (variant === 'orange') {\n        return Color.BackgroundLabelOrangeHover;\n      } else if (variant === 'yellow' || variant === 'caution') {\n        return Color.BackgroundLabelYellowHover;\n      } else if (variant === 'green' || variant === 'success') {\n        return Color.BackgroundLabelGreenHover;\n      } else if (variant === 'teal') {\n        return Color.BackgroundLabelTealHover;\n      } else if (variant === 'blue') {\n        return Color.BackgroundLabelBlueHover;\n      } else if (variant === 'pink') {\n        return Color.BackgroundLabelRedHover;\n      } else if (variant === 'white') {\n        return Color.BackgroundLabelWhiteHover;\n      } else {\n        return 'inherit';\n      }\n    }};\n  }\n`;\n\nconst StyledSticker = styled('div')<\n  StickerProps & { sizeIcon?: boolean; $onSecondaryBackground?: boolean }\n>`\n  display: inline-flex;\n  white-space: nowrap;\n\n  border-radius: ${BorderRadius.Sm};\n  height: 1rem;\n  max-width: 100%;\n\n  color: ${({ theme, variant, disabled }) => {\n    if (disabled) {\n      return variant === 'red' || variant === 'darkGrey'\n        ? theme.color.text.inverse\n        : theme.color.text.disabled;\n    }\n    switch (variant) {\n      case 'darkGrey':\n      case 'red':\n        return theme.color.text.inverse;\n      default:\n        return theme.color.text.primary;\n    }\n  }};\n  background: ${({ variant, disabled, $onSecondaryBackground }) => {\n    if (disabled) {\n      switch (variant) {\n        case 'white':\n          return Color.BackgroundLabelWhite;\n        case 'blue':\n          return Color.BackgroundLabelBlueDisabled;\n        case 'teal':\n          return Color.BackgroundLabelTealDisabled;\n        case 'green':\n        case 'success':\n          return Color.BackgroundLabelGreenDisabled;\n        case 'yellow':\n        case 'caution':\n          return Color.BackgroundLabelYellowDisabled;\n        case 'orange':\n          return Color.BackgroundLabelOrangeDisabled;\n        case 'pink':\n        case 'danger':\n          return Color.BackgroundLabelRedDisabled;\n        case 'red':\n          return Color.BackgroundLabelDarkRedDisabled;\n        case 'purple':\n        case 'primary':\n          return Color.BackgroundLabelPurpleDisabled;\n        case 'darkGrey':\n          return Color.BackgroundLabelDarkGreyDisabled;\n        case 'basic':\n        case 'grey':\n        default:\n          if ($onSecondaryBackground) {\n            // eslint-disable-next-line rulesdir/no-core-color-tokens\n            return Color.CoreSlate100;\n          }\n          return Color.BackgroundLabelGreyDisabled;\n      }\n    }\n    switch (variant) {\n      case 'white':\n        return Color.BackgroundLabelWhiteDisabled;\n      case 'blue':\n        return Color.BackgroundLabelBlue;\n      case 'teal':\n        return Color.BackgroundLabelTeal;\n      case 'green':\n      case 'success':\n        return Color.BackgroundLabelGreen;\n      case 'yellow':\n      case 'caution':\n        return Color.BackgroundLabelYellow;\n      case 'orange':\n        return Color.BackgroundLabelOrange;\n      case 'pink':\n      case 'danger':\n        return Color.BackgroundLabelRed;\n      case 'red':\n        return Color.BackgroundLabelDarkRed;\n      case 'purple':\n      case 'primary':\n        return Color.BackgroundLabelPurple;\n      case 'darkGrey':\n        return Color.BackgroundLabelDarkGrey;\n      case 'basic':\n      default:\n        if ($onSecondaryBackground) {\n          // eslint-disable-next-line rulesdir/no-core-color-tokens\n          return Color.CoreSlate200;\n        }\n        return Color.BackgroundLabelGrey;\n    }\n  }};\n`;\n\nexport const Sticker = ({\n  variant,\n  icon,\n  children,\n  onDismiss,\n  disabled,\n  dismissButtonProps,\n  isRequired,\n  onSecondaryBackground,\n  ...props\n}: StickerProps) => {\n  const hasContent = children != null;\n\n  if (!hasContent) {\n    const hasIcon = icon != null;\n    if (!hasIcon) {\n      console.warn('Sticker component requires content and/or an icon to render');\n      return null;\n    }\n\n    if (hasIcon && !props['aria-label']) {\n      console.warn('Sticker component requires an aria-label when only rendering an icon');\n    }\n  }\n\n  return (\n    <StyledSticker\n      $onSecondaryBackground={onSecondaryBackground}\n      variant={variant}\n      disabled={disabled}\n      sizeIcon={!!icon && !hasContent}\n      {...props}\n    >\n      <StickerContainer direction='horizontal' align='center' spacing={Spacing[0]}>\n        <StickerContentContainer direction='horizontal' align='center' spacing={Spacing[1]}>\n          {icon && <StickerIcon variant={variant}>{icon}</StickerIcon>}\n          {hasContent && <StyledTruncatedText>{children}</StyledTruncatedText>}\n        </StickerContentContainer>\n        {isRequired && <RequiredAsterisk>*</RequiredAsterisk>}\n      </StickerContainer>\n\n      {onDismiss && (\n        <DismissButton\n          variant={variant}\n          disabled={disabled}\n          id='sticker__dismiss-button'\n          size='sm'\n          onClick={onDismiss}\n          aria-label='Remove'\n          {...dismissButtonProps}\n        >\n          <XIcon />\n        </DismissButton>\n      )}\n    </StyledSticker>\n  );\n};\n\nexport default Sticker;\n"],"mappings":"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"}