{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAsBD,MAAM,uCAAgC;IACpC,WAAW;QAAC;QAAiB,CAAA,GAAA,0CAAe;KAAE;IAC9C,MAAM;QAAC;QAAY;KAAc;IACjC,gBAAgB;QAAC;QAAkB;KAAe;IAClD,YAAY;QAAC;QAAc;KAAe;IAC1C,cAAc;QAAC;QAAgB;KAAe;AAChD;AAMO,MAAM,0DAAO,CAAA,GAAA,uBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YAAC,QAAQ,EAAE,GAAG,YAAW,GAAG;IAChC,IAAI,qBAAqB,CAAA,GAAA,uCAAY;IACrC,IAAI,qBAAqB,oBAAoB,sBAAsB;QAAC;KAAO;IAC3E,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,EAAC,YAAY,SAAS,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE,YAAY;IACxD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,QAAQ;QACV,GAAG,WAAW,KAAK;QACnB,GAAG,UAAU,KAAK;IACpB;IAEA,IAAI,MAAM,GAAG,IAAI,MACf,MAAM,GAAG,GAAG,CAAA,GAAA,kDAAuB,EAAE,MAAM,GAAG,EAAE;IAGlD,IAAI,MAAM,SAAS,IAAI,MACrB,MAAM,SAAS,GAAG,CAAA,GAAA,kDAAuB,EAAE,MAAM,SAAS,EAAE;IAG9D,IAAI,MAAM,MAAM,IAAI,MAClB,MAAM,MAAM,GAAG,CAAA,GAAA,kDAAuB,EAAE,MAAM,MAAM,EAAE;IAGxD,qBACE,0DAAC;QACE,GAAG,CAAA,GAAA,6CAAa,EAAE,WAAW;QAC9B,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,QAAQ,WAAW,SAAS;QAC1D,OAAO;QACP,KAAK;OACJ;AAGP;AAEA;;;CAGC,GACD,SAAS,qCAAe,KAAK;IAC3B,IAAI,UAAU,SACZ,OAAO;IAGT,IAAI,UAAU,OACZ,OAAO;IAGT,OAAO;AACT;AAEA;;CAEC,GACD,SAAS,oCAAc,KAAK;IAC1B,IAAI,OAAO,UAAU,WACnB,OAAO,QAAQ,SAAS;IAG1B,OAAO;AACT","sources":["packages/@adobe/react-spectrum/src/layout/Flex.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames} from '../utils/classNames';\n\nimport {DOMProps, DOMRef, FlexStyleProps} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {\n  passthroughStyle,\n  responsiveDimensionValue,\n  StyleHandlers,\n  useStyleProps\n} from '../utils/styleProps';\nimport React, {forwardRef, ReactNode} from 'react';\nimport styles from './flex-gap.css';\nimport {useBreakpoint} from '../utils/BreakpointProvider';\nimport {useDOMRef} from '../utils/useDOMRef';\n\nexport interface FlexProps extends DOMProps, FlexStyleProps {\n  /** Children of the flex container. */\n  children: ReactNode;\n}\n\nconst flexStyleProps: StyleHandlers = {\n  direction: ['flexDirection', passthroughStyle],\n  wrap: ['flexWrap', flexWrapValue],\n  justifyContent: ['justifyContent', flexAlignValue],\n  alignItems: ['alignItems', flexAlignValue],\n  alignContent: ['alignContent', flexAlignValue]\n};\n\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nexport const Flex = forwardRef(function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {\n  let {children, ...otherProps} = props;\n  let breakpointProvider = useBreakpoint();\n  let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || ['base'];\n  let {styleProps} = useStyleProps(otherProps);\n  let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);\n  let domRef = useDOMRef(ref);\n\n  let style = {\n    ...styleProps.style,\n    ...flexStyle.style\n  };\n\n  if (props.gap != null) {\n    style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);\n  }\n\n  if (props.columnGap != null) {\n    style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);\n  }\n\n  if (props.rowGap != null) {\n    style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);\n  }\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      className={classNames(styles, 'flex', styleProps.className)}\n      style={style}\n      ref={domRef}>\n      {children}\n    </div>\n  );\n});\n\n/**\n * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'\n * in flex containers for browser compatibility.\n */\nfunction flexAlignValue(value) {\n  if (value === 'start') {\n    return 'flex-start';\n  }\n\n  if (value === 'end') {\n    return 'flex-end';\n  }\n\n  return value;\n}\n\n/**\n * Takes a boolean and translates it to flex wrap or nowrap.\n */\nfunction flexWrapValue(value) {\n  if (typeof value === 'boolean') {\n    return value ? 'wrap' : 'nowrap';\n  }\n\n  return value;\n}\n"],"names":[],"version":3,"file":"Flex.cjs.map"}