@multiplatform.one/frappe-ui 7.66.0 → 7.68.0

package/dist/jsx/list/RecordCard.native.js

@@ -33,6 +33,7 @@ var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
 var import_FacetBadge = require("./FacetBadge.native.js");
 var import_ImageWell = require("./ImageWell.native.js");
 function RecordCard(param) {
@@ -48,6 +49,7 @@ function RecordCard(param) {
     testID,
     favoriteTestID
   } = param;
+  var _this;
   var {
     t
   } = (0, import_react_i18next.useTranslation)();
@@ -57,21 +59,50 @@ function RecordCard(param) {
   } = (0, import_theme.useResolvedKnobs)({
     component: "Card"
   });
+  var theme = (0, import_tamagui.useTheme)();
   var handleToggleFavorite = function handleToggleFavorite2(event) {
     var _event_stopPropagation;
     event === null || event === void 0 ? void 0 : (_event_stopPropagation = event.stopPropagation) === null || _event_stopPropagation === void 0 ? void 0 : _event_stopPropagation.call(event);
     favorite === null || favorite === void 0 ? void 0 : favorite.toggle();
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Card, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Card, {
     testID,
-    ...knobProps.cardSurface,
-    // Full-bleed media: the card has no inset of its own and its radius
-    // clips the image well; the body below carries the inset.
-    padding: 0,
-    gap: 0,
-    overflow: "hidden",
-    "data-record-card-bleed": "",
-    elevation: knobProps.elevation,
+    media: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      position: "relative",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageWell.ImageWell, {
+        sources: images,
+        alt: title,
+        tint,
+        inset: 0.04,
+        borderRadius: 0,
+        ...{
+          "data-record-card-media": ""
+        }
+      }), favorite ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        position: "absolute",
+        top: "$1",
+        right: "$1",
+        zIndex: 2,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          plate: "media",
+          selected: false,
+          onPress: handleToggleFavorite,
+          col: favorite.active ? "$red9" : "$color11",
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+            size: 20,
+            weight: favorite.active ? "fill" : "regular",
+            color: (_this = favorite.active ? theme.red9 : theme.color11) === null || _this === void 0 ? void 0 : _this.val
+          }),
+          "aria-label": favorite.active ? t("Remove {{name}} from favorites", {
+            name: title
+          }) : t("Add {{name}} to favorites", {
+            name: title
+          }),
+          "aria-pressed": favorite.active,
+          testID: favoriteTestID
+        })
+      }) : null]
+    }),
     ...(0, import_theme.transitionProps)(knobProps.motion.control, ["boxShadow", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "elevation"]),
     pressStyle: {
       scale: 0.98,
@@ -82,93 +113,44 @@ function RecordCard(param) {
     onPress: function onPress1() {
       return onPress === null || onPress === void 0 ? void 0 : onPress();
     },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-      gap: 0,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-        position: "relative",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageWell.ImageWell, {
-          sources: images,
-          alt: title,
-          tint,
-          inset: 0.04,
-          borderRadius: 0,
-          ...{
-            "data-record-card-media": ""
-          }
-        }), favorite ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-          position: "absolute",
-          top: "$1",
-          right: "$1",
-          zIndex: 2,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            circular: true,
-            chromeless: true,
-            minWidth: knobProps.sizeToken,
-            minHeight: knobProps.sizeToken,
-            ...(0, import_theme.transitionProps)(knobProps.motion.control),
-            backgroundColor: "$background08",
-            pressStyle: {
-              backgroundColor: "$background",
-              scale: 0.92
-            },
-            onPress: handleToggleFavorite,
-            col: favorite.active ? "$red9" : "$color11",
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
-              size: 20,
-              weight: favorite.active ? "fill" : "regular"
-            }),
-            "aria-label": favorite.active ? t("Remove {{name}} from favorites", {
-              name: title
-            }) : t("Add {{name}} to favorites", {
-              name: title
-            }),
-            "aria-pressed": favorite.active,
-            testID: favoriteTestID
-          })
-        }) : null]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-        ...knobProps.panelPadding,
-        gap: "$1.5",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-          gap: "$2",
-          alignItems: "baseline",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            ...knobProps.heading,
-            fontWeight: "700",
-            fontSize: "$4",
-            numberOfLines: 1,
-            color: "$color12",
-            flexShrink: 1,
-            children: title
-          }), code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            fontSize: "$2",
-            fontWeight: "700",
-            color: "$color10",
-            flexShrink: 0,
-            ...{
-              "data-record-card-code": ""
-            },
-            children: code
-          }) : null]
-        }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          ...knobProps.body,
-          fontSize: "$2",
-          color: "$color10",
-          numberOfLines: 1,
-          children: subtitle
-        }) : null, badges.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-          gap: "$1.5",
-          flexWrap: "wrap",
-          children: badges.map(function (badge) {
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
-              label: badge.label,
-              tint: badge.tint,
-              size: "$3"
-            }, badge.value);
-          })
-        }) : null]
-      })]
-    })
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      gap: "$2",
+      alignItems: "baseline",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.heading,
+        fontWeight: "700",
+        fontSize: "$4",
+        numberOfLines: 1,
+        color: "$color12",
+        flexShrink: 1,
+        children: title
+      }), code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        fontWeight: "700",
+        color: "$color10",
+        flexShrink: 0,
+        ...{
+          "data-record-card-code": ""
+        },
+        children: code
+      }) : null]
+    }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.body,
+      fontSize: "$2",
+      color: "$color10",
+      numberOfLines: 1,
+      children: subtitle
+    }) : null, badges.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      gap: "$1.5",
+      flexWrap: "wrap",
+      children: badges.map(function (badge) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
+          label: badge.label,
+          tint: badge.tint,
+          size: "$3"
+        }, badge.value);
+      })
+    }) : null]
   });
 }
 //# sourceMappingURL=RecordCard.native.js.map

