@persona/design-system 0.5.0 → 0.6.0

package/dist/Select-CktsIrzf.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-CktsIrzf.mjs","names":["DropdownMenu"],"sources":["../components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from '@radix-ui/react-select';\nimport type { Property } from 'csstype';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, MoreIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Menu, {\n  MenuHeading,\n  MenuItem,\n  type MenuItemProps,\n  MenuList,\n  type MenuProps,\n} from 'design-system/components/Menu';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {\n  'aria-label'?: string;\n  placeholder?: string;\n\n  /**\n   * id will be applied to trigger\n   */\n  id?: string;\n\n  /**\n   * Class name will be applied to trigger\n   */\n  className?: string;\n\n  /**\n   * Max height of options menu\n   */\n  maxHeight?: number;\n\n  /**\n   * Min width of the select\n   */\n  minWidth?: number;\n\n  /**\n   * Width of the selected value container\n   */\n  valueContainerWidth?: 'auto' | '100%';\n\n  /**\n   * Render dropdown menu in a portal.\n   */\n  portal?: boolean;\n\n  /**\n   * Element the portalled menu renders into. Defaults to `document.body`. Pass a container inside\n   * the current dialog so the menu escapes clipping ancestors without leaving the dialog's\n   * dismiss scope, which would close it on click. Requires `portal`.\n   */\n  portalContainer?: HTMLElement | null;\n\n  /**\n   * Props to apply to Radix Select.Trigger within\n   */\n  triggerProps?: SelectPrimitive.SelectTriggerProps;\n\n  /**\n   * Props to apply to Radix Select.Content within\n   */\n  contentProps?: SelectPrimitive.SelectContentProps;\n\n  /**\n   * Callback meant for use with `react-hook-form`'s `useForm` (or Persona's `useFormSecurely`)\n   */\n  onChange?: (event: { target: { value: string } }) => void;\n\n  size?: InputSizes;\n\n  value?: string | null;\n\n  width?: string;\n\n  header?: ReactNode;\n\n  footer?: ReactNode;\n\n  /**\n   * z-index of content. Please use sparingly.\n   */\n  zIndex?: Property.ZIndex;\n}\n\ninterface SelectButtonProps extends InputMixinProps {\n  isSelectingPlaceholder: boolean;\n  $width?: string;\n  $minWidth?: number;\n}\n\nconst SelectButton = styled('button')<SelectButtonProps>`\n  ${inputMixin};\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  outline: none;\n  appearance: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: ${Spacing[6]};\n  width: ${({ $width }) => $width ?? '100%'};\n  min-width: ${({ $minWidth }) => ($minWidth != null ? `${$minWidth}px` : 'auto')};\n\n  &${isNotDisabled} {\n    cursor: pointer;\n  }\n\n  ${({ theme, isSelectingPlaceholder }) =>\n    isSelectingPlaceholder &&\n    css`\n      color: ${semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n    `}\n`;\n\ninterface SelectValueContainerProps {\n  width?: string;\n}\n\nconst SelectValueContainer = styled.span<SelectValueContainerProps>`\n  text-overflow: ellipsis;\n  min-width: 0px;\n  overflow: hidden;\n  text-align: start;\n\n  ${({ width }) =>\n    width &&\n    css`\n      width: ${width};\n    `}\n`;\n\nconst OptionSubtitle = styled.div`\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};\n  margin-top: ${Spacing[1]};\n`;\n\ninterface OptionsMenuProps {\n  maxHeight?: number;\n  size?: InputSizes;\n}\n\nconst OptionsMenu = styled(Menu)<OptionsMenuProps>`\n  width: var(--radix-select-trigger-width);\n  max-height: ${({ maxHeight }) => maxHeight ?? '225px !important'};\n  overflow-y: auto;\n  margin-bottom: 0;\n\n  ${({ size }) => {\n    switch (size) {\n      case 'md': {\n        return css`\n          ${MenuList} {\n            padding: ${Spacing[2]};\n          }\n\n          ${OptionItem} {\n            ${paragraphMixins.md};\n            padding: ${Spacing[2]};\n          }\n\n          ${MenuHeading} {\n            padding: ${Spacing[2]};\n          }\n        `;\n      }\n      case 'sm': {\n        return css`\n          ${MenuList} {\n            padding: ${Spacing[1]};\n          }\n\n          ${OptionItem} {\n            ${paragraphMixins.sm};\n            padding: ${Spacing[1]};\n          }\n\n          ${MenuHeading} {\n            padding: ${Spacing[1]};\n          }\n        `;\n      }\n    }\n  }}\n`;\n\nconst SelectContent = styled(SelectPrimitive.Content)<{ $zIndex?: number | string }>`\n  z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.dropdown};\n`;\n\nconst SelectHeaderContainer = styled(HStack)`\n  display: flex;\n  justify-content: space-between;\n  padding: ${Spacing[1]} ${Spacing[1]} 0 ${Spacing[1]};\n  margin-bottom: ${Spacing[1]};\n`;\n\nconst SelectFooter = styled.div`\n  padding: ${Spacing[1]} 0;\n  margin-top: ${Spacing[1]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst SelectMenu = forwardRef<HTMLUListElement, MenuProps & OptionsMenuProps>(function SelectMenu(\n  props: MenuProps,\n  forwardedRef,\n) {\n  return <OptionsMenu listRef={forwardedRef} {...props} />;\n});\n\nconst OptionItem = styled(MenuItem)`\n  ${paragraphMixins.md};\n  padding: ${Spacing[4]};\n`;\n\nconst SelectItem = forwardRef<HTMLDivElement, MenuItemProps>(function SelectItem(\n  props: MenuItemProps,\n  forwardedRef,\n) {\n  return <OptionItem ref={forwardedRef} {...props} />;\n});\n\nconst StyledIconContainer = styled(SelectPrimitive.Icon)<{ disabled?: boolean }>`\n  position: absolute;\n  right: ${Spacing[2]};\n  display: flex;\n  justify-content: center;\n\n  ${({ theme, disabled }) => css`\n    color: ${\n      disabled\n        ? semanticColor(theme, 'FgDisabled', Color.BorderIconDisabled)\n        : semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary)\n    };\n  `}\n`;\n\ninterface SelectHeaderProps {\n  title?: ReactNode;\n  menuItems?: ReactNode;\n  menuTriggerLabel?: string;\n}\n\nexport const SelectHeader = ({ title, menuItems, menuTriggerLabel }: SelectHeaderProps) => {\n  const uniqueId = useId();\n\n  return (\n    <SelectHeaderContainer align='center'>\n      {title && (\n        <Paragraph color='primary' weight='bold' size='md'>\n          {title}\n        </Paragraph>\n      )}\n      {menuItems && (\n        <DropdownMenu\n          portal={true}\n          trigger={\n            <IconButton>\n              <MoreIcon />\n            </IconButton>\n          }\n          triggerProps={{\n            'aria-label': menuTriggerLabel,\n            id: `select-header-menu-trigger-${uniqueId}`,\n          }}\n          side='right'\n          align='start'\n          zIndex={Z_INDICES.layeredDropdown}\n          contentProps={{\n            // Fix for Radix UI 2.1.15 upgrade breaking changes:\n            // 1. Portal rendering causes pointer-events issues preventing dropdown interaction\n            // 2. Portal timing causes onFocusOutside to fire immediately, closing dropdown\n            style: {\n              pointerEvents: 'auto', // Ensure dropdown items receive mouse events\n            },\n            onFocusOutside: (event) => event.preventDefault(), // Prevent immediate portal closing\n          }}\n        >\n          {menuItems}\n        </DropdownMenu>\n      )}\n    </SelectHeaderContainer>\n  );\n};\n\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  { portal = false, portalContainer, size = 'md', ...props }: SelectProps,\n  forwardedRef,\n) {\n  const {\n    'aria-label': ariaLabel,\n    hasError,\n    hasWarning,\n    focused,\n    active,\n    hovered,\n    disabled,\n    placeholder,\n    maxHeight,\n    children,\n    triggerProps,\n    contentProps,\n    id,\n    className,\n    onChange,\n    onValueChange,\n    value,\n    width,\n    header,\n    footer,\n    minWidth,\n    valueContainerWidth,\n    zIndex,\n  } = props;\n\n  const field = useFormField({ inputId: props.id, disabled, hasWarning, hasError });\n\n  const content = (\n    <SelectContent\n      position='popper'\n      side='bottom'\n      sideOffset={8}\n      $zIndex={zIndex}\n      {...contentProps}\n    >\n      <SelectMenu maxHeight={maxHeight} size={size}>\n        {header}\n        <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n        {footer && (\n          <>\n            <SelectFooter>{footer}</SelectFooter>\n          </>\n        )}\n      </SelectMenu>\n    </SelectContent>\n  );\n\n  return (\n    <SelectPrimitive.Root\n      {...props}\n      onValueChange={(value) => {\n        onChange?.({ target: { value } });\n        onValueChange?.(value);\n      }}\n      // Custom behavior to consider null as empty value\n      value={value === null ? '' : value}\n    >\n      <SelectPrimitive.Trigger\n        ref={forwardedRef}\n        asChild\n        id={id}\n        className={className}\n        disabled={field.disabled}\n        aria-describedby={field.helperTextId}\n        aria-errormessage={field.hasError ? field.helperTextId : undefined}\n        aria-invalid={field.hasError}\n        aria-label={ariaLabel}\n        {...triggerProps}\n      >\n        <SelectButton\n          hasWarning={field.hasWarning}\n          hasError={field.hasError}\n          hovered={hovered}\n          focused={focused}\n          active={active}\n          disabled={field.disabled}\n          placeholder={placeholder}\n          isSelectingPlaceholder={props.value === '' || props.value == null}\n          $minWidth={minWidth}\n          $size={size}\n          $width={width}\n        >\n          <SelectValueContainer width={valueContainerWidth}>\n            <SelectPrimitive.Value placeholder={placeholder} />\n          </SelectValueContainer>\n          <StyledIconContainer disabled={disabled}>\n            <CaretDownIcon />\n          </StyledIconContainer>\n        </SelectButton>\n      </SelectPrimitive.Trigger>\n      {portal ? (\n        <SelectPrimitive.Portal container={portalContainer}>{content}</SelectPrimitive.Portal>\n      ) : (\n        content\n      )}\n    </SelectPrimitive.Root>\n  );\n});\n\nexport default Select;\n\nexport const Option = forwardRef<HTMLDivElement, SelectPrimitive.SelectItemProps & MenuItemProps>(\n  function Option({ children, subtitle, ...props }, forwardedRef) {\n    return (\n      <SelectPrimitive.Item {...props} ref={forwardedRef} asChild>\n        <SelectItem {...props}>\n          <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n          {subtitle && <OptionSubtitle>{subtitle}</OptionSubtitle>}\n        </SelectItem>\n      </SelectPrimitive.Item>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/{Select-DwqWnWBi.d.mts → Select-yPqzqe5k.d.mts}

@@ -1,5 +1,5 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-M7BEIewR.mjs";
-import { l as MenuItemProps } from "./Menu-BCVhmNEe.mjs";
+import { l as MenuItemProps } from "./Menu-DdHN-drQ.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-DN_8iHVD.mjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -80,4 +80,4 @@ declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.Re
 declare const Option: _$react.ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & MenuItemProps<"div"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { SelectProps as i, Select as n, SelectHeader as r, Option as t };
-//# sourceMappingURL=Select-DwqWnWBi.d.mts.map
+//# sourceMappingURL=Select-yPqzqe5k.d.mts.map

package/dist/Select.d.mts

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "./Select-DwqWnWBi.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "./Select-yPqzqe5k.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/{Spacer-BsK8tTwA.mjs → Spacer-D58qwuXR.mjs}

@@ -1,4 +1,4 @@
-import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { a as styled } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import "./variables/spacing.mjs";
 //#endregion
 //#region components/Spacer/index.ts
@@ -10,4 +10,4 @@ var Spacer_default = styled.div.attrs(() => ({ "aria-hidden": true }))`
 //#endregion
 export { Spacer_default as t };
 
-//# sourceMappingURL=Spacer-BsK8tTwA.mjs.map
+//# sourceMappingURL=Spacer-D58qwuXR.mjs.map

package/dist/{Spacer-BsK8tTwA.mjs.map → Spacer-D58qwuXR.mjs.map}

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

package/dist/{Spinner-e725Rxkd.mjs → Spinner-Dpw3-3JS.mjs}

@@ -1,15 +1,12 @@
-import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
-import "./variables/transitions.mjs";
+import { a as styled, o as useTheme } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "./lib/semanticColor.mjs";
 import { rotate } from "./variables/keyframes.mjs";
+import "./variables/transitions.mjs";
 import { Color } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { LoaderIcon } from "@persona/icons";
 import { LoaderIcon as LoaderIcon$1 } from "@persona/icons/24px";
 //#region components/Spinner/Spinner.tsx
-const SPINNER_COLOR = {
-	default: Color.BorderIconPrimary,
-	inverse: Color.BorderIconInverse
-};
 const Container = styled.span`
   line-height: 0;
   display: inline-block;
@@ -27,7 +24,8 @@ const IconContainer = styled.span`
   animation: ${rotate} ${"1000ms"} linear infinite;
 `;
 const Spinner = ({ variant = "default", size = "sm", srText, className }) => {
-	const resolvedColor = SPINNER_COLOR[variant];
+	const theme = useTheme();
+	const resolvedColor = variant === "inverse" ? semanticColor(theme, "FgInverse", Color.BorderIconInverse) : semanticColor(theme, "FgPrimary", Color.BorderIconPrimary);
 	return /* @__PURE__ */ jsxs(Container, {
 		role: "status",
 		"aria-label": "loading spinner",
@@ -38,4 +36,4 @@ const Spinner = ({ variant = "default", size = "sm", srText, className }) => {
 //#endregion
 export { Spinner as t };
 
-//# sourceMappingURL=Spinner-e725Rxkd.mjs.map
+//# sourceMappingURL=Spinner-Dpw3-3JS.mjs.map

package/dist/Spinner-Dpw3-3JS.mjs.map

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

package/dist/{Stack-Bre2oiov.mjs → Stack-BqQndGI9.mjs}

@@ -1,4 +1,4 @@
-import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { jsx } from "react/jsx-runtime";
 //#region components/Stack/Stack.tsx
@@ -37,4 +37,4 @@ const HStack = (props) => /* @__PURE__ */ jsx(Stack, {
 //#endregion
 export { Stack as n, HStack as t };
 
-//# sourceMappingURL=Stack-Bre2oiov.mjs.map
+//# sourceMappingURL=Stack-BqQndGI9.mjs.map

package/dist/{Stack-Bre2oiov.mjs.map → Stack-BqQndGI9.mjs.map}

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

package/dist/{Stack-6eOrxjJi.d.mts → Stack-DgC83-nw.d.mts}

@@ -1,6 +1,6 @@
 import { Spacing } from "@persona/design-tokens";
-import * as _$styled_components0 from "styled-components";
 import { ComponentPropsWithoutRef } from "react";
+import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as CSS from "csstype";
 
@@ -44,4 +44,4 @@ type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;
 declare const HStack: (props: HStackProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { StackProps as i, HStackProps as n, Stack as r, HStack as t };
-//# sourceMappingURL=Stack-6eOrxjJi.d.mts.map
+//# sourceMappingURL=Stack-DgC83-nw.d.mts.map

package/dist/Stack.d.mts

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

package/dist/{Sticker-By3F8Aip.mjs → Sticker-BDyejPZa.mjs}

@@ -1,12 +1,116 @@
-import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
-import { isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
+import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { n as Stack } from "./Stack-Bre2oiov.mjs";
-import { t as IconButton } from "./IconButton-BnSEV7eR.mjs";
+import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { withAlpha } from "./lib/color.mjs";
+import { isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { n as Stack } from "./Stack-BqQndGI9.mjs";
+import { t as IconButton } from "./IconButton-CnJNIJVQ.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons/12px";
+//#region components/Sticker/tone.ts
+const buildSemanticStickerTone = (t, variant, onSecondaryBackground) => {
+	switch (variant) {
+		case "white": return {
+			background: t.FeedbackNeutralInverse,
+			backgroundHover: t.FeedbackNeutral1,
+			color: t.FgPrimary,
+			colorHover: t.FgPrimary,
+			colorDisabled: t.FgDisabled
+		};
+		case "blue": return {
+			background: t.FeedbackInfo2,
+			backgroundHover: t.FeedbackInfo3,
+			color: t.FgPrimaryStatic,
+			colorHover: t.FgPrimaryStatic,
+			colorDisabled: t.FgDisabled
+		};
+		case "teal": return {
+			background: t.FeedbackMisc1,
+			backgroundHover: t.FeedbackMisc2,
+			color: t.FgPrimaryStatic,
+			colorHover: t.FgPrimaryStatic,
+			colorDisabled: t.FgDisabled
+		};
+		case "green":
+		case "success": return {
+			background: t.FeedbackSuccess2,
+			backgroundHover: t.FeedbackSuccess3,
+			color: t.FgPrimaryStatic,
+			colorHover: t.FgPrimaryStatic,
+			colorDisabled: t.FgDisabled
+		};
+		case "yellow":
+		case "caution": return {
+			background: t.FeedbackHighlight1,
+			backgroundHover: t.FeedbackHighlight2,
+			color: t.FgPrimaryStatic,
+			colorHover: t.FgPrimaryStatic,
+			colorDisabled: t.FgDisabled
+		};
+		case "orange": return {
+			background: t.FeedbackWarning2,
+			backgroundHover: t.FeedbackWarning3,
+			color: t.FgPrimaryStatic,
+			colorHover: t.FgPrimaryStatic,
+			colorDisabled: t.FgDisabled
+		};
+		case "pink":
+		case "danger": return {
+			background: t.FeedbackDanger2,
+			backgroundHover: t.FeedbackDanger3,
+			color: t.FgPrimaryStatic,
+			colorHover: t.FgPrimaryStatic,
+			colorDisabled: t.FgDisabled
+		};
+		case "red": return {
+			background: t.FeedbackDanger3,
+			backgroundHover: t.FeedbackDanger4,
+			color: t.FgInverse,
+			colorHover: t.FgInverseStatic,
+			colorDisabled: withAlpha(t.FgInverseStatic, t.Opacity65)
+		};
+		case "purple":
+		case "primary": return {
+			background: t.FeedbackAccent2,
+			backgroundHover: t.FeedbackAccent3,
+			color: t.FgPrimaryStatic,
+			colorHover: t.FgInverseStatic,
+			colorDisabled: t.FgDisabled
+		};
+		case "darkGrey": return {
+			background: t.FeedbackNeutral4,
+			backgroundHover: t.FeedbackNeutral5,
+			color: t.FgInverseStatic,
+			colorHover: t.FgInverseStatic,
+			colorDisabled: withAlpha(t.FgInverseStatic, t.Opacity65)
+		};
+		default: return {
+			background: onSecondaryBackground ? t.FeedbackNeutral2Static : t.FeedbackNeutral1,
+			backgroundHover: t.FeedbackNeutral3,
+			color: t.FgPrimary,
+			colorHover: t.FgPrimary,
+			colorDisabled: t.FgDisabled
+		};
+	}
+};
+const semanticStickerToneCache = /* @__PURE__ */ new WeakMap();
+const semanticStickerTone = (t, variant, onSecondaryBackground = false) => {
+	let tones = semanticStickerToneCache.get(t);
+	if (!tones) {
+		tones = /* @__PURE__ */ new Map();
+		semanticStickerToneCache.set(t, tones);
+	}
+	const key = `${variant ?? ""}:${onSecondaryBackground ? "secondary" : "default"}`;
+	let tone = tones.get(key);
+	if (!tone) {
+		tone = buildSemanticStickerTone(t, variant, onSecondaryBackground);
+		tones.set(key, tone);
+	}
+	return tone;
+};
+//#endregion
 //#region components/Sticker/Sticker.tsx
 const STICKER_COLOR_CONFIG = {
 	white: "White",
@@ -22,7 +126,12 @@ const STICKER_COLOR_CONFIG = {
 	grey: "Grey"
 };
 const StickerIcon = styled("div")`
-  color: ${({ theme, variant }) => {
+  color: ${({ theme, variant, disabled }) => {
+	const tokens = semanticTokens(theme);
+	if (tokens) {
+		const tone = semanticStickerTone(tokens, variant);
+		return disabled ? tone.colorDisabled : tone.color;
+	}
 	switch (variant) {
 		case "darkGrey":
 		case "red": return theme.color.text.inverse;
@@ -36,7 +145,10 @@ const StickerIcon = styled("div")`
   }
 `;
 const RequiredAsterisk = styled.span`
-  color: ${Color.TextDanger};
+  color: ${({ theme, variant, disabled }) => {
+	const tokens = semanticTokens(theme);
+	return disabled && tokens ? semanticStickerTone(tokens, variant).colorDisabled : semanticColor(theme, "FgDanger1", Color.TextDanger);
+}};
   /* Ensure asterisk never gets hidden and takes minimal space */
   flex-shrink: 0;
 `;
@@ -59,7 +171,7 @@ const StyledTruncatedText = styled(TruncatedText)`
 `;
 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};
+  --background-color-behind-sticker: ${({ theme }) => semanticColor(theme, "SurfacePrimary", Color.PrimaryWhite)};
 
   border: none;
 
@@ -77,13 +189,26 @@ const DismissButton = styled(IconButton)`
     height: 12px;
   }
   color: ${({ theme, variant, disabled }) => {
+	const tokens = semanticTokens(theme);
+	if (tokens) {
+		const tone = semanticStickerTone(tokens, variant);
+		return disabled ? tone.colorDisabled : tone.color;
+	}
 	if (variant === "red" || variant === "darkGrey") return theme.color.text.inverse;
 	return disabled ? "inherit" : Color.BorderIconPrimary;
 }};
 
   &${isDisabled} {
     background-color: inherit !important;
-    color: inherit !important;
+    color: ${({ theme, variant }) => {
+	const tokens = semanticTokens(theme);
+	return tokens ? semanticStickerTone(tokens, variant).colorDisabled : "inherit";
+}} !important;
+
+    svg,
+    svg path {
+      color: inherit !important;
+    }
   }
 
   &${isFocusedVisible}${isNotDisabled} {
@@ -93,7 +218,12 @@ const DismissButton = styled(IconButton)`
   &${isHovered}${isNotDisabled} {
     cursor: pointer;
 
-    background: ${({ variant }) => {
+    ${({ theme, variant }) => semanticOnly((tokens) => css`
+        color: ${semanticStickerTone(tokens, variant).colorHover};
+      `)({ theme })}
+    background: ${({ theme, variant }) => {
+	const tokens = semanticTokens(theme);
+	if (tokens) return semanticStickerTone(tokens, variant).backgroundHover;
 	if (variant === "grey" || variant === "basic") return Color.BackgroundLabelGreyHover;
 	else if (variant === "darkGrey") return Color.BackgroundLabelDarkGreyHover;
 	else if (variant === "purple") return Color.BackgroundLabelPurpleHover;
@@ -117,7 +247,12 @@ const StyledSticker = styled("div")`
   height: 1rem;
   max-width: 100%;
 
-  color: ${({ theme, variant, disabled }) => {
+  color: ${({ theme, variant, disabled, $onSecondaryBackground }) => {
+	const tokens = semanticTokens(theme);
+	if (tokens) {
+		const tone = semanticStickerTone(tokens, variant, $onSecondaryBackground);
+		return disabled ? tone.colorDisabled : tone.color;
+	}
 	if (disabled) return variant === "red" || variant === "darkGrey" ? theme.color.text.inverse : theme.color.text.disabled;
 	switch (variant) {
 		case "darkGrey":
@@ -125,7 +260,12 @@ const StyledSticker = styled("div")`
 		default: return theme.color.text.primary;
 	}
 }};
-  background: ${({ variant, disabled, $onSecondaryBackground }) => {
+  background: ${({ theme, variant, disabled, $onSecondaryBackground }) => {
+	const tokens = semanticTokens(theme);
+	if (tokens) {
+		const background = semanticStickerTone(tokens, variant, $onSecondaryBackground).background;
+		return disabled ? withAlpha(background, tokens.Opacity65) : background;
+	}
 	if (disabled) switch (variant) {
 		case "white": return Color.BackgroundLabelWhite;
 		case "blue": return Color.BackgroundLabelBlueDisabled;
@@ -192,9 +332,14 @@ const Sticker = ({ variant, icon, children, onDismiss, disabled, dismissButtonPr
 				spacing: Spacing[1],
 				children: [icon && /* @__PURE__ */ jsx(StickerIcon, {
 					variant,
+					disabled,
 					children: icon
 				}), hasContent && /* @__PURE__ */ jsx(StyledTruncatedText, { children })]
-			}), isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, { children: "*" })]
+			}), isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {
+				variant,
+				disabled,
+				children: "*"
+			})]
 		}), onDismiss && /* @__PURE__ */ jsx(DismissButton, {
 			variant,
 			disabled,
@@ -210,4 +355,4 @@ const Sticker = ({ variant, icon, children, onDismiss, disabled, dismissButtonPr
 //#endregion
 export { StyledTruncatedText as a, StickerContentContainer as i, Sticker as n, StickerContainer as r, STICKER_COLOR_CONFIG as t };
 
-//# sourceMappingURL=Sticker-By3F8Aip.mjs.map
+//# sourceMappingURL=Sticker-BDyejPZa.mjs.map

package/dist/Sticker-BDyejPZa.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticker-BDyejPZa.mjs","names":[],"sources":["../components/Sticker/tone.ts","../components/Sticker/Sticker.tsx"],"sourcesContent":["import type { Color } from '@persona/design-tokens';\nimport { type PdsColor, withAlpha } from 'design-system/lib/color';\nimport type { SemanticTokens } from 'design-system/variables/semantic';\n\nimport type { StickerProps } from './Sticker';\n\nexport interface StickerTone {\n  background: Color;\n  backgroundHover: Color;\n  color: Color;\n  colorHover: Color;\n  colorDisabled: PdsColor;\n}\n\nconst buildSemanticStickerTone = (\n  t: SemanticTokens,\n  variant: StickerProps['variant'],\n  onSecondaryBackground: boolean,\n): StickerTone => {\n  switch (variant) {\n    case 'white':\n      return {\n        background: t.FeedbackNeutralInverse,\n        backgroundHover: t.FeedbackNeutral1,\n        color: t.FgPrimary,\n        colorHover: t.FgPrimary,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'blue':\n      return {\n        background: t.FeedbackInfo2,\n        backgroundHover: t.FeedbackInfo3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'teal':\n      return {\n        background: t.FeedbackMisc1,\n        backgroundHover: t.FeedbackMisc2,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'green':\n    case 'success':\n      return {\n        background: t.FeedbackSuccess2,\n        backgroundHover: t.FeedbackSuccess3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'yellow':\n    case 'caution':\n      return {\n        background: t.FeedbackHighlight1,\n        backgroundHover: t.FeedbackHighlight2,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'orange':\n      return {\n        background: t.FeedbackWarning2,\n        backgroundHover: t.FeedbackWarning3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'pink':\n    case 'danger':\n      return {\n        background: t.FeedbackDanger2,\n        backgroundHover: t.FeedbackDanger3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgPrimaryStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'red':\n      return {\n        background: t.FeedbackDanger3,\n        backgroundHover: t.FeedbackDanger4,\n        color: t.FgInverse,\n        colorHover: t.FgInverseStatic,\n        colorDisabled: withAlpha(t.FgInverseStatic, t.Opacity65),\n      };\n    case 'purple':\n    case 'primary':\n      return {\n        background: t.FeedbackAccent2,\n        backgroundHover: t.FeedbackAccent3,\n        color: t.FgPrimaryStatic,\n        colorHover: t.FgInverseStatic,\n        colorDisabled: t.FgDisabled,\n      };\n    case 'darkGrey':\n      return {\n        background: t.FeedbackNeutral4,\n        backgroundHover: t.FeedbackNeutral5,\n        color: t.FgInverseStatic,\n        colorHover: t.FgInverseStatic,\n        colorDisabled: withAlpha(t.FgInverseStatic, t.Opacity65),\n      };\n    default:\n      return {\n        background: onSecondaryBackground ? t.FeedbackNeutral2Static : t.FeedbackNeutral1,\n        backgroundHover: t.FeedbackNeutral3,\n        color: t.FgPrimary,\n        colorHover: t.FgPrimary,\n        colorDisabled: t.FgDisabled,\n      };\n  }\n};\n\nconst semanticStickerToneCache = new WeakMap<SemanticTokens, Map<string, StickerTone>>();\n\nexport const semanticStickerTone = (\n  t: SemanticTokens,\n  variant: StickerProps['variant'],\n  onSecondaryBackground = false,\n): StickerTone => {\n  let tones = semanticStickerToneCache.get(t);\n  if (!tones) {\n    tones = new Map();\n    semanticStickerToneCache.set(t, tones);\n  }\n\n  const key = `${variant ?? ''}:${onSecondaryBackground ? 'secondary' : 'default'}`;\n  let tone = tones.get(key);\n  if (!tone) {\n    tone = buildSemanticStickerTone(t, variant, onSecondaryBackground);\n    tones.set(key, tone);\n  }\n  return tone;\n};\n","import type { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons/12px';\nimport { IconButton } from 'design-system/components/Button';\nimport Stack from 'design-system/components/Stack';\nimport { withAlpha } from 'design-system/lib/color';\nimport {\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { Variant } from 'design-system/theme';\n\nimport { semanticStickerTone } from './tone';\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' | 'disabled'>>`\n  color: ${({ theme, variant, disabled }) => {\n    const tokens = semanticTokens(theme);\n    if (tokens) {\n      const tone = semanticStickerTone(tokens, variant);\n      return disabled ? tone.colorDisabled : tone.color;\n    }\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<Pick<StickerProps, 'variant' | 'disabled'>>`\n  color: ${({ theme, variant, disabled }) => {\n    const tokens = semanticTokens(theme);\n    return disabled && tokens\n      ? semanticStickerTone(tokens, variant).colorDisabled\n      : semanticColor(theme, 'FgDanger1', Color.TextDanger);\n  }};\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: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', 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    const tokens = semanticTokens(theme);\n    if (tokens) {\n      const tone = semanticStickerTone(tokens, variant);\n      return disabled ? tone.colorDisabled : tone.color;\n    }\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: ${({ theme, variant }) => {\n      const tokens = semanticTokens(theme);\n      return tokens ? semanticStickerTone(tokens, variant).colorDisabled : 'inherit';\n    }} !important;\n\n    svg,\n    svg path {\n      color: inherit !important;\n    }\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    ${({ theme, variant }) =>\n      semanticOnly(\n        (tokens) => css`\n        color: ${semanticStickerTone(tokens, variant).colorHover};\n      `,\n      )({ theme })}\n    background: ${({ theme, variant }) => {\n      const tokens = semanticTokens(theme);\n      if (tokens) {\n        return semanticStickerTone(tokens, variant).backgroundHover;\n      }\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, $onSecondaryBackground }) => {\n    const tokens = semanticTokens(theme);\n    if (tokens) {\n      const tone = semanticStickerTone(tokens, variant, $onSecondaryBackground);\n      return disabled ? tone.colorDisabled : tone.color;\n    }\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: ${({ theme, variant, disabled, $onSecondaryBackground }) => {\n    const tokens = semanticTokens(theme);\n    if (tokens) {\n      const background = semanticStickerTone(tokens, variant, $onSecondaryBackground).background;\n      return disabled ? withAlpha(background, tokens.Opacity65) : background;\n    }\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            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          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 && (\n            <StickerIcon variant={variant} disabled={disabled}>\n              {icon}\n            </StickerIcon>\n          )}\n          {hasContent && <StyledTruncatedText>{children}</StyledTruncatedText>}\n        </StickerContentContainer>\n        {isRequired && (\n          <RequiredAsterisk variant={variant} disabled={disabled}>\n            *\n          </RequiredAsterisk>\n        )}\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-Ep6N4Exq.d.mts → Sticker-qvWkqEMw.d.mts}

@@ -1,9 +1,9 @@
-import { i as Variant } from "./theme-Biwx2eJZ.mjs";
-import { i as StackProps } from "./Stack-6eOrxjJi.mjs";
-import { r as TruncatedTextProps } from "./TruncatedText-C-MJPIRi.mjs";
-import * as _$styled_components0 from "styled-components";
+import { o as Variant } from "./theme-D02MOaH6.mjs";
+import { i as StackProps } from "./Stack-DgC83-nw.mjs";
+import { r as TruncatedTextProps } from "./TruncatedText-B2v53Y11.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Sticker/Sticker.d.ts
@@ -65,4 +65,4 @@ declare const Sticker: ({
 }: 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-Ep6N4Exq.d.mts.map
+//# sourceMappingURL=Sticker-qvWkqEMw.d.mts.map

package/dist/Sticker.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-Ep6N4Exq.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-qvWkqEMw.mjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/StringValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-DBBfOCX1.mjs";
+import { t as ValueControlProps } from "./types-C2s9yhgO.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/StringValueControl/StringValueControl.d.ts

package/dist/Tab.d.mts

@@ -1,7 +1,6 @@
-import { r as ButtonProps, t as Button } from "./Button-CRFbWv3l.mjs";
-import * as _$styled_components0 from "styled-components";
-import * as _$react from "react";
+import { t as Button } from "./Button-CTgyA3gc.mjs";
 import { ComponentPropsWithoutRef, ElementType, ReactElement } from "react";
+import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/TabBar/Tab.d.ts
@@ -19,7 +18,7 @@ interface TabBaseProps<T extends ElementType = 'button'> extends ComponentPropsW
   size?: 'md' | 'sm';
 }
 type TabProps<T extends ElementType = 'button'> = TabBaseProps<T> & TabAdornment;
-declare const StyledTab: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, TabBaseProps<"button">, never>;
+declare const StyledTab: _$styled_components0.StyledComponent<any, any, any, any>;
 declare const Tab: <T extends ElementType = "button">({
   selected,
   disabled,

package/dist/{TabBar-CWF65Tv4.mjs → TabBar-Dw3xE_B-.mjs}

@@ -1,9 +1,10 @@
-import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
-import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import "./variables/transitions.mjs";
+import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { n as Button, t as IconButton } from "./IconButton-BnSEV7eR.mjs";
-import { t as Badge } from "./Badge-CM2TzkdE.mjs";
+import "./variables/transitions.mjs";
+import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { n as Button, t as IconButton } from "./IconButton-CnJNIJVQ.mjs";
+import { t as Badge } from "./Badge-BtNIvtDZ.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { cloneElement, createContext, forwardRef, useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +18,7 @@ const TabBarContainer = styled.div`
   height: ${Spacing[6]};
   position: relative;
   box-sizing: border-box;
-  border-bottom: 1px solid ${Color.BorderDivider};
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
   justify-content: space-between;
   gap: ${Spacing[4]};
 `;
@@ -123,12 +124,12 @@ const sizeStyles = {
   `
 };
 const tabSelectedStyle = css`
-  color: ${({ theme }) => theme.color.primary.brand};
-  border-bottom-color: ${({ theme }) => theme.color.primary.brand};
+  color: ${({ theme }) => semanticColor(theme, "FgAccent", theme.color.primary.brand)};
+  border-bottom-color: ${({ theme }) => semanticColor(theme, "BorderAccent", theme.color.primary.brand)};
   box-shadow: none;
   &:after {
     transition: border-bottom-color ${"200ms"};
-    border-bottom-color: ${({ theme }) => theme.color.primary.brand};
+    border-bottom-color: ${({ theme }) => semanticColor(theme, "BorderAccent", theme.color.primary.brand)};
   }
 `;
 const StyledTab = styled(Button).attrs({
@@ -141,7 +142,7 @@ const StyledTab = styled(Button).attrs({
   position: relative;
   white-space: nowrap;
   background-color: transparent;
-  color: ${({ theme, disabled }) => disabled ? theme.color.variants.basic.textDisabled : theme.color.text.tertiary};
+  color: ${({ theme, disabled }) => disabled ? semanticColor(theme, "FgDisabled", theme.color.variants.basic.textDisabled) : semanticColor(theme, "FgSecondary", theme.color.text.tertiary)};
   transition: color ${"200ms"} ease-out;
   height: 32px;
   margin: 0;
@@ -160,8 +161,8 @@ const StyledTab = styled(Button).attrs({
   }
   &${isHovered}${isNotDisabled} {
     background-color: unset;
-    ${({ selected }) => !selected && css`
-        color: ${Color.TextPrimary};
+    ${({ selected, theme }) => !selected && css`
+        color: ${semanticColor(theme, "FgPrimary", Color.TextPrimary)};
       `}
   }
   &${isFocused}${isNotDisabled} {
@@ -254,20 +255,20 @@ var TabBarIconButton_default = styled(IconButton).attrs({ size: "sm" })`
     background-color: transparent;
   }
   &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {
-    box-shadow: 0 0 0 3px ${({ theme }) => theme.color.variants.basic.highlight};
+    box-shadow: 0 0 0 3px ${({ theme }) => semanticColor(theme, "ActionNeutralActive", theme.color.variants.basic.highlight)};
   }
 
   svg {
-    color: ${Color.CoreSlate800};
+    color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.CoreSlate800)};
   }
 
   &:hover {
     svg {
-      color: ${Color.CoreSlate900};
+      color: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.CoreSlate900)};
     }
   }
 `;
 //#endregion
 export { TabContainer as a, TabBar as i, StyledTab as n, Tab as r, TabBarIconButton_default as t };
 
-//# sourceMappingURL=TabBar-CWF65Tv4.mjs.map
+//# sourceMappingURL=TabBar-Dw3xE_B-.mjs.map