@fairgarden/design 0.1.0-alpha.0

package/components/Chip/Chip.js

@@ -0,0 +1,94 @@
+'use client';
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Icon, iconHost } from '../Icon';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './chip.module.css';
+/*
+ * Chip (§10.11): the removable chip, a chosen value with its × in its own
+ * hit area. Shared by the Combobox's multiple selection and by filter UIs
+ * that list the active filters; the filter chip that toggles is §9.4's
+ * Toggle `chip` variant, not this component.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: chip.module.css; CVA function `chip`.
+ * - Axes: `primary`, `secondary` → scales module classes (`secondary`
+ *   unused: the chip draws every part from the primary).
+ * - Compound variants: none. Defaults: none; color axes: none [D133].
+ * - Color fallback: inherits the scope (inside a Combobox, the Combobox's
+ *   scales).
+ * - States: `remove` (a Base UI Button) `:hover` (not disabled) → the ×
+ *   takes the next tier's weight (§10.1 icon states, through `iconHost`);
+ *   `:active` → the inverse pair on the × cell; `:focus-visible` → its own
+ *   ring; `data-disabled` → `--role-muted` label and ×, and the
+ *   `line-dotted-fine` chip edge drawn by `edge` / `edgeLine` [D16].
+ * - Parts: base (with `removable` while it carries its ×), label, remove;
+ *   `edge` / `edgeLine` draw the dotted disabled edge as true dots
+ *   [D36, D68].
+ * - Scope: none. Container: none; inherits its context. A set wraps; it
+ *   scrolls sideways only inside a `rail` Scroll Area (§10.19).
+ */
+export const chip = cva(styles.base, {
+    variants: {
+        // Computed from `onRemove`, never a prop: the × cell closes the end.
+        removable: {
+            true: styles.removable,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * The module's part classes, for a composed component that renders the
+ * chip on its own Base UI parts (the Combobox's `Chip` and `ChipRemove`)
+ * and leaves the look to this module (§1.11.1).
+ */
+export const chipParts = {
+    base: styles.base,
+    label: styles.label,
+    remove: styles.remove,
+    edge: styles.edge,
+    edgeLine: styles.edgeLine,
+};
+/**
+ * A removable chip: `--size-px-7` tall, a `--ds-stroke-1-5` `--role-rule`
+ * edge, the label in `type-body-ui` and the × (`close`, inline tier) in a
+ * `--ds-size-hit` target with its own focus ring. It prints as the word.
+ */
+export function Chip(props) {
+    const { render, ref, className, children, onRemove, removeLabel, removeRender, disabled, primary, secondary, ...rest } = props;
+    const scope = useScopeAttributes();
+    const accessibleName = removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove');
+    const remove = useRender({
+        enabled: onRemove != null,
+        render: removeRender ?? React.createElement(BaseButton, null),
+        props: {
+            className: `${styles.remove} ${iconHost}`,
+            'aria-label': accessibleName,
+            disabled,
+            onClick: onRemove,
+            children: React.createElement(Icon, { name: "close", weight: "interactive" }),
+        },
+    });
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: chip({ removable: onRemove != null, primary, secondary, className }),
+            'data-disabled': disabled ? '' : undefined,
+            children: (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: styles.label }, children),
+                remove,
+                React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+                    React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })))),
+        }, rest),
+    });
+}
+//# sourceMappingURL=Chip.js.map

package/components/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"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"}

package/components/Chip/chip.module.css

