@foxford/ui 2.0.0-beta-b3484ab-20220708 → 2.0.0-beta-9a91e66-20220708

package/components/Button/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveNamedProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n  l: 52,\n  m: 48,\n  s: 40,\n  xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 50px 50px;\n  }\n`\n\nconst loading = css`\n  background-image: linear-gradient(\n    -45deg,\n    rgba(255, 255, 255, 0.2) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.2) 50%,\n    rgba(255, 255, 255, 0.2) 75%,\n    transparent 75%,\n    transparent\n  );\n  background-size: 25px 25px;\n  animation: ${loadingAnimation} 2s linear infinite;\n  /* pointer-events: none; */\n  cursor: progress;\n`\n\nconst rounded = css`\n  border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  background-color: ${(props) => props.theme.colors.mercury};\n  color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n  &:active {\n    box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n  }\n  &:hover {\n    ${(props: ButtonProps & { theme: DefaultTheme }) => {\n      if (!props.color || !props.fontColor) return null\n\n      return css`\n        color: ${props.fontColor};\n        background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n      `\n    }}\n  }\n  ${(props) =>\n    (props.inverted || props.basic) && props.fontColor && props.color\n      ? css`\n          &:not(:hover) {\n            border: 1px solid ${props.theme.colors[props.color]};\n          }\n          &:hover {\n            border: 1px solid ${props.theme.colors[props.color]};\n          }\n        `\n      : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n  return css`\n    width: ${size}${sizing};\n    height: ${size}${sizing};\n    font-size: ${0.44 * size}${sizing};\n    line-height: ${0.44 * size}${sizing};\n    padding: ${0.28 * size}${sizing};\n  `\n}\n\nconst fluid: CalcProperty = () => {\n  return css`\n    min-width: initial;\n    width: 100%;\n  `\n}\n\nexport const Content = styled.span`\n  display: inline-block;\n  line-height: 1;\n  vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n  shouldForwardProp: (prop) =>\n    [\n      'children',\n      'className',\n      'style',\n      'target',\n      'to',\n      'href',\n      'ref',\n      'onClick',\n      'type',\n      'onMouseEnter',\n      'onMouseLeave',\n    ].includes(prop),\n})`\n  -webkit-box-sizing: border-box !important;\n  -moz-box-sizing: border-box !important;\n  -ms-box-sizing: border-box !important;\n  box-sizing: border-box !important;\n  position: relative;\n  overflow: hidden;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 600;\n  padding-top: 0;\n  padding-bottom: 0;\n  text-decoration: none;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  transition: 0.2s all;\n  white-space: nowrap;\n  appearance: none;\n  vertical-align: top;\n  & + & {\n    margin-left: 1em;\n    ${(props) =>\n      props.noSpacing\n        ? css`\n            margin-left: auto;\n          `\n        : null}\n  }\n  ${(props) => (props.display ? display(props.display) : null)}\n  ${(props) => (props.loading ? loading : null)}\n  ${(props) => (props.rounded ? rounded : null)}\n  ${(props) => (props.color ? color(props.color, props.inverted || props.basic ? 'color' : 'background-color') : null)}\n  ${(props) =>\n    props.fontColor ? color(props.fontColor, props.inverted || props.basic ? 'background-color' : 'color') : null}\n  ${(props) =>\n    props.basic\n      ? css`\n          background-color: transparent;\n        `\n      : null}\n\n  ${(props) =>\n    props.round\n      ? css`\n          border-radius: 100%;\n          letter-spacing: 0.5px;\n          & > * {\n            display: inline-block !important;\n            vertical-align: middle !important;\n          }\n          .icon {\n            vertical-align: middle;\n\n            & > * {\n              vertical-align: middle !important;\n            }\n            svg {\n              vertical-align: middle;\n            }\n          }\n        `\n      : css`\n          .icon {\n            display: inline-block;\n            font-size: inherit;\n            line-height: 0;\n            vertical-align: middle;\n            & > * {\n              vertical-align: baseline !important;\n            }\n            & + ${Content} {\n              margin-left: 10px;\n            }\n          }\n        `}\n\n  &:focus {\n    outline: 0;\n  }\n\n  /** BEGIN paddings */\n  ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n  ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n  ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n  ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n  ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n  /** END paddings */ \n\n  /** BEGIN margins */\n  ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n  ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n  ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n  ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n  ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n  /** END margins */ \n\n  /** BEGIN Responsive paddings */\n  ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n    responsiveNamedProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n  ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n    responsiveNamedProperty({\n      sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n      cssProperty: 'padding-top',\n    })}\n  ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n    responsiveNamedProperty({\n      sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n      cssProperty: 'padding-right',\n    })}\n  ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n    responsiveNamedProperty({\n      sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n      cssProperty: 'padding-bottom',\n    })}\n  ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n    responsiveNamedProperty({\n      sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n      cssProperty: 'padding-left',\n    })}\n  /** END Responsive paddings */ \n\n  /** BEGIN Responsive margins */\n  ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n    responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n  ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n    responsiveNamedProperty({\n      sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n      cssProperty: 'margin-top',\n    })}\n  ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n    responsiveNamedProperty({\n      sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n      cssProperty: 'margin-right',\n    })}\n  ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n    responsiveNamedProperty({\n      sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n      cssProperty: 'margin-bottom',\n    })}\n  ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n    responsiveNamedProperty({\n      sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n      cssProperty: 'margin-left',\n    })}\n  /** END Responsive margins */\n\n  /** BEGIN Responsive font-size */\n  ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n  ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n    return responsiveNamedProperty({\n      sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n      cssProperty: 'font-size',\n    })\n  }}\n  /** END Responsive font-size */\n\n  ${(props) => (props.height ? property(props.height, 'height') : null)}\n  ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n    responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n  ${(props) =>\n    props.width\n      ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n      : null}\n  ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) =>\n    responsiveNamedProperty({\n      sizes: { widthXS, widthS, widthM, widthL, widthXL },\n      cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n      customSizeHandler: chooseWidthValue,\n    })}\n  \n\n  ${(props) =>\n    props.round && props.size\n      ? property(\n          typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n          roundSize\n        )\n      : null}\n  \n\n  ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n  ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n    responsiveNamedProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n  ${(props) => (props.disabled ? disabled : null)}\n  ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","basic","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","cssProperty","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","chooseWidthValue","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveNamedProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n  l: 52,\n  m: 48,\n  s: 40,\n  xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 50px 50px;\n  }\n`\n\nconst loading = css`\n  background-image: linear-gradient(\n    -45deg,\n    rgba(255, 255, 255, 0.2) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.2) 50%,\n    rgba(255, 255, 255, 0.2) 75%,\n    transparent 75%,\n    transparent\n  );\n  background-size: 25px 25px;\n  animation: ${loadingAnimation} 2s linear infinite;\n  /* pointer-events: none; */\n  cursor: progress;\n`\n\nconst rounded = css`\n  border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  background-color: ${(props) => props.theme.colors.mercury};\n  color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n  &:active {\n    box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n  }\n  &:hover {\n    ${(props: ButtonProps & { theme: DefaultTheme }) => {\n      if (!props.color || !props.fontColor) return null\n\n      return css`\n        color: ${props.fontColor};\n        background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n      `\n    }}\n  }\n  ${(props) =>\n    (props.inverted || props.basic) && props.fontColor && props.color\n      ? css`\n          &:not(:hover) {\n            border: 1px solid ${props.theme.colors[props.color]};\n          }\n          &:hover {\n            border: 1px solid ${props.theme.colors[props.color]};\n          }\n        `\n      : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n  return css`\n    width: ${size as number}${sizing};\n    height: ${size as number}${sizing};\n    font-size: ${0.44 * (size as number)}${sizing};\n    line-height: ${0.44 * (size as number)}${sizing};\n    padding: ${0.28 * (size as number)}${sizing};\n  `\n}\n\nconst fluid: CalcProperty = () => {\n  return css`\n    min-width: initial;\n    width: 100%;\n  `\n}\n\nexport const Content = styled.span`\n  display: inline-block;\n  line-height: 1;\n  vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n  shouldForwardProp: (prop) =>\n    [\n      'children',\n      'className',\n      'style',\n      'target',\n      'to',\n      'href',\n      'ref',\n      'onClick',\n      'type',\n      'onMouseEnter',\n      'onMouseLeave',\n    ].includes(prop),\n})`\n  -webkit-box-sizing: border-box !important;\n  -moz-box-sizing: border-box !important;\n  -ms-box-sizing: border-box !important;\n  box-sizing: border-box !important;\n  position: relative;\n  overflow: hidden;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 600;\n  padding-top: 0;\n  padding-bottom: 0;\n  text-decoration: none;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  transition: 0.2s all;\n  white-space: nowrap;\n  appearance: none;\n  vertical-align: top;\n  & + & {\n    margin-left: 1em;\n    ${(props) =>\n      props.noSpacing\n        ? css`\n            margin-left: auto;\n          `\n        : null}\n  }\n  ${(props) => (props.display ? display(props.display) : null)}\n  ${(props) => (props.loading ? loading : null)}\n  ${(props) => (props.rounded ? rounded : null)}\n  ${(props) => (props.color ? color(props.color, props.inverted || props.basic ? 'color' : 'background-color') : null)}\n  ${(props) =>\n    props.fontColor ? color(props.fontColor, props.inverted || props.basic ? 'background-color' : 'color') : null}\n  ${(props) =>\n    props.basic\n      ? css`\n          background-color: transparent;\n        `\n      : null}\n\n  ${(props) =>\n    props.round\n      ? css`\n          border-radius: 100%;\n          letter-spacing: 0.5px;\n          & > * {\n            display: inline-block !important;\n            vertical-align: middle !important;\n          }\n          .icon {\n            vertical-align: middle;\n\n            & > * {\n              vertical-align: middle !important;\n            }\n            svg {\n              vertical-align: middle;\n            }\n          }\n        `\n      : css`\n          .icon {\n            display: inline-block;\n            font-size: inherit;\n            line-height: 0;\n            vertical-align: middle;\n            & > * {\n              vertical-align: baseline !important;\n            }\n            & + ${Content} {\n              margin-left: 10px;\n            }\n          }\n        `}\n\n  &:focus {\n    outline: 0;\n  }\n\n  /** BEGIN paddings */\n  ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n  ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n  ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n  ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n  ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n  /** END paddings */ \n\n  /** BEGIN margins */\n  ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n  ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n  ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n  ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n  ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n  /** END margins */ \n\n  /** BEGIN Responsive paddings */\n  ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n    responsiveNamedProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n  ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n    responsiveNamedProperty({\n      sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n      cssProperty: 'padding-top',\n    })}\n  ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n    responsiveNamedProperty({\n      sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n      cssProperty: 'padding-right',\n    })}\n  ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n    responsiveNamedProperty({\n      sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n      cssProperty: 'padding-bottom',\n    })}\n  ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n    responsiveNamedProperty({\n      sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n      cssProperty: 'padding-left',\n    })}\n  /** END Responsive paddings */ \n\n  /** BEGIN Responsive margins */\n  ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n    responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n  ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n    responsiveNamedProperty({\n      sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n      cssProperty: 'margin-top',\n    })}\n  ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n    responsiveNamedProperty({\n      sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n      cssProperty: 'margin-right',\n    })}\n  ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n    responsiveNamedProperty({\n      sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n      cssProperty: 'margin-bottom',\n    })}\n  ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n    responsiveNamedProperty({\n      sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n      cssProperty: 'margin-left',\n    })}\n  /** END Responsive margins */\n\n  /** BEGIN Responsive font-size */\n  ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n  ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n    return responsiveNamedProperty({\n      sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n      cssProperty: 'font-size',\n    })\n  }}\n  /** END Responsive font-size */\n\n  ${(props) => (props.height ? property(props.height, 'height') : null)}\n  ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n    responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n  ${(props) =>\n    props.width\n      ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n      : null}\n  ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) =>\n    responsiveNamedProperty({\n      sizes: { widthXS, widthS, widthM, widthL, widthXL },\n      cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n      customSizeHandler: chooseWidthValue,\n    })}\n  \n\n  ${(props) =>\n    props.round && props.size\n      ? property(\n          typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n          roundSize\n        )\n      : null}\n  \n\n  ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n  ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n    responsiveNamedProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n  ${(props) => (props.disabled ? disabled : null)}\n  ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","basic","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","cssProperty","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","chooseWidthValue","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"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"}

