@servicetitan/anvil2 3.17.0 → 3.18.0

package/dist/Details-B2F3auTX.js

@@ -0,0 +1,216 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, useId } from 'react';
+import { B as Button } from './Button-B_E6ybA-.js';
+import { T as Text } from './Text-D4SWT4u-.js';
+import { T as Tooltip } from './Tooltip-CsTkZqMg.js';
+import { D as DetailsContext, a as Details$1 } from './Details-DQ-_Mg4o.js';
+import { C as Chip } from './Chip-BWqgUX71.js';
+import { M as Menu } from './Menu-DqP7YQgE.js';
+import { S as SvgInfo } from './info-CYpG6tcI.js';
+import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
+import { I as Icon } from './Icon-B5zwN7GD.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { b as InlineMarkdown } from './InlineMarkdown-CL1tKR01.js';
+import { s as stripInlineMarkdown } from './stripInlineMarkdown-BV12XXzl.js';
+import { useTrackingId } from './useTrackingId.js';
+
+import './Details.css';const summary = "_summary_c8l52_1";
+const cell = "_cell_c8l52_119";
+const label = "_label_c8l52_112";
+const arrow = "_arrow_c8l52_168";
+const styles = {
+	"summary-row": "_summary-row_c8l52_1",
+	summary: summary,
+	"summary-lead": "_summary-lead_c8l52_57",
+	"more-info": "_more-info_c8l52_64",
+	"label-cell": "_label-cell_c8l52_112",
+	cell: cell,
+	label: label,
+	arrow: arrow,
+	"arrow-small": "_arrow-small_c8l52_180",
+	"arrow-icon": "_arrow-icon_c8l52_180",
+	"arrow-large": "_arrow-large_c8l52_184",
+	"arrow-xlarge": "_arrow-xlarge_c8l52_188",
+	"is-expanded": "_is-expanded_c8l52_192"
+};
+
+function CellContent(cell) {
+  switch (cell.type) {
+    case "text":
+      return /* @__PURE__ */ jsxs(Text, { variant: "body", size: cell.size, children: [
+        cell.label,
+        cell.label && cell.value ? ": " : null,
+        cell.value ? /* @__PURE__ */ jsx("b", { children: cell.value }) : null
+      ] });
+    case "chip":
+      return /* @__PURE__ */ jsx(Chip, { label: cell.label, color: cell.color });
+    case "menu":
+      return /* @__PURE__ */ jsx(Menu, { label: cell.label, size: "small", children: cell.items.map((item, index) => /* @__PURE__ */ jsx(
+        Menu.Item,
+        {
+          label: item.label,
+          onClick: item.onClick,
+          disabled: item.disabled
+        },
+        index
+      )) });
+    case "button":
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          appearance: cell.appearance,
+          icon: cell.icon,
+          onClick: cell.onClick,
+          children: cell.label
+        }
+      );
+  }
+}
+function DetailsSummaryCells({
+  cells
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: cells.map((cell, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-anv": "details-summary-cell",
+      className: styles.cell,
+      children: CellContent(cell)
+    },
+    index
+  )) });
+}
+
+const DetailsArrow = forwardRef(
+  function DetailsArrow2({ size = "medium", className: classNameProp, ...rest }, ref) {
+    const { isExpanded } = useContext(DetailsContext);
+    const className = cx(
+      styles.arrow,
+      { [styles["is-expanded"]]: isExpanded },
+      { [styles[`arrow-${size}`]]: size !== "medium" },
+      classNameProp
+    );
+    return /* @__PURE__ */ jsx("span", { className, ref, ...rest, children: /* @__PURE__ */ jsx(Icon, { size: "large", svg: SvgChevronRight, className: styles["arrow-icon"] }) });
+  }
+);
+
+const LABEL_FORMATS = ["italic", "highlight"];
+const MORE_INFO_BUTTON_SIZE = {
+  small: "xsmall",
+  medium: "xsmall",
+  large: "xsmall",
+  xlarge: "small"
+};
+const DetailsSummary = forwardRef(function DetailsSummary2({
+  label,
+  labelProps,
+  attributes,
+  templateColumns = "1fr",
+  onClick: onClickProp,
+  className: classNameProp,
+  style: styleProp,
+  ...rest
+}, ref) {
+  const { id, isExpanded, toggle } = useContext(DetailsContext);
+  const handleClick = (...args) => {
+    onClickProp?.(...args);
+    toggle();
+  };
+  const labelId = useId();
+  const plainLabel = stripInlineMarkdown(label, LABEL_FORMATS);
+  const data = { label: plainLabel };
+  const trackingId = useTrackingId({
+    name: "DetailsSummary",
+    data,
+    hasOverride: !!rest["data-tracking-id"]
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-anv": "details-summary-row",
+      role: "group",
+      "aria-labelledby": labelId,
+      className: cx(styles["summary-row"], classNameProp),
+      style: {
+        gridTemplateColumns: templateColumns,
+        ...styleProp
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-anv": "details-summary-lead", className: styles["summary-lead"], children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-tracking-id": trackingId,
+              "data-anv": "details-summary",
+              "aria-controls": id,
+              "aria-expanded": isExpanded,
+              className: styles.summary,
+              onClick: handleClick,
+              ref,
+              ...rest,
+              children: /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "data-anv": "details-summary-label",
+                  className: styles["label-cell"],
+                  children: [
+                    /* @__PURE__ */ jsx(DetailsArrow, { size: labelProps?.size }),
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        id: labelId,
+                        variant: "body",
+                        inline: true,
+                        size: labelProps?.size,
+                        className: styles.label,
+                        children: /* @__PURE__ */ jsx(InlineMarkdown, { value: label, allowedFormats: LABEL_FORMATS })
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          labelProps?.moreInfo && // A sibling of the toggle, so the button is not nested in a button.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-anv": "details-summary-more-info",
+              className: styles["more-info"],
+              children: /* @__PURE__ */ jsxs(Tooltip, { placement: "top", children: [
+                /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    appearance: "ghost",
+                    size: MORE_INFO_BUTTON_SIZE[labelProps.size ?? "medium"],
+                    icon: SvgInfo,
+                    "aria-label": `More information about ${plainLabel}`
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Tooltip.Content, { children: labelProps.moreInfo })
+              ] })
+            }
+          )
+        ] }),
+        attributes && /* @__PURE__ */ jsx(DetailsSummaryCells, { cells: attributes })
+      ]
+    }
+  );
+});
+
+const Details = Object.assign(
+  forwardRef(function DetailsInner(props, ref) {
+    return /* @__PURE__ */ jsx(Details$1, { ref, ...props });
+  }),
+  {
+    /** Row holding the button that toggles the disclosure content, plus optional attribute cells. */
+    Summary: DetailsSummary,
+    /** Expandable content associated with the summary. */
+    Content: Details$1.Content
+  }
+);
+Details.displayName = "Details";
+
+export { Details as D };
+//# sourceMappingURL=Details-B2F3auTX.js.map