@@ -0,0 +1,171 @@
+/*
+ * Chip (§10.11): the removable chip. CVA function `chip`. It matches the
+ * Combobox's chips (combobox.module.css) part for part, so the two read as
+ * one component.
+ * Color roles (§10.11): edge --role-rule at --ds-stroke-1-5; label and ×
+ * --primary12; × pressed: the inverse pair; disabled: --role-muted label
+ * and ×, `line-dotted-fine` edge in --role-disabled-edge (--role-rule, or
+ * --primary12 on one-ink grounds [D85]). Colors are role variables only;
+ * local custom properties carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* --size-px-7 tall, --size-px-3 start padding; the × cell closes the end. */
+  .base {
+    --chip-height: var(--size-px-7);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    block-size: var(--chip-height);
+    padding-inline: var(--size-px-3);
+    border: var(--ds-stroke-1-5) solid var(--role-rule);
+    border-radius: var(--radius-round);
+    color: var(--primary12);
+    vertical-align: middle;
+  }
+
+  /* With its ×, the start padding stays and the cell takes the end. */
+  .removable {
+    padding-inline-end: 0;
+  }
+
+  .label {
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* The × in its own cell, full chip height, with a --ds-size-hit target. */
+  .remove {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: var(--chip-height);
+    block-size: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-round);
+    background: none;
+    color: var(--primary12);
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .remove::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--ds-size-hit);
+    block-size: var(--ds-size-hit);
+    translate: -50% -50%;
+  }
+
+  /* Disabled edge host: covers the border box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot-fine) / 2);
+    inset-inline-start: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--chip-height) / 2 - var(--ds-dot-fine) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .remove {
+      transition-property: color, background-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer states {
+  /* The × takes its own ring, inside the cell (Combobox parity). */
+  .remove:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Hover: the glyph's next tier weight comes from iconHost (§10.1). Forced colors add an outline [D181]. */
+  @media (forced-colors: active) {
+    .remove:not([data-disabled]):hover {
+      outline: var(--border-size-2) solid currentColor;
+      outline-offset: calc(-1 * var(--border-size-2));
+    }
+  }
+
+  /* Pressed: the × cell takes the inverse pair (§10.1 icon states). */
+  .remove:not([data-disabled]):active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /* Disabled: fill none, muted ink, the dotted edge; the solid edge's width moves into the padding. */
+  .base[data-disabled] {
+    padding-inline-start: calc(var(--size-px-3) + var(--ds-stroke-1-5));
+    border-style: none;
+    color: var(--role-muted);
+  }
+
+  .base[data-disabled] .edge {
+    display: block;
+  }
+
+  .remove[data-disabled] {
+    color: var(--role-muted);
+    cursor: default;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Removable chips print as words (§10.11). */
+    .base {
+      block-size: auto;
+      padding: 0;
+      border: 0;
+    }
+
+    .label {
+      overflow: visible;
+      white-space: normal;
+    }
+
+    .remove,
+    .edge {
+      display: none;
+    }
+  }
+}

package/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chip';
+//# sourceMappingURL=index.d.ts.map

package/components/Chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/components/Chip/index.js

@@ -0,0 +1,2 @@
+export * from './Chip';
+//# sourceMappingURL=index.js.map

