{"version":3,"sources":["../src/wrap.tsx"],"sourcesContent":["import { cx } from \"@chakra-ui/shared-utils\"\nimport {\n  chakra,\n  forwardRef,\n  HTMLChakraProps,\n  SystemProps,\n} from \"@chakra-ui/system\"\nimport { Children, useMemo } from \"react\"\n\nexport interface WrapProps extends HTMLChakraProps<\"div\"> {\n  /**\n   * The space between each child (even if it wraps)\n   * @type SystemProps[\"margin\"]\n   */\n  spacing?: SystemProps[\"margin\"]\n  /**\n   * The horizontal space between the each child (even if it wraps). Defaults to `spacing` if not defined.\n   * @type SystemProps[\"margin\"]\n   */\n  spacingX?: SystemProps[\"margin\"]\n  /**\n   * The vertical space between the each child (even if it wraps). Defaults to `spacing` if not defined.\n   * @type SystemProps[\"margin\"]\n   */\n  spacingY?: SystemProps[\"margin\"]\n  /**\n   * The `justify-content` value (for cross-axis alignment)\n   * @type SystemProps[\"justifyContent\"]\n   */\n  justify?: SystemProps[\"justifyContent\"]\n  /**\n   * The `align-items` value (for main axis alignment)\n   * @type SystemProps[\"alignItems\"]\n   */\n  align?: SystemProps[\"alignItems\"]\n  /**\n   * The `flex-direction` value\n   * @type SystemProps[\"flexDirection\"]\n   */\n  direction?: SystemProps[\"flexDirection\"]\n  /**\n   * If `true`, the children will be wrapped in a `WrapItem`\n   * @default false\n   */\n  shouldWrapChildren?: boolean\n}\n\n/**\n * Layout component used to stack elements that differ in length\n * and are liable to wrap.\n *\n * Common use cases:\n * - Buttons that appear together at the end of forms\n * - Lists of tags and chips\n *\n * @see Docs https://chakra-ui.com/wrap\n */\nexport const Wrap = forwardRef<WrapProps, \"div\">(function Wrap(props, ref) {\n  const {\n    spacing = \"0.5rem\",\n    spacingX,\n    spacingY,\n    children,\n    justify,\n    direction,\n    align,\n    className,\n    shouldWrapChildren,\n    ...rest\n  } = props\n\n  const _children = useMemo(\n    () =>\n      shouldWrapChildren\n        ? Children.map(children, (child, index) => (\n            <WrapItem key={index}>{child}</WrapItem>\n          ))\n        : children,\n    [children, shouldWrapChildren],\n  )\n\n  return (\n    <chakra.div ref={ref} className={cx(\"chakra-wrap\", className)} {...rest}>\n      <chakra.ul\n        className=\"chakra-wrap__list\"\n        __css={{\n          display: \"flex\",\n          flexWrap: \"wrap\",\n          justifyContent: justify,\n          alignItems: align,\n          flexDirection: direction,\n          listStyleType: \"none\",\n          gap: spacing,\n          columnGap: spacingX,\n          rowGap: spacingY,\n          padding: \"0\",\n        }}\n      >\n        {_children}\n      </chakra.ul>\n    </chakra.div>\n  )\n})\n\nWrap.displayName = \"Wrap\"\n\nexport interface WrapItemProps extends HTMLChakraProps<\"li\"> {}\n\nexport const WrapItem = forwardRef<WrapItemProps, \"li\">(function WrapItem(\n  props,\n  ref,\n) {\n  const { className, ...rest } = props\n  return (\n    <chakra.li\n      ref={ref}\n      __css={{ display: \"flex\", alignItems: \"flex-start\" }}\n      className={cx(\"chakra-wrap__listitem\", className)}\n      {...rest}\n    />\n  )\n})\n\nWrapItem.displayName = \"WrapItem\"\n"],"mappings":";;;AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,UAAU,eAAe;AAoEtB;AAlBL,IAAM,OAAO,WAA6B,SAASA,MAAK,OAAO,KAAK;AACzE,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,YAAY;AAAA,IAChB,MACE,qBACI,SAAS,IAAI,UAAU,CAAC,OAAO,UAC7B,oBAAC,YAAsB,mBAAR,KAAc,CAC9B,IACD;AAAA,IACN,CAAC,UAAU,kBAAkB;AAAA,EAC/B;AAEA,SACE,oBAAC,OAAO,KAAP,EAAW,KAAU,WAAW,GAAG,eAAe,SAAS,GAAI,GAAG,MACjE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,eAAe;AAAA,QACf,KAAK;AAAA,QACL,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,KAAK,cAAc;AAIZ,IAAM,WAAW,WAAgC,SAASC,UAC/D,OACA,KACA;AACA,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAC/B,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,OAAO,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,MACnD,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,SAAS,cAAc;","names":["Wrap","WrapItem"]}