@foxford/ui 2.29.0-beta-fddd6a7-20240531 → 2.29.1-beta-22fffeb-20240531

package/components/Indicator/Indicator.js

@@ -1,2 +1,2 @@
-import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as i}from'../../hocs/withMergedProps.js';import{Text as o}from'../Text/Text.js';import{SIZES_SQUARE as s,SIZES as a}from'./constants.js';import{Root as n,Foreground as m}from'./style.js';import{jsx as p}from'react/jsx-runtime';var l=["size","textProps","children","text"];var c=r=>null!=r.children||null!=r.text;var h=i(t(((t,i)=>{var{size:s="m",textProps:a={},children:h,text:d}=t,f=e(t,l);var x=c(t);return p(n,r(r({},f),{},{size:s,square:x,ref:i,children:p(m,{children:x&&p(o,r(r({as:"span",appearance:"body",size:"inherit",color:"inherit",weight:700,marginRight:.3,marginLeft:.3,marginUnits:"em"},a),{},{children:null!=h?h:d}))})}))})),{displayName:'Indicator',sizes:r=>c(r)?s:a});export{h as Indicator};
+import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as i}from'../../hocs/withMergedProps.js';import{Text as o}from'../Text/Text.js';import{SIZES_SQUARE as s,SIZES as a}from'./constants.js';import{Root as n,Foreground as m}from'./style.js';import{jsx as p}from'react/jsx-runtime';var l=["size","textProps","children","text"];var h=r=>null!=r.children||null!=r.text;var c=i(t(((t,i)=>{var{size:s="m",textProps:a={},children:c,text:d}=t,f=e(t,l);var x=h(t);return p(n,r(r({},f),{},{size:s,square:x,ref:i,children:p(m,{children:x&&p(o,r(r({as:"span",appearance:"body",size:"inherit",color:"inherit",weight:700,lineHeight:1,marginRight:.3,marginLeft:.3,marginUnits:"em"},a),{},{children:null!=c?c:d}))})}))})),{displayName:'Indicator',sizes:r=>h(r)?s:a});export{c as Indicator};
 //# sourceMappingURL=Indicator.js.map

