@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/InlineAlert.mjs

@@ -53,78 +53,78 @@ const $fc2cf6b397804b9c$var$inlineAlert = function anonymous(props, overrides) {
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Kd13';
-    rules += ' sg13';
-    if (!position) rules += ' _Pc13';
-    rules += ' _oa13';
-    rules += ' Th13';
-    rules += ' Qh13';
-    rules += ' Sh13';
-    rules += ' Rh13';
-    rules += ' oc13';
-    rules += ' nc13';
-    rules += ' kc13';
-    rules += ' jc13';
-    rules += ' _jf13';
-    rules += ' _kc13';
-    rules += ' hc13';
-    rules += ' mc13';
-    rules += ' lc13';
-    if (props.fillStyle === "boldFill") rules += ' iA13';
-    else if (props.fillStyle === "subtleFill") rules += ' iA13';
+    if (props.isFocusVisible) rules += ' _Lf131';
+    else rules += ' _Le131';
+    rules += ' Oh131';
+    rules += ' Olc131';
+    rules += ' _Mc131';
+    rules += ' _Kd131';
+    rules += ' sg131';
+    if (!position) rules += ' _Pc131';
+    rules += ' _oa131';
+    rules += ' Th131';
+    rules += ' Qh131';
+    rules += ' Sh131';
+    rules += ' Rh131';
+    rules += ' oc131';
+    rules += ' nc131';
+    rules += ' kc131';
+    rules += ' jc131';
+    rules += ' _jf131';
+    rules += ' _kc131';
+    rules += ' hc131';
+    rules += ' mc131';
+    rules += ' lc131';
+    if (props.fillStyle === "boldFill") rules += ' iA131';
+    else if (props.fillStyle === "subtleFill") rules += ' iA131';
     else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' iy13';
-        else if (props.variant === "negative") rules += ' it13';
-        else if (props.variant === "notice") rules += ' is13';
-        else if (props.variant === "positive") rules += ' il13';
-        else if (props.variant === "informative") rules += ' ix13';
+        if (props.variant === "neutral") rules += ' iy131';
+        else if (props.variant === "negative") rules += ' it131';
+        else if (props.variant === "notice") rules += ' is131';
+        else if (props.variant === "positive") rules += ' il131';
+        else if (props.variant === "informative") rules += ' ix131';
     }
     if (props.variant === "neutral") {
-        if (props.fillStyle === "boldFill") rules += ' g613';
-        else if (props.fillStyle === "subtleFill") rules += ' gI13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' g6131';
+        else if (props.fillStyle === "subtleFill") rules += ' gI131';
+        else if (props.fillStyle === "border") rules += ' gX131';
     } else if (props.variant === "negative") {
-        if (props.fillStyle === "boldFill") rules += ' gB13';
-        else if (props.fillStyle === "subtleFill") rules += ' gU13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' gB131';
+        else if (props.fillStyle === "subtleFill") rules += ' gU131';
+        else if (props.fillStyle === "border") rules += ' gX131';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' gQ13';
-        else if (props.fillStyle === "subtleFill") rules += ' gV13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' gQ131';
+        else if (props.fillStyle === "subtleFill") rules += ' gV131';
+        else if (props.fillStyle === "border") rules += ' gX131';
     } else if (props.variant === "positive") {
-        if (props.fillStyle === "boldFill") rules += ' g113';
-        else if (props.fillStyle === "subtleFill") rules += ' gA13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' g1131';
+        else if (props.fillStyle === "subtleFill") rules += ' gA131';
+        else if (props.fillStyle === "border") rules += ' gX131';
     } else if (props.variant === "informative") {
-        if (props.fillStyle === "boldFill") rules += ' g213';
-        else if (props.fillStyle === "subtleFill") rules += ' gG13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' g2131';
+        else if (props.fillStyle === "subtleFill") rules += ' gG131';
+        else if (props.fillStyle === "border") rules += ' gX131';
     }
     return rules;
 };
 const $fc2cf6b397804b9c$var$icon = function anonymous(props) {
     let rules = " ";
-    rules += ' __wa13';
+    rules += ' __wa131';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' -_8sjo0b-tcwrnr13';
-        else rules += ' -_8sjo0b-tw13';
+        if (props.variant === "notice") rules += ' -_8sjo0b-tcwrnr131';
+        else rules += ' -_8sjo0b-tw131';
     } else if (props.fillStyle === "subtleFill") {
-        if (props.variant === "neutral") rules += ' -_8sjo0b-tf13';
-        else if (props.variant === "negative") rules += ' -_8sjo0b-tq13';
-        else if (props.variant === "notice") rules += ' -_8sjo0b-tq13';
-        else if (props.variant === "positive") rules += ' -_8sjo0b-tt13';
-        else if (props.variant === "informative") rules += ' -_8sjo0b-tu13';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-tf131';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-tq131';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-tq131';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-tt131';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-tu131';
     } else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' -_8sjo0b-tf13';
