{"version":3,"sources":["../src/system.ts"],"sourcesContent":["import { useColorMode } from \"@chakra-ui/color-mode\"\nimport {\n  css,\n  isStyleProp,\n  StyleProps,\n  SystemStyleObject,\n} from \"@chakra-ui/styled-system\"\nimport { Dict, filterUndefined, objectFilter, runIfFn } from \"@chakra-ui/utils\"\nimport { assignAfter } from \"@chakra-ui/object-utils\"\nimport createStyled, { CSSObject, FunctionInterpolation } from \"@emotion/styled\"\nimport React from \"react\"\nimport { shouldForwardProp } from \"./should-forward-prop\"\nimport { As, ChakraComponent, ChakraProps, PropsOf } from \"./system.types\"\nimport { DOMElements } from \"./system.utils\"\n\nconst emotion_styled = ((createStyled as any).default ??\n  createStyled) as typeof createStyled\n\ntype StyleResolverProps = SystemStyleObject & {\n  __css?: SystemStyleObject\n  sx?: SystemStyleObject\n  theme: any\n  css?: CSSObject\n}\n\ninterface GetStyleObject {\n  (options: {\n    baseStyle?:\n      | SystemStyleObject\n      | ((props: StyleResolverProps) => SystemStyleObject)\n  }): FunctionInterpolation<StyleResolverProps>\n}\n\n/**\n * Style resolver function that manages how style props are merged\n * in combination with other possible ways of defining styles.\n *\n * For example, take a component defined this way:\n * ```jsx\n * <Box fontSize=\"24px\" sx={{ fontSize: \"40px\" }}></Box>\n * ```\n *\n * We want to manage the priority of the styles properly to prevent unwanted\n * behaviors. Right now, the `sx` prop has the highest priority so the resolved\n * fontSize will be `40px`\n */\nexport const toCSSObject: GetStyleObject =\n  ({ baseStyle }) =>\n  (props) => {\n    const { theme, css: cssProp, __css, sx, ...rest } = props\n    const styleProps = objectFilter(rest, (_, prop) => isStyleProp(prop))\n    const finalBaseStyle = runIfFn(baseStyle, props)\n    const finalStyles = assignAfter(\n      {},\n      __css,\n      finalBaseStyle,\n      filterUndefined(styleProps),\n      sx,\n    )\n    const computedCSS = css(finalStyles)(props.theme)\n    return cssProp ? [computedCSS, cssProp] : computedCSS\n  }\n\nexport interface ChakraStyledOptions extends Dict {\n  shouldForwardProp?(prop: string): boolean\n  label?: string\n  baseStyle?:\n    | SystemStyleObject\n    | ((props: StyleResolverProps) => SystemStyleObject)\n}\n\nexport function styled<T extends As, P extends object = {}>(\n  component: T,\n  options?: ChakraStyledOptions,\n) {\n  const { baseStyle, ...styledOptions } = options ?? {}\n\n  if (!styledOptions.shouldForwardProp) {\n    styledOptions.shouldForwardProp = shouldForwardProp\n  }\n\n  const styleObject = toCSSObject({ baseStyle })\n  const Component = emotion_styled(\n    component as React.ComponentType<any>,\n    styledOptions,\n  )(styleObject)\n\n  const chakraComponent = React.forwardRef(function ChakraComponent(\n    props,\n    ref,\n  ) {\n    const { colorMode, forced } = useColorMode()\n    return React.createElement(Component, {\n      ref,\n      \"data-theme\": forced ? colorMode : undefined,\n      ...props,\n    })\n  })\n\n  return chakraComponent as ChakraComponent<T, P>\n}\n\nexport type HTMLChakraComponents = {\n  [Tag in DOMElements]: ChakraComponent<Tag, {}>\n}\n\nexport type HTMLChakraProps<T extends As> = Omit<\n  PropsOf<T>,\n  \"ref\" | keyof StyleProps\n> &\n  ChakraProps & { as?: As }\n"],"mappings":";;;;;;AAAA,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAe,iBAAiB,cAAc,eAAe;AAC7D,SAAS,mBAAmB;AAC5B,OAAO,kBAAwD;AAC/D,OAAO,WAAW;AAVlB;AAeA,IAAM,kBAAmB,kBAAqB,YAArB,YACvB;AA8BK,IAAM,cACX,CAAC,EAAE,UAAU,MACb,CAAC,UAAU;AACT,QAAM,EAAE,OAAO,KAAK,SAAS,OAAO,IAAI,GAAG,KAAK,IAAI;AACpD,QAAM,aAAa,aAAa,MAAM,CAAC,GAAG,SAAS,YAAY,IAAI,CAAC;AACpE,QAAM,iBAAiB,QAAQ,WAAW,KAAK;AAC/C,QAAM,cAAc;AAAA,IAClB,CAAC;AAAA,IACD;AAAA,IACA;AAAA,IACA,gBAAgB,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,IAAI,WAAW,EAAE,MAAM,KAAK;AAChD,SAAO,UAAU,CAAC,aAAa,OAAO,IAAI;AAC5C;AAUK,SAAS,OACd,WACA,SACA;AACA,QAAM,EAAE,WAAW,GAAG,cAAc,IAAI,4BAAW,CAAC;AAEpD,MAAI,CAAC,cAAc,mBAAmB;AACpC,kBAAc,oBAAoB;AAAA,EACpC;AAEA,QAAM,cAAc,YAAY,EAAE,UAAU,CAAC;AAC7C,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,EACF,EAAE,WAAW;AAEb,QAAM,kBAAkB,MAAM,WAAW,SAAS,gBAChD,OACA,KACA;AACA,UAAM,EAAE,WAAW,OAAO,IAAI,aAAa;AAC3C,WAAO,MAAM,cAAc,WAAW;AAAA,MACpC;AAAA,MACA,cAAc,SAAS,YAAY;AAAA,MACnC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AACT;","names":[]}