package/components/Indicator/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sources":["../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_SQUARE } from './constants'\nimport * as Styled from './style'\nimport type { IndicatorProps } from './types'\n\nconst COMPONENT_NAME = 'Indicator'\n\nconst indicatorPropsWithContent = (props: IndicatorProps): boolean =>\n  (props.children !== undefined && props.children !== null) || (props.text !== undefined && props.text !== null)\n\n/**\n *\n * Component accepts all \\<span\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [IndicatorProps](https://github.com/foxford/ui/blob/master/src/components/Indicator/types.ts)\n */\nconst Indicator: React.ForwardRefExoticComponent<IndicatorProps> = withMergedProps<IndicatorProps, HTMLSpanElement>(\n  forwardRef((props, ref) => {\n    const { size = 'm', textProps = {}, children, text, ...restProps } = props\n\n    const hasContent = indicatorPropsWithContent(props)\n\n    return (\n      <Styled.Root {...restProps} size={size} square={hasContent} ref={ref}>\n        <Styled.Foreground>\n          {hasContent && (\n            <Text\n              as='span'\n              appearance='body'\n              size='inherit'\n              color='inherit'\n              weight={700}\n              marginRight={0.3}\n              marginLeft={0.3}\n              marginUnits='em'\n              {...textProps}\n            >\n              {children ?? text}\n            </Text>\n          )}\n        </Styled.Foreground>\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: (props) => (indicatorPropsWithContent(props) ? SIZES_SQUARE : SIZES),\n  }\n)\n\nexport { Indicator }\n"],"names":["indicatorPropsWithContent","props","children","text","Indicator","withMergedProps","forwardRef","ref","size","textProps","restProps","_excluded","hasContent","_jsx","Styled.Root","square","Styled.Foreground","Text","_objectSpread","as","appearance","color","weight","marginRight","marginLeft","marginUnits","displayName","sizes","SIZES_SQUARE","SIZES"],"mappings":"4bASA,IAAMA,EAA6BC,GAChCA,MAAAA,EAAMC,UAAuDD,MAAAA,EAAME,KAYhEC,IAAAA,EAA6DC,EACjEC,GAAAA,CAAYL,EAAOM,KACjB,IAAMC,KAAEA,EAAO,IAATC,UAAcA,EAAY,GAA1BP,SAA8BA,EAA9BC,KAAwCA,GAAuBF,EAAdS,IAAcT,EAArEU,GAEA,IAAMC,EAAaZ,EAA0BC,GAE7C,OACEY,EAACC,SAAgBJ,GAAjB,GAAA,CAA4BF,KAAMA,EAAMO,OAAQH,EAAYL,IAAKA,EAAjEL,SACEW,EAACG,EAAD,CAAAd,SACGU,GACCC,EAACI,EAADC,EAAAA,EAAA,CACEC,GAAG,OACHC,WAAW,OACXZ,KAAK,UACLa,MAAM,UACNC,OAAQ,IACRC,YAAa,GACbC,WAAY,GACZC,YAAY,MACRhB,GATN,GAAA,CAAAP,SAWGA,MAAAA,EAAAA,EAAYC,aAOzB,CACEuB,YA5CmB,YA6CnBC,MAAQ1B,GAAWD,EAA0BC,GAAS2B,EAAeC"}
+{"version":3,"file":"Indicator.js","sources":["../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_SQUARE } from './constants'\nimport * as Styled from './style'\nimport type { IndicatorProps } from './types'\n\nconst COMPONENT_NAME = 'Indicator'\n\nconst indicatorPropsWithContent = (props: IndicatorProps): boolean =>\n  (props.children !== undefined && props.children !== null) || (props.text !== undefined && props.text !== null)\n\n/**\n *\n * Component accepts all \\<span\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [IndicatorProps](https://github.com/foxford/ui/blob/master/src/components/Indicator/types.ts)\n */\nconst Indicator: React.ForwardRefExoticComponent<IndicatorProps> = withMergedProps<IndicatorProps, HTMLSpanElement>(\n  forwardRef((props, ref) => {\n    const { size = 'm', textProps = {}, children, text, ...restProps } = props\n\n    const hasContent = indicatorPropsWithContent(props)\n\n    return (\n      <Styled.Root {...restProps} size={size} square={hasContent} ref={ref}>\n        <Styled.Foreground>\n          {hasContent && (\n            <Text\n              as='span'\n              appearance='body'\n              size='inherit'\n              color='inherit'\n              weight={700}\n              lineHeight={1}\n              marginRight={0.3}\n              marginLeft={0.3}\n              marginUnits='em'\n              {...textProps}\n            >\n              {children ?? text}\n            </Text>\n          )}\n        </Styled.Foreground>\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: (props) => (indicatorPropsWithContent(props) ? SIZES_SQUARE : SIZES),\n  }\n)\n\nexport { Indicator }\n"],"names":["indicatorPropsWithContent","props","children","text","Indicator","withMergedProps","forwardRef","ref","size","textProps","restProps","_excluded","hasContent","_jsx","Styled.Root","square","Styled.Foreground","Text","_objectSpread","as","appearance","color","weight","lineHeight","marginRight","marginLeft","marginUnits","displayName","sizes","SIZES_SQUARE","SIZES"],"mappings":"4bASA,IAAMA,EAA6BC,GAChCA,MAAAA,EAAMC,UAAuDD,MAAAA,EAAME,KAYhEC,IAAAA,EAA6DC,EACjEC,GAAW,CAACL,EAAOM,KACjB,IAAMC,KAAEA,EAAO,IAATC,UAAcA,EAAY,GAA1BP,SAA8BA,EAA9BC,KAAwCA,GAAuBF,EAAdS,IAAcT,EAArEU,GAEA,IAAMC,EAAaZ,EAA0BC,GAE7C,OACEY,EAACC,SAAgBJ,GAAjB,GAAA,CAA4BF,KAAMA,EAAMO,OAAQH,EAAYL,IAAKA,EAAjEL,SACEW,EAACG,EAAD,CAAAd,SACGU,GACCC,EAACI,EAADC,EAAAA,EAAA,CACEC,GAAG,OACHC,WAAW,OACXZ,KAAK,UACLa,MAAM,UACNC,OAAQ,IACRC,WAAY,EACZC,YAAa,GACbC,WAAY,GACZC,YAAY,MACRjB,GAVN,GAAA,CAAAP,SAYGA,MAAAA,EAAAA,EAAYC,aAOzB,CACEwB,YA7CmB,YA8CnBC,MAAQ3B,GAAWD,EAA0BC,GAAS4B,EAAeC"}

package/components/Indicator/style.js

@@ -1,2 +1,2 @@
-import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as t}from'../../shared/utils/style.js';import{responsiveSize as a}from'../../mixins/responsive-size.js';var i=t((o=>!['square','black','grey','onColored','pulse','pulseIterationCount','border'].includes(o)));var c=e(["0%{opacity:1;transform:scale(0);}100%{opacity:0;transform:scale(3.2);}"]);var l=o=>"\n  color: ".concat(o.color,";\n  background-color: ").concat(o.backgroundColor,";\n  border-color: ").concat(o.borderColor,";\n");var s={onColored:{primary:n(["",""],(r=>l(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-oncolor-primary'],borderColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),secondary:n(["",""],(r=>l(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-secondary-500'],borderColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),black:n(["",""],(r=>l(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-contrast'],borderColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),grey:n(["",""],(r=>l(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-oncolor-secondary'],borderColor:r.theme.colors['bg-oncolor-primary']},r.palette))))},default:{primary:n(["",""],(r=>l(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-primary-500'],borderColor:r.theme.colors['bg-onmain-primary']},r.palette)))),secondary:n(["",""],(r=>l(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-secondary-500'],borderColor:r.theme.colors['bg-onmain-primary']},r.palette)))),black:n(["",""],(r=>l(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-contrast'],borderColor:r.theme.colors['bg-onmain-primary']},r.palette)))),grey:n(["",""],(r=>l(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-divider'],borderColor:r.theme.colors['bg-onmain-primary']},r.palette))))}};var m=r.span.withConfig({componentId:"fox-ui__sc-1dc67xh-0"})(["box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;border-width:1px;border-style:solid;border-radius:inherit;background-color:inherit;"]);var d=r.span.withConfig({shouldForwardProp:i}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({fontSize:'string'==typeof r?r:"".concat(r).concat(e),width:o.square?'min-content':'1em',minWidth:o.square?'1.6em':void 0,height:o.square?'1.6em':'1em',borderRadius:o.square?'0.2em':'50%'})}))).withConfig({componentId:"fox-ui__sc-1dc67xh-1"})([""," "," "," ",""],(o=>"\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    cursor: default;\n    display: inline-block;\n    text-wrap: nowrap;\n    flex-shrink: 0;\n\n    & > ".concat(m," {\n      border-color: ").concat(o.border?'inherit':'transparent',";\n    }\n  ")),(o=>{var r=o.onColored?s.onColored:s.default;return o.grey?r.grey:o.black?r.black:o.secondary?r.secondary:r.primary}),(o=>o.pulse&&n(["&::before,&::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:inherit;border-radius:inherit;animation-name:",";animation-duration:3600ms;animation-iteration-count:",";}&::after{animation-delay:600ms;}"],c,'number'==typeof o.pulseIterationCount?o.pulseIterationCount:'infinite')),a);export{m as Foreground,d as Root};
+import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as a}from'../../shared/utils/style.js';import{responsiveSize as t}from'../../mixins/responsive-size.js';var c=a((o=>!['square','black','grey','onColored','pulse','pulseIterationCount','frame'].includes(o)));var i=e(["0%{opacity:1;transform:scale(1);}75%{opacity:0;}100%{transform:scale(4);}"]);var l=r.span.withConfig({componentId:"fox-ui__sc-1dc67xh-0"})(["box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;border-radius:inherit;background-color:inherit;"]);var s=o=>"\n  color: ".concat(o.color,";\n  background-color: ").concat(o.backgroundColor,";\n\n  & > ").concat(l," {\n    box-shadow: 0 0 0 1px ").concat(o.shadowColor,";\n  }\n");var m={onColored:{primary:n(["",""],(r=>s(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-oncolor-primary'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),secondary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-secondary-500'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),black:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-contrast'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),grey:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-oncolor-secondary'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette))))},default:{primary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-primary-500'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),secondary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-secondary-500'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),black:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-contrast'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),grey:n(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-divider'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette))))}};var d=r.span.withConfig({shouldForwardProp:c}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({fontSize:'string'==typeof r?r:"".concat(r).concat(e),width:o.square?'min-content':'1em',minWidth:o.square?'1.6em':void 0,height:o.square?'1.6em':'1em',borderRadius:o.square?'0.2em':'50%'})}))).withConfig({componentId:"fox-ui__sc-1dc67xh-1"})(["box-sizing:border-box;position:relative;isolation:isolate;cursor:default;display:inline-block;text-wrap:nowrap;flex-shrink:0;"," "," "," ",""],(o=>{var r=o.onColored?m.onColored:m.default;return o.grey?r.grey:o.black?r.black:o.secondary?r.secondary:r.primary}),(o=>!o.frame&&"\n      & > ".concat(l," {\n        box-shadow: none;\n      }\n    ")),(o=>o.pulse&&n(["&::before,&::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background-color:inherit;border-radius:inherit;animation-name:",";animation-duration:3200ms;animation-iteration-count:",";}&::after{animation-delay:800ms;}"],i,'number'==typeof o.pulseIterationCount?o.pulseIterationCount:'infinite')),t);export{l as Foreground,d as Root};
 //# sourceMappingURL=style.js.map

