@persona/design-system 0.1.5-pre.4

package/dist/chunk-CoPdw6nB.cjs

@@ -0,0 +1,64 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esmMin = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __hasOwnProp.call(mod, "module.exports") ? mod["module.exports"] : __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+//#endregion
+Object.defineProperty(exports, "__commonJSMin", {
+	enumerable: true,
+	get: function() {
+		return __commonJSMin;
+	}
+});
+Object.defineProperty(exports, "__esmMin", {
+	enumerable: true,
+	get: function() {
+		return __esmMin;
+	}
+});
+Object.defineProperty(exports, "__exportAll", {
+	enumerable: true,
+	get: function() {
+		return __exportAll;
+	}
+});
+Object.defineProperty(exports, "__toCommonJS", {
+	enumerable: true,
+	get: function() {
+		return __toCommonJS;
+	}
+});
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});

package/dist/common.d.mts

@@ -0,0 +1,7 @@
+import { GregorianCalendar } from "@internationalized/date";
+
+//#region components/DatePicker/common.d.ts
+declare const createCalendar: () => GregorianCalendar;
+//#endregion
+export { createCalendar };
+//# sourceMappingURL=common.d.mts.map

package/dist/components/Attribute/index.cjs

@@ -0,0 +1,210 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_Text = require("../../Text-DVz8erdF.cjs");
+const require_Tooltip = require("../../Tooltip-0i_15ysU.cjs");
+const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
+const require_Sticker = require("../../Sticker-D_dutvp_.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 react = require("react");
+let _persona_icons = require("@persona/icons");
+let lodash = require("lodash");
+let lodash_fp_js = require("lodash/fp.js");
+let react_aria = require("react-aria");
+let react_stately = require("react-stately");
+//#region components/Attribute/Attribute.tsx
+const AttributeContext = (0, react.createContext)({});
+const IconButtonContainer = (0, styled_components.default)(require_IconButton.IconButton)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    transition-duration: 150ms;
+  }
+
+  :hover {
+    svg {
+      color: ${_persona_design_tokens.Color.CorePurple800};
+    }
+  }
+`;
+const Value = styled_components.default.dd`
+  ${({ size }) => size === "sm" ? _persona_design_tokens.Typography.TextSmall : _persona_design_tokens.Typography.TextMedium};
+  color: ${({ isPlaceholder }) => isPlaceholder ? _persona_design_tokens.Color.TextSecondary : _persona_design_tokens.Color.CoreSlate1000};
+  margin: 0;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  word-break: ${({ wordBreak }) => wordBreak ? wordBreak : "normal"};
+
+  ul,
+  ol {
+    list-style-position: inside;
+  }
+
+  a {
+    color: ${({ theme }) => theme.color.text.brand};
+    text-decoration: none;
+
+    &:visited {
+      color: ${({ theme }) => theme.color.text.brand};
+    }
+  }
+`;
+const AttributeValue = ({ placeholder, show, redacted, value, wordBreak, size, id, "aria-labelledby": ariaLabelledBy }) => {
+	const isEmpty = value == null || value === "";
+	const renderedVal = isEmpty ? placeholder : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: !show ? (0, lodash.repeat)("•", typeof value === "string" ? value.length : 8) : value });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Value, {
+		isPlaceholder: isEmpty,
+		wordBreak,
+		size,
+		title: typeof value === "string" ? value : void 0,
+		"aria-labelledby": ariaLabelledBy,
+		id,
+		children: redacted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
+			id,
+			children: "Redacted"
+		}) : renderedVal
+	});
+};
+const AttributeContainer = (0, styled_components.default)("div")`
+  ${({ table, size }) => table && styled_components.css`
+      display: table-row;
+
+      > * {
+        display: table-cell;
+      }
+
+      & > ${AttributeLabel} {
+        padding: ${_persona_design_tokens.Spacing[1]} 0;
+        padding-right: ${size === "sm" ? _persona_design_tokens.Spacing[2] : _persona_design_tokens.Spacing[3]};
+      }
+      & > ${Value} {
+        padding: ${size === "sm" ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]} 0;
+      }
+    `}
+
+  ${({ horizontal }) => horizontal && styled_components.css`
+      display: grid;
+      gap: ${_persona_design_tokens.Spacing[4]};
+      grid-template-columns: subgrid;
+      grid-column: span 2;
+    `}
+`;
+const AttributeLabel = (0, styled_components.default)(require_Text.Paragraph).attrs((props) => ({
+	size: props.size ?? "md",
+	color: "tertiary",
+	as: "dt"
+}))`
+  margin: 0;
+  overflow-wrap: break-word;
+`;
+const RightContainer = styled_components.default.span`
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: ${_persona_design_tokens.Spacing[2]};
+`;
+const Attribute = ({ label, value, redacted, placeholder = "-", wordBreak, labelComponent: LabelComponent = AttributeLabel, valueComponent: ValueComponent = AttributeValue, right, helpText, toggleable, table, ...elemProps }) => {
+	const attrCtx = (0, react.useContext)(AttributeContext);
+	const size = attrCtx?.size ?? "md";
+	const toggleRef = (0, react.useRef)();
+	const valueAsArray = [].concat(value).filter(Boolean);
+	const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;
+	const state = (0, react_stately.useToggleState)({ defaultSelected: !toggleable });
+	const { buttonProps } = (0, react_aria.useToggleButton)({
+		"aria-label": state.isSelected ? `Hide ${label} value` : `Show ${label} value`,
+		elementType: "button"
+	}, state, toggleRef);
+	const labelId = (0, react.useMemo)(() => (0, lodash_fp_js.uniqueId)("pds_attribute_label__"), []);
+	const valueId = (0, react.useMemo)(() => (0, lodash_fp_js.uniqueId)("pds_attribute_value__"), []);
+	const show = state.isSelected;
+	(0, react.useEffect)(() => {
+		state.setSelected(!toggleable);
+	}, [toggleable]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AttributeContainer, {
+		table: table || attrCtx?.table,
+		horizontal: attrCtx?.horizontal,
+		size,
+		...elemProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabelComponent, {
+			id: labelId,
+			"aria-details": valueId,
+			size,
+			children: [
+				label,
+				helpText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.HelperTooltip, {
+					size: "sm",
+					children: helpText
+				}) }),
+				showToggleButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButtonContainer, {
+					...buttonProps,
+					ref: toggleRef,
+					children: show ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.EyeIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.EyeOffIcon, {})
+				}) }),
+				right && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightContainer, { children: right })
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueComponent, {
+			id: valueId,
+			value,
+			placeholder,
+			wordBreak,
+			redacted,
+			show,
+			size,
+			"aria-labelledby": labelId
+		})]
+	});
+};
+//#endregion
+//#region components/Attribute/AttributeGrid.tsx
+const AttributeGridComponent = styled_components.default.dl`
+  ${({ colCount, table, horizontal, size }) => table ? styled_components.css`
+          display: table;
+          ${table === "full-width" && styled_components.css`
+            width: 100%;
+            table-layout: fixed;
+            border-spacing: 0 ${size === "sm" ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
+          `};
+        ` : styled_components.css`
+          display: grid;
+          gap: ${size === "sm" ? _persona_design_tokens.Spacing[2] : _persona_design_tokens.Spacing[4]};
+          /* If the layout is horizontal we guarentee an even number of columns */
+          grid-template-columns: ${colCount ? `repeat(${colCount}, ${horizontal ? "1fr 2fr" : "1fr"})` : `repeat(auto-fit, ${horizontal ? "minmax(120px, 1fr) minmax(225px, 2fr)" : "minmax(225px, 1fr)"})`};
+        `}
+  margin: 0;
+
+  & + & {
+    padding-bottom: ${_persona_design_tokens.Spacing[5]};
+  }
+`;
+const AttributeGrid = ({ children, horizontal, table, size, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttributeGridComponent, {
+		table,
+		horizontal,
+		size,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttributeContext.Provider, {
+			value: {
+				horizontal,
+				table,
+				size
+			},
+			children
+		})
+	});
+};
+//#endregion
+exports.Attribute = Attribute;
+exports.AttributeContext = AttributeContext;
+exports.AttributeGrid = AttributeGrid;
+exports.AttributeLabel = AttributeLabel;
+exports.AttributeValue = AttributeValue;
+exports.IconButtonContainer = IconButtonContainer;
+exports.default = Attribute;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["IconButton","Color","Typography","Sticker","Spacing","Paragraph","HelperTooltip","EyeIcon","EyeOffIcon","Spacing"],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport { repeat } from 'lodash';\nimport { uniqueId } from 'lodash/fp';\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 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 { Spacing } from '@persona/design-tokens';\nimport type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\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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"}

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

@@ -0,0 +1,3 @@
+import { Attribute, AttributeContext, AttributeLabel, AttributeProps, AttributeSize, AttributeValue, IconButtonContainer, TableLayoutValue, TextTransform, WordBreak } from "../../Attribute.cjs";
+import AttributeGrid from "../../AttributeGrid.cjs";
+export { Attribute, Attribute as default, AttributeContext, AttributeGrid, AttributeLabel, AttributeProps, AttributeSize, AttributeValue, IconButtonContainer, TableLayoutValue, TextTransform, WordBreak };

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

@@ -0,0 +1,3 @@
+import { Attribute, AttributeContext, AttributeLabel, AttributeProps, AttributeSize, AttributeValue, IconButtonContainer, TableLayoutValue, TextTransform, WordBreak } from "../../Attribute.mjs";
+import AttributeGrid from "../../AttributeGrid.mjs";
+export { Attribute, Attribute as default, AttributeContext, AttributeGrid, AttributeLabel, AttributeProps, AttributeSize, AttributeValue, IconButtonContainer, TableLayoutValue, TextTransform, WordBreak };

package/dist/components/Attribute/index.mjs

@@ -0,0 +1,198 @@
+import { i as Paragraph } from "../../Text-DOTYjIt0.mjs";
+import { r as HelperTooltip } from "../../Tooltip-T7RQpy_a.mjs";
+import { t as IconButton } from "../../IconButton-C28qxOdi.mjs";
+import { n as Sticker } from "../../Sticker-D6bwBTGr.mjs";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { EyeIcon, EyeOffIcon } from "@persona/icons";
+import { repeat } from "lodash";
+import { uniqueId as uniqueId$1 } from "lodash/fp.js";
+import { useToggleButton } from "react-aria";
+import { useToggleState } from "react-stately";
+//#region components/Attribute/Attribute.tsx
+const AttributeContext = createContext({});
+const IconButtonContainer = styled(IconButton)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    transition-duration: 150ms;
+  }
+
+  :hover {
+    svg {
+      color: ${Color.CorePurple800};
+    }
+  }
+`;
+const Value = styled.dd`
+  ${({ size }) => size === "sm" ? Typography.TextSmall : Typography.TextMedium};
+  color: ${({ isPlaceholder }) => isPlaceholder ? Color.TextSecondary : Color.CoreSlate1000};
+  margin: 0;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  word-break: ${({ wordBreak }) => wordBreak ? wordBreak : "normal"};
+
+  ul,
+  ol {
+    list-style-position: inside;
+  }
+
+  a {
+    color: ${({ theme }) => theme.color.text.brand};
+    text-decoration: none;
+
+    &:visited {
+      color: ${({ theme }) => theme.color.text.brand};
+    }
+  }
+`;
+const AttributeValue = ({ placeholder, show, redacted, value, wordBreak, size, id, "aria-labelledby": ariaLabelledBy }) => {
+	const isEmpty = value == null || value === "";
+	const renderedVal = isEmpty ? placeholder : /* @__PURE__ */ jsx(Fragment, { children: !show ? repeat("•", typeof value === "string" ? value.length : 8) : value });
+	return /* @__PURE__ */ jsx(Value, {
+		isPlaceholder: isEmpty,
+		wordBreak,
+		size,
+		title: typeof value === "string" ? value : void 0,
+		"aria-labelledby": ariaLabelledBy,
+		id,
+		children: redacted ? /* @__PURE__ */ jsx(Sticker, {
+			id,
+			children: "Redacted"
+		}) : renderedVal
+	});
+};
+const AttributeContainer = styled("div")`
+  ${({ table, size }) => table && css`
+      display: table-row;
+
+      > * {
+        display: table-cell;
+      }
+
+      & > ${AttributeLabel} {
+        padding: ${Spacing[1]} 0;
+        padding-right: ${size === "sm" ? Spacing[2] : Spacing[3]};
+      }
+      & > ${Value} {
+        padding: ${size === "sm" ? Spacing[1] : Spacing[2]} 0;
+      }
+    `}
+
+  ${({ horizontal }) => horizontal && css`
+      display: grid;
+      gap: ${Spacing[4]};
+      grid-template-columns: subgrid;
+      grid-column: span 2;
+    `}
+`;
+const AttributeLabel = styled(Paragraph).attrs((props) => ({
+	size: props.size ?? "md",
+	color: "tertiary",
+	as: "dt"
+}))`
+  margin: 0;
+  overflow-wrap: break-word;
+`;
+const RightContainer = styled.span`
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: ${Spacing[2]};
+`;
+const Attribute = ({ label, value, redacted, placeholder = "-", wordBreak, labelComponent: LabelComponent = AttributeLabel, valueComponent: ValueComponent = AttributeValue, right, helpText, toggleable, table, ...elemProps }) => {
+	const attrCtx = useContext(AttributeContext);
+	const size = attrCtx?.size ?? "md";
+	const toggleRef = useRef();
+	const valueAsArray = [].concat(value).filter(Boolean);
+	const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;
+	const state = useToggleState({ defaultSelected: !toggleable });
+	const { buttonProps } = useToggleButton({
+		"aria-label": state.isSelected ? `Hide ${label} value` : `Show ${label} value`,
+		elementType: "button"
+	}, state, toggleRef);
+	const labelId = useMemo(() => uniqueId$1("pds_attribute_label__"), []);
+	const valueId = useMemo(() => uniqueId$1("pds_attribute_value__"), []);
+	const show = state.isSelected;
+	useEffect(() => {
+		state.setSelected(!toggleable);
+	}, [toggleable]);
+	return /* @__PURE__ */ jsxs(AttributeContainer, {
+		table: table || attrCtx?.table,
+		horizontal: attrCtx?.horizontal,
+		size,
+		...elemProps,
+		children: [/* @__PURE__ */ jsxs(LabelComponent, {
+			id: labelId,
+			"aria-details": valueId,
+			size,
+			children: [
+				label,
+				helpText && /* @__PURE__ */ jsx(RightContainer, { children: /* @__PURE__ */ jsx(HelperTooltip, {
+					size: "sm",
+					children: helpText
+				}) }),
+				showToggleButton && /* @__PURE__ */ jsx(RightContainer, { children: /* @__PURE__ */ jsx(IconButtonContainer, {
+					...buttonProps,
+					ref: toggleRef,
+					children: show ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {})
+				}) }),
+				right && /* @__PURE__ */ jsx(RightContainer, { children: right })
+			]
+		}), /* @__PURE__ */ jsx(ValueComponent, {
+			id: valueId,
+			value,
+			placeholder,
+			wordBreak,
+			redacted,
+			show,
+			size,
+			"aria-labelledby": labelId
+		})]
+	});
+};
+//#endregion
+//#region components/Attribute/AttributeGrid.tsx
+const AttributeGridComponent = styled.dl`
+  ${({ colCount, table, horizontal, size }) => table ? css`
+          display: table;
+          ${table === "full-width" && css`
+            width: 100%;
+            table-layout: fixed;
+            border-spacing: 0 ${size === "sm" ? Spacing[1] : Spacing[2]};
+          `};
+        ` : css`
+          display: grid;
+          gap: ${size === "sm" ? Spacing[2] : Spacing[4]};
+          /* If the layout is horizontal we guarentee an even number of columns */
+          grid-template-columns: ${colCount ? `repeat(${colCount}, ${horizontal ? "1fr 2fr" : "1fr"})` : `repeat(auto-fit, ${horizontal ? "minmax(120px, 1fr) minmax(225px, 2fr)" : "minmax(225px, 1fr)"})`};
+        `}
+  margin: 0;
+
+  & + & {
+    padding-bottom: ${Spacing[5]};
+  }
+`;
+const AttributeGrid = ({ children, horizontal, table, size, ...props }) => {
+	return /* @__PURE__ */ jsx(AttributeGridComponent, {
+		table,
+		horizontal,
+		size,
+		...props,
+		children: /* @__PURE__ */ jsx(AttributeContext.Provider, {
+			value: {
+				horizontal,
+				table,
+				size
+			},
+			children
+		})
+	});
+};
+//#endregion
+export { Attribute, Attribute as default, AttributeContext, AttributeGrid, AttributeLabel, AttributeValue, IconButtonContainer };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["uniqueId"],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport { repeat } from 'lodash';\nimport { uniqueId } from 'lodash/fp';\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 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 { Spacing } from '@persona/design-tokens';\nimport type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\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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"}

package/dist/components/Badge/index.cjs

@@ -0,0 +1,8 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_Badge = require("../../Badge-BwAZD9BH.cjs");
+exports.Badge = require_Badge.Badge;
+exports.default = require_Badge.Badge;

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

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

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

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

package/dist/components/Badge/index.mjs

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