@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/forms/search/search.module.css

@@ -0,0 +1,318 @@
+/*
+ * Search (§9.10). CVA function `search`. The module styles only Search's
+ * own parts: `base` (the search landmark), `magnifier`, `rules` (the
+ * rule-bounded field, with `rulesEdge` / `rulesEdgeLine` for its dotted
+ * disabled rules), `popup`, `list`, `group`, `groupLabel`, `item`,
+ * `itemIcon`, `itemText`, `match`, `secondaryName`, `seeAll`, `status`,
+ * `bar` (docked); `positioner` places the popup on --layer-3. The boxed
+ * field is the Input's box (§10.1), the submit a `solid` Button butted to
+ * it, and the clear and header trigger icon-only Buttons: their parts are
+ * left to their own modules (§1.11.1). Colors are role variables only.
+ * The popup opens and closes by the outline morph (it answers
+ * `data-outline-morph`, foundations/outline-morph) or at once [D205].
+ */
+
+/* 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. */
+.item {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.groupLabel {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.secondaryName {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.status {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.rulesEdgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* The landmark: in-page filters run full width at base and --size-sm from --md-n-above. */
+  .base {
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .form {
+    display: block;
+    margin: 0;
+  }
+
+  /* The magnifier: Material Symbols Rounded `search`, inline tier, decorative, --primary12 [D166]. */
+  .magnifier {
+    flex: none;
+    color: inherit;
+  }
+
+  /*
+   * Rule-bounded: no box; the field sits between two --border-size-2
+   * --primary12 rules the width of the container.
+   */
+  .rules {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: var(--size-px-8);
+    padding-inline: var(--size-px-2-5);
+    border-block: var(--border-size-2) solid var(--primary12);
+    color: var(--primary12);
+    cursor: text;
+  }
+
+  .rulesEdge {
+    display: none;
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .rulesEdgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+  }
+
+  .positioner {
+    z-index: var(--layer-3);
+    outline: 0;
+  }
+
+  /* The §9.1 panel at field width: the white scope's face, the --border-size-2 --primary12 frame. */
+  .popup {
+    box-sizing: border-box;
+    inline-size: var(--anchor-width);
+    max-inline-size: calc(100vw - 2 * var(--fgd-space-margin));
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-2-25);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(0);
+    outline: 0;
+  }
+
+  /* 8 rows visible, then it scrolls. */
+  .list {
+    box-sizing: border-box;
+    max-block-size: min(
+      var(--available-height, 100vh),
+      calc(8 * var(--fgd-size-hit) + 2 * var(--size-px-1))
+    );
+    padding: var(--size-px-1);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--size-px-1);
+    outline: 0;
+  }
+
+  .list:empty {
+    padding: 0;
+  }
+
+  /* Groups: a type-label head, and a --border-size-1 --role-rule rule above every group but the first. */
+  .group {
+    display: block;
+  }
+
+  .group + .group {
+    margin-block-start: var(--size-px-1);
+    padding-block-start: var(--size-px-1);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .groupLabel {
+    padding-block: var(--size-px-2) var(--size-px-1);
+    padding-inline: var(--size-px-3);
+    color: var(--role-muted);
+  }
+
+  /* Suggestion rows: --fgd-size-hit, type-body-ui; an optional type icon; highlight radius 8 − 4 [D40]. */
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: var(--fgd-size-hit);
+    padding-inline: var(--size-px-3);
+    border-radius: calc(var(--radius-2-25) - var(--size-px-1));
+    color: var(--primary12);
+    text-decoration-line: none;
+    cursor: default;
+    outline: 0;
+    user-select: none;
+  }
+
+  .item::before {
+    content: '';
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: var(--border-size-2-25) solid var(--primary12);
+  }
+
+  .itemIcon {
+    flex: none;
+    color: var(--primary12);
+  }
+
+  .itemText {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  /* Matches are marked by weight, not color, which survives every ground and B/W. */
+  .match {
+    background: none;
+    color: var(--primary12);
+    font-weight: var(--font-weight-7);
+  }
+
+  /* The secondary name: italic type-caption in --role-muted. */
+  .secondaryName {
+    font-style: italic;
+  }
+
+  /* "See all": a standalone link row (§9.3), set off by the group rule. */
+  .seeAll {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--fgd-size-hit);
+    padding-inline: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* Status: "12 results", or a plain-word "No results" with a next step; never a red error (P10). */
+  .status {
+    color: var(--primary12);
+  }
+
+  .status:not(:empty) {
+    padding: var(--size-px-2) var(--size-px-3);
+  }
+
+  /* Docked: a full-width opaque bar at least --fgd-size-hit tall, a --border-size-1 rule on its content side. */
+  .bar {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    padding-block: var(--size-px-2);
+    padding-inline: var(--fgd-space-margin);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+    background-color: var(--role-ground);
+  }
+
+  .bar > * {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .rulesEdgeLine {
+      stroke: currentColor;
+    }
+  }
+
+}
+
+@layer variants {
+  /* Boxed (default): the Input's field box with the butted submit. */
+  .boxed {
+    display: block;
+  }
+
+  .ruled {
+    display: block;
+  }
+
+  /* In-page filters: --size-sm from --md-n-above. */
+  @media (min-width: 768px) {
+    .boxed,
+    .ruled {
+      max-inline-size: var(--size-sm);
+    }
+  }
+
+  /* Docked: the top edge's one bar while open, on --layer-2, never stacked under another [D89]. */
+  .docked {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--layer-2);
+  }
+}
+
+@layer states {
+  /* Focus: the ring on any focus of the input, outside the rules [D90]. */
+  .rules[data-focused] {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Disabled: the rules become `line-dotted-fine` in --role-rule; inks --role-muted [D16]. */
+  .rules[data-disabled] {
+    border-block-style: none;
+    padding-block: var(--border-size-2);
+    color: var(--role-muted);
+  }
+
+  .rules[data-disabled] .rulesEdge {
+    display: block;
+  }
+
+  /* Highlighted: --primary4 plus a --border-size-2-25 start bar, as Menu [D145]. */
+  .item[data-highlighted] {
+    background-color: var(--primary4);
+  }
+
+  .item[data-highlighted]::before {
+    display: block;
+  }
+
+  .item[data-disabled] {
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .item[data-disabled]::before {
+    display: none;
+  }
+
+  /*
+   * Outline morph [D204]: while the overlay draws the frame, the popup's own
+   * edge takes its face and its own transitions stay off. Without the morph
+   * the popup opens and closes at once (no reveal of its own) [D205].
+   */
+  .popup[data-outline-morph] {
+    border-color: var(--primary1);
+    transition: none;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Fields, triggers and popups are interaction only; a results page prints its heading and hits. */
+    .base,
+    .positioner {
+      display: none;
+    }
+  }
+}

package/forms/select/Select.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { type VariantProps } from 'class-variance-authority';
+export declare const select: (props?: ({
+    variant?: "outline" | "underline" | null | undefined;
+    plate?: boolean | null | undefined;
+    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 SelectVariants = VariantProps<typeof select>;
+/** One option: its value, its label (the words the trigger shows) and an optional swatch. */
+export type SelectOption<Value = string> = {
+    value: Value;
+    /** The option's words; with a swatch they name the color. */
+    label: string;
+    /**
+     * The product's color, supplied as data like a photograph (a CSS color
+     * string); drawn as a ringed disc before the label. Always name the color
+     * in `label`.
+     */
+    swatch?: string;
+    disabled?: boolean;
+};
+/** A titled group of options; groups are divided by the popup's separator. */
+export type SelectOptionGroup<Value = string> = {
+    /** The group label, set in `type-label` caps. */
+    label: string;
+    items: readonly SelectOption<Value>[];
+};
+type SelectItems<Value> = readonly SelectOption<Value>[] | readonly SelectOptionGroup<Value>[];
+type RootProps<Value> = Omit<BaseSelect.Root.Props<Value, false>, 'items' | 'children' | 'multiple'>;
+/** Props for Select: Base UI Select.Root props plus the options, variant and color axes. */
+export type SelectProps<Value = string> = RootProps<Value> & {
+    /**
+     * The options (or titled groups). Rendered as items unless `children`
+     * are given; always used to show the chosen option's label.
+     */
+    items?: SelectItems<Value>;
+    /** Custom list content (`SelectItem`, `SelectGroup`, `SelectSeparator`) instead of `items`. */
+    children?: React.ReactNode;
+    /** Shown in --role-muted while nothing is chosen; end it with "…". */
+    placeholder?: string;
+    /** Class names for the trigger (the root part), added after the module's own. */
+    className?: string;
+    /** Names the trigger when no visible label exists. Prefer a `FieldLabel`. */
+    'aria-label'?: string;
+    /**
+     * Primary Radix scale: trigger edge, value, chevron and focus ring. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: SelectVariants['primary'];
+    /**
+     * Secondary Radix scale: the underline variant's underline; the danger
+     * scale while invalid.
+     */
+    secondary?: SelectVariants['secondary'];
+    /**
+     * The outline morph: the focus ring grows into the popup's frame as it
+     * opens and shrinks back as it closes; opened by pointer (no ring), the
+     * field edge grows instead. Instant under reduced motion; off in forced
+     * colors and print, and wherever `--fgd-outline-morph: none` applies.
+     * Default `true`; `false` opens and closes the popup at once.
+     */
+    morph?: boolean;
+} & ({
+    /**
+     * `outline` (default) is the boxed field; `underline` is the trigger
+     * over a --role-accent underline that hugs its content.
+     */
+    variant?: 'outline';
+    /** The trigger's face becomes a nested `white` scope; patterned grounds only (§10.1). */
+    plate?: boolean;
+} | {
+    variant: 'underline';
+    plate?: false;
+});
+/**
+ * A Base UI Select inside a `Field` (label it with
+ * `<FieldLabel nativeLabel={false}>`). The popup opens below the trigger,
+ * never on hover, and is never a sheet; use Combobox for long or
+ * searchable lists and Radio for 2–4 visible options.
+ */
+export declare function Select<Value = string>(props: SelectProps<Value>): React.JSX.Element;
+/** Props for SelectItem: Base UI Select.Item props plus an optional swatch. */
+export type SelectItemProps = Omit<BaseSelect.Item.Props, 'className'> & {
+    /** Extra class names, added after the module's own. */
+    className?: string;
+    /** The product's color (content) as a ringed disc before the label. */
+    swatch?: string;
+};
+/**
+ * One option: a `--fgd-size-hit` row. Highlighted rows take the `--primary4`
+ * soft fill and the `--border-size-2-25` start bar; the chosen row a leading ✓
+ * and `--font-weight-6` [D145].
+ */
+export declare function SelectItem(props: SelectItemProps): React.JSX.Element;
+/** Props for SelectGroup: Base UI Select.Group props plus its label. */
+export type SelectGroupProps = Omit<BaseSelect.Group.Props, 'className'> & {
+    /** The group label, in `type-label` caps and --role-muted. */
+    label: React.ReactNode;
+    className?: string;
+};
+/** A titled group of items. */
+export declare function SelectGroup(props: SelectGroupProps): React.JSX.Element;
+/** Props for SelectSeparator: Base UI Select.Separator props. */
+export type SelectSeparatorProps = Omit<BaseSelect.Separator.Props, 'className'> & {
+    className?: string;
+};
+/** The one popup group separator: `--border-size-1` in `--role-rule`. */
+export declare function SelectSeparator(props: SelectSeparatorProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/forms/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/forms/select/Select.tsx"],"names":[],"mappings":"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"}

package/forms/select/Select.js

@@ -0,0 +1,169 @@
+'use client';
+import * as React from 'react';
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { cva } from 'class-variance-authority';
+import { dangerScale, useFieldInvalid } from '../field';
+import { Ground } from '../../foundations/ground';
+import { Icon, iconHost } from '../../foundations/icon';
+import { OutlineMorphFrame } from '../../foundations/outline-morph';
+import { useOutlineMorphRoot } from '../../foundations/outline-morph/useOutlineMorphRoot';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { OverlayScope, overlayAttributes, overlayScaleClassName } from '../../utils/overlay';
+import styles from './select.module.css';
+/*
+ * Select (§10.5): one choice from a known list of about 5–15 options.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: select.module.css; CVA function `select`.
+ * - Axes: `variant` → outline (boxed trigger), underline (trigger text over
+ *   a --border-size-2 --role-accent underline); `plate` → plate;
+ *   `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Excluded in the types: `plate` with underline.
+ * - Defaults: variant outline, plate false; color axes none.
+ * - Color fallback: trigger inherits the scope; while the Field is invalid,
+ *   its danger scale (§10.2). Popup: the `white` preset's defaults; only
+ *   props passed to the popup would apply inside it (§10.1).
+ * - States: trigger `:hover` (not disabled) → boxed edge → --primary12
+ *   [D140], underline --role-accent → --primary12 at the same weight
+ *   [D181]; `data-popup-open` → boxed edge
+ *   --primary12, underline --border-size-2-25, chevron rotated; `:focus-visible`
+ *   → ring; `data-disabled` → dotted edge, --role-muted; `data-invalid` →
+ *   error edge or danger underline. Item `data-highlighted` → --primary4
+ *   plus the --border-size-2-25 start bar [D145]; `data-selected` → leading ✓
+ *   plus --font-weight-6; `data-disabled` → --role-muted, never
+ *   highlighted. Popup: the outline morph or nothing; it opens and closes
+ *   at once [D205].
+ * - Parts: base (the trigger), value, icon, swatch, popup, list, item,
+ *   itemText, itemIndicator, group, groupLabel, separator.
+ * - Scope: `popup` renders in its Base UI Portal and declares a nested
+ *   `white` page scope; it writes no `data-theme`, and its edge is the
+ *   [D92] overlay frame [D139, D156]. `plate` → the trigger is a nested
+ *   `white` Ground.
+ * - Container: none; inherits its context.
+ * - Outline morph [D204]: on by default (`morph={false}` opts out), the
+ *   trigger's focus ring (or, opened by pointer, its edge) grows into the
+ *   popup's frame and back (foundations/outline-morph). The frame renders
+ *   beside the popup in its Positioner; while it draws, the popup carries
+ *   `data-outline-morph` (its edge takes the face). No trigger style changes.
+ */
+export const select = cva(styles.base, {
+    variants: {
+        variant: {
+            outline: styles.outline,
+            underline: styles.underline,
+        },
+        plate: {
+            true: styles.plate,
+        },
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        variant: 'outline',
+        plate: false,
+    },
+});
+function isGroups(items) {
+    return items.length > 0 && 'items' in items[0];
+}
+function flatten(items) {
+    if (!items)
+        return [];
+    return isGroups(items) ? items.flatMap((group) => group.items) : items;
+}
+/** The ringed disc of a swatch option; the color is content, not a role. */
+function Swatch({ color }) {
+    return (React.createElement("svg", { className: styles.swatch, viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false" },
+        React.createElement("circle", { className: styles.swatchRing, cx: "6", cy: "6", r: "5.5", fill: color })));
+}
+/**
+ * A Base UI Select inside a `Field` (label it with
+ * `<FieldLabel nativeLabel={false}>`). The popup opens below the trigger,
+ * never on hover, and is never a sheet; use Combobox for long or
+ * searchable lists and Radio for 2–4 visible options.
+ */
+export function Select(props) {
+    const { items, children, placeholder, variant, plate, primary, secondary, className, 'aria-label': ariaLabel, morph = true, onOpenChange, ...rootProps } = props;
+    const scope = useScopeAttributes();
+    const invalid = useFieldInvalid();
+    const resolvedSecondary = invalid ? dangerScale : secondary;
+    const options = flatten(items);
+    const hasSwatch = options.some((option) => option.swatch);
+    // The outline morph follows the root's open state [D204].
+    const outline = useOutlineMorphRoot({
+        open: rootProps.open,
+        defaultOpen: rootProps.defaultOpen,
+        onOpenChange,
+        morph,
+    });
+    const triggerClassName = select({
+        variant,
+        plate,
+        primary: plate ? undefined : primary,
+        secondary: plate ? undefined : resolvedSecondary,
+        // The trigger hosts the chevron's hover weight (§10.1 icon states).
+        className: className ? `${iconHost} ${className}` : iconHost,
+    });
+    const renderValue = hasSwatch
+        ? (value) => {
+            const option = options.find((candidate) => Object.is(candidate.value, value));
+            if (!option)
+                return placeholder ?? null;
+            return (React.createElement(React.Fragment, null,
+                option.swatch ? React.createElement(Swatch, { color: option.swatch }) : null,
+                option.label));
+        }
+        : undefined;
+    return (React.createElement(BaseSelect.Root, { ...rootProps, onOpenChange: outline.onOpenChange, items: items },
+        React.createElement(BaseSelect.Trigger, { ref: outline.refs?.sourceRef, ...(plate ? null : scope), "aria-label": ariaLabel, className: triggerClassName, render: plate ? (React.createElement(Ground, { preset: "white", kind: "face", primary: primary ?? undefined, secondary: resolvedSecondary ?? undefined, render: React.createElement("button", { type: "button" }) })) : undefined },
+            React.createElement(BaseSelect.Value, { className: styles.value, placeholder: placeholder }, renderValue),
+            React.createElement(BaseSelect.Icon, { className: styles.icon },
+                React.createElement(Icon, { name: "expand_more", weight: "interactive" })),
+            React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" }, variant === 'underline' ? (React.createElement("line", { className: styles.edgeLine, x1: "0", y1: "100%", x2: "100%", y2: "100%" })) : (React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })))),
+        React.createElement(BaseSelect.Portal, null,
+            React.createElement(BaseSelect.Positioner, { className: styles.positioner, alignItemWithTrigger: false, side: "bottom", align: variant === 'underline' ? 'end' : 'start', sideOffset: 8, collisionPadding: 16 },
+                React.createElement(BaseSelect.Popup, { ref: outline.refs?.targetRef, ...overlayAttributes, className: [styles.popup, overlayScaleClassName].join(' ') },
+                    React.createElement(OverlayScope, null,
+                        React.createElement(BaseSelect.List, { className: styles.list }, children ?? (items ? renderItems(items) : null)))),
+                outline.refs ? React.createElement(OutlineMorphFrame, { ref: outline.refs.frameRef }) : null))));
+}
+function renderOption(option, index) {
+    return (React.createElement(SelectItem, { key: `${String(option.value)}-${index}`, value: option.value, label: option.label, disabled: option.disabled, swatch: option.swatch }, option.label));
+}
+function renderItems(items) {
+    if (!isGroups(items))
+        return items.map(renderOption);
+    return items.map((group, index) => (React.createElement(React.Fragment, { key: group.label },
+        index > 0 ? React.createElement(SelectSeparator, null) : null,
+        React.createElement(SelectGroup, { label: group.label }, group.items.map(renderOption)))));
+}
+/**
+ * One option: a `--fgd-size-hit` row. Highlighted rows take the `--primary4`
+ * soft fill and the `--border-size-2-25` start bar; the chosen row a leading ✓
+ * and `--font-weight-6` [D145].
+ */
+export function SelectItem(props) {
+    const { className, swatch, children, ...rest } = props;
+    return (React.createElement(BaseSelect.Item, { ...rest, className: cx(styles.item, className) },
+        React.createElement(BaseSelect.ItemIndicator, { className: styles.itemIndicator },
+            React.createElement(Icon, { name: "check" })),
+        React.createElement(BaseSelect.ItemText, { className: styles.itemText }, swatch ? (React.createElement("span", { className: styles.value },
+            React.createElement(Swatch, { color: swatch }),
+            children)) : (children))));
+}
+/** A titled group of items. */
+export function SelectGroup(props) {
+    const { label, className, children, ...rest } = props;
+    return (React.createElement(BaseSelect.Group, { ...rest, className: cx(styles.group, className) },
+        React.createElement(BaseSelect.GroupLabel, { className: styles.groupLabel }, label),
+        children));
+}
+/** The one popup group separator: `--border-size-1` in `--role-rule`. */
+export function SelectSeparator(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseSelect.Separator, { ...rest, className: cx(styles.separator, className) }));
+}
+//# sourceMappingURL=Select.js.map

package/forms/select/Select.js.map

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

package/forms/select/index.d.ts.map

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

package/forms/select/index.js.map

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