@foxford/ui 2.30.1-beta-ec5d2c1-20240611 → 2.32.0-beta-69fa699-20240618

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport { abbreviateCaption } from './utils'\nimport { SIZES } from './constants'\nimport { SIZES_MAPPING_RULES, SIZES_DEFAULT } from './default-constants'\nimport type { AvatarProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Avatar'\n\n/**\n *\n * Component accepts all \\<span\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AvatarProps](https://github.com/foxford/ui/blob/master/src/components/AvatarProps/types.ts)\n */\nconst Avatar: React.ForwardRefExoticComponent<AvatarProps> = withMergedProps<AvatarProps, HTMLSpanElement>(\n forwardRef((props, ref) => {\n const { size = 'm', textProps = {}, borderRadius = '50%', children, text, ...restProps } = props\n\n const sizeMapped =\n typeof size === 'string' && (restProps.preset === 'default' || size === 'sm')\n ? SIZES_MAPPING_RULES[size] ?? size\n : size\n\n return (\n <Styled.Root {...restProps} size={sizeMapped} borderRadius={borderRadius} ref={ref}>\n {restProps.loading ? (\n <Skeleton as='span' width='100%' height='100%' borderRadius='inherit' />\n ) : (\n <>\n {children ??\n (!restProps.src && (\n <Text\n as='span'\n appearance='caption'\n size='inherit'\n color='inherit'\n lineHeight={1}\n marginTop={1}\n transform='uppercase'\n {...textProps}\n >\n {abbreviateCaption(text || restProps.title || '')}\n </Text>\n ))}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => (props.preset === 'brand' ? SIZES : SIZES_DEFAULT),\n }\n)\n\nexport { Avatar }\n"],"names":["Avatar","withMergedProps","forwardRef","props","ref","_SIZES_MAPPING_RULES$","size","textProps","borderRadius","children","text","restProps","_excluded","sizeMapped","preset","SIZES_MAPPING_RULES","_jsx","Styled.Root","loading","Skeleton","as","width","height","_Fragment","src","Text","_objectSpread","appearance","color","lineHeight","marginTop","transform","abbreviateCaption","title","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"ymBAsBMA,IAAAA,EAAuDC,EAC3DC,IAAYC,EAAOC,KAAQ,IAAAC,EACzB,IAAMC,KAAEA,EAAO,IAATC,UAAcA,EAAY,GAA1BC,aAA8BA,EAAe,MAA7CC,SAAoDA,EAApDC,KAA8DA,GAAuBP,EAAdQ,IAAcR,EAA3FS,GAEA,IAAMC,EACY,iBAATP,GAA2C,YAArBK,EAAUG,QAAiC,OAATR,EAE3DA,EAFJ,QAAAD,EACIU,EAAoBT,UAAAA,IADxBD,EAAAA,EACiCC,EAGnC,OACEU,EAACC,SAAgBN,GAAjB,GAAA,CAA4BL,KAAMO,EAAYL,aAAcA,EAAcJ,IAAKA,EAA/EK,SACGE,EAAUO,QACTF,EAACG,EAAD,CAAUC,GAAG,OAAOC,MAAM,OAAOC,OAAO,OAAOd,aAAa,YAE5DQ,EAAAO,EAAA,CAAAd,SACGA,MAAAA,EAAAA,GACGE,EAAUa,KACVR,EAACS,EAADC,EAAAA,EAAA,CACEN,GAAG,OACHO,WAAW,UACXrB,KAAK,UACLsB,MAAM,UACNC,WAAY,EACZC,UAAW,EACXC,UAAU,aACNxB,GARN,GAAA,CAAAE,SAUGuB,EAAkBtB,GAAQC,EAAUsB,OAAS,eAQ9D,CACEC,YAhDmB,SAiDnBC,MAAQhC,GAA4B,UAAjBA,EAAMW,OAAqBsB,EAAQC"}
1
+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport { abbreviateCaption } from './utils'\nimport { SIZES } from './constants'\nimport { SIZES_MAPPING_RULES, SIZES_DEFAULT } from './default-constants'\nimport type { AvatarProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Avatar'\n\n/**\n *\n * Component accepts all \\<span\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AvatarProps](https://github.com/foxford/ui/blob/master/src/components/Avatar/types.ts)\n */\nconst Avatar: React.ForwardRefExoticComponent<AvatarProps> = withMergedProps<AvatarProps, HTMLSpanElement>(\n forwardRef((props, ref) => {\n const { size = 'm', textProps = {}, borderRadius = '50%', children, text, ...restProps } = props\n\n const sizeMapped =\n typeof size === 'string' && (restProps.preset === 'default' || size === 'sm')\n ? SIZES_MAPPING_RULES[size] ?? size\n : size\n\n return (\n <Styled.Root {...restProps} size={sizeMapped} borderRadius={borderRadius} ref={ref}>\n {restProps.loading ? (\n <Skeleton as='span' width='100%' height='100%' borderRadius='inherit' />\n ) : (\n <>\n {children ??\n (!restProps.src && (\n <Text\n as='span'\n appearance='caption'\n size='inherit'\n color='inherit'\n lineHeight={1}\n marginTop={1}\n transform='uppercase'\n {...textProps}\n >\n {abbreviateCaption(text || restProps.title || '')}\n </Text>\n ))}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => (props.preset === 'brand' ? SIZES : SIZES_DEFAULT),\n }\n)\n\nexport { Avatar }\n"],"names":["Avatar","withMergedProps","forwardRef","props","ref","_SIZES_MAPPING_RULES$","size","textProps","borderRadius","children","text","restProps","_excluded","sizeMapped","preset","SIZES_MAPPING_RULES","_jsx","Styled.Root","loading","Skeleton","as","width","height","_Fragment","src","Text","_objectSpread","appearance","color","lineHeight","marginTop","transform","abbreviateCaption","title","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"ymBAsBMA,IAAAA,EAAuDC,EAC3DC,IAAYC,EAAOC,KAAQ,IAAAC,EACzB,IAAMC,KAAEA,EAAO,IAATC,UAAcA,EAAY,GAA1BC,aAA8BA,EAAe,MAA7CC,SAAoDA,EAApDC,KAA8DA,GAAuBP,EAAdQ,IAAcR,EAA3FS,GAEA,IAAMC,EACY,iBAATP,GAA2C,YAArBK,EAAUG,QAAiC,OAATR,EAE3DA,EAFJ,QAAAD,EACIU,EAAoBT,UAAAA,IADxBD,EAAAA,EACiCC,EAGnC,OACEU,EAACC,SAAgBN,GAAjB,GAAA,CAA4BL,KAAMO,EAAYL,aAAcA,EAAcJ,IAAKA,EAA/EK,SACGE,EAAUO,QACTF,EAACG,EAAD,CAAUC,GAAG,OAAOC,MAAM,OAAOC,OAAO,OAAOd,aAAa,YAE5DQ,EAAAO,EAAA,CAAAd,SACGA,MAAAA,EAAAA,GACGE,EAAUa,KACVR,EAACS,EAADC,EAAAA,EAAA,CACEN,GAAG,OACHO,WAAW,UACXrB,KAAK,UACLsB,MAAM,UACNC,WAAY,EACZC,UAAW,EACXC,UAAU,aACNxB,GARN,GAAA,CAAAE,SAUGuB,EAAkBtB,GAAQC,EAAUsB,OAAS,eAQ9D,CACEC,YAhDmB,SAiDnBC,MAAQhC,GAA4B,UAAjBA,EAAMW,OAAqBsB,EAAQC"}
@@ -0,0 +1,2 @@
1
+ import r from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as o}from'react';import{withMergedProps as t}from'../../hocs/withMergedProps.js';import{Text as e}from'../Text/Text.js';import{Icon as s}from'../Icon/Icon.js';import'../Icon/icons.js';import{Avatar as a}from'../Avatar/Avatar.js';import{Indicator as n}from'../Indicator/Indicator.js';import{IconButton as p}from'../IconButton/IconButton.js';import{SIZES as c}from'./constants.js';import{Root as d,Content as m}from'./style.js';import{jsx as l,jsxs as z,Fragment as f}from'react/jsx-runtime';var h=["size","textProps","captionProps","iconProps","avatarProps","indicatorProps","discardButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","text","caption","icon"];var v=t(o(((o,t)=>{var{size:c="m",textProps:v={},captionProps:P={},iconProps:u={},avatarProps:b={},indicatorProps:j={},discardButtonProps:x={},sizeXXS:y,sizeXS:S,sizeS:X,sizeM:I,sizeL:g,sizeXL:B,children:C,text:L,caption:A,icon:M}=o,k=i(o,h);var w='div';var T;k.onClick&&(w='button'),x.onClick&&(w='div'),'button'===w&&(T='button'),k.type&&(T=k.type);var H={size:c,sizeXXS:y,sizeXS:S,sizeS:X,sizeM:I,sizeL:g,sizeXL:B};var[R,q]=Array.isArray(M)?M:[M];var E={as:'span',appearance:'body',size:'inherit',color:'inherit',lineHeight:A?1.3:1};var F={as:'span',appearance:'body',size:.75,sizeUnits:'em',color:'inherit',lineHeight:1};var N={icon:'close',square:!0,disabled:k.disabled};return l(d,r(r(r({},k),H),{},{as:w,type:T,ref:t,children:'function'==typeof C?C({textProps:E,captionProps:F,discardButtonProps:N}):z(f,{children:[R&&l(s,r({preset:"brand",name:'string'==typeof R?R:void 0,icon:'string'!=typeof R?R:void 0},u)),(b.src||b.text)&&l(a,r(r({},H),{},{preset:"brand"},b)),z(m,{children:[l(e,r(r(r({},E),v),{},{children:null!=C?C:L})),A&&l(e,r(r(r({},F),P),{},{children:A}))]}),(j.children||j.text)&&l(n,r(r({},H),j)),q&&l(s,r({preset:"brand",name:'string'==typeof q?q:void 0,icon:'string'!=typeof q?q:void 0},u)),x.onClick&&l(p,r(r(r({},H),N),x))]})}))})),{displayName:'Chip',sizes:c});export{v as Chip};
2
+ //# sourceMappingURL=Chip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chip.js","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Avatar } from 'components/Avatar'\nimport { Indicator } from 'components/Indicator'\nimport { IconButton } from 'components/IconButton'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { ChipProps } from './types'\n\nconst COMPONENT_NAME = 'Chip'\n\n/**\n *\n * Component accepts all root HTML attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [ChipProps](https://github.com/foxford/ui/blob/master/src/components/Chip/types.ts)\n */\nconst Chip: React.ForwardRefExoticComponent<ChipProps> = withMergedProps<ChipProps>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n textProps = {},\n captionProps = {},\n iconProps = {},\n avatarProps = {},\n indicatorProps = {},\n discardButtonProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n children,\n text,\n caption,\n icon,\n ...restProps\n } = props\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let rootNode: any = 'div'\n\n if (restProps.onClick) rootNode = 'button'\n if (discardButtonProps.onClick) rootNode = 'div'\n\n let rootType: ChipProps['type']\n\n if (rootNode === 'button') rootType = 'button'\n if (restProps.type) rootType = restProps.type\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const textBaseProps: TextProps = {\n as: 'span',\n appearance: 'body',\n size: 'inherit',\n color: 'inherit',\n lineHeight: caption ? 1.3 : 1,\n }\n\n const captionBaseProps: TextProps = {\n as: 'span',\n appearance: 'body',\n size: 0.75,\n sizeUnits: 'em',\n color: 'inherit',\n lineHeight: 1,\n }\n\n const discardButtonBaseProps: IconButtonProps = {\n icon: 'close',\n square: true,\n disabled: restProps.disabled,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} as={rootNode} type={rootType} ref={ref}>\n {typeof children === 'function' ? (\n children({\n textProps: textBaseProps,\n captionProps: captionBaseProps,\n discardButtonProps: discardButtonBaseProps,\n })\n ) : (\n <>\n {before && (\n <Icon\n preset='brand'\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconProps}\n />\n )}\n {(avatarProps.src || avatarProps.text) && <Avatar {...sizeProps} preset='brand' {...avatarProps} />}\n <Styled.Content>\n <Text {...textBaseProps} {...textProps}>\n {children ?? text}\n </Text>\n {caption && (\n <Text {...captionBaseProps} {...captionProps}>\n {caption}\n </Text>\n )}\n </Styled.Content>\n {(indicatorProps.children || indicatorProps.text) && <Indicator {...sizeProps} {...indicatorProps} />}\n {after && (\n <Icon\n preset='brand'\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconProps}\n />\n )}\n {discardButtonProps.onClick && (\n <IconButton {...sizeProps} {...discardButtonBaseProps} {...discardButtonProps} />\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Chip }\n"],"names":["Chip","withMergedProps","forwardRef","props","ref","size","textProps","captionProps","iconProps","avatarProps","indicatorProps","discardButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","text","caption","icon","restProps","_objectWithoutProperties","_excluded","rootNode","rootType","onClick","type","sizeProps","before","after","Array","isArray","textBaseProps","as","appearance","color","lineHeight","captionBaseProps","sizeUnits","discardButtonBaseProps","square","disabled","_jsx","Styled.Root","_jsxs","_Fragment","Icon","_objectSpread","preset","name","undefined","src","Avatar","Styled.Content","Text","Indicator","IconButton","displayName","sizes","SIZES"],"mappings":"+yBAyBMA,IAAAA,EAAmDC,EACvDC,GAAW,CAACC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,UAEJA,EAAY,GAFRC,aAGJA,EAAe,GAHXC,UAIJA,EAAY,GAJRC,YAKJA,EAAc,GALVC,eAMJA,EAAiB,GANbC,mBAOJA,EAAqB,GAPjBC,QAQJA,EARIC,OASJA,EATIC,MAUJA,EAVIC,MAWJA,EAXIC,MAYJA,EAZIC,OAaJA,EAbIC,SAcJA,EAdIC,KAeJA,EAfIC,QAgBJA,EAhBIC,KAiBJA,GAEElB,EADCmB,EAlBLC,EAmBIpB,EAnBJqB,GAsBA,IAAIC,EAAgB,MAKpB,IAAIC,EAHAJ,EAAUK,UAASF,EAAW,UAC9Bd,EAAmBgB,UAASF,EAAW,OAI1B,WAAbA,IAAuBC,EAAW,UAClCJ,EAAUM,OAAMF,EAAWJ,EAAUM,MAEzC,IAAMC,EAAY,CAChBxB,KAAAA,EACAO,QAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,OAAAA,GAGF,IAAOa,EAAQC,GAASC,MAAMC,QAAQZ,GAAQA,EAAO,CAACA,GAEtD,IAAMa,EAA2B,CAC/BC,GAAI,OACJC,WAAY,OACZ/B,KAAM,UACNgC,MAAO,UACPC,WAAYlB,EAAU,IAAM,GAG9B,IAAMmB,EAA8B,CAClCJ,GAAI,OACJC,WAAY,OACZ/B,KAAM,IACNmC,UAAW,KACXH,MAAO,UACPC,WAAY,GAGd,IAAMG,EAA0C,CAC9CpB,KAAM,QACNqB,UACAC,SAAUrB,EAAUqB,UAGtB,OACEC,EAACC,EAAgBvB,EAAAA,EAAAA,EAAAA,GAAAA,GAAeO,GAAhC,GAAA,CAA2CM,GAAIV,EAAUG,KAAMF,EAAUtB,IAAKA,EAA9Ec,SACuB,mBAAbA,EACNA,EAAS,CACPZ,UAAW4B,EACX3B,aAAcgC,EACd5B,mBAAoB8B,IAGtBK,EAAAC,EAAA,CAAA7B,SACGY,CAAAA,GACCc,EAACI,EAADC,EAAA,CACEC,OAAO,QACPC,KAAwB,iBAAXrB,EAAsBA,OAASsB,EAC5C/B,KAAwB,iBAAXS,EAAsBA,OAASsB,GACxC5C,KAGNC,EAAY4C,KAAO5C,EAAYU,OAASyB,EAACU,SAAWzB,GAAZ,GAAA,CAAuBqB,OAAO,SAAYzC,IACpFqC,EAACS,EAAD,CAAArC,SAAA,CACE0B,EAACY,EAAStB,EAAAA,EAAAA,EAAAA,GAAAA,GAAmB5B,GAA7B,GAAA,CAAAY,SACGA,MAAAA,EAAAA,EAAYC,KAEdC,GACCwB,EAACY,EAASjB,EAAAA,EAAAA,EAAAA,GAAAA,GAAsBhC,GAAhC,GAAA,CAAAW,SACGE,SAILV,EAAeQ,UAAYR,EAAeS,OAASyB,EAACa,EAADR,EAAAA,EAAA,GAAepB,GAAenB,IAClFqB,GACCa,EAACI,EAADC,EAAA,CACEC,OAAO,QACPC,KAAuB,iBAAVpB,EAAqBA,OAAAA,EAClCV,KAAuB,iBAAVU,EAAqBA,OAAAA,GAC9BvB,IAGPG,EAAmBgB,SAClBiB,EAACc,WAAe7B,GAAeY,GAA4B9B,aAOvE,CACEgD,YAhImB,OAiInBC,MAAOC"}
@@ -0,0 +1,2 @@
1
+ var i={xxxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},l:{fontSize:18,minHeight:40,padding:8,borderRadius:8},m:{fontSize:16,minHeight:36,padding:7,borderRadius:8},s:{fontSize:14,minHeight:32,padding:6,borderRadius:7},xs:{fontSize:12,minHeight:20,padding:4,borderRadius:4},xxs:{fontSize:12,minHeight:20,padding:4,borderRadius:4},xxxs:{fontSize:12,minHeight:20,padding:4,borderRadius:4}};export{i as SIZES};
2
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n xxxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n l: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n m: {\n fontSize: 16,\n minHeight: 36,\n padding: 7,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minHeight: 32,\n padding: 6,\n borderRadius: 7,\n },\n xs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 4,\n },\n xxs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 4,\n },\n xxxs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 4,\n },\n}\n"],"names":["SIZES","xxxl","fontSize","minHeight","padding","borderRadius","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBC,IAAK,CACHJ,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBE,GAAI,CACFL,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBG,EAAG,CACDN,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBI,EAAG,CACDP,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBK,EAAG,CACDR,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBM,GAAI,CACFT,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBO,IAAK,CACHV,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBQ,KAAM,CACJX,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc"}
@@ -0,0 +1,2 @@
1
+ import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import t from'tinycolor2';import{createShouldForwardProp as l}from'../../shared/utils/style.js';import{responsiveSize as n}from'../../mixins/responsive-size.js';import{responsiveMargin as a}from'../../mixins/responsive-margin.js';import{focus as c}from'../../mixins/focus.js';var s=l((o=>!['outline','black','active'].includes(o)));var i=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n &:hover {\n color: ").concat(o.colorHover,";\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n }\n &:disabled {\n color: ").concat(o.colorDisabled,";\n background-color: ").concat(o.backgroundColorDisabled,";\n border-color: ").concat(o.borderColorDisabled,";\n }\n");var d={default:{primary:{default:e(["",""],(r=>i(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-brand-primary-100'],borderColor:r.theme.colors.transparent,colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-brand-primary-500']).lighten(5).toString():t(r.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:r.theme.colors.transparent,colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.active?r.theme.colors['bg-disabled-small']:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors.transparent},r.palette)))),black:e(["",""],(r=>i(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-contrast']:r.theme.colors['bg-onmain-tertiary'],borderColor:r.theme.colors.transparent,colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-onmain-contrast']).lighten(11).toString():t(r.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:r.theme.colors.transparent,colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.active?r.theme.colors['bg-disabled-small']:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors.transparent},r.palette))))},secondary:{default:e(["",""],(r=>i(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-brand-primary-400'],colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-brand-primary-100']).lighten(2).toString():t(r.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-brand-primary-400'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['border-disabled']},r.palette)))),black:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-secondary']:r.theme.colors['bg-onmain-tertiary'],borderColor:r.active?r.theme.colors['border-onmain-contrast']:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-onmain-secondary']).lighten(11).toString():t(r.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:r.active?r.theme.colors['border-onmain-contrast']:r.theme.colors['border-onmain-default-large'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['border-disabled']},r.palette))))},outline:{default:e(["",""],(r=>i(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors.transparent,borderColor:r.active?r.theme.colors.transparent:r.theme.colors['border-onmain-default-large'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-brand-primary-500']).lighten(5).toString():r.theme.colors['content-oncolor-hover'],borderColorHover:r.active?r.theme.colors.transparent:r.theme.colors['border-onmain-default-large'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.active?r.theme.colors['bg-disabled-small']:r.theme.colors.transparent,borderColorDisabled:r.active?r.theme.colors.transparent:r.theme.colors['border-disabled']},r.palette)))),black:e(["",""],(r=>i(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-contrast']:r.theme.colors.transparent,borderColor:r.active?r.theme.colors.transparent:r.theme.colors['border-onmain-default-large'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-onmain-contrast']).lighten(11).toString():r.theme.colors['content-oncolor-hover'],borderColorHover:r.active?r.theme.colors.transparent:r.theme.colors['border-onmain-default-large'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.active?r.theme.colors['bg-disabled-small']:r.theme.colors.transparent,borderColorDisabled:r.active?r.theme.colors.transparent:r.theme.colors['border-disabled']},r.palette))))}},contrast:{primary:{default:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-oncolor-primary']:r.theme.colors['bg-brand-primary-100'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-oncolor-primary']).darken(11).toString():t(r.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:r.theme.colors.transparent,colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.theme.colors['bg-oncolor-disabled'],borderColorDisabled:r.theme.colors.transparent},r.palette)))),black:e(["",""],(r=>i(o({color:r.active?r.theme.colors['content-oncolor-constant']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-oncolor-primary']:r.theme.colors['bg-oncolor-tertiary'],borderColor:r.theme.colors.transparent,colorHover:r.active?r.theme.colors['content-oncolor-constant']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-oncolor-primary']).darken(11).toString():t(r.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:r.theme.colors.transparent,colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.theme.colors['bg-oncolor-disabled'],borderColorDisabled:r.theme.colors.transparent},r.palette))))},secondary:{default:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-oncolor-secondary']:r.theme.colors['bg-oncolor-tertiary'],borderColor:r.active?r.theme.colors['border-oncolor-default']:r.theme.colors['border-oncolor-default-large'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():t(r.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:r.active?r.theme.colors['border-oncolor-default']:r.theme.colors['border-oncolor-default-large'],colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.theme.colors['bg-oncolor-disabled'],borderColorDisabled:r.theme.colors['border-oncolor-disabled']},r.palette)))),black:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-oncolor-secondary']:r.theme.colors['bg-oncolor-tertiary'],borderColor:r.active?r.theme.colors['border-oncolor-default']:r.theme.colors['border-oncolor-default-large'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():t(r.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:r.active?r.theme.colors['border-oncolor-default']:r.theme.colors['border-oncolor-default-large'],colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.theme.colors['bg-oncolor-disabled'],borderColorDisabled:r.theme.colors['border-oncolor-disabled']},r.palette))))},outline:{default:e(["",""],(r=>i(o({color:r.active?r.theme.colors['content-oncolor-constant']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-oncolor-primary']:r.theme.colors.transparent,borderColor:r.active?r.theme.colors.transparent:r.theme.colors['border-oncolor-default'],colorHover:r.active?r.theme.colors['content-oncolor-constant']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-oncolor-primary']).darken(11).toString():r.theme.colors['content-onmain-hover'],borderColorHover:r.active?r.theme.colors.transparent:r.theme.colors['border-oncolor-default'],colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.active?r.theme.colors['bg-oncolor-disabled']:r.theme.colors.transparent,borderColorDisabled:r.active?r.theme.colors.transparent:r.theme.colors['border-oncolor-disabled']},r.palette)))),black:e(["",""],(r=>i(o({color:r.active?r.theme.colors['content-oncolor-constant']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-oncolor-primary']:r.theme.colors.transparent,borderColor:r.active?r.theme.colors.transparent:r.theme.colors['border-oncolor-default'],colorHover:r.active?r.theme.colors['content-oncolor-constant']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?t(r.theme.colors['bg-oncolor-primary']).darken(11).toString():r.theme.colors['content-onmain-hover'],borderColorHover:r.active?r.theme.colors.transparent:r.theme.colors['border-oncolor-default'],colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.active?r.theme.colors['bg-oncolor-disabled']:r.theme.colors.transparent,borderColorDisabled:r.active?r.theme.colors.transparent:r.theme.colors['border-oncolor-disabled']},r.palette))))}}};var m=r.div.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),padding:'0.4em',borderRadius:'0.2em'})}).withConfig({componentId:"fox-ui__sc-ndhge9-0"})([""," "," "," "," ",""],(o=>{var r='default';return'button'===o.as&&(r='pointer'),'button'===o.as&&o.disabled&&(r='not-allowed'),"\n box-sizing: border-box;\n appearance: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n width: max-content;\n flex-shrink: 0;\n cursor: ".concat(r,";\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > *:only-child {\n margin-right: 0.4em;\n margin-left: 0.4em;\n }\n ")}),(o=>{var r=o.contrast?d.contrast:d.default;var e=r.primary;return o.secondary&&(e=r.secondary),o.outline&&(e=r.outline),o.black?e.black:e.default}),c,n,a);var b=r.span.withConfig({componentId:"fox-ui__sc-ndhge9-1"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;text-align:start;"]);export{b as Content,m as Root};
2
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Chip/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledChipProps, ChipPalette } from './types'\n\nconst shouldForwardChipProp = createShouldForwardProp((propKey) => !['outline', 'black', 'active'].includes(propKey))\n\nconst template = (palette: ChipPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-100']).lighten(2).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-secondary']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-secondary']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-brand-primary-500'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-onmain-contrast'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n contrast: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Root = styled.div\n .withConfig<StyledChipProps>({\n shouldForwardProp: shouldForwardChipProp,\n })\n .attrs<StyledChipProps>(<Required<Pick<StyledChipProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.4em',\n borderRadius: '0.2em',\n }),\n })`\n ${(props) => {\n let cursor = 'default'\n\n if (props.as === 'button') cursor = 'pointer'\n if (props.as === 'button' && props.disabled) cursor = 'not-allowed'\n\n return `\n box-sizing: border-box;\n appearance: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n width: max-content;\n flex-shrink: 0;\n cursor: ${cursor};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > *:only-child {\n margin-right: 0.4em;\n margin-left: 0.4em;\n }\n `\n }}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.outline) schemaVariant = schema.outline\n\n return props.black ? schemaVariant.black : schemaVariant.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n text-align: start;\n`\n"],"names":["shouldForwardChipProp","createShouldForwardProp","propKey","includes","template","palette","color","concat","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","default","primary","css","props","_objectSpread","active","theme","colors","transparent","tinycolor","lighten","toString","darken","black","secondary","outline","contrast","setAlpha","Root","styled","div","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","borderRadius","componentId","cursor","as","disabled","schema","schemaVariant","focus","responsiveSize","responsiveMargin","Content","span"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import o from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as e}from'../../hocs/withMergedProps.js';import{Icon as s}from'../Icon/Icon.js';import'../Icon/icons.js';import{SIZES_SQUARE as i,SIZES as n}from'./constants.js';import{Root as p}from'./style.js';import{jsx as a}from'react/jsx-runtime';var m=["size","type","iconProps","icon"];var c=e(t(((t,e)=>{var{size:i="m",type:n="button",iconProps:c={},icon:f}=t,d=r(t,m);return a(p,o(o({},d),{},{size:i,type:n,ref:e,children:a(s,o({preset:"brand",name:'string'==typeof f?f:void 0,icon:'string'!=typeof f?f:void 0},c))}))})),{displayName:'IconButton',sizes:o=>o.square?i:n});export{c as IconButton};
2
+ //# sourceMappingURL=IconButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { SIZES, SIZES_SQUARE } from './constants'\nimport * as Styled from './style'\nimport type { IconButtonProps } from './types'\n\nconst COMPONENT_NAME = 'IconButton'\n\n/**\n *\n * Component accepts all \\<button\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [IconButtonProps](https://github.com/foxford/ui/blob/master/src/components/IconButton/types.ts)\n */\nconst IconButton: React.ForwardRefExoticComponent<IconButtonProps> = withMergedProps<\n IconButtonProps,\n HTMLButtonElement\n>(\n forwardRef((props, ref) => {\n const { size = 'm', type = 'button', iconProps = {}, icon, ...restProps } = props\n\n return (\n <Styled.Root {...restProps} size={size} type={type} ref={ref}>\n <Icon\n preset='brand'\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n {...iconProps}\n />\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => (props.square ? SIZES_SQUARE : SIZES),\n }\n)\n\nexport { IconButton }\n"],"names":["IconButton","withMergedProps","forwardRef","props","ref","size","type","iconProps","icon","restProps","_excluded","_jsx","Styled.Root","children","Icon","_objectSpread","preset","name","displayName","sizes","square","SIZES_SQUARE","SIZES"],"mappings":"icAmBMA,IAAAA,EAA+DC,EAInEC,GAAW,CAACC,EAAOC,KACjB,IAAMC,KAAEA,EAAO,IAATC,KAAcA,EAAO,SAArBC,UAA+BA,EAAY,GAA3CC,KAA+CA,GAAuBL,EAAdM,IAAcN,EAA5EO,GAEA,OACEC,EAACC,SAAgBH,GAAjB,GAAA,CAA4BJ,KAAMA,EAAMC,KAAMA,EAAMF,IAAKA,EAAzDS,SACEF,EAACG,EAADC,EAAA,CACEC,OAAO,QACPC,KAAsB,iBAATT,EAAoBA,SACjCA,KAAsB,iBAATA,EAAoBA,OAAAA,GAC7BD,UAKZ,CACEW,YA/BmB,aAgCnBC,MAAQhB,GAAWA,EAAMiB,OAASC,EAAeC"}
@@ -0,0 +1,2 @@
1
+ var i={xxxl:{width:40,height:40,fontSize:28,borderRadius:'50%'},xxl:{width:40,height:40,fontSize:28,borderRadius:'50%'},xl:{width:32,height:32,fontSize:24,borderRadius:'50%'},l:{width:28,height:28,fontSize:20,borderRadius:'50%'},m:{width:22,height:22,fontSize:18,borderRadius:'50%'},s:{width:20,height:20,fontSize:16,borderRadius:'50%'},xs:{width:18,height:18,fontSize:14,borderRadius:'50%'},xxs:{width:16,height:16,fontSize:12,borderRadius:'50%'},xxxs:{width:16,height:16,fontSize:12,borderRadius:'50%'}};var e={xxxl:{width:40,height:40,fontSize:28,borderRadius:8},xxl:{width:40,height:40,fontSize:28,borderRadius:8},xl:{width:32,height:32,fontSize:24,borderRadius:7},l:{width:28,height:28,fontSize:20,borderRadius:6},m:{width:22,height:22,fontSize:18,borderRadius:5},s:{width:20,height:20,fontSize:16,borderRadius:4},xs:{width:18,height:18,fontSize:14,borderRadius:4},xxs:{width:16,height:16,fontSize:12,borderRadius:4},xxxs:{width:16,height:16,fontSize:12,borderRadius:4}};export{i as SIZES,e as SIZES_SQUARE};
2
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/components/IconButton/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n xxxl: {\n width: 40,\n height: 40,\n fontSize: 28,\n borderRadius: '50%',\n },\n xxl: {\n width: 40,\n height: 40,\n fontSize: 28,\n borderRadius: '50%',\n },\n xl: {\n width: 32,\n height: 32,\n fontSize: 24,\n borderRadius: '50%',\n },\n l: {\n width: 28,\n height: 28,\n fontSize: 20,\n borderRadius: '50%',\n },\n m: {\n width: 22,\n height: 22,\n fontSize: 18,\n borderRadius: '50%',\n },\n s: {\n width: 20,\n height: 20,\n fontSize: 16,\n borderRadius: '50%',\n },\n xs: {\n width: 18,\n height: 18,\n fontSize: 14,\n borderRadius: '50%',\n },\n xxs: {\n width: 16,\n height: 16,\n fontSize: 12,\n borderRadius: '50%',\n },\n xxxs: {\n width: 16,\n height: 16,\n fontSize: 12,\n borderRadius: '50%',\n },\n}\n\nexport const SIZES_SQUARE = {\n xxxl: {\n width: 40,\n height: 40,\n fontSize: 28,\n borderRadius: 8,\n },\n xxl: {\n width: 40,\n height: 40,\n fontSize: 28,\n borderRadius: 8,\n },\n xl: {\n width: 32,\n height: 32,\n fontSize: 24,\n borderRadius: 7,\n },\n l: {\n width: 28,\n height: 28,\n fontSize: 20,\n borderRadius: 6,\n },\n m: {\n width: 22,\n height: 22,\n fontSize: 18,\n borderRadius: 5,\n },\n s: {\n width: 20,\n height: 20,\n fontSize: 16,\n borderRadius: 4,\n },\n xs: {\n width: 18,\n height: 18,\n fontSize: 14,\n borderRadius: 4,\n },\n xxs: {\n width: 16,\n height: 16,\n fontSize: 12,\n borderRadius: 4,\n },\n xxxs: {\n width: 16,\n height: 16,\n fontSize: 12,\n borderRadius: 4,\n },\n}\n"],"names":["SIZES","xxxl","width","height","fontSize","borderRadius","xxl","xl","l","m","s","xs","xxs","xxxs","SIZES_SQUARE"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBC,IAAK,CACHJ,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBE,GAAI,CACFL,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBG,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBI,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBK,EAAG,CACDR,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBM,GAAI,CACFT,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBO,IAAK,CACHV,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBQ,KAAM,CACJX,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,QAIX,IAAMS,EAAe,CAC1Bb,KAAM,CACJC,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBC,IAAK,CACHJ,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBE,GAAI,CACFL,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBG,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBI,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBK,EAAG,CACDR,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBM,GAAI,CACFT,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBO,IAAK,CACHV,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBQ,KAAM,CACJX,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc"}
@@ -0,0 +1,2 @@
1
+ import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{responsiveSize as t}from'../../mixins/responsive-size.js';import{responsiveMargin as c}from'../../mixins/responsive-margin.js';import{focus as a}from'../../mixins/focus.js';import{createShouldForwardProp as l}from'../../shared/utils/style.js';var i=l((o=>!['square'].includes(o)));var s=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n &:hover {\n color: ").concat(o.colorHover,";\n background-color: ").concat(o.backgroundColorHover,";\n }\n &:active {\n color: ").concat(o.colorActive,";\n background-color: ").concat(o.backgroundColorActive,";\n }\n &:disabled {\n color: ").concat(o.colorDisabled,";\n background-color: ").concat(o.backgroundColorDisabled,";\n }\n");var d={default:{primary:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-tertiary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['bg-oncolor-hover'],colorActive:r.theme.colors['content-onmain-primary'],backgroundColorActive:n(r.theme.colors['bg-oncolor-hover']).setAlpha(.12).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors.transparent},r.palette)))),secondary:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:n(r.theme.colors['bg-brand-primary-100']).darken(5).toString(),colorActive:r.theme.colors['content-onmain-primary'],backgroundColorActive:n(r.theme.colors['bg-brand-primary-100']).darken(7).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large']},r.palette))))},contrast:{primary:e(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-tertiary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-oncontrast-hover'],colorActive:r.theme.colors['content-oncolor-primary'],backgroundColorActive:n(r.theme.colors['bg-oncontrast-hover']).setAlpha(.12).toString(),colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.theme.colors.transparent},r.palette)))),secondary:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-inverse'],backgroundColor:r.theme.colors['bg-contrast-active'],colorHover:r.theme.colors['content-onmain-inverse'],backgroundColorHover:n(r.theme.colors['bg-contrast-active']).lighten(7).toString(),colorActive:r.theme.colors['content-onmain-inverse'],backgroundColorActive:n(r.theme.colors['bg-contrast-active']).lighten(11).toString(),colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.theme.colors['bg-oncolor-disabled']},r.palette))))}};var m=r.button.withConfig({shouldForwardProp:i}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({width:'1em',height:'1em',fontSize:'string'==typeof r?r:"".concat(r).concat(e),borderRadius:o.square?'0.2em':'50%'})}))).withConfig({componentId:"fox-ui__sc-y4pwgp-0"})([""," "," "," "," ",""],(o=>"\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ".concat(o.disabled?'not-allowed':'pointer',";\n transition-property: background-color; \n transition-duration: 250ms;\n ")),(o=>{var r=o.contrast?d.contrast:d.default;return o.secondary?r.secondary:r.primary}),a,t,c);export{m as Root};
2
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type { IconButtonPalette, StyledIconButtonProps } from './types'\n\nconst shouldForwardIconButtonProp = createShouldForwardProp((propKey) => !['square'].includes(propKey))\n\nconst template = (palette: IconButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n }\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(7).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncontrast-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-inverse'],\n backgroundColor: props.theme.colors['bg-contrast-active'],\n colorHover: props.theme.colors['content-onmain-inverse'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-contrast-active']).lighten(7).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-inverse'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-contrast-active']).lighten(11).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledIconButtonProps>({\n shouldForwardProp: shouldForwardIconButtonProp,\n })\n .attrs<StyledIconButtonProps>(\n (props): Required<Pick<StyledIconButtonProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n width: '1em',\n height: '1em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n ${(props) => `\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.secondary) return schema.secondary\n\n return schema.primary\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardIconButtonProp","createShouldForwardProp","propKey","includes","template","palette","concat","color","backgroundColor","colorHover","backgroundColorHover","colorActive","backgroundColorActive","colorDisabled","backgroundColorDisabled","COLOR_SCHEMA","default","primary","css","props","_objectSpread","theme","colors","transparent","tinycolor","setAlpha","toString","secondary","darken","contrast","lighten","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","width","height","fontSize","borderRadius","square","componentId","disabled","schema","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
package/dts/index.d.ts CHANGED
@@ -244,6 +244,7 @@ declare enum BaseColorNames {
244
244
  'border-focus' = "border-focus",
245
245
  'border-oncolor-disabled' = "border-oncolor-disabled",
246
246
  'border-oncolor-default' = "border-oncolor-default",
247
+ 'border-oncolor-default-large' = "border-oncolor-default-large",
247
248
  'bg-onmain-main' = "bg-onmain-main",
248
249
  'bg-onmain-primary' = "bg-onmain-primary",
249
250
  'bg-onmain-secondary' = "bg-onmain-secondary",
@@ -466,6 +467,7 @@ declare const ColorNames: {
466
467
  'border-focus': (typeof BaseColorNames)["border-focus"];
467
468
  'border-oncolor-disabled': (typeof BaseColorNames)["border-oncolor-disabled"];
468
469
  'border-oncolor-default': (typeof BaseColorNames)["border-oncolor-default"];
470
+ 'border-oncolor-default-large': (typeof BaseColorNames)["border-oncolor-default-large"];
469
471
  'bg-onmain-main': (typeof BaseColorNames)["bg-onmain-main"];
470
472
  'bg-onmain-primary': (typeof BaseColorNames)["bg-onmain-primary"];
471
473
  'bg-onmain-secondary': (typeof BaseColorNames)["bg-onmain-secondary"];
@@ -2260,10 +2262,113 @@ ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
2260
2262
  *
2261
2263
  * Exposed "ref" attached to root node.
2262
2264
  *
2263
- * See full [AvatarProps](https://github.com/foxford/ui/blob/master/src/components/AvatarProps/types.ts)
2265
+ * See full [AvatarProps](https://github.com/foxford/ui/blob/master/src/components/Avatar/types.ts)
2264
2266
  */
2265
2267
  declare const Avatar: React.ForwardRefExoticComponent<AvatarProps>;
2266
2268
 
2269
+ declare type IconButtonPalette = {
2270
+ color: CSSColor;
2271
+ backgroundColor: CSSColor;
2272
+ colorHover: CSSColor;
2273
+ backgroundColorHover: CSSColor;
2274
+ colorActive: CSSColor;
2275
+ backgroundColorActive: CSSColor;
2276
+ colorDisabled: CSSColor;
2277
+ backgroundColorDisabled: CSSColor;
2278
+ };
2279
+ interface IconButtonProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
2280
+ /** Custom colors */
2281
+ palette?: Partial<Record<keyof IconButtonPalette, Color>>;
2282
+ /** Icon to display */
2283
+ icon?: JSX.Element | IconName;
2284
+ /** Props for icon component */
2285
+ iconProps?: IconProps;
2286
+ /** Shape variant */
2287
+ square?: boolean;
2288
+ /** Appearance variant */
2289
+ primary?: boolean;
2290
+ /** Appearance variant */
2291
+ secondary?: boolean;
2292
+ /** Appearance variant */
2293
+ contrast?: boolean;
2294
+ }
2295
+
2296
+ /**
2297
+ *
2298
+ * Component accepts all \<button\> attributes.
2299
+ *
2300
+ * Responsive "size", "margin" props are supported.
2301
+ *
2302
+ * Exposed "ref" attached to root node.
2303
+ *
2304
+ * See full [IconButtonProps](https://github.com/foxford/ui/blob/master/src/components/IconButton/types.ts)
2305
+ */
2306
+ declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps>;
2307
+
2308
+ declare type ChipPalette = {
2309
+ color: CSSColor;
2310
+ backgroundColor: CSSColor;
2311
+ borderColor: CSSColor;
2312
+ colorHover: CSSColor;
2313
+ backgroundColorHover: CSSColor;
2314
+ borderColorHover: CSSColor;
2315
+ colorDisabled: CSSColor;
2316
+ backgroundColorDisabled: CSSColor;
2317
+ borderColorDisabled: CSSColor;
2318
+ };
2319
+ interface ChipProps extends ResponsiveSizeProps, ResponsiveMarginProps, React.RefAttributes<HTMLElement>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children'> {
2320
+ /** Custom colors */
2321
+ palette?: Partial<Record<keyof ChipPalette, Color>>;
2322
+ /** Main text content or render function */
2323
+ children?: React.ReactNode | ((props: {
2324
+ textProps: TextProps;
2325
+ captionProps: TextProps;
2326
+ discardButtonProps: IconButtonProps;
2327
+ }) => React.ReactNode);
2328
+ /** Main text (alternative to children) */
2329
+ text?: React.ReactNode;
2330
+ /** Props for main text component */
2331
+ textProps?: TextProps;
2332
+ /** Additional text */
2333
+ caption?: React.ReactNode;
2334
+ /** Props for caption text component */
2335
+ captionProps?: TextProps;
2336
+ /** Icons before and after content */
2337
+ icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
2338
+ /** Props for icon components */
2339
+ iconProps?: IconProps;
2340
+ /** Props for avatar component */
2341
+ avatarProps?: AvatarProps;
2342
+ /** Props for indicator component */
2343
+ indicatorProps?: IndicatorProps;
2344
+ /** Props for button with 'close' icon */
2345
+ discardButtonProps?: IconButtonProps;
2346
+ /** Appearance variant */
2347
+ primary?: boolean;
2348
+ /** Appearance variant */
2349
+ secondary?: boolean;
2350
+ /** Appearance variant */
2351
+ outline?: boolean;
2352
+ /** Appearance variant */
2353
+ black?: boolean;
2354
+ /** Appearance variant */
2355
+ contrast?: boolean;
2356
+ /** Appearance variant */
2357
+ active?: boolean;
2358
+ }
2359
+
2360
+ /**
2361
+ *
2362
+ * Component accepts all root HTML attributes.
2363
+ *
2364
+ * Responsive "size", "margin" props are supported.
2365
+ *
2366
+ * Exposed "ref" attached to root node.
2367
+ *
2368
+ * See full [ChipProps](https://github.com/foxford/ui/blob/master/src/components/Chip/types.ts)
2369
+ */
2370
+ declare const Chip: React.ForwardRefExoticComponent<ChipProps>;
2371
+
2267
2372
  interface Theme {
2268
2373
  breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
2269
2374
  colors: Record<keyof typeof ColorNames, CSSColor>;
@@ -2286,25 +2391,27 @@ interface Theme {
2286
2391
  name: ThemeName;
2287
2392
  components?: {
2288
2393
  Alert?: AlertProps;
2394
+ Anchor?: AnchorProps;
2289
2395
  Arrow?: ArrowProps;
2396
+ ArrowBadge?: ArrowBadgeProps;
2397
+ Avatar?: AvatarProps;
2398
+ Badge?: BadgeProps;
2290
2399
  Button?: ButtonProps;
2291
2400
  Checkbox?: CheckboxProps;
2292
- Textarea?: TextareaProps;
2293
- Text?: TextProps;
2294
- ArrowBadge?: ArrowBadgeProps;
2295
- 'Text.Heading'?: TextHeadingProps;
2401
+ Chip?: ChipProps;
2402
+ IconButton?: IconButtonProps;
2403
+ Indicator?: IndicatorProps;
2404
+ ListItem?: ListItemProps;
2405
+ Popover?: PopoverProps;
2406
+ PopoverComponent?: PopoverComponentProps;
2407
+ Skeleton?: SkeletonProps;
2296
2408
  Switcher?: SwitcherProps;
2297
2409
  Tab?: TabProps;
2298
- Badge?: BadgeProps;
2299
- Anchor?: AnchorProps;
2300
- Skeleton?: SkeletonProps;
2410
+ Text?: TextProps;
2411
+ 'Text.Heading'?: TextHeadingProps;
2412
+ Textarea?: TextareaProps;
2301
2413
  Tooltip?: TooltipProps;
2302
2414
  TooltipComponent?: TooltipComponentProps;
2303
- Popover?: PopoverProps;
2304
- PopoverComponent?: PopoverComponentProps;
2305
- ListItem?: ListItemProps;
2306
- Indicator?: IndicatorProps;
2307
- Avatar?: AvatarProps;
2308
2415
  };
2309
2416
  }
2310
2417
 
@@ -3893,4 +4000,4 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
3893
4000
  */
3894
4001
  declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
3895
4002
 
3896
- export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Indicator, Input, ListItem, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
4003
+ export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, ListItem, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };