@persona/design-system 0.1.5-pre.4 → 0.1.7

package/dist/components/Stack/index.cjs

@@ -2,8 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_Stack = require("../../Stack-BHb3ZB2A.cjs");
+const require_Stack = require("../../Stack-BF-9YjA1.cjs");
 exports.HStack = require_Stack.HStack;
 exports.Stack = require_Stack.Stack;
 exports.default = require_Stack.Stack;

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

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

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

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

package/dist/components/Stack/index.mjs

@@ -1,2 +1,2 @@
-import { n as Stack, t as HStack } from "../../Stack-hwgS2FU1.mjs";
+import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
 export { HStack, Stack, Stack as default };

package/dist/components/StatusIndicator/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_mixins_text = require("../../mixins/text.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");

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

@@ -1 +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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"}
+{"version":3,"file":"index.cjs","names":["Color","paragraphMixins","Spacing","BorderRadius","CircleNullIcon"],"sources":["../../../components/StatusIndicator/StatusIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleNullIcon } from '@persona/icons/12px';\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,YAAYA,uBAAAA,MAAM;EAClB,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,WAAW;EACT,YAAYA,uBAAAA,MAAM;EAClB,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,SAAS;EACP,YAAYA,uBAAAA,MAAM;EAClB,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,UAAU;EACR,YAAYA,uBAAAA,MAAM;EAClB,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,SAAS;EACP,YAAYA,uBAAAA,MAAM;EAClB,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,SAAS;EACP,YAAYA,uBAAAA,MAAM;EAClB,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,eAAe;EACb,YAAYA,uBAAAA,MAAM;EAClB,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,eAAe;EACb,YAAYA,uBAAAA,MAAM;EAClB,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACF;AAED,MAAM,4BAA8D;CAClE,SAAS;EACP,YAAY;EACZ,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,WAAW;EACT,YAAY;EACZ,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,UAAU;EACR,YAAY;EACZ,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,SAAS;EACP,YAAY;EACZ,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,eAAe;EACb,YAAY;EACZ,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACD,eAAe;EACb,YAAY;EACZ,MAAMA,uBAAAA,MAAM;EACZ,MAAMA,uBAAAA,MAAM;EACb;CACF;AAED,MAAM,QAAQ,kBAAA,QAAO,GAAuD;IACxEC,oBAAAA,gBAAgB,GAAG;;;;;;;;;;YAUX,EAAE,OAAO,kBAAkB;AAEnC,SADe,gBAAgB,WAAW,uBAAuB,2BACnD,OAAO;EACrB;;AAGJ,MAAM,gBAAgB,kBAAA,QAAO,IAA4B;;YAE7C,EAAE,iBAAiB,WAAW;;AAG1C,MAAM,iBAAiB,kBAAA,QAAO,GAA0B;;;SAG/CC,uBAAAA,QAAQ,GAAG;cACN,EAAE,eACZ,WAAW,GAAGA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,OAAO,OAAOA,uBAAAA,QAAQ,KAAK;;;;AAK/F,MAAM,wBAAwB,kBAAA,QAAO,GAAuD;;;mBAGzEC,uBAAAA,aAAa,GAAG;;;KAG9B,EAAE,OAAO,kBAAkB;AAE5B,QAAO,kBAAA,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,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,gBAAD,EAAkB,CAAA;CAEnC,MAAM,UAAU,gBAAgB;AAEhC,QACE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;EAAuB,OAAO;EAAM,aAAa;EAAY,GAAI;YAC/D,iBAAA,GAAA,kBAAA,MAAC,gBAAD;GAAgB,UAAU;aAA1B,CACG,WAAW,iBAAA,GAAA,kBAAA,KAAC,eAAD;IAAe,YAAY,OAAO,MAAM;cAAO;IAA6B,CAAA,EACxF,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAO,OAAO;IAAM,aAAa;IAC9B;IACK,CAAA,CACO;;EACK,CAAA"}

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

@@ -1 +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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/StatusIndicator/StatusIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleNullIcon } from '@persona/icons/12px';\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