package/components/Spinner/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Spinner/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport {\n  responsiveNamedProperty,\n  property,\n  ResponsiveNamedProperty,\n  CalcProperty,\n} from '../../mixins/responsive-property'\nimport { SpinnerProps } from './Spinner'\n\nconst SIZES = {\n  l: 60,\n  m: 40,\n  s: 20,\n}\n\nconst spinner = keyframes`\n  to {\n      transform: rotate(360deg);\n  }\n`\n\nconst fullscreen = css`\n  height: 100vh;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst inline = css`\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0;\n`\n\nconst sizeBuilder: CalcProperty = (size: number, sizing = 'px') => css`\n  width: ${size}${sizing};\n  height: ${size}${sizing};\n  &:before {\n    width: ${size}${sizing};\n    height: ${size}${sizing};\n    margin-top: -${size / 2}${sizing};\n    margin-left: -${size / 2}${sizing};\n  }\n`\n\nconst getSize = (size: ResponsiveNamedProperty<'size'>['size']): number => {\n  if (!size || typeof size === 'boolean') return 0\n  if (typeof size === 'number') return size\n  if (SIZES[size]) return SIZES[size]\n  return 0\n}\n\nexport const Root = styled.div.withConfig<SpinnerProps>({\n  shouldForwardProp: (prop) => ['className', 'style'].includes(prop),\n})`\n  display: block;\n  position: relative;\n  display: block;\n  margin: 30px auto;\n  &:before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    border-radius: 50%;\n    border: 2px solid #eee;\n    border-top-color: #459ff3;\n    animation: ${spinner} 0.6s linear infinite;\n  }\n  ${(props) => (props.inline ? inline : null)}\n\n  ${(props) => (props.size ? property(SIZES[props.size] || props.size, sizeBuilder) : null)}\n  ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) => {\n    return responsiveNamedProperty({\n      sizes: {\n        sizeXS: getSize(sizeXS),\n        sizeS: getSize(sizeS),\n        sizeM: getSize(sizeM),\n        sizeL: getSize(sizeL),\n        sizeXL: getSize(sizeXL),\n      },\n      cssProperty: sizeBuilder,\n    })\n  }}\n\n  ${(props) => (props.fullscreen ? fullscreen : null)}\n`\n"],"names":["SIZES","l","m","s","spinner","keyframes","fullscreen","css","inline","sizeBuilder","size","i","sizing","getSize","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"sJASA,IAAMA,EAAQ,CACZC,EAAG,GACHC,EAAG,GACHC,EAAG,IAGL,IAAMC,EAAUC,EAAhB,CAAA,kCAMA,IAAMC,EAAaC,EAAnB,CAAA,uFAQA,IAAMC,EAASD,EAAf,CAAA,yDAMA,IAAME,EAA4B,SAACC,EAADC,GAAA,IAAeC,+BAAfD,EAAAA,EAAwB,KAAxB,OAAiCJ,EAAjC,CAAA,SAAA,GAAA,WAAA,GAAA,mBAAA,GAAA,WAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,MACvBG,EAAOE,EACNF,EAAOE,EAENF,EAAOE,EACNF,EAAOE,EACFF,EAAO,EAAIE,EACVF,EAAO,EAAIE,IAI/B,IAAMC,EAAWH,GACVA,GAAwB,kBAATA,EACA,iBAATA,EAA0BA,EACjCV,EAAMU,GAAcV,EAAMU,GACvB,EAHwC,EAM1C,IAAMI,EAAOC,EAAOC,IAAIC,WAAyB,CACtDC,kBAAoBC,GAAS,CAAC,YAAa,SAASC,SAASD,KAD9CF,WAAA,CAAAI,YAAA,wBAAGN,CAAH,CAAA,0NAAA,0BAAA,IAAA,IAAA,IAAA,IAgBAX,GAEZkB,GAAWA,EAAMd,OAASA,EAAS,OAEnCc,GAAWA,EAAMZ,KAAOa,EAASvB,EAAMsB,EAAMZ,OAASY,EAAMZ,KAAMD,GAAe,OAClFe,IAA6C,IAA5CC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAaL,EAC7C,OAAOM,EAAwB,CAC7BC,MAAO,CACLN,OAAQZ,EAAQY,GAChBC,MAAOb,EAAQa,GACfC,MAAOd,EAAQc,GACfC,MAAOf,EAAQe,GACfC,OAAQhB,EAAQgB,IAElBG,YAAavB,OAIda,GAAWA,EAAMhB,WAAaA,EAAa"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Spinner/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport {\n  responsiveNamedProperty,\n  property,\n  ResponsiveNamedProperty,\n  CalcProperty,\n} from '../../mixins/responsive-property'\nimport { SpinnerProps } from './Spinner'\n\nconst SIZES = {\n  l: 60,\n  m: 40,\n  s: 20,\n}\n\nconst spinner = keyframes`\n  to {\n      transform: rotate(360deg);\n  }\n`\n\nconst fullscreen = css`\n  height: 100vh;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst inline = css`\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0;\n`\n\nconst sizeBuilder: CalcProperty = (size, sizing = 'px') => css`\n  width: ${size as number}${sizing};\n  height: ${size as number}${sizing};\n  &:before {\n    width: ${size as number}${sizing};\n    height: ${size as number}${sizing};\n    margin-top: -${(size as number) / 2}${sizing};\n    margin-left: -${(size as number) / 2}${sizing};\n  }\n`\n\nconst getSize = (size: ResponsiveNamedProperty<'size'>['size']): number => {\n  if (!size || typeof size === 'boolean') return 0\n  if (typeof size === 'number') return size\n  if (SIZES[size]) return SIZES[size]\n  return 0\n}\n\nexport const Root = styled.div.withConfig<SpinnerProps>({\n  shouldForwardProp: (prop) => ['className', 'style'].includes(prop),\n})`\n  display: block;\n  position: relative;\n  display: block;\n  margin: 30px auto;\n  &:before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    border-radius: 50%;\n    border: 2px solid #eee;\n    border-top-color: #459ff3;\n    animation: ${spinner} 0.6s linear infinite;\n  }\n  ${(props) => (props.inline ? inline : null)}\n\n  ${(props) => (props.size ? property(SIZES[props.size] || props.size, sizeBuilder) : null)}\n  ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) => {\n    return responsiveNamedProperty({\n      sizes: {\n        sizeXS: getSize(sizeXS),\n        sizeS: getSize(sizeS),\n        sizeM: getSize(sizeM),\n        sizeL: getSize(sizeL),\n        sizeXL: getSize(sizeXL),\n      },\n      cssProperty: sizeBuilder,\n    })\n  }}\n\n  ${(props) => (props.fullscreen ? fullscreen : null)}\n`\n"],"names":["SIZES","l","m","s","spinner","keyframes","fullscreen","css","inline","sizeBuilder","size","i","sizing","getSize","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"sJASA,IAAMA,EAAQ,CACZC,EAAG,GACHC,EAAG,GACHC,EAAG,IAGL,IAAMC,EAAUC,EAAhB,CAAA,kCAMA,IAAMC,EAAaC,EAAnB,CAAA,uFAQA,IAAMC,EAASD,EAAf,CAAA,yDAMA,IAAME,EAA4B,SAACC,EAADC,GAAA,IAAOC,+BAAPD,EAAAA,EAAgB,KAAhB,OAAyBJ,EAAzB,CAAA,SAAA,GAAA,WAAA,GAAA,mBAAA,GAAA,WAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,MACvBG,EAAiBE,EAChBF,EAAiBE,EAEhBF,EAAiBE,EAChBF,EAAiBE,EACXF,EAAkB,EAAIE,EACrBF,EAAkB,EAAIE,IAI3C,IAAMC,EAAWH,GACVA,GAAwB,kBAATA,EACA,iBAATA,EAA0BA,EACjCV,EAAMU,GAAcV,EAAMU,GACvB,EAHwC,EAM1C,IAAMI,EAAOC,EAAOC,IAAIC,WAAyB,CACtDC,kBAAoBC,GAAS,CAAC,YAAa,SAASC,SAASD,KAD9CF,WAAA,CAAAI,YAAA,wBAAGN,CAAH,CAAA,0NAAA,0BAAA,IAAA,IAAA,IAAA,IAgBAX,GAEZkB,GAAWA,EAAMd,OAASA,EAAS,OAEnCc,GAAWA,EAAMZ,KAAOa,EAASvB,EAAMsB,EAAMZ,OAASY,EAAMZ,KAAMD,GAAe,OAClFe,IAA6C,IAA5CC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAaL,EAC7C,OAAOM,EAAwB,CAC7BC,MAAO,CACLN,OAAQZ,EAAQY,GAChBC,MAAOb,EAAQa,GACfC,MAAOd,EAAQc,GACfC,MAAOf,EAAQe,GACfC,OAAQhB,EAAQgB,IAElBG,YAAavB,OAIda,GAAWA,EAAMhB,WAAaA,EAAa"}

package/dts/index.d.ts

@@ -225,7 +225,7 @@ declare enum SizeLatin {
  */
 declare type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean;
 declare type PropsProperties = 'size' | 'fontSize' | 'height' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'fluid';
-declare type CalcProperty = (_size: number, _sizing?: null | string) => FlattenSimpleInterpolation | null;
+declare type CalcProperty = (_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null;
 declare type CssProperty = string | CalcProperty;
 declare type ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
 declare type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
@@ -442,7 +442,7 @@ interface VAlign {
 }
 declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
 
-declare function buildMediaQuery(value: number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string): ReturnType<typeof css>;
+declare function buildMediaQuery(value: number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string): ReturnType<typeof css>;
 
 interface Display {
     display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';