package/dist/Details-B2F3auTX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details-B2F3auTX.js","sources":["../src/beta/components/Details/internal/DetailsSummaryCells.tsx","../src/beta/components/Details/internal/DetailsArrow.tsx","../src/beta/components/Details/DetailsSummary.tsx","../src/beta/components/Details/Details.tsx"],"sourcesContent":["import type { DetailsSummaryColumnAttribute } from \"../DetailsSummary\";\nimport { Button } from \"../../../../components/Button\";\nimport { Chip } from \"../../../../components/Chip\";\nimport { Menu } from \"../../../../components/Menu\";\nimport { Text } from \"../../../../components/Text\";\n\nimport styles from \"../Details.module.scss\";\n\nfunction CellContent(cell: DetailsSummaryColumnAttribute) {\n  switch (cell.type) {\n    case \"text\":\n      return (\n        <Text variant=\"body\" size={cell.size}>\n          {cell.label}\n          {cell.label && cell.value ? \": \" : null}\n          {cell.value ? <b>{cell.value}</b> : null}\n        </Text>\n      );\n    case \"chip\":\n      return <Chip label={cell.label} color={cell.color} />;\n    case \"menu\":\n      return (\n        <Menu label={cell.label} size=\"small\">\n          {cell.items.map((item, index) => (\n            <Menu.Item\n              key={index}\n              label={item.label}\n              onClick={item.onClick}\n              disabled={item.disabled}\n            />\n          ))}\n        </Menu>\n      );\n    case \"button\":\n      return (\n        <Button\n          size=\"small\"\n          appearance={cell.appearance}\n          icon={cell.icon}\n          onClick={cell.onClick}\n        >\n          {cell.label}\n        </Button>\n      );\n  }\n}\n\n/** Grid items for the attribute cells; the Summary's grid places them. */\nexport function DetailsSummaryCells({\n  cells,\n}: {\n  cells: DetailsSummaryColumnAttribute[];\n}) {\n  return (\n    <>\n      {cells.map((cell, index) => (\n        <div\n          key={index}\n          data-anv=\"details-summary-cell\"\n          className={styles.cell}\n        >\n          {CellContent(cell)}\n        </div>\n      ))}\n    </>\n  );\n}\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport Arrow_right from \"@servicetitan/hammer-icon/mdi/round/chevron_right.svg\";\nimport { DetailsContext } from \"../../../../components/Details/internal/DetailsContext\";\nimport Icon from \"../../../../components/Icon\";\nimport type { BodyTextProps } from \"../../../../components/Text/types\";\n\nimport cx from \"classnames\";\nimport styles from \"../Details.module.scss\";\n\nexport type DetailsArrowProps = ComponentPropsWithoutRef<\"span\"> & {\n  /** The label's text scale; the arrow scales with it. Defaults to `medium`. */\n  size?: BodyTextProps[\"size\"];\n};\n\n/** Rotating indicator that reflects the parent Details state. */\nexport const DetailsArrow = forwardRef<HTMLSpanElement, DetailsArrowProps>(\n  function DetailsArrow(\n    { size = \"medium\", className: classNameProp, ...rest },\n    ref,\n  ) {\n    const { isExpanded } = useContext(DetailsContext);\n\n    const className = cx(\n      styles.arrow,\n      { [styles[\"is-expanded\"]]: isExpanded },\n      { [styles[`arrow-${size}`]]: size !== \"medium\" },\n      classNameProp,\n    );\n\n    return (\n      <span className={className} ref={ref} {...rest}>\n        <Icon size=\"large\" svg={Arrow_right} className={styles[\"arrow-icon\"]} />\n      </span>\n    );\n  },\n);\n","import {\n  forwardRef,\n  useContext,\n  useId,\n  type ComponentPropsWithoutRef,\n  type MouseEventHandler,\n} from \"react\";\nimport type { DataTrackingId } from \"../../../types\";\nimport { Button, type ButtonProps } from \"../../../components/Button\";\nimport type { ChipProps } from \"../../../components/Chip\";\nimport type { MenuItemProps } from \"../../../components/Menu\";\nimport type { GridProps } from \"../../../components/Grid\";\nimport { Text } from \"../../../components/Text\";\nimport { Tooltip } from \"../../../components/Tooltip\";\nimport type { BodyTextProps } from \"../../../components/Text/types\";\nimport { DetailsContext } from \"../../../components/Details/internal/DetailsContext\";\nimport { DetailsSummaryCells } from \"./internal/DetailsSummaryCells\";\nimport {\n  InlineMarkdown,\n  type InlineMarkdownFormat,\n} from \"../../../internal/components/InlineMarkdown\";\nimport { stripInlineMarkdown } from \"../../../internal/functions\";\nimport Info from \"@servicetitan/hammer-icon/mdi/round/info.svg\";\nimport { useTrackingId } from \"../../../hooks\";\nimport { DetailsArrow } from \"./internal/DetailsArrow\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\n// The only markup the label honors; any other marker stays literal.\nconst LABEL_FORMATS: InlineMarkdownFormat[] = [\"italic\", \"highlight\"];\n\n/**\n * Text cell rendered as `label: value`, with the value in bold. Either can be\n * left out; the colon shows only when both are set.\n */\nexport type DetailsSummaryTextAttribute = {\n  type: \"text\";\n  /** Regular-weight text before the value. */\n  label?: string;\n  /** Bold text after the label. */\n  value?: string;\n  /** Text scale. Defaults to `medium`. */\n  size?: BodyTextProps[\"size\"];\n};\n\n/** Chip cell. `label` and `color` are the Chip's own props. */\nexport type DetailsSummaryChipAttribute = {\n  type: \"chip\";\n  /** Visible chip text. */\n  label: ChipProps[\"label\"];\n  /** Surface color; the chip derives a contrast-safe foreground. */\n  color?: ChipProps[\"color\"];\n};\n\n/** Button cell. Only a labeled button, so there is no icon-only variant. */\nexport type DetailsSummaryButtonAttribute = {\n  type: \"button\";\n  /** Visible button text. */\n  label: string;\n  /** Visual emphasis. Defaults to `secondary`. */\n  appearance?: ButtonProps[\"appearance\"];\n  /** A bare icon renders before the label; use `{ after }` to trail it. */\n  icon?: ButtonProps[\"icon\"];\n  /** Runs on click. The click does not toggle the Details. */\n  onClick?: ButtonProps[\"onClick\"];\n};\n\nexport type DetailsSummaryMenuItem = {\n  /** Visible item text. */\n  label: string;\n  /** Runs when the item is selected; the menu then closes. */\n  onClick?: MenuItemProps[\"onClick\"];\n  /** Keeps the item in keyboard navigation but prevents selection. */\n  disabled?: boolean;\n};\n\n/** Menu cell: a button that opens a flat list of items. No submenus. */\nexport type DetailsSummaryMenuAttribute = {\n  type: \"menu\";\n  /** Trigger button text. */\n  label: string;\n  /** Items listed in the menu, in order. */\n  items: DetailsSummaryMenuItem[];\n};\n\n/** An attribute cell. Each takes one grid track, following the label in order. */\nexport type DetailsSummaryColumnAttribute =\n  | DetailsSummaryTextAttribute\n  | DetailsSummaryChipAttribute\n  | DetailsSummaryButtonAttribute\n  | DetailsSummaryMenuAttribute;\n\n/** Options for the label, which always renders as body text. */\nexport type DetailsSummaryLabelProps = {\n  /** Text scale. Defaults to `medium`. */\n  size?: BodyTextProps[\"size\"];\n  /**\n   * Adds an info button right after the label that shows this text in a\n   * tooltip. The button sits beside the toggle, not inside it, so using it does\n   * not expand or collapse the Details.\n   */\n  moreInfo?: string;\n};\n\n// Icon-only button sizes that keep the info button within the arrow's height.\nconst MORE_INFO_BUTTON_SIZE = {\n  small: \"xsmall\",\n  medium: \"xsmall\",\n  large: \"xsmall\",\n  xlarge: \"small\",\n} as const;\n\nexport type DetailsSummaryProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"children\"\n> &\n  DataTrackingId & {\n    /**\n     * Text for the first cell, beside the expand arrow. It is bold by default\n     * and supports two inline markers: `*italic*` and `==highlight==`.\n     */\n    label: string;\n    /** Options for the label's Text. */\n    labelProps?: DetailsSummaryLabelProps;\n    /**\n     * Grid tracks shared by the label and the attribute cells, such as\n     * `1fr 2fr 1fr`. The label takes the first track and each cell takes the\n     * next one, so size a track wider for a cell that needs more room. Cells\n     * beyond the tracks wrap to a new row. Defaults to `1fr`.\n     */\n    templateColumns?: GridProps[\"templateColumns\"];\n    /**\n     * Cells placed on the grid after the label, each in its own track. They sit\n     * beside the toggle button, not inside it: clicking text, a chip, or empty\n     * space in the row toggles the disclosure, while a button or menu cell runs\n     * its own action.\n     */\n    attributes?: DetailsSummaryColumnAttribute[];\n  };\n\n/**\n * Summary row for Details.Content: a toggle button with the label, and the\n * attribute cells beside it. `className` and `style` apply to the row. Every other\n * prop, including `ref` and a supplied `onClick`, goes to the toggle button; the\n * `onClick` runs before the internal expanded state toggles.\n */\nexport const DetailsSummary = forwardRef<\n  HTMLButtonElement,\n  DetailsSummaryProps\n>(function DetailsSummary(\n  {\n    label,\n    labelProps,\n    attributes,\n    templateColumns = \"1fr\",\n    onClick: onClickProp,\n    className: classNameProp,\n    style: styleProp,\n    ...rest\n  },\n  ref,\n) {\n  const { id, isExpanded, toggle } = useContext(DetailsContext);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (...args) => {\n    onClickProp?.(...args);\n    toggle();\n  };\n\n  const labelId = useId();\n  const plainLabel = stripInlineMarkdown(label, LABEL_FORMATS);\n  const data = { label: plainLabel };\n\n  const trackingId = useTrackingId({\n    name: \"DetailsSummary\",\n    data,\n    hasOverride: !!rest[\"data-tracking-id\"],\n  });\n\n  return (\n    <div\n      data-anv=\"details-summary-row\"\n      role=\"group\"\n      aria-labelledby={labelId}\n      className={cx(styles[\"summary-row\"], classNameProp)}\n      style={{\n        gridTemplateColumns: templateColumns,\n        ...styleProp,\n      }}\n    >\n      <div data-anv=\"details-summary-lead\" className={styles[\"summary-lead\"]}>\n        <button\n          type=\"button\"\n          data-tracking-id={trackingId}\n          data-anv=\"details-summary\"\n          aria-controls={id}\n          aria-expanded={isExpanded}\n          className={styles.summary}\n          onClick={handleClick}\n          ref={ref}\n          {...rest}\n        >\n          <span\n            data-anv=\"details-summary-label\"\n            className={styles[\"label-cell\"]}\n          >\n            <DetailsArrow size={labelProps?.size} />\n            {/* Inline renders a span; the default paragraph is not valid in a\n                button. */}\n            <Text\n              id={labelId}\n              variant=\"body\"\n              inline\n              size={labelProps?.size}\n              className={styles.label}\n            >\n              <InlineMarkdown value={label} allowedFormats={LABEL_FORMATS} />\n            </Text>\n          </span>\n        </button>\n        {labelProps?.moreInfo && (\n          // A sibling of the toggle, so the button is not nested in a button.\n          <span\n            data-anv=\"details-summary-more-info\"\n            className={styles[\"more-info\"]}\n          >\n            <Tooltip placement=\"top\">\n              <Tooltip.Trigger>\n                <Button\n                  appearance=\"ghost\"\n                  size={MORE_INFO_BUTTON_SIZE[labelProps.size ?? \"medium\"]}\n                  icon={Info}\n                  aria-label={`More information about ${plainLabel}`}\n                />\n              </Tooltip.Trigger>\n              <Tooltip.Content>{labelProps.moreInfo}</Tooltip.Content>\n            </Tooltip>\n          </span>\n        )}\n      </div>\n      {attributes && <DetailsSummaryCells cells={attributes} />}\n    </div>\n  );\n});\n","import { forwardRef } from \"react\";\nimport {\n  Details as StableDetails,\n  type DetailsProps,\n} from \"../../../components/Details\";\nimport { DetailsSummary } from \"./DetailsSummary\";\n\nexport type { DetailsProps };\n\n/**\n * Disclosure container that coordinates its Summary and Content. Supports\n * controlled or uncontrolled expanded state. The root and Content are the\n * stable Details'; the Summary takes a `label` and typed `attributes` cells in\n * place of `children`.\n */\nexport const Details = Object.assign(\n  forwardRef<HTMLDivElement, DetailsProps>(function DetailsInner(props, ref) {\n    return <StableDetails ref={ref} {...props} />;\n  }),\n  {\n    /** Row holding the button that toggles the disclosure content, plus optional attribute cells. */\n    Summary: DetailsSummary,\n    /** Expandable content associated with the summary. */\n    Content: StableDetails.Content,\n  },\n);\nDetails.displayName = \"Details\";\n"],"names":["DetailsArrow","Arrow_right","DetailsSummary","Info","StableDetails"],"mappings":"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"}

