@react-spectrum/s2 0.2.1-nightly.4979

package/dist/ProgressBar.cjs

@@ -0,0 +1,243 @@
+require("./ProgressBar.css");
+var $a0b996a550bb0891$exports = require("./Field.cjs");
+var $308b180f49d82d28$exports = require("./runtime.cjs");
+var $gIpiX$reactjsxruntime = require("react/jsx-runtime");
+var $gIpiX$reactariacomponents = require("react-aria-components");
+var $gIpiX$react = require("react");
+var $gIpiX$reactspectrumutils = require("@react-spectrum/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ProgressBar", () => $83e59061dd392311$export$c17561cb55d4db30);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+// TODO:
+// var(--spectrum-global-dimension-size-1700) -> 136px
+// var(--spectrum-global-dimension-size-2400) -> 192px
+const $83e59061dd392311$var$indeterminate = "-qe54ge";
+const $83e59061dd392311$var$wrapper = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $U = false;
+    let $q = false;
+    let $r = false;
+    let $l = false;
+    for (let p of matches){
+        if (/^\s*U/.test(p)) $U = true;
+        if (/^\s*q/.test(p)) $q = true;
+        if (/^\s*r/.test(p)) $r = true;
+        if (/^\s*l/.test(p)) $l = true;
+    }
+    if (!$U) rules += ' Uc';
+    rules += ' _Zf';
+    rules += ' __h-u2tns7';
+    rules += ' __j-6w8ip8';
+    rules += ' __Fa';
+    if (!$q) {
+        rules += ' qbw';
+        rules += ' qv';
+    }
+    if (!$r) rules += ' r-3bwcc2';
+    rules += ' o-375tou';
+    rules += ' -_1inj1bc_i--1dbqcch';
+    rules += ' jd';
+    if (!$l) {
+        rules += ' lbO';
+        rules += ' lN';
+    }
+    if (props.size === "XL") {
+        rules += ' -_375tou_o-bw';
+        rules += ' -_375tou_o-v';
+    } else if (props.size === "L") {
+        rules += ' -_375tou_o-bs';
+        rules += ' -_375tou_o-p';
+    } else if (props.size === "S") {
+        rules += ' -_375tou_o-bl';
+        rules += ' -_375tou_o-k';
+    } else if (props.size === "XS") {
+        rules += ' -_375tou_o-bj';
+        rules += ' -_375tou_o-i';
+    } else {
+        rules += ' -_375tou_o-bp';
+        rules += ' -_375tou_o-o';
+    }
+    return rules;
+};
+const $83e59061dd392311$var$valueStyles = function anonymous(props) {
+    let rules = " .";
+    rules += ' _c-bc1l9oh';
+    rules += ' _c-1uotwbwg';
+    rules += ' _c-eo0c6sf';
+    rules += ' _c-enzzrge';
+    rules += ' _c-enzykdd';
+    rules += ' _c-enzwzjc';
+    rules += ' _c-enzrfpb';
+    rules += ' _ca';
+    if (props.size === "XL") {
+        rules += ' _dbj';
+        rules += ' _di';
+    } else if (props.size === "L") {
+        rules += ' _dbh';
+        rules += ' _dg';
+    } else if (props.size === "S") {
+        rules += ' _dbd';
+        rules += ' _dc';
+    } else if (props.size === "XS") {
+        rules += ' _dbb';
+        rules += ' _da';
+    } else {
+        rules += ' _dbf';
+        rules += ' _de';
+    }
+    rules += ' _eb';
+    rules += ' _f-1x99dlob';
+    rules += ' _fa';
+    rules += ' aa_____x';
+    if (props.staticColor === "black") rules += ' a_____s';
+    else if (props.staticColor === "white") rules += ' a_____d';
+    else if (props.isDisabled) rules += ' aj';
+    else {
+        if (props.isPressed) rules += ' an';
+        else if (props.isFocusVisible) rules += ' an';
+        else if (props.isHovered) rules += ' an';
+        else rules += ' am';
+    }
+    rules += ' __Hb';
+    rules += ' __a-4lc1fm';
+    rules += ' __b-4lc1fm';
+    rules += ' __c-4lc1fm';
+    rules += ' __d-4lc1fm';
+    return rules;
+};
+const $83e59061dd392311$var$trackStyles = function anonymous(props) {
+    let rules = " .";
+    rules += ' __a-3773ju';
+    rules += ' __b-3773ju';
+    rules += ' __c-3773ju';
+    rules += ' __d-3773ju';
+    rules += ' __vb';
+    rules += ' __wb';
+    rules += ' Ab';
+    rules += ' _vf';
+    rules += ' _wf';
+    rules += ' _xf';
+    rules += ' _yf';
+    rules += ' ba_____w';
+    if (props.staticColor === "black") rules += ' b_____n';
+    else if (props.staticColor === "white") rules += ' b____7';
+    else rules += ' bi';
+    rules += ' _Nab';
+    rules += ' _Na';
+    rules += ' _Lab';
+    rules += ' _La';
+    rules += ' da_____x';
+    rules += ' da';
+    rules += ' __Q-3t1y';
+    if (props.size === "XL") {
+        rules += ' kb-1vxtxny';
+        rules += ' k-8hx8xw';
+    } else if (props.size === "L") {
+        rules += ' kbe';
+        rules += ' kd';
+    } else if (props.size === "M") {
+        rules += ' kb-1aa9md1';
+        rules += ' k-6njx2e';
+    } else if (props.size === "S") {
+        rules += ' kbc';
+        rules += ' kb';
+    } else {
+        rules += ' kb-1aa9md1';
+        rules += ' k-6njx2e';
+    }
+    return rules;
+};
+const $83e59061dd392311$var$fill = function anonymous(props) {
+    let rules = " .";
+    rules += ' k2';
+    rules += ' wf';
+    rules += ' ba_____x';
+    if (props.staticColor === "black") rules += ' b_____s';
+    else if (props.staticColor === "white") rules += ' b_____f';
+    else {
+        if (props.isPressed) rules += ' b_____F';
+        else if (props.isFocusVisible) rules += ' b_____F';
+        else if (props.isHovered) rules += ' b_____F';
+        else rules += ' b_____E';
+    }
+    rules += ' _O-4m7fl1';
+    rules += ' _Q-yjb9nq';
+    rules += ' _Ra';
+    return rules;
+};
+const $83e59061dd392311$var$indeterminateAnimation = " . _S-16w2la5 _T-yjb9nq _Ya _X-twzmrf __Pd Uc";
+function $83e59061dd392311$var$ProgressBar(props, ref) {
+    let { label: label, size: size = 'M', staticColor: staticColor, isIndeterminate: isIndeterminate, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
+    let domRef = (0, $gIpiX$reactspectrumutils.useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $gIpiX$reactjsxruntime.jsx)((0, $gIpiX$reactariacomponents.ProgressBar), {
+        ...props,
+        ref: domRef,
+        style: UNSAFE_style,
+        className: UNSAFE_className + $83e59061dd392311$var$wrapper({
+            ...props,
+            size: size
+        }, props.styles),
+        children: ({ percentage: percentage, valueText: valueText })=>/*#__PURE__*/ (0, $gIpiX$reactjsxruntime.jsxs)((0, $gIpiX$reactjsxruntime.Fragment), {
+                children: [
+                    /*#__PURE__*/ (0, $gIpiX$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldLabel), {
+                        size: size,
+                        labelAlign: "start",
+                        labelPosition: "top",
+                        staticColor: staticColor,
+                        children: label
+                    }),
+                    /*#__PURE__*/ (0, $gIpiX$reactjsxruntime.jsx)("span", {
+                        className: $83e59061dd392311$var$valueStyles({
+                            size: size,
+                            labelAlign: 'end',
+                            staticColor: staticColor
+                        }),
+                        children: valueText
+                    }),
+                    /*#__PURE__*/ (0, $gIpiX$reactjsxruntime.jsx)("div", {
+                        className: $83e59061dd392311$var$trackStyles({
+                            ...props
+                        }),
+                        children: /*#__PURE__*/ (0, $gIpiX$reactjsxruntime.jsx)("div", {
+                            className: (0, $308b180f49d82d28$exports.mergeStyles)($83e59061dd392311$var$fill({
+                                ...props,
+                                staticColor: staticColor
+                            }), isIndeterminate ? $83e59061dd392311$var$indeterminateAnimation : null),
+                            style: {
+                                width: isIndeterminate ? `${100 * (136 / 192)}%` : percentage + '%'
+                            }
+                        })
+                    })
+                ]
+            })
+    });
+}
+/**
+ * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
+ * They can represent either determinate or indeterminate progress.
+ */ const $83e59061dd392311$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $gIpiX$react.forwardRef)($83e59061dd392311$var$ProgressBar);
+
+
+//# sourceMappingURL=ProgressBar.cjs.map

