@yamada-ui/react/dist/cjs/components/aspect-ratio/aspect-ratio.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"aspect-ratio.cjs","names":["createComponent","aspectRatioStyle","Children"],"sources":["../../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, StyleValue } from \"../../core\"\nimport type { AspectRatioStyle } from \"./aspect-ratio.style\"\nimport { Children } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { replaceObject } from \"../../utils\"\nimport { aspectRatioStyle } from \"./aspect-ratio.style\"\n\nexport interface AspectRatioProps extends HTMLStyledProps {\n  /**\n   * The aspect ratio of the Box.\n   *\n   * @default '4 / 3'\n   */\n  ratio?: StyleValue<number>\n}\n\nconst {\n  PropsContext: AspectRatioPropsContext,\n  usePropsContext: useAspectRatioPropsContext,\n  withContext,\n} = createComponent<AspectRatioProps, AspectRatioStyle>(\n  \"aspect-ratio\",\n  aspectRatioStyle,\n)\n\nexport { AspectRatioPropsContext, useAspectRatioPropsContext }\n\n/**\n * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.\n *\n * @see https://yamada-ui.com/docs/components/aspect-ratio\n */\nexport const AspectRatio = withContext(\"div\")(\n  undefined,\n  ({ children, ratio = 4 / 3, ...rest }) => {\n    const child = Children.only(children)\n\n    return {\n      ...rest,\n      children: child,\n      _before: {\n        display: \"block\",\n        h: 0,\n        pb: replaceObject(ratio, (r) => `${(1 / r) * 100}%`),\n      },\n    }\n  },\n)\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,gBACEA,yCACF,gBACAC,4CACD;;;;;;AASD,MAAa,cAAc,YAAY,MAAM,CAC3C,SACC,EAAE,UAAU,QAAQ,IAAI,EAAG,GAAG,WAAW;CACxC,MAAM,QAAQC,eAAS,KAAK,SAAS;AAErC,QAAO;EACL,GAAG;EACH,UAAU;EACV,SAAS;GACP,SAAS;GACT,GAAG;GACH,yDAAkB,QAAQ,MAAM,GAAI,IAAI,IAAK,IAAI,GAAG;GACrD;EACF;EAEJ"}