@react-spectrum/s2 0.11.2 → 0.12.0

package/dist/Disclosure.css

@@ -1,442 +1,474 @@
 @layer _.a {
-  ._kb112 {
+  ._kb12 {
     border-top-width: 1px;
   }
 
-  ._ka112 {
+  ._ka12 {
     border-top-width: 0;
   }
 
-  .hb112 {
+  .hb12 {
     border-bottom-width: 1px;
   }
 
-  .ha112 {
+  .ha12 {
     border-bottom-width: 0;
   }
 
-  ._jf112 {
+  ._jf12 {
     border-style: solid;
   }
 
-  .ir112 {
+  .ir12 {
     border-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
   }
 
-  .Ng112 {
+  .Ng12 {
     min-width: calc(12.5rem * var(--s2-scale));
   }
 
-  .Jy112 {
+  .Jy12 {
     margin-top: 0;
   }
 
-  .Gy112 {
+  .Gy12 {
     margin-bottom: 0;
   }
 
-  .Iy112 {
+  .Iy12 {
     margin-inline-start: 0;
   }
 
-  .Hy112 {
+  .Hy12 {
     margin-inline-end: 0;
   }
 
-  ._vb112 {
+  ._vb12 {
     flex-shrink: 1;
   }
 
-  .Na112 {
+  .Na12 {
     min-width: 0;
   }
 
-  ._Le112 {
+  ._Le12 {
     outline-style: none;
   }
 
-  ._Lf112 {
+  ._Lf12 {
     outline-style: solid;
   }
 
-  .Oh112 {
+  .Oh12 {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  ._Mc112 {
+  ._Mc12 {
     outline-width: 2px;
   }
 
-  ._Kb112 {
+  ._Kb12 {
     outline-offset: -2px;
   }
 
-  .-_6BNtrc-c112 {
+  .-_6BNtrc-c12 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-e112 {
+  .-_6BNtrc-e12 {
     --fs: pow(1.125, 2);
   }
 
-  .-_6BNtrc-f112 {
+  .-_6BNtrc-f12 {
     --fs: pow(1.125, 3);
   }
 
-  .wd112 {
+  .wd12 {
     font-variation-settings: "wght" 700;
   }
 
-  .xd112 {
+  .xd12 {
     font-weight: 700;
   }
 
-  ._Fd112 {
+  ._Fd12 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .po112 {
+  .po12 {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .pp112 {
+  .pp12 {
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  ._ub112 {
+  ._ub12 {
     flex-grow: 1;
   }
 
-  .ea112 {
+  .ea12 {
     align-items: baseline;
   }
 
-  .S6FcKR112 {
+  .S6FcKR12 {
     padding-inline-start: calc(var(--M) * 3 / 8 - 1px);
   }
 
-  .R6FcKR112 {
+  .R6FcKR12 {
     padding-inline-end: calc(var(--M) * 3 / 8 - 1px);
   }
 
-  .Tu7Fubd112 {
+  .Tu7Fubd12 {
     padding-top: calc((var(--M)  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .Qu7Fubd112 {
+  .Qu7Fubd12 {
     padding-bottom: calc((var(--M)  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .U6FcKR112 {
+  .U6FcKR12 {
     row-gap: calc(var(--M) * 3 / 8 - 1px);
   }
 
-  .q6FcKR112 {
+  .q6FcKR12 {
     column-gap: calc(var(--M) * 3 / 8 - 1px);
   }
 
-  .MAyFGYc112 {
+  .MAyFGYc12 {
     min-height: var(--M);
   }
 
-  .Za112 {
+  .Za12 {
     width: 100%;
   }
 
-  .g9112 {
+  .g912 {
     background-color: #0000;
   }
 
-  .gabY4te112 {
+  .gabY4te12 {
     background-color: var(--lightningcss-light, #00000017) var(--lightningcss-dark, #ffffff1c);
   }
 
-  .gnSjEFb112 {
+  .gnSjEFb12 {
     background-color: var(--lightningcss-light, #00000026) var(--lightningcss-dark, #ffffff2b);
   }
 
-  ._kJ8iPYd112 {
+  ._kJ8iPYd12 {
     border-top-width: var(--_k);
   }
 
-  .hXMFGYc112 {
+  .hXMFGYc12 {
     border-bottom-width: var(--h);
   }
 
-  .ma112 {
+  .ma12 {
     border-inline-start-width: 0;
   }
 
-  .la112 {
+  .la12 {
     border-inline-end-width: 0;
   }
 
-  .od112 {
+  .od12 {
     border-start-start-radius: 0;
   }
 
-  .ob112 {
+  .ob12 {
     border-start-start-radius: .5rem;
   }
 
-  .nd112 {
+  .nd12 {
     border-start-end-radius: 0;
   }
 
-  .nb112 {
+  .nb12 {
     border-start-end-radius: .5rem;
   }
 
-  .kd112 {
+  .kd12 {
     border-end-start-radius: 0;
   }
 
-  .kb112 {
+  .kb12 {
     border-end-start-radius: .5rem;
   }
 
-  .jd112 {
+  .jd12 {
     border-end-end-radius: 0;
   }
 
-  .jb112 {
+  .jb12 {
     border-end-end-radius: .5rem;
   }
 
-  ._Wd112 {
+  ._Wd12 {
     text-align: start;
   }
 
-  .__ca112 {
+  .__ca12 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .-M_-Me112 {
+  .-M_-Me12 {
     --M: calc(1.125rem * var(--s2-scale));
   }
 
-  .-M_-Mg112 {
+  .-M_-Mg12 {
     --M: calc(1.5rem * var(--s2-scale));
   }
 
-  .-M_-Mi112 {
+  .-M_-Mi12 {
     --M: calc(2rem * var(--s2-scale));
   }
 
-  .-M_-Mh112 {
+  .-M_-Mh12 {
     --M: calc(2.5rem * var(--s2-scale));
   }
 
-  .-M_-Mk112 {
+  .-M_-Mk12 {
     --M: calc(3rem * var(--s2-scale));
   }
 
-  .-M_-Mj112 {
+  .-M_-Mj12 {
     --M: calc(3.5rem * var(--s2-scale));
   }
 
-  .-_k_-_ka112 {
+  .-_k_-_ka12 {
     --_k: 0px;
   }
 
-  .-h_-ha112 {
+  .-h_-ha12 {
     --h: 0px;
   }
 
-  ._Sc112 {
+  ._Sc12 {
     rotate: 180deg;
   }
 
-  ._Sd112 {
+  ._Sd12 {
     rotate: 90deg;
   }
 
-  .Yd112 {
+  .Yd12 {
     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;
   }
 
-  .Xb112 {
-    transition-duration: .15s;
-  }
-
-  ._2b112 {
-    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
-  }
-
-  .-_8sjo0b-t5ZbAob112 {
+  .-_8sjo0b-t5ZbAob12 {
     --iconPrimary: currentColor;
   }
 
-  ._va112 {
+  ._va12 {
     flex-shrink: 0;
   }
 
-  .sd112 {
+  .sd12 {
     display: flex;
   }
 
-  .eb112 {
+  .eb12 {
     align-items: center;
   }
 
-  .Ub112 {
+  .Ub12 {
     row-gap: .25rem;
   }
 
-  .qb112 {
+  .qb12 {
     column-gap: .25rem;
   }
 
-  .uk112 {
+  .uk12 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-d112 {
+  .-_6BNtrc-d12 {
     --fs: pow(1.125, 1);
   }
 
-  .vx112 {
+  .vx12 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .wb112 {
+  .wb12 {
     font-variation-settings: "wght" 400;
   }
 
-  .xb112 {
+  .xb12 {
     font-weight: 400;
   }
 
-  ._xa112 {
+  ._xa12 {
     font-synthesis-weight: none;
   }
 
-  ._Fb112 {
+  ._Fb12 {
     line-height: 1.5;
   }
 
-  .pt112 {
+  .pt12 {
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .Tt112 {
+  .FfwmW1d12 {
+    height: var(--disclosure-panel-height);
+  }
+
+  ._Nb12 {
+    overflow-x: clip;
+  }
+
+  .Pb12 {
+    overflow-y: clip;
+  }
+
+  .Ysgyfc12 {
+    transition-property: height;
+  }
+
+  .Xb12 {
+    transition-duration: .15s;
+  }
+
+  ._2b12 {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  .Tt12 {
     padding-top: 8px;
   }
 
-  .Qf112 {
+  .Qf12 {
     padding-bottom: 16px;
   }
 
-  .St112 {
+  .St12 {
     padding-inline-start: 8px;
   }
 
-  .SLabwmd112 {
+  .SLabwmd12 {
     padding-inline-start: .5625rem;
   }
 
-  .Se112 {
+  .Se12 {
     padding-inline-start: 12px;
   }
 
-  .Sz5EUbe112 {
+  .Sz5EUbe12 {
     padding-inline-start: .9375rem;
   }
 
-  .Rt112 {
+  .Rt12 {
     padding-inline-end: 8px;
   }
 
-  .RLabwmd112 {
+  .RLabwmd12 {
     padding-inline-end: .5625rem;
   }
 
-  .Re112 {
+  .Re12 {
     padding-inline-end: 12px;
   }
 
-  .Rz5EUbe112 {
+  .Rz5EUbe12 {
     padding-inline-end: .9375rem;
   }
 }
 
 @layer _.b {
-  .hkb112:last-child {
+  .hkb12:last-child {
     border-bottom-width: 1px;
   }
 
-  .hka112:last-child {
+  .hka12:last-child {
     border-bottom-width: 0;
   }
 
-  .wX0cczbc112:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .wX0cczbc12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-variation-settings: "wght" 500;
   }
 
-  .xX0cczbc112:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba112:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FezxGHba112:is(:lang(ar), :lang(he)) {
+  ._FezxGHba12:is(:lang(ar), :lang(he)) {
     line-height: 1.3;
   }
 
-  .uch112:lang(ar) {
+  .uch12:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUwec112:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec12: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 {
-  ._FnuYUweb112:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb12:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .udi112:lang(he) {
+  .udi12:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea112:lang(ja) {
+  .uea12: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 {
-  .ugb112:lang(ko) {
+  .ugb12:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd112:lang(zh) {
+  .uhd12:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje112:lang(zh-hant) {
+  .uje12: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 {
-  .u2NhKxcl112:lang(zh-HK) {
+  .u2NhKxcl12: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 {
-  .uic112:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic12: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.dklsgc {
+  @media (prefers-reduced-motion: reduce) {
+    .Ydklsgce12 {
+      transition-property: none;
+    }
+
+    .Xdklsgcb12 {
+      transition-duration: .15s;
+    }
+
+    ._2dklsgcb12 {
+      transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+    }
+  }
+}
 /*# sourceMappingURL=Disclosure.css.map */

package/dist/Disclosure.css.map

@@ -1 +1 @@
-{"mappings":"AC2CmB;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;;;;EAAA;;;;EA4EC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuCwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6D1B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9PD;EAAA;;;;EAAA;;;;EA8EE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgLD;;;;EAAA;;;;;AAhLC;EAAA;;;;EAgLD;;;;;AAhLC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","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","/*\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, focusRing, lightDark, space, style} from '../style' with { type: 'macro' };\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | '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 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    isDisabled: 'disabled'\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' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  paddingTop: {\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: 16\n  },\n  paddingX: {\n    isExpanded: {\n      size: {\n        S: 8,\n        M: space(9),\n        L: 12,\n        XL: space(15)\n      }\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 {isExpanded} = useContext(DisclosureStateContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n      {props.children}\n    </RACDisclosurePanel>\n  );\n});\n\n"],"names":[],"version":3,"file":"Disclosure.css.map"}
+{"mappings":"AC2CmB;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;;;;EAAA;;;;EA4EC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuCwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6D1B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAxQA;EAAA;;;;EAAA;;;;EA8EE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgLD;;;;EAAA;;;;;AAhLC;EAAA;;;;EAgLD;;;;;AAhLC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAgLD;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, focusRing, lightDark, space, style} from '../style' with { type: 'macro' };\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | '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 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    isDisabled: 'disabled'\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' | '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\n"],"names":[],"version":3,"file":"Disclosure.css.map"}