@m4l/gclick 0.28.0 → 0.29.0

package/components/DevicesPicker/DevicesPicker.js

@@ -0,0 +1,311 @@
+import { jsx as o, jsxs as d, Fragment as Ce } from "@emotion/react/jsx-runtime";
+import { useRef as ue, useState as w, useCallback as c, useMemo as be } from "react";
+import K from "clsx";
+import { useModuleDictionary as De } from "@m4l/core";
+import { Icon as Se } from "@m4l/base";
+import { ConectivityDispositiveOutlined as Ie, ArrowChevronMdUpOutlined as Pe, ArrowChevronMdDownOutlined as ye } from "@m4l/icons";
+import { useChipsOverflow as we, Popover as U } from "@m4l/components";
+import { useDevicesSelection as Re } from "../CheckableDevicesPicker/hooks/useDevicesSelection.js";
+import { DEVICES_PICKER_PARTIAL_CARD_MIN_WIDTH as Te, DEVICES_PICKER_CLASSES as r } from "./constants.js";
+import { DICCTIONARY as R } from "./dictionary.js";
+import { resolveDeviceIcon as Ne } from "../../helpers/resolveDeviceIcon/resolveDeviceIcon.js";
+import { RootStyled as V, TriggerStyled as Oe, PlaceholderContainerStyled as Ae, PlaceholderIconStyled as Le, PlaceholderStyled as ke, CardsContainerStyled as Ee, DeviceCardWrapperStyled as G, PartialCardWrapperStyled as _e, MeasuringLayerStyled as xe, OverflowToggleStyled as Fe, ChevronButtonStyled as Me, PanelActionsStyled as We, PanelActionDoneStyled as ze } from "./slots/DevicesPickerSlots.js";
+import { DevicesPickerSkeleton as $e } from "./subcomponents/DevicesPickerSkeleton/DevicesPickerSkeleton.js";
+import { resolveDeviceSubtitle as v, resolveDeviceTitle as C } from "../../helpers/resolveDeviceLabels/resolveDeviceLabels.js";
+import { CheckableDevicesPicker as Be } from "../CheckableDevicesPicker/CheckableDevicesPicker.js";
+import { SelectedDevicesList as je } from "./subcomponents/SelectedDevicesList/SelectedDevicesList.js";
+import { DeviceCard as T } from "./subcomponents/DeviceCard/DeviceCard.js";
+function lo(H) {
+  const {
+    endPoint: Y,
+    timeout: q,
+    parms: J,
+    resultField: Q,
+    isRemote: X,
+    isExternalUrl: Z,
+    responseToCamelCase: ee,
+    shouldFetch: oe,
+    value: N,
+    onChange: O,
+    multiple: i = !0,
+    disabled: A = !1,
+    loading: L = !1,
+    error: re = !1,
+    size: n = "medium",
+    showOverflowToggle: te = !0,
+    showDepartments: ae,
+    showIds: ie,
+    searchable: ne = !0,
+    placeholder: le,
+    className: k,
+    dataTestid: E,
+    getDeviceGroup: se,
+    onChangeFilterParms: _
+  } = H;
+  if (i && _)
+    throw new Error(
+      "multiple cannot be enabled when onChangeFilterParms is defined; define the filter in parms if needed."
+    );
+  const { getLabel: u } = De(), b = ue(null), [l, x] = w(!1), [F, D] = w(!1), [de, ce] = w(!1), m = c(
+    (e) => Ne(e.deviceIcon?.iconId),
+    []
+  ), { selectedDevices: p, handleRemove: S } = Re({
+    value: N,
+    multiple: i,
+    onChange: O
+  }), {
+    visibleFilters: I,
+    overflowFilters: P,
+    measuringFilters: h,
+    leftoverWidth: M,
+    parentRef: me,
+    containerRef: pe,
+    setChipRef: W,
+    setMoreChipRef: he,
+    setActionsRef: fe
+  } = we(p, { deferMeasurement: !0 }), { visibleCards: ge, partialCard: a, hiddenCards: z } = be(() => {
+    const e = new Set(h.map((s) => s.id)), t = P.find((s) => !e.has(s.id)), j = M >= Te || I.length === 0 ? t : void 0;
+    return {
+      visibleCards: I,
+      partialCard: j,
+      hiddenCards: P.filter((s) => s.id !== j?.id)
+    };
+  }, [I, P, h, M]), $ = c((e) => {
+    e?.stopPropagation(), D(!1), x((t) => !t);
+  }, []), f = c(() => x(!1), []), y = c((e) => {
+    e?.stopPropagation(), l && f(), D((t) => !t);
+  }, [l, f]), ve = c(() => D(!1), []), B = L || de, g = {
+    size: n,
+    panelOpen: l,
+    listOpen: F,
+    error: re,
+    disabled: A,
+    loading: B,
+    hasSelection: p.length > 0
+  };
+  return L ? /* @__PURE__ */ o(
+    V,
+    {
+      ownerState: g,
+      className: K(k, r.root),
+      "data-testid": E,
+      children: /* @__PURE__ */ o($e, { size: n })
+    }
+  ) : /* @__PURE__ */ d(Ce, { children: [
+    /* @__PURE__ */ o(
+      V,
+      {
+        ref: me,
+        ownerState: g,
+        className: K(k, r.root),
+        "data-testid": E,
+        children: /* @__PURE__ */ d(
+          Oe,
+          {
+            ref: b,
+            ownerState: g,
+            className: r.trigger,
+            onClick: $,
+            children: [
+              p.length === 0 ? /* @__PURE__ */ d(
+                Ae,
+                {
+                  className: r.placeholderContainer,
+                  children: [
+                    /* @__PURE__ */ o(Le, { className: r.placeholderIcon, children: /* @__PURE__ */ o(Se, { src: /* @__PURE__ */ o(Ie, {}), color: "text.secondary" }) }),
+                    /* @__PURE__ */ o(
+                      ke,
+                      {
+                        className: r.placeholder,
+                        variant: "bodyStandard",
+                        color: "text.disabled",
+                        children: le ?? u(R.label_placeholder)
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ d(
+                Ee,
+                {
+                  ref: pe,
+                  className: r.cardsContainer,
+                  children: [
+                    ge.map((e) => /* @__PURE__ */ o(
+                      G,
+                      {
+                        ref: (t) => W(e.id, t),
+                        className: r.deviceCardWrapper,
+                        children: /* @__PURE__ */ o(
+                          T,
+                          {
+                            deviceId: e.id,
+                            name: C(e),
+                            subtitle: v(e),
+                            icon: m(e),
+                            disableRemove: !i,
+                            onRemove: () => S(e),
+                            onClick: y,
+                            dataTestid: `${r.deviceCard}-${e.id}`
+                          }
+                        )
+                      },
+                      e.id
+                    )),
+                    a && // No lleva ref de medición a propósito: su ancho natural ya se
+                    // cacheó en la pasada inicial y aquí sale encogido, así que
+                    // registrarlo corrompería el cálculo del overflow.
+                    /* @__PURE__ */ o(
+                      _e,
+                      {
+                        className: r.partialCardWrapper,
+                        children: /* @__PURE__ */ o(
+                          T,
+                          {
+                            deviceId: a.id,
+                            name: C(a),
+                            subtitle: v(a),
+                            icon: m(a),
+                            disableRemove: !i,
+                            onRemove: () => S(a),
+                            onClick: y,
+                            dataTestid: `${r.deviceCard}-${a.id}`
+                          }
+                        )
+                      },
+                      a.id
+                    )
+                  ]
+                }
+              ),
+              h.length > 0 && /* @__PURE__ */ o(
+                xe,
+                {
+                  className: r.measuringLayer,
+                  "aria-hidden": !0,
+                  children: h.map((e) => /* @__PURE__ */ o(
+                    G,
+                    {
+                      ref: (t) => W(e.id, t),
+                      className: r.deviceCardWrapper,
+                      children: /* @__PURE__ */ o(
+                        T,
+                        {
+                          deviceId: e.id,
+                          name: C(e),
+                          subtitle: v(e),
+                          icon: m(e),
+                          disableRemove: !i
+                        }
+                      )
+                    },
+                    e.id
+                  ))
+                }
+              ),
+              te && z.length > 0 && /* @__PURE__ */ o(
+                Fe,
+                {
+                  ref: he,
+                  ownerState: g,
+                  className: r.overflowToggle,
+                  dataTestId: r.overflowToggle,
+                  variant: "contained",
+                  color: "default",
+                  size: n,
+                  label: `+${z.length}`,
+                  onToggle: y
+                }
+              ),
+              /* @__PURE__ */ o(
+                Me,
+                {
+                  ref: fe,
+                  className: r.chevronButton,
+                  dataTestId: r.chevronButton,
+                  icon: l ? /* @__PURE__ */ o(Pe, {}) : /* @__PURE__ */ o(ye, {}),
+                  variant: "text",
+                  size: n,
+                  disabled: A || B,
+                  "aria-label": u(R.label_open_panel),
+                  onClick: $
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ d(
+      U,
+      {
+        open: l,
+        anchorEl: b.current,
+        onClose: f,
+        arrowType: "no-arrow",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: [
+          /* @__PURE__ */ o(
+            Be,
+            {
+              open: l,
+              endPoint: Y,
+              timeout: q,
+              parms: J,
+              resultField: Q,
+              isRemote: X,
+              isExternalUrl: Z,
+              responseToCamelCase: ee,
+              shouldFetch: oe,
+              onChangeFilterParms: _,
+              value: N,
+              onChange: O,
+              multiple: i,
+              size: n,
+              searchable: ne,
+              showDepartments: ae,
+              showIds: ie,
+              onLoadingChange: ce,
+              getDeviceGroup: se
+            }
+          ),
+          /* @__PURE__ */ o(We, { className: r.panelActions, children: /* @__PURE__ */ o(
+            ze,
+            {
+              className: r.panelActionDone,
+              "data-testid": r.panelActionDone,
+              type: "button",
+              size: n,
+              label: u(R.label_done),
+              onClick: f
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(
+      U,
+      {
+        open: F,
+        anchorEl: b.current,
+        onClose: ve,
+        arrowType: "no-arrow",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: -3, horizontal: "right" },
+        children: /* @__PURE__ */ o(
+          je,
+          {
+            devices: p,
+            getOptionLabel: C,
+            getDeviceSubtitle: v,
+            getDeviceIcon: m,
+            onRemove: S
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  lo as DevicesPicker
+};

package/components/DevicesPicker/DevicesPicker.styles.d.ts

@@ -0,0 +1,3 @@
+import { DevicesPickerStyles } from './types';
+export declare const devicesPickerStyles: DevicesPickerStyles;
+//# sourceMappingURL=DevicesPicker.styles.d.ts.map

package/components/DevicesPicker/DevicesPicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevicesPicker.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/DevicesPicker/DevicesPicker.styles.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,mBAAmB,EAAE,mBAiXjC,CAAC"}

package/components/DevicesPicker/DevicesPicker.styles.js

@@ -0,0 +1,373 @@
+import { getSizeStyles as r, getTypographyStyles as d, BUTTON_CLASSES as t } from "@m4l/components";
+import { DEVICES_PICKER_WIDTH as n, DEVICES_PICKER_CARD_MAX_WIDTH as l, DEVICES_PICKER_CARD_MIN_HEIGHT as o, DEVICES_PICKER_SKELETON as p, DEVICES_PICKER_SELECTED_LIST_WIDTH as c, DEVICES_PICKER_SELECTED_LIST_HEIGHT as g, DEVICES_PICKER_CLASSES as s } from "./constants.js";
+const f = {
+  /**
+   * root: Full-width wrapper. The overflow measurement reads its width, so it
+   * must not depend on how many cards are currently painted.
+   */
+  root: () => ({
+    // El ancho definido es lo que ve un padre shrink-to-fit, así no crece con
+    // cada card. El mínimo sigue al padre cuando es mayor y se planta en el
+    // ancho base cuando es menor, para no deformarse al encoger la ventana.
+    width: n,
+    minWidth: `max(100%, ${n}px)`
+  }),
+  /**
+   * trigger: The visible row. It takes the full width of the field, as the
+   * master asks for the picker inside a form field, and what does not fit goes
+   * to the +N toggle, never to a silent clipping.
+   * The master paints no stroke and no fill at rest: only the two expanded
+   * surfaces paint it, in primary, and error replaces that tone. The stroke is
+   * kept transparent so turning it on never shifts the layout by a pixel.
+   */
+  trigger: ({ theme: e, ownerState: i }) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    width: "100%",
+    maxWidth: "100%",
+    gap: e.vars.size.baseSpacings["sp1-5"],
+    padding: e.vars.size.baseSpacings["sp0-5"],
+    borderRadius: e.vars.size.borderRadius.r2,
+    border: "1px solid transparent",
+    ...(i?.panelOpen || i?.listOpen) && {
+      borderColor: e.vars.palette.primary.enabled
+    },
+    ...i?.error && {
+      borderColor: e.vars.palette.error.enabled
+    },
+    ...i?.disabled && {
+      opacity: 0.6,
+      pointerEvents: "none"
+    }
+  }),
+  /**
+   * deviceCardWrapper: Carries the measuring ref of each card. inline-flex and
+   * flexShrink 0 keep its width equal to the card's natural width.
+   */
+  deviceCardWrapper: () => ({
+    display: "inline-flex",
+    flexShrink: 0,
+    // Un alias largo se comía el renglón entero y dejaba a las demás cards
+    // reducidas a su icono, así que aquí se topa y el texto trunca.
+    maxWidth: l,
+    [`& .${s.deviceCard}`]: {
+      maxWidth: "100%",
+      minWidth: 0
+    }
+  }),
+  /**
+   * measuringLayer: Holds the cards whose width is still unknown. It is taken
+   * out of the layout so they can be measured without the row opening up for a
+   * frame, which is what made the +N jump on every addition.
+   */
+  measuringLayer: () => ({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    visibility: "hidden",
+    pointerEvents: "none",
+    display: "flex"
+  }),
+  /**
+   * partialCardWrapper: The card that does not fit whole. It is the only one
+   * allowed to shrink, so it takes the leftover space and truncates instead of
+   * leaving a gap next to the +N toggle.
+   */
+  partialCardWrapper: () => ({
+    display: "inline-flex",
+    flexShrink: 1,
+    minWidth: 0,
+    [`& .${s.deviceCard}`]: {
+      flexShrink: 1,
+      minWidth: 0
+    }
+  }),
+  /**
+   * cardsContainer: Holds the cards that fit in the available space.
+   * overflow is hidden on purpose: the hidden ones are reported by the +N
+   * toggle, which is the only supported way to reach them.
+   */
+  cardsContainer: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    // Abraza las cards: el hueco que sobre queda entre ellas y el +N, que se
+    // ancla a la derecha junto al chevron.
+    flex: "0 1 auto",
+    minWidth: 0,
+    overflow: "hidden",
+    gap: e.vars.size.baseSpacings["sp1-5"]
+  }),
+  /**
+   * placeholderContainer: Leading icon plus placeholder text.
+   */
+  placeholderContainer: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    flex: "1 1 auto",
+    minWidth: 0,
+    gap: e.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * placeholderIcon: Tinted box around the device icon, as in the master.
+   */
+  placeholderIcon: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    padding: e.vars.size.baseSpacings.sp1,
+    borderRadius: e.vars.size.borderRadius.r2,
+    backgroundColor: e.vars.palette.chips.default.contained.backgroundColor,
+    ...r(e, "medium", "container", (i) => ({
+      width: i,
+      height: i
+    }))
+  }),
+  /**
+   * placeholder: Text shown when there is no selection.
+   */
+  placeholder: ({ theme: e }) => ({
+    padding: `0 ${e.vars.size.baseSpacings.sp1}`,
+    whiteSpace: "nowrap"
+  }),
+  /**
+   * overflowToggle: ToggleButton with the number of hidden cards.
+   * Stretches to the full height of the cards row, as in the master, and turns
+   * primary while the selected-devices list is open.
+   */
+  overflowToggle: ({ theme: e, ownerState: i }) => ({
+    flexShrink: 0,
+    // Vive con el chevron, en el extremo derecho del trigger, no pegado a la
+    // última card. El chevron cede su propio margen automático: con dos, flex
+    // reparte el sobrante entre ambos y el +N se queda a medio camino.
+    marginLeft: "auto",
+    [`& + .${s.chevronButton}`]: {
+      marginLeft: 0
+    },
+    alignSelf: "stretch",
+    height: "auto",
+    "&&": {
+      backgroundColor: i?.listOpen ? e.vars.palette.chips.primary.contained.backgroundColor : e.vars.palette.default.enabled
+    },
+    // El Button pinta su label con su propia tipografía; hay que ganarle.
+    [`&&&& .${t.textButton}`]: {
+      ...d(
+        !!e.generalSettings?.isMobile,
+        i?.size || "medium",
+        "bodyDens"
+      ),
+      ...i?.listOpen && {
+        color: e.vars.palette.chips.primary.contained.color
+      }
+    }
+  }),
+  /**
+   * chevronButton: Opens and closes the selection panel.
+   * The IconButton sets its own square size inside a `&&&` block, so it is
+   * centered in the row instead of stretched: stretching against that fixed
+   * height pins it to the top of the cross axis.
+   */
+  chevronButton: ({ theme: e }) => ({
+    flexShrink: 0,
+    alignSelf: "center",
+    marginLeft: "auto",
+    borderRadius: e.vars.size.borderRadius["r1-5"]
+  }),
+  /**
+   * deviceCard: One selected device. Sits on top of the system Card, so only
+   * the layout of the internal slot is defined here: the master places it at
+   * 6px horizontal and 4px vertical, with the icon 6px from the text block.
+   * The width is reset because the system Card is full width by default and
+   * the trigger card has to hug its content.
+   */
+  deviceCard: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    width: "auto",
+    minHeight: o,
+    gap: e.vars.size.baseSpacings["sp1-5"],
+    padding: `${e.vars.size.baseSpacings.sp1} ${e.vars.size.baseSpacings["sp1-5"]}`
+  }),
+  /**
+   * deviceCardIcon: Device icon wrapper inside the card.
+   */
+  deviceCardIcon: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    borderRadius: e.vars.size.borderRadius.r1,
+    ...r(e, "medium", "container", (i) => ({
+      width: i,
+      height: i
+    }))
+  }),
+  /**
+   * deviceCardContent: Column with name, subtitle and id.
+   */
+  deviceCardContent: () => ({
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0,
+    flex: "1 1 auto"
+  }),
+  /**
+   * deviceCardName: First line of the card.
+   * No line-height override on purpose: `bodyStandard` is 11px on a 1.5 ratio,
+   * which already lands on the 16px line box the master declares.
+   */
+  deviceCardName: () => ({
+    whiteSpace: "nowrap"
+  }),
+  /**
+   * deviceCardSubtitle: Second line of the card: the plate the backend
+   * published as `name`, once the alias took the first line.
+   */
+  deviceCardSubtitle: () => ({
+    whiteSpace: "nowrap"
+  }),
+  /**
+   * deviceCardId: Third line of the card.
+   */
+  deviceCardId: () => ({
+    whiteSpace: "nowrap"
+  }),
+  /**
+   * deviceCardRemove: Removes this device from the selection.
+   */
+  deviceCardRemove: ({ theme: e, ownerState: i }) => ({
+    flexShrink: 0,
+    ...r(e, i?.size || "medium", "base", (a) => ({
+      width: a,
+      height: a
+    }))
+  }),
+  /**
+   * panelActions: Foot row of the selection panel. Without it the panel only
+   * closes by clicking outside, which users inside a filter popover never find.
+   */
+  panelActions: ({ theme: e }) => ({
+    display: "flex",
+    justifyContent: "flex-end",
+    padding: e.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * panelActionDone: Close action of the selection panel.
+   */
+  panelActionDone: () => ({}),
+  /**
+   * selectedList: Surface of the selected-devices list, opened from the +N
+   * toggle. It is the only way to reach the cards that do not fit.
+   */
+  selectedList: ({ theme: e }) => ({
+    width: c,
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: e.vars.size.borderRadius.r3,
+    overflow: "hidden"
+  }),
+  /**
+   * selectedListHeader: Title row of the selected-devices list. The master
+   * groups the icon and the label on the left and pushes the count chip to
+   * the opposite edge.
+   */
+  selectedListHeader: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: e.vars.size.baseSpacings.sp2,
+    padding: e.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * selectedListTitle: Icon and label group at the start of the header.
+   */
+  selectedListTitle: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    minWidth: 0,
+    gap: e.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * selectedListCount: Count chip at the end of the header.
+   */
+  selectedListCount: () => ({
+    flexShrink: 0
+  }),
+  /**
+   * selectedListItems: Scrollable body of the selected-devices list.
+   */
+  selectedListItems: ({ theme: e }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: e.vars.size.baseSpacings["sp1-5"],
+    maxHeight: g,
+    overflowY: "auto",
+    padding: e.vars.size.baseSpacings.sp2,
+    // Aquí sí hay sitio para el texto entero: el recorte es cosa del trigger,
+    // donde la card compite por el ancho de la fila.
+    [`&& .${s.deviceCardName},
+      && .${s.deviceCardSubtitle},
+      && .${s.deviceCardId}`]: {
+      whiteSpace: "normal",
+      overflowWrap: "anywhere",
+      textOverflow: "clip"
+    }
+  }),
+  /**
+   * skeletonCard: Ghost row shown while the devices are loading. Keeps the
+   * trigger geometry so nothing jumps when the data arrives.
+   */
+  skeletonCard: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    gap: e.vars.size.baseSpacings.sp2,
+    padding: e.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * skeletonIcon: Ghost icon; same container size as the real device icon.
+   */
+  skeletonIcon: ({ theme: e, ownerState: i }) => ({
+    flexShrink: 0,
+    // El Skeleton fuerza 100% en `&.MuiSkeleton-root`; hay que ganarle.
+    "&&.MuiSkeleton-root": {
+      borderRadius: e.vars.size.borderRadius.r2,
+      backgroundColor: e.vars.palette.skeleton.default,
+      ...r(e, i?.size || "medium", "container", (a) => ({
+        width: a,
+        height: a
+      }))
+    }
+  }),
+  /**
+   * skeletonLine: Ghost text bar. `r4` is the largest radius token and CSS
+   * clamps it to half the height, which is the pill the master draws.
+   */
+  skeletonLine: ({ theme: e }) => ({
+    flexShrink: 0,
+    "&&.MuiSkeleton-root": {
+      width: p.textLineWidth,
+      height: e.vars.size.baseSpacings["sp2-5"],
+      borderRadius: e.vars.size.borderRadius.r4,
+      backgroundColor: e.vars.palette.skeleton.default
+    }
+  }),
+  /**
+   * skeletonChevron: Ghost chevron; same base size as the real icons.
+   */
+  skeletonChevron: ({ theme: e, ownerState: i }) => ({
+    flexShrink: 0,
+    "&&.MuiSkeleton-root": {
+      borderRadius: e.vars.size.borderRadius.r4,
+      backgroundColor: e.vars.palette.skeleton.default,
+      ...r(e, i?.size || "medium", "base", (a) => ({
+        width: a,
+        height: a
+      }))
+    }
+  })
+};
+export {
+  f as devicesPickerStyles
+};