@react-spectrum/s2 3.0.0-nightly-cc08a8dbc-250210 → 3.0.0-nightly-56da82e3e-250212

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/dist/Accordion.cjs.map +1 -1
  2. package/dist/Accordion.css.map +1 -1
  3. package/dist/Accordion.mjs.map +1 -1
  4. package/dist/ActionButton.cjs.map +1 -1
  5. package/dist/ActionButton.css.map +1 -1
  6. package/dist/ActionButton.mjs.map +1 -1
  7. package/dist/ActionMenu.cjs.map +1 -1
  8. package/dist/ActionMenu.mjs.map +1 -1
  9. package/dist/Avatar.cjs.map +1 -1
  10. package/dist/Avatar.css.map +1 -1
  11. package/dist/Avatar.mjs.map +1 -1
  12. package/dist/AvatarGroup.cjs.map +1 -1
  13. package/dist/AvatarGroup.css.map +1 -1
  14. package/dist/AvatarGroup.mjs.map +1 -1
  15. package/dist/Breadcrumbs.cjs.map +1 -1
  16. package/dist/Breadcrumbs.css.map +1 -1
  17. package/dist/Breadcrumbs.mjs.map +1 -1
  18. package/dist/Button.cjs.map +1 -1
  19. package/dist/Button.css.map +1 -1
  20. package/dist/Button.mjs.map +1 -1
  21. package/dist/ButtonGroup.cjs.map +1 -1
  22. package/dist/ButtonGroup.css.map +1 -1
  23. package/dist/ButtonGroup.mjs.map +1 -1
  24. package/dist/CardView.cjs.map +1 -1
  25. package/dist/CardView.css.map +1 -1
  26. package/dist/CardView.mjs.map +1 -1
  27. package/dist/Checkbox.cjs.map +1 -1
  28. package/dist/Checkbox.css.map +1 -1
  29. package/dist/Checkbox.mjs.map +1 -1
  30. package/dist/CheckboxGroup.cjs.map +1 -1
  31. package/dist/CheckboxGroup.css.map +1 -1
  32. package/dist/CheckboxGroup.mjs.map +1 -1
  33. package/dist/CloseButton.cjs.map +1 -1
  34. package/dist/CloseButton.css.map +1 -1
  35. package/dist/CloseButton.mjs.map +1 -1
  36. package/dist/ColorArea.cjs.map +1 -1
  37. package/dist/ColorArea.css.map +1 -1
  38. package/dist/ColorArea.mjs.map +1 -1
  39. package/dist/ColorField.cjs.map +1 -1
  40. package/dist/ColorField.css.map +1 -1
  41. package/dist/ColorField.mjs.map +1 -1
  42. package/dist/ColorSlider.cjs.map +1 -1
  43. package/dist/ColorSlider.css.map +1 -1
  44. package/dist/ColorSlider.mjs.map +1 -1
  45. package/dist/ColorSwatch.cjs.map +1 -1
  46. package/dist/ColorSwatch.css.map +1 -1
  47. package/dist/ColorSwatch.mjs.map +1 -1
  48. package/dist/ColorWheel.cjs.map +1 -1
  49. package/dist/ColorWheel.css.map +1 -1
  50. package/dist/ColorWheel.mjs.map +1 -1
  51. package/dist/Content.cjs.map +1 -1
  52. package/dist/Content.mjs.map +1 -1
  53. package/dist/ContextualHelp.cjs.map +1 -1
  54. package/dist/ContextualHelp.css.map +1 -1
  55. package/dist/ContextualHelp.mjs.map +1 -1
  56. package/dist/Disclosure.cjs.map +1 -1
  57. package/dist/Disclosure.css.map +1 -1
  58. package/dist/Disclosure.mjs.map +1 -1
  59. package/dist/Divider.cjs.map +1 -1
  60. package/dist/Divider.css.map +1 -1
  61. package/dist/Divider.mjs.map +1 -1
  62. package/dist/DropZone.cjs.map +1 -1
  63. package/dist/DropZone.css.map +1 -1
  64. package/dist/DropZone.mjs.map +1 -1
  65. package/dist/Field.cjs.map +1 -1
  66. package/dist/Field.css.map +1 -1
  67. package/dist/Field.mjs.map +1 -1
  68. package/dist/Form.cjs.map +1 -1
  69. package/dist/Form.css.map +1 -1
  70. package/dist/Form.mjs.map +1 -1
  71. package/dist/IllustratedMessage.cjs.map +1 -1
  72. package/dist/IllustratedMessage.css.map +1 -1
  73. package/dist/IllustratedMessage.mjs.map +1 -1
  74. package/dist/Image.cjs.map +1 -1
  75. package/dist/Image.css.map +1 -1
  76. package/dist/Image.mjs.map +1 -1
  77. package/dist/Link.cjs.map +1 -1
  78. package/dist/Link.css.map +1 -1
  79. package/dist/Link.mjs.map +1 -1
  80. package/dist/Menu.cjs +1 -0
  81. package/dist/Menu.cjs.map +1 -1
  82. package/dist/Menu.css +4 -0
  83. package/dist/Menu.css.map +1 -1
  84. package/dist/Menu.mjs +1 -0
  85. package/dist/Menu.mjs.map +1 -1
  86. package/dist/Meter.cjs.map +1 -1
  87. package/dist/Meter.css.map +1 -1
  88. package/dist/Meter.mjs.map +1 -1
  89. package/dist/NumberField.cjs.map +1 -1
  90. package/dist/NumberField.css.map +1 -1
  91. package/dist/NumberField.mjs.map +1 -1
  92. package/dist/Picker.cjs +1 -0
  93. package/dist/Picker.cjs.map +1 -1
  94. package/dist/Picker.css +4 -0
  95. package/dist/Picker.css.map +1 -1
  96. package/dist/Picker.mjs +1 -0
  97. package/dist/Picker.mjs.map +1 -1
  98. package/dist/ProgressBar.cjs.map +1 -1
  99. package/dist/ProgressBar.css.map +1 -1
  100. package/dist/ProgressBar.mjs.map +1 -1
  101. package/dist/ProgressCircle.cjs.map +1 -1
  102. package/dist/ProgressCircle.css.map +1 -1
  103. package/dist/ProgressCircle.mjs.map +1 -1
  104. package/dist/RadioGroup.cjs.map +1 -1
  105. package/dist/RadioGroup.css.map +1 -1
  106. package/dist/RadioGroup.mjs.map +1 -1
  107. package/dist/RangeSlider.cjs.map +1 -1
  108. package/dist/RangeSlider.mjs.map +1 -1
  109. package/dist/SearchField.cjs.map +1 -1
  110. package/dist/SearchField.css.map +1 -1
  111. package/dist/SearchField.mjs.map +1 -1
  112. package/dist/SegmentedControl.cjs.map +1 -1
  113. package/dist/SegmentedControl.css.map +1 -1
  114. package/dist/SegmentedControl.mjs.map +1 -1
  115. package/dist/Slider.cjs.map +1 -1
  116. package/dist/Slider.css.map +1 -1
  117. package/dist/Slider.mjs.map +1 -1
  118. package/dist/StatusLight.cjs.map +1 -1
  119. package/dist/StatusLight.css.map +1 -1
  120. package/dist/StatusLight.mjs.map +1 -1
  121. package/dist/Switch.cjs.map +1 -1
  122. package/dist/Switch.css.map +1 -1
  123. package/dist/Switch.mjs.map +1 -1
  124. package/dist/TableView.cjs.map +1 -1
  125. package/dist/TableView.css.map +1 -1
  126. package/dist/TableView.mjs.map +1 -1
  127. package/dist/Tabs.cjs +5 -17
  128. package/dist/Tabs.cjs.map +1 -1
  129. package/dist/Tabs.css +4 -28
  130. package/dist/Tabs.css.map +1 -1
  131. package/dist/Tabs.mjs +5 -17
  132. package/dist/Tabs.mjs.map +1 -1
  133. package/dist/TagGroup.cjs.map +1 -1
  134. package/dist/TagGroup.css.map +1 -1
  135. package/dist/TagGroup.mjs.map +1 -1
  136. package/dist/TextField.cjs.map +1 -1
  137. package/dist/TextField.css.map +1 -1
  138. package/dist/TextField.mjs.map +1 -1
  139. package/dist/ToggleButton.cjs.map +1 -1
  140. package/dist/ToggleButton.css.map +1 -1
  141. package/dist/ToggleButton.mjs.map +1 -1
  142. package/dist/ToggleButtonGroup.cjs.map +1 -1
  143. package/dist/ToggleButtonGroup.mjs.map +1 -1
  144. package/dist/Tooltip.cjs.map +1 -1
  145. package/dist/Tooltip.css.map +1 -1
  146. package/dist/Tooltip.mjs.map +1 -1
  147. package/dist/TreeView.cjs +32 -10
  148. package/dist/TreeView.cjs.map +1 -1
  149. package/dist/TreeView.css +46 -26
  150. package/dist/TreeView.css.map +1 -1
  151. package/dist/TreeView.mjs +32 -10
  152. package/dist/TreeView.mjs.map +1 -1
  153. package/dist/types.d.ts +73 -71
  154. package/dist/types.d.ts.map +1 -1
  155. package/icons/Icon.cjs.map +1 -1
  156. package/icons/Icon.mjs.map +1 -1
  157. package/icons/Skeleton.cjs.map +1 -1
  158. package/icons/Skeleton.css.map +1 -1
  159. package/icons/Skeleton.mjs.map +1 -1
  160. package/package.json +21 -21
  161. package/src/Accordion.tsx +1 -1
  162. package/src/ActionButton.tsx +2 -2
  163. package/src/ActionMenu.tsx +1 -1
  164. package/src/Avatar.tsx +1 -1
  165. package/src/AvatarGroup.tsx +1 -1
  166. package/src/Breadcrumbs.tsx +4 -4
  167. package/src/Button.tsx +4 -4
  168. package/src/ButtonGroup.tsx +1 -1
  169. package/src/CardView.tsx +1 -1
  170. package/src/Checkbox.tsx +1 -1
  171. package/src/CheckboxGroup.tsx +2 -2
  172. package/src/CloseButton.tsx +1 -1
  173. package/src/ColorArea.tsx +1 -1
  174. package/src/ColorField.tsx +1 -1
  175. package/src/ColorSlider.tsx +1 -1
  176. package/src/ColorSwatch.tsx +1 -1
  177. package/src/ColorWheel.tsx +1 -1
  178. package/src/Content.tsx +7 -7
  179. package/src/ContextualHelp.tsx +2 -2
  180. package/src/Disclosure.tsx +1 -1
  181. package/src/Divider.tsx +1 -1
  182. package/src/DropZone.tsx +2 -2
  183. package/src/Field.tsx +1 -1
  184. package/src/Form.tsx +2 -2
  185. package/src/Icon.tsx +2 -2
  186. package/src/IllustratedMessage.tsx +1 -1
  187. package/src/Image.tsx +1 -1
  188. package/src/Link.tsx +2 -2
  189. package/src/Menu.tsx +4 -3
  190. package/src/Meter.tsx +1 -1
  191. package/src/NumberField.tsx +1 -1
  192. package/src/Picker.tsx +2 -1
  193. package/src/ProgressBar.tsx +1 -1
  194. package/src/ProgressCircle.tsx +1 -1
  195. package/src/RadioGroup.tsx +2 -2
  196. package/src/RangeSlider.tsx +1 -1
  197. package/src/SearchField.tsx +1 -1
  198. package/src/SegmentedControl.tsx +2 -2
  199. package/src/Skeleton.tsx +1 -1
  200. package/src/Slider.tsx +1 -1
  201. package/src/StatusLight.tsx +2 -2
  202. package/src/Switch.tsx +1 -1
  203. package/src/TableView.tsx +1 -1
  204. package/src/Tabs.tsx +16 -16
  205. package/src/TagGroup.tsx +2 -2
  206. package/src/TextField.tsx +2 -2
  207. package/src/ToggleButton.tsx +2 -2
  208. package/src/ToggleButtonGroup.tsx +1 -1
  209. package/src/Tooltip.tsx +3 -3
  210. package/src/TreeView.tsx +33 -12
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAKtG,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAEvB,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAC7F,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;cAuBnB,aAAa;kBACtC,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAAM;;oBACrC,gBAAgB,gBAAiB,CAAA,MAAM,KAAK,IAAK,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC9H,mEAAmE;oBACnE,qDAAqD;oBACrD,8FAA8F;oBAC9F,mEAAmE;kCACnE,gBAAC,CAAA,GAAA,yCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACrE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gBAAC,CAAA,GAAA,mBAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gBAAC,CAAA,GAAA,kBAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,GAAG,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC3I,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gBAAC,CAAA,GAAA,yCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,eAAe,CAAC,KAAK;gCACxE,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAKZ","sources":["packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorSlider as AriaColorSlider,\n ColorSliderProps as AriaColorSliderProps,\n ContextValue,\n SliderOutput,\n SliderTrack,\n useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n let containerRef = useDOMRef(ref);\n let trackRef = useRef(null);\n let {locale} = useLocale();\n\n return (\n <AriaColorSlider\n {...props}\n ref={containerRef}\n style={UNSAFE_style}\n // The visual label is hidden when vertical, so make it an aria-label instead.\n aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n className={renderProps => UNSAFE_className + style({\n width: {\n orientation: {\n horizontal: 192\n }\n },\n height: {\n orientation: {\n vertical: 192\n }\n },\n display: {\n orientation: {\n horizontal: 'grid',\n vertical: 'block'\n }\n },\n gridTemplateColumns: ['1fr', 'auto'],\n gridTemplateAreas: [\n 'label output',\n 'track track'\n ],\n rowGap: 4\n }, getAllowedOverrides())(renderProps, styles)}>\n {({isDisabled, orientation, state}) => (<>\n {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n {props.label || state.value.getChannelName(props.channel, locale)}\n </FieldLabel>\n )}\n {orientation === 'horizontal' &&\n <SliderOutput\n className={style({\n gridArea: 'output',\n font: 'control',\n cursor: 'default',\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled'\n }\n })} />\n }\n <SliderTrack\n ref={trackRef}\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n })}\n className={style({\n gridArea: 'track',\n width: {\n orientation: {\n horizontal: 'full',\n vertical: 24\n }\n },\n height: {\n orientation: {\n horizontal: 24,\n vertical: 'full'\n }\n },\n borderRadius: 'default',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })}>\n <ColorHandle\n containerRef={trackRef}\n getPosition={() => {\n let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n return {x, y};\n }} />\n </SliderTrack>\n </>)}\n </AriaColorSlider>\n );\n});\n"],"names":[],"version":3,"file":"ColorSlider.mjs.map"}
1
+ {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAK/G,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAEvB,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAC7F,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;cAuBnB,aAAa;kBACtC,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAAM;;oBACrC,gBAAgB,gBAAiB,CAAA,MAAM,KAAK,IAAK,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC9H,mEAAmE;oBACnE,qDAAqD;oBACrD,8FAA8F;oBAC9F,mEAAmE;kCACnE,gBAAC,CAAA,GAAA,yCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACrE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gBAAC,CAAA,GAAA,mBAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gBAAC,CAAA,GAAA,kBAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,GAAG,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC3I,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gBAAC,CAAA,GAAA,yCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,eAAe,CAAC,KAAK;gCACxE,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAKZ","sources":["packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorSlider as AriaColorSlider,\n ColorSliderProps as AriaColorSliderProps,\n ContextValue,\n SliderOutput,\n SliderTrack,\n useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n let containerRef = useDOMRef(ref);\n let trackRef = useRef(null);\n let {locale} = useLocale();\n\n return (\n <AriaColorSlider\n {...props}\n ref={containerRef}\n style={UNSAFE_style}\n // The visual label is hidden when vertical, so make it an aria-label instead.\n aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n className={renderProps => UNSAFE_className + style({\n width: {\n orientation: {\n horizontal: 192\n }\n },\n height: {\n orientation: {\n vertical: 192\n }\n },\n display: {\n orientation: {\n horizontal: 'grid',\n vertical: 'block'\n }\n },\n gridTemplateColumns: ['1fr', 'auto'],\n gridTemplateAreas: [\n 'label output',\n 'track track'\n ],\n rowGap: 4\n }, getAllowedOverrides())(renderProps, styles)}>\n {({isDisabled, orientation, state}) => (<>\n {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n {props.label || state.value.getChannelName(props.channel, locale)}\n </FieldLabel>\n )}\n {orientation === 'horizontal' &&\n <SliderOutput\n className={style({\n gridArea: 'output',\n font: 'control',\n cursor: 'default',\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled'\n }\n })} />\n }\n <SliderTrack\n ref={trackRef}\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n })}\n className={style({\n gridArea: 'track',\n width: {\n orientation: {\n horizontal: 'full',\n vertical: 24\n }\n },\n height: {\n orientation: {\n horizontal: 24,\n vertical: 'full'\n }\n },\n borderRadius: 'default',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })}>\n <ColorHandle\n containerRef={trackRef}\n getPosition={() => {\n let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n return {x, y};\n }} />\n </SliderTrack>\n </>)}\n </AriaColorSlider>\n );\n});\n"],"names":[],"version":3,"file":"ColorSlider.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AACtG,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,qCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,qCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AA2EiB;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;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.css.map"}
1
+ {"mappings":"AA2EiB;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;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.css.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AACtG,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.mjs.map"}
1
+ {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAuBM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAA8D;AAKpG,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IAC1G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,SAAS,IAAG,GAAG;IACzD,IAAI,eAAe,CAAA,GAAA,mCAAQ,EAAE;IAC7B,kCAAkC;IAClC,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,IAAI,cAAc,KAAK,GAAG,CAAC,MAAM,OAAO;IACxC,IAAI,YAAY;IAChB,IAAI,cAAc,cAAc;IAChC,qBACE,gCAAC,CAAA,GAAA,qCAAa;QACX,GAAG,KAAK;QACT,aAAa;QACb,aAAa;QACb,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;kBAC7B,CAAC,cAAC,UAAU,SAAE,KAAK,EAAC,iBAAM;;kCACzB,gCAAC,CAAA,GAAA,0CAAc;wBACb,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,aAAa,UAAU;4BAC9D,CAAA;wBACA;;;;;;;;;;;;;;;;kCAiBF,gCAAC;wBACC,WAAW;;;;;;;;;;;;;;;;;;0BAeR;wCAAC;wBAAU;;kCAChB,gCAAC,CAAA,GAAA,qCAAU;wBACT,cAAc;wBACd,aAAa;4BACX,IAAI,KAAC,CAAC,KAAE,CAAC,EAAC,GAAG,MAAM,gBAAgB,CAAC,cAAc,YAAY;4BAC9D,OAAO;gCACL,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;gCACtC,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;4BACxC;wBACF;;;;;AAIV","sources":["packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorWheel as AriaColorWheel,\n ColorWheelProps as AriaColorWheelProps,\n ColorWheelTrack,\n ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {\n /**\n * @default 192\n */\n size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<ColorWheelProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n let containerRef = useDOMRef(ref);\n // TODO: how to do mobile scaling?\n let {size = 192} = props;\n let outerRadius = Math.max(size, 175) / 2;\n let thickness = 24;\n let innerRadius = outerRadius - 24;\n return (\n <AriaColorWheel \n {...props}\n outerRadius={outerRadius}\n innerRadius={innerRadius}\n ref={containerRef}\n style={UNSAFE_style}\n className={UNSAFE_className + styles}>\n {({isDisabled, state}) => (<>\n <ColorWheelTrack\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : defaultStyle.background\n })}\n className={style({\n // Outer border\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })} />\n <div\n className={style({\n // Inner border\n position: 'absolute',\n inset: 24,\n pointerEvents: 'none',\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n }\n })({isDisabled})} />\n <ColorHandle\n containerRef={containerRef}\n getPosition={() => {\n let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n return {\n x: (outerRadius + x) / (outerRadius * 2),\n y: (outerRadius + y) / (outerRadius * 2)\n };\n }} />\n </>)}\n </AriaColorWheel>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAuBM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAAuE;AAK7G,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IAC1G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,SAAS,IAAG,GAAG;IACzD,IAAI,eAAe,CAAA,GAAA,mCAAQ,EAAE;IAC7B,kCAAkC;IAClC,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,IAAI,cAAc,KAAK,GAAG,CAAC,MAAM,OAAO;IACxC,IAAI,YAAY;IAChB,IAAI,cAAc,cAAc;IAChC,qBACE,gCAAC,CAAA,GAAA,qCAAa;QACX,GAAG,KAAK;QACT,aAAa;QACb,aAAa;QACb,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;kBAC7B,CAAC,cAAC,UAAU,SAAE,KAAK,EAAC,iBAAM;;kCACzB,gCAAC,CAAA,GAAA,0CAAc;wBACb,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,aAAa,UAAU;4BAC9D,CAAA;wBACA;;;;;;;;;;;;;;;;kCAiBF,gCAAC;wBACC,WAAW;;;;;;;;;;;;;;;;;;0BAeR;wCAAC;wBAAU;;kCAChB,gCAAC,CAAA,GAAA,qCAAU;wBACT,cAAc;wBACd,aAAa;4BACX,IAAI,KAAC,CAAC,KAAE,CAAC,EAAC,GAAG,MAAM,gBAAgB,CAAC,cAAc,YAAY;4BAC9D,OAAO;gCACL,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;gCACtC,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;4BACxC;wBACF;;;;;AAIV","sources":["packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorWheel as AriaColorWheel,\n ColorWheelProps as AriaColorWheelProps,\n ColorWheelTrack,\n ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {\n /**\n * @default 192\n */\n size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n let containerRef = useDOMRef(ref);\n // TODO: how to do mobile scaling?\n let {size = 192} = props;\n let outerRadius = Math.max(size, 175) / 2;\n let thickness = 24;\n let innerRadius = outerRadius - 24;\n return (\n <AriaColorWheel \n {...props}\n outerRadius={outerRadius}\n innerRadius={innerRadius}\n ref={containerRef}\n style={UNSAFE_style}\n className={UNSAFE_className + styles}>\n {({isDisabled, state}) => (<>\n <ColorWheelTrack\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : defaultStyle.background\n })}\n className={style({\n // Outer border\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })} />\n <div\n className={style({\n // Inner border\n position: 'absolute',\n inset: 24,\n pointerEvents: 'none',\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n }\n })({isDisabled})} />\n <ColorHandle\n containerRef={containerRef}\n getPosition={() => {\n let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n return {\n x: (outerRadius + x) / (outerRadius * 2),\n y: (outerRadius + y) / (outerRadius * 2)\n };\n }} />\n </>)}\n </AriaColorWheel>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AC4DqB;EAAA;;;;EAAA;;;;EAkBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlBA;;AAAA;EAAA;IAAA","sources":["08c4afb7d0604130","packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["@import \"54eced5f2b164503\";\n@import \"1e65bf1fcba37015\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorWheel as AriaColorWheel,\n ColorWheelProps as AriaColorWheelProps,\n ColorWheelTrack,\n ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {\n /**\n * @default 192\n */\n size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<ColorWheelProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n let containerRef = useDOMRef(ref);\n // TODO: how to do mobile scaling?\n let {size = 192} = props;\n let outerRadius = Math.max(size, 175) / 2;\n let thickness = 24;\n let innerRadius = outerRadius - 24;\n return (\n <AriaColorWheel \n {...props}\n outerRadius={outerRadius}\n innerRadius={innerRadius}\n ref={containerRef}\n style={UNSAFE_style}\n className={UNSAFE_className + styles}>\n {({isDisabled, state}) => (<>\n <ColorWheelTrack\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : defaultStyle.background\n })}\n className={style({\n // Outer border\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })} />\n <div\n className={style({\n // Inner border\n position: 'absolute',\n inset: 24,\n pointerEvents: 'none',\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n }\n })({isDisabled})} />\n <ColorHandle\n containerRef={containerRef}\n getPosition={() => {\n let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n return {\n x: (outerRadius + x) / (outerRadius * 2),\n y: (outerRadius + y) / (outerRadius * 2)\n };\n }} />\n </>)}\n </AriaColorWheel>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.css.map"}
1
+ {"mappings":"AC4DqB;EAAA;;;;EAAA;;;;EAkBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlBA;;AAAA;EAAA;IAAA","sources":["08c4afb7d0604130","packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["@import \"54eced5f2b164503\";\n@import \"1e65bf1fcba37015\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorWheel as AriaColorWheel,\n ColorWheelProps as AriaColorWheelProps,\n ColorWheelTrack,\n ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {\n /**\n * @default 192\n */\n size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n let containerRef = useDOMRef(ref);\n // TODO: how to do mobile scaling?\n let {size = 192} = props;\n let outerRadius = Math.max(size, 175) / 2;\n let thickness = 24;\n let innerRadius = outerRadius - 24;\n return (\n <AriaColorWheel \n {...props}\n outerRadius={outerRadius}\n innerRadius={innerRadius}\n ref={containerRef}\n style={UNSAFE_style}\n className={UNSAFE_className + styles}>\n {({isDisabled, state}) => (<>\n <ColorWheelTrack\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : defaultStyle.background\n })}\n className={style({\n // Outer border\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })} />\n <div\n className={style({\n // Inner border\n position: 'absolute',\n inset: 24,\n pointerEvents: 'none',\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n }\n })({isDisabled})} />\n <ColorHandle\n containerRef={containerRef}\n getPosition={() => {\n let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n return {\n x: (outerRadius + x) / (outerRadius * 2),\n y: (outerRadius + y) / (outerRadius * 2)\n };\n }} />\n </>)}\n </AriaColorWheel>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.css.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAuBM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAA8D;AAKpG,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IAC1G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,SAAS,IAAG,GAAG;IACzD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,kCAAkC;IAClC,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,IAAI,cAAc,KAAK,GAAG,CAAC,MAAM,OAAO;IACxC,IAAI,YAAY;IAChB,IAAI,cAAc,cAAc;IAChC,qBACE,gBAAC,CAAA,GAAA,iBAAa;QACX,GAAG,KAAK;QACT,aAAa;QACb,aAAa;QACb,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;kBAC7B,CAAC,cAAC,UAAU,SAAE,KAAK,EAAC,iBAAM;;kCACzB,gBAAC,CAAA,GAAA,sBAAc;wBACb,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,aAAa,UAAU;4BAC9D,CAAA;wBACA;;;;;;;;;;;;;;;;kCAiBF,gBAAC;wBACC,WAAW;;;;;;;;;;;;;;;;;;0BAeR;wCAAC;wBAAU;;kCAChB,gBAAC,CAAA,GAAA,yCAAU;wBACT,cAAc;wBACd,aAAa;4BACX,IAAI,KAAC,CAAC,KAAE,CAAC,EAAC,GAAG,MAAM,gBAAgB,CAAC,cAAc,YAAY;4BAC9D,OAAO;gCACL,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;gCACtC,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;4BACxC;wBACF;;;;;AAIV","sources":["packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorWheel as AriaColorWheel,\n ColorWheelProps as AriaColorWheelProps,\n ColorWheelTrack,\n ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {\n /**\n * @default 192\n */\n size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<ColorWheelProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n let containerRef = useDOMRef(ref);\n // TODO: how to do mobile scaling?\n let {size = 192} = props;\n let outerRadius = Math.max(size, 175) / 2;\n let thickness = 24;\n let innerRadius = outerRadius - 24;\n return (\n <AriaColorWheel \n {...props}\n outerRadius={outerRadius}\n innerRadius={innerRadius}\n ref={containerRef}\n style={UNSAFE_style}\n className={UNSAFE_className + styles}>\n {({isDisabled, state}) => (<>\n <ColorWheelTrack\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : defaultStyle.background\n })}\n className={style({\n // Outer border\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })} />\n <div\n className={style({\n // Inner border\n position: 'absolute',\n inset: 24,\n pointerEvents: 'none',\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n }\n })({isDisabled})} />\n <ColorHandle\n containerRef={containerRef}\n getPosition={() => {\n let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n return {\n x: (outerRadius + x) / (outerRadius * 2),\n y: (outerRadius + y) / (outerRadius * 2)\n };\n }} />\n </>)}\n </AriaColorWheel>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.mjs.map"}
1
+ {"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAuBM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAAuE;AAK7G,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IAC1G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,SAAS,IAAG,GAAG;IACzD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,kCAAkC;IAClC,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,IAAI,cAAc,KAAK,GAAG,CAAC,MAAM,OAAO;IACxC,IAAI,YAAY;IAChB,IAAI,cAAc,cAAc;IAChC,qBACE,gBAAC,CAAA,GAAA,iBAAa;QACX,GAAG,KAAK;QACT,aAAa;QACb,aAAa;QACb,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;kBAC7B,CAAC,cAAC,UAAU,SAAE,KAAK,EAAC,iBAAM;;kCACzB,gBAAC,CAAA,GAAA,sBAAc;wBACb,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,aAAa,UAAU;4BAC9D,CAAA;wBACA;;;;;;;;;;;;;;;;kCAiBF,gBAAC;wBACC,WAAW;;;;;;;;;;;;;;;;;;0BAeR;wCAAC;wBAAU;;kCAChB,gBAAC,CAAA,GAAA,yCAAU;wBACT,cAAc;wBACd,aAAa;4BACX,IAAI,KAAC,CAAC,KAAE,CAAC,EAAC,GAAG,MAAM,gBAAgB,CAAC,cAAc,YAAY;4BAC9D,OAAO;gCACL,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;gCACtC,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;4BACxC;wBACF;;;;;AAIV","sources":["packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorWheel as AriaColorWheel,\n ColorWheelProps as AriaColorWheelProps,\n ColorWheelTrack,\n ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {\n /**\n * @default 192\n */\n size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n let containerRef = useDOMRef(ref);\n // TODO: how to do mobile scaling?\n let {size = 192} = props;\n let outerRadius = Math.max(size, 175) / 2;\n let thickness = 24;\n let innerRadius = outerRadius - 24;\n return (\n <AriaColorWheel \n {...props}\n outerRadius={outerRadius}\n innerRadius={innerRadius}\n ref={containerRef}\n style={UNSAFE_style}\n className={UNSAFE_className + styles}>\n {({isDisabled, state}) => (<>\n <ColorWheelTrack\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : defaultStyle.background\n })}\n className={style({\n // Outer border\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })} />\n <div\n className={style({\n // Inner border\n position: 'absolute',\n inset: 24,\n pointerEvents: 'none',\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n }\n })({isDisabled})} />\n <ColorHandle\n containerRef={containerRef}\n getPosition={() => {\n let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n return {\n x: (outerRadius + x) / (outerRadius * 2),\n y: (outerRadius + y) / (outerRadius * 2)\n };\n }} />\n </>)}\n </AriaColorWheel>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Content.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {inertValue} from '@react-aria/utils';\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton, useSkeletonText} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ContentProps extends UnsafeStyles, SlotProps {\n children?: ReactNode,\n styles?: StyleString,\n isHidden?: boolean,\n id?: string\n}\n\ninterface HeadingProps extends ContentProps {\n level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.\nfunction Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeading\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeader\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ContentContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <div\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, TextContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;\n let racContext = useContext(RACTextContext);\n let isSkeleton = useIsSkeleton();\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n if (isHidden) {\n return null;\n }\n\n let text = (\n <TextAria\n {...otherProps}\n ref={domRef}\n // @ts-ignore - compatibility with React < 19\n inert={inertValue(isSkeleton)}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined}\n data-rsp-slot=\"text\">\n {children}\n </TextAria>\n );\n\n if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n }\n\n return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <KeyboardAria\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, FooterContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <footer\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"Content.cjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Content.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {inertValue} from '@react-aria/utils';\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton, useSkeletonText} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ContentProps extends UnsafeStyles, SlotProps {\n children: ReactNode,\n styles?: StyleString,\n isHidden?: boolean,\n id?: string\n}\n\ninterface HeadingProps extends ContentProps {\n level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.\nfunction Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeading\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeader\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ContentContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <div\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, TextContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;\n let racContext = useContext(RACTextContext);\n let isSkeleton = useIsSkeleton();\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n if (isHidden) {\n return null;\n }\n\n let text = (\n <TextAria\n {...otherProps}\n ref={domRef}\n // @ts-ignore - compatibility with React < 19\n inert={inertValue(isSkeleton)}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined}\n data-rsp-slot=\"text\">\n {children}\n </TextAria>\n );\n\n if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n }\n\n return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <KeyboardAria\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, FooterContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <footer\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"Content.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Content.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {inertValue} from '@react-aria/utils';\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton, useSkeletonText} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ContentProps extends UnsafeStyles, SlotProps {\n children?: ReactNode,\n styles?: StyleString,\n isHidden?: boolean,\n id?: string\n}\n\ninterface HeadingProps extends ContentProps {\n level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.\nfunction Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeading\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeader\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ContentContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <div\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, TextContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;\n let racContext = useContext(RACTextContext);\n let isSkeleton = useIsSkeleton();\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n if (isHidden) {\n return null;\n }\n\n let text = (\n <TextAria\n {...otherProps}\n ref={domRef}\n // @ts-ignore - compatibility with React < 19\n inert={inertValue(isSkeleton)}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined}\n data-rsp-slot=\"text\">\n {children}\n </TextAria>\n );\n\n if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n }\n\n return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <KeyboardAria\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, FooterContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <footer\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"Content.mjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Content.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {inertValue} from '@react-aria/utils';\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton, useSkeletonText} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ContentProps extends UnsafeStyles, SlotProps {\n children: ReactNode,\n styles?: StyleString,\n isHidden?: boolean,\n id?: string\n}\n\ninterface HeadingProps extends ContentProps {\n level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.\nfunction Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeading\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeader\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ContentContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <div\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, TextContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;\n let racContext = useContext(RACTextContext);\n let isSkeleton = useIsSkeleton();\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n if (isHidden) {\n return null;\n }\n\n let text = (\n <TextAria\n {...otherProps}\n ref={domRef}\n // @ts-ignore - compatibility with React < 19\n inert={inertValue(isSkeleton)}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined}\n data-rsp-slot=\"text\">\n {children}\n </TextAria>\n );\n\n if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n }\n\n return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <KeyboardAria\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, FooterContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <footer\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"Content.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAA2E;AAKrH,MAAM,0DAAiB,CAAA,GAAA,uBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,+BAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,MAAM,QAAQ;IAE/F,IAAI,cAAc,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iCAAC,CAAA,GAAA,uCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gCAAC,CAAA,GAAA,sCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gCAAC,CAAA,GAAA,iCAAO,uBAAO,gCAAC,CAAA,GAAA,iCAAO;;0BAE/C,gCAAC,CAAA,GAAA,qCAAU;gBACT,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gCAAC,CAAA,GAAA,iCAAQ;oBAAE,WAAW,CAAA,GAAA,qCAAU,EAAE,CAAA,GAAA,qCAAU;8BAC1C,cAAA,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,sCAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,uCAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,uCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {PopoverBase, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n /**\n * Indicates whether contents are informative or provides helpful guidance.\n *\n * @default 'help'\n */\n variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n /** Contents of the Contextual Help popover. */\n children?: ReactNode,\n /**\n * The size of the ActionButton.\n *\n * @default 'XS'\n */\n size?: 'XS' | 'S'\n}\n\nconst popover = style({\n fontFamily: 'sans',\n minWidth: 218,\n width: 218,\n padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n let {\n children,\n defaultOpen,\n // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n size = 'XS',\n crossOffset,\n isOpen,\n offset = 8,\n onOpenChange,\n placement = 'bottom start',\n shouldFlip,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n variant = 'help'\n } = props;\n\n // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n // manually set the aria-label after useLabels() to keep the order of label\n // then ContextualHelp variant\n let labelProps = useLabels(props);\n let label = stringFormatter.format(`contextualhelp.${variant}`);\n labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n let buttonProps = filterDOMProps(props, {labelable: true});\n\n return (\n <DialogTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}>\n <ActionButton\n slot={null}\n ref={ref}\n size={size}\n {...mergeProps(buttonProps, labelProps)}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}\n isQuiet>\n {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n </ActionButton>\n <PopoverBase\n placement={placement}\n shouldFlip={shouldFlip}\n // not working => containerPadding={containerPadding}\n offset={offset}\n crossOffset={crossOffset}\n hideArrow\n UNSAFE_className={popover}>\n <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n <Provider\n values={[\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {}\n }\n }],\n [HeadingContext, {styles: style({\n font: 'heading-xs',\n margin: 0,\n marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n })}],\n [ContentContext, {styles: style({\n font: 'body-sm'\n })}],\n [FooterContext, {styles: style({\n font: 'body-sm',\n marginTop: 16\n })}]\n ]}>\n {children}\n </Provider>\n </RACDialog>\n </PopoverBase>\n </DialogTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAAoF;AAK9H,MAAM,0DAAiB,CAAA,GAAA,uBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,+BAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,MAAM,QAAQ;IAE/F,IAAI,cAAc,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iCAAC,CAAA,GAAA,uCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gCAAC,CAAA,GAAA,sCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gCAAC,CAAA,GAAA,iCAAO,uBAAO,gCAAC,CAAA,GAAA,iCAAO;;0BAE/C,gCAAC,CAAA,GAAA,qCAAU;gBACT,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gCAAC,CAAA,GAAA,iCAAQ;oBAAE,WAAW,CAAA,GAAA,qCAAU,EAAE,CAAA,GAAA,qCAAU;8BAC1C,cAAA,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,sCAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,uCAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,uCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {PopoverBase, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n /**\n * Indicates whether contents are informative or provides helpful guidance.\n *\n * @default 'help'\n */\n variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n /** Contents of the Contextual Help popover. */\n children: ReactNode,\n /**\n * The size of the ActionButton.\n *\n * @default 'XS'\n */\n size?: 'XS' | 'S'\n}\n\nconst popover = style({\n fontFamily: 'sans',\n minWidth: 218,\n width: 218,\n padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n let {\n children,\n defaultOpen,\n // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n size = 'XS',\n crossOffset,\n isOpen,\n offset = 8,\n onOpenChange,\n placement = 'bottom start',\n shouldFlip,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n variant = 'help'\n } = props;\n\n // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n // manually set the aria-label after useLabels() to keep the order of label\n // then ContextualHelp variant\n let labelProps = useLabels(props);\n let label = stringFormatter.format(`contextualhelp.${variant}`);\n labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n let buttonProps = filterDOMProps(props, {labelable: true});\n\n return (\n <DialogTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}>\n <ActionButton\n slot={null}\n ref={ref}\n size={size}\n {...mergeProps(buttonProps, labelProps)}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}\n isQuiet>\n {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n </ActionButton>\n <PopoverBase\n placement={placement}\n shouldFlip={shouldFlip}\n // not working => containerPadding={containerPadding}\n offset={offset}\n crossOffset={crossOffset}\n hideArrow\n UNSAFE_className={popover}>\n <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n <Provider\n values={[\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {}\n }\n }],\n [HeadingContext, {styles: style({\n font: 'heading-xs',\n margin: 0,\n marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n })}],\n [ContentContext, {styles: style({\n font: 'body-sm'\n })}],\n [FooterContext, {styles: style({\n font: 'body-sm',\n marginTop: 16\n })}]\n ]}>\n {children}\n </Provider>\n </RACDialog>\n </PopoverBase>\n </DialogTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAiEuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjFvB;EAyEwB;;;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AAjFvB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAyEwB;EAAA;IAAA;;;;IAKA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {PopoverBase, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n /**\n * Indicates whether contents are informative or provides helpful guidance.\n *\n * @default 'help'\n */\n variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n /** Contents of the Contextual Help popover. */\n children?: ReactNode,\n /**\n * The size of the ActionButton.\n *\n * @default 'XS'\n */\n size?: 'XS' | 'S'\n}\n\nconst popover = style({\n fontFamily: 'sans',\n minWidth: 218,\n width: 218,\n padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n let {\n children,\n defaultOpen,\n // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n size = 'XS',\n crossOffset,\n isOpen,\n offset = 8,\n onOpenChange,\n placement = 'bottom start',\n shouldFlip,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n variant = 'help'\n } = props;\n\n // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n // manually set the aria-label after useLabels() to keep the order of label\n // then ContextualHelp variant\n let labelProps = useLabels(props);\n let label = stringFormatter.format(`contextualhelp.${variant}`);\n labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n let buttonProps = filterDOMProps(props, {labelable: true});\n\n return (\n <DialogTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}>\n <ActionButton\n slot={null}\n ref={ref}\n size={size}\n {...mergeProps(buttonProps, labelProps)}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}\n isQuiet>\n {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n </ActionButton>\n <PopoverBase\n placement={placement}\n shouldFlip={shouldFlip}\n // not working => containerPadding={containerPadding}\n offset={offset}\n crossOffset={crossOffset}\n hideArrow\n UNSAFE_className={popover}>\n <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n <Provider\n values={[\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {}\n }\n }],\n [HeadingContext, {styles: style({\n font: 'heading-xs',\n margin: 0,\n marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n })}],\n [ContentContext, {styles: style({\n font: 'body-sm'\n })}],\n [FooterContext, {styles: style({\n font: 'body-sm',\n marginTop: 16\n })}]\n ]}>\n {children}\n </Provider>\n </RACDialog>\n </PopoverBase>\n </DialogTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
1
+ {"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAiEuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjFvB;EAyEwB;;;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AAjFvB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAyEwB;EAAA;IAAA;;;;IAKA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {PopoverBase, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n /**\n * Indicates whether contents are informative or provides helpful guidance.\n *\n * @default 'help'\n */\n variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n /** Contents of the Contextual Help popover. */\n children: ReactNode,\n /**\n * The size of the ActionButton.\n *\n * @default 'XS'\n */\n size?: 'XS' | 'S'\n}\n\nconst popover = style({\n fontFamily: 'sans',\n minWidth: 218,\n width: 218,\n padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n let {\n children,\n defaultOpen,\n // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n size = 'XS',\n crossOffset,\n isOpen,\n offset = 8,\n onOpenChange,\n placement = 'bottom start',\n shouldFlip,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n variant = 'help'\n } = props;\n\n // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n // manually set the aria-label after useLabels() to keep the order of label\n // then ContextualHelp variant\n let labelProps = useLabels(props);\n let label = stringFormatter.format(`contextualhelp.${variant}`);\n labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n let buttonProps = filterDOMProps(props, {labelable: true});\n\n return (\n <DialogTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}>\n <ActionButton\n slot={null}\n ref={ref}\n size={size}\n {...mergeProps(buttonProps, labelProps)}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}\n isQuiet>\n {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n </ActionButton>\n <PopoverBase\n placement={placement}\n shouldFlip={shouldFlip}\n // not working => containerPadding={containerPadding}\n offset={offset}\n crossOffset={crossOffset}\n hideArrow\n UNSAFE_className={popover}>\n <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n <Provider\n values={[\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {}\n }\n }],\n [HeadingContext, {styles: style({\n font: 'heading-xs',\n margin: 0,\n marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n })}],\n [ContentContext, {styles: style({\n font: 'body-sm'\n })}],\n [FooterContext, {styles: style({\n font: 'body-sm',\n marginTop: 16\n })}]\n ]}>\n {children}\n </Provider>\n </RACDialog>\n </PopoverBase>\n </DialogTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAA2E;AAKrH,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,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,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,MAAM,QAAQ;IAE/F,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iBAAC,CAAA,GAAA,yCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gBAAC,CAAA,GAAA,yCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gBAAC,CAAA,GAAA,wCAAO,uBAAO,gBAAC,CAAA,GAAA,wCAAO;;0BAE/C,gBAAC,CAAA,GAAA,yCAAU;gBACT,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gBAAC,CAAA,GAAA,aAAQ;oBAAE,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;8BAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,kBAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {PopoverBase, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n /**\n * Indicates whether contents are informative or provides helpful guidance.\n *\n * @default 'help'\n */\n variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n /** Contents of the Contextual Help popover. */\n children?: ReactNode,\n /**\n * The size of the ActionButton.\n *\n * @default 'XS'\n */\n size?: 'XS' | 'S'\n}\n\nconst popover = style({\n fontFamily: 'sans',\n minWidth: 218,\n width: 218,\n padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n let {\n children,\n defaultOpen,\n // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n size = 'XS',\n crossOffset,\n isOpen,\n offset = 8,\n onOpenChange,\n placement = 'bottom start',\n shouldFlip,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n variant = 'help'\n } = props;\n\n // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n // manually set the aria-label after useLabels() to keep the order of label\n // then ContextualHelp variant\n let labelProps = useLabels(props);\n let label = stringFormatter.format(`contextualhelp.${variant}`);\n labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n let buttonProps = filterDOMProps(props, {labelable: true});\n\n return (\n <DialogTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}>\n <ActionButton\n slot={null}\n ref={ref}\n size={size}\n {...mergeProps(buttonProps, labelProps)}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}\n isQuiet>\n {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n </ActionButton>\n <PopoverBase\n placement={placement}\n shouldFlip={shouldFlip}\n // not working => containerPadding={containerPadding}\n offset={offset}\n crossOffset={crossOffset}\n hideArrow\n UNSAFE_className={popover}>\n <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n <Provider\n values={[\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {}\n }\n }],\n [HeadingContext, {styles: style({\n font: 'heading-xs',\n margin: 0,\n marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n })}],\n [ContentContext, {styles: style({\n font: 'body-sm'\n })}],\n [FooterContext, {styles: style({\n font: 'body-sm',\n marginTop: 16\n })}]\n ]}>\n {children}\n </Provider>\n </RACDialog>\n </PopoverBase>\n </DialogTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAoF;AAK9H,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,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,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,MAAM,QAAQ;IAE/F,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iBAAC,CAAA,GAAA,yCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gBAAC,CAAA,GAAA,yCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gBAAC,CAAA,GAAA,wCAAO,uBAAO,gBAAC,CAAA,GAAA,wCAAO;;0BAE/C,gBAAC,CAAA,GAAA,yCAAU;gBACT,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gBAAC,CAAA,GAAA,aAAQ;oBAAE,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;8BAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,kBAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {PopoverBase, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n /**\n * Indicates whether contents are informative or provides helpful guidance.\n *\n * @default 'help'\n */\n variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n /** Contents of the Contextual Help popover. */\n children: ReactNode,\n /**\n * The size of the ActionButton.\n *\n * @default 'XS'\n */\n size?: 'XS' | 'S'\n}\n\nconst popover = style({\n fontFamily: 'sans',\n minWidth: 218,\n width: 218,\n padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n let {\n children,\n defaultOpen,\n // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n size = 'XS',\n crossOffset,\n isOpen,\n offset = 8,\n onOpenChange,\n placement = 'bottom start',\n shouldFlip,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n variant = 'help'\n } = props;\n\n // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n // manually set the aria-label after useLabels() to keep the order of label\n // then ContextualHelp variant\n let labelProps = useLabels(props);\n let label = stringFormatter.format(`contextualhelp.${variant}`);\n labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n let buttonProps = filterDOMProps(props, {labelable: true});\n\n return (\n <DialogTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}>\n <ActionButton\n slot={null}\n ref={ref}\n size={size}\n {...mergeProps(buttonProps, labelProps)}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}\n isQuiet>\n {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n </ActionButton>\n <PopoverBase\n placement={placement}\n shouldFlip={shouldFlip}\n // not working => containerPadding={containerPadding}\n offset={offset}\n crossOffset={crossOffset}\n hideArrow\n UNSAFE_className={popover}>\n <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n <Provider\n values={[\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {}\n }\n }],\n [HeadingContext, {styles: style({\n font: 'heading-xs',\n margin: 0,\n marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n })}],\n [ContentContext, {styles: style({\n font: 'body-sm'\n })}],\n [FooterContext, {styles: style({\n font: 'body-sm',\n marginTop: 16\n })}]\n ]}>\n {children}\n </Provider>\n </RACDialog>\n </PopoverBase>\n </DialogTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\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 {focusRing, lightDark, style} from '../style' with { type: 'macro' };\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'>, 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<Omit<DisclosureProps, 'children'>, 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: 'neutral',\n isDisabled: 'disabled'\n },\n fontWeight: 'bold',\n fontSize: {\n size: {\n S: 'heading-xs',\n M: 'heading-sm',\n L: 'heading',\n XL: 'heading-lg'\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: 24,\n regular: 32,\n spacious: 40\n }\n },\n M: {\n density: {\n compact: 32,\n regular: 40,\n spacious: 48\n }\n },\n L: {\n density: {\n compact: 40,\n regular: 48,\n spacious: 56\n }\n },\n XL: {\n density: {\n compact: 48,\n regular: 56,\n spacious: 64\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: 'control',\n isQuiet: 'control'\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 let mapSize = {\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n };\n\n // maps to one size smaller in the compact density 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 if (density === 'compact') {\n newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n }\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: 9,\n L: 12,\n XL: 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.cjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\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 {focusRing, lightDark, style} from '../style' with { type: 'macro' };\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'>, 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: 'neutral',\n isDisabled: 'disabled'\n },\n fontWeight: 'bold',\n fontSize: {\n size: {\n S: 'heading-xs',\n M: 'heading-sm',\n L: 'heading',\n XL: 'heading-lg'\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: 24,\n regular: 32,\n spacious: 40\n }\n },\n M: {\n density: {\n compact: 32,\n regular: 40,\n spacious: 48\n }\n },\n L: {\n density: {\n compact: 40,\n regular: 48,\n spacious: 56\n }\n },\n XL: {\n density: {\n compact: 48,\n regular: 56,\n spacious: 64\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: 'control',\n isQuiet: 'control'\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 let mapSize = {\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n };\n\n // maps to one size smaller in the compact density 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 if (density === 'compact') {\n newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n }\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: 9,\n L: 12,\n XL: 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.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AC2CmB;EAAA;;;;EAAA;;;;EAAA;;;;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;;;;EA6CwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6D1B;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApQD;EAAA;;;;EAAA;;;;EA8EE;;;;EAsLD;;;;EAAA;;;;;AAtLC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsLD","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} from '@react-types/shared';\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 {focusRing, lightDark, style} from '../style' with { type: 'macro' };\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'>, 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<Omit<DisclosureProps, 'children'>, 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: 'neutral',\n isDisabled: 'disabled'\n },\n fontWeight: 'bold',\n fontSize: {\n size: {\n S: 'heading-xs',\n M: 'heading-sm',\n L: 'heading',\n XL: 'heading-lg'\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: 24,\n regular: 32,\n spacious: 40\n }\n },\n M: {\n density: {\n compact: 32,\n regular: 40,\n spacious: 48\n }\n },\n L: {\n density: {\n compact: 40,\n regular: 48,\n spacious: 56\n }\n },\n XL: {\n density: {\n compact: 48,\n regular: 56,\n spacious: 64\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: 'control',\n isQuiet: 'control'\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 let mapSize = {\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n };\n\n // maps to one size smaller in the compact density 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 if (density === 'compact') {\n newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n }\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: 9,\n L: 12,\n XL: 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"}
1
+ {"mappings":"AC2CmB;EAAA;;;;EAAA;;;;EAAA;;;;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;;;;EA6CwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6D1B;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApQD;EAAA;;;;EAAA;;;;EA8EE;;;;EAsLD;;;;EAAA;;;;;AAtLC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsLD","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} from '@react-types/shared';\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 {focusRing, lightDark, style} from '../style' with { type: 'macro' };\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'>, 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: 'neutral',\n isDisabled: 'disabled'\n },\n fontWeight: 'bold',\n fontSize: {\n size: {\n S: 'heading-xs',\n M: 'heading-sm',\n L: 'heading',\n XL: 'heading-lg'\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: 24,\n regular: 32,\n spacious: 40\n }\n },\n M: {\n density: {\n compact: 32,\n regular: 40,\n spacious: 48\n }\n },\n L: {\n density: {\n compact: 40,\n regular: 48,\n spacious: 56\n }\n },\n XL: {\n density: {\n compact: 48,\n regular: 56,\n spacious: 64\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: 'control',\n isQuiet: 'control'\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 let mapSize = {\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n };\n\n // maps to one size smaller in the compact density 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 if (density === 'compact') {\n newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n }\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: 9,\n L: 12,\n XL: 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"}