-        else if (props.variant === "negative") rules += ' -_8sjo0b-tq13';
-        else if (props.variant === "notice") rules += ' -_8sjo0b-tm13';
-        else if (props.variant === "positive") rules += ' -_8sjo0b-tt13';
-        else if (props.variant === "informative") rules += ' -_8sjo0b-tu13';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-tf131';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-tq131';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-tm131';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-tt131';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-tu131';
     }
     return rules;
 };
@@ -137,55 +137,55 @@ let $fc2cf6b397804b9c$var$ICONS = {
 };
 const $fc2cf6b397804b9c$var$heading = function anonymous(props) {
     let rules = " ";
-    rules += ' Jy13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' -_6BNtrc-c13';
-    rules += ' vx13';
-    rules += ' xd13';
-    rules += ' _xa13';
-    rules += ' xX0cczbc13';
-    rules += ' _xX0cczba13';
-    rules += ' xfd13';
-    rules += ' _xfa13';
-    rules += ' xfX0cczbc13';
-    rules += ' _xfX0cczba13';
-    rules += ' _Fd13';
-    rules += ' _FnuYUweb13';
+    rules += ' Jy131';
+    rules += ' uk131';
+    rules += ' ucJ9TBTb131';
+    rules += ' ud3Euai131';
+    rules += ' uea131';
+    rules += ' ugb131';
+    rules += ' uhd131';
+    rules += ' uje131';
+    rules += ' u2NhKxcl131';
+    rules += ' uic131';
+    rules += ' -_6BNtrc-c131';
+    rules += ' vx131';
+    rules += ' xd131';
+    rules += ' _xa131';
+    rules += ' xX0cczbc131';
+    rules += ' _xX0cczba131';
+    rules += ' xfd131';
+    rules += ' _xfa131';
+    rules += ' xfX0cczbc131';
+    rules += ' _xfX0cczba131';
+    rules += ' _Fd131';
+    rules += ' _FnuYUweb131';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' pg13';
-        else rules += ' px13';
-    } else rules += ' po13';
+        if (props.variant === "notice") rules += ' pg131';
+        else rules += ' px131';
+    } else rules += ' po131';
     return rules;
 };
 const $fc2cf6b397804b9c$var$content = function anonymous(props) {
     let rules = " ";
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' -_6BNtrc-c13';
-    rules += ' vx13';
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Fb13';
-    rules += ' _FnuYUwec13';
+    rules += ' uk131';
+    rules += ' ucJ9TBTb131';
+    rules += ' ud3Euai131';
+    rules += ' uea131';
+    rules += ' ugb131';
+    rules += ' uhd131';
+    rules += ' uje131';
+    rules += ' u2NhKxcl131';
+    rules += ' uic131';
+    rules += ' -_6BNtrc-c131';
+    rules += ' vx131';
+    rules += ' xb131';
+    rules += ' _xa131';
+    rules += ' _Fb131';
+    rules += ' _FnuYUwec131';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' pg13';
-        else rules += ' px13';
-    } else rules += ' pt13';
+        if (props.variant === "notice") rules += ' pg131';
+        else rules += ' px131';
+    } else rules += ' pt131';
     return rules;
 };
 const $fc2cf6b397804b9c$export$a3b2c96db9b0eb71 = /*#__PURE__*/ (0, $7sfGs$forwardRef)(function InlineAlert(props, ref) {

package/dist/private/InlineAlert.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA6CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEN,MAAM;;;;;;;;;;;;;;;;;;;;;AAmCN,IAAI,8BAAQ;IACV,aAAa,CAAA,GAAA,wCAAS;IACtB,UAAU,CAAA,GAAA,wCAAc;IACxB,QAAQ,CAAA,GAAA,wCAAW;IACnB,UAAU,CAAA,GAAA,wCAAY;IACtB,SAAS;AACX;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAmBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,sBACV,YAAY,qBACZ,SAAS,EACV,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,IAAI,OAA8C;IAClD,IAAI,UAAU;IACd,IAAI,WAAW,6BAAO;QACpB,OAAO,2BAAK,CAAC,QAAQ;QACrB,IAAI,MACF,UAAU,gBAAgB,MAAM,CAAC,CAAC,YAAY,EAAE,SAAS;IAE7D;IAEA,IAAI,kBAAC,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAAC,WAAW,MAAM,SAAS;IAAA;IAC3E,IAAI,eAAe,CAAA,GAAA,aAAK,EAAE,MAAM,SAAS;IACzC,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,aAAa,OAAO,IAAI,OAAO,OAAO,EACxC,OAAO,OAAO,CAAC,KAAK;QAEtB,aAAa,OAAO,GAAG;IACzB,GAAG;QAAC;KAAO;IAEX,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,MAAM;QACxB,GAAG,UAAU;QACd,KAAK;QACL,UAAU,YAAY,KAAK;QAC3B,WAAW;QACX,MAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;qBACtD;uBACA;4BACA;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,iBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,QAAQ,2BAAK;qCAAC;uCAAS;wBAAS;oBAAE;iBAAE;aACpD;;gBACA,sBAAQ,gBAAC;oBAAK,cAAY;;gBAC1B;;;;AAIT","sources":["packages/@react-spectrum/s2/src/InlineAlert.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';\nimport {ComponentType, createContext, forwardRef, ReactNode, useEffect, useRef} from 'react';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {useDOMRef} from './useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProps, SlotProps {\n  /**\n   * The contents of the Inline Alert.\n   */\n  children: ReactNode,\n  /**\n   * Whether to automatically focus the Inline Alert when it first renders.\n   */\n  autoFocus?: boolean\n}\n\ninterface InlineStylesProps {\n  /**\n   * The semantic tone of a Inline Alert.\n   * @default neutral\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral',\n  /**\n   * The visual style of the Inline Alert.\n   * @default border\n   */\n  fillStyle?: 'border' | 'subtleFill' | 'boldFill'\n}\n\nexport const InlineAlertContext = createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({\n  ...focusRing(),\n  display: 'inline-block',\n  position: 'relative',\n  boxSizing: 'border-box',\n  padding: 24,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    fillStyle: {\n      border: {\n        variant: {\n          informative: 'informative-800',\n          positive: 'positive-700',\n          notice: 'notice-700',\n          negative: 'negative-800',\n          neutral: 'gray-700' // is there a semantic color name for neutral?\n        }\n      },\n      subtleFill: 'transparent',\n      boldFill: 'transparent'\n    }\n  },\n  backgroundColor: {\n    variant: {\n      informative: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'informative-subtle',\n          boldFill: 'informative'\n        }\n      },\n      positive: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'positive-subtle',\n          boldFill: 'positive'\n        }\n      },\n      notice: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'notice-subtle',\n          boldFill: 'notice'\n        }\n      },\n      negative: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'negative-subtle',\n          boldFill: 'negative'\n        }\n      },\n      neutral: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'neutral-subtle',\n          boldFill: 'neutral-subdued'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst icon = style<InlineStylesProps>({\n  float: 'inline-end',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      fillStyle: {\n        border: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'notice',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        subtleFill: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'negative',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        boldFill: {\n          default: 'white',\n          variant: {\n            notice: 'black'\n          }\n        }\n      }\n    }\n  }\n});\n\nlet ICONS = {\n  informative: InfoCircle,\n  positive: CheckmarkCircle,\n  notice: NoticeSquare,\n  negative: AlertTriangle,\n  neutral: undefined\n};\n\nconst heading = style({\n  marginTop: 0,\n  font: 'title-sm',\n  color: {\n    default: 'title',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\nconst content = style({\n  font: 'body-sm',\n  color: {\n    default: 'body',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\n/**\n * Inline alerts display a non-modal message associated with objects in a view.\n * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.\n */\nexport const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);\n  let {\n    children,\n    variant = 'neutral',\n    fillStyle = 'border',\n    autoFocus\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  let Icon: ComponentType<any> | null | undefined = null;\n  let iconAlt = '';\n  if (variant in ICONS) {\n    Icon = ICONS[variant];\n    if (Icon) {\n      iconAlt = stringFormatter.format(`inlinealert.${variant}`);\n    }\n  }\n\n  let {isFocusVisible, focusProps} = useFocusRing({autoFocus: props.autoFocus});\n  let autoFocusRef = useRef(props.autoFocus);\n  useEffect(() => {\n    if (autoFocusRef.current && domRef.current) {\n      domRef.current.focus();\n    }\n    autoFocusRef.current = false;\n  }, [domRef]);\n\n  return (\n    <div\n      {...filterDOMProps(props)}\n      {...focusProps}\n      ref={domRef}\n      tabIndex={autoFocus ? -1 : undefined}\n      autoFocus={autoFocus}\n      role=\"alert\"\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + inlineAlert({\n        variant,\n        fillStyle,\n        isFocusVisible\n      }, props.styles)}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({fillStyle})}],\n          [ContentContext, {styles: content({fillStyle})}],\n          [IconContext, {styles: icon({variant, fillStyle})}]\n        ]}>\n        {Icon && <Icon aria-label={iconAlt} />}\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"InlineAlert.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA+CM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAwE;AAEtF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEN,MAAM;;;;;;;;;;;;;;;;;;;;;AAmCN,IAAI,8BAAQ;IACV,aAAa,CAAA,GAAA,wCAAS;IACtB,UAAU,CAAA,GAAA,wCAAc;IACxB,QAAQ,CAAA,GAAA,wCAAW;IACnB,UAAU,CAAA,GAAA,wCAAY;IACtB,SAAS;AACX;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAmBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC3D,KAAuB,EACvB,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,WAAE,UAAU,sBAAW,YAAY,qBAAU,SAAS,EAAC,GAAG;IAEvE,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,IAAI,OAA8C;IAClD,IAAI,UAAU;IACd,IAAI,WAAW,6BAAO;QACpB,OAAO,2BAAK,CAAC,QAAQ;QACrB,IAAI,MACF,UAAU,gBAAgB,MAAM,CAAC,CAAC,YAAY,EAAE,SAAS;IAE7D;IAEA,IAAI,kBAAC,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAAC,WAAW,MAAM,SAAS;IAAA;IAC3E,IAAI,eAAe,CAAA,GAAA,aAAK,EAAE,MAAM,SAAS;IACzC,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,aAAa,OAAO,IAAI,OAAO,OAAO,EACxC,OAAO,OAAO,CAAC,KAAK;QAEtB,aAAa,OAAO,GAAG;IACzB,GAAG;QAAC;KAAO;IAEX,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,MAAM;QACxB,GAAG,UAAU;QACd,KAAK;QACL,UAAU,YAAY,KAAK;QAC3B,WAAW;QACX,MAAK;QACL,OAAO,MAAM,YAAY;QACzB,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,kCACE;qBACE;uBACA;4BACA;QACF,GACA,MAAM,MAAM;kBAGhB,cAAA,iBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,QAAQ,2BAAK;qCAAC;uCAAS;wBAAS;oBAAE;iBAAE;aACpD;;gBACA,sBAAQ,gBAAC;oBAAK,cAAY;;gBAC1B;;;;AAIT","sources":["packages/@react-spectrum/s2/src/InlineAlert.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';\nimport {ComponentType, createContext, forwardRef, ReactNode, useEffect, useRef} from 'react';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {useDOMRef} from './useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProps, SlotProps {\n  /**\n   * The contents of the Inline Alert.\n   */\n  children: ReactNode;\n  /**\n   * Whether to automatically focus the Inline Alert when it first renders.\n   */\n  autoFocus?: boolean;\n}\n\ninterface InlineStylesProps {\n  /**\n   * The semantic tone of a Inline Alert.\n   *\n   * @default neutral\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral';\n  /**\n   * The visual style of the Inline Alert.\n   *\n   * @default border\n   */\n  fillStyle?: 'border' | 'subtleFill' | 'boldFill';\n}\n\nexport const InlineAlertContext =\n  createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>(\n  {\n    ...focusRing(),\n    display: 'inline-block',\n    position: 'relative',\n    boxSizing: 'border-box',\n    padding: 24,\n    borderRadius: 'lg',\n    borderStyle: 'solid',\n    borderWidth: 2,\n    borderColor: {\n      fillStyle: {\n        border: {\n          variant: {\n            informative: 'informative-800',\n            positive: 'positive-700',\n            notice: 'notice-700',\n            negative: 'negative-800',\n            neutral: 'gray-700' // is there a semantic color name for neutral?\n          }\n        },\n        subtleFill: 'transparent',\n        boldFill: 'transparent'\n      }\n    },\n    backgroundColor: {\n      variant: {\n        informative: {\n          fillStyle: {\n            border: 'gray-25',\n            subtleFill: 'informative-subtle',\n            boldFill: 'informative'\n          }\n        },\n        positive: {\n          fillStyle: {\n            border: 'gray-25',\n            subtleFill: 'positive-subtle',\n            boldFill: 'positive'\n          }\n        },\n        notice: {\n          fillStyle: {\n            border: 'gray-25',\n            subtleFill: 'notice-subtle',\n            boldFill: 'notice'\n          }\n        },\n        negative: {\n          fillStyle: {\n            border: 'gray-25',\n            subtleFill: 'negative-subtle',\n            boldFill: 'negative'\n          }\n        },\n        neutral: {\n          fillStyle: {\n            border: 'gray-25',\n            subtleFill: 'neutral-subtle',\n            boldFill: 'neutral-subdued'\n          }\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\nconst icon = style<InlineStylesProps>({\n  float: 'inline-end',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      fillStyle: {\n        border: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'notice',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        subtleFill: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'negative',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        boldFill: {\n          default: 'white',\n          variant: {\n            notice: 'black'\n          }\n        }\n      }\n    }\n  }\n});\n\nlet ICONS = {\n  informative: InfoCircle,\n  positive: CheckmarkCircle,\n  notice: NoticeSquare,\n  negative: AlertTriangle,\n  neutral: undefined\n};\n\nconst heading = style({\n  marginTop: 0,\n  font: 'title-sm',\n  color: {\n    default: 'title',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\nconst content = style({\n  font: 'body-sm',\n  color: {\n    default: 'body',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\n/**\n * Inline alerts display a non-modal message associated with objects in a view. These are often used\n * in form validation, providing a place to aggregate feedback related to multiple fields.\n */\nexport const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(\n  props: InlineAlertProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);\n  let {children, variant = 'neutral', fillStyle = 'border', autoFocus} = props;\n\n  let domRef = useDOMRef(ref);\n\n  let Icon: ComponentType<any> | null | undefined = null;\n  let iconAlt = '';\n  if (variant in ICONS) {\n    Icon = ICONS[variant];\n    if (Icon) {\n      iconAlt = stringFormatter.format(`inlinealert.${variant}`);\n    }\n  }\n\n  let {isFocusVisible, focusProps} = useFocusRing({autoFocus: props.autoFocus});\n  let autoFocusRef = useRef(props.autoFocus);\n  useEffect(() => {\n    if (autoFocusRef.current && domRef.current) {\n      domRef.current.focus();\n    }\n    autoFocusRef.current = false;\n  }, [domRef]);\n\n  return (\n    <div\n      {...filterDOMProps(props)}\n      {...focusProps}\n      ref={domRef}\n      tabIndex={autoFocus ? -1 : undefined}\n      autoFocus={autoFocus}\n      role=\"alert\"\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        inlineAlert(\n          {\n            variant,\n            fillStyle,\n            isFocusVisible\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({fillStyle})}],\n          [ContentContext, {styles: content({fillStyle})}],\n          [IconContext, {styles: icon({variant, fillStyle})}]\n        ]}>\n        {Icon && <Icon aria-label={iconAlt} />}\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"InlineAlert.mjs.map"}

package/dist/private/LabeledValue.cjs

@@ -0,0 +1,359 @@
+require("./LabeledValue.css");
+var $a0b996a550bb0891$exports = require("./Field.cjs");
+var $bfa4962d90c8af48$exports = require("./Form.cjs");
+var $150382364eecc4bc$exports = require("./useDOMRef.cjs");
+var $ac757a4c2bd72aee$exports = require("../../icons/useSpectrumContextProps.cjs");
+var $cDYdk$reactjsxruntime = require("react/jsx-runtime");
+var $cDYdk$internationalizeddate = require("@internationalized/date");
+var $cDYdk$react = require("react");
+var $cDYdk$reactariafilterDOMProps = require("react-aria/filterDOMProps");
+var $cDYdk$reactariauseDateFormatter = require("react-aria/useDateFormatter");
+var $cDYdk$reactariauseListFormatter = require("react-aria/useListFormatter");
+var $cDYdk$reactariauseNumberFormatter = require("react-aria/useNumberFormatter");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "LabeledValueContext", () => $ad3c2d5408b92dda$export$8ba7143a95895992);
+$parcel$export(module.exports, "LabeledValue", () => $ad3c2d5408b92dda$export$d1328f67a56fa517);
+/*
+ * 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.
+ */ 
+
+
+
+
+
+
+
+
+
+
+const $ad3c2d5408b92dda$export$8ba7143a95895992 = /*#__PURE__*/ (0, $cDYdk$react.createContext)(null);
+const $ad3c2d5408b92dda$var$fieldStyles = function anonymous(props, overrides) {
+    let rules = " ";
+    let gridColumnStart = false;
+    let gridColumnEnd = false;
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+    for (let p of matches){
+        if (p[1] === "z") gridColumnStart = true;
+        if (p[1] === "y") gridColumnEnd = true;
+        rules += p[0];
+    }
+    rules += ' se131';
+    if (props.isInForm) {
+        if (!gridColumnStart) rules += ' z2mU131';
+    }
+    if (props.isInForm) {
+        if (props.labelPosition === "side") {
+            if (!gridColumnEnd) rules += ' yvoofG131';
+        }
+    }
+    if (props.isInForm) rules += ' DLwlgod131';
+    else {
+        if (props.labelPosition === "side") rules += ' DPlN5qb131';
+        else if (props.labelPosition === "top") rules += ' DM8Mfn131';
+    }
+    if (props.labelPosition === "side") rules += ' EPlN5qb131';
+    else if (props.labelPosition === "top") rules += ' E4w1sLc131';
+    if (props.labelPosition === "side") rules += ' CbRM95c131';
+    else if (props.labelPosition === "top") rules += ' Cxaocre131';
+    if (props.size === "XL") {
+        rules += ' -_6BNtrc-e131';
+        rules += ' vx131';
+    } else if (props.size === "L") {
+        rules += ' -_6BNtrc-d131';
+        rules += ' vx131';
+    } else if (props.size === "S") {
+        rules += ' -_6BNtrc-b131';
+        rules += ' vx131';
+    } else if (props.size === "XS") {
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
+    } else {
+        rules += ' -_6BNtrc-c131';
+        rules += ' vx131';
+    }
+    rules += ' ea131';
+    rules += ' _Fd131';
+    rules += ' _FnuYUweb131';
+    if (props.size === "XL") rules += ' -BhX7R-Fz131';
+    else if (props.size === "L") rules += ' -BhX7R-Fv131';
+    else if (props.size === "S") rules += ' -BhX7R-Fp131';
+    else if (props.size === "XS") rules += ' -BhX7R-Fn131';
+    else rules += ' -BhX7R-Fx131';
+    rules += ' -AJjOLd-UVkF0Db131';
+    rules += ' qg131';
+    rules += ' __ca131';
+    return rules;
+};
+const $ad3c2d5408b92dda$var$valueStyles = function anonymous(props) {
+    let rules = " ";
+    rules += ' zXcEWr131';
+    rules += ' yXcEWr131';
+    rules += ' BXcEWr131';
+    rules += ' AXcEWr131';
+    if (props.size === "XL") rules += ' Nl131';
+    else if (props.size === "L") rules += ' Nj131';
+    else if (props.size === "S") rules += ' Nf131';
+    else if (props.size === "XS") rules += ' Ne131';
+    else rules += ' Nk131';
+    if (props.isQuiet) rules += ' _qd131';
+    else rules += ' _qtb131';
+    if (props.size === "XL") rules += ' -Anxdcc-Zt131';
+    else if (props.size === "L") rules += ' -Anxdcc-ZStdtne131';
+    else if (props.size === "S") rules += ' -Anxdcc-Zr131';
+    else rules += ' -Anxdcc-Z3fn9H131';
+    rules += ' __v6TNLWb131';
+    if (props.isInForm) {
+        if (props.size === "XL") rules += ' Mk131';
+        else if (props.size === "L") rules += ' Mh131';
+        else if (props.size === "S") rules += ' Mg131';
+        else if (props.size === "XS") rules += ' Mf131';
+        else rules += ' Mi131';
+    }
+    rules += ' sd131';
+    rules += ' eb131';
+    if (props.size === "XL") {
+        rules += ' uk131';
+        rules += ' ucJ9TBTb131';
+        rules += ' ud3Euai131';
+        rules += ' uea131';
+        rules += ' ugb131';
+        rules += ' uhd131';
+        rules += ' uje131';
+        rules += ' u2NhKxcl131';
+        rules += ' uic131';
+    } else if (props.size === "L") {
+        rules += ' uk131';
+        rules += ' ucJ9TBTb131';
+        rules += ' ud3Euai131';
+        rules += ' uea131';
+        rules += ' ugb131';
+        rules += ' uhd131';
+        rules += ' uje131';
+        rules += ' u2NhKxcl131';
+        rules += ' uic131';
+    } else if (props.size === "S") {
+        rules += ' uk131';
+        rules += ' ucJ9TBTb131';
+        rules += ' ud3Euai131';
+        rules += ' uea131';
+        rules += ' ugb131';
+        rules += ' uhd131';
+        rules += ' uje131';
+        rules += ' u2NhKxcl131';
+        rules += ' uic131';
+    } else if (props.size === "XS") {
+        rules += ' uk131';
+        rules += ' ucJ9TBTb131';
+        rules += ' ud3Euai131';
+        rules += ' uea131';
+        rules += ' ugb131';
+        rules += ' uhd131';
+        rules += ' uje131';
+        rules += ' u2NhKxcl131';
+        rules += ' uic131';
+    } else {
+        rules += ' uk131';
+        rules += ' ucJ9TBTb131';
+        rules += ' ud3Euai131';
+        rules += ' uea131';
+        rules += ' ugb131';
+        rules += ' uhd131';
+        rules += ' uje131';
+        rules += ' u2NhKxcl131';
+        rules += ' uic131';
+    }
+    if (props.size === "XL") {
+        rules += ' -_6BNtrc-e131';
+        rules += ' vx131';
+    } else if (props.size === "L") {
+        rules += ' -_6BNtrc-d131';
+        rules += ' vx131';
+    } else if (props.size === "S") {
+        rules += ' -_6BNtrc-b131';
+        rules += ' vx131';
+    } else if (props.size === "XS") {
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
+    } else {
+        rules += ' -_6BNtrc-c131';
+        rules += ' vx131';
+    }
+    if (props.size === "XL") {
+        rules += ' xb131';
+        rules += ' _xa131';
+    } else if (props.size === "L") {
+        rules += ' xb131';
+        rules += ' _xa131';
+    } else if (props.size === "S") {
+        rules += ' xb131';
+        rules += ' _xa131';
+    } else if (props.size === "XS") {
+        rules += ' xb131';
+        rules += ' _xa131';
+    } else {
+        rules += ' xb131';
+        rules += ' _xa131';
+    }
+    if (props.size === "XL") {
+        rules += ' _Fd131';
+        rules += ' _FnuYUweb131';
+    } else if (props.size === "L") {
+        rules += ' _Fd131';
+        rules += ' _FnuYUweb131';
+    } else if (props.size === "S") {
+        rules += ' _Fd131';
+        rules += ' _FnuYUweb131';
+    } else if (props.size === "XS") {
+        rules += ' _Fd131';
+        rules += ' _FnuYUweb131';
+    } else {
+        rules += ' _Fd131';
+        rules += ' _FnuYUweb131';
+    }
+    if (props.size === "XL") rules += ' pt131';
+    else if (props.size === "L") rules += ' pt131';
+    else if (props.size === "S") rules += ' pt131';
+    else if (props.size === "XS") rules += ' pt131';
+    else rules += ' pt131';
+    return rules;
+};
+const $ad3c2d5408b92dda$export$d1328f67a56fa517 = /*#__PURE__*/ (0, $cDYdk$react.forwardRef)(function LabeledValue(props, ref) {
+    [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $ad3c2d5408b92dda$export$8ba7143a95895992);
+    props = (0, $bfa4962d90c8af48$exports.useFormProps)(props);
+    let { label: label, value: value, formatOptions: formatOptions, size: size = 'M', labelPosition: labelPosition = 'top', labelAlign: labelAlign = 'start', contextualHelp: contextualHelp, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, ...otherProps } = props;
+    let formContext = (0, $cDYdk$react.useContext)((0, $bfa4962d90c8af48$exports.FormContext));
+    let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
+    (0, $cDYdk$react.useEffect)(()=>{
+        if (domRef?.current && domRef.current.querySelectorAll('input, [contenteditable], textarea').length > 0) throw new Error('LabeledValue cannot contain an editable value.');
+    }, [
+        domRef
+    ]);
+    let children;
+    if (Array.isArray(value)) children = /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)($ad3c2d5408b92dda$var$FormattedStringList, {
+        value: value,
+        formatOptions: formatOptions
+    });
+    else if (typeof value === 'number') children = /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)($ad3c2d5408b92dda$var$FormattedNumber, {
+        value: value,
+        formatOptions: formatOptions
+    });
+    else if (typeof value === 'object' && value !== null && 'start' in value && typeof value.start === 'number') children = /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)($ad3c2d5408b92dda$var$FormattedNumber, {
+        value: value,
+        formatOptions: formatOptions
+    });
+    else if (typeof value === 'object' && value !== null && 'start' in value) children = /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)($ad3c2d5408b92dda$var$FormattedDate, {
+        value: value,
+        formatOptions: formatOptions
+    });
+    else if (value instanceof Date || typeof value === 'object' && value !== null && ('calendar' in value || 'hour' in value)) children = /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)($ad3c2d5408b92dda$var$FormattedDate, {
+        value: value,
+        formatOptions: formatOptions
+    });
+    else if (typeof value === 'string') children = value;
+    else if (/*#__PURE__*/ (0, $cDYdk$react.isValidElement)(value)) children = value;
+    return /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsxs)("div", {
+        ...(0, $cDYdk$reactariafilterDOMProps.filterDOMProps)(otherProps),
+        ref: domRef,
+        style: UNSAFE_style,
+        className: UNSAFE_className + $ad3c2d5408b92dda$var$fieldStyles({
+            isInForm: !!formContext,
+            labelPosition: labelPosition,
+            size: size
+        }, styles),
+        children: [
+            /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldLabel), {
+                elementType: "span",
+                size: size,
+                labelPosition: labelPosition,
+                labelAlign: labelAlign,
+                contextualHelp: contextualHelp,
+                children: label
+            }),
+            /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)("span", {
+                className: $ad3c2d5408b92dda$var$valueStyles({
+                    isInForm: !!formContext,
+                    size: size,
+                    labelPosition: labelPosition
+                }),
+                children: children
+            })
+        ]
+    });
+});
+function $ad3c2d5408b92dda$var$FormattedStringList({ value: value, formatOptions: formatOptions }) {
+    let formatter = (0, $cDYdk$reactariauseListFormatter.useListFormatter)(formatOptions ?? {});
+    return /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)((0, $cDYdk$reactjsxruntime.Fragment), {
+        children: formatter.format(value)
+    });
+}
+function $ad3c2d5408b92dda$var$FormattedNumber({ value: value, formatOptions: formatOptions }) {
+    let formatter = (0, $cDYdk$reactariauseNumberFormatter.useNumberFormatter)(formatOptions);
+    if (typeof value === 'object') return /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)((0, $cDYdk$reactjsxruntime.Fragment), {
+        children: formatter.formatRange(value.start, value.end)
+    });
+    return /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)((0, $cDYdk$reactjsxruntime.Fragment), {
+        children: formatter.format(value)
+    });
+}
+function $ad3c2d5408b92dda$var$FormattedDate({ value: value, formatOptions: formatOptions }) {
+    if (!formatOptions) formatOptions = $ad3c2d5408b92dda$var$getDefaultFormatOptions('start' in value ? value.start : value);
+    let dateFormatter = (0, $cDYdk$reactariauseDateFormatter.useDateFormatter)(formatOptions);
+    let timeZone = dateFormatter.resolvedOptions().timeZone || (0, $cDYdk$internationalizeddate.getLocalTimeZone)();
+    if ('start' in value && 'end' in value) {
+        let start = $ad3c2d5408b92dda$var$convertDateTime(value.start, timeZone);
+        let end = $ad3c2d5408b92dda$var$convertDateTime(value.end, timeZone);
+        return /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)((0, $cDYdk$reactjsxruntime.Fragment), {
+            children: dateFormatter.formatRange(start, end)
+        });
+    }
+    return /*#__PURE__*/ (0, $cDYdk$reactjsxruntime.jsx)((0, $cDYdk$reactjsxruntime.Fragment), {
+        children: dateFormatter.format($ad3c2d5408b92dda$var$convertDateTime(value, timeZone))
+    });
+}
+function $ad3c2d5408b92dda$var$convertDateTime(value, timeZone) {
+    if ('timeZone' in value) return value.toDate();
+    else if ('calendar' in value) return value.toDate(timeZone);
+    else if (!(value instanceof Date)) return (0, $cDYdk$internationalizeddate.toCalendarDateTime)((0, $cDYdk$internationalizeddate.today)((0, $cDYdk$internationalizeddate.getLocalTimeZone)()), value).toDate(timeZone);
+    return value;
+}
+function $ad3c2d5408b92dda$var$getDefaultFormatOptions(value) {
+    if (value instanceof Date) return {
+        dateStyle: 'long',
+        timeStyle: 'short'
+    };
+    else if ('timeZone' in value) return {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        timeZone: value.timeZone,
+        timeZoneName: 'short'
+    };
+    else if ('hour' in value && 'year' in value) return {
+        dateStyle: 'long',
+        timeStyle: 'short'
+    };
+    else if ('hour' in value) return {
+        timeStyle: 'short'
+    };
+    else return {
+        dateStyle: 'long'
+    };
+}
+
+
+//# sourceMappingURL=LabeledValue.cjs.map