@chakra-ui/layout/dist/chunk-ZVFRDZZY.mjs.map

Chakra UI layout components that give you massive speed

{"version":3,"sources":["../src/aspect-ratio.tsx"],"sourcesContent":["import {\n  chakra,\n  forwardRef,\n  ResponsiveValue,\n  HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { mapResponsive } from \"@chakra-ui/breakpoint-utils\"\nimport { cx } from \"@chakra-ui/shared-utils\"\n\nimport { Children } from \"react\"\n\ninterface AspectRatioOptions {\n  /**\n   * The aspect ratio of the Box. Common values are:\n   *\n   * `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1`\n   */\n  ratio?: ResponsiveValue<number>\n}\n\nexport interface AspectRatioProps\n  extends Omit<HTMLChakraProps<\"div\">, \"aspectRatio\">,\n    AspectRatioOptions {}\n\n/**\n * React component used to cropping media (videos, images and maps)\n * to a desired aspect ratio.\n *\n * @see Docs https://chakra-ui.com/aspectratiobox\n */\nexport const AspectRatio = forwardRef<AspectRatioProps, \"div\">(function (\n  props,\n  ref,\n) {\n  const { ratio = 4 / 3, children, className, ...rest } = props\n\n  // enforce single child\n  const child = Children.only(children)\n\n  const _className = cx(\"chakra-aspect-ratio\", className)\n\n  return (\n    <chakra.div\n      ref={ref}\n      position=\"relative\"\n      className={_className}\n      _before={{\n        height: 0,\n        content: `\"\"`,\n        display: \"block\",\n        paddingBottom: mapResponsive(ratio, (r) => `${(1 / r) * 100}%`),\n      }}\n      __css={{\n        \"& > *:not(style)\": {\n          overflow: \"hidden\",\n          position: \"absolute\",\n          top: \"0\",\n          right: \"0\",\n          bottom: \"0\",\n          left: \"0\",\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          width: \"100%\",\n          height: \"100%\",\n        },\n        \"& > img, & > video\": {\n          objectFit: \"cover\",\n        },\n      }}\n      {...rest}\n    >\n      {child}\n    </chakra.div>\n  )\n})\n\nAspectRatio.displayName = \"AspectRatio\"\n"],"mappings":";;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAEnB,SAAS,gBAAgB;AAiCrB;AAZG,IAAM,cAAc,WAAoC,SAC7D,OACA,KACA;AACA,QAAM,EAAE,QAAQ,IAAI,GAAG,UAAU,WAAW,GAAG,KAAK,IAAI;AAGxD,QAAM,QAAQ,SAAS,KAAK,QAAQ;AAEpC,QAAM,aAAa,GAAG,uBAAuB,SAAS;AAEtD,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,UAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,eAAe,cAAc,OAAO,CAAC,MAAM,GAAI,IAAI,IAAK,GAAG,GAAG;AAAA,MAChE;AAAA,MACA,OAAO;AAAA,QACL,oBAAoB;AAAA,UAClB,UAAU;AAAA,UACV,UAAU;AAAA,UACV,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,sBAAsB;AAAA,UACpB,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,YAAY,cAAc;","names":[]}