package/dist/ProgressBar.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAoCD,QAAQ;AACR,sDAAsD;AACtD,sDAAsD;AACtD,MAAM;AAUN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;AAoBN,MAAM;AASN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,IAAI,SAAC,KAAK,QAAE,OAAO,kBAAK,WAAW,mBAAE,eAAe,gBAAE,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC7F,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;QAAI,GAAG,MAAM,MAAM;kBACnE,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;kCACE,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAc;wBAAM,aAAa;kCAAc;;kCAC1F,gCAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACvE,gCAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gCAAC;4BACC,WAAW,CAAA,GAAA,qCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,+CAAyB;4BAClG,OAAO;gCAAC,OAAO,kBAAkB,CAAC,EAAE,MAAO,CAAA,MAAM,GAAE,EAAG,CAAC,CAAC,GAAG,aAAa;4BAAG;;;;;;AAMzF;AAEA;;;CAGC,GACD,MAAM,4CAAe,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressBar.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 {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {DOMRef} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {forwardRef, ReactNode} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black'\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\n// TODO:\n// var(--spectrum-global-dimension-size-1700) -> 136px\n// var(--spectrum-global-dimension-size-2400) -> 192px\nconst indeterminate = keyframes(`\n  from {\n    transform: translate(calc(136px * -1));\n  }\n\n  to {\n    transform: translate(192px);\n  }\n`);\n\nconst wrapper = style<ProgressBarStyleProps>({\n  ...bar(),\n  width: {\n    default: 192\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  backgroundColor: {\n    default: 'accent',\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  },\n  transition: '[width]',\n  transitionDuration: 1000\n});\n\nconst indeterminateAnimation = style({\n  animation: indeterminate,\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  let {label, size = 'M', staticColor, isIndeterminate, UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          <FieldLabel size={size} labelAlign=\"start\" labelPosition=\"top\" staticColor={staticColor}>{label}</FieldLabel>\n          <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>\n          <div className={trackStyles({...props})}>\n            <div\n              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation : null))}\n              style={{width: isIndeterminate ? `${100 * (136 / 192)}%` : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.cjs.map"}

package/dist/ProgressBar.css

@@ -0,0 +1,443 @@
+@keyframes -qe54ge {
+  from {
+    transform: translate(-136px);
+  }
+
+  to {
+    transform: translate(192px);
+  }
+}
+
+@layer _.a {
+  ._Zf {
+    display: grid;
+  }
+
+  .__h-u2tns7 {
+    grid-template-columns: 1fr auto;
+  }
+
+  .__j-6w8ip8 {
+    grid-template-areas: "label value"
+                         "bar bar";
+  }
+
+  .__Fa {
+    isolation: isolate;
+  }
+
+  .qv {
+    min-width: 3rem;
+  }
+
+  .r-3bwcc2 {
+    max-width: 768px;
+  }
+
+  .o-375tou {
+    min-height: var(--o);
+  }
+
+  .-_1inj1bc_i--1dbqcch {
+    --field-gap: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  }
+
+  .jd {
+    column-gap: .75rem;
+  }
+
+  .lN {
+    width: 12rem;
+  }
+
+  .-_375tou_o-o {
+    --o: 2rem;
+  }
+
+  .-_375tou_o-i {
+    --o: 1.25rem;
+  }
+
+  .-_375tou_o-k {
+    --o: 1.5rem;
+  }
+
+  .-_375tou_o-p {
+    --o: 2.5rem;
+  }
+
+  .-_375tou_o-v {
+    --o: 3rem;
+  }
+
+  ._ca {
+    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._de {
+    font-size: .875rem;
+  }
+
+  ._da {
+    font-size: .6875rem;
+  }
+
+  ._dc {
+    font-size: .75rem;
+  }
+
+  ._dg {
+    font-size: 1rem;
+  }
+
+  ._di {
+    font-size: 1.125rem;
+  }
+
+  ._eb {
+    font-variation-settings: "wght" 400;
+    font-synthesis-weight: none;
+    font-weight: 400;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .am {
+    color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .aj {
+    color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  .a_____d {
+    color: #ffffffa8;
+  }
+
+  .a_____s {
+    color: #000000ed;
+  }
+
+  .__Hb {
+    cursor: default;
+  }
+
+  .__a-4lc1fm {
+    grid-column-start: value;
+  }
+
+  .__b-4lc1fm {
+    grid-column-end: value;
+  }
+
+  .__c-4lc1fm {
+    grid-row-start: value;
+  }
+
+  .__d-4lc1fm {
+    grid-row-end: value;
+  }
+
+  .__a-3773ju {
+    grid-column-start: bar;
+  }
+
+  .__b-3773ju {
+    grid-column-end: bar;
+  }
+
+  .__c-3773ju {
+    grid-row-start: bar;
+  }
+
+  .__d-3773ju {
+    grid-row-end: bar;
+  }
+
+  .__vb {
+    overflow-x: hidden;
+  }
+
+  .__wb {
+    overflow-y: hidden;
+  }
+
+  .Ab {
+    margin-top: .25rem;
+  }
+
+  ._vf {
+    border-start-start-radius: 9999px;
+  }
+
+  ._wf {
+    border-start-end-radius: 9999px;
+  }
+
+  ._xf {
+    border-end-start-radius: 9999px;
+  }
+
+  ._yf {
+    border-end-end-radius: 9999px;
+  }
+
+  .bi {
+    background-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
+  }
+
+  .b____7 {
+    background-color: #ffffff1c;
+  }
+
+  .b_____n {
+    background-color: #00000038;
+  }
+
+  ._Na {
+    outline-width: 0;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  .da {
+    outline-color: #0000;
+  }
+
+  .__Q-3t1y {
+    z-index: 1;
+  }
+
+  .kb {
+    height: .25rem;
+  }
+
+  .k-6njx2e {
+    height: .375rem;
+  }
+
+  .kd {
+    height: .5rem;
+  }
+
+  .k-8hx8xw {
+    height: .625rem;
+  }
+
+  .k2 {
+    height: 100%;
+  }
+
+  .wf {
+    border-style: none;
+  }
+
+  .b_____E {
+    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #345bf8);
+  }
+
+  .b_____F {
+    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #2549e5);
+  }
+
+  .b_____f {
+    background-color: #fffffff0;
+  }
+
+  .b_____s {
+    background-color: #000000ed;
+  }
+
+  ._O-4m7fl1 {
+    transition-property: width;
+  }
+
+  ._Q-yjb9nq {
+    transition-duration: 1s;
+  }
+
+  ._Ra {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  ._S-16w2la5 {
+    animation-name: -qe54ge;
+  }
+
+  ._T-yjb9nq {
+    animation-duration: 1s;
+  }
+
+  ._Ya {
+    animation-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  ._X-twzmrf {
+    animation-iteration-count: infinite;
+  }
+
+  .__Pd {
+    will-change: transform;
+  }
+
+  .Uc {
+    position: relative;
+  }
+}
+
+@layer _.b {
+  ._c-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+}
+
+@layer UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .qbw {
+      min-width: 3.75rem;
+    }
+
+    .lbO {
+      width: 15rem;
+    }
+
+    .-_375tou_o-bp {
+      --o: 2.5rem;
+    }
+
+    .-_375tou_o-bj {
+      --o: 1.5625rem;
+    }
+
+    .-_375tou_o-bl {
+      --o: 1.875rem;
+    }
+
+    .-_375tou_o-bs {
+      --o: 3.125rem;
+    }
+
+    .-_375tou_o-bw {
+      --o: 3.75rem;
+    }
+
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+
+    ._dbb {
+      font-size: .8125rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+
+    .kbc {
+      height: .3125rem;
+    }
+
+    .kb-1aa9md1 {
+      height: .46875rem;
+    }
+
+    .kbe {
+      height: .625rem;
+    }
+
+    .kb-1vxtxny {
+      height: .78125rem;
+    }
+  }
+}
+
+@layer _.c {
+  ._c-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  ._c-enzykdd:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
+}
+
+@layer _.e {
+  ._c-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  ._c-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  ._c-1uotwbwg:lang(zh-hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.h {
+  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+}
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .aa_____x {
+      color: buttontext;
+    }
+
+    .ba_____w {
+      background-color: buttonface;
+    }
+
+    ._Nab {
+      outline-width: 1px;
+    }
+
+    ._Lab {
+      outline-style: solid;
+    }
+
+    .da_____x {
+      outline-color: buttontext;
+    }
+
+    .ba_____x {
+      background-color: buttontext;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=ProgressBar.css.map */

package/dist/ProgressBar.css.map

@@ -0,0 +1 @@
+{"mappings":"ACiDsB;;;;;;;;;;AAUN;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7Cf;EAOI;;;;EAAA;;;;;AAPJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAOI;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AALA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO","sources":["7293bad37f188837","packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["@import \"0b8d2821d82ee250\";\n@import \"f2b8eec694697861\";\n@import \"bd67a9a4e04bbe30\";\n@import \"928e619efccddb64\";\n@import \"27fd25d02acf65a5\";\n@import \"47f66b5fa7a24be0\";\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 {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {DOMRef} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {forwardRef, ReactNode} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black'\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\n// TODO:\n// var(--spectrum-global-dimension-size-1700) -> 136px\n// var(--spectrum-global-dimension-size-2400) -> 192px\nconst indeterminate = keyframes(`\n  from {\n    transform: translate(calc(136px * -1));\n  }\n\n  to {\n    transform: translate(192px);\n  }\n`);\n\nconst wrapper = style<ProgressBarStyleProps>({\n  ...bar(),\n  width: {\n    default: 192\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  backgroundColor: {\n    default: 'accent',\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  },\n  transition: '[width]',\n  transitionDuration: 1000\n});\n\nconst indeterminateAnimation = style({\n  animation: indeterminate,\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  let {label, size = 'M', staticColor, isIndeterminate, UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          <FieldLabel size={size} labelAlign=\"start\" labelPosition=\"top\" staticColor={staticColor}>{label}</FieldLabel>\n          <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>\n          <div className={trackStyles({...props})}>\n            <div\n              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation : null))}\n              style={{width: isIndeterminate ? `${100 * (136 / 192)}%` : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.css.map"}