@persona/design-system 0.1.7 → 0.1.9

package/dist/components/Slider/index.cjs

@@ -1,245 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_chunk = require("../../chunk-CKQMccvm.cjs");
-const require_mixins_focus = require("../../mixins/focus.cjs");
-const require_mixins_text = require("../../mixins/text.cjs");
-const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-let styled_components$1 = require_chunk.__toESM(styled_components, 1);
-styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let lodash = require("lodash");
-let _react_aria_utils = require("@react-aria/utils");
-let _react_aria_i18n = require("@react-aria/i18n");
-let _react_aria_slider = require("@react-aria/slider");
-let _react_stately_slider = require("@react-stately/slider");
-let _floating_ui_react = require("@floating-ui/react");
-let _react_aria_focus = require("@react-aria/focus");
-let _react_aria_visually_hidden = require("@react-aria/visually-hidden");
-let react_hook_form = require("react-hook-form");
-//#region components/Slider/SliderThumb.tsx
-const Tooltip = (0, styled_components$1.default)(require_Tooltip.FloatingTooltip)`
-  ${require_mixins_text.paragraphMixins.sm};
-`;
-const Thumb = (0, styled_components$1.default)("div")`
-  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */
-  --background-color-behind-thumb: ${_persona_design_tokens.Color.PrimaryWhite};
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  background: ${(props) => props.disabled ? _persona_design_tokens.Color.BackgroundInputDisabled : _persona_design_tokens.Color.BackgroundInputDefault};
-  cursor: ${(props) => props.disabled ? "inherit" : "pointer"};
-  border-radius: 50%;
-  border: 1px solid ${_persona_design_tokens.Color.BorderInputDisabled};
-  /* Enable clicks on thumb */
-  pointer-events: auto;
-
-  &[data-focused] {
-    ${require_mixins_focus.focusStyle}
-    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */
-    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);
-  }
-`;
-const usePressed = (context, options) => {
-	const closeHandler = (0, react.useMemo)(() => (0, lodash.debounce)(() => context.onOpenChange(false), options?.delay ?? 500), []);
-	return { reference: {
-		onPointerDown: () => {
-			context.onOpenChange(true);
-		},
-		onPointerUp: () => {
-			closeHandler();
-		}
-	} };
-};
-const SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }) => {
-	const inputRef = (0, react.useRef)(null);
-	const { thumbProps, inputProps } = (0, _react_aria_slider.useSliderThumb)({
-		index,
-		trackRef,
-		inputRef
-	}, state);
-	const { focusProps, isFocused } = (0, _react_aria_focus.useFocusRing)();
-	const [open, setOpen] = (0, react.useState)(false);
-	const { x, y, refs, strategy, context } = (0, _floating_ui_react.useFloating)({
-		placement: "top",
-		open,
-		onOpenChange: setOpen,
-		whileElementsMounted: _floating_ui_react.autoUpdate,
-		middleware: [
-			(0, _floating_ui_react.offset)(4),
-			(0, _floating_ui_react.flip)(),
-			(0, _floating_ui_react.shift)({ padding: 4 })
-		]
-	});
-	const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([
-		(0, _floating_ui_react.useRole)(context, { role: "tooltip" }),
-		(0, _floating_ui_react.useDismiss)(context),
-		usePressed(context)
-	]);
-	(0, react.useEffect)(() => {
-		setOpen(isFocused);
-	}, [isFocused]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: {
-			position: "absolute",
-			top: "50%",
-			transform: "translateX(-50%) translateY(-50%)",
-			left: `${state.getThumbPercent(index) * 100}%`
-		},
-		children: [open && !hideTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
-			...(0, _react_aria_utils.mergeProps)(getFloatingProps({
-				ref: refs.setFloating,
-				style: {
-					position: strategy,
-					top: y ?? "",
-					left: x ?? ""
-				}
-			}), outputProps),
-			children: state.getThumbValueLabel(index)
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb, {
-			...(0, _react_aria_utils.mergeProps)(thumbProps, getReferenceProps({ ref: refs.setReference }), isFocused ? { "data-focused": true } : void 0),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_aria_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				ref: inputRef,
-				...(0, _react_aria_utils.mergeProps)(inputProps, focusProps)
-			}) })
-		})]
-	});
-};
-//#endregion
-//#region components/Slider/Slider.tsx
-const SliderContainer = styled_components.default.div`
-  display: flex;
-  align-items: center;
-  touch-action: none;
-  position: relative;
-`;
-const SliderLabel = styled_components.default.div`
-  ${require_mixins_text.paragraphMixins.md};
-  &:first-of-type {
-    padding-right: ${_persona_design_tokens.Spacing[2]};
-  }
-
-  &:last-of-type {
-    padding-left: ${_persona_design_tokens.Spacing[2]};
-  }
-`;
-const SliderTrack = styled_components.default.div`
-  position: relative;
-  width: 100%;
-  height: 4px;
-  border-radius: 4px;
-  outline: none;
-  transition: background 0.2s;
-
-  /* Disable clicks on slide bar */
-  pointer-events: none;
-
-  ${({ percents, track, disabled }) => {
-	const activeColor = disabled ? _persona_design_tokens.Color.BorderInputDisabled : _persona_design_tokens.Color.CoreBlue700;
-	const trackColor = _persona_design_tokens.Color.BorderDivider;
-	if (track === false) return styled_components.css`
-        background: ${_persona_design_tokens.Color.BorderDivider};
-      `;
-	if (percents.length === 2) return styled_components.css`
-        background: linear-gradient(
-          to right,
-          ${trackColor} 0%,
-          ${trackColor} ${percents[0] * 100}%,
-          ${activeColor} ${percents[0] * 100}%,
-          ${activeColor} ${percents[1] * 100}%,
-          ${trackColor} ${percents[1] * 100}%,
-          ${trackColor} 100%
-        );
-      `;
-	const leftColor = activeColor;
-	const rightColor = trackColor;
-	return styled_components.css`
-      background: linear-gradient(
-        to right,
-        ${leftColor} 0%,
-        ${leftColor} ${percents[0] * 100}%,
-        ${rightColor} ${percents[0] * 100}%,
-        ${rightColor} 100%
-      );
-    `;
-}}
-`;
-const Slider = ({ minLabel, maxLabel, showLabels, track, width, hideTooltips, className, id, onBlur, ...elemProps }) => {
-	const { min, max, value, defaultValue, disabled } = elemProps;
-	const trackRef = (0, react.useRef)(null);
-	const numberFormatter = (0, _react_aria_i18n.useNumberFormatter)(elemProps.formatOptions);
-	const ariaElemProps = {
-		...elemProps,
-		isDisabled: disabled,
-		minValue: min,
-		maxValue: max,
-		value: typeof value === "number" ? [value] : value,
-		defaultValue: typeof defaultValue === "number" ? [defaultValue] : defaultValue,
-		onChange: typeof elemProps.onChange !== "undefined" ? (v) => {
-			if (Array.isArray(v) && v.length === 1) return elemProps.onChange(v[0]);
-			return elemProps.onChange(v);
-		} : void 0
-	};
-	const state = (0, _react_stately_slider.useSliderState)({
-		...ariaElemProps,
-		numberFormatter
-	});
-	const { groupProps, trackProps, outputProps } = (0, _react_aria_slider.useSlider)(ariaElemProps, state, trackRef);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SliderContainer, {
-		...groupProps,
-		style: {
-			position: "relative",
-			alignItems: "center",
-			width: width ?? 300,
-			touchAction: "none"
-		},
-		className,
-		id,
-		onBlur,
-		children: [
-			showLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderLabel, { children: minLabel ?? min }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderTrack, {
-				...trackProps,
-				track,
-				ref: trackRef,
-				percents: state.values.map((_v, i) => state.getThumbPercent(i)),
-				disabled,
-				children: state.values.map((_v, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderThumb, {
-					index: i,
-					state,
-					trackRef,
-					hideTooltips,
-					outputProps
-				}, `${trackProps.id}_thumb${i}`))
-			}),
-			showLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderLabel, { children: maxLabel ?? max })
-		]
-	});
-};
-//#endregion
-//#region components/Slider/SliderRHF.tsx
-const SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }) => {
-	const { field: { onChange, onBlur, name, value } } = (0, react_hook_form.useController)({
-		name: nameProp,
-		control,
-		rules: { required: true },
-		defaultValue
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
-		...elemProps,
-		onBlur,
-		onChange,
-		value,
-		name
-	});
-};
-//#endregion
-exports.Slider = Slider;
-exports.SliderRHF = SliderRHF;
-exports.default = Slider;
-
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["FloatingTooltip","paragraphMixins","Color","focusStyle","autoUpdate","VisuallyHidden","paragraphMixins","Spacing","Color"],"sources":["../../../components/Slider/SliderThumb.tsx","../../../components/Slider/Slider.tsx","../../../components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { FloatingTooltip } from 'design-system/components/Tooltip';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\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-thumb: ${Color.PrimaryWhite};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${(props) =>\n    props.disabled ? Color.BackgroundInputDisabled : Color.BackgroundInputDefault};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid ${Color.BorderInputDisabled};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport SliderThumb from 'design-system/components/Slider/SliderThumb';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div`\n  ${paragraphMixins.md};\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background 0.2s;\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ percents, track, disabled }) => {\n    const activeColor = disabled ? Color.BorderInputDisabled : Color.CoreBlue700;\n    const trackColor = Color.BorderDivider;\n\n    if (track === false) {\n      return css`\n        background: ${Color.BorderDivider};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}

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

@@ -1,3 +0,0 @@
-import { Slider, SliderProps } from "../../Slider.cjs";
-import SliderRHF from "../../SliderRHF.cjs";
-export { Slider, Slider as default, SliderProps, SliderRHF };

package/dist/components/Spacer/index.cjs

@@ -1,2 +0,0 @@
-const require_Spacer = require("../../Spacer-GYHbk-dS.cjs");
-module.exports = require_Spacer.Spacer_default;

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

@@ -1,2 +0,0 @@
-import Spacer from "../../Spacer.cjs";
-export = Spacer;

package/dist/components/Spinner/index.cjs

@@ -1,7 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_Spinner = require("../../Spinner-B6bx70yR.cjs");
-exports.Spinner = require_Spinner.Spinner;
-exports.default = require_Spinner.Spinner;

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

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

package/dist/components/Stack/index.cjs

@@ -1,8 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-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 +0,0 @@
-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/StatusIndicator/index.cjs

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

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

@@ -1 +0,0 @@
-{"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.d.cts

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

package/dist/components/Sticker/index.cjs

@@ -1,11 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-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;
-exports.StickerContentContainer = require_Sticker.StickerContentContainer;
-exports.StyledTruncatedText = require_Sticker.StyledTruncatedText;
-exports.default = require_Sticker.Sticker;

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

@@ -1,2 +0,0 @@
-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/SwatchPicker/index.cjs

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

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

@@ -1 +0,0 @@
-{"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.d.cts

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

package/dist/components/TabBar/index.cjs

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

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

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

package/dist/components/Table/index.cjs

@@ -1,21 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_Table = require("../../Table-C9rjUVpn.cjs");
-exports.StickyTD = require_Table.StickyTD;
-exports.StickyTH = require_Table.StickyTH;
-exports.Table = require_Table.Table;
-exports.TableActionTD = require_Table.TableActionTD;
-exports.TableBody = require_Table.TableBody;
-exports.TableCell = require_Table.TableCell;
-exports.TableCellTitle = require_Table.TableCellTitle;
-exports.TableHead = require_Table.TableHead;
-exports.TableHeaderCell = require_Table.TableHeaderCell;
-exports.TableIconTD = require_Table.TableIconTD;
-exports.TableLayout = require_Table.TableLayout;
-exports.TableRow = require_Table.TableRow;
-exports.TableTD = require_Table.TableTD;
-exports.TableTH = require_Table.TableTH;
-exports.TableTR = require_Table.TableTR;
-exports.default = require_Table.Table;