package/components/Indicator/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Indicator/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledIndicatorProps, IndicatorPalette } from './types'\n\nconst shouldForwardIndicatorProp = createShouldForwardProp((propKey) => {\n  return !['square', 'black', 'grey', 'onColored', 'pulse', 'pulseIterationCount', 'border'].includes(propKey)\n})\n\nconst pulseAnimation = keyframes`\n  0% {\n    opacity: 1;\n    transform: scale(0);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(3.2);\n  }\n`\n\nconst template = (palette: IndicatorPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n`\n\nconst COLOR_SCHEMA = {\n  onColored: {\n    primary: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-brand-primary'],\n          backgroundColor: props.theme.colors['bg-oncolor-primary'],\n          borderColor: props.theme.colors['bg-oncolor-primary'],\n          ...props.palette,\n        })}\n    `,\n    secondary: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-brand-secondary-500'],\n          borderColor: props.theme.colors['bg-oncolor-primary'],\n          ...props.palette,\n        })}\n    `,\n    black: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-contrast'],\n          borderColor: props.theme.colors['bg-oncolor-primary'],\n          ...props.palette,\n        })}\n    `,\n    grey: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-oncolor-secondary'],\n          borderColor: props.theme.colors['bg-oncolor-primary'],\n          ...props.palette,\n        })}\n    `,\n  },\n  default: {\n    primary: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-brand-primary-500'],\n          borderColor: props.theme.colors['bg-onmain-primary'],\n          ...props.palette,\n        })}\n    `,\n    secondary: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-brand-secondary-500'],\n          borderColor: props.theme.colors['bg-onmain-primary'],\n          ...props.palette,\n        })}\n    `,\n    black: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-contrast'],\n          borderColor: props.theme.colors['bg-onmain-primary'],\n          ...props.palette,\n        })}\n    `,\n    grey: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-divider'],\n          borderColor: props.theme.colors['bg-onmain-primary'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Foreground = styled.span`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: inherit;\n  background-color: inherit;\n`\n\nexport const Root = styled.span\n  .withConfig<StyledIndicatorProps>({\n    shouldForwardProp: shouldForwardIndicatorProp,\n  })\n  .attrs<StyledIndicatorProps>(\n    (props): Required<Pick<StyledIndicatorProps, 'dynamicSizeDeclaration'>> => ({\n      dynamicSizeDeclaration: (size, sizeUnits) => ({\n        fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n        width: props.square ? 'min-content' : '1em',\n        minWidth: props.square ? '1.6em' : undefined,\n        height: props.square ? '1.6em' : '1em',\n        borderRadius: props.square ? '0.2em' : '50%',\n      }),\n    })\n  )`\n  ${(props) => `\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    cursor: default;\n    display: inline-block;\n    text-wrap: nowrap;\n    flex-shrink: 0;\n\n    & > ${Foreground} {\n      border-color: ${props.border ? 'inherit' : 'transparent'};\n    }\n  `}\n\n  ${(props) => {\n    const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n    if (props.grey) return schema.grey\n    if (props.black) return schema.black\n    if (props.secondary) return schema.secondary\n\n    return schema.primary\n  }}\n\n  ${(props) =>\n    props.pulse &&\n    css`\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: inherit;\n        border-radius: inherit;\n        animation-name: ${pulseAnimation};\n        animation-duration: 3600ms;\n        animation-iteration-count: ${typeof props.pulseIterationCount === 'number'\n          ? props.pulseIterationCount\n          : 'infinite'};\n      }\n\n      &::after {\n        animation-delay: 600ms;\n      }\n    `}\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardIndicatorProp","createShouldForwardProp","propKey","includes","pulseAnimation","keyframes","template","palette","concat","color","backgroundColor","borderColor","COLOR_SCHEMA","onColored","primary","css","props","_objectSpread","theme","colors","secondary","black","grey","default","Foreground","styled","span","withConfig","componentId","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","square","minWidth","height","borderRadius","border","schema","pulse","pulseIterationCount","responsiveSize"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Indicator/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledIndicatorProps, IndicatorPalette } from './types'\n\nconst shouldForwardIndicatorProp = createShouldForwardProp((propKey) => {\n  return !['square', 'black', 'grey', 'onColored', 'pulse', 'pulseIterationCount', 'frame'].includes(propKey)\n})\n\nconst pulseAnimation = keyframes`\n  0% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  75% {\n    opacity: 0;\n  }\n  100% {\n    transform: scale(4);\n  }\n`\n\nexport const Foreground = styled.span`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  border-radius: inherit;\n  background-color: inherit;\n`\n\nconst template = (palette: IndicatorPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n\n  & > ${Foreground} {\n    box-shadow: 0 0 0 1px ${palette.shadowColor};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  onColored: {\n    primary: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-brand-primary'],\n          backgroundColor: props.theme.colors['bg-oncolor-primary'],\n          shadowColor: props.theme.colors['bg-oncolor-primary'],\n          ...props.palette,\n        })}\n    `,\n    secondary: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-brand-secondary-500'],\n          shadowColor: props.theme.colors['bg-oncolor-primary'],\n          ...props.palette,\n        })}\n    `,\n    black: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-contrast'],\n          shadowColor: props.theme.colors['bg-oncolor-primary'],\n          ...props.palette,\n        })}\n    `,\n    grey: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-oncolor-secondary'],\n          shadowColor: props.theme.colors['bg-oncolor-primary'],\n          ...props.palette,\n        })}\n    `,\n  },\n  default: {\n    primary: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-brand-primary-500'],\n          shadowColor: props.theme.colors['bg-onmain-primary'],\n          ...props.palette,\n        })}\n    `,\n    secondary: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-brand-secondary-500'],\n          shadowColor: props.theme.colors['bg-onmain-primary'],\n          ...props.palette,\n        })}\n    `,\n    black: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-contrast'],\n          shadowColor: props.theme.colors['bg-onmain-primary'],\n          ...props.palette,\n        })}\n    `,\n    grey: css<StyledIndicatorProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-divider'],\n          shadowColor: props.theme.colors['bg-onmain-primary'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Root = styled.span\n  .withConfig<StyledIndicatorProps>({\n    shouldForwardProp: shouldForwardIndicatorProp,\n  })\n  .attrs<StyledIndicatorProps>(\n    (props): Required<Pick<StyledIndicatorProps, 'dynamicSizeDeclaration'>> => ({\n      dynamicSizeDeclaration: (size, sizeUnits) => ({\n        fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n        width: props.square ? 'min-content' : '1em',\n        minWidth: props.square ? '1.6em' : undefined,\n        height: props.square ? '1.6em' : '1em',\n        borderRadius: props.square ? '0.2em' : '50%',\n      }),\n    })\n  )`\n  box-sizing: border-box;\n  position: relative;\n  isolation: isolate;\n  cursor: default;\n  display: inline-block;\n  text-wrap: nowrap;\n  flex-shrink: 0;\n\n  ${(props) => {\n    const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n    if (props.grey) return schema.grey\n    if (props.black) return schema.black\n    if (props.secondary) return schema.secondary\n\n    return schema.primary\n  }}\n\n  ${(props) =>\n    !props.frame &&\n    `\n      & > ${Foreground} {\n        box-shadow: none;\n      }\n    `}\n\n  ${(props) =>\n    props.pulse &&\n    css`\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        background-color: inherit;\n        border-radius: inherit;\n        animation-name: ${pulseAnimation};\n        animation-duration: 3200ms;\n        animation-iteration-count: ${typeof props.pulseIterationCount === 'number'\n          ? props.pulseIterationCount\n          : 'infinite'};\n      }\n\n      &::after {\n        animation-delay: 800ms;\n      }\n    `}\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardIndicatorProp","createShouldForwardProp","propKey","includes","pulseAnimation","keyframes","Foreground","styled","span","withConfig","componentId","template","palette","color","concat","backgroundColor","shadowColor","COLOR_SCHEMA","onColored","primary","css","props","_objectSpread","theme","colors","secondary","black","grey","default","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","square","minWidth","height","borderRadius","schema","frame","pulse","pulseIterationCount","responsiveSize"],"mappings":"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"}

package/dts/index.d.ts

@@ -2177,7 +2177,7 @@ declare const ListItem: React.ForwardRefExoticComponent<ListItemProps>;
 declare type IndicatorPalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
-    borderColor: CSSColor;
+    shadowColor: CSSColor;
 };
 interface IndicatorProps extends ResponsiveSizeProps, React.ComponentPropsWithRef<'span'> {
     /** Custom colors */
@@ -2202,8 +2202,8 @@ interface IndicatorProps extends ResponsiveSizeProps, React.ComponentPropsWithRe
     pulse?: boolean;
     /** Pulse animation iteration count */
     pulseIterationCount?: number;
-    /** Apply border styles */
-    border?: boolean;
+    /** Apply shadow styles */
+    frame?: boolean;
 }
 
 /**