@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.0

package/dist/components/select/select.js

@@ -1,12 +1,13 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import * as c from "react";
-import { Root as R, Portal as T, Content as N, Viewport as A, Group as B, Item as D, ItemIndicator as L, ItemText as $, Label as k, ScrollDownButton as z, ScrollUpButton as W, Separator as X, Value as j, Trigger as E, Icon as M } from "../../vendor/@radix-ui/react-select/dist/index.js";
-import { shorthands as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as l } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as P } from "../../styles/make-styles.js";
-import { radiusMd as x, spacingElement2 as s, radius2xl as U, spacingElement1 as p, radiusLg as G, semGraySoft as V, gray11 as Y, fontWeightSemibold as F, leadingXs as H, textXs as Z, grayA11 as u, accentA3 as S, grayA12 as y, leadingSm as b, textSm as v, spacingGroup1 as O, body as _, accentA11 as I, accentA8 as Q, semAccentSoft as J, grayA8 as K } from "../../tokens/index.js";
-const tt = (n) => /* @__PURE__ */ t(
+import { j as e } from "../../vendor/react/jsx-dev-runtime.js";
+import * as n from "react";
+import { Root as E, Portal as U, Content as V, Viewport as C, Group as R, Item as q, ItemIndicator as T, ItemText as A, Label as B, ScrollDownButton as L, ScrollUpButton as $, Separator as P, Value as W, Trigger as z, Icon as X } from "../../vendor/@radix-ui/react-select/dist/index.js";
+import { shorthands as c } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { useDensity as M } from "../density-provider/density-provider.js";
+import { makeVoltStyles as Y } from "../../styles/make-styles.js";
+import { radiusMd as N, spacingElement2 as m, radius2xl as F, selectContentGap as G, selectContentPadding as O, radiusLg as H, spacingElement1 as f, semGraySoft as Z, gray11 as _, fontWeightSemibold as Q, leadingXs as J, textXs as K, grayA11 as g, accentA3 as w, grayA12 as b, leadingSm as v, textSm as S, selectItemPaddingY as D, selectItemPaddingLeft as ee, body as te, accentA11 as y, semFocusRing as k, semAccentSoft as re, grayA8 as le } from "../../tokens/index.js";
+const oe = (s) => /* @__PURE__ */ e.jsxDEV(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14,10 +15,22 @@ const tt = (n) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ t("path", { d: "M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" })
-  }
-), et = (n) => /* @__PURE__ */ t(
+    ...s,
+    children: /* @__PURE__ */ e.jsxDEV("path", { d: "M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 20,
+      columnNumber: 5
+    }, void 0)
+  },
+  void 0,
+  !1,
+  {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+    lineNumber: 12,
+    columnNumber: 3
+  },
+  void 0
+), se = (s) => /* @__PURE__ */ e.jsxDEV(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -25,10 +38,22 @@ const tt = (n) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ t("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
-  }
-), ot = (n) => /* @__PURE__ */ t(
+    ...s,
+    children: /* @__PURE__ */ e.jsxDEV("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 33,
+      columnNumber: 5
+    }, void 0)
+  },
+  void 0,
+  !1,
+  {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+    lineNumber: 25,
+    columnNumber: 3
+  },
+  void 0
+), ie = (s) => /* @__PURE__ */ e.jsxDEV(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -36,10 +61,22 @@ const tt = (n) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ t("path", { d: "M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z" })
-  }
-), C = (n) => /* @__PURE__ */ t(
+    ...s,
+    children: /* @__PURE__ */ e.jsxDEV("path", { d: "M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z" }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 46,
+      columnNumber: 5
+    }, void 0)
+  },
+  void 0,
+  !1,
+  {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+    lineNumber: 38,
+    columnNumber: 3
+  },
+  void 0
+), I = (s) => /* @__PURE__ */ e.jsxDEV(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -47,20 +84,32 @@ const tt = (n) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...n,
-    children: /* @__PURE__ */ t("path", { d: "M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z" })
-  }
-), f = P({
+    ...s,
+    children: /* @__PURE__ */ e.jsxDEV("path", { d: "M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z" }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 59,
+      columnNumber: 5
+    }, void 0)
+  },
+  void 0,
+  !1,
+  {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+    lineNumber: 51,
+    columnNumber: 3
+  },
+  void 0
+), d = Y({
   trigger: {
     display: "flex",
     width: "100%",
     alignItems: "center",
     justifyContent: "space-between",
-    ...d.gap(s),
-    ...d.borderRadius(G),
+    ...c.gap(m),
+    ...c.borderRadius(H),
     backgroundColor: "transparent",
-    fontSize: v,
-    lineHeight: b,
+    fontSize: S,
+    lineHeight: v,
     outlineStyle: "none",
     whiteSpace: "normal",
     textAlign: "left",
@@ -68,37 +117,46 @@ const tt = (n) => /* @__PURE__ */ t(
     transitionProperty: "color, box-shadow",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: k
+    },
     ":disabled": {
       cursor: "not-allowed",
       opacity: 0.5
     },
     "&[data-placeholder]": {
-      color: K
+      color: le
     },
     "& svg": {
       pointerEvents: "none",
       flexShrink: 0
     },
-    [`& [${l}="select-value"]`]: {
+    [`& [${i}="select-value"]`]: {
       display: "flex",
       alignItems: "center",
-      ...d.gap(s),
+      ...c.gap(m),
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
     // The open-state chevron rotation is declared HERE, on the trigger that carries the state
     // attribute, reaching the icon by SLOT_ATTR.
-    [`&[data-state='open'] [${l}="select-icon"] svg`]: {
+    [`&[data-state='open'] [${i}="select-icon"] svg`]: {
       transform: "rotate(180deg)"
     },
-    [`&[data-state='open'] [${l}="select-icon"]`]: {
+    [`&[data-state='open'] [${i}="select-icon"]`]: {
       transform: "rotate(180deg)"
     },
-    [`&[data-open] [${l}="select-icon"] svg`]: {
+    [`&[data-open] [${i}="select-icon"] svg`]: {
       transform: "rotate(180deg)"
     },
-    [`&[data-popup-open] [${l}="select-icon"] svg`]: {
+    [`&[data-popup-open] [${i}="select-icon"] svg`]: {
       transform: "rotate(180deg)"
     }
   },
@@ -111,10 +169,13 @@ const tt = (n) => /* @__PURE__ */ t(
   triggerIcon: {
     width: "1.5rem",
     height: "1.5rem",
-    color: u,
+    color: g,
     transitionProperty: "transform",
     transitionDuration: "150ms",
-    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    }
   },
   triggerClear: {
     position: "absolute",
@@ -127,39 +188,51 @@ const tt = (n) => /* @__PURE__ */ t(
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
-    color: I,
+    color: y,
     cursor: "pointer",
-    ...d.borderRadius(x),
+    ...c.borderRadius(N),
     ":hover": {
-      backgroundColor: J
+      backgroundColor: re
     },
     ":focus-visible": {
-      outlineColor: Q,
+      outlineColor: k,
       outlineWidth: "2px",
-      outlineStyle: "solid"
+      outlineStyle: "solid",
+      outlineOffset: "2px"
     }
   },
   triggerClearIcon: {
     width: "1.25rem",
     height: "1.25rem",
-    color: I
+    color: y
   },
   popup: {
-    backgroundColor: _,
-    ...d.padding(s),
-    ...d.gap(p),
-    color: y,
+    backgroundColor: te,
+    // DENSITY-SPEC.md §2.3 — popup padding/gap only; the slide-in animation offsets a few lines
+    // below deliberately keep the plain (non-density) `spacingElement2` value: they are not in the
+    // approved matrix, and re-using the same primitive for two unrelated purposes doesn't make the
+    // animation distance a density lever too.
+    ...c.padding(O),
+    ...c.gap(G),
+    color: b,
     position: "relative",
     zIndex: 50,
     transformOrigin: "var(--radix-select-content-transform-origin)",
     overflowX: "hidden",
     overflowY: "auto",
-    ...d.borderRadius(U),
-    ...d.border("1px", "solid", "transparent"),
+    ...c.borderRadius(F),
+    ...c.border("1px", "solid", "transparent"),
     // v1 shadow-md
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
     outlineStyle: "none",
     maxHeight: "var(--radix-popper-available-height, 20rem)",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationDuration: "0.01ms",
+      animationIterationCount: "1",
+      "&[data-state='open']": {
+        animationDuration: "0.01ms"
+      }
+    },
     "&[data-state='open']": {
       animationName: {
         from: { opacity: 0, transform: "scale(0.95)" },
@@ -172,7 +245,7 @@ const tt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(-${s}) scale(0.95)`
+          transform: `translateY(-${m}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -181,7 +254,7 @@ const tt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(${s}) scale(0.95)`
+          transform: `translateX(${m}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -190,7 +263,7 @@ const tt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(-${s}) scale(0.95)`
+          transform: `translateX(-${m}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -199,7 +272,7 @@ const tt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(${s}) scale(0.95)`
+          transform: `translateY(${m}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -216,8 +289,8 @@ const tt = (n) => /* @__PURE__ */ t(
   viewport: {
     width: "100%",
     minWidth: "var(--radix-select-trigger-width)",
-    scrollMarginTop: p,
-    scrollMarginBottom: p
+    scrollMarginTop: f,
+    scrollMarginBottom: f
   },
   item: {
     position: "relative",
@@ -226,24 +299,27 @@ const tt = (n) => /* @__PURE__ */ t(
     cursor: "default",
     userSelect: "none",
     alignItems: "center",
-    ...d.gap(s),
-    ...d.borderRadius(x),
-    paddingLeft: O,
+    ...c.gap(m),
+    ...c.borderRadius(N),
+    // DENSITY-SPEC.md §2.3 — left padding and vertical padding are density levers; right padding
+    // stays a fixed 32px at every tier (reserves the check-indicator's space, not modeled in
+    // density.yaml).
+    paddingLeft: ee,
     paddingRight: "2rem",
-    paddingTop: "0.375rem",
-    paddingBottom: "0.375rem",
-    fontSize: v,
-    lineHeight: b,
-    color: y,
+    paddingTop: D,
+    paddingBottom: D,
+    fontSize: S,
+    lineHeight: v,
+    color: b,
     outlineStyle: "none",
     ":not(:first-child)": {
       marginTop: "0.125rem"
     },
     "&[data-highlighted]": {
-      backgroundColor: S
+      backgroundColor: w
     },
     "&[data-state='checked']": {
-      backgroundColor: S
+      backgroundColor: w
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -254,12 +330,12 @@ const tt = (n) => /* @__PURE__ */ t(
       flexShrink: 0
     },
     "& svg:not([class*='text-'])": {
-      color: u
+      color: g
     }
   },
   itemIndicatorWrapper: {
     position: "absolute",
-    right: s,
+    right: m,
     display: "flex",
     width: "1rem",
     height: "1rem",
@@ -269,26 +345,26 @@ const tt = (n) => /* @__PURE__ */ t(
   itemIndicatorIcon: {
     width: "1rem",
     height: "1rem",
-    color: u
+    color: g
   },
   label: {
-    paddingLeft: s,
-    paddingRight: s,
+    paddingLeft: m,
+    paddingRight: m,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: Z,
-    lineHeight: H,
-    fontWeight: F,
-    color: Y
+    fontSize: K,
+    lineHeight: J,
+    fontWeight: Q,
+    color: _
   },
   separator: {
     pointerEvents: "none",
-    marginLeft: `calc(-1 * ${p})`,
-    marginRight: `calc(-1 * ${p})`,
-    marginTop: p,
-    marginBottom: p,
+    marginLeft: `calc(-1 * ${f})`,
+    marginRight: `calc(-1 * ${f})`,
+    marginTop: f,
+    marginBottom: f,
     height: "1px",
-    backgroundColor: V
+    backgroundColor: Z
   },
   scrollArrow: {
     display: "flex",
@@ -297,10 +373,10 @@ const tt = (n) => /* @__PURE__ */ t(
     justifyContent: "center"
   },
   scrollArrowUp: {
-    paddingBottom: p
+    paddingBottom: f
   },
   scrollArrowDown: {
-    paddingTop: p
+    paddingTop: f
   },
   scrollArrowIcon: {
     width: "1.5rem",
@@ -309,204 +385,353 @@ const tt = (n) => /* @__PURE__ */ t(
   scrollArrowDownIcon: {
     transform: "rotate(180deg)"
   }
-}), mt = c.forwardRef(function(o, e) {
-  return /* @__PURE__ */ t(R, { "data-slot": "select", ...o });
-}), gt = c.forwardRef(function({ className: o, ...e }, a) {
-  return /* @__PURE__ */ t(
-    B,
+}), he = n.forwardRef(function(r, t) {
+  return /* @__PURE__ */ e.jsxDEV(E, { "data-slot": "select", ...r }, void 0, !1, {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+    lineNumber: 357,
+    columnNumber: 10
+  }, this);
+}), Ne = n.forwardRef(function({ className: r, ...t }, o) {
+  return /* @__PURE__ */ e.jsxDEV(
+    R,
     {
-      ref: a,
+      ref: o,
       "data-slot": "select-group",
-      [l]: "select-group",
-      className: o,
-      ...e
-    }
+      [i]: "select-group",
+      className: r,
+      ...t
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 369,
+      columnNumber: 5
+    },
+    this
   );
-}), ft = c.forwardRef(function({ className: o, ...e }, a) {
-  return /* @__PURE__ */ t(
-    j,
+}), we = n.forwardRef(function({ className: r, ...t }, o) {
+  return /* @__PURE__ */ e.jsxDEV(
+    W,
     {
-      ref: a,
+      ref: o,
       "data-slot": "select-value",
-      [l]: "select-value",
-      className: o,
-      ...e
-    }
+      [i]: "select-value",
+      className: r,
+      ...t
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 388,
+      columnNumber: 5
+    },
+    this
   );
-}), ut = c.forwardRef(function({ className: o, children: e, ...a }, i) {
-  const r = f();
-  return /* @__PURE__ */ h(
-    E,
+}), be = n.forwardRef(function({ className: r, children: t, ...o }, a) {
+  const l = d();
+  return /* @__PURE__ */ e.jsxDEV(
+    z,
     {
-      ref: i,
+      ref: a,
       "data-slot": "select-trigger",
-      [l]: "select-trigger",
-      className: m(r.trigger, o),
-      ...a,
+      [i]: "select-trigger",
+      className: p(l.trigger, r),
+      ...o,
       children: [
-        e,
-        /* @__PURE__ */ t(
-          M,
+        t,
+        /* @__PURE__ */ e.jsxDEV(
+          X,
           {
             asChild: !0,
             "data-slot": "select-icon",
-            [l]: "select-icon",
-            className: r.triggerIconWrapper,
-            children: /* @__PURE__ */ t(ot, { className: r.triggerIcon })
-          }
+            [i]: "select-icon",
+            className: l.triggerIconWrapper,
+            children: /* @__PURE__ */ e.jsxDEV(ie, { className: l.triggerIcon }, void 0, !1, {
+              fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+              lineNumber: 423,
+              columnNumber: 9
+            }, this)
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+            lineNumber: 417,
+            columnNumber: 7
+          },
+          this
         )
       ]
-    }
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 409,
+      columnNumber: 5
+    },
+    this
   );
-}), ht = c.forwardRef(function({ className: o, onClick: e, ...a }, i) {
-  const r = f();
-  return /* @__PURE__ */ t(
+}), ve = n.forwardRef(function({ className: r, onClick: t, ...o }, a) {
+  const l = d();
+  return /* @__PURE__ */ e.jsxDEV(
     "span",
     {
-      ref: i,
+      ref: a,
       role: "button",
       tabIndex: 0,
       "data-slot": "select-trigger-clear",
-      [l]: "select-trigger-clear",
-      className: m(r.triggerClear, o),
-      onPointerDown: (g) => {
-        g.preventDefault(), g.stopPropagation();
+      [i]: "select-trigger-clear",
+      className: p(l.triggerClear, r),
+      onPointerDown: (u) => {
+        u.preventDefault(), u.stopPropagation();
       },
-      onClick: (g) => {
-        g.preventDefault(), g.stopPropagation(), e == null || e(g);
+      onClick: (u) => {
+        u.preventDefault(), u.stopPropagation(), t == null || t(u);
       },
-      ...a,
-      children: /* @__PURE__ */ t(tt, { className: r.triggerClearIcon })
-    }
+      ...o,
+      children: /* @__PURE__ */ e.jsxDEV(oe, { className: l.triggerClearIcon }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+        lineNumber: 456,
+        columnNumber: 7
+      }, this)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 438,
+      columnNumber: 5
+    },
+    this
   );
-}), wt = c.forwardRef(function({
-  className: o,
-  children: e,
-  position: a = "popper",
-  align: i = "center",
-  container: r,
-  ...g
-}, q) {
-  const w = f();
-  return /* @__PURE__ */ t(T, { container: r, children: /* @__PURE__ */ h(
-    N,
+}), Se = n.forwardRef(function({
+  className: r,
+  children: t,
+  position: o = "popper",
+  align: a = "center",
+  container: l,
+  ...u
+}, j) {
+  const x = d(), h = M();
+  return /* @__PURE__ */ e.jsxDEV(U, { container: l, children: /* @__PURE__ */ e.jsxDEV(
+    V,
     {
-      ref: q,
+      ref: j,
       "data-slot": "select-content",
-      [l]: "select-content",
-      position: a,
-      align: i,
-      className: m(w.popup, o),
-      ...g,
+      [i]: "select-content",
+      ...h !== void 0 ? { "data-density": h } : {},
+      position: o,
+      align: a,
+      className: p(x.popup, r),
+      ...u,
       children: [
-        /* @__PURE__ */ t(rt, {}),
-        /* @__PURE__ */ t(
-          A,
+        /* @__PURE__ */ e.jsxDEV(ae, {}, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+          lineNumber: 500,
+          columnNumber: 9
+        }, this),
+        /* @__PURE__ */ e.jsxDEV(
+          C,
           {
             "data-slot": "select-viewport",
-            [l]: "select-viewport",
-            className: w.viewport,
-            children: e
-          }
+            [i]: "select-viewport",
+            className: x.viewport,
+            children: t
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+            lineNumber: 501,
+            columnNumber: 9
+          },
+          this
         ),
-        /* @__PURE__ */ t(at, {})
+        /* @__PURE__ */ e.jsxDEV(ne, {}, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+          lineNumber: 508,
+          columnNumber: 9
+        }, this)
       ]
-    }
-  ) });
-}), xt = c.forwardRef(function({ className: o, ...e }, a) {
-  const i = f();
-  return /* @__PURE__ */ t(
-    k,
+    },
+    void 0,
+    !0,
     {
-      ref: a,
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 490,
+      columnNumber: 7
+    },
+    this
+  ) }, void 0, !1, {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+    lineNumber: 489,
+    columnNumber: 5
+  }, this);
+}), De = n.forwardRef(function({ className: r, ...t }, o) {
+  const a = d();
+  return /* @__PURE__ */ e.jsxDEV(
+    B,
+    {
+      ref: o,
       "data-slot": "select-label",
-      [l]: "select-label",
-      className: m(i.label, o),
-      ...e
-    }
+      [i]: "select-label",
+      className: p(a.label, r),
+      ...t
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 525,
+      columnNumber: 5
+    },
+    this
   );
-}), St = c.forwardRef(function({ className: o, children: e, ...a }, i) {
-  const r = f();
-  return /* @__PURE__ */ h(
-    D,
+}), ye = n.forwardRef(function({ className: r, children: t, ...o }, a) {
+  const l = d();
+  return /* @__PURE__ */ e.jsxDEV(
+    q,
     {
-      ref: i,
+      ref: a,
       "data-slot": "select-item",
-      [l]: "select-item",
-      className: m(r.item, o),
-      ...a,
+      [i]: "select-item",
+      className: p(l.item, r),
+      ...o,
       children: [
-        /* @__PURE__ */ t("span", { className: r.itemIndicatorWrapper, children: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(et, { className: r.itemIndicatorIcon }) }) }),
-        /* @__PURE__ */ t($, { children: e })
+        /* @__PURE__ */ e.jsxDEV("span", { className: l.itemIndicatorWrapper, children: /* @__PURE__ */ e.jsxDEV(T, { children: /* @__PURE__ */ e.jsxDEV(se, { className: l.itemIndicatorIcon }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+          lineNumber: 553,
+          columnNumber: 11
+        }, this) }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+          lineNumber: 552,
+          columnNumber: 9
+        }, this) }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+          lineNumber: 551,
+          columnNumber: 7
+        }, this),
+        /* @__PURE__ */ e.jsxDEV(A, { children: t }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+          lineNumber: 556,
+          columnNumber: 7
+        }, this)
       ]
-    }
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 544,
+      columnNumber: 5
+    },
+    this
   );
-}), yt = c.forwardRef(function({ className: o, ...e }, a) {
-  const i = f();
-  return /* @__PURE__ */ t(
-    X,
+}), ke = n.forwardRef(function({ className: r, ...t }, o) {
+  const a = d();
+  return /* @__PURE__ */ e.jsxDEV(
+    P,
     {
-      ref: a,
+      ref: o,
       "data-slot": "select-separator",
-      [l]: "select-separator",
-      className: m(i.separator, o),
-      ...e
-    }
+      [i]: "select-separator",
+      className: p(a.separator, r),
+      ...t
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 572,
+      columnNumber: 5
+    },
+    this
   );
-}), rt = c.forwardRef(function({ className: o, children: e, ...a }, i) {
-  const r = f();
-  return /* @__PURE__ */ t(
-    W,
+}), ae = n.forwardRef(function({ className: r, children: t, ...o }, a) {
+  const l = d();
+  return /* @__PURE__ */ e.jsxDEV(
+    $,
     {
-      ref: i,
+      ref: a,
       "data-slot": "select-scroll-up-button",
-      [l]: "select-scroll-up-button",
-      className: m(
-        r.scrollArrow,
-        r.scrollArrowUp,
-        o
+      [i]: "select-scroll-up-button",
+      className: p(
+        l.scrollArrow,
+        l.scrollArrowUp,
+        r
       ),
-      ...a,
-      children: e ?? /* @__PURE__ */ t(C, { className: r.scrollArrowIcon })
-    }
+      ...o,
+      children: t ?? /* @__PURE__ */ e.jsxDEV(I, { className: l.scrollArrowIcon }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+        lineNumber: 604,
+        columnNumber: 20
+      }, this)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 593,
+      columnNumber: 5
+    },
+    this
   );
-}), at = c.forwardRef(function({ className: o, children: e, ...a }, i) {
-  const r = f();
-  return /* @__PURE__ */ t(
-    z,
+}), ne = n.forwardRef(function({ className: r, children: t, ...o }, a) {
+  const l = d();
+  return /* @__PURE__ */ e.jsxDEV(
+    L,
     {
-      ref: i,
+      ref: a,
       "data-slot": "select-scroll-down-button",
-      [l]: "select-scroll-down-button",
-      className: m(
-        r.scrollArrow,
-        r.scrollArrowDown,
-        o
+      [i]: "select-scroll-down-button",
+      className: p(
+        l.scrollArrow,
+        l.scrollArrowDown,
+        r
       ),
-      ...a,
-      children: e ?? /* @__PURE__ */ t(
-        C,
+      ...o,
+      children: t ?? /* @__PURE__ */ e.jsxDEV(
+        I,
         {
-          className: m(
-            r.scrollArrowIcon,
-            r.scrollArrowDownIcon
+          className: p(
+            l.scrollArrowIcon,
+            l.scrollArrowDownIcon
           )
-        }
+        },
+        void 0,
+        !1,
+        {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+          lineNumber: 632,
+          columnNumber: 9
+        },
+        this
       )
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/select/select.tsx",
+      lineNumber: 620,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  mt as Select,
-  wt as SelectContent,
-  gt as SelectGroup,
-  St as SelectItem,
-  xt as SelectLabel,
-  at as SelectScrollDownButton,
-  rt as SelectScrollUpButton,
-  yt as SelectSeparator,
-  ut as SelectTrigger,
-  ht as SelectTriggerClear,
-  ft as SelectValue
+  he as Select,
+  Se as SelectContent,
+  Ne as SelectGroup,
+  ye as SelectItem,
+  De as SelectLabel,
+  ne as SelectScrollDownButton,
+  ae as SelectScrollUpButton,
+  ke as SelectSeparator,
+  be as SelectTrigger,
+  ve as SelectTriggerClear,
+  we as SelectValue
 };
 //# sourceMappingURL=select.js.map