package/components/Chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { type VariantProps } from 'class-variance-authority';
+export declare const collapsible: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CollapsibleVariants = VariantProps<typeof collapsible>;
+/** The disclosure glyph's two tiers (§10.13). */
+export declare const disclosureGlyph: (props?: ({
+    size?: "row" | "chrome" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Add to an icon-only control whose only content is the disclosure glyph
+ * (the staircase or section-bar toggle): hover and press then swap the
+ * glyph to the next tier's weight (§10.1 icon states) [D181]. Trigger rows
+ * (Accordion, FAQ, Collapsible) never take it: their glyph does not change
+ * on hover [D109].
+ */
+export declare const disclosureGlyphHost: string;
+/** Props for DisclosureGlyph: SVG props (without `children`) and the tier. */
+export type DisclosureGlyphProps = Omit<React.ComponentPropsWithRef<'svg'>, 'children'> & {
+    /**
+     * `row` (default): `--size-px-4` (20 px) at `--ds-stroke-1-5`, for trigger
+     * rows (Accordion, FAQ). `chrome`: `--size-px-3` (16 px) at
+     * `--ds-stroke-1-25`, for bars, drawer groups and an inline "Show more".
+     */
+    size?: VariantProps<typeof disclosureGlyph>['size'];
+};
+/**
+ * LTA's expand/collapse glyph [D109]: two thin arrows pointing outward from
+ * a short center hairline when collapsed, inward when expanded (§6.10). It
+ * reads the state from the nearest Base UI trigger's `data-panel-open`, so
+ * place it inside an Accordion or Collapsible trigger. The direction swaps
+ * instantly and never rotates; collapsed it is --role-muted, expanded
+ * --primary12. Decorative: the trigger carries the state (`aria-expanded`).
+ */
+export declare function DisclosureGlyph({ size, className, ...rest }: DisclosureGlyphProps): React.JSX.Element;
+/** Props for Collapsible: Base UI Collapsible Root props plus the color axes. */
+export type CollapsibleProps = BaseCollapsible.Root.Props & {
+    /**
+     * Primary Radix scale: label, glyph and panel text. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: CollapsibleVariants['primary'];
+    /** Secondary Radix scale, accepted for the shared contract; no part uses it. */
+    secondary?: CollapsibleVariants['secondary'];
+};
+/**
+ * One in-place disclosure (§10.13): a `CollapsibleTrigger` (the disclosure
+ * glyph at the inline tier plus a label) and a `CollapsiblePanel`. Use it for
+ * "Show more" on truncated lists and optional detail; never hide content a
+ * task depends on. Every panel prints expanded and the trigger is hidden.
+ */
+export declare function Collapsible(props: CollapsibleProps): React.JSX.Element;
+/** Props for CollapsibleTrigger: Base UI Collapsible Trigger props plus the open label. */
+export type CollapsibleTriggerProps = BaseCollapsible.Trigger.Props & {
+    /**
+     * The label while the panel is open, e.g. "Show less". Omitted, the
+     * children stay. Author it in sentence case.
+     */
+    openLabel?: React.ReactNode;
+};
+/**
+ * The trigger: the disclosure glyph (16 px, `chrome` tier) then the label,
+ * e.g. "Show 12 more". The whole trigger is the ≥ 44 px target; the glyph
+ * alone never is.
+ */
+export declare function CollapsibleTrigger(props: CollapsibleTriggerProps): React.JSX.Element;
+/** Props for CollapsiblePanel: Base UI Collapsible Panel props. */
+export type CollapsiblePanelProps = BaseCollapsible.Panel.Props;
+/**
+ * The panel. It stays in the DOM while closed (`hiddenUntilFound`, default
+ * `true`), so find-in-page reaches it and print shows it expanded. It opens
+ * with a clip reveal at `--ds-duration-disclosure`, instant under reduced
+ * motion.
+ */
+export declare function CollapsiblePanel(props: CollapsiblePanelProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Collapsible.d.ts.map

package/components/Collapsible/Collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/components/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA8BjE,eAAO,MAAM,WAAW;;;8EAMtB,CAAA;AAEF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAA;AAE3D,iDAAiD;AACjD,eAAO,MAAM,eAAe;;8EAU1B,CAAA;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAyB,CAAA;AAE3D,8EAA8E;AAC9E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxF;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;CACpD,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,qBAuBjF;AAED,iFAAiF;AACjF,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACxC,gFAAgF;IAChF,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAA;CAC7C,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAYlD;AAED,2FAA2F;AAC3F,MAAM,MAAM,uBAAuB,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,CAAA;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAgBhE;AAED,mEAAmE;AACnE,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAA;AAE/D;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAW5D"}

package/components/Collapsible/Collapsible.js

@@ -0,0 +1,112 @@
+'use client';
+import * as React from 'react';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { cva } from 'class-variance-authority';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './collapsible.module.css';
+/*
+ * Collapsible (§10.13): one in-place disclosure, "Show 12 more" / "Show less".
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: collapsible.module.css; CVA function `collapsible`.
+ * - Axes: `primary`, `secondary` → scales module classes (`secondary` unused).
+ * - Compound variants: none. Defaults: none; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: trigger `data-panel-open` → the disclosure glyph turns inward and
+ *   takes --primary12, and `openLabel` replaces the label; `:hover` (not
+ *   disabled) → the bare-text underline on the label (--role-accent at
+ *   --border-size-2, offset --size-px-1), the glyph unchanged [D109, D181];
+ *   `:focus-visible` → ring;
+ *   `data-disabled` → label and glyph --role-muted. Panel `data-starting-style`
+ *   / `data-ending-style` → the clip reveal at --ds-duration-disclosure,
+ *   instant under --motionNotOK, never opacity [D91].
+ * - Parts: base, trigger, glyph, label, panel (+ `content`, the padded inner box).
+ * - Scope: none. Container: none; inherits its context.
+ *
+ * The disclosure glyph (DisclosureGlyph) is the custom LTA glyph, the one
+ * indicator for anything that expands in place [D109]; it is a §1.5.12 /
+ * §6.10 exception to Material Symbols and is never `expand_more`.
+ */
+export const collapsible = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** The disclosure glyph's two tiers (§10.13). */
+export const disclosureGlyph = cva(styles.glyph, {
+    variants: {
+        size: {
+            row: styles.glyphRow,
+            chrome: styles.glyphChrome,
+        },
+    },
+    defaultVariants: {
+        size: 'row',
+    },
+});
+/**
+ * Add to an icon-only control whose only content is the disclosure glyph
+ * (the staircase or section-bar toggle): hover and press then swap the
+ * glyph to the next tier's weight (§10.1 icon states) [D181]. Trigger rows
+ * (Accordion, FAQ, Collapsible) never take it: their glyph does not change
+ * on hover [D109].
+ */
+export const disclosureGlyphHost = styles.glyphHost;
+/**
+ * LTA's expand/collapse glyph [D109]: two thin arrows pointing outward from
+ * a short center hairline when collapsed, inward when expanded (§6.10). It
+ * reads the state from the nearest Base UI trigger's `data-panel-open`, so
+ * place it inside an Accordion or Collapsible trigger. The direction swaps
+ * instantly and never rotates; collapsed it is --role-muted, expanded
+ * --primary12. Decorative: the trigger carries the state (`aria-expanded`).
+ */
+export function DisclosureGlyph({ size, className, ...rest }) {
+    return (React.createElement("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", ...rest, className: disclosureGlyph({ size, className }) },
+        React.createElement("g", { className: styles.glyphOut },
+            React.createElement("path", { d: "M5 10h10", vectorEffect: "non-scaling-stroke" }),
+            React.createElement("path", { d: "M10 7.5v-5M8 5.96l2-3.46 2 3.46", vectorEffect: "non-scaling-stroke" }),
+            React.createElement("path", { d: "M10 12.5v5M8 14.04l2 3.46 2-3.46", vectorEffect: "non-scaling-stroke" })),
+        React.createElement("g", { className: styles.glyphIn },
+            React.createElement("path", { d: "M5 10h10", vectorEffect: "non-scaling-stroke" }),
+            React.createElement("path", { d: "M10 2.5v5M8 4.04l2 3.46 2-3.46", vectorEffect: "non-scaling-stroke" }),
+            React.createElement("path", { d: "M10 17.5v-5M8 15.96l2-3.46 2 3.46", vectorEffect: "non-scaling-stroke" }))));
+}
+/**
+ * One in-place disclosure (§10.13): a `CollapsibleTrigger` (the disclosure
+ * glyph at the inline tier plus a label) and a `CollapsiblePanel`. Use it for
+ * "Show more" on truncated lists and optional detail; never hide content a
+ * task depends on. Every panel prints expanded and the trigger is hidden.
+ */
+export function Collapsible(props) {
+    const { primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseCollapsible.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => collapsible({ primary, secondary, className: extra })) }));
+}
+/**
+ * The trigger: the disclosure glyph (16 px, `chrome` tier) then the label,
+ * e.g. "Show 12 more". The whole trigger is the ≥ 44 px target; the glyph
+ * alone never is.
+ */
+export function CollapsibleTrigger(props) {
+    const { openLabel, className, children, ...rest } = props;
+    return (React.createElement(BaseCollapsible.Trigger, { ...rest, className: resolveClassName(className, (extra) => cx(styles.trigger, extra)) },
+        React.createElement(DisclosureGlyph, { size: "chrome" }),
+        React.createElement("span", { className: openLabel == null ? styles.label : `${styles.label} ${styles.closedLabel}` }, children),
+        openLabel == null ? null : (React.createElement("span", { className: `${styles.label} ${styles.openLabel}` }, openLabel))));
+}
+/**
+ * The panel. It stays in the DOM while closed (`hiddenUntilFound`, default
+ * `true`), so find-in-page reaches it and print shows it expanded. It opens
+ * with a clip reveal at `--ds-duration-disclosure`, instant under reduced
+ * motion.
+ */
+export function CollapsiblePanel(props) {
+    const { className, children, hiddenUntilFound = true, ...rest } = props;
+    return (React.createElement(BaseCollapsible.Panel, { ...rest, hiddenUntilFound: hiddenUntilFound, className: resolveClassName(className, (extra) => cx(styles.panel, extra)) },
+        React.createElement("div", { className: styles.content }, children)));
+}
+//# sourceMappingURL=Collapsible.js.map

package/components/Collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../src/components/Collapsible/Collapsible.tsx"],"names":[],"mappings":"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"}