@persona/design-system 0.1.8 → 0.2.0

package/dist/components/Attribute/index.cjs

@@ -1,210 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_chunk = require("../../chunk-CKQMccvm.cjs");
-const require_Text = require("../../Text-G9QmYf0P.cjs");
-const require_Tooltip = require("../../Tooltip-olP3rdUO.cjs");
-const require_IconButton = require("../../IconButton-nlgjJQCS.cjs");
-const require_Sticker = require("../../Sticker-CIoseh9f.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_fp_js = require("lodash/fp.js");
-let react_aria = require("react-aria");
-let lodash = require("lodash");
-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

@@ -1 +0,0 @@
-{"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 { 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 { 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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"}

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

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

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

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

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

package/dist/components/Banner/index.cjs

@@ -1,99 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_chunk = require("../../chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
-const require_mixins_text = require("../../mixins/text.cjs");
-const require_IconButton = require("../../IconButton-nlgjJQCS.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _persona_icons = require("@persona/icons");
-let react_aria = require("react-aria");
-//#region components/Banner/Banner.tsx
-const StyledBanner = (0, styled_components.default)("div")`
-  ${require_mixins_text.paragraphMixins.sm};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  min-height: 40px;
-  padding: ${_persona_design_tokens.Spacing[2]};
-  border-radius: 4px;
-  background: ${({ variant }) => {
-	switch (variant) {
-		case "success": return _persona_design_tokens.Color.CoreGreen100;
-		case "warning": return _persona_design_tokens.Color.CoreYellow100;
-		case "alert": return _persona_design_tokens.Color.CoreRed100;
-		default: return _persona_design_tokens.Color.CorePurple100;
-	}
-}};
-`;
-const BannerContent = styled_components.default.div`
-  display: flex;
-  align-items: center;
-
-  > svg:first-child {
-    margin-right: ${_persona_design_tokens.Spacing[2]};
-    flex-shrink: 0;
-  }
-
-  ${({ extendContentWidth }) => extendContentWidth && styled_components.css`
-      width: 100%;
-    `}
-`;
-const ActionButton = (0, styled_components.default)(require_IconButton.Button)`
-  background-color: transparent;
-  justify-self: space-between;
-
-  &${require_lib_pseudoClass.isActive}${require_lib_pseudoClass.isNotDisabled}, &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
-    background-color: unset;
-  }
-
-  ${({ isFocusVisible }) => !isFocusVisible && styled_components.css`
-      &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
-        box-shadow: none;
-      }
-      &${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
-        box-shadow: none;
-      }
-    `}
-`;
-const Banner = ({ children, variant, action, onClose, extendContentWidth, ...elemProps }) => {
-	const { isFocusVisible } = (0, react_aria.useFocusVisible)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledBanner, {
-		variant,
-		role: "alert",
-		...elemProps,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerContent, {
-				extendContentWidth,
-				children
-			}),
-			typeof action === "string" ? onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
-				variant: "basic",
-				width: "auto",
-				size: "sm",
-				onClick: onClose,
-				children: action
-			}) : action,
-			!action && onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
-				variant: "basic",
-				width: "icon",
-				size: "sm",
-				"aria-label": "Close",
-				title: "Close",
-				onClick: onClose,
-				isFocusVisible,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.XIcon, {})
-			})
-		]
-	});
-};
-//#endregion
-exports.Banner = Banner;
-exports.default = Banner;
-
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["paragraphMixins","Spacing","Color","Button","isActive","isNotDisabled","isHovered","isFocused","XIcon"],"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,CAAA,GAAA,kBAAA,SAAO,MAAM;IAC9BA,oBAAAA,gBAAgB,GAAG;;;;;;aAMVC,uBAAAA,QAAQ,GAAG;;iBAEP,EAAE,cAAc;AAC7B,SAAQ,SAAR;EACE,KAAK,UACH,QAAOC,uBAAAA,MAAM;EACf,KAAK,UACH,QAAOA,uBAAAA,MAAM;EACf,KAAK,QACH,QAAOA,uBAAAA,MAAM;EAEf,QACE,QAAOA,uBAAAA,MAAM;;EAEjB;;AAGJ,MAAM,gBAAgB,kBAAA,QAAO,GAAqC;;;;;oBAK9CD,uBAAAA,QAAQ,GAAG;;;;KAI1B,EAAE,yBACH,sBACA,kBAAA,GAAG;;MAED;;AAGN,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAOE,mBAAAA,OAAO;;;;KAI9BC,wBAAAA,WAAWC,wBAAAA,cAAc,KAAKC,wBAAAA,YAAYD,wBAAAA,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,kBAAA,GAAG;SACEC,wBAAAA,YAAYC,wBAAAA,YAAYF,wBAAAA,cAAc;;;SAGtCE,wBAAAA,YAAYF,wBAAAA,cAAc;;;MAG7B;;AAGN,MAAa,UAAU,EACrB,UACA,SACA,QACA,SACA,oBACA,GAAG,gBACc;CACjB,MAAM,EAAE,oBAAA,GAAA,WAAA,kBAAoC;AAE5C,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAuB;EAAS,MAAK;EAAQ,GAAI;YAAjD;GACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;IAAmC;IAAqB;IAAyB,CAAA;GAChF,OAAO,WAAW,WACf,WACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,SAAQ;IAAQ,OAAM;IAAO,MAAK;IAAK,SAAS;cAC3D;IACY,CAAA,GAEjB;GACH,CAAC,UAAU,WACV,iBAAA,GAAA,kBAAA,KAAC,cAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAW;IACX,OAAM;IACN,SAAS;IACO;cAEhB,iBAAA,GAAA,kBAAA,KAACG,eAAAA,OAAD,EAAS,CAAA;IACI,CAAA;GAEJ"}

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

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

