@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/Toast_module.css

@@ -1,30 +1,30 @@
-:is(html.To9GSa_toast-add, html.To9GSa_toast-remove, html.To9GSa_toast-expand, html.To9GSa_toast-collapse, html.To9GSa_toast-clear, html:active-view-transition-type(To9GSa_toast-add, To9GSa_toast-remove, To9GSa_toast-expand, To9GSa_toast-collapse, To9GSa_toast-clear)) {
+:is(html.chyGla_toast-add, html.chyGla_toast-remove, html.chyGla_toast-expand, html.chyGla_toast-collapse, html.chyGla_toast-clear, html:active-view-transition-type(chyGla_toast-add, chyGla_toast-remove, chyGla_toast-expand, chyGla_toast-collapse, chyGla_toast-clear)) {
   view-transition-name: none;
 
-  & .To9GSa_toast-controls {
-    view-transition-name: To9GSa_toast-controls;
+  & .chyGla_toast-controls {
+    view-transition-name: chyGla_toast-controls;
   }
 
-  & .To9GSa_toast-background {
-    view-transition-name: To9GSa_toast-background;
+  & .chyGla_toast-background {
+    view-transition-name: chyGla_toast-background;
   }
 
-  &::view-transition-group(To9GSa_toast-background) {
+  &::view-transition-group(chyGla_toast-background) {
     z-index: 0;
     will-change: transform;
   }
 
-  &::view-transition-group(.To9GSa_toast), &::view-transition-group(To9GSa_toast-list-expanded), &::view-transition-group(To9GSa_toast-list-collapsed) {
+  &::view-transition-group(.chyGla_toast), &::view-transition-group(chyGla_toast-list-expanded), &::view-transition-group(chyGla_toast-list-collapsed) {
     z-index: 1;
     will-change: transform;
   }
 
-  &::view-transition-group(To9GSa_toast-controls) {
+  &::view-transition-group(chyGla_toast-controls) {
     z-index: 2;
     will-change: transform;
   }
 
-  &::view-transition-group(To9GSa_toast-content), &::view-transition-group(To9GSa_toast-expand), &::view-transition-group(To9GSa_toast-action), &::view-transition-group(To9GSa_toast-close) {
+  &::view-transition-group(chyGla_toast-content), &::view-transition-group(chyGla_toast-expand), &::view-transition-group(chyGla_toast-action), &::view-transition-group(chyGla_toast-close) {
     z-index: 3;
     will-change: transform;
   }
@@ -34,107 +34,107 @@
   }
 }
 
-:is(html.To9GSa_toast-add, html.To9GSa_toast-remove, html:active-view-transition-type(To9GSa_toast-add, To9GSa_toast-remove)) {
-  &:not(.To9GSa_reduceMotion) {
-    &::view-transition-new(.To9GSa_toast):only-child {
-      animation-name: To9GSa_slide-in;
+:is(html.chyGla_toast-add, html.chyGla_toast-remove, html:active-view-transition-type(chyGla_toast-add, chyGla_toast-remove)) {
+  &:not(.chyGla_reduceMotion) {
+    &::view-transition-new(.chyGla_toast):only-child {
+      animation-name: chyGla_slide-in;
     }
 
-    &::view-transition-old(.To9GSa_toast):only-child {
-      animation-name: To9GSa_slide-out;
+    &::view-transition-old(.chyGla_toast):only-child {
+      animation-name: chyGla_slide-out;
     }
   }
 
-  &::view-transition-group(.To9GSa_toast.To9GSa_bottom) {
+  &::view-transition-group(.chyGla_toast.chyGla_bottom) {
     --slideX: 0;
     --slideY: calc(100% + 12px);
   }
 
-  &::view-transition-group(.To9GSa_toast.To9GSa_top) {
+  &::view-transition-group(.chyGla_toast.chyGla_top) {
     --slideX: 0;
     --slideY: calc(-100% - 12px);
   }
 
-  &::view-transition-group(.To9GSa_toast.To9GSa_start) {
+  &::view-transition-group(.chyGla_toast.chyGla_start) {
     --slideX: calc(-100% - 12px);
     --slideY: 0;
   }
 
-  &::view-transition-group(.To9GSa_toast.To9GSa_end) {
+  &::view-transition-group(.chyGla_toast.chyGla_end) {
     --slideX: calc(100% + 12px);
     --slideY: 0;
   }
 }
 
-:is(html.To9GSa_toast-expand, html:active-view-transition-type(To9GSa_toast-expand)) {
-  &::view-transition-group(To9GSa_toast-expand) {
+:is(html.chyGla_toast-expand, html:active-view-transition-type(chyGla_toast-expand)) {
+  &::view-transition-group(chyGla_toast-expand) {
     animation-duration: .3s;
   }
 }
 
-:is(html.To9GSa_toast-collapse, html:active-view-transition-type(To9GSa_toast-collapse)) {
-  &::view-transition-group(To9GSa_toast-expand) {
+:is(html.chyGla_toast-collapse, html:active-view-transition-type(chyGla_toast-collapse)) {
+  &::view-transition-group(chyGla_toast-expand) {
     animation-duration: .6s;
   }
 }
 
-:is(html.To9GSa_toast-expand, html.To9GSa_toast-collapse, html:active-view-transition-type(To9GSa_toast-expand, To9GSa_toast-collapse)) {
-  &:not(.To9GSa_reduceMotion) {
-    & .To9GSa_toast-content {
-      view-transition-name: To9GSa_toast-content;
+:is(html.chyGla_toast-expand, html.chyGla_toast-collapse, html:active-view-transition-type(chyGla_toast-expand, chyGla_toast-collapse)) {
+  &:not(.chyGla_reduceMotion) {
+    & .chyGla_toast-content {
+      view-transition-name: chyGla_toast-content;
     }
 
-    & .To9GSa_toast-expand {
-      view-transition-name: To9GSa_toast-expand;
+    & .chyGla_toast-expand {
+      view-transition-name: chyGla_toast-expand;
     }
 
-    & .To9GSa_toast-action {
-      view-transition-name: To9GSa_toast-action;
+    & .chyGla_toast-action {
+      view-transition-name: chyGla_toast-action;
     }
 
-    & .To9GSa_toast-close {
-      view-transition-name: To9GSa_toast-close;
+    & .chyGla_toast-close {
+      view-transition-name: chyGla_toast-close;
     }
 
-    & .To9GSa_toast-controls {
+    & .chyGla_toast-controls {
       display: flex;
     }
 
-    &::view-transition-old(.To9GSa_toast), &::view-transition-new(.To9GSa_toast) {
+    &::view-transition-old(.chyGla_toast), &::view-transition-new(.chyGla_toast) {
       width: 100%;
       height: 100%;
     }
 
-    &::view-transition-old(.To9GSa_background-toast), &::view-transition-new(.To9GSa_background-toast) {
+    &::view-transition-old(.chyGla_background-toast), &::view-transition-new(.chyGla_background-toast) {
       object-fit: cover;
       object-position: top center;
       clip-path: inset(0 round 10px);
     }
   }
 
-  &.To9GSa_reduceMotion {
-    & .To9GSa_toast {
+  &.chyGla_reduceMotion {
+    & .chyGla_toast {
       view-transition-name: none !important;
     }
 
-    & .To9GSa_toast-list-expanded {
-      view-transition-name: To9GSa_toast-list-expanded;
+    & .chyGla_toast-list-expanded {
+      view-transition-name: chyGla_toast-list-expanded;
     }
 
-    & .To9GSa_toast-list-collapsed {
-      view-transition-name: To9GSa_toast-list-collapsed;
+    & .chyGla_toast-list-collapsed {
+      view-transition-name: chyGla_toast-list-collapsed;
     }
   }
 }
 
-@keyframes To9GSa_slide-in {
+@keyframes chyGla_slide-in {
   from {
     translate: var(--slideX) var(--slideY);
     opacity: 0;
   }
 }
 
-@keyframes To9GSa_slide-out {
+@keyframes chyGla_slide-out {
   to {
     translate: var(--slideX) var(--slideY);
     opacity: 0;

package/dist/private/Toast_module.css.map

@@ -1 +1 @@
-{"mappings":"AACA;;;EAQE;;;;EAIA;;;;EAIA;;;;;EAKA;;;;;EAOA;;;;;EAKA;;;;;EAQA;;;;;AAKF;EAIE;IACE;;;;IAIA;;;;;EAKF;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;;AAQF;EAEE;;;;;AAKF;EAEE;;;;;AAKF;EAGE;IAEE;;;;IAIA;;;;IAIA;;;;IAIA;;;;IAKA;;;;IAKA;;;;;IAUA;;;;;;;EAUF;IAEE;;;;IAIA;;;;IAIA;;;;;;AAMJ;;;;;;;AAOA","sources":["packages/@react-spectrum/s2/src/Toast.module.css"],"sourcesContent":["/* Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element */\nhtml.toast-add,\nhtml.toast-remove,\nhtml.toast-expand,\nhtml.toast-collapse,\nhtml.toast-clear,\nhtml:active-view-transition-type(toast-add, toast-remove, toast-expand, toast-collapse, toast-clear) {\n  view-transition-name: none;\n\n  .toast-controls {\n    view-transition-name: toast-controls;\n  }\n\n  .toast-background {\n    view-transition-name: toast-background;\n  }\n\n  &::view-transition-group(toast-background) {\n    z-index: 0;\n    will-change: transform;\n  }\n\n  &::view-transition-group(.toast),\n  &::view-transition-group(toast-list-expanded),\n  &::view-transition-group(toast-list-collapsed) {\n    z-index: 1;\n    will-change: transform;\n  }\n\n  &::view-transition-group(toast-controls) {\n    z-index: 2;\n    will-change: transform;\n  }\n\n  &::view-transition-group(toast-content),\n  &::view-transition-group(toast-expand),\n  &::view-transition-group(toast-action),\n  &::view-transition-group(toast-close) {\n    z-index: 3;\n    will-change: transform;\n  }\n\n  &::view-transition-group(*) {\n    animation-duration: 400ms;\n  }\n}\n\nhtml.toast-add,\nhtml.toast-remove,\nhtml:active-view-transition-type(toast-add, toast-remove) {\n  /* The new toast should slide in and out. With reduce motion enabled, it fades by default. */\n  &:not(.reduceMotion) {\n    &::view-transition-new(.toast):only-child {\n      animation-name: slide-in;\n    }\n\n    &::view-transition-old(.toast):only-child {\n      animation-name: slide-out;\n    }\n  }\n\n  &::view-transition-group(.toast.bottom) {\n    --slideX: 0;\n    --slideY: calc(100% + 12px);\n  }\n  \n  &::view-transition-group(.toast.top) {\n    --slideX: 0;\n    --slideY: calc(-100% - 12px);\n  }\n  \n  &::view-transition-group(.toast.start) {\n    --slideX: calc(-100% - 12px);\n    --slideY: 0;\n  }\n  \n  &::view-transition-group(.toast.end) {\n    --slideX: calc(100% + 12px);\n    --slideY: 0;\n  }  \n}\n\n/* Make the \"Show all\" button animate slightly faster/slower than other components when expanding/collapsing.\n * This prevents it from appearing to overlap the text when it fades out and the text repositions. */\nhtml.toast-expand,\nhtml:active-view-transition-type(toast-expand) {\n  &::view-transition-group(toast-expand) {\n    animation-duration: 300ms;\n  }\n}\n\nhtml.toast-collapse,\nhtml:active-view-transition-type(toast-collapse) {\n  &::view-transition-group(toast-expand) {\n    animation-duration: 600ms;\n  }\n}\n\nhtml.toast-expand,\nhtml.toast-collapse,\nhtml:active-view-transition-type(toast-expand, toast-collapse) {\n  &:not(.reduceMotion) {\n    /* When expanding/collapsing, animate the components of the main toast individually. */\n    .toast-content {\n      view-transition-name: toast-content;\n    }\n\n    .toast-expand {\n      view-transition-name: toast-expand;\n    }\n\n    .toast-action {\n      view-transition-name: toast-action;\n    }\n\n    .toast-close {\n      view-transition-name: toast-close;\n    }\n\n    /* Force toast controls to be visible during the animation */\n    .toast-controls {\n      display: flex;\n    }\n\n    /* Smoothly transition the size of toasts. */\n    &::view-transition-old(.toast),\n    &::view-transition-new(.toast) {\n      /* Make the old and new images fill the size of the parent group. */\n      height: 100%;\n      width: 100%;\n    }\n\n    /* Background toasts don't have their components split apart in separate view transitions.\n     * This means we need to do some tricks to get the aspect ratio to transition smoothly.\n     * Clipping messes up the shadows a bit, but it's less noticeable on the background toasts. */\n    &::view-transition-old(.background-toast),\n    &::view-transition-new(.background-toast) {\n      /* Cover all of the available space without stretching the aspect ratio */\n      object-fit: cover;\n      object-position: top center;\n      /* Clip to retain rounded corners */\n      clip-path: inset(0px round 10px);\n    }\n  }\n\n  &.reduceMotion {\n    /* Do not animate individual toasts in reduced motion. The whole list cross-fades instead. */\n    .toast {\n      view-transition-name: none !important;\n    }\n\n    .toast-list-expanded {\n      view-transition-name: toast-list-expanded;\n    }\n\n    .toast-list-collapsed {\n      view-transition-name: toast-list-collapsed;\n    }\n  }\n}\n\n@keyframes slide-in {\n  from {\n    translate: var(--slideX) var(--slideY);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-out {\n  to {\n    translate: var(--slideX) var(--slideY);\n    opacity: 0;\n  }\n}\n"],"names":[],"version":3,"file":"Toast_module.css.map"}
+{"mappings":"AACA;;;EAcE;;;;EAIA;;;;EAIA;;;;;EAKA;;;;;EAOA;;;;;EAKA;;;;;EAQA;;;;;AAKF;EAIE;IACE;;;;IAIA;;;;;EAKF;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;;AAQF;EAEE;;;;;AAKF;EAEE;;;;;AAKF;EAGE;IAEE;;;;IAIA;;;;IAIA;;;;IAIA;;;;IAKA;;;;IAKA;;;;;IAUA;;;;;;;EAUF;IAEE;;;;IAIA;;;;IAIA;;;;;;AAMJ;;;;;;;AAOA","sources":["packages/@react-spectrum/s2/src/Toast.module.css"],"sourcesContent":["/* Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element */\nhtml.toast-add,\nhtml.toast-remove,\nhtml.toast-expand,\nhtml.toast-collapse,\nhtml.toast-clear,\nhtml:active-view-transition-type(\n  toast-add,\n  toast-remove,\n  toast-expand,\n  toast-collapse,\n  toast-clear\n) {\n  view-transition-name: none;\n\n  .toast-controls {\n    view-transition-name: toast-controls;\n  }\n\n  .toast-background {\n    view-transition-name: toast-background;\n  }\n\n  &::view-transition-group(toast-background) {\n    z-index: 0;\n    will-change: transform;\n  }\n\n  &::view-transition-group(.toast),\n  &::view-transition-group(toast-list-expanded),\n  &::view-transition-group(toast-list-collapsed) {\n    z-index: 1;\n    will-change: transform;\n  }\n\n  &::view-transition-group(toast-controls) {\n    z-index: 2;\n    will-change: transform;\n  }\n\n  &::view-transition-group(toast-content),\n  &::view-transition-group(toast-expand),\n  &::view-transition-group(toast-action),\n  &::view-transition-group(toast-close) {\n    z-index: 3;\n    will-change: transform;\n  }\n\n  &::view-transition-group(*) {\n    animation-duration: 400ms;\n  }\n}\n\nhtml.toast-add,\nhtml.toast-remove,\nhtml:active-view-transition-type(toast-add, toast-remove) {\n  /* The new toast should slide in and out. With reduce motion enabled, it fades by default. */\n  &:not(.reduceMotion) {\n    &::view-transition-new(.toast):only-child {\n      animation-name: slide-in;\n    }\n\n    &::view-transition-old(.toast):only-child {\n      animation-name: slide-out;\n    }\n  }\n\n  &::view-transition-group(.toast.bottom) {\n    --slideX: 0;\n    --slideY: calc(100% + 12px);\n  }\n\n  &::view-transition-group(.toast.top) {\n    --slideX: 0;\n    --slideY: calc(-100% - 12px);\n  }\n\n  &::view-transition-group(.toast.start) {\n    --slideX: calc(-100% - 12px);\n    --slideY: 0;\n  }\n\n  &::view-transition-group(.toast.end) {\n    --slideX: calc(100% + 12px);\n    --slideY: 0;\n  }\n}\n\n/* Make the \"Show all\" button animate slightly faster/slower than other components when expanding/collapsing.\n * This prevents it from appearing to overlap the text when it fades out and the text repositions. */\nhtml.toast-expand,\nhtml:active-view-transition-type(toast-expand) {\n  &::view-transition-group(toast-expand) {\n    animation-duration: 300ms;\n  }\n}\n\nhtml.toast-collapse,\nhtml:active-view-transition-type(toast-collapse) {\n  &::view-transition-group(toast-expand) {\n    animation-duration: 600ms;\n  }\n}\n\nhtml.toast-expand,\nhtml.toast-collapse,\nhtml:active-view-transition-type(toast-expand, toast-collapse) {\n  &:not(.reduceMotion) {\n    /* When expanding/collapsing, animate the components of the main toast individually. */\n    .toast-content {\n      view-transition-name: toast-content;\n    }\n\n    .toast-expand {\n      view-transition-name: toast-expand;\n    }\n\n    .toast-action {\n      view-transition-name: toast-action;\n    }\n\n    .toast-close {\n      view-transition-name: toast-close;\n    }\n\n    /* Force toast controls to be visible during the animation */\n    .toast-controls {\n      display: flex;\n    }\n\n    /* Smoothly transition the size of toasts. */\n    &::view-transition-old(.toast),\n    &::view-transition-new(.toast) {\n      /* Make the old and new images fill the size of the parent group. */\n      height: 100%;\n      width: 100%;\n    }\n\n    /* Background toasts don't have their components split apart in separate view transitions.\n     * This means we need to do some tricks to get the aspect ratio to transition smoothly.\n     * Clipping messes up the shadows a bit, but it's less noticeable on the background toasts. */\n    &::view-transition-old(.background-toast),\n    &::view-transition-new(.background-toast) {\n      /* Cover all of the available space without stretching the aspect ratio */\n      object-fit: cover;\n      object-position: top center;\n      /* Clip to retain rounded corners */\n      clip-path: inset(0px round 10px);\n    }\n  }\n\n  &.reduceMotion {\n    /* Do not animate individual toasts in reduced motion. The whole list cross-fades instead. */\n    .toast {\n      view-transition-name: none !important;\n    }\n\n    .toast-list-expanded {\n      view-transition-name: toast-list-expanded;\n    }\n\n    .toast-list-collapsed {\n      view-transition-name: toast-list-collapsed;\n    }\n  }\n}\n\n@keyframes slide-in {\n  from {\n    translate: var(--slideX) var(--slideY);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-out {\n  to {\n    translate: var(--slideX) var(--slideY);\n    opacity: 0;\n  }\n}\n"],"names":[],"version":3,"file":"Toast_module.css.map"}

package/dist/private/ToggleButton.cjs

@@ -1,6 +1,7 @@
 require("./ToggleButton.css");
 var $6e265ff388155b91$exports = require("./ActionButton.cjs");
 var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
+var $411768293e842abb$exports = require("./CornerTriangle.cjs");
 var $bde97c91243ed164$exports = require("../../icons/Icon.cjs");
 var $2061c83559b50a66$exports = require("./pressScale.cjs");
 var $5eb75e0c130e0669$exports = require("../../icons/Skeleton.cjs");
@@ -13,6 +14,7 @@ var $kyLWK$reactjsxruntime = require("react/jsx-runtime");
 var $kyLWK$reactariacomponentsslots = require("react-aria-components/slots");
 var $kyLWK$react = require("react");
 var $kyLWK$reactariacomponentsToggleButton = require("react-aria-components/ToggleButton");
+var $kyLWK$reactariaI18nProvider = require("react-aria/I18nProvider");
 
 
 function $parcel$export(e, n, v, s) {
@@ -45,6 +47,8 @@ $parcel$export(module.exports, "ToggleButton", () => $d16e5203405a91b7$export$d2
 
 
 
+
+
 const $d16e5203405a91b7$export$43506d75ebd2e218 = /*#__PURE__*/ (0, $kyLWK$react.createContext)(null);
 const $d16e5203405a91b7$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $kyLWK$react.forwardRef)(function ToggleButton(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $d16e5203405a91b7$export$43506d75ebd2e218);
@@ -53,7 +57,9 @@ const $d16e5203405a91b7$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $kyLWK$react
     let ctx = (0, $kyLWK$reactariacomponentsslots.useSlottedContext)((0, $428d056a8f9b19e5$exports.ToggleButtonGroupContext));
     let isInGroup = !!ctx;
     let { density: density = 'regular', isJustified: isJustified, orientation: orientation = 'horizontal', staticColor: staticColor = props.staticColor, isQuiet: isQuiet = props.isQuiet, isEmphasized: isEmphasized = props.isEmphasized, size: size = props.size || 'M', isDisabled: isDisabled = props.isDisabled } = ctx || {};
-    return /*#__PURE__*/ (0, $kyLWK$reactjsxruntime.jsx)((0, $kyLWK$reactariacomponentsToggleButton.ToggleButton), {
+    let { holdAffordance: holdAffordance } = props;
+    let { direction: direction } = (0, $kyLWK$reactariaI18nProvider.useLocale)();
+    return /*#__PURE__*/ (0, $kyLWK$reactjsxruntime.jsxs)((0, $kyLWK$reactariacomponentsToggleButton.ToggleButton), {
         ...props,
         isDisabled: isDisabled,
         ref: domRef,
@@ -71,33 +77,60 @@ const $d16e5203405a91b7$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $kyLWK$react
                 orientation: orientation,
                 isInGroup: isInGroup
             }, props.styles),
-        children: /*#__PURE__*/ (0, $kyLWK$reactjsxruntime.jsx)((0, $kyLWK$reactariacomponentsslots.Provider), {
-            values: [
-                [
-                    (0, $5eb75e0c130e0669$exports.SkeletonContext),
-                    null
-                ],
-                [
-                    (0, $6367bc87eb7d24ad$exports.TextContext),
-                    {
-                        styles: " TAzEcG13 QAzEcG13 _Jb13 _Nc13 Pc13 _Yb13 _7c13"
-                    }
+        children: [
+            /*#__PURE__*/ (0, $kyLWK$reactjsxruntime.jsx)((0, $kyLWK$reactariacomponentsslots.Provider), {
+                values: [
+                    [
+                        (0, $5eb75e0c130e0669$exports.SkeletonContext),
+                        null
+                    ],
+                    [
+                        (0, $6367bc87eb7d24ad$exports.TextContext),
+                        {
+                            styles: " TAzEcG15 QAzEcG15 _Jb15 _Nc15 Pc15 _Yb15 _7c15"
+                        }
+                    ],
+                    [
+                        (0, $bde97c91243ed164$exports.IconContext),
+                        {
+                            render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
+                                slot: 'icon',
+                                styles: " _Ja15"
+                            }),
+                            styles: " ZuUmpre15 FuUmpre15 I67logd15 _va15"
+                        }
+                    ]
                 ],
-                [
-                    (0, $bde97c91243ed164$exports.IconContext),
-                    {
-                        render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
-                            slot: 'icon',
-                            styles: " _Ja13"
-                        }),
-                        styles: " ZuUmpre13 FuUmpre13 I67logd13 _va13"
+                children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $kyLWK$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
+                    children: props.children
+                }) : props.children
+            }),
+            holdAffordance && /*#__PURE__*/ (0, $kyLWK$reactjsxruntime.jsx)((0, $411768293e842abb$exports.default), {
+                size: size === 'XS' ? 'S' : size,
+                className: function anonymous(props) {
+                    let rules = " ";
+                    rules += ' _Pa15';
+                    if (props.size === "XL") rules += ' _zWJpoB15';
+                    else if (props.size === "L") rules += ' _zC1otk15';
+                    else if (props.size === "M") rules += ' _zE15';
+                    else if (props.size === "S") rules += ' _zwtfhvc15';
+                    else if (props.size === "XS") rules += ' _zwtfhvc15';
+                    if (props.size === "XL") rules += ' _lWJpoB15';
+                    else if (props.size === "L") rules += ' _lC1otk15';
+                    else if (props.size === "M") rules += ' _lE15';
+                    else if (props.size === "S") rules += ' _lwtfhvc15';
+                    else if (props.size === "XS") rules += ' _lwtfhvc15';
+                    if (props.direction === "rtl") {
+                        rules += ' -Z4Pn4c-a15';
+                        rules += ' __Ha15';
                     }
-                ]
-            ],
-            children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $kyLWK$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
-                children: props.children
-            }) : props.children
-        })
+                    return rules;
+                }({
+                    direction: direction,
+                    size: size
+                })
+            })
+        ]
     });
 });
 

package/dist/private/ToggleButton.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AA0BM,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,MAAM,CAAA,GAAA,iDAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,gBACvB,eAAe,MAAM,YAAY,QACjC,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAEZ,qBACE,gCAAC,CAAA,GAAA,mDAAc;QACZ,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,mCAAQ,EAAE;gBACnE,GAAG,WAAW;6BACd;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;8BACA;gBACA,WAAW;yBACX;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,wCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components/ToggleButton';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {\n  /** The content to display in the button. */\n  children: ReactNode,\n  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n  isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n  props = useFormProps(props as any);\n  let domRef = useFocusableRef(ref);\n  let ctx = useSlottedContext(ToggleButtonGroupContext);\n  let isInGroup = !!ctx;\n  let {\n    density = 'regular',\n    isJustified,\n    orientation = 'horizontal',\n    staticColor = props.staticColor,\n    isQuiet = props.isQuiet,\n    isEmphasized = props.isEmphasized,\n    size = props.size || 'M',\n    isDisabled = props.isDisabled\n  } = ctx || {};\n\n  return (\n    <RACToggleButton\n      {...props}\n      isDisabled={isDisabled}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n        ...renderProps,\n        staticColor,\n        isStaticColor: !!staticColor,\n        size,\n        isQuiet,\n        isEmphasized,\n        isPending: false,\n        density,\n        isJustified,\n        orientation,\n        isInGroup\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </RACToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"ToggleButton.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;AAsDM,MAAM,0DACX,CAAA,GAAA,0BAAY,EAAgF;AAMvF,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAC9C,KAAwB,EACxB,GAAoC;IAEpC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,MAAM,CAAA,GAAA,iDAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,gBACvB,eAAe,MAAM,YAAY,QACjC,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IACZ,IAAI,kBAAC,cAAc,EAAC,GAAG;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAE1B,qBACE,iCAAC,CAAA,GAAA,mDAAc;QACZ,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cACT,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,CAAA,GAAA,mCAAQ,EACN;gBACE,GAAG,WAAW;6BACd;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;8BACA;gBACA,WAAW;yBACX;6BACA;6BACA;2BACA;YACF,GACA,MAAM,MAAM;;0BAGhB,gCAAC,CAAA,GAAA,wCAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,yCAAc;wBAAG;qBAAK;oBACvB;wBAAC,CAAA,GAAA,qCAAU;wBAAG;4BAAC,MAAM;wBAA+D;qBAAE;oBACtF;wBACE,CAAA,GAAA,qCAAU;wBACV;4BACE,QAAQ,CAAA,GAAA,wCAAa,EAAE;gCAAC,MAAM;gCAAQ,MAAM;4BAAmB;4BAC/D,MAAM;wBACR;qBACD;iBACF;0BACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;8BAAG,MAAM,QAAQ;qBAAW,MAAM,QAAQ;;YAErF,gCACC,gCAAC,CAAA,GAAA,iCAAa;gBACZ,MAAM,SAAS,OAAO,MAAM;gBAC5B,WAAW;;;;;;;;;;;;;;;;;;kBAyBR;+BAAC;0BAAW;gBAAI;;;;AAK7B","sources":["packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport CornerTriangle from '../ui-icons/CornerTriangle';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {fontRelative, space, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {\n  ToggleButton as RACToggleButton,\n  ToggleButtonProps as RACToggleButtonProps\n} from 'react-aria-components/ToggleButton';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps\n  extends\n    Omit<\n      RACToggleButtonProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ActionButtonStyleProps {\n  /** The content to display in the button. */\n  children: ReactNode;\n  /**\n   * Whether the button should be displayed with an [emphasized\n   * style](https://spectrum.adobe.com/page/action-button/#Emphasis).\n   */\n  isEmphasized?: boolean;\n}\n\ninterface ToggleButtonContextProps extends Partial<ToggleButtonProps> {\n  holdAffordance?: boolean;\n}\n\nexport const ToggleButtonContext =\n  createContext<ContextValue<ToggleButtonContextProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(\n  props: ToggleButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n  props = useFormProps(props as any);\n  let domRef = useFocusableRef(ref);\n  let ctx = useSlottedContext(ToggleButtonGroupContext);\n  let isInGroup = !!ctx;\n  let {\n    density = 'regular',\n    isJustified,\n    orientation = 'horizontal',\n    staticColor = props.staticColor,\n    isQuiet = props.isQuiet,\n    isEmphasized = props.isEmphasized,\n    size = props.size || 'M',\n    isDisabled = props.isDisabled\n  } = ctx || {};\n  let {holdAffordance} = props as ToggleButtonContextProps;\n  let {direction} = useLocale();\n\n  return (\n    <RACToggleButton\n      {...props}\n      isDisabled={isDisabled}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        btnStyles(\n          {\n            ...renderProps,\n            staticColor,\n            isStaticColor: !!staticColor,\n            size,\n            isQuiet,\n            isEmphasized,\n            isPending: false,\n            density,\n            isJustified,\n            orientation,\n            isInGroup\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n          [\n            IconContext,\n            {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }\n          ]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n      {holdAffordance && (\n        <CornerTriangle\n          size={size === 'XS' ? 'S' : size}\n          className={style({\n            position: 'absolute',\n            insetEnd: {\n              size: {\n                XS: space(3),\n                S: space(3),\n                M: 4,\n                L: space(5),\n                XL: space(6)\n              }\n            },\n            bottom: {\n              size: {\n                XS: space(3),\n                S: space(3),\n                M: 4,\n                L: space(5),\n                XL: space(6)\n              }\n            },\n            scaleX: {\n              direction: {\n                rtl: -1\n              }\n            }\n          })({direction, size})}\n        />\n      )}\n    </RACToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"ToggleButton.cjs.map"}

package/dist/private/ToggleButton.css

@@ -1,50 +1,94 @@
 @layer _.a {
-  .TAzEcG13 {
+  .TAzEcG15 {
     padding-top: var(--labelPadding);
   }
 
-  .QAzEcG13 {
+  .QAzEcG15 {
     padding-bottom: var(--labelPadding);
   }
 
-  ._Jb13 {
+  ._Jb15 {
     order: 1;
   }
 
-  ._Nc13 {
+  ._Nc15 {
     overflow-x: hidden;
   }
 
-  .Pc13 {
+  .Pc15 {
     overflow-y: hidden;
   }
 
-  ._Yb13 {
+  ._Yb15 {
     text-overflow: ellipsis;
   }
 
-  ._7c13 {
+  ._7c15 {
     white-space: nowrap;
   }
 
-  ._Ja13 {
+  ._Ja15 {
     order: 0;
   }
 
-  .ZuUmpre13 {
+  .ZuUmpre15 {
     width: 1.42857em;
   }
 
-  .FuUmpre13 {
+  .FuUmpre15 {
     height: 1.42857em;
   }
 
-  .I67logd13 {
+  .I67logd15 {
     margin-inline-start: var(--iconMargin);
   }
 
-  ._va13 {
+  ._va15 {
     flex-shrink: 0;
   }
+
+  ._Pa15 {
+    position: absolute;
+  }
+
+  ._zwtfhvc15 {
+    inset-inline-end: .1875rem;
+  }
+
+  ._zE15 {
+    inset-inline-end: 4px;
+  }
+
+  ._zC1otk15 {
+    inset-inline-end: .3125rem;
+  }
+
+  ._zWJpoB15 {
+    inset-inline-end: .375rem;
+  }
+
+  ._lwtfhvc15 {
+    bottom: .1875rem;
+  }
+
+  ._lE15 {
+    bottom: 4px;
+  }
+
+  ._lC1otk15 {
+    bottom: .3125rem;
+  }
+
+  ._lWJpoB15 {
+    bottom: .375rem;
+  }
+
+  .-Z4Pn4c-a15 {
+    --scaleX: -1;
+  }
+
+  .__Ha15 {
+    scale: var(--scaleX, 1) var(--scaleY, 1);
+  }
 }
 /*# sourceMappingURL=ToggleButton.css.map */

package/dist/private/ToggleButton.css.map

@@ -1 +1 @@
-{"mappings":"ACiFiC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA","sources":["bc1013d4d937a6f8","packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["@import \"2356498b79989caa\";\n@import \"00644bdfe594b970\";\n@import \"2645bae9c4681078\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components/ToggleButton';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {\n  /** The content to display in the button. */\n  children: ReactNode,\n  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n  isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n  props = useFormProps(props as any);\n  let domRef = useFocusableRef(ref);\n  let ctx = useSlottedContext(ToggleButtonGroupContext);\n  let isInGroup = !!ctx;\n  let {\n    density = 'regular',\n    isJustified,\n    orientation = 'horizontal',\n    staticColor = props.staticColor,\n    isQuiet = props.isQuiet,\n    isEmphasized = props.isEmphasized,\n    size = props.size || 'M',\n    isDisabled = props.isDisabled\n  } = ctx || {};\n\n  return (\n    <RACToggleButton\n      {...props}\n      isDisabled={isDisabled}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n        ...renderProps,\n        staticColor,\n        isStaticColor: !!staticColor,\n        size,\n        isQuiet,\n        isEmphasized,\n        isPending: false,\n        density,\n        isJustified,\n        orientation,\n        isInGroup\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </RACToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"ToggleButton.css.map"}
+{"mappings":"ACyHiC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAI2B;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA","sources":["bc1013d4d937a6f8","packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["@import \"2356498b79989caa\";\n@import \"00644bdfe594b970\";\n@import \"2645bae9c4681078\";\n@import \"3b83a6e975918ed2\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport CornerTriangle from '../ui-icons/CornerTriangle';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {fontRelative, space, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {\n  ToggleButton as RACToggleButton,\n  ToggleButtonProps as RACToggleButtonProps\n} from 'react-aria-components/ToggleButton';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps\n  extends\n    Omit<\n      RACToggleButtonProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ActionButtonStyleProps {\n  /** The content to display in the button. */\n  children: ReactNode;\n  /**\n   * Whether the button should be displayed with an [emphasized\n   * style](https://spectrum.adobe.com/page/action-button/#Emphasis).\n   */\n  isEmphasized?: boolean;\n}\n\ninterface ToggleButtonContextProps extends Partial<ToggleButtonProps> {\n  holdAffordance?: boolean;\n}\n\nexport const ToggleButtonContext =\n  createContext<ContextValue<ToggleButtonContextProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(\n  props: ToggleButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n  props = useFormProps(props as any);\n  let domRef = useFocusableRef(ref);\n  let ctx = useSlottedContext(ToggleButtonGroupContext);\n  let isInGroup = !!ctx;\n  let {\n    density = 'regular',\n    isJustified,\n    orientation = 'horizontal',\n    staticColor = props.staticColor,\n    isQuiet = props.isQuiet,\n    isEmphasized = props.isEmphasized,\n    size = props.size || 'M',\n    isDisabled = props.isDisabled\n  } = ctx || {};\n  let {holdAffordance} = props as ToggleButtonContextProps;\n  let {direction} = useLocale();\n\n  return (\n    <RACToggleButton\n      {...props}\n      isDisabled={isDisabled}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        btnStyles(\n          {\n            ...renderProps,\n            staticColor,\n            isStaticColor: !!staticColor,\n            size,\n            isQuiet,\n            isEmphasized,\n            isPending: false,\n            density,\n            isJustified,\n            orientation,\n            isInGroup\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n          [\n            IconContext,\n            {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }\n          ]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n      {holdAffordance && (\n        <CornerTriangle\n          size={size === 'XS' ? 'S' : size}\n          className={style({\n            position: 'absolute',\n            insetEnd: {\n              size: {\n                XS: space(3),\n                S: space(3),\n                M: 4,\n                L: space(5),\n                XL: space(6)\n              }\n            },\n            bottom: {\n              size: {\n                XS: space(3),\n                S: space(3),\n                M: 4,\n                L: space(5),\n                XL: space(6)\n              }\n            },\n            scaleX: {\n              direction: {\n                rtl: -1\n              }\n            }\n          })({direction, size})}\n        />\n      )}\n    </RACToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"ToggleButton.css.map"}

package/dist/private/ToggleButton.mjs

@@ -1,6 +1,7 @@
 import "./ToggleButton.css";
 import {btnStyles as $da878a05ab4a403e$export$446543cff2a0f496} from "./ActionButton.mjs";
 import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./CenterBaseline.mjs";
+import $dc67c4e34e45a62a$export$2e2bcd8739ae039 from "./CornerTriangle.mjs";
 import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../../icons/Icon.mjs";
 import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
 import {SkeletonContext as $5ad421ec19460c48$export$74e166679b1f49ee} from "../../icons/Skeleton.mjs";
@@ -9,10 +10,11 @@ import {ToggleButtonGroupContext as $b891af863738b7d4$export$298258635ae0dd97} f
 import {useFocusableRef as $80ecb974df713a30$export$96a734597687c040} from "./useDOMRef.mjs";
 import {useFormProps as $9b916426527cebe7$export$a6b5be5c6b451665} from "./Form.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../../icons/useSpectrumContextProps.mjs";
-import {jsx as $fpet3$jsx} from "react/jsx-runtime";
+import {jsxs as $fpet3$jsxs, jsx as $fpet3$jsx} from "react/jsx-runtime";
 import {useSlottedContext as $fpet3$useSlottedContext, Provider as $fpet3$Provider} from "react-aria-components/slots";
 import {createContext as $fpet3$createContext, forwardRef as $fpet3$forwardRef} from "react";
 import {ToggleButton as $fpet3$ToggleButton} from "react-aria-components/ToggleButton";
+import {useLocale as $fpet3$useLocale} from "react-aria/I18nProvider";
 
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -38,6 +40,8 @@ import {ToggleButton as $fpet3$ToggleButton} from "react-aria-components/ToggleB
 
 
 
+
+
 const $fe4c9df7420c3c9f$export$43506d75ebd2e218 = /*#__PURE__*/ (0, $fpet3$createContext)(null);
 const $fe4c9df7420c3c9f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $fpet3$forwardRef)(function ToggleButton(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $fe4c9df7420c3c9f$export$43506d75ebd2e218);
@@ -46,7 +50,9 @@ const $fe4c9df7420c3c9f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $fpet3$forwa
     let ctx = (0, $fpet3$useSlottedContext)((0, $b891af863738b7d4$export$298258635ae0dd97));
     let isInGroup = !!ctx;
     let { density: density = 'regular', isJustified: isJustified, orientation: orientation = 'horizontal', staticColor: staticColor = props.staticColor, isQuiet: isQuiet = props.isQuiet, isEmphasized: isEmphasized = props.isEmphasized, size: size = props.size || 'M', isDisabled: isDisabled = props.isDisabled } = ctx || {};
-    return /*#__PURE__*/ (0, $fpet3$jsx)((0, $fpet3$ToggleButton), {
+    let { holdAffordance: holdAffordance } = props;
+    let { direction: direction } = (0, $fpet3$useLocale)();
+    return /*#__PURE__*/ (0, $fpet3$jsxs)((0, $fpet3$ToggleButton), {
         ...props,
         isDisabled: isDisabled,
         ref: domRef,
@@ -64,33 +70,60 @@ const $fe4c9df7420c3c9f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $fpet3$forwa
                 orientation: orientation,
                 isInGroup: isInGroup
             }, props.styles),
-        children: /*#__PURE__*/ (0, $fpet3$jsx)((0, $fpet3$Provider), {
-            values: [
-                [
-                    (0, $5ad421ec19460c48$export$74e166679b1f49ee),
-                    null
-                ],
-                [
-                    (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
-                    {
-                        styles: " TAzEcG13 QAzEcG13 _Jb13 _Nc13 Pc13 _Yb13 _7c13"
-                    }
+        children: [
+            /*#__PURE__*/ (0, $fpet3$jsx)((0, $fpet3$Provider), {
+                values: [
+                    [
+                        (0, $5ad421ec19460c48$export$74e166679b1f49ee),
+                        null
+                    ],
+                    [
+                        (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
+                        {
+                            styles: " TAzEcG15 QAzEcG15 _Jb15 _Nc15 Pc15 _Yb15 _7c15"
+                        }
+                    ],
+                    [
+                        (0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
+                        {
+                            render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
+                                slot: 'icon',
+                                styles: " _Ja15"
+                            }),
+                            styles: " ZuUmpre15 FuUmpre15 I67logd15 _va15"
+                        }
+                    ]
                 ],
-                [
-                    (0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
-                    {
-                        render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
-                            slot: 'icon',
-                            styles: " _Ja13"
-                        }),
-                        styles: " ZuUmpre13 FuUmpre13 I67logd13 _va13"
+                children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $fpet3$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
+                    children: props.children
+                }) : props.children
+            }),
+            holdAffordance && /*#__PURE__*/ (0, $fpet3$jsx)((0, $dc67c4e34e45a62a$export$2e2bcd8739ae039), {
+                size: size === 'XS' ? 'S' : size,
+                className: function anonymous(props) {
+                    let rules = " ";
+                    rules += ' _Pa15';
+                    if (props.size === "XL") rules += ' _zWJpoB15';
+                    else if (props.size === "L") rules += ' _zC1otk15';
+                    else if (props.size === "M") rules += ' _zE15';
+                    else if (props.size === "S") rules += ' _zwtfhvc15';
+                    else if (props.size === "XS") rules += ' _zwtfhvc15';
+                    if (props.size === "XL") rules += ' _lWJpoB15';
+                    else if (props.size === "L") rules += ' _lC1otk15';
+                    else if (props.size === "M") rules += ' _lE15';
+                    else if (props.size === "S") rules += ' _lwtfhvc15';
+                    else if (props.size === "XS") rules += ' _lwtfhvc15';
+                    if (props.direction === "rtl") {
+                        rules += ' -Z4Pn4c-a15';
+                        rules += ' __Ha15';
                     }
-                ]
-            ],
-            children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $fpet3$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
-                children: props.children
-            }) : props.children
-        })
+                    return rules;
+                }({
+                    direction: direction,
+                    size: size
+                })
+            })
+        ]
     });
 });