@@ -2,8 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_Sticker = require("../../Sticker-D_dutvp_.cjs");
+const require_Sticker = require("../../Sticker-D0jIU2Dt.cjs");
 exports.STICKER_COLOR_CONFIG = require_Sticker.STICKER_COLOR_CONFIG;
 exports.Sticker = require_Sticker.Sticker;
 exports.StickerContainer = require_Sticker.StickerContainer;

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

@@ -1,2 +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";
+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-N8XZnv7M.cjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

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

@@ -1,2 +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";
+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-DjF9VJQB.mjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/components/Sticker/index.mjs

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

package/dist/components/SwatchPicker/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
 require("../../variables/effect.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
@@ -30,7 +30,7 @@ const ColorSwatch = styled_components.default.button`
   width: 24px;
   height: 24px;
   padding: 0;
-  background-color: transparent;
+  background-color: ${({ $color }) => $color ?? "transparent"};
   border-radius: ${_persona_design_tokens.BorderRadius.Circle};
   border: 2px solid ${_persona_design_tokens.Color.PrimaryWhite};
   transition: all 100ms ease-out;
@@ -50,9 +50,7 @@ const Swatch = ({ color, selected, onSelect }) => {
 		title: "#FFFFFF",
 		onClick: () => onSelect(color)
 	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorSwatch, {
-		css: `
-        background-color: ${color};
-      `,
+		$color: color,
 		selected,
 		title: color,
 		onClick: () => onSelect(color)

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

@@ -1 +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"}
+{"version":3,"file":"index.cjs","names":["Spacing","BorderRadius","Color"],"sources":["../../../components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\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; $color?: string }>`\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background-color: ${({ $color }) => $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 $color={color} selected={selected} title={color} onClick={() => onSelect(color)} />\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,MAA8C;;;;;uBAKlD,EAAE,aAAa,UAAU,cAAc;mBAC3CC,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;EAAa,QAAQ;EAAiB;EAAU,OAAO;EAAO,eAAe,SAAS,MAAM;EAAI,CAAA"}

package/dist/components/SwatchPicker/index.mjs

@@ -24,7 +24,7 @@ const ColorSwatch = styled.button`
   width: 24px;
   height: 24px;
   padding: 0;
-  background-color: transparent;
+  background-color: ${({ $color }) => $color ?? "transparent"};
   border-radius: ${BorderRadius.Circle};
   border: 2px solid ${Color.PrimaryWhite};
   transition: all 100ms ease-out;
@@ -44,9 +44,7 @@ const Swatch = ({ color, selected, onSelect }) => {
 		title: "#FFFFFF",
 		onClick: () => onSelect(color)
 	}) : /* @__PURE__ */ jsx(ColorSwatch, {
-		css: `
-        background-color: ${color};
-      `,
+		$color: color,
 		selected,
 		title: color,
 		onClick: () => onSelect(color)

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

@@ -1 +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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\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; $color?: string }>`\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background-color: ${({ $color }) => $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 $color={color} selected={selected} title={color} onClick={() => onSelect(color)} />\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,MAA8C;;;;;uBAKlD,EAAE,aAAa,UAAU,cAAc;mBAC3C,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;EAAa,QAAQ;EAAiB;EAAU,OAAO;EAAO,eAAe,SAAS,MAAM;EAAI,CAAA"}

package/dist/components/TabBar/index.cjs

@@ -2,8 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_TabBar = require("../../TabBar-BMv8dAS3.cjs");
+const require_TabBar = require("../../TabBar-BpHMYvNb.cjs");
 exports.StyledTab = require_TabBar.StyledTab;
 exports.Tab = require_TabBar.Tab;
 exports.TabBar = require_TabBar.TabBar;

package/dist/components/TabBar/index.mjs

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