@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/Disclosure.css

@@ -1,456 +1,456 @@
 @layer _.a {
-  ._kb13 {
+  ._kb15 {
     border-top-width: 1px;
   }
 
-  ._ka13 {
+  ._ka15 {
     border-top-width: 0;
   }
 
-  .hb13 {
+  .hb15 {
     border-bottom-width: 1px;
   }
 
-  .ha13 {
+  .ha15 {
     border-bottom-width: 0;
   }
 
-  ._jf13 {
+  ._jf15 {
     border-style: solid;
   }
 
-  .ir13 {
+  .ir15 {
     border-color: light-dark(#e1e1e1, #323232);
   }
 
-  .Ng13 {
+  .Ng15 {
     min-width: calc(12.5rem * var(--s2-scale));
   }
 
-  .Jy13 {
+  .Jy15 {
     margin-top: 0;
   }
 
-  .Gy13 {
+  .Gy15 {
     margin-bottom: 0;
   }
 
-  .Iy13 {
+  .Iy15 {
     margin-inline-start: 0;
   }
 
-  .Hy13 {
+  .Hy15 {
     margin-inline-end: 0;
   }
 
-  ._vb13 {
+  ._vb15 {
     flex-shrink: 1;
   }
 
-  .Na13 {
+  .Na15 {
     min-width: 0;
   }
 
-  ._Le13 {
+  ._Le15 {
     outline-style: none;
   }
 
-  ._Lf13 {
+  ._Lf15 {
     outline-style: solid;
   }
 
-  .Oh13 {
+  .Oh15 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  ._Mc13 {
+  ._Mc15 {
     outline-width: 2px;
   }
 
-  ._Kb13 {
+  ._Kb15 {
     outline-offset: -2px;
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c15 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e15 {
     --fs: pow(1.125, 2);
   }
 
-  .-_6BNtrc-f13 {
+  .-_6BNtrc-f15 {
     --fs: pow(1.125, 3);
   }
 
-  .xd13 {
+  .xd15 {
     font-weight: 700;
   }
 
-  ._Fd13 {
+  ._Fd15 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .po13 {
+  .po15 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .pp13 {
+  .pp15 {
     color: light-dark(#c6c6c6, #444);
   }
 
-  ._ub13 {
+  ._ub15 {
     flex-grow: 1;
   }
 
-  .ea13 {
+  .ea15 {
     align-items: baseline;
   }
 
-  .S6FcKR13 {
+  .S6FcKR15 {
     padding-inline-start: calc(var(--M) * 3/8 - 1px);
   }
 
-  .R6FcKR13 {
+  .R6FcKR15 {
     padding-inline-end: calc(var(--M) * 3/8 - 1px);
   }
 
-  .Tu7Fubd13 {
+  .Tu7Fubd15 {
     padding-top: calc((var(--M) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .Qu7Fubd13 {
+  .Qu7Fubd15 {
     padding-bottom: calc((var(--M) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .U6FcKR13 {
+  .U6FcKR15 {
     row-gap: calc(var(--M) * 3/8 - 1px);
   }
 
-  .q6FcKR13 {
+  .q6FcKR15 {
     column-gap: calc(var(--M) * 3/8 - 1px);
   }
 
-  .MAyFGYc13 {
+  .MAyFGYc15 {
     min-height: var(--M);
   }
 
-  .Za13 {
+  .Za15 {
     width: 100%;
   }
 
-  .g913 {
+  .g915 {
     background-color: #0000;
   }
 
-  .gabY4te13 {
+  .gabY4te15 {
     background-color: light-dark(#00000017, #ffffff1c);
   }
 
-  .gnSjEFb13 {
+  .gnSjEFb15 {
     background-color: light-dark(#00000026, #ffffff2b);
   }
 
-  ._kJ8iPYd13 {
+  ._kJ8iPYd15 {
     border-top-width: var(--_k);
   }
 
-  .hXMFGYc13 {
+  .hXMFGYc15 {
     border-bottom-width: var(--h);
   }
 
-  .ma13 {
+  .ma15 {
     border-inline-start-width: 0;
   }
 
-  .la13 {
+  .la15 {
     border-inline-end-width: 0;
   }
 
-  .od13 {
+  .od15 {
     border-start-start-radius: 0;
   }
 
-  .ob13 {
+  .ob15 {
     border-start-start-radius: .5rem;
   }
 
-  .nd13 {
+  .nd15 {
     border-start-end-radius: 0;
   }
 
-  .nb13 {
+  .nb15 {
     border-start-end-radius: .5rem;
   }
 
-  .kd13 {
+  .kd15 {
     border-end-start-radius: 0;
   }
 
-  .kb13 {
+  .kb15 {
     border-end-start-radius: .5rem;
   }
 
-  .jd13 {
+  .jd15 {
     border-end-end-radius: 0;
   }
 
-  .jb13 {
+  .jb15 {
     border-end-end-radius: .5rem;
   }
 
-  ._Wd13 {
+  ._Wd15 {
     text-align: start;
   }
 
-  .__ca13 {
+  .__ca15 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .-M_-Me13 {
+  .-M_-Me15 {
     --M: calc(1.125rem * var(--s2-scale));
   }
 
-  .-M_-Mg13 {
+  .-M_-Mg15 {
     --M: calc(1.5rem * var(--s2-scale));
   }
 
-  .-M_-Mi13 {
+  .-M_-Mi15 {
     --M: calc(2rem * var(--s2-scale));
   }
 
-  .-M_-Mh13 {
+  .-M_-Mh15 {
     --M: calc(2.5rem * var(--s2-scale));
   }
 
-  .-M_-Mk13 {
+  .-M_-Mk15 {
     --M: calc(3rem * var(--s2-scale));
   }
 
-  .-M_-Mj13 {
+  .-M_-Mj15 {
     --M: calc(3.5rem * var(--s2-scale));
   }
 
-  .-_k_-_ka13 {
+  .-_k_-_ka15 {
     --_k: 0px;
   }
 
-  .-h_-ha13 {
+  .-h_-ha15 {
     --h: 0px;
   }
 
-  ._Sc13 {
+  ._Sc15 {
     rotate: 180deg;
   }
 
-  ._Sd13 {
+  ._Sd15 {
     rotate: 90deg;
   }
 
-  .Yd13 {
+  .Yd15 {
     transition-property: color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  .-_8sjo0b-t5ZbAob13 {
+  .-_8sjo0b-t5ZbAob15 {
     --iconPrimary: currentColor;
   }
 
-  ._va13 {
+  ._va15 {
     flex-shrink: 0;
   }
 
-  .sd13 {
+  .sd15 {
     display: flex;
   }
 
-  .eb13 {
+  .eb15 {
     align-items: center;
   }
 
-  .Ub13 {
+  .Ub15 {
     row-gap: .25rem;
   }
 
-  .qb13 {
+  .qb15 {
     column-gap: .25rem;
   }
 
-  .uk13 {
+  .uk15 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d15 {
     --fs: pow(1.125, 1);
   }
 
-  .vx13 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb15 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa15 {
     font-synthesis-weight: none;
   }
 
-  ._Fb13 {
+  ._Fb15 {
     line-height: 1.5;
   }
 
-  .pt13 {
+  .pt15 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .FfwmW1d13 {
+  .FfwmW1d15 {
     height: var(--disclosure-panel-height);
   }
 
-  ._Nb13 {
+  ._Nb15 {
     overflow-x: clip;
   }
 
-  .Pb13 {
+  .Pb15 {
     overflow-y: clip;
   }
 
-  .Ysgyfc13 {
+  .Ysgyfc15 {
     transition-property: height;
   }
 
-  .Xb13 {
+  .Xb15 {
     transition-duration: .15s;
   }
 
-  ._2b13 {
+  ._2b15 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .Tt13 {
+  .Tt15 {
     padding-top: 8px;
   }
 
-  .Qf13 {
+  .Qf15 {
     padding-bottom: 16px;
   }
 
-  .St13 {
+  .St15 {
     padding-inline-start: 8px;
   }
 
-  .SLabwmd13 {
+  .SLabwmd15 {
     padding-inline-start: .5625rem;
   }
 
-  .Se13 {
+  .Se15 {
     padding-inline-start: 12px;
   }
 
-  .Sz5EUbe13 {
+  .Sz5EUbe15 {
     padding-inline-start: .9375rem;
   }
 
-  .Rt13 {
+  .Rt15 {
     padding-inline-end: 8px;
   }
 
-  .RLabwmd13 {
+  .RLabwmd15 {
     padding-inline-end: .5625rem;
   }
 
-  .Re13 {
+  .Re15 {
     padding-inline-end: 12px;
   }
 
-  .Rz5EUbe13 {
+  .Rz5EUbe15 {
     padding-inline-end: .9375rem;
   }
 }
 
 @layer _.b {
-  .hkb13:last-child {
+  .hkb15:last-child {
     border-bottom-width: 1px;
   }
 
-  .hka13:last-child {
+  .hka15:last-child {
     border-bottom-width: 0;
   }
 
-  .xX0cczbc13:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc15:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba13:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba15:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb15:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUwec13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.7;
   }
 }
 
 @layer _.c {
-  .ud3Euai13:lang(he) {
+  .ud3Euai15:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea13:lang(ja) {
+  .uea15: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 {
-  .ugb13:lang(ko) {
+  .ugb15:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd15:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje15: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 {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl15:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic15: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.l {
   @media (forced-colors: active) {
-    .Olc13 {
+    .Olc15 {
       outline-color: highlight;
     }
 
-    .plb13 {
+    .plb15 {
       color: buttontext;
     }
 
-    .plc13 {
+    .plc15 {
       color: graytext;
     }
   }
@@ -458,15 +458,15 @@
 
 @layer _.b.dklsgc {
   @media (prefers-reduced-motion: reduce) {
-    .Ydklsgce13 {
+    .Ydklsgce15 {
       transition-property: none;
     }
 
-    .Xdklsgcb13 {
+    .Xdklsgcb15 {
       transition-duration: .15s;
     }
 
-    ._2dklsgcb13 {
+    ._2dklsgcb15 {
       transition-timing-function: cubic-bezier(.45, 0, .4, 1);
     }
   }

package/dist/private/Disclosure.css.map

@@ -1 +1 @@
-{"mappings":"ACuDmB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsEE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgFC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuCwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6D1B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5QA;EAAA;;;;EAAA;;;;EA8EE;;;;EAAA;;;;EAAA;;;;EAoLD;;;;EAAA;;;;;AApLC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAoLD;EAAA;IAAA;;;;IAAA;;;;IAAA","sources":["af82a6f8008c749b","packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["@import \"02b9b02b69a441b2\";\n@import \"80d1cf6aba9342e9\";\n@import \"d47c144c912b2c65\";\n@import \"54c3947845455457\";\n@import \"47e48706d70658de\";\n@import \"879f5cdc449bf13e\";\n@import \"236e8940bf1b2db4\";\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 {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {baseColor, centerPadding, focusRing, lightDark, space, style} from '../style' with { type: 'macro' };\nimport {Button} from 'react-aria-components/Button';\nimport {CenterBaseline} from './CenterBaseline';\n\nimport Chevron from '../ui-icons/Chevron';\n\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {\n  DisclosureStateContext,\n  Disclosure as RACDisclosure,\n  DisclosurePanel as RACDisclosurePanel,\n  DisclosurePanelProps as RACDisclosurePanelProps,\n  DisclosureProps as RACDisclosureProps\n} from 'react-aria-components/Disclosure';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Heading} from 'react-aria-components/Heading';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the disclosure.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the disclosures.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. */\n  children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n  color: 'heading',\n  borderTopWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderBottomWidth: {\n    default: 1,\n    isQuiet: 0,\n    isInGroup: {\n      default: 0,\n      ':last-child': {\n        default: 1,\n        isQuiet: 0\n      }\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: 'gray-200',\n  minWidth: 200\n}, getAllowedOverrides());\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.\n */\nexport const Disclosure = forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {\n    size = 'M',\n    density = 'regular',\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let isInGroup = useContext(DisclosureContext) !== null;\n\n  return (\n    <Provider\n      values={[\n        [DisclosureContext, {size, isQuiet, density}]\n      ]}>\n      <RACDisclosure\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet, isInGroup}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n});\n\nexport interface DisclosureTitleProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the disclosure header.\n   *\n   * @default 3\n   */\n  level?: number,\n  /** The contents of the disclosure header. */\n  children: React.ReactNode\n}\n\ninterface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  children: React.ReactNode\n}\n\nconst headingStyle = style({\n  margin: 0,\n  flexGrow: 1,\n  display: 'flex',\n  flexShrink: 1,\n  minWidth: 0\n});\n\nconst buttonStyles = style({\n  ...focusRing(),\n  outlineOffset: -2,\n  font: 'heading',\n  color: {\n    default: baseColor('neutral'),\n    forcedColors: 'ButtonText',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  fontWeight: 'bold',\n  fontSize: {\n    size: {\n      S: 'title-sm',\n      M: 'title',\n      L: 'title-lg',\n      XL: 'title-xl'\n    }\n  },\n  lineHeight: 'ui',\n  display: 'flex',\n  flexGrow: 1,\n  alignItems: 'baseline',\n  paddingX: 'calc(self(minHeight) * 3/8 - 1px)',\n  paddingY: centerPadding(),\n  gap: 'calc(self(minHeight) * 3/8 - 1px)',\n  minHeight: {\n    // compact is equivalent to 'control', but other densities have more padding.\n    size: {\n      S: {\n        density: {\n          compact: 18,\n          regular: 24,\n          spacious: 32\n        }\n      },\n      M: {\n        density: {\n          compact: 24,\n          regular: 32,\n          spacious: 40\n        }\n      },\n      L: {\n        density: {\n          compact: 32,\n          regular: 40,\n          spacious: 48\n        }\n      },\n      XL: {\n        density: {\n          compact: 40,\n          regular: 48,\n          spacious: 56\n        }\n      }\n    }\n  },\n  width: 'full',\n  backgroundColor: {\n    default: 'transparent',\n    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n    isPressed: lightDark('transparent-black-300', 'transparent-white-300')\n  },\n  transition: 'default',\n  borderWidth: 0,\n  borderRadius: {\n    // Only rounded for keyboard focus and quiet.\n    default: 'none',\n    isFocusVisible: 'default',\n    isQuiet: 'default'\n  },\n  textAlign: 'start',\n  disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transition: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nconst InternalDisclosureHeader = createContext<{} | null>(null);\n\nfunction DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    children\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;\n\n  // Shift button size down by 2 for compact density, 1 for regular/spacious to ensure there is space between the top and bottom of the action button and container\n  let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;\n  const sizes = ['XS', 'S', 'M', 'L', 'XL'];\n  const currentIndex = sizes.indexOf(size ?? 'M');\n  const shift = density === 'compact' ? 2 : 1;\n  newSize = sizes[Math.max(0, currentIndex - shift)] as 'XS' | 'S' | 'M' | 'L' | 'XL';\n\n  return (\n    <Provider\n      values={[\n        [ActionButtonContext, {size: newSize, isQuiet}],\n        [InternalDisclosureHeader, {}]\n      ]}>\n      <div\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})}\n        ref={domRef}>\n        {children}\n      </div>\n    </Provider>\n  );\n}\n\n/**\n * A wrapper element for the disclosure title that can contain other elements not part of the trigger.\n */\nexport const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);\n\n/**\n * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nexport const DisclosureTitle = forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    level = 3,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n\n  let buttonTrigger = (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n  let ctx = useContext(InternalDisclosureHeader);\n  if (ctx) {\n    return buttonTrigger;\n  }\n\n  return (\n    <DisclosureHeader>\n      {buttonTrigger}\n    </DisclosureHeader>\n  );\n});\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'render' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  height: '--disclosure-panel-height',\n  overflow: 'clip',\n  transition: {\n    default: '[height]',\n    '@media (prefers-reduced-motion: reduce)': 'none'\n  }\n});\n\nconst panelInner = style({\n  paddingTop: 8,\n  paddingBottom: 16,\n  paddingX: {\n    size: {\n      S: 8,\n      M: space(9),\n      L: 12,\n      XL: space(15)\n    }\n  }\n});\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nexport const DisclosurePanel = forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles}>\n      <div className={panelInner({size})}>\n        {props.children}\n      </div>\n    </RACDisclosurePanel>\n  );\n});\n"],"names":[],"version":3,"file":"Disclosure.css.map"}
+{"mappings":"ACmFmB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0EE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmFC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoCe;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkEjB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArRA;EAAA;;;;EAAA;;;;EAkFE;;;;EAAA;;;;EAAA;;;;EAyLD;;;;EAAA;;;;;AAzLC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAyLD;EAAA;IAAA;;;;IAAA;;;;IAAA","sources":["af82a6f8008c749b","packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["@import \"02b9b02b69a441b2\";\n@import \"80d1cf6aba9342e9\";\n@import \"d47c144c912b2c65\";\n@import \"54c3947845455457\";\n@import \"47e48706d70658de\";\n@import \"879f5cdc449bf13e\";\n@import \"236e8940bf1b2db4\";\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 {ActionButtonContext} from './ActionButton';\nimport {\n  AriaLabelingProps,\n  DOMProps,\n  DOMRef,\n  DOMRefValue,\n  forwardRefType,\n  GlobalDOMAttributes\n} from '@react-types/shared';\nimport {\n  baseColor,\n  centerPadding,\n  focusRing,\n  lightDark,\n  space,\n  style\n} from '../style' with {type: 'macro'};\nimport {Button} from 'react-aria-components/Button';\nimport {CenterBaseline} from './CenterBaseline';\n\nimport Chevron from '../ui-icons/Chevron';\n\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {\n  DisclosureStateContext,\n  Disclosure as RACDisclosure,\n  DisclosurePanel as RACDisclosurePanel,\n  DisclosurePanelProps as RACDisclosurePanelProps,\n  DisclosureProps as RACDisclosureProps\n} from 'react-aria-components/Disclosure';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {\n  getAllowedOverrides,\n  StyleProps,\n  StylesPropWithFont,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {Heading} from 'react-aria-components/Heading';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps\n  extends\n    Omit<\n      RACDisclosureProps,\n      'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes\n    >,\n    StyleProps {\n  /**\n   * The size of the disclosure.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The amount of space between the disclosures.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /** The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. */\n  children: ReactNode;\n}\n\nexport const DisclosureContext =\n  createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style(\n  {\n    color: 'heading',\n    borderTopWidth: {\n      default: 1,\n      isQuiet: 0\n    },\n    borderBottomWidth: {\n      default: 1,\n      isQuiet: 0,\n      isInGroup: {\n        default: 0,\n        ':last-child': {\n          default: 1,\n          isQuiet: 0\n        }\n      }\n    },\n    borderStartWidth: 0,\n    borderEndWidth: 0,\n    borderStyle: 'solid',\n    borderColor: 'gray-200',\n    minWidth: 200\n  },\n  getAllowedOverrides()\n);\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a header with a heading and\n * trigger button, and a panel that contains the content.\n */\nexport const Disclosure = forwardRef(function Disclosure(\n  props: DisclosureProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {size = 'M', density = 'regular', isQuiet, UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useDOMRef(ref);\n\n  let isInGroup = useContext(DisclosureContext) !== null;\n\n  return (\n    <Provider values={[[DisclosureContext, {size, isQuiet, density}]]}>\n      <RACDisclosure\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet, isInGroup}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n});\n\nexport interface DisclosureTitleProps extends UnsafeStyles, DOMProps {\n  /**\n   * The heading level of the disclosure header.\n   *\n   * @default 3\n   */\n  level?: number;\n  /** The contents of the disclosure header. */\n  children: React.ReactNode;\n  /**\n   * Spectrum-defined styles, returned by the `style()` macro. Only allows overriding\n   * `font`, `fontFamily`, `fontWeight`, `fontSize`, and `lineHeight`.\n   */\n  styles?: StylesPropWithFont;\n}\n\ninterface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  children: React.ReactNode;\n}\n\nconst headingStyle = style({\n  margin: 0,\n  flexGrow: 1,\n  display: 'flex',\n  flexShrink: 1,\n  minWidth: 0\n});\n\nconst buttonStyles = style(\n  {\n    ...focusRing(),\n    outlineOffset: -2,\n    font: 'heading',\n    color: {\n      default: baseColor('neutral'),\n      forcedColors: 'ButtonText',\n      isDisabled: {\n        default: 'disabled',\n        forcedColors: 'GrayText'\n      }\n    },\n    fontWeight: 'bold',\n    fontSize: {\n      size: {\n        S: 'title-sm',\n        M: 'title',\n        L: 'title-lg',\n        XL: 'title-xl'\n      }\n    },\n    lineHeight: 'ui',\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'baseline',\n    paddingX: 'calc(self(minHeight) * 3/8 - 1px)',\n    paddingY: centerPadding(),\n    gap: 'calc(self(minHeight) * 3/8 - 1px)',\n    minHeight: {\n      // compact is equivalent to 'control', but other densities have more padding.\n      size: {\n        S: {\n          density: {\n            compact: 18,\n            regular: 24,\n            spacious: 32\n          }\n        },\n        M: {\n          density: {\n            compact: 24,\n            regular: 32,\n            spacious: 40\n          }\n        },\n        L: {\n          density: {\n            compact: 32,\n            regular: 40,\n            spacious: 48\n          }\n        },\n        XL: {\n          density: {\n            compact: 40,\n            regular: 48,\n            spacious: 56\n          }\n        }\n      }\n    },\n    width: 'full',\n    backgroundColor: {\n      default: 'transparent',\n      isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n      isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n      isPressed: lightDark('transparent-black-300', 'transparent-white-300')\n    },\n    transition: 'default',\n    borderWidth: 0,\n    borderRadius: {\n      // Only rounded for keyboard focus and quiet.\n      default: 'none',\n      isFocusVisible: 'default',\n      isQuiet: 'default'\n    },\n    textAlign: 'start',\n    disableTapHighlight: true\n  },\n  getAllowedOverrides({font: true})\n);\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transition: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nconst InternalDisclosureHeader = createContext<{} | null>(null);\n\nfunction DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {UNSAFE_className, UNSAFE_style, children} = props;\n  let domRef = useDOMRef(ref);\n  let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;\n\n  // Shift button size down by 2 for compact density, 1 for regular/spacious to ensure there is space between the top and bottom of the action button and container\n  let newSize: 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;\n  const sizes = ['XS', 'S', 'M', 'L', 'XL'];\n  const currentIndex = sizes.indexOf(size ?? 'M');\n  const shift = density === 'compact' ? 2 : 1;\n  newSize = sizes[Math.max(0, currentIndex - shift)] as 'XS' | 'S' | 'M' | 'L' | 'XL';\n\n  return (\n    <Provider\n      values={[\n        [ActionButtonContext, {size: newSize, isQuiet}],\n        [InternalDisclosureHeader, {}]\n      ]}>\n      <div\n        style={UNSAFE_style}\n        className={\n          (UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})\n        }\n        ref={domRef}>\n        {children}\n      </div>\n    </Provider>\n  );\n}\n\n/**\n * A wrapper element for the disclosure title that can contain other elements not part of the\n * trigger.\n */\nexport const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(\n  DisclosureHeaderWithForwardRef\n);\n\n/**\n * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nexport const DisclosureTitle = forwardRef(function DisclosureTitle(\n  props: DisclosureTitleProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {level = 3, UNSAFE_style, UNSAFE_className = '', styles, ...otherProps} = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n\n  let buttonTrigger = (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button\n        className={renderProps => buttonStyles({...renderProps, size, density, isQuiet}, styles)}\n        slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n  let ctx = useContext(InternalDisclosureHeader);\n  if (ctx) {\n    return buttonTrigger;\n  }\n\n  return <DisclosureHeader>{buttonTrigger}</DisclosureHeader>;\n});\n\nexport interface DisclosurePanelProps\n  extends\n    Omit<RACDisclosurePanelProps, 'className' | 'style' | 'render' | 'children'>,\n    UnsafeStyles,\n    DOMProps,\n    AriaLabelingProps {\n  children: React.ReactNode;\n}\n\nconst panelStyles = style({\n  font: 'body',\n  height: '--disclosure-panel-height',\n  overflow: 'clip',\n  transition: {\n    default: '[height]',\n    '@media (prefers-reduced-motion: reduce)': 'none'\n  }\n});\n\nconst panelInner = style({\n  paddingTop: 8,\n  paddingBottom: 16,\n  paddingX: {\n    size: {\n      S: 8,\n      M: space(9),\n      L: 12,\n      XL: space(15)\n    }\n  }\n});\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is\n * expanded.\n */\nexport const DisclosurePanel = forwardRef(function DisclosurePanel(\n  props: DisclosurePanelProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles}>\n      <div className={panelInner({size})}>{props.children}</div>\n    </RACDisclosurePanel>\n  );\n});\n"],"names":[],"version":3,"file":"Disclosure.css.map"}