{"version":3,"file":"Box.cjs","sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cx from 'clsx';\nimport { EmotionSx, emotionTransform } from '@raikou/emotion';\nimport { createPolymorphicComponent } from '../factory';\nimport { InlineStyles } from '../InlineStyles';\nimport { RaikouBreakpoint, useRaikouTheme } from '../RaikouProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, RaikouStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n extractStyleProps,\n parseStyleProps,\n RaikouStyleProps,\n STYlE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends RaikouStyleProps {\n /** Class added to root element, if applicable */\n className?: string;\n\n /** Inline style added to root component element, can subscribe to theme defined on RaikouProvider */\n style?: RaikouStyleProp;\n\n /** CSS variables defined on root component element */\n __vars?: CssVarsProp;\n\n /** `size` property passed down the HTML element */\n __size?: string;\n\n /** Breakpoint above which the component is hidden with `display: none` */\n hiddenFrom?: RaikouBreakpoint;\n\n /** Breakpoint below which the component is hidden with `display: none` */\n visibleFrom?: RaikouBreakpoint;\n\n /** Determines whether component should be hidden in light color scheme with `display: none` */\n lightHidden?: boolean;\n\n /** Determines whether component should be hidden in dark color scheme with `display: none` */\n darkHidden?: boolean;\n\n /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n mod?: BoxMod;\n\n /** Emotion styles for stx, styles prop */\n stx?: EmotionSx;\n}\n\nexport type ElementProps<\n ElementType extends React.ElementType,\n PropsToOmit extends string = never,\n> = Omit, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n /** Variant passed from parent component, sets `data-variant` */\n variant?: string;\n\n /** Size passed from parent component, sets `data-size` if value is not number like */\n size?: string | number;\n}\n\nconst _Box = forwardRef<\n HTMLDivElement,\n BoxComponentProps & { component: any; className: string; renderRoot: any }\n>(\n (\n {\n component,\n style,\n __vars,\n className,\n variant,\n mod,\n size,\n hiddenFrom,\n visibleFrom,\n lightHidden,\n darkHidden,\n renderRoot,\n __size,\n ...others\n },\n ref\n ) => {\n const theme = useRaikouTheme();\n const Element = component || 'div';\n\n const { styleProps, rest } = extractStyleProps(others);\n const stylesTransform = emotionTransform.stx !== undefined ? emotionTransform.stx() : undefined;\n const transformedSx = stylesTransform?.(styleProps.stx);\n const responsiveClassName = useRandomClassName();\n const parsedStyleProps = parseStyleProps({\n styleProps,\n theme,\n data: STYlE_PROPS_DATA,\n });\n\n const props = {\n ref,\n style: getBoxStyle({\n theme,\n style,\n vars: __vars,\n styleProps: parsedStyleProps.inlineStyles,\n }),\n className: cx(className, transformedSx, {\n [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n 'raikou-light-hidden': lightHidden,\n 'raikou-dark-hidden': darkHidden,\n [`raikou-hidden-from-${hiddenFrom}`]: hiddenFrom,\n [`raikou-visible-from-${visibleFrom}`]: visibleFrom,\n }),\n 'data-variant': variant,\n 'data-size': isNumberLike(size) ? undefined : size || undefined,\n size: __size,\n ...getBoxMod(mod),\n ...rest,\n };\n\n return (\n <>\n {parsedStyleProps.hasResponsiveStyles && (\n \n )}\n {typeof renderRoot === 'function' ? renderRoot(props) : }\n \n );\n }\n);\n\n_Box.displayName = '@raikou/core/Box';\n\nexport const Box = createPolymorphicComponent<'div', BoxComponentProps>(_Box);\n"],"names":["forwardRef","useRaikouTheme","extractStyleProps","emotionTransform","useRandomClassName","parseStyleProps","STYlE_PROPS_DATA","getBoxStyle","cx","isNumberLike","getBoxMod","jsxs","Fragment","jsx","InlineStyles","createPolymorphicComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAIX,CACE;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,QAAQC,6BAAe,EAAA;AAC7B,IAAA,MAAM,UAAU,SAAa,IAAA,KAAA;AAE7B,IAAA,MAAM,EAAE,UAAA,EAAY,IAAK,EAAA,GAAIC,oCAAkB,MAAM,CAAA;AACrD,IAAA,MAAM,kBAAkBC,wBAAiB,CAAA,GAAA,KAAQ,KAAY,CAAA,GAAAA,wBAAA,CAAiB,KAAQ,GAAA,KAAA,CAAA;AACtF,IAAM,MAAA,aAAA,GAAgB,eAAkB,GAAA,UAAA,CAAW,GAAG,CAAA;AACtD,IAAA,MAAM,sBAAsBC,qCAAmB,EAAA;AAC/C,IAAA,MAAM,mBAAmBC,+BAAgB,CAAA;AAAA,MACvC,UAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAM,EAAAC;AAAA,KACP,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAA;AAAA,MACA,OAAOC,uBAAY,CAAA;AAAA,QACjB,KAAA;AAAA,QACA,KAAA;AAAA,QACA,IAAM,EAAA,MAAA;AAAA,QACN,YAAY,gBAAiB,CAAA;AAAA,OAC9B,CAAA;AAAA,MACD,SAAA,EAAWC,mBAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,mBAAmB,GAAG,gBAAiB,CAAA,mBAAA;AAAA,QACxC,qBAAuB,EAAA,WAAA;AAAA,QACvB,oBAAsB,EAAA,UAAA;AAAA,QACtB,CAAC,CAAA,mBAAA,EAAsB,UAAU,CAAA,CAAE,GAAG,UAAA;AAAA,QACtC,CAAC,CAAA,oBAAA,EAAuB,WAAW,CAAA,CAAE,GAAG;AAAA,OACzC,CAAA;AAAA,MACD,cAAgB,EAAA,OAAA;AAAA,MAChB,WAAa,EAAAC,yBAAA,CAAa,IAAI,CAAA,GAAI,SAAY,IAAQ,IAAA,KAAA,CAAA;AAAA,MACtD,IAAM,EAAA,MAAA;AAAA,MACN,GAAGC,oBAAU,GAAG,CAAA;AAAA,MAChB,GAAG;AAAA,KACL;AAEA,IAAA,uBAEKC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,gBAAA,CAAiB,mBAChB,oBAAAC,cAAA;AAAA,QAACC,yBAAA;AAAA,QAAA;AAAA,UACC,QAAA,EAAU,IAAI,mBAAmB,CAAA,CAAA;AAAA,UACjC,QAAQ,gBAAiB,CAAA,MAAA;AAAA,UACzB,OAAO,gBAAiB,CAAA;AAAA;AAAA,OAC1B;AAAA,MAED,OAAO,eAAe,UAAa,GAAA,UAAA,CAAW,KAAK,CAAI,mBAAAD,cAAA,CAAC,OAAS,EAAA,EAAA,GAAG,KAAO,EAAA;AAAA,KAC9E,EAAA,CAAA;AAAA;AAGN,CAAA;AAEA,IAAA,CAAK,WAAc,GAAA,kBAAA;AAEN,MAAA,GAAA,GAAME,sDAAqD,IAAI;;;;"}