package/dist/{Details-BxqP-5vp.js → Details-DQ-_Mg4o.js}

@@ -7,7 +7,7 @@ import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
 
-import './Details.css';const DetailsContext = createContext({
+import './Details2.css';const DetailsContext = createContext({
   id: "",
   isExpanded: false,
   expanded: () => void 0,
@@ -167,5 +167,5 @@ const Details = Object.assign(
 );
 Details.displayName = "Details";
 
-export { Details as D };
-//# sourceMappingURL=Details-BxqP-5vp.js.map
+export { DetailsContext as D, Details as a };
+//# sourceMappingURL=Details-DQ-_Mg4o.js.map

package/dist/{Details-BxqP-5vp.js.map → Details-DQ-_Mg4o.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Details-BxqP-5vp.js","sources":["../src/components/Details/internal/DetailsContext.tsx","../src/components/Details/internal/DetailsArrow.tsx","../src/components/Details/DetailsSummary.tsx","../src/components/Details/DetailsContent.tsx","../src/components/Details/Details.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type DetailsContextProps = {\n  id: string;\n  isExpanded: boolean;\n  expanded: () => void;\n  close: () => void;\n  toggle: () => void;\n};\n\nexport const DetailsContext = createContext<DetailsContextProps>({\n  id: \"\",\n  isExpanded: false,\n  expanded: () => undefined,\n  close: () => undefined,\n  toggle: () => undefined,\n});\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport Arrow_right from \"@servicetitan/hammer-icon/mdi/round/chevron_right.svg\";\nimport { DetailsContext } from \"./DetailsContext\";\nimport Icon from \"../../Icon\";\n\nimport cx from \"classnames\";\nimport styles from \"../Details.module.scss\";\n\nexport type DetailsArrowProps = ComponentPropsWithoutRef<\"span\">;\n\n/** Rotating indicator that reflects the parent Details state. */\nexport const DetailsArrow = forwardRef<HTMLSpanElement, DetailsArrowProps>(\n  function DetailsArrow({ className: classNameProp, ...rest }, ref) {\n    const { isExpanded } = useContext(DetailsContext);\n\n    const className = cx(\n      styles.arrow,\n      { [styles[\"is-expanded\"]]: isExpanded },\n      classNameProp,\n    );\n\n    return (\n      <span className={className} ref={ref} {...rest}>\n        <Icon size=\"large\" svg={Arrow_right} />\n      </span>\n    );\n  },\n);\n","import {\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type MouseEventHandler,\n} from \"react\";\nimport type { DataTrackingId } from \"../../types\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DetailsArrow } from \"./internal/DetailsArrow\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\nexport type DetailsSummaryProps = ComponentPropsWithoutRef<\"button\"> &\n  DataTrackingId;\n\n/**\n * Disclosure button for Details.Content. A supplied `onClick` runs before the\n * internal expanded state toggles.\n */\nexport const DetailsSummary = forwardRef<\n  HTMLButtonElement,\n  DetailsSummaryProps\n>(function DetailsSummary(\n  { children, onClick: onClickProp, className: classNameProp, ...rest },\n  ref,\n) {\n  const { id, isExpanded, toggle } = useContext(DetailsContext);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (...args) => {\n    onClickProp?.(...args);\n    toggle();\n  };\n\n  const data = {\n    children: childrenToString(children),\n  };\n\n  const trackingId = useTrackingId({\n    name: \"DetailsSummary\",\n    data,\n    hasOverride: !!rest[\"data-tracking-id\"],\n  });\n\n  const className = cx(styles.summary, classNameProp);\n\n  return (\n    <button\n      data-tracking-id={trackingId}\n      data-anv=\"details-summary\"\n      aria-controls={id}\n      aria-expanded={isExpanded}\n      className={className}\n      onClick={handleClick}\n      ref={ref}\n      {...rest}\n    >\n      <DetailsArrow />\n      <span className={styles.label}>{children}</span>\n    </button>\n  );\n});\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\nexport type DetailsContentProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** Fixes the inner content height and makes it scrollable when needed. */\n  height?: string | number;\n  /** Constrains the inner content height and makes it scrollable when needed. */\n  maxHeight?: string | number;\n};\n\n/**\n * Disclosure panel associated with Details.Summary. It remains mounted while\n * its visibility follows the parent Details state.\n */\nexport const DetailsContent = forwardRef<HTMLDivElement, DetailsContentProps>(\n  function DetailsContent(\n    {\n      className: classNameProp,\n      children,\n      height,\n      maxHeight,\n      style: styleProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const { id, isExpanded } = useContext(DetailsContext);\n\n    const style = {\n      height,\n      maxHeight,\n      ...(height || maxHeight ? { overflow: \"auto\" } : {}),\n      ...styleProp,\n    };\n\n    return (\n      <div\n        data-anv=\"details-content\"\n        id={id}\n        className={cx(styles[\"content-wrapper\"], {\n          [styles.expanded]: isExpanded,\n        })}\n        ref={ref}\n      >\n        <div className={styles.content}>\n          <div className={classNameProp} style={style} {...rest}>\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n","import {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport type { LayoutUtilProps } from \"../../types\";\nimport { DetailsSummary } from \"./DetailsSummary\";\nimport { DetailsContent } from \"./DetailsContent\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\nexport type DetailsProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps & {\n    /**\n     * Controls whether the content is expanded. When set, internal toggles do\n     * not change the rendered state.\n     */\n    expanded?: boolean;\n    /** Initial state when `expanded` is omitted. Defaults to `false`. */\n    defaultExpanded?: boolean;\n  };\n\n/**\n * Disclosure container that coordinates its Summary and Content. Supports\n * controlled or uncontrolled expanded state.\n */\nexport const Details = Object.assign(\n  forwardRef<HTMLDivElement, DetailsProps>(function DetailsInner(props, ref) {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      children,\n      id: idProp,\n      expanded: expandedControlled,\n      defaultExpanded = false,\n      style,\n      className,\n      ...rest\n    } = componentProps;\n    const id = useId();\n    const [isExpanded, setIsOpen] = useState(defaultExpanded);\n\n    function expanded() {\n      setIsOpen(true);\n    }\n\n    function close() {\n      setIsOpen(false);\n    }\n\n    function toggle() {\n      setIsOpen((prevIsOpen: boolean) => !prevIsOpen);\n    }\n\n    const value = useMemo(\n      () => ({\n        id: idProp != null ? idProp : id,\n        isExpanded:\n          expandedControlled != null ? expandedControlled : isExpanded,\n        expanded,\n        close,\n        toggle,\n      }),\n      [id, idProp, isExpanded, expandedControlled],\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <DetailsContext.Provider value={value}>\n        <div\n          data-anv=\"details\"\n          ref={ref}\n          className={cx(styles.details, className)}\n          style={styleCombined}\n          {...rest}\n        >\n          {children}\n        </div>\n      </DetailsContext.Provider>\n    );\n  }),\n  {\n    /** Button that toggles the disclosure content. */\n    Summary: DetailsSummary,\n    /** Expandable content associated with the summary. */\n    Content: DetailsContent,\n  },\n);\nDetails.displayName = \"Details\";\n"],"names":["DetailsArrow","Arrow_right","DetailsSummary","DetailsContent"],"mappings":"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"}
+{"version":3,"file":"Details-DQ-_Mg4o.js","sources":["../src/components/Details/internal/DetailsContext.tsx","../src/components/Details/internal/DetailsArrow.tsx","../src/components/Details/DetailsSummary.tsx","../src/components/Details/DetailsContent.tsx","../src/components/Details/Details.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type DetailsContextProps = {\n  id: string;\n  isExpanded: boolean;\n  expanded: () => void;\n  close: () => void;\n  toggle: () => void;\n};\n\nexport const DetailsContext = createContext<DetailsContextProps>({\n  id: \"\",\n  isExpanded: false,\n  expanded: () => undefined,\n  close: () => undefined,\n  toggle: () => undefined,\n});\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport Arrow_right from \"@servicetitan/hammer-icon/mdi/round/chevron_right.svg\";\nimport { DetailsContext } from \"./DetailsContext\";\nimport Icon from \"../../Icon\";\n\nimport cx from \"classnames\";\nimport styles from \"../Details.module.scss\";\n\nexport type DetailsArrowProps = ComponentPropsWithoutRef<\"span\">;\n\n/** Rotating indicator that reflects the parent Details state. */\nexport const DetailsArrow = forwardRef<HTMLSpanElement, DetailsArrowProps>(\n  function DetailsArrow({ className: classNameProp, ...rest }, ref) {\n    const { isExpanded } = useContext(DetailsContext);\n\n    const className = cx(\n      styles.arrow,\n      { [styles[\"is-expanded\"]]: isExpanded },\n      classNameProp,\n    );\n\n    return (\n      <span className={className} ref={ref} {...rest}>\n        <Icon size=\"large\" svg={Arrow_right} />\n      </span>\n    );\n  },\n);\n","import {\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type MouseEventHandler,\n} from \"react\";\nimport type { DataTrackingId } from \"../../types\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DetailsArrow } from \"./internal/DetailsArrow\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\nexport type DetailsSummaryProps = ComponentPropsWithoutRef<\"button\"> &\n  DataTrackingId;\n\n/**\n * Disclosure button for Details.Content. A supplied `onClick` runs before the\n * internal expanded state toggles.\n */\nexport const DetailsSummary = forwardRef<\n  HTMLButtonElement,\n  DetailsSummaryProps\n>(function DetailsSummary(\n  { children, onClick: onClickProp, className: classNameProp, ...rest },\n  ref,\n) {\n  const { id, isExpanded, toggle } = useContext(DetailsContext);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (...args) => {\n    onClickProp?.(...args);\n    toggle();\n  };\n\n  const data = {\n    children: childrenToString(children),\n  };\n\n  const trackingId = useTrackingId({\n    name: \"DetailsSummary\",\n    data,\n    hasOverride: !!rest[\"data-tracking-id\"],\n  });\n\n  const className = cx(styles.summary, classNameProp);\n\n  return (\n    <button\n      data-tracking-id={trackingId}\n      data-anv=\"details-summary\"\n      aria-controls={id}\n      aria-expanded={isExpanded}\n      className={className}\n      onClick={handleClick}\n      ref={ref}\n      {...rest}\n    >\n      <DetailsArrow />\n      <span className={styles.label}>{children}</span>\n    </button>\n  );\n});\n","import { forwardRef, useContext, type ComponentPropsWithoutRef } from \"react\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\nexport type DetailsContentProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** Fixes the inner content height and makes it scrollable when needed. */\n  height?: string | number;\n  /** Constrains the inner content height and makes it scrollable when needed. */\n  maxHeight?: string | number;\n};\n\n/**\n * Disclosure panel associated with Details.Summary. It remains mounted while\n * its visibility follows the parent Details state.\n */\nexport const DetailsContent = forwardRef<HTMLDivElement, DetailsContentProps>(\n  function DetailsContent(\n    {\n      className: classNameProp,\n      children,\n      height,\n      maxHeight,\n      style: styleProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const { id, isExpanded } = useContext(DetailsContext);\n\n    const style = {\n      height,\n      maxHeight,\n      ...(height || maxHeight ? { overflow: \"auto\" } : {}),\n      ...styleProp,\n    };\n\n    return (\n      <div\n        data-anv=\"details-content\"\n        id={id}\n        className={cx(styles[\"content-wrapper\"], {\n          [styles.expanded]: isExpanded,\n        })}\n        ref={ref}\n      >\n        <div className={styles.content}>\n          <div className={classNameProp} style={style} {...rest}>\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n","import {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport type { LayoutUtilProps } from \"../../types\";\nimport { DetailsSummary } from \"./DetailsSummary\";\nimport { DetailsContent } from \"./DetailsContent\";\nimport { DetailsContext } from \"./internal/DetailsContext\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Details.module.scss\";\n\nexport type DetailsProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps & {\n    /**\n     * Controls whether the content is expanded. When set, internal toggles do\n     * not change the rendered state.\n     */\n    expanded?: boolean;\n    /** Initial state when `expanded` is omitted. Defaults to `false`. */\n    defaultExpanded?: boolean;\n  };\n\n/**\n * Disclosure container that coordinates its Summary and Content. Supports\n * controlled or uncontrolled expanded state.\n */\nexport const Details = Object.assign(\n  forwardRef<HTMLDivElement, DetailsProps>(function DetailsInner(props, ref) {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      children,\n      id: idProp,\n      expanded: expandedControlled,\n      defaultExpanded = false,\n      style,\n      className,\n      ...rest\n    } = componentProps;\n    const id = useId();\n    const [isExpanded, setIsOpen] = useState(defaultExpanded);\n\n    function expanded() {\n      setIsOpen(true);\n    }\n\n    function close() {\n      setIsOpen(false);\n    }\n\n    function toggle() {\n      setIsOpen((prevIsOpen: boolean) => !prevIsOpen);\n    }\n\n    const value = useMemo(\n      () => ({\n        id: idProp != null ? idProp : id,\n        isExpanded:\n          expandedControlled != null ? expandedControlled : isExpanded,\n        expanded,\n        close,\n        toggle,\n      }),\n      [id, idProp, isExpanded, expandedControlled],\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <DetailsContext.Provider value={value}>\n        <div\n          data-anv=\"details\"\n          ref={ref}\n          className={cx(styles.details, className)}\n          style={styleCombined}\n          {...rest}\n        >\n          {children}\n        </div>\n      </DetailsContext.Provider>\n    );\n  }),\n  {\n    /** Button that toggles the disclosure content. */\n    Summary: DetailsSummary,\n    /** Expandable content associated with the summary. */\n    Content: DetailsContent,\n  },\n);\nDetails.displayName = \"Details\";\n"],"names":["DetailsArrow","Arrow_right","DetailsSummary","DetailsContent"],"mappings":"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"}

package/dist/Details.css

@@ -1,17 +1,4 @@
-.anvil2 {._details_qxy6k_1 {
-  font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
-  font-size: 100%;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-  border-style: none;
-  border-width: 0;
-  border-color: transparent;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}._summary_qxy6k_16 {
+.anvil2 {._summary-row_c8l52_1 {
   --a2-internal-details-summary-background-color: var(
     --a2-mod-details-summary-background-color
   );
@@ -25,7 +12,6 @@
   --a2-mod-details-summary-background-color-active: var(--a2-details-summary-background-color-active, var(--a2-background-color-transparent-default-active, light-dark(rgba(139, 139, 139, 0.1607843137), rgba(255, 255, 255, 0.1607843137))));
   --a2-mod-details-summary-background-color-hover: var(--a2-details-summary-background-color-hover, var(--a2-background-color-transparent-default-hover, light-dark(rgba(139, 139, 139, 0.0784313725), rgba(255, 255, 255, 0.0784313725))));
   --a2-mod-details-summary-focus-ring-color: var(--a2-details-summary-focus-ring-color, var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))));
-  --a2-mod-details-summary-outline-width: 0;
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -35,7 +21,7 @@
   border-width: 0;
   border-color: transparent;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
   align-items: center;
   background-color: var(--a2-internal-details-summary-background-color);
   border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem));
@@ -44,50 +30,38 @@
   font-family: var(--a2-font-family-display, "Sofia Pro", SofiaPro, sans-serif);
   font-size: var(--a2-font-size-400, 1rem);
   font-style: normal;
-  font-weight: var(--a2-font-weight-bold, 700);
+  gap: 1rem;
   line-height: 1.25;
-  outline: var(--a2-mod-details-summary-outline-width) solid var(--a2-mod-details-summary-focus-ring-color);
-  outline-offset: var(--a2-size-half, 0.125rem);
   padding-block: var(--a2-size-2, 0.5rem);
   padding-inline: var(--a2-size-4, 1rem);
-  transition: outline var(--a2-mod-details-summary-transition-duration, var(--a2-duration-default, 200ms)) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
+  position: relative;
   width: 100%;
-}._summary_qxy6k_16[data-interactive=focus-visible], ._summary_qxy6k_16:focus-visible {
-  --a2-mod-details-summary-outline-width: var(--a2-size-half, 0.125rem);
-}._summary_qxy6k_16[data-interactive=hover], ._summary_qxy6k_16:hover {
+}._summary-row_c8l52_1:has(._summary_c8l52_1[data-interactive=hover]), ._summary-row_c8l52_1:has(._summary_c8l52_1:hover) {
   --a2-internal-details-summary-background-color: var(
     --a2-mod-details-summary-background-color-hover
   );
   --a2-internal-details-summary-foreground-color: var(
     --a2-mod-details-summary-foreground-color-hover
   );
-}._summary_qxy6k_16[data-interactive=active], ._summary_qxy6k_16:active {
+}._summary-row_c8l52_1:has(._summary_c8l52_1[data-interactive=active]), ._summary-row_c8l52_1:has(._summary_c8l52_1:active) {
   --a2-internal-details-summary-background-color: var(
     --a2-mod-details-summary-background-color-active
   );
   --a2-internal-details-summary-foreground-color: var(
     --a2-mod-details-summary-foreground-color-active
   );
-}@media (prefers-reduced-motion: reduce) {
-  ._summary_qxy6k_16 {
-    --a2-mod-details-summary-transition-duration: 0.01ms;
-  }
-}._label_qxy6k_83 {
-  flex: 1;
-  text-align: start;
-  text-box: trim-both cap alphabetic;
-}._arrow_qxy6k_89 {
+}._summary-lead_c8l52_57 {
+  align-items: center;
   display: flex;
-  inset-inline-start: var(--a2-size-quarter, 0.0625rem);
+  gap: var(--a2-size-1, 0.25rem);
+  min-width: 0;
+}._more-info_c8l52_64 {
+  display: flex;
+  flex: none;
   position: relative;
-  transition: all var(--a2-mod-details-arrow-transition-duration, var(--a2-duration-default, 200ms)) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
-}@media (prefers-reduced-motion: reduce) {
-  ._arrow_qxy6k_89 {
-    --a2-mod-details-arrow-transition-duration: 0.01ms;
-  }
-}._is-expanded_qxy6k_101 {
-  transform: rotate(90deg);
-}._content-wrapper_qxy6k_105 {
+  z-index: 1;
+}._summary_c8l52_1 {
+  --a2-mod-details-summary-outline-width: 0;
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -97,41 +71,91 @@
   border-width: 0;
   border-color: transparent;
   box-sizing: border-box;
-  display: grid;
-  grid-template-rows: 0fr;
-  opacity: 0;
-  transition-behavior: allow-discrete;
-  transition-duration: var(--a2-mod-details-content-wrapper-transition-duration, var(--a2-duration-default, 200ms));
-  transition-property: max-height, grid-template-rows, opacity;
-  transition-timing-function: var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
-  visibility: hidden;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem));
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  line-height: inherit;
+  min-width: 0;
+  outline: var(--a2-mod-details-summary-outline-width) solid var(--a2-mod-details-summary-focus-ring-color);
+  outline-offset: var(--a2-size-half, 0.125rem);
+  text-align: start;
+  transition: outline var(--a2-mod-details-summary-transition-duration, var(--a2-duration-default, 200ms)) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
+}._summary_c8l52_1::after {
+  content: "";
+  inset: 0;
+  position: absolute;
+}._summary_c8l52_1[data-interactive=focus-visible], ._summary_c8l52_1:focus-visible {
+  --a2-mod-details-summary-outline-width: var(--a2-size-half, 0.125rem);
 }@media (prefers-reduced-motion: reduce) {
-  ._content-wrapper_qxy6k_105 {
-    --a2-mod-details-content-wrapper-transition-duration: 0.01ms;
+  ._summary_c8l52_1 {
+    --a2-mod-details-summary-transition-duration: 0.01ms;
   }
-}._content_qxy6k_105 {
+}._label-cell_c8l52_112 {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}._cell_c8l52_119 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
-  color: var(--a2-details-content-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  color: inherit;
   margin: 0;
   padding: 0;
   border-style: none;
   border-width: 0;
   border-color: transparent;
   box-sizing: border-box;
-  display: block;
-  overflow: hidden;
-  padding-inline: var(--a2-size-6, 1.5rem);
-}._expanded_qxy6k_145 {
-  grid-template-rows: 1fr;
-  max-height: -moz-fit-content;
-  max-height: fit-content;
-  opacity: 1;
-  padding-block-end: var(--a2-size-2, 0.5rem);
-  padding-block-start: var(--a2-size-2, 0.5rem);
-  visibility: visible;
-}._expanded_qxy6k_145 > ._content_qxy6k_105 {
-  --a2-mod-details-content-padding-block-end: var(--a2-size-1, 0.25rem);
-  padding-block-end: var(--a2-mod-details-content-padding-block-end);
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  pointer-events: none;
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
+}._cell_c8l52_119:last-child {
+  justify-items: end;
+}._cell_c8l52_119 button,
+._cell_c8l52_119 a[href],
+._cell_c8l52_119 input,
+._cell_c8l52_119 select,
+._cell_c8l52_119 textarea,
+._cell_c8l52_119 [role=button],
+._cell_c8l52_119 [role=link],
+._cell_c8l52_119 [data-anv=menu-content] {
+  pointer-events: auto;
+}._label-cell_c8l52_112 > ._label_c8l52_112 {
+  font-family: var(--a2-font-family-display, "Sofia Pro", SofiaPro, sans-serif);
+  font-weight: var(--a2-font-weight-bold, 700);
+  line-height: 1.25;
+}._label_c8l52_112 mark {
+  padding-block-end: 0.125em;
+}._label_c8l52_112 {
+  flex: 1;
+  min-width: 0;
+  text-align: start;
+  text-box: trim-both cap alphabetic;
+}._arrow_c8l52_168 {
+  display: flex;
+  inset-inline-start: var(--a2-size-quarter, 0.0625rem);
+  position: relative;
+  transition: all var(--a2-mod-details-arrow-transition-duration, var(--a2-duration-default, 200ms)) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
+}@media (prefers-reduced-motion: reduce) {
+  ._arrow_c8l52_168 {
+    --a2-mod-details-arrow-transition-duration: 0.01ms;
+  }
+}._arrow-small_c8l52_180 ._arrow-icon_c8l52_180 {
+  --a2-mod-icon-font-size: calc(var(--a2-typography-paragraph-size-small, var(--a2-font-size-300, 0.875rem)) * 1.5);
+}._arrow-large_c8l52_184 ._arrow-icon_c8l52_180 {
+  --a2-mod-icon-font-size: calc(var(--a2-typography-paragraph-size-large, var(--a2-font-size-500, 1.25rem)) * 1.5);
+}._arrow-xlarge_c8l52_188 ._arrow-icon_c8l52_180 {
+  --a2-mod-icon-font-size: calc(var(--a2-typography-paragraph-size-xlarge, var(--a2-font-size-600, 1.5rem)) * 1.5);
+}._is-expanded_c8l52_192 {
+  transform: rotate(90deg);
 }
 }

package/dist/Details.js

@@ -1,2 +1,2 @@
-export { D as Details, D as default } from './Details-BxqP-5vp.js';
+export { D as Details, D as default } from './Details-B2F3auTX.js';
 //# sourceMappingURL=Details.js.map