package/dist/jsx/list/RecordCard.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["RecordCard_native_exports","__export","RecordCard","module","exports","__toCommonJS","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react_i18next","import_FacetBadge","import_ImageWell","param","title","subtitle","code","images","tint","badges","onPress","favorite","testID","favoriteTestID","t","useTranslation","knobProps","elevation","elevationState","useResolvedKnobs","component","handleToggleFavorite","handleToggleFavorite2","event","_event_stopPropagation","stopPropagation","call","toggle","jsx","Card","cardSurface","padding","gap","overflow","transitionProps","motion","control","pressStyle","scale","pressKnobProps","role","onPress1","children","jsxs","YStack","position","ImageWell","sources","alt","inset","borderRadius","XStack","top","right","zIndex","Button","circular","chromeless","minWidth","sizeToken","minHeight","backgroundColor","col","active","icon","HeartIcon","size","weight","name","panelPadding","alignItems","Text","heading","fontWeight","fontSize","numberOfLines","color","flexShrink","body","length","flexWrap","map","badge","FacetBadge","label","value"],"sources":["../../../src/list/RecordCard.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["RecordCard_native_exports","__export","RecordCard","module","exports","__toCommonJS","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react_i18next","import_tamagui","import_FacetBadge","import_ImageWell","param","title","subtitle","code","images","tint","badges","onPress","favorite","testID","favoriteTestID","_this","t","useTranslation","knobProps","elevation","elevationState","useResolvedKnobs","component","theme","useTheme","handleToggleFavorite","handleToggleFavorite2","event","_event_stopPropagation","stopPropagation","call","toggle","jsxs","Card","media","YStack","position","children","jsx","ImageWell","sources","alt","inset","borderRadius","XStack","top","right","zIndex","Button","plate","selected","col","active","icon","HeartIcon","size","weight","color","red9","color11","val","name","transitionProps","motion","control","pressStyle","scale","pressKnobProps","role","onPress1","gap","alignItems","Text","heading","fontWeight","fontSize","numberOfLines","flexShrink","body","length","flexWrap","map","badge","FacetBadge","label","value"],"sources":["../../../src/list/RecordCard.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/list/ShufflePanel.mjs

@@ -1,10 +1,9 @@
-import { Button, Wheel, XStack, YStack } from "@multiplatform.one/components";
+import { Button, Tooltip, Wheel, XStack, YStack, useImageGridGeometry } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ArrowCounterClockwiseIcon, ArrowRightIcon } from "@phosphor-icons/react";
+import { ArrowRightIcon, ShuffleIcon } from "@phosphor-icons/react";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
-const pickWidth = "$12";
 function randomOtherIndex(current, length) {
   if (length < 2) return Math.max(0, current);
   const offset = 1 + Math.floor(Math.random() * (length - 1));
@@ -17,6 +16,7 @@ function ShufflePanel({
   itemLabel,
   renderPick,
   onGo,
+  grid,
   testID
 }) {
   const {
@@ -25,6 +25,10 @@ function ShufflePanel({
   const {
     knobProps
   } = useResolvedKnobs();
+  const {
+    columns,
+    gutter
+  } = useImageGridGeometry(grid);
   const named = useMemo(() => rows.filter(row => row.name), [rows]);
   const items = useMemo(() => named.map(row => ({
     value: row.name,
@@ -37,49 +41,64 @@ function ShufflePanel({
     const current = named.findIndex(row => row.name === pick.name);
     setSelected(named[randomOtherIndex(current, named.length)]?.name ?? "");
   };
+  const pickLabel = itemLabel(pick);
+  const tracks = Math.max(2, columns);
   return /* @__PURE__ */jsxs(XStack, {
     id,
     role: "region",
     "aria-label": label,
-    ...knobProps.surface,
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    ...knobProps.gap,
+    gap: gutter,
     alignItems: "center",
-    flexWrap: "wrap",
     testID,
-    children: [/* @__PURE__ */jsx(Wheel, {
-      items,
-      value: pick.name,
-      onChange: next => setSelected(String(next)),
-      visibleItems: 3,
-      loop: true,
-      "aria-label": label
-    }), /* @__PURE__ */jsx(YStack, {
-      width: pickWidth,
-      flexShrink: 0,
-      children: renderPick(pick)
-    }), /* @__PURE__ */jsxs(XStack, {
-      ...knobProps.gap,
+    children: [/* @__PURE__ */jsxs(YStack, {
+      flexGrow: tracks - 1,
+      flexShrink: 1,
+      flexBasis: gutter * (tracks - 2),
+      minWidth: 0,
       alignItems: "center",
-      flexShrink: 0,
-      children: [/* @__PURE__ */jsx(Button, {
-        outlined: true,
-        onPress: spin,
-        icon: /* @__PURE__ */jsx(ArrowCounterClockwiseIcon, {
-          size: 16
-        }),
-        testID: testID ? `${testID}-spin` : void 0,
-        children: t("Spin")
-      }), /* @__PURE__ */jsx(Button, {
-        theme: "accent",
-        onPress: () => onGo(pick),
-        iconAfter: /* @__PURE__ */jsx(ArrowRightIcon, {
-          size: 16
-        }),
-        testID: testID ? `${testID}-go` : void 0,
-        children: t("Go")
+      ...knobProps.gap,
+      children: [/* @__PURE__ */jsx(Wheel, {
+        items,
+        value: pick.name,
+        onChange: next => setSelected(String(next)),
+        visibleItems: 3,
+        loop: true,
+        "aria-label": label
+      }), /* @__PURE__ */jsxs(XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(Tooltip, {
+          content: t("Shuffle"),
+          children: /* @__PURE__ */jsx(Button, {
+            chromeless: true,
+            accentInk: true,
+            icon: ShuffleIcon,
+            "aria-label": t("Shuffle"),
+            onPress: spin,
+            testID: testID ? `${testID}-spin` : void 0
+          })
+        }), /* @__PURE__ */jsx(Tooltip, {
+          content: t("Open {{name}}", {
+            name: pickLabel
+          }),
+          children: /* @__PURE__ */jsx(Button, {
+            chromeless: true,
+            accentInk: true,
+            icon: ArrowRightIcon,
+            "aria-label": t("Open {{name}}", {
+              name: pickLabel
+            }),
+            onPress: () => onGo(pick),
+            testID: testID ? `${testID}-go` : void 0
+          })
+        })]
       })]
+    }), /* @__PURE__ */jsx(YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: 0,
+      children: renderPick(pick)
     })]
   });
 }

package/dist/jsx/list/ShufflePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Button","Wheel","XStack","YStack","useResolvedKnobs","ArrowCounterClockwiseIcon","ArrowRightIcon","useMemo","useState","useTranslation","jsx","jsxs","pickWidth","randomOtherIndex","current","length","Math","max","offset","floor","random","ShufflePanel","id","label","rows","itemLabel","renderPick","onGo","testID","t","knobProps","named","filter","row","name","items","map","value","selected","setSelected","pick","find","spin","findIndex","role","surface","borderRadius","panelPadding","gap","alignItems","flexWrap","children","onChange","next","String","visibleItems","loop","width","flexShrink","outlined","onPress","icon","size","theme","iconAfter"],"sources":["../../../src/list/ShufflePanel.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Button","Tooltip","Wheel","XStack","YStack","useImageGridGeometry","useResolvedKnobs","ArrowRightIcon","ShuffleIcon","useMemo","useState","useTranslation","jsx","jsxs","randomOtherIndex","current","length","Math","max","offset","floor","random","ShufflePanel","id","label","rows","itemLabel","renderPick","onGo","grid","testID","t","knobProps","columns","gutter","named","filter","row","name","items","map","value","selected","setSelected","pick","find","spin","findIndex","pickLabel","tracks","role","gap","alignItems","children","flexGrow","flexShrink","flexBasis","minWidth","onChange","next","String","visibleItems","loop","content","chromeless","accentInk","icon","onPress"],"sources":["../../../src/list/ShufflePanel.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/list/ShufflePanel.native.js

@@ -33,7 +33,6 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
-var pickWidth = "$12";
 function randomOtherIndex(current, length) {
   if (length < 2) return Math.max(0, current);
   var offset = 1 + Math.floor(Math.random() * (length - 1));
@@ -47,6 +46,7 @@ function ShufflePanel(param) {
     itemLabel,
     renderPick,
     onGo,
+    grid,
     testID
   } = param;
   var _named_find;
@@ -56,6 +56,10 @@ function ShufflePanel(param) {
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var {
+    columns,
+    gutter
+  } = (0, import_components.useImageGridGeometry)(grid);
   var named = (0, import_react2.useMemo)(function () {
     return rows.filter(function (row) {
       return row.name;
@@ -86,53 +90,72 @@ function ShufflePanel(param) {
     });
     setSelected((_ref = (_named_randomOtherIndex = named[randomOtherIndex(current, named.length)]) === null || _named_randomOtherIndex === void 0 ? void 0 : _named_randomOtherIndex.name) !== null && _ref !== void 0 ? _ref : "");
   };
+  var pickLabel = itemLabel(pick);
+  var tracks = Math.max(2, columns);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
     id,
     role: "region",
     "aria-label": label,
-    ...knobProps.surface,
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    ...knobProps.gap,
+    gap: gutter,
     alignItems: "center",
-    flexWrap: "wrap",
     testID,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Wheel, {
-      items,
-      value: pick.name,
-      onChange: function onChange(next) {
-        return setSelected(String(next));
-      },
-      visibleItems: 3,
-      loop: true,
-      "aria-label": label
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-      width: pickWidth,
-      flexShrink: 0,
-      children: renderPick(pick)
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-      ...knobProps.gap,
+    children: [
+    /* The controls span every track but the pick's, with the gutters
+    between them, so the pick lands on one tile's exact width. */
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      flexGrow: tracks - 1,
+      flexShrink: 1,
+      flexBasis: gutter * (tracks - 2),
+      minWidth: 0,
       alignItems: "center",
-      flexShrink: 0,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
-        outlined: true,
-        onPress: spin,
-        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowCounterClockwiseIcon, {
-          size: 16
-        }),
-        testID: testID ? `${testID}-spin` : void 0,
-        children: t("Spin")
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
-        theme: "accent",
-        onPress: function onPress() {
-          return onGo(pick);
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Wheel, {
+        items,
+        value: pick.name,
+        onChange: function onChange(next) {
+          return setSelected(String(next));
         },
-        iconAfter: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowRightIcon, {
-          size: 16
-        }),
-        testID: testID ? `${testID}-go` : void 0,
-        children: t("Go")
+        visibleItems: 3,
+        loop: true,
+        "aria-label": label
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: t("Shuffle"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+            chromeless: true,
+            accentInk: true,
+            icon: import_react.ShuffleIcon,
+            "aria-label": t("Shuffle"),
+            onPress: spin,
+            testID: testID ? `${testID}-spin` : void 0
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: t("Open {{name}}", {
+            name: pickLabel
+          }),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+            chromeless: true,
+            accentInk: true,
+            icon: import_react.ArrowRightIcon,
+            "aria-label": t("Open {{name}}", {
+              name: pickLabel
+            }),
+            onPress: function onPress() {
+              return onGo(pick);
+            },
+            testID: testID ? `${testID}-go` : void 0
+          })
+        })]
       })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: 0,
+      children: renderPick(pick)
     })]
   });
 }

package/dist/jsx/list/ShufflePanel.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","ShufflePanel_exports","ShufflePanel","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","import_react2","import_react_i18next","pickWidth","randomOtherIndex","current","length","Math","max","offset","floor","random","param","id","label","rows","itemLabel","renderPick","onGo","testID","_named_find","t","useTranslation","knobProps","useResolvedKnobs","named","useMemo","filter","row","items","map","selected","setSelected","useState","_ref","_named_randomOtherIndex","pick","find","spin","spin2","findIndex","jsxs","XStack","role","surface","borderRadius","panelPadding","gap","alignItems","flexWrap","children","jsx","Wheel"],"sources":["../../../src/list/ShufflePanel.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","ShufflePanel_exports","ShufflePanel","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","import_react2","import_react_i18next","randomOtherIndex","current","length","Math","max","offset","floor","random","param","id","label","rows","itemLabel","renderPick","onGo","grid","testID","_named_find","t","useTranslation","knobProps","useResolvedKnobs","columns","gutter","useImageGridGeometry","named","useMemo","filter","row","items","map","selected","setSelected","useState","_ref","_named_randomOtherIndex","pick","find","spin","spin2","findIndex","pickLabel","tracks","jsxs","XStack","role","gap","alignItems","children","YStack","flexGrow","flexShrink","flexBasis","minWidth","jsx","Wheel","onChange","next","String","visibleItems","loop","Tooltip"],"sources":["../../../src/list/ShufflePanel.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/list/listColumns.mjs

@@ -132,7 +132,6 @@ function LikeControl({
     });
   }
   return /* @__PURE__ */jsx(Button, {
-    circular: true,
     chromeless: true,
     size: "$2",
     col: liked ? "$red10" : "$color8",
@@ -142,6 +141,7 @@ function LikeControl({
     }),
     "aria-label": likeLabel,
     "aria-pressed": liked,
+    selected: false,
     onPress: event => {
       stopRowPress(event);
       onToggleLike(name, !liked);