package/dist/components/Breadcrumbs/index.cjs

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

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

@@ -1,2 +0,0 @@
-import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-BBREROrw.cjs";
-export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };

package/dist/components/Button/index.cjs

@@ -1,11 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_IconButton = require("../../IconButton-nlgjJQCS.cjs");
-exports.Button = require_IconButton.Button;
-exports.ButtonChildren = require_IconButton.ButtonChildren;
-exports.IconButton = require_IconButton.IconButton;
-exports.StyledButton = require_IconButton.StyledButton;
-exports.SuffixIconContainer = require_IconButton.SuffixIconContainer;
-exports.default = require_IconButton.Button;

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

@@ -1,3 +0,0 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-C_3p5Xfi.cjs";
-import { t as IconButton } from "../../IconButton-ZcyTFjPn.cjs";
-export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/ButtonGroup/index.cjs

@@ -1,112 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_chunk = require("../../chunk-CKQMccvm.cjs");
-const require_IconButton = require("../../IconButton-nlgjJQCS.cjs");
-const require_useFormField = require("../../useFormField-BZlArnsI.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 _radix_ui_react_toggle_group = require("@radix-ui/react-toggle-group");
-_radix_ui_react_toggle_group = require_chunk.__toESM(_radix_ui_react_toggle_group);
-//#region components/ButtonGroup/ButtonGroup.tsx
-const OptionItem = (0, styled_components.default)(require_IconButton.IconButton)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  flex: 1;
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
-  width: 32px;
-  height: 32px;
-  background-color: ${({ theme }) => theme.color.variants.basic.default};
-  white-space: nowrap;
-
-  // radix-toggle-group adds a wrapping div to the options, so this is to
-  // make sure the content is always center-aligned
-  & > div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &[data-state='on'] {
-    background-color: ${({ theme }) => theme.color.variants.basic.active};
-  }
-
-  &:first-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  &:not(:first-child):not(:last-child) {
-    border-radius: 0;
-  }
-
-  &[tabindex='0'] {
-    z-index: 1;
-  }
-`;
-const ButtonGroupContainer = styled_components.default.div`
-  display: inline-flex;
-  justify-content: space-between;
-  border-radius: 4px;
-  width: ${({ fullWidth }) => fullWidth ? `100%` : `max-content`};
-  gap: 1px;
-
-  > * {
-    ${({ fullWidth }) => fullWidth && styled_components.css`
-        flex: 1;
-      `}
-  }
-`;
-const ButtonGroup = ({ children, fullWidth, ...props }) => {
-	const { disabled } = props;
-	const field = require_useFormField.useFormField({
-		inputId: props.id,
-		disabled
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_toggle_group.Root, {
-		...props,
-		disabled: field.disabled,
-		"aria-describedby": field.helperTextId,
-		"aria-errormessage": field.hasError ? field.helperTextId : void 0,
-		"aria-invalid": field.hasError,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonGroupContainer, {
-			fullWidth,
-			...props,
-			children
-		})
-	});
-};
-const ButtonItem = (0, react.forwardRef)(function ButtonItem(props, forwardedRef) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionItem, {
-		ref: forwardedRef,
-		...props
-	});
-});
-const ButtonGroupItem = (0, react.forwardRef)(function ButtonGroupItem({ children, ...props }, forwardedRef) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_toggle_group.Item, {
-		...props,
-		ref: forwardedRef,
-		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonItem, {
-			...props,
-			children
-		})
-	});
-});
-//#endregion
-exports.ButtonGroup = ButtonGroup;
-exports.ButtonGroupItem = ButtonGroupItem;
-exports.default = ButtonGroup;
-
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["IconButton","BorderRadius","useFormField","ToggleGroupPrimitive"],"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,CAAA,GAAA,kBAAA,SAAOA,mBAAAA,WAAW;;;;;;mBAMlBC,uBAAAA,aAAa,GAAG;;;uBAGZ,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,QAAQ;;;;;;;;;;;;yBAY/C,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;AAsBzE,MAAM,uBAAuB,kBAAA,QAAO,GAA4B;;;;YAIpD,EAAE,gBAAiB,YAAY,SAAS,cAAe;;;;OAI5D,EAAE,gBACH,aACA,kBAAA,GAAG;;QAED;;;AAIR,MAAa,eAAe,EAC1B,UACA,WACA,GAAG,YACyE;CAC5E,MAAM,EAAE,aAAa;CACrB,MAAM,QAAQC,qBAAAA,aAAa;EAAE,SAAS,MAAM;EAAI;EAAU,CAAC;AAE3D,QACE,iBAAA,GAAA,kBAAA,KAACC,6BAAqB,MAAtB;EACE,GAAI;EACJ,UAAU,MAAM;EAChB,oBAAkB,MAAM;EACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;EACzD,gBAAc,MAAM;YAEpB,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAiC;GAAW,GAAI;GAC7C;GACoB,CAAA;EACG,CAAA;;AAMhC,MAAM,cAAA,GAAA,MAAA,YACJ,SAAS,WAAW,OAAkD,cAAc;AAClF,QAAO,iBAAA,GAAA,kBAAA,KAAC,YAAD;EAAY,KAAK;EAAc,GAAI;EAAS,CAAA;EAEtD;AAED,MAAa,mBAAA,GAAA,MAAA,YAGX,SAAS,gBAAgB,EAAE,UAAU,GAAG,SAAS,cAAc;AAC/D,QACE,iBAAA,GAAA,kBAAA,KAACA,6BAAqB,MAAtB;EAA2B,GAAI;EAAO,KAAK;EAAc,SAAA;YACvD,iBAAA,GAAA,kBAAA,KAAC,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpB,CAAA;EAE9B"}

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

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

package/dist/components/Card/index.cjs

@@ -1,12 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_Card = require("../../Card-Csz-PxX0.cjs");
-exports.ActionsContainer = require_Card.ActionsContainer;
-exports.Header = require_Card.Header;
-exports.HeaderContainer = require_Card.HeaderContainer;
-exports.Root = require_Card.Root;
-exports.Title = require_Card.Title;
-exports.TitleContainer = require_Card.TitleContainer;
-exports.default = require_Card.Card_default;

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

@@ -1,3 +0,0 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-C-WhPOin.cjs";
-import { n as SectionProps, r as _default, t as CardProps } from "../../Card-CJPEmUvg.cjs";
-export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

package/dist/components/CardV2/index.cjs

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

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

@@ -1,3 +0,0 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-E90Wvqmc.cjs";
-import _default from "../../Card2.cjs";
-export { _default as Card, _default as default, type IconAction, type MenuAction, type TextAction };

package/dist/components/Checkbox/index.cjs

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

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

@@ -1,2 +0,0 @@
-import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-Cr8ifm10.cjs";
-export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/components/Combobox/index.cjs

@@ -1,9 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_Combobox = require("../../Combobox-COXvmxlM.cjs");
-exports.CaretButton = require_Combobox.CaretButton;
-exports.Combobox = require_Combobox.Combobox;
-exports.default = require_Combobox.Combobox;
-exports.flattenOptions = require_Combobox.flattenOptions;

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

@@ -1,3 +0,0 @@
-import { D as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-zZ3tE-dH.cjs";
-import { n as ComboboxProps, t as Combobox } from "../../Combobox-DBWMHwUt.cjs";
-export { CaretButton, Combobox, Combobox as default, ComboboxOption, ComboboxOptionGroup, ComboboxOptionsOrGroups, ComboboxProps, flattenOptions };

package/dist/components/ConfigFormGroup/index.cjs

@@ -1,10 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_useFormGroup = require("../../useFormGroup-Bmnzgq0S.cjs");
-const require_ConfigFormGroup = require("../../ConfigFormGroup-m5YdVa9n.cjs");
-exports.ConfigFormGroup = require_ConfigFormGroup.ConfigFormGroup;
-exports.FormGroupContext = require_useFormGroup.FormGroupContext;
-exports.default = require_ConfigFormGroup.ConfigFormGroup;
-exports.useFormGroup = require_useFormGroup.useFormGroup;

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

@@ -1,3 +0,0 @@
-import { ConfigFormGroup } from "../../ConfigFormGroup.cjs";
-import useFormGroup, { FormGroupContext } from "../../useFormGroup.cjs";
-export { ConfigFormGroup, ConfigFormGroup as default, FormGroupContext, useFormGroup };

package/dist/components/DataTable/TableControls/index.cjs

@@ -1,27 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_TableControls = require("../../../TableControls-BtXK7Ils.cjs");
-exports.ControlBar = require_TableControls.ControlBar;
-exports.DataTableCompactBar = require_TableControls.DataTableCompactBar;
-exports.EMPTY_FILTER_STATE = require_TableControls.EMPTY_FILTER_STATE;
-exports.FieldRegistry = require_TableControls.FieldRegistry;
-exports.FilterBar = require_TableControls.FilterBar_default;
-exports.TableControlsContext = require_TableControls.TableControlsContext;
-exports.TableControlsProvider = require_TableControls.TableControlsProvider;
-exports.TableViewConfiguration = require_TableControls.TableViewConfiguration;
-exports.TableViewConfigurationDropdown = require_TableControls.TableViewConfigurationDropdown;
-exports.buildFieldRegistry = require_TableControls.buildFieldRegistry;
-exports.default = require_TableControls.TableControls;
-exports.getDefaultOperatorForType = require_TableControls.getDefaultOperatorForType;
-exports.getOperatorsForField = require_TableControls.getOperatorsForField;
-exports.getOperatorsForType = require_TableControls.getOperatorsForType;
-exports.hasCompleteValue = require_TableControls.hasCompleteValue;
-exports.isFilterStateV2 = require_TableControls.isFilterStateV2;
-exports.isValuelessOperator = require_TableControls.isValuelessOperator;
-exports.pruneToRegistry = require_TableControls.pruneToRegistry;
-exports.resolveValueControl = require_TableControls.resolveValueControl;
-exports.useFilterBarSize = require_TableControls.useFilterBarSize;
-exports.useFilterStateV2 = require_TableControls.useFilterStateV2;
-exports.useTableControls = require_TableControls.useTableControls;