@persona/design-system 0.5.0 → 0.6.0

package/dist/{Tooltip-DSKGD33G.mjs → Tooltip-BsuYG0fw.mjs}

@@ -1,8 +1,9 @@
-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, semanticOnly } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as Card_default } from "./Card-CKrJtn1f.mjs";
+import { t as Card_default } from "./Card-vQIPtdXi.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
+import "./variables/transitions.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Children, cloneElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -23,14 +24,15 @@ const FloatingTooltip = styled(Card_default)`
   z-index: ${({ zIndex }) => zIndex};
   margin: 0;
   max-width: ${({ maxWidth }) => maxWidth || "250px"};
-  color: ${Color.TextPrimary};
+  ${semanticOnly((tokens) => `background-color: ${tokens.SurfaceElevated};`)}
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.TextPrimary)};
 `;
 const TooltipArrow = styled.div`
   width: 0;
   height: 0;
-  border-color: ${({ theme }) => theme.color.background.primary};
+  border-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
   border-left: 8px solid transparent;
-  border-top: 8px solid ${({ theme }) => theme.color.background.primary};
+  border-top: 8px solid ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
   border-right: 8px solid transparent;
 `;
 const TooltipIcon = styled.div`
@@ -90,9 +92,10 @@ const Tooltip = ({ trigger: triggerProp, iconTrigger, side = "bottom", hideArrow
 * Helper component for rendering help text via help icons.
 */
 const HelperTooltip = ({ children, size = "md", ...props }) => {
+	const iconColor = semanticColor(useTheme(), "FgSecondary", Color.BorderIconSecondary);
 	return /* @__PURE__ */ jsx(Tooltip, {
 		size,
-		iconTrigger: size === "md" ? /* @__PURE__ */ jsx(CircleHelpIcon, { color: Color.BorderIconSecondary }) : /* @__PURE__ */ jsx(CircleHelpIcon$1, { color: Color.BorderIconSecondary }),
+		iconTrigger: size === "md" ? /* @__PURE__ */ jsx(CircleHelpIcon, { color: iconColor }) : /* @__PURE__ */ jsx(CircleHelpIcon$1, { color: iconColor }),
 		...props,
 		children
 	});
@@ -102,7 +105,7 @@ const HelperTooltip = ({ children, size = "md", ...props }) => {
 const TextWithDashedUnderline = styled.span`
   text-decoration: underline;
   text-decoration-style: dashed;
-  text-decoration-color: ${Color.CoreSlate700};
+  text-decoration-color: ${({ theme }) => semanticColor(theme, "FgTertiary", Color.CoreSlate700)};
   text-underline-offset: 2px;
   text-decoration-thickness: 1px;
   width: fit-content;
@@ -117,4 +120,4 @@ const TextUnderlineTooltip = ({ children, tooltip, ...props }) => {
 //#endregion
 export { Tooltip as a, FloatingTooltip as i, TextWithDashedUnderline as n, HelperTooltip as r, TextUnderlineTooltip as t };
 
-//# sourceMappingURL=Tooltip-DSKGD33G.mjs.map
+//# sourceMappingURL=Tooltip-BsuYG0fw.mjs.map

package/dist/Tooltip-BsuYG0fw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip-BsuYG0fw.mjs","names":["Card","CircleHelpIconSmall"],"sources":["../components/Tooltip/Tooltip.tsx","../components/Tooltip/HelperTooltip.tsx","../components/Tooltip/TextUnderlineTooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport styled, { type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Card, { type CardProps } from 'design-system/components/Card';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface FloatingTooltipProps extends CardProps {\n  zIndex?: number;\n  contentAlignment: 'start' | 'center' | 'end';\n  maxWidth?: string;\n  size?: 'sm' | 'md';\n}\n\nexport const FloatingTooltip: StyledComponent<\n  ComponentType<ComponentPropsWithoutRef<typeof Card>>,\n  DefaultTheme,\n  FloatingTooltipProps\n> = styled(Card)<FloatingTooltipProps>`\n  ${({ size = 'md' }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  line-height: ${({ size = 'md' }) => (size === 'sm' ? '16px' : '20px')};\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  display: flex;\n  align-items: ${({ contentAlignment }) => contentAlignment || 'center'};\n  justify-content: center;\n  padding: 6px ${Spacing[2]};\n  animation: ${fadeIn} ${TransitionDuration.Fast} ease-in-out;\n  z-index: ${({ zIndex }) => zIndex};\n  margin: 0;\n  max-width: ${({ maxWidth }) => maxWidth || '250px'};\n  ${semanticOnly((tokens) => `background-color: ${tokens.SurfaceElevated};`)}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst TooltipArrow = styled.div`\n  width: 0;\n  height: 0;\n  border-color: ${({ theme }) => semanticColor(theme, 'SurfaceElevated', theme.color.background.primary)};\n  border-left: 8px solid transparent;\n  border-top: 8px solid ${({ theme }) => semanticColor(theme, 'SurfaceElevated', theme.color.background.primary)};\n  border-right: 8px solid transparent;\n`;\n\nconst TooltipIcon = styled.div`\n  display: inline-flex;\n`;\n\ninterface TooltipBaseProps\n  extends\n    Omit<TooltipPrimitive.TooltipProps, 'disableHoverableContent'>,\n    TooltipPrimitive.TooltipContentProps {\n  /**\n   * Optionally hide tooltip arrow.\n   */\n  hideArrow?: boolean;\n\n  children?: ReactNode;\n\n  /**\n   * Disabling will prevent tooltip from rendering on the trigger\n   */\n  disabled?: boolean;\n\n  /**\n   * Render in a portal.\n   * Disable to render adjacent to trigger for rendering within elements such as modals\n   */\n  portal?: boolean;\n\n  /**\n   * Props applied to Radix UI Portal component\n   */\n  portalProps?: TooltipPrimitive.TooltipPortalProps;\n\n  /**\n   * Determines if the tooltip closes when the mouse hovers into the tooltip content area\n   */\n  interactive?: boolean;\n\n  /**\n   * Override the zIndex in case the tooltip is used in situations where the content is\n   * already elevated\n   */\n  zIndex?: number;\n\n  /**\n   * Max width of the contents in the tooltip\n   */\n  maxWidth?: string;\n\n  /**\n   * Props to apply to Tooltip.Trigger within\n   */\n  triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n\n  /**\n   * Size of the tooltip. Defaults to 'md'.\n   */\n  size?: 'sm' | 'md';\n}\n\nexport interface TooltipStandardProps extends TooltipBaseProps {\n  /**\n   * Element that will trigger the tooltip. A `ref` will be set.\n   */\n  trigger: ReactElement;\n\n  iconTrigger?: never;\n\n  className?: never;\n\n  contentAlignment?: 'start' | 'center' | 'end';\n}\n\nexport interface TooltipWithIconProps extends TooltipBaseProps {\n  trigger?: never;\n\n  /**\n   * Icon that will trigger the tooltip. A wrapper div will be set.\n   */\n  iconTrigger: ReactElement;\n\n  className?: string;\n\n  contentAlignment?: 'start' | 'center' | 'end';\n}\n\ntype TooltipProps = TooltipStandardProps | TooltipWithIconProps;\n\nexport const Tooltip = ({\n  trigger: triggerProp,\n  iconTrigger,\n  side = 'bottom',\n  hideArrow,\n  defaultOpen,\n  open,\n  delayDuration = 300,\n  onOpenChange,\n  interactive = true,\n  children,\n  'aria-label': ariaLabel,\n  portal = true,\n  disabled = false,\n  className,\n  maxWidth,\n  zIndex = 10,\n  triggerProps,\n  portalProps,\n  contentAlignment,\n  size = 'md',\n  ...contentProps\n}: TooltipProps) => {\n  let trigger;\n\n  if (iconTrigger) {\n    trigger = (\n      <TooltipIcon tabIndex={0} aria-label={ariaLabel} className={className}>\n        {cloneElement(iconTrigger, { focusable: false, 'aria-hidden': true })}\n      </TooltipIcon>\n    );\n  } else {\n    trigger = triggerProp;\n  }\n\n  // quick way to check if children are renderable. null, false, and true will be filtered out when converting to an array\n  const hasRenderableChildren = Children.toArray(children).length > 0;\n\n  const content = (\n    <TooltipPrimitive.Content side={side} sideOffset={8} asChild {...contentProps}>\n      <FloatingTooltip\n        zIndex={zIndex}\n        contentAlignment={contentAlignment}\n        maxWidth={maxWidth}\n        size={size}\n      >\n        {children}\n        {!hideArrow && (\n          <TooltipPrimitive.Arrow asChild>\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n        )}\n      </FloatingTooltip>\n    </TooltipPrimitive.Content>\n  );\n\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        disableHoverableContent={!interactive}\n        onOpenChange={onOpenChange}\n      >\n        <TooltipPrimitive.Trigger asChild aria-label={ariaLabel} {...triggerProps}>\n          {trigger}\n        </TooltipPrimitive.Trigger>\n\n        {!disabled &&\n          hasRenderableChildren &&\n          (portal ? (\n            <TooltipPrimitive.Portal {...portalProps}>{content}</TooltipPrimitive.Portal>\n          ) : (\n            content\n          ))}\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n};\n\nexport default Tooltip;\n","import type { ReactNode } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { CircleHelpIcon } from '@persona/icons';\nimport { CircleHelpIcon as CircleHelpIconSmall } from '@persona/icons/12px';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nimport Tooltip, { type TooltipWithIconProps } from './Tooltip';\n\nexport interface HelperTooltipProps extends Omit<TooltipWithIconProps, 'iconTrigger'> {\n  children: ReactNode;\n  size?: 'md' | 'sm';\n}\n\n/**\n * Helper component for rendering help text via help icons.\n */\nconst HelperTooltip = ({ children, size = 'md', ...props }: HelperTooltipProps) => {\n  const theme = useTheme();\n  const iconColor = semanticColor(theme, 'FgSecondary', Color.BorderIconSecondary);\n  return (\n    <Tooltip\n      size={size}\n      iconTrigger={\n        size === 'md' ? (\n          <CircleHelpIcon color={iconColor} />\n        ) : (\n          <CircleHelpIconSmall color={iconColor} />\n        )\n      }\n      {...props}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\nexport default HelperTooltip;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nimport Tooltip, { type TooltipStandardProps } from './Tooltip';\n\nexport const TextWithDashedUnderline = styled.span`\n  text-decoration: underline;\n  text-decoration-style: dashed;\n  text-decoration-color: ${({ theme }) => semanticColor(theme, 'FgTertiary', Color.CoreSlate700)};\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n  width: fit-content;\n`;\n\ninterface TextUnderlineTooltipProps extends Omit<TooltipStandardProps, 'trigger' | 'iconTrigger'> {\n  tooltip: ReactNode;\n}\n\nconst TextUnderlineTooltip = ({ children, tooltip, ...props }: TextUnderlineTooltipProps) => {\n  return (\n    <Tooltip trigger={<TextWithDashedUnderline>{children}</TextWithDashedUnderline>} {...props}>\n      {tooltip}\n    </Tooltip>\n  );\n};\n\nexport default TextUnderlineTooltip;\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAa,kBAIT,OAAOA,aAAK;KACX,EAAE,OAAO,WAAY,SAAS,OAAO,gBAAgB,KAAK,gBAAgB,GAAI;kBACjE,EAAE,OAAO,WAAY,SAAS,OAAO,SAAS,OAAQ;;;;kBAItD,EAAE,uBAAuB,oBAAoB,SAAS;;iBAEvD,QAAQ,GAAG;eACb,OAAO,GAAA,QAA2B;cACnC,EAAE,aAAa,OAAO;;gBAEpB,EAAE,eAAe,YAAY,QAAQ;IACjD,cAAc,WAAW,qBAAqB,OAAO,gBAAgB,GAAG,CAAC;YACjE,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,YAAY,CAAC;;AAG/E,MAAM,eAAe,OAAO,GAAG;;;mBAGZ,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,MAAM,WAAW,QAAQ,CAAC;;2BAE9E,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,MAAM,WAAW,QAAQ,CAAC;;;AAIjH,MAAM,cAAc,OAAO,GAAG;;;AAsF9B,MAAa,WAAW,EACtB,SAAS,aACT,aACA,OAAO,UACP,WACA,aACA,MACA,gBAAgB,KAChB,cACA,cAAc,MACd,UACA,cAAc,WACd,SAAS,MACT,WAAW,OACX,WACA,UACA,SAAS,IACT,cACA,aACA,kBACA,OAAO,MACP,GAAG,mBACe;CAClB,IAAI;AAEJ,KAAI,YACF,WACE,oBAAC,aAAD;EAAa,UAAU;EAAG,cAAY;EAAsB;YACzD,aAAa,aAAa;GAAE,WAAW;GAAO,eAAe;GAAM,CAAC;EACzD,CAAA;KAGhB,WAAU;CAIZ,MAAM,wBAAwB,SAAS,QAAQ,SAAS,CAAC,SAAS;CAElE,MAAM,UACJ,oBAAC,iBAAiB,SAAlB;EAAgC;EAAM,YAAY;EAAG,SAAA;EAAQ,GAAI;YAC/D,qBAAC,iBAAD;GACU;GACU;GACR;GACJ;aAJR,CAMG,UACA,CAAC,aACA,oBAAC,iBAAiB,OAAlB;IAAwB,SAAA;cACtB,oBAAC,cAAD,EAAgB,CAAA;IACO,CAAA,CAEX;;EACO,CAAA;AAG7B,QACE,oBAAC,iBAAiB,UAAlB;EAA0C;YACxC,qBAAC,iBAAiB,MAAlB;GACQ;GACO;GACb,yBAAyB,CAAC;GACZ;aAJhB,CAME,oBAAC,iBAAiB,SAAlB;IAA0B,SAAA;IAAQ,cAAY;IAAW,GAAI;cAC1D;IACwB,CAAA,EAE1B,CAAC,YACA,0BACC,SACC,oBAAC,iBAAiB,QAAlB;IAAyB,GAAI;cAAc;IAAkC,CAAA,GAE7E,SAEkB;;EACE,CAAA;;;;;;;ACvMhC,MAAM,iBAAiB,EAAE,UAAU,OAAO,MAAM,GAAG,YAAgC;CAEjF,MAAM,YAAY,cADJ,UACuB,EAAE,eAAe,MAAM,oBAAoB;AAChF,QACE,oBAAC,SAAD;EACQ;EACN,aACE,SAAS,OACP,oBAAC,gBAAD,EAAgB,OAAO,WAAa,CAAA,GAEpC,oBAACC,kBAAD,EAAqB,OAAO,WAAa,CAAA;EAG7C,GAAI;EAEH;EACO,CAAA;;;;AC1Bd,MAAa,0BAA0B,OAAO,IAAI;;;4BAGtB,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,aAAa,CAAC;;;;;AAUjG,MAAM,wBAAwB,EAAE,UAAU,SAAS,GAAG,YAAuC;AAC3F,QACE,oBAAC,SAAD;EAAS,SAAS,oBAAC,yBAAD,EAA0B,UAAmC,CAAA;EAAE,GAAI;YAClF;EACO,CAAA"}

package/dist/{Tooltip-n3XkX4dp.d.mts → Tooltip-eSaiYjxT.d.mts}

@@ -1,6 +1,6 @@
-import { r as _default, t as CardProps } from "./Card-BoGV5tY2.mjs";
-import { DefaultTheme, StyledComponent } from "styled-components";
+import { r as _default, t as CardProps } from "./Card-Dorym91P.mjs";
 import { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode } from "react";
+import { DefaultTheme, StyledComponent } from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
@@ -97,4 +97,4 @@ declare const Tooltip: ({
 }: TooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TooltipWithIconProps as i, Tooltip as n, TooltipStandardProps as r, FloatingTooltip as t };
-//# sourceMappingURL=Tooltip-n3XkX4dp.d.mts.map
+//# sourceMappingURL=Tooltip-eSaiYjxT.d.mts.map

package/dist/Tooltip.d.mts

@@ -1,2 +1,2 @@
-import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "./Tooltip-n3XkX4dp.mjs";
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "./Tooltip-eSaiYjxT.mjs";
 export { FloatingTooltip, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

package/dist/{TruncatedText-C-MJPIRi.d.mts → TruncatedText-B2v53Y11.d.mts}

@@ -1,5 +1,5 @@
-import * as _$styled_components0 from "styled-components";
 import { ComponentPropsWithoutRef, FC } from "react";
+import * as _$styled_components0 from "styled-components";
 
 //#region lib/TruncatedText.d.ts
 declare const OverflowEllipsisSpan: _$styled_components0.StyledComponent<"span", any, {}, never>;
@@ -15,4 +15,4 @@ interface TruncatedTextProps extends ComponentPropsWithoutRef<'span'> {
 declare const TruncatedText: FC<TruncatedTextProps>;
 //#endregion
 export { TruncatedText as n, TruncatedTextProps as r, OverflowEllipsisSpan as t };
-//# sourceMappingURL=TruncatedText-C-MJPIRi.d.mts.map
+//# sourceMappingURL=TruncatedText-B2v53Y11.d.mts.map

package/dist/{codec-B0dZTwlG.d.mts → codec-D5qlDVgU.d.mts}

@@ -1,4 +1,4 @@
-import { a as DateFilterPreset, c as RelativeDateFilterValue, n as AbsoluteDateRange, o as DateFilterValue } from "./types-Bsf1VsW6.mjs";
+import { a as DateFilterPreset, c as RelativeDateFilterValue, n as AbsoluteDateRange, o as DateFilterValue } from "./types-COeginAF.mjs";
 import { DateTime } from "luxon";
 
 //#region lib/date-filter/codec.d.ts
@@ -26,4 +26,4 @@ declare function isRelative(value: DateFilterValue): value is RelativeDateFilter
 declare function formatDateFilterValue(value: DateFilterValue): string | null;
 //#endregion
 export { selectedPresetFor as a, resolveDateFilterValue as i, isRelative as n, parseDateFilterValue as r, formatDateFilterValue as t };
-//# sourceMappingURL=codec-B0dZTwlG.d.mts.map
+//# sourceMappingURL=codec-D5qlDVgU.d.mts.map

package/dist/codec.d.mts

@@ -1,2 +1,2 @@
-import { a as selectedPresetFor, i as resolveDateFilterValue, n as isRelative, r as parseDateFilterValue, t as formatDateFilterValue } from "./codec-B0dZTwlG.mjs";
+import { a as selectedPresetFor, i as resolveDateFilterValue, n as isRelative, r as parseDateFilterValue, t as formatDateFilterValue } from "./codec-D5qlDVgU.mjs";
 export { formatDateFilterValue, isRelative, parseDateFilterValue, resolveDateFilterValue, selectedPresetFor };

package/dist/color-fQTsW4gq.d.mts

@@ -0,0 +1,20 @@
+import { t as CssPercentage } from "./semantic-Dy7mTyBP.mjs";
+import { Color } from "@persona/design-tokens";
+
+//#region lib/color.d.ts
+/**
+ * A computed theme colour (not a token primitive). Property-branded rather than `unique symbol`
+ * so the brand survives declaration emit.
+ */
+type CssColor = string & {
+  readonly __pdsCssColor: true;
+};
+type PdsColor = Color | CssColor;
+declare const transparent: CssColor;
+/** Percentage token as a unitless `opacity`; percentage `opacity` is below the browserslist floor. */
+declare const opacityOf: (amount: CssPercentage) => string;
+/** `rgba()` rather than `color-mix()`: browserslist still includes IE 11 and iOS Safari < 16.2. */
+declare const withAlpha: (color: Color, amount: CssPercentage) => CssColor;
+//#endregion
+export { withAlpha as a, transparent as i, PdsColor as n, opacityOf as r, CssColor as t };
+//# sourceMappingURL=color-fQTsW4gq.d.mts.map

package/dist/components/Attribute/index.mjs

@@ -1,8 +1,10 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import { i as Paragraph } from "../../Text-B0orb-cZ.mjs";
-import { r as HelperTooltip } from "../../Tooltip-DSKGD33G.mjs";
-import { t as IconButton } from "../../IconButton-BnSEV7eR.mjs";
-import { n as Sticker } from "../../Sticker-By3F8Aip.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
+import { i as Paragraph } from "../../Text-Dn_p7ZvT.mjs";
+import { r as HelperTooltip } from "../../Tooltip-BsuYG0fw.mjs";
+import { isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import { t as IconButton } from "../../IconButton-CnJNIJVQ.mjs";
+import { n as Sticker } from "../../Sticker-BDyejPZa.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -23,13 +25,35 @@ const IconButtonContainer = styled(IconButton)`
 
   :hover {
     svg {
-      color: ${Color.CorePurple800};
+      color: ${({ theme }) => semanticColor(theme, "FgAccent", Color.CorePurple800)};
     }
   }
+
+  ${semanticOnly((tokens) => css`
+      background-color: ${tokens.ActionNeutral};
+      color: ${tokens.FgPrimary};
+
+      svg {
+        color: ${tokens.FgPrimary};
+      }
+
+      svg.pds-icon path[stroke] {
+        stroke: currentColor;
+      }
+
+      &${isHovered}${isNotDisabled} {
+        background-color: ${tokens.ActionNeutralHover};
+        color: ${tokens.FgAccent};
+
+        svg path {
+          stroke: currentColor;
+        }
+      }
+    `)}
 `;
 const Value = styled.dd`
   ${({ size }) => size === "sm" ? Typography.TextSmall : Typography.TextMedium};
-  color: ${({ isPlaceholder }) => isPlaceholder ? Color.TextSecondary : Color.CoreSlate1000};
+  color: ${({ isPlaceholder, theme }) => isPlaceholder ? semanticColor(theme, "FgSecondary", Color.TextSecondary) : semanticColor(theme, "FgPrimary", Color.CoreSlate1000)};
   margin: 0;
   text-overflow: ellipsis;
   overflow-x: hidden;
@@ -41,11 +65,11 @@ const Value = styled.dd`
   }
 
   a {
-    color: ${({ theme }) => theme.color.text.brand};
+    color: ${({ theme }) => semanticColor(theme, "FgAccent", theme.color.text.brand)};
     text-decoration: none;
 
     &:visited {
-      color: ${({ theme }) => theme.color.text.brand};
+      color: ${({ theme }) => semanticColor(theme, "FgAccent", theme.color.text.brand)};
     }
   }
 `;
@@ -96,6 +120,7 @@ const AttributeLabel = styled(Paragraph).attrs((props) => ({
 }))`
   margin: 0;
   overflow-wrap: break-word;
+  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}
 `;
 const RightContainer = styled.span`
   display: inline-block;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { repeat, uniqueId } from 'lodash-es';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useToggleButton } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport Sticker from 'design-system/components/Sticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport { HelperTooltip } from 'design-system/components/Tooltip';\nimport type { ParagraphSize } from 'design-system/mixins/text';\n\nexport type WordBreak = 'break-all' | 'break-word' | 'normal';\nexport type TextTransform = 'capitalize' | 'sentence';\nexport type TableLayoutValue = boolean | 'full-width';\n\nexport type AttributeSize = 'sm' | 'md';\n\nexport const AttributeContext = createContext<{\n  table?: TableLayoutValue;\n  horizontal?: boolean;\n  size?: AttributeSize;\n}>({});\n\n// TODO: Create Toggle Button component\nexport const IconButtonContainer = styled(IconButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    transition-duration: 150ms;\n  }\n\n  :hover {\n    svg {\n      color: ${Color.CorePurple800};\n    }\n  }\n`;\n\ninterface AttributeValueProps {\n  placeholder: ReactNode;\n  show?: boolean;\n  redacted?: boolean;\n  value?: ReactNode;\n  textTransform?: TextTransform;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n  'aria-labelledby': string;\n  id: string;\n}\n\ninterface ValueFormatterProps {\n  isPlaceholder?: boolean;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n}\n\nconst Value = styled.dd<ValueFormatterProps>`\n  ${({ size }) => (size === 'sm' ? Typography.TextSmall : Typography.TextMedium)};\n  color: ${({ isPlaceholder }) => (isPlaceholder ? Color.TextSecondary : Color.CoreSlate1000)};\n  margin: 0;\n  text-overflow: ellipsis;\n  overflow-x: hidden;\n  word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'normal')};\n\n  ul,\n  ol {\n    list-style-position: inside;\n  }\n\n  a {\n    color: ${({ theme }) => theme.color.text.brand};\n    text-decoration: none;\n\n    &:visited {\n      color: ${({ theme }) => theme.color.text.brand};\n    }\n  }\n`;\n\nexport const AttributeValue = ({\n  placeholder,\n  show,\n  redacted,\n  value,\n  wordBreak,\n  size,\n  id,\n  'aria-labelledby': ariaLabelledBy,\n}: AttributeValueProps) => {\n  const isEmpty = value == null || value === '';\n\n  const renderedVal = isEmpty ? (\n    placeholder\n  ) : (\n    <>{!show ? repeat('•', typeof value === 'string' ? value.length : 8) : value}</>\n  );\n\n  return (\n    <Value\n      isPlaceholder={isEmpty}\n      wordBreak={wordBreak}\n      size={size}\n      title={typeof value === 'string' ? value : undefined}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n    >\n      {redacted ? <Sticker id={id}>Redacted</Sticker> : renderedVal}\n    </Value>\n  );\n};\n\nexport interface AttributeProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Title of the attribute. Rendered as a <dt>.\n   */\n  label: ReactNode;\n\n  /**\n   * Value to display. Rendered as a <dd>.\n   */\n  value?: ReactNode;\n\n  /**\n   * Will display a \"Redacted\" sticker if there is a value.\n   */\n  redacted?: boolean;\n\n  /**\n   * Renders toggleable eye button to the right of the label\n   */\n  toggleable?: boolean;\n\n  /**\n   * Text to display in presence of null value.\n   */\n  placeholder?: string;\n\n  /**\n   * Word break styling for value.\n   */\n  wordBreak?: WordBreak;\n\n  /**\n   * Render a custom label component\n   */\n  labelComponent?: FC<PropsWithChildren<{ id: string; size?: ParagraphSize }>>;\n\n  /**\n   * Render a custom value component\n   */\n  valueComponent?: ComponentType<AttributeValueProps>;\n\n  /**\n   * Renders a HelperTooltip to display help text to the right of the label.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * Custom adornments to display to the right of the label.\n   */\n  right?: ReactNode;\n\n  /**\n   * Renders attributes in a tabular layout.\n   */\n  table?: TableLayoutValue;\n}\n\ntype AttributeContainerProps = {\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeContainer = styled('div')<AttributeContainerProps>`\n  ${({ table, size }) =>\n    table &&\n    css`\n      display: table-row;\n\n      > * {\n        display: table-cell;\n      }\n\n      & > ${AttributeLabel} {\n        padding: ${Spacing[1]} 0;\n        padding-right: ${size === 'sm' ? Spacing[2] : Spacing[3]};\n      }\n      & > ${Value} {\n        padding: ${size === 'sm' ? Spacing[1] : Spacing[2]} 0;\n      }\n    `}\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: grid;\n      gap: ${Spacing[4]};\n      grid-template-columns: subgrid;\n      grid-column: span 2;\n    `}\n`;\n\nexport const AttributeLabel = styled(Paragraph).attrs<{ size?: ParagraphSize }>((props) => ({\n  size: props.size ?? 'md',\n  color: 'tertiary',\n  as: 'dt',\n}))`\n  margin: 0;\n  overflow-wrap: break-word;\n`;\n\nconst RightContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: ${Spacing[2]};\n`;\n\nexport const Attribute = ({\n  label,\n  value,\n  redacted,\n  placeholder = '-',\n  wordBreak,\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  labelComponent: LabelComponent = AttributeLabel,\n  valueComponent: ValueComponent = AttributeValue,\n  right,\n  helpText,\n  toggleable,\n  table,\n  ...elemProps\n}: AttributeProps) => {\n  const attrCtx = useContext(AttributeContext);\n  const size = attrCtx?.size ?? 'md';\n  const toggleRef = useRef();\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  const valueAsArray = [].concat(value).filter(Boolean);\n  const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;\n  const state = useToggleState({ defaultSelected: !toggleable });\n  const { buttonProps } = useToggleButton(\n    {\n      'aria-label': state.isSelected ? `Hide ${label} value` : `Show ${label} value`,\n      elementType: 'button',\n    },\n    state,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    toggleRef,\n  );\n  const labelId = useMemo(() => uniqueId('pds_attribute_label__'), []);\n  const valueId = useMemo(() => uniqueId('pds_attribute_value__'), []);\n  const show = state.isSelected;\n\n  useEffect(() => {\n    state.setSelected(!toggleable);\n  }, [toggleable]);\n\n  return (\n    <AttributeContainer\n      table={table || attrCtx?.table}\n      horizontal={attrCtx?.horizontal}\n      size={size}\n      {...elemProps}\n    >\n      <LabelComponent id={labelId} aria-details={valueId} size={size}>\n        {label}\n        {helpText && (\n          <RightContainer>\n            <HelperTooltip size='sm'>{helpText}</HelperTooltip>\n          </RightContainer>\n        )}\n        {showToggleButton && (\n          <RightContainer>\n            {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n            <IconButtonContainer {...buttonProps} ref={toggleRef}>\n              {show ? <EyeIcon /> : <EyeOffIcon />}\n            </IconButtonContainer>\n          </RightContainer>\n        )}\n        {right && <RightContainer>{right}</RightContainer>}\n      </LabelComponent>\n      <ValueComponent\n        id={valueId}\n        value={value}\n        placeholder={placeholder}\n        wordBreak={wordBreak}\n        redacted={redacted}\n        show={show}\n        size={size}\n        aria-labelledby={labelId}\n      />\n    </AttributeContainer>\n  );\n};\n\nexport default Attribute;\n","import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { AttributeContext, type AttributeSize, type TableLayoutValue } from './Attribute';\n\ntype AttributeGridProps = {\n  children?: ReactNode;\n  /**\n   * Sets the font size and spacing density for all child Attributes.\n   * Defaults to `'md'`.\n   */\n  size?: AttributeSize;\n} & (\n  | {\n      /**\n       * Set a fixed number of columns for the grid.\n       */\n      colCount?: number;\n      /**\n       * Display attributes in a stacked list with label first then value.\n       */\n      horizontal?: boolean;\n\n      table?: never;\n    }\n  | {\n      /**\n       * Display attributes in a fixed tabular layout.\n       * Set to `full-width` to expand to full width of container.\n       */\n      table?: TableLayoutValue;\n\n      colCount?: never;\n      horizontal?: never;\n    }\n);\n\ntype AttributeGridComponentProps = {\n  colCount?: number;\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeGridComponent = styled.dl<AttributeGridComponentProps>`\n  ${({ colCount, table, horizontal, size }) =>\n    table\n      ? css`\n          display: table;\n          ${\n            table === 'full-width' &&\n            css`\n            width: 100%;\n            table-layout: fixed;\n            border-spacing: 0 ${size === 'sm' ? Spacing[1] : Spacing[2]};\n          `\n          };\n        `\n      : css`\n          display: grid;\n          gap: ${size === 'sm' ? Spacing[2] : Spacing[4]};\n          /* If the layout is horizontal we guarentee an even number of columns */\n          grid-template-columns: ${\n            colCount\n              ? `repeat(${colCount}, ${horizontal ? '1fr 2fr' : '1fr'})`\n              : `repeat(auto-fit, ${horizontal ? 'minmax(120px, 1fr) minmax(225px, 2fr)' : 'minmax(225px, 1fr)'})`\n          };\n        `}\n  margin: 0;\n\n  & + & {\n    padding-bottom: ${Spacing[5]};\n  }\n`;\n\nconst AttributeGrid = ({ children, horizontal, table, size, ...props }: AttributeGridProps) => {\n  return (\n    <AttributeGridComponent table={table} horizontal={horizontal} size={size} {...props}>\n      <AttributeContext.Provider value={{ horizontal, table, size }}>\n        {children}\n      </AttributeContext.Provider>\n    </AttributeGridComponent>\n  );\n};\n\nexport default AttributeGrid;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { repeat, uniqueId } from 'lodash-es';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useToggleButton } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport Sticker from 'design-system/components/Sticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport { HelperTooltip } from 'design-system/components/Tooltip';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport type { ParagraphSize } from 'design-system/mixins/text';\n\nexport type WordBreak = 'break-all' | 'break-word' | 'normal';\nexport type TextTransform = 'capitalize' | 'sentence';\nexport type TableLayoutValue = boolean | 'full-width';\n\nexport type AttributeSize = 'sm' | 'md';\n\nexport const AttributeContext = createContext<{\n  table?: TableLayoutValue;\n  horizontal?: boolean;\n  size?: AttributeSize;\n}>({});\n\n// TODO: Create Toggle Button component\nexport const IconButtonContainer = styled(IconButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    transition-duration: 150ms;\n  }\n\n  :hover {\n    svg {\n      color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple800)};\n    }\n  }\n\n  ${semanticOnly(\n    (tokens) => css`\n      background-color: ${tokens.ActionNeutral};\n      color: ${tokens.FgPrimary};\n\n      svg {\n        color: ${tokens.FgPrimary};\n      }\n\n      svg.pds-icon path[stroke] {\n        stroke: currentColor;\n      }\n\n      &${isHovered}${isNotDisabled} {\n        background-color: ${tokens.ActionNeutralHover};\n        color: ${tokens.FgAccent};\n\n        svg path {\n          stroke: currentColor;\n        }\n      }\n    `,\n  )}\n`;\n\ninterface AttributeValueProps {\n  placeholder: ReactNode;\n  show?: boolean;\n  redacted?: boolean;\n  value?: ReactNode;\n  textTransform?: TextTransform;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n  'aria-labelledby': string;\n  id: string;\n}\n\ninterface ValueFormatterProps {\n  isPlaceholder?: boolean;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n}\n\nconst Value = styled.dd<ValueFormatterProps>`\n  ${({ size }) => (size === 'sm' ? Typography.TextSmall : Typography.TextMedium)};\n  color: ${({ isPlaceholder, theme }) =>\n    isPlaceholder\n      ? semanticColor(theme, 'FgSecondary', Color.TextSecondary)\n      : semanticColor(theme, 'FgPrimary', Color.CoreSlate1000)};\n  margin: 0;\n  text-overflow: ellipsis;\n  overflow-x: hidden;\n  word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'normal')};\n\n  ul,\n  ol {\n    list-style-position: inside;\n  }\n\n  a {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n    text-decoration: none;\n\n    &:visited {\n      color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n    }\n  }\n`;\n\nexport const AttributeValue = ({\n  placeholder,\n  show,\n  redacted,\n  value,\n  wordBreak,\n  size,\n  id,\n  'aria-labelledby': ariaLabelledBy,\n}: AttributeValueProps) => {\n  const isEmpty = value == null || value === '';\n\n  const renderedVal = isEmpty ? (\n    placeholder\n  ) : (\n    <>{!show ? repeat('•', typeof value === 'string' ? value.length : 8) : value}</>\n  );\n\n  return (\n    <Value\n      isPlaceholder={isEmpty}\n      wordBreak={wordBreak}\n      size={size}\n      title={typeof value === 'string' ? value : undefined}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n    >\n      {redacted ? <Sticker id={id}>Redacted</Sticker> : renderedVal}\n    </Value>\n  );\n};\n\nexport interface AttributeProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Title of the attribute. Rendered as a <dt>.\n   */\n  label: ReactNode;\n\n  /**\n   * Value to display. Rendered as a <dd>.\n   */\n  value?: ReactNode;\n\n  /**\n   * Will display a \"Redacted\" sticker if there is a value.\n   */\n  redacted?: boolean;\n\n  /**\n   * Renders toggleable eye button to the right of the label\n   */\n  toggleable?: boolean;\n\n  /**\n   * Text to display in presence of null value.\n   */\n  placeholder?: string;\n\n  /**\n   * Word break styling for value.\n   */\n  wordBreak?: WordBreak;\n\n  /**\n   * Render a custom label component\n   */\n  labelComponent?: FC<PropsWithChildren<{ id: string; size?: ParagraphSize }>>;\n\n  /**\n   * Render a custom value component\n   */\n  valueComponent?: ComponentType<AttributeValueProps>;\n\n  /**\n   * Renders a HelperTooltip to display help text to the right of the label.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * Custom adornments to display to the right of the label.\n   */\n  right?: ReactNode;\n\n  /**\n   * Renders attributes in a tabular layout.\n   */\n  table?: TableLayoutValue;\n}\n\ntype AttributeContainerProps = {\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeContainer = styled('div')<AttributeContainerProps>`\n  ${({ table, size }) =>\n    table &&\n    css`\n      display: table-row;\n\n      > * {\n        display: table-cell;\n      }\n\n      & > ${AttributeLabel} {\n        padding: ${Spacing[1]} 0;\n        padding-right: ${size === 'sm' ? Spacing[2] : Spacing[3]};\n      }\n      & > ${Value} {\n        padding: ${size === 'sm' ? Spacing[1] : Spacing[2]} 0;\n      }\n    `}\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: grid;\n      gap: ${Spacing[4]};\n      grid-template-columns: subgrid;\n      grid-column: span 2;\n    `}\n`;\n\nexport const AttributeLabel = styled(Paragraph).attrs<{ size?: ParagraphSize }>((props) => ({\n  size: props.size ?? 'md',\n  color: 'tertiary',\n  as: 'dt',\n}))`\n  margin: 0;\n  overflow-wrap: break-word;\n  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst RightContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: ${Spacing[2]};\n`;\n\nexport const Attribute = ({\n  label,\n  value,\n  redacted,\n  placeholder = '-',\n  wordBreak,\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  labelComponent: LabelComponent = AttributeLabel,\n  valueComponent: ValueComponent = AttributeValue,\n  right,\n  helpText,\n  toggleable,\n  table,\n  ...elemProps\n}: AttributeProps) => {\n  const attrCtx = useContext(AttributeContext);\n  const size = attrCtx?.size ?? 'md';\n  const toggleRef = useRef();\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  const valueAsArray = [].concat(value).filter(Boolean);\n  const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;\n  const state = useToggleState({ defaultSelected: !toggleable });\n  const { buttonProps } = useToggleButton(\n    {\n      'aria-label': state.isSelected ? `Hide ${label} value` : `Show ${label} value`,\n      elementType: 'button',\n    },\n    state,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    toggleRef,\n  );\n  const labelId = useMemo(() => uniqueId('pds_attribute_label__'), []);\n  const valueId = useMemo(() => uniqueId('pds_attribute_value__'), []);\n  const show = state.isSelected;\n\n  useEffect(() => {\n    state.setSelected(!toggleable);\n  }, [toggleable]);\n\n  return (\n    <AttributeContainer\n      table={table || attrCtx?.table}\n      horizontal={attrCtx?.horizontal}\n      size={size}\n      {...elemProps}\n    >\n      <LabelComponent id={labelId} aria-details={valueId} size={size}>\n        {label}\n        {helpText && (\n          <RightContainer>\n            <HelperTooltip size='sm'>{helpText}</HelperTooltip>\n          </RightContainer>\n        )}\n        {showToggleButton && (\n          <RightContainer>\n            {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n            <IconButtonContainer {...buttonProps} ref={toggleRef}>\n              {show ? <EyeIcon /> : <EyeOffIcon />}\n            </IconButtonContainer>\n          </RightContainer>\n        )}\n        {right && <RightContainer>{right}</RightContainer>}\n      </LabelComponent>\n      <ValueComponent\n        id={valueId}\n        value={value}\n        placeholder={placeholder}\n        wordBreak={wordBreak}\n        redacted={redacted}\n        show={show}\n        size={size}\n        aria-labelledby={labelId}\n      />\n    </AttributeContainer>\n  );\n};\n\nexport default Attribute;\n","import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { AttributeContext, type AttributeSize, type TableLayoutValue } from './Attribute';\n\ntype AttributeGridProps = {\n  children?: ReactNode;\n  /**\n   * Sets the font size and spacing density for all child Attributes.\n   * Defaults to `'md'`.\n   */\n  size?: AttributeSize;\n} & (\n  | {\n      /**\n       * Set a fixed number of columns for the grid.\n       */\n      colCount?: number;\n      /**\n       * Display attributes in a stacked list with label first then value.\n       */\n      horizontal?: boolean;\n\n      table?: never;\n    }\n  | {\n      /**\n       * Display attributes in a fixed tabular layout.\n       * Set to `full-width` to expand to full width of container.\n       */\n      table?: TableLayoutValue;\n\n      colCount?: never;\n      horizontal?: never;\n    }\n);\n\ntype AttributeGridComponentProps = {\n  colCount?: number;\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeGridComponent = styled.dl<AttributeGridComponentProps>`\n  ${({ colCount, table, horizontal, size }) =>\n    table\n      ? css`\n          display: table;\n          ${\n            table === 'full-width' &&\n            css`\n            width: 100%;\n            table-layout: fixed;\n            border-spacing: 0 ${size === 'sm' ? Spacing[1] : Spacing[2]};\n          `\n          };\n        `\n      : css`\n          display: grid;\n          gap: ${size === 'sm' ? Spacing[2] : Spacing[4]};\n          /* If the layout is horizontal we guarentee an even number of columns */\n          grid-template-columns: ${\n            colCount\n              ? `repeat(${colCount}, ${horizontal ? '1fr 2fr' : '1fr'})`\n              : `repeat(auto-fit, ${horizontal ? 'minmax(120px, 1fr) minmax(225px, 2fr)' : 'minmax(225px, 1fr)'})`\n          };\n        `}\n  margin: 0;\n\n  & + & {\n    padding-bottom: ${Spacing[5]};\n  }\n`;\n\nconst AttributeGrid = ({ children, horizontal, table, size, ...props }: AttributeGridProps) => {\n  return (\n    <AttributeGridComponent table={table} horizontal={horizontal} size={size} {...props}>\n      <AttributeContext.Provider value={{ horizontal, table, size }}>\n        {children}\n      </AttributeContext.Provider>\n    </AttributeGridComponent>\n  );\n};\n\nexport default AttributeGrid;\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAa,mBAAmB,cAI7B,EAAE,CAAC;AAGN,MAAa,sBAAsB,OAAO,WAAW;;;;;;;;;;;gBAWrC,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;;;;IAIhF,cACC,WAAW,GAAG;0BACO,OAAO,cAAc;eAChC,OAAO,UAAU;;;iBAGf,OAAO,UAAU;;;;;;;SAOzB,YAAY,cAAc;4BACP,OAAO,mBAAmB;iBACrC,OAAO,SAAS;;;;;;MAO9B,CAAC;;AAqBJ,MAAM,QAAQ,OAAO,EAAuB;KACvC,EAAE,WAAY,SAAS,OAAO,WAAW,YAAY,WAAW,WAAY;YACrE,EAAE,eAAe,YACzB,gBACI,cAAc,OAAO,eAAe,MAAM,cAAc,GACxD,cAAc,OAAO,aAAa,MAAM,cAAc,CAAC;;;;iBAI9C,EAAE,gBAAiB,YAAY,YAAY,SAAU;;;;;;;;cAQxD,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,MAAM,KAAK,MAAM,CAAC;;;;gBAIrE,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,MAAM,KAAK,MAAM,CAAC;;;;AAKvF,MAAa,kBAAkB,EAC7B,aACA,MACA,UACA,OACA,WACA,MACA,IACA,mBAAmB,qBACM;CACzB,MAAM,UAAU,SAAS,QAAQ,UAAU;CAE3C,MAAM,cAAc,UAClB,cAEA,oBAAA,YAAA,EAAA,UAAG,CAAC,OAAO,OAAO,KAAK,OAAO,UAAU,WAAW,MAAM,SAAS,EAAE,GAAG,OAAS,CAAA;AAGlF,QACE,oBAAC,OAAD;EACE,eAAe;EACJ;EACL;EACN,OAAO,OAAO,UAAU,WAAW,QAAQ,KAAA;EAC3C,mBAAiB;EACb;YAEH,WAAW,oBAAC,SAAD;GAAa;aAAI;GAAkB,CAAA,GAAG;EAC5C,CAAA;;AAkEZ,MAAM,qBAAqB,OAAO,MAAM;KACnC,EAAE,OAAO,WACV,SACA,GAAG;;;;;;;YAOK,eAAe;mBACR,QAAQ,GAAG;yBACL,SAAS,OAAO,QAAQ,KAAK,QAAQ,GAAG;;YAErD,MAAM;mBACC,SAAS,OAAO,QAAQ,KAAK,QAAQ,GAAG;;MAErD;;KAED,EAAE,iBACH,cACA,GAAG;;aAEM,QAAQ,GAAG;;;MAGlB;;AAGN,MAAa,iBAAiB,OAAO,UAAU,CAAC,OAAiC,WAAW;CAC1F,MAAM,MAAM,QAAQ;CACpB,OAAO;CACP,IAAI;CACL,EAAE;;;IAGC,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;AAG9D,MAAM,iBAAiB,OAAO,IAAI;;;iBAGjB,QAAQ,GAAG;;AAG5B,MAAa,aAAa,EACxB,OACA,OACA,UACA,cAAc,KACd,WAEA,gBAAgB,iBAAiB,gBACjC,gBAAgB,iBAAiB,gBACjC,OACA,UACA,YACA,OACA,GAAG,gBACiB;CACpB,MAAM,UAAU,WAAW,iBAAiB;CAC5C,MAAM,OAAO,SAAS,QAAQ;CAC9B,MAAM,YAAY,QAAQ;CAE1B,MAAM,eAAe,EAAE,CAAC,OAAO,MAAM,CAAC,OAAO,QAAQ;CACrD,MAAM,mBAAmB,cAAc,CAAC,YAAY,aAAa,SAAS;CAC1E,MAAM,QAAQ,eAAe,EAAE,iBAAiB,CAAC,YAAY,CAAC;CAC9D,MAAM,EAAE,gBAAgB,gBACtB;EACE,cAAc,MAAM,aAAa,QAAQ,MAAM,UAAU,QAAQ,MAAM;EACvE,aAAa;EACd,EACD,OAEA,UACD;CACD,MAAM,UAAU,cAAc,SAAS,wBAAwB,EAAE,EAAE,CAAC;CACpE,MAAM,UAAU,cAAc,SAAS,wBAAwB,EAAE,EAAE,CAAC;CACpE,MAAM,OAAO,MAAM;AAEnB,iBAAgB;AACd,QAAM,YAAY,CAAC,WAAW;IAC7B,CAAC,WAAW,CAAC;AAEhB,QACE,qBAAC,oBAAD;EACE,OAAO,SAAS,SAAS;EACzB,YAAY,SAAS;EACf;EACN,GAAI;YAJN,CAME,qBAAC,gBAAD;GAAgB,IAAI;GAAS,gBAAc;GAAe;aAA1D;IACG;IACA,YACC,oBAAC,gBAAD,EAAA,UACE,oBAAC,eAAD;KAAe,MAAK;eAAM;KAAyB,CAAA,EACpC,CAAA;IAElB,oBACC,oBAAC,gBAAD,EAAA,UAEE,oBAAC,qBAAD;KAAqB,GAAI;KAAa,KAAK;eACxC,OAAO,oBAAC,SAAD,EAAW,CAAA,GAAG,oBAAC,YAAD,EAAc,CAAA;KAChB,CAAA,EACP,CAAA;IAElB,SAAS,oBAAC,gBAAD,EAAA,UAAiB,OAAuB,CAAA;IACnC;MACjB,oBAAC,gBAAD;GACE,IAAI;GACG;GACM;GACF;GACD;GACJ;GACA;GACN,mBAAiB;GACjB,CAAA,CACiB;;;;;ACnSzB,MAAM,yBAAyB,OAAO,EAA+B;KAChE,EAAE,UAAU,OAAO,YAAY,WAChC,QACI,GAAG;;YAGC,UAAU,gBACV,GAAG;;;gCAGiB,SAAS,OAAO,QAAQ,KAAK,QAAQ,GAAG;YAE7D;YAEH,GAAG;;iBAEM,SAAS,OAAO,QAAQ,KAAK,QAAQ,GAAG;;mCAG7C,WACI,UAAU,SAAS,IAAI,aAAa,YAAY,MAAM,KACtD,oBAAoB,aAAa,0CAA0C,qBAAqB,GACrG;UACD;;;;sBAIY,QAAQ,GAAG;;;AAIjC,MAAM,iBAAiB,EAAE,UAAU,YAAY,OAAO,MAAM,GAAG,YAAgC;AAC7F,QACE,oBAAC,wBAAD;EAA+B;EAAmB;EAAkB;EAAM,GAAI;YAC5E,oBAAC,iBAAiB,UAAlB;GAA2B,OAAO;IAAE;IAAY;IAAO;IAAM;GAC1D;GACyB,CAAA;EACL,CAAA"}

package/dist/components/Badge/index.mjs

@@ -1,2 +1,2 @@
-import { t as Badge } from "../../Badge-CM2TzkdE.mjs";
+import { t as Badge } from "../../Badge-BtNIvtDZ.mjs";
 export { Badge, Badge as default };

package/dist/components/Banner/index.mjs

@@ -1,7 +1,9 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticOnly, semanticTokens } from "../../lib/semanticColor.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { n as Button } from "../../IconButton-BnSEV7eR.mjs";
+import { withAlpha } from "../../lib/color.mjs";
+import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import { n as Button } from "../../IconButton-CnJNIJVQ.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
@@ -16,14 +18,23 @@ const StyledBanner = styled("div")`
   min-height: 40px;
   padding: ${Spacing[2]};
   border-radius: 4px;
-  background: ${({ variant }) => {
+  background: ${({ theme, variant }) => {
+	const tokens = semanticTokens(theme);
 	switch (variant) {
-		case "success": return Color.CoreGreen100;
-		case "warning": return Color.CoreYellow100;
-		case "alert": return Color.CoreRed100;
-		default: return Color.CorePurple100;
+		case "success": return tokens ? withAlpha(tokens.FeedbackSuccess1, tokens.Opacity15) : Color.CoreGreen100;
+		case "warning": return tokens ? withAlpha(tokens.FeedbackWarning1, tokens.Opacity15) : Color.CoreYellow100;
+		case "alert": return tokens ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity15) : Color.CoreRed100;
+		default: return tokens ? withAlpha(tokens.FeedbackInfo1, tokens.Opacity25) : Color.CorePurple100;
 	}
 }};
+
+  ${semanticOnly((tokens) => css`
+      color: ${tokens.FgPrimary};
+
+      svg {
+        color: ${tokens.FgPrimary};
+      }
+    `)}
 `;
 const BannerContent = styled.div`
   display: flex;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport { useFocusVisible } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface BannerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n\n  /**\n   * Semantic colour theme for the banner background.\n   *\n   * - `informational` – purple, for general tips or announcements (default).\n   * - `success` – green, for confirmations or completed actions.\n   * - `warning` – yellow, for non-blocking cautions.\n   * - `alert` – red, for errors or destructive warnings.\n   *\n   * @defaultValue 'informational'\n   */\n  variant?: 'informational' | 'success' | 'warning' | 'alert';\n\n  /**\n   * Action affordance rendered to the right of the content.\n   *\n   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.\n   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).\n   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.\n   */\n  action?: string | ReactElement;\n\n  /**\n   * Called when the user clicks the close (×) button.\n   * When provided and `action` is absent, a close icon button is rendered automatically.\n   * When `action` is a string, clicking that string-labelled button calls this handler.\n   */\n  onClose?: VoidFunction;\n\n  /**\n   * When true, the content area stretches to fill the full banner width.\n   * Useful when `children` contains a layout that needs to span the entire space.\n   */\n  extendContentWidth?: boolean;\n}\n\nconst StyledBanner = styled('div')<BannerProps>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 40px;\n  padding: ${Spacing[2]};\n  border-radius: 4px;\n  background: ${({ variant }) => {\n    switch (variant) {\n      case 'success':\n        return Color.CoreGreen100;\n      case 'warning':\n        return Color.CoreYellow100;\n      case 'alert':\n        return Color.CoreRed100;\n      case 'informational':\n      default:\n        return Color.CorePurple100;\n    }\n  }};\n`;\n\nconst BannerContent = styled.div<{ extendContentWidth?: boolean }>`\n  display: flex;\n  align-items: center;\n\n  > svg:first-child {\n    margin-right: ${Spacing[2]};\n    flex-shrink: 0;\n  }\n\n  ${({ extendContentWidth }) =>\n    extendContentWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nconst ActionButton = styled(Button)<{ isFocusVisible?: boolean }>`\n  background-color: transparent;\n  justify-self: space-between;\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: unset;\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nexport const Banner = ({\n  children,\n  variant,\n  action,\n  onClose,\n  extendContentWidth,\n  ...elemProps\n}: BannerProps) => {\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <StyledBanner variant={variant} role='alert' {...elemProps}>\n      <BannerContent extendContentWidth={extendContentWidth}>{children}</BannerContent>\n      {typeof action === 'string'\n        ? onClose && (\n            <ActionButton variant='basic' width='auto' size='sm' onClick={onClose}>\n              {action}\n            </ActionButton>\n          )\n        : action}\n      {!action && onClose && (\n        <ActionButton\n          variant='basic'\n          width='icon'\n          size='sm'\n          aria-label='Close'\n          title='Close'\n          onClick={onClose}\n          isFocusVisible={isFocusVisible}\n        >\n          <XIcon />\n        </ActionButton>\n      )}\n    </StyledBanner>\n  );\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;;;AAgDA,MAAM,eAAe,OAAO,MAAM;IAC9B,gBAAgB,GAAG;;;;;;aAMV,QAAQ,GAAG;;iBAEP,EAAE,cAAc;AAC7B,SAAQ,SAAR;EACE,KAAK,UACH,QAAO,MAAM;EACf,KAAK,UACH,QAAO,MAAM;EACf,KAAK,QACH,QAAO,MAAM;EAEf,QACE,QAAO,MAAM;;EAEjB;;AAGJ,MAAM,gBAAgB,OAAO,GAAqC;;;;;oBAK9C,QAAQ,GAAG;;;;KAI1B,EAAE,yBACH,sBACA,GAAG;;MAED;;AAGN,MAAM,eAAe,OAAO,OAAO;;;;KAI9B,WAAW,cAAc,KAAK,YAAY,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAa,UAAU,EACrB,UACA,SACA,QACA,SACA,oBACA,GAAG,gBACc;CACjB,MAAM,EAAE,mBAAmB,iBAAiB;AAE5C,QACE,qBAAC,cAAD;EAAuB;EAAS,MAAK;EAAQ,GAAI;YAAjD;GACE,oBAAC,eAAD;IAAmC;IAAqB;IAAyB,CAAA;GAChF,OAAO,WAAW,WACf,WACE,oBAAC,cAAD;IAAc,SAAQ;IAAQ,OAAM;IAAO,MAAK;IAAK,SAAS;cAC3D;IACY,CAAA,GAEjB;GACH,CAAC,UAAU,WACV,oBAAC,cAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAW;IACX,OAAM;IACN,SAAS;IACO;cAEhB,oBAAC,OAAD,EAAS,CAAA;IACI,CAAA;GAEJ"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport { useFocusVisible } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport { withAlpha } from 'design-system/lib/color';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface BannerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n\n  /**\n   * Semantic colour theme for the banner background.\n   *\n   * - `informational` – purple, for general tips or announcements (default).\n   * - `success` – green, for confirmations or completed actions.\n   * - `warning` – yellow, for non-blocking cautions.\n   * - `alert` – red, for errors or destructive warnings.\n   *\n   * @defaultValue 'informational'\n   */\n  variant?: 'informational' | 'success' | 'warning' | 'alert';\n\n  /**\n   * Action affordance rendered to the right of the content.\n   *\n   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.\n   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).\n   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.\n   */\n  action?: string | ReactElement;\n\n  /**\n   * Called when the user clicks the close (×) button.\n   * When provided and `action` is absent, a close icon button is rendered automatically.\n   * When `action` is a string, clicking that string-labelled button calls this handler.\n   */\n  onClose?: VoidFunction;\n\n  /**\n   * When true, the content area stretches to fill the full banner width.\n   * Useful when `children` contains a layout that needs to span the entire space.\n   */\n  extendContentWidth?: boolean;\n}\n\nconst StyledBanner = styled('div')<BannerProps>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 40px;\n  padding: ${Spacing[2]};\n  border-radius: 4px;\n  background: ${({ theme, variant }) => {\n    const tokens = semanticTokens(theme);\n    switch (variant) {\n      case 'success':\n        return tokens ? withAlpha(tokens.FeedbackSuccess1, tokens.Opacity15) : Color.CoreGreen100;\n      case 'warning':\n        return tokens ? withAlpha(tokens.FeedbackWarning1, tokens.Opacity15) : Color.CoreYellow100;\n      case 'alert':\n        return tokens ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity15) : Color.CoreRed100;\n      case 'informational':\n      default:\n        return tokens ? withAlpha(tokens.FeedbackInfo1, tokens.Opacity25) : Color.CorePurple100;\n    }\n  }};\n\n  ${semanticOnly(\n    (tokens) => css`\n      color: ${tokens.FgPrimary};\n\n      svg {\n        color: ${tokens.FgPrimary};\n      }\n    `,\n  )}\n`;\n\nconst BannerContent = styled.div<{ extendContentWidth?: boolean }>`\n  display: flex;\n  align-items: center;\n\n  > svg:first-child {\n    margin-right: ${Spacing[2]};\n    flex-shrink: 0;\n  }\n\n  ${({ extendContentWidth }) =>\n    extendContentWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nconst ActionButton = styled(Button)<{ isFocusVisible?: boolean }>`\n  background-color: transparent;\n  justify-self: space-between;\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: unset;\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nexport const Banner = ({\n  children,\n  variant,\n  action,\n  onClose,\n  extendContentWidth,\n  ...elemProps\n}: BannerProps) => {\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <StyledBanner variant={variant} role='alert' {...elemProps}>\n      <BannerContent extendContentWidth={extendContentWidth}>{children}</BannerContent>\n      {typeof action === 'string'\n        ? onClose && (\n            <ActionButton variant='basic' width='auto' size='sm' onClick={onClose}>\n              {action}\n            </ActionButton>\n          )\n        : action}\n      {!action && onClose && (\n        <ActionButton\n          variant='basic'\n          width='icon'\n          size='sm'\n          aria-label='Close'\n          title='Close'\n          onClick={onClose}\n          isFocusVisible={isFocusVisible}\n        >\n          <XIcon />\n        </ActionButton>\n      )}\n    </StyledBanner>\n  );\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;;;;;AAkDA,MAAM,eAAe,OAAO,MAAM;IAC9B,gBAAgB,GAAG;;;;;;aAMV,QAAQ,GAAG;;iBAEP,EAAE,OAAO,cAAc;CACpC,MAAM,SAAS,eAAe,MAAM;AACpC,SAAQ,SAAR;EACE,KAAK,UACH,QAAO,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAC/E,KAAK,UACH,QAAO,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAC/E,KAAK,QACH,QAAO,SAAS,UAAU,OAAO,iBAAiB,OAAO,UAAU,GAAG,MAAM;EAE9E,QACE,QAAO,SAAS,UAAU,OAAO,eAAe,OAAO,UAAU,GAAG,MAAM;;EAE9E;;IAEA,cACC,WAAW,GAAG;eACJ,OAAO,UAAU;;;iBAGf,OAAO,UAAU;;MAG/B,CAAC;;AAGJ,MAAM,gBAAgB,OAAO,GAAqC;;;;;oBAK9C,QAAQ,GAAG;;;;KAI1B,EAAE,yBACH,sBACA,GAAG;;MAED;;AAGN,MAAM,eAAe,OAAO,OAAO;;;;KAI9B,WAAW,cAAc,KAAK,YAAY,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAa,UAAU,EACrB,UACA,SACA,QACA,SACA,oBACA,GAAG,gBACc;CACjB,MAAM,EAAE,mBAAmB,iBAAiB;AAE5C,QACE,qBAAC,cAAD;EAAuB;EAAS,MAAK;EAAQ,GAAI;YAAjD;GACE,oBAAC,eAAD;IAAmC;IAAqB;IAAyB,CAAA;GAChF,OAAO,WAAW,WACf,WACE,oBAAC,cAAD;IAAc,SAAQ;IAAQ,OAAM;IAAO,MAAK;IAAK,SAAS;cAC3D;IACY,CAAA,GAEjB;GACH,CAAC,UAAU,WACV,oBAAC,cAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAW;IACX,OAAM;IACN,SAAS;IACO;cAEhB,oBAAC,OAAD,EAAS,CAAA;IACI,CAAA;GAEJ"}

package/dist/components/BottomPanel/index.mjs

@@ -1,9 +1,9 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { useResizablePanel } from "../../lib/useResizablePanel.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as IconButton } from "../../IconButton-BnSEV7eR.mjs";
-import { t as Badge } from "../../Badge-CM2TzkdE.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-CWF65Tv4.mjs";
+import { t as IconButton } from "../../IconButton-CnJNIJVQ.mjs";
+import { t as Badge } from "../../Badge-BtNIvtDZ.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-Dw3xE_B-.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,2 +1,2 @@
-import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-D_Gzd4_J.mjs";
+import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-DdZ14ZFw.mjs";
 export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };

package/dist/components/Breadcrumbs/index.mjs

@@ -1,2 +1,2 @@
-import { t as Breadcrumbs } from "../../Breadcrumbs-BEYQlGbW.mjs";
+import { t as Breadcrumbs } from "../../Breadcrumbs-CR-xdruP.mjs";
 export { Breadcrumbs, Breadcrumbs as default };

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

@@ -1,3 +1,3 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-CRFbWv3l.mjs";
-import { t as IconButton } from "../../IconButton-Bh-JJ-0x.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-CTgyA3gc.mjs";
+import { t as IconButton } from "../../IconButton-PnrnqQ1s.mjs";
 export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/Button/index.mjs

@@ -1,2 +1,2 @@
-import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-BnSEV7eR.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-CnJNIJVQ.mjs";
 export { Button, Button as default, ButtonChildren, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/ButtonGroup/index.mjs

@@ -1,6 +1,8 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import { t as IconButton } from "../../IconButton-BnSEV7eR.mjs";
-import { n as useFormField } from "../../useFormField-C-K1lgmv.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticOnly } from "../../lib/semanticColor.mjs";
+import { withAlpha } from "../../lib/color.mjs";
+import { o as buttonPalette, t as IconButton } from "../../IconButton-CnJNIJVQ.mjs";
+import { n as useFormField } from "../../useFormField-DhYd6bNn.mjs";
 import { BorderRadius } from "@persona/design-tokens";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -15,7 +17,7 @@ const OptionItem = styled(IconButton)`
   border-radius: ${BorderRadius.Md};
   width: 32px;
   height: 32px;
-  background-color: ${({ theme }) => theme.color.variants.basic.default};
+  background-color: ${({ theme }) => buttonPalette(theme, "basic").default};
   white-space: nowrap;
 
   // radix-toggle-group adds a wrapping div to the options, so this is to
@@ -27,9 +29,15 @@ const OptionItem = styled(IconButton)`
   }
 
   &[data-state='on'] {
-    background-color: ${({ theme }) => theme.color.variants.basic.active};
+    background-color: ${({ theme }) => buttonPalette(theme, "basic").active};
   }
 
+  ${semanticOnly((tokens) => css`
+      &:disabled {
+        background-color: ${withAlpha(tokens.ActionNeutral, tokens.Opacity65)};
+      }
+    `)}
+
   &:first-child {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport type {\n  ToggleGroupMultipleProps,\n  ToggleGroupSingleProps,\n} from '@radix-ui/react-toggle-group';\nimport { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport useFormField from 'design-system/components/FormControl/useFormField';\n\nexport interface ButtonGroupProps {\n  id?: string;\n  className?: string;\n  fullWidth?: boolean;\n}\n\nconst OptionItem = styled(IconButton)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  flex: 1;\n  border-radius: ${BorderRadius.Md};\n  width: 32px;\n  height: 32px;\n  background-color: ${({ theme }) => theme.color.variants.basic.default};\n  white-space: nowrap;\n\n  // radix-toggle-group adds a wrapping div to the options, so this is to\n  // make sure the content is always center-aligned\n  & > div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &[data-state='on'] {\n    background-color: ${({ theme }) => theme.color.variants.basic.active};\n  }\n\n  &:first-child {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  &:last-child {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  &:not(:first-child):not(:last-child) {\n    border-radius: 0;\n  }\n\n  &[tabindex='0'] {\n    z-index: 1;\n  }\n`;\n\nconst ButtonGroupContainer = styled.div<{ fullWidth?: boolean }>`\n  display: inline-flex;\n  justify-content: space-between;\n  border-radius: 4px;\n  width: ${({ fullWidth }) => (fullWidth ? `100%` : `max-content`)};\n  gap: 1px;\n\n  > * {\n    ${({ fullWidth }) =>\n      fullWidth &&\n      css`\n        flex: 1;\n      `}\n  }\n`;\n\nexport const ButtonGroup = ({\n  children,\n  fullWidth,\n  ...props\n}: (ToggleGroupSingleProps | ToggleGroupMultipleProps) & ButtonGroupProps) => {\n  const { disabled } = props;\n  const field = useFormField({ inputId: props.id, disabled });\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      disabled={field.disabled}\n      aria-describedby={field.helperTextId}\n      aria-errormessage={field.hasError ? field.helperTextId : undefined}\n      aria-invalid={field.hasError}\n    >\n      <ButtonGroupContainer fullWidth={fullWidth} {...props}>\n        {children}\n      </ButtonGroupContainer>\n    </ToggleGroupPrimitive.Root>\n  );\n};\n\nexport default ButtonGroup;\n\nconst ButtonItem = forwardRef<HTMLButtonElement, ToggleGroupPrimitive.ToggleGroupItemProps>(\n  function ButtonItem(props: ToggleGroupPrimitive.ToggleGroupItemProps, forwardedRef) {\n    return <OptionItem ref={forwardedRef} {...props} />;\n  },\n);\n\nexport const ButtonGroupItem = forwardRef<\n  HTMLButtonElement,\n  ToggleGroupPrimitive.ToggleGroupItemProps\n>(function ButtonGroupItem({ children, ...props }, forwardedRef) {\n  return (\n    <ToggleGroupPrimitive.Item {...props} ref={forwardedRef} asChild>\n      <ButtonItem {...props}>{children}</ButtonItem>\n    </ToggleGroupPrimitive.Item>\n  );\n});\n"],"mappings":";;;;;;;;AAkBA,MAAM,aAAa,OAAO,WAAW;;;;;;mBAMlB,aAAa,GAAG;;;uBAGZ,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,QAAQ;;;;;;;;;;;;yBAY/C,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;AAsBzE,MAAM,uBAAuB,OAAO,GAA4B;;;;YAIpD,EAAE,gBAAiB,YAAY,SAAS,cAAe;;;;OAI5D,EAAE,gBACH,aACA,GAAG;;QAED;;;AAIR,MAAa,eAAe,EAC1B,UACA,WACA,GAAG,YACyE;CAC5E,MAAM,EAAE,aAAa;CACrB,MAAM,QAAQ,aAAa;EAAE,SAAS,MAAM;EAAI;EAAU,CAAC;AAE3D,QACE,oBAAC,qBAAqB,MAAtB;EACE,GAAI;EACJ,UAAU,MAAM;EAChB,oBAAkB,MAAM;EACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;EACzD,gBAAc,MAAM;YAEpB,oBAAC,sBAAD;GAAiC;GAAW,GAAI;GAC7C;GACoB,CAAA;EACG,CAAA;;AAMhC,MAAM,aAAa,WACjB,SAAS,WAAW,OAAkD,cAAc;AAClF,QAAO,oBAAC,YAAD;EAAY,KAAK;EAAc,GAAI;EAAS,CAAA;EAEtD;AAED,MAAa,kBAAkB,WAG7B,SAAS,gBAAgB,EAAE,UAAU,GAAG,SAAS,cAAc;AAC/D,QACE,oBAAC,qBAAqB,MAAtB;EAA2B,GAAI;EAAO,KAAK;EAAc,SAAA;YACvD,oBAAC,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpB,CAAA;EAE9B"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport type {\n  ToggleGroupMultipleProps,\n  ToggleGroupSingleProps,\n} from '@radix-ui/react-toggle-group';\nimport { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport { buttonPalette } from 'design-system/components/Button/palette';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { withAlpha } from 'design-system/lib/color';\nimport { semanticOnly } from 'design-system/lib/semanticColor';\n\nexport interface ButtonGroupProps {\n  id?: string;\n  className?: string;\n  fullWidth?: boolean;\n}\n\nconst OptionItem = styled(IconButton)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  flex: 1;\n  border-radius: ${BorderRadius.Md};\n  width: 32px;\n  height: 32px;\n  background-color: ${({ theme }) => buttonPalette(theme, 'basic').default};\n  white-space: nowrap;\n\n  // radix-toggle-group adds a wrapping div to the options, so this is to\n  // make sure the content is always center-aligned\n  & > div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &[data-state='on'] {\n    background-color: ${({ theme }) => buttonPalette(theme, 'basic').active};\n  }\n\n  ${semanticOnly(\n    (tokens) => css`\n      &:disabled {\n        background-color: ${withAlpha(tokens.ActionNeutral, tokens.Opacity65)};\n      }\n    `,\n  )}\n\n  &:first-child {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  &:last-child {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  &:not(:first-child):not(:last-child) {\n    border-radius: 0;\n  }\n\n  &[tabindex='0'] {\n    z-index: 1;\n  }\n`;\n\nconst ButtonGroupContainer = styled.div<{ fullWidth?: boolean }>`\n  display: inline-flex;\n  justify-content: space-between;\n  border-radius: 4px;\n  width: ${({ fullWidth }) => (fullWidth ? `100%` : `max-content`)};\n  gap: 1px;\n\n  > * {\n    ${({ fullWidth }) =>\n      fullWidth &&\n      css`\n        flex: 1;\n      `}\n  }\n`;\n\nexport const ButtonGroup = ({\n  children,\n  fullWidth,\n  ...props\n}: (ToggleGroupSingleProps | ToggleGroupMultipleProps) & ButtonGroupProps) => {\n  const { disabled } = props;\n  const field = useFormField({ inputId: props.id, disabled });\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      disabled={field.disabled}\n      aria-describedby={field.helperTextId}\n      aria-errormessage={field.hasError ? field.helperTextId : undefined}\n      aria-invalid={field.hasError}\n    >\n      <ButtonGroupContainer fullWidth={fullWidth} {...props}>\n        {children}\n      </ButtonGroupContainer>\n    </ToggleGroupPrimitive.Root>\n  );\n};\n\nexport default ButtonGroup;\n\nconst ButtonItem = forwardRef<HTMLButtonElement, ToggleGroupPrimitive.ToggleGroupItemProps>(\n  function ButtonItem(props: ToggleGroupPrimitive.ToggleGroupItemProps, forwardedRef) {\n    return <OptionItem ref={forwardedRef} {...props} />;\n  },\n);\n\nexport const ButtonGroupItem = forwardRef<\n  HTMLButtonElement,\n  ToggleGroupPrimitive.ToggleGroupItemProps\n>(function ButtonGroupItem({ children, ...props }, forwardedRef) {\n  return (\n    <ToggleGroupPrimitive.Item {...props} ref={forwardedRef} asChild>\n      <ButtonItem {...props}>{children}</ButtonItem>\n    </ToggleGroupPrimitive.Item>\n  );\n});\n"],"mappings":";;;;;;;;;;AAqBA,MAAM,aAAa,OAAO,WAAW;;;;;;mBAMlB,aAAa,GAAG;;;uBAGZ,EAAE,YAAY,cAAc,OAAO,QAAQ,CAAC,QAAQ;;;;;;;;;;;;yBAYlD,EAAE,YAAY,cAAc,OAAO,QAAQ,CAAC,OAAO;;;IAGxE,cACC,WAAW,GAAG;;4BAES,UAAU,OAAO,eAAe,OAAO,UAAU,CAAC;;MAG3E,CAAC;;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,uBAAuB,OAAO,GAA4B;;;;YAIpD,EAAE,gBAAiB,YAAY,SAAS,cAAe;;;;OAI5D,EAAE,gBACH,aACA,GAAG;;QAED;;;AAIR,MAAa,eAAe,EAC1B,UACA,WACA,GAAG,YACyE;CAC5E,MAAM,EAAE,aAAa;CACrB,MAAM,QAAQ,aAAa;EAAE,SAAS,MAAM;EAAI;EAAU,CAAC;AAE3D,QACE,oBAAC,qBAAqB,MAAtB;EACE,GAAI;EACJ,UAAU,MAAM;EAChB,oBAAkB,MAAM;EACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;EACzD,gBAAc,MAAM;YAEpB,oBAAC,sBAAD;GAAiC;GAAW,GAAI;GAC7C;GACoB,CAAA;EACG,CAAA;;AAMhC,MAAM,aAAa,WACjB,SAAS,WAAW,OAAkD,cAAc;AAClF,QAAO,oBAAC,YAAD;EAAY,KAAK;EAAc,GAAI;EAAS,CAAA;EAEtD;AAED,MAAa,kBAAkB,WAG7B,SAAS,gBAAgB,EAAE,UAAU,GAAG,SAAS,cAAc;AAC/D,QACE,oBAAC,qBAAqB,MAAtB;EAA2B,GAAI;EAAO,KAAK;EAAc,SAAA;YACvD,oBAAC,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpB,CAAA;EAE9B"}

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

@@ -1,3 +1,3 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-BKk3qESS.mjs";
-import { n as SectionProps, r as _default, t as CardProps } from "../../Card-BoGV5tY2.mjs";
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-1laYnwRP.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "../../Card-Dorym91P.mjs";
 export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

package/dist/components/Card/index.mjs

@@ -1,2 +1,2 @@
-import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-CKrJtn1f.mjs";
+import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-vQIPtdXi.mjs";
 export { ActionsContainer, Header, HeaderContainer, Root, Title, TitleContainer, Card_default as default };

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

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-C2waxwIy.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-C2FTJhnQ.mjs";
 import { CARD_HEADING_STICKY_OFFSET } from "../../SectionHeading.mjs";
 import _default from "../../Card2.mjs";
 export { CARD_HEADING_STICKY_OFFSET, _default as Card, _default as default, type IconAction, type MenuAction, type TextAction };

package/dist/components/CardV2/index.mjs

@@ -1,2 +1,2 @@
-import { n as CARD_HEADING_STICKY_OFFSET, t as Card_default } from "../../CardV2-B2wx1NE3.mjs";
+import { n as CARD_HEADING_STICKY_OFFSET, t as Card_default } from "../../CardV2-CBjhsfrn.mjs";
 export { CARD_HEADING_STICKY_OFFSET, Card_default as Card, Card_default as default };

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

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-CwPXPLCi.mjs";
+import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-DRJXDs2T.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/components/Checkbox/index.mjs

@@ -1,2 +1,2 @@
-import { t as Checkbox } from "../../Checkbox-DwZEsi7x.mjs";
+import { t as Checkbox } from "../../Checkbox-BHZ7c7_6.mjs";
 export { Checkbox, Checkbox as default };

package/dist/components/CodeHighlight/PrismWithLanguages.d.mts

@@ -0,0 +1,2 @@
+import { Prism } from "prism-react-renderer";
+export { Prism as default };

package/dist/components/CodeHighlight/PrismWithLanguages.mjs

@@ -0,0 +1,48 @@
+import { Prism } from "prism-react-renderer";
+//#region components/CodeHighlight/PrismWithLanguages.tsx
+Prism.languages.handlebars = {
+	comment: /\{\{![\s\S]*?\}\}/,
+	delimiter: {
+		pattern: /^\{\{\{?|\}\}\}?$/,
+		alias: "punctuation"
+	},
+	string: /(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,
+	number: /\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,
+	boolean: /\b(?:false|true)\b/,
+	block: {
+		pattern: /^(\s*(?:~\s*)?)[#/]\S+?(?=\s*(?:~\s*)?$|\s)/,
+		lookbehind: true,
+		alias: "keyword"
+	},
+	brackets: {
+		pattern: /\[[^\]]+\]/,
+		inside: {
+			punctuation: /\[|\]/,
+			variable: /[\s\S]+/
+		}
+	},
+	punctuation: /[!"#%&':()*+,./;<=>@[\\\]^`{|}~]/,
+	variable: /[^!"#%&'()*+,/;<=>@[\\\]^`{|}~\s]+/
+};
+Prism.languages.bash ??= {
+	string: /(["'])(?:\\[\s\S]|(?!\1)[^\\])*\1/,
+	comment: {
+		pattern: /(^|[^"{\\$])#.*/,
+		lookbehind: true
+	},
+	variable: /\$(?:[\w#?*!@-]+|\{[^}]*\})/,
+	function: {
+		pattern: /(^|[|&;]\s*)[\w./-]+/,
+		lookbehind: true
+	},
+	operator: /\|\||&&|\d?>>?|<<[-<]?|[|&<>]/,
+	number: /\b\d+\b/,
+	punctuation: /[{}[\];()]/
+};
+Prism.languages.shell ??= Prism.languages.bash;
+Prism.languages.mustache = Prism.languages.handlebars;
+var PrismWithLanguages_default = Prism;
+//#endregion
+export { PrismWithLanguages_default as default };
+
+//# sourceMappingURL=PrismWithLanguages.mjs.map

package/dist/components/CodeHighlight/PrismWithLanguages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismWithLanguages.mjs","names":[],"sources":["../../../components/CodeHighlight/PrismWithLanguages.tsx"],"sourcesContent":["import { Prism } from 'prism-react-renderer';\n\nPrism.languages.handlebars = {\n  comment: /\\{\\{![\\s\\S]*?\\}\\}/,\n  delimiter: {\n    pattern: /^\\{\\{\\{?|\\}\\}\\}?$/,\n    alias: 'punctuation',\n  },\n  string: /([\"'])(?:\\\\.|(?!\\1)[^\\\\\\r\\n])*\\1/,\n  number: /\\b0x[\\dA-Fa-f]+\\b|(?:\\b\\d+(?:\\.\\d*)?|\\B\\.\\d+)(?:[Ee][+-]?\\d+)?/,\n  boolean: /\\b(?:false|true)\\b/,\n  block: {\n    pattern: /^(\\s*(?:~\\s*)?)[#/]\\S+?(?=\\s*(?:~\\s*)?$|\\s)/,\n    lookbehind: true,\n    alias: 'keyword',\n  },\n  brackets: {\n    pattern: /\\[[^\\]]+\\]/,\n    inside: {\n      punctuation: /\\[|\\]/,\n      variable: /[\\s\\S]+/,\n    },\n  },\n  punctuation: /[!\"#%&':()*+,./;<=>@[\\\\\\]^`{|}~]/,\n  variable: /[^!\"#%&'()*+,/;<=>@[\\\\\\]^`{|}~\\s]+/,\n};\n\n// Fallback only: a build that bundles the real bash grammar keeps it. String precedes comment so\n// that a `#` inside quotes stays part of the string.\nPrism.languages.bash ??= {\n  string: /([\"'])(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1/,\n  comment: {\n    pattern: /(^|[^\"{\\\\$])#.*/,\n    lookbehind: true,\n  },\n  variable: /\\$(?:[\\w#?*!@-]+|\\{[^}]*\\})/,\n  function: {\n    pattern: /(^|[|&;]\\s*)[\\w./-]+/,\n    lookbehind: true,\n  },\n  operator: /\\|\\||&&|\\d?>>?|<<[-<]?|[|&<>]/,\n  number: /\\b\\d+\\b/,\n  punctuation: /[{}[\\];()]/,\n};\n\nPrism.languages.shell ??= Prism.languages.bash;\n\nPrism.languages.mustache = Prism.languages.handlebars;\n\nexport default Prism;\n"],"mappings":";;AAEA,MAAM,UAAU,aAAa;CAC3B,SAAS;CACT,WAAW;EACT,SAAS;EACT,OAAO;EACR;CACD,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,OAAO;EACL,SAAS;EACT,YAAY;EACZ,OAAO;EACR;CACD,UAAU;EACR,SAAS;EACT,QAAQ;GACN,aAAa;GACb,UAAU;GACX;EACF;CACD,aAAa;CACb,UAAU;CACX;AAID,MAAM,UAAU,SAAS;CACvB,QAAQ;CACR,SAAS;EACP,SAAS;EACT,YAAY;EACb;CACD,UAAU;CACV,UAAU;EACR,SAAS;EACT,YAAY;EACb;CACD,UAAU;CACV,QAAQ;CACR,aAAa;CACd;AAED,MAAM,UAAU,UAAU,MAAM,UAAU;AAE1C,MAAM,UAAU,WAAW,MAAM,UAAU;AAE3C,IAAA,6BAAe"}

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

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