npm - @foxford/ui - Versions diffs - 2.45.0 → 2.46.0 - Mend

@foxford/ui 2.45.0 → 2.46.0

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.

Files changed (32) hide show

package/_virtual/ResizeObserver.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 'use strict';exports.__module={exports:{}};
2	+ //# sourceMappingURL=ResizeObserver.js.map

package/_virtual/ResizeObserver.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ResizeObserver.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/_virtual/ResizeObserver.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var ResizeObserver={exports:{}};export{ResizeObserver as __module};
2	+ //# sourceMappingURL=ResizeObserver.mjs.map

package/_virtual/ResizeObserver.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ResizeObserver.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/ListItem/ListItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var Icon=require('../Icon/Icon.js');const ListItem=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:i="s",borderRadius:t=0,mediaBorderRadius:s="50%",controlPosition:o="left",captionPosition:n="bottom",ellipsis:a=!0,iconProps:l={},textProps:d={},captionProps:c={},sizeXXS:p,sizeXS:u,sizeS:$,sizeM:y,sizeL:h,sizeXL:q,text:x,children:j,control:f,icon:m,media:z,caption:g,addon:b,onColored:S,disabled:I,loading:R,...v}=e;let P;let w;f&&(P='label'),v.href&&(P='a'),v.as&&(P=v.as),P||(w='button'),v.type&&(w=v.type);const L={size:i,sizeXXS:p,sizeXS:u,sizeS:$,sizeM:y,sizeL:h,sizeXL:q};const M={onColored:S,disabled:I};const T=typeof f=='object'&&typeof f.props=='object'&&f.props!==null?f.props:{};const[X,k]=Array.isArray(m)?m:[m];const A={appearance:'body',size:'inherit',color:'inherit'};const C={appearance:'body',size:.9,sizeUnits:'em',color:'inherit'};return require$$0.jsx(style.Root,{...L,...M,...v,as:P,type:w,borderRadius:t,mediaBorderRadius:s,ref:r,children:typeof j=='function'?j({textProps:A,captionProps:C}):require$$0.jsx(require$$0.Fragment,{children:require$$0.jsxs(require$$0.Fragment,R?{children:[z&&require$$0.jsx(style.Media,{children:require$$0.jsx(Skeleton.Skeleton,{width:"100%",height:"100%",borderRadius:"inherit"})}),require$$0.jsx(style.Content,{children:require$$0.jsx(Skeleton.Skeleton,{width:"100%",borderRadius:4,children:require$$0.jsx(Text.Text,{...A,...d})})})]}:{children:[f&&o==='left'&&(typeof f=='function'?f({...L,...M}):React.cloneElement(f,{...L,...M,...T})),X&&require$$0.jsx(Icon.Icon,{preset:"brand",name:typeof X=='string'?X:void 0,icon:typeof X!='string'?X:void 0,...l}),z&&require$$0.jsx(style.Media,{children:React.isValidElement(z)?z:require$$0.jsx(style.Img,{alt:"",...z})}),(j||x||g)&&require$$0.jsxs(style.Content,{children:[g&&n==='top'&&require$$0.jsx(style.Typography,{forwardedAs:"span",ellipsis:a,...C,...c,children:g}),(j||x)&&require$$0.jsx(style.Typography,{forwardedAs:"span",ellipsis:a,...A,...d,children:j??x}),g&&n==='bottom'&&require$$0.jsx(style.Typography,{forwardedAs:"span",ellipsis:a,...C,...c,children:g})]}),b,k&&require$$0.jsx(Icon.Icon,{preset:"brand",name:typeof k=='string'?k:void 0,icon:typeof k!='string'?k:void 0,...l}),f&&o==='right'&&(typeof f=='function'?f({...L,...M}):React.cloneElement(f,{...L,...M,...T}))]})})})})),{displayName:'ListItem',sizes:constants.SIZES});exports.ListItem=ListItem;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var Icon=require('../Icon/Icon.js');const ListItem=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:t="s",borderRadius:i=0,mediaBorderRadius:s="50%",controlPosition:o="left",captionPosition:n="bottom",ellipsis:a=!0,iconProps:c={},textProps:l={},captionProps:d={},sizeXXS:p,sizeXS:u,sizeS:$,sizeM:x,sizeL:h,sizeXL:q,text:j,children:y,control:m,icon:f,media:z,caption:b,addon:S,onColored:g,disabled:I,loading:R,...v}=e;let P;let T;m&&(P='label'),v.href&&(P='a'),v.as&&(P=v.as),P||(T='button'),v.type&&(T=v.type);const L={size:t,sizeXXS:p,sizeXS:u,sizeS:$,sizeM:x,sizeL:h,sizeXL:q};const M={onColored:g,disabled:I};const X=typeof m=='object'&&typeof m.props=='object'&&m.props!==null?m.props:{};const[k,w]=Array.isArray(f)?f:[f];const C={appearance:'body',size:'inherit',color:'inherit',ellipsis:a};const E={appearance:'body',size:.9,sizeUnits:'em',color:'inherit',ellipsis:a};return require$$0.jsx(style.Root,{...L,...M,...v,as:P,type:T,borderRadius:i,mediaBorderRadius:s,ref:r,children:typeof y=='function'?y({textProps:C,captionProps:E}):require$$0.jsx(require$$0.Fragment,{children:require$$0.jsxs(require$$0.Fragment,R?{children:[z&&require$$0.jsx(style.Media,{children:require$$0.jsx(Skeleton.Skeleton,{width:"100%",height:"100%",borderRadius:"inherit"})}),require$$0.jsx(style.Content,{children:require$$0.jsx(Skeleton.Skeleton,{width:"100%",borderRadius:4,children:require$$0.jsx(Text.Text,{...C,...l})})})]}:{children:[m&&o==='left'&&(typeof m=='function'?m({...L,...M}):React.cloneElement(m,{...L,...M,...X})),k&&require$$0.jsx(Icon.Icon,{preset:"brand",name:typeof k=='string'?k:void 0,icon:typeof k!='string'?k:void 0,...c}),z&&require$$0.jsx(style.Media,{children:React.isValidElement(z)?z:require$$0.jsx(style.Img,{alt:"",...z})}),(y||j||b)&&require$$0.jsxs(style.Content,{children:[b&&n==='top'&&require$$0.jsx(Text.Text,{as:"span",...E,...d,children:b}),(y||j)&&require$$0.jsx(Text.Text,{as:"span",...C,...l,children:y??j}),b&&n==='bottom'&&require$$0.jsx(Text.Text,{as:"span",...E,...d,children:b})]}),S,w&&require$$0.jsx(Icon.Icon,{preset:"brand",name:typeof w=='string'?w:void 0,icon:typeof w!='string'?w:void 0,...c}),m&&o==='right'&&(typeof m=='function'?m({...L,...M}):React.cloneElement(m,{...L,...M,...X}))]})})})})),{displayName:'ListItem',sizes:constants.SIZES});exports.ListItem=ListItem;
 //# sourceMappingURL=ListItem.js.map

package/components/ListItem/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { forwardRef, cloneElement, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\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 [ListItemProps](https://github.com/foxford/ui/blob/master/src/components/ListItem/types.ts)\n */\nconst ListItem: React.ForwardRefExoticComponent<ListItemProps> = withMergedProps<ListItemProps>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n borderRadius = 0,\n mediaBorderRadius = '50%',\n controlPosition = 'left',\n captionPosition = 'bottom',\n ellipsis = true,\n iconProps = {},\n textProps = {},\n captionProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n text,\n children,\n control,\n icon,\n media,\n caption,\n addon,\n onColored,\n disabled,\n loading,\n ...restProps\n } = props\n\n let rootNode: ListItemProps['as']\n\n if (control) rootNode = 'label'\n if (restProps.href) rootNode = 'a'\n if (restProps.as) rootNode = restProps.as\n\n let rootType: ListItemProps['type']\n\n if (!rootNode) 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 stateProps = {\n onColored,\n disabled,\n }\n\n const controlProps =\n typeof control === 'object' && typeof control.props === 'object' && control.props !== null ? control.props : {}\n\n const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const textBaseProps: TextProps = { appearance: 'body', size: 'inherit', color: 'inherit' }\n\n const captionBaseProps: TextProps = { appearance: 'body', size: 0.9, sizeUnits: 'em', color: 'inherit' }\n\n return (\n <Styled.Root\n {...sizeProps}\n {...stateProps}\n {...restProps}\n as={rootNode}\n type={rootType}\n borderRadius={borderRadius}\n mediaBorderRadius={mediaBorderRadius}\n ref={ref}\n >\n {typeof children === 'function' ? (\n children({\n textProps: textBaseProps,\n captionProps: captionBaseProps,\n })\n ) : (\n <>\n {loading ? (\n <>\n {media && (\n <Styled.Media>\n <Skeleton width='100%' height='100%' borderRadius='inherit' />\n </Styled.Media>\n )}\n <Styled.Content>\n <Skeleton width='100%' borderRadius={4}>\n <Text {...textBaseProps} {...textProps} />\n </Skeleton>\n </Styled.Content>\n </>\n ) : (\n <>\n {control &&\n controlPosition === 'left' &&\n (typeof control === 'function'\n ? control({ ...sizeProps, ...stateProps })\n : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\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 {media && (\n <Styled.Media>{isValidElement(media) ? media : <Styled.Img alt='' {...media} />}</Styled.Media>\n )}\n {(children \|\| text \|\| caption) && (\n <Styled.Content>\n {caption && captionPosition === 'top' && (\n <~~Styled.Typography~~ ~~forwardedAs~~='span' ~~ellipsis=~~{~~ellipsis} {~~...captionBaseProps} {...captionProps}>\n {caption}\n </~~Styled.Typography~~>\n )}\n {(children \|\| text) && (\n <~~Styled.Typography~~ ~~forwardedAs~~='span' ~~ellipsis=~~{~~ellipsis} {~~...textBaseProps} {...textProps}>\n {children ?? text}\n </~~Styled.Typography~~>\n )}\n {caption && captionPosition === 'bottom' && (\n <~~Styled.Typography~~ ~~forwardedAs~~='span' ~~ellipsis=~~{~~ellipsis} {~~...captionBaseProps} {...captionProps}>\n {caption}\n </~~Styled.Typography~~>\n )}\n </Styled.Content>\n )}\n {addon}\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 {control &&\n controlPosition === 'right' &&\n (typeof control === 'function'\n ? control({ ...sizeProps, ...stateProps })\n : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\n </>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { ListItem }\n"],"names":["ListItem","withMergedProps","forwardRef","props","ref","size","borderRadius","mediaBorderRadius","controlPosition","captionPosition","ellipsis","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading","restProps","rootNode","rootType","href","as","type","sizeProps","stateProps","controlProps","before","after","Array","isArray","textBaseProps","appearance","color","captionBaseProps","sizeUnits","_jsx","Styled","jsx","_Fragment","_jsxs","jsxs","Skeleton","width","height","Text","cloneElement","Icon","preset","name","undefined","isValidElement","alt","~~forwardedAs","~~displayName","sizes","SIZES"],"mappings":"iVAsBMA,MAAAA,SAA2DC,gBAAAA,gBAC/DC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,aACVA,EAAe,EAACC,kBAChBA,EAAoB,MAAKC,gBACzBA,EAAkB,OAAMC,gBACxBA,EAAkB,SAAQC,SAC1BA,GAAW,EAAIC,UACfA,EAAY,CAAE,EAAAC,UACdA,EAAY,CAAE,EAAAC,aACdA,EAAe,CAAE,EAAAC,QACjBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,KACNA,EAAIC,SACJA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,QACLA,EAAOC,MACPA,EAAKC,UACLA,EAASC,SACTA,EAAQC,QACRA,KACGC,GACD3B,EAEJ,IAAI4B,EAMJ,IAAIC,EAJAV,IAASS,EAAW,SACpBD,EAAUG,OAAMF,EAAW,KAC3BD,EAAUI,KAAIH,EAAWD,EAAUI,IAIlCH,IAAUC,EAAW,UACtBF,EAAUK,OAAMH,EAAWF,EAAUK,MAEzC,MAAMC,EAAY,CAChB/B,OACAS,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAa,CACjBV,YACAC,YAGF,MAAMU,SACGhB,GAAY,iBAAmBA,EAAQnB,OAAU,UAAYmB,EAAQnB,QAAU,KAAOmB,EAAQnB,MAAQ,CAAA,EAE/G,MAAOoC,EAAQC,GAASC,MAAMC,QAAQnB,GAAQA,EAAO,CAACA,GAEtD,MAAMoB,EAA2B,CAAEC,WAAY,OAAQvC,KAAM,UAAWwC,MAAO,~~WAE/E~~,~~MAAMC~~,EAA8B,CAAEF,WAAY,OAAQvC,KAAM,GAAK0C,UAAW,KAAMF,MAAO,~~WAE7F~~,~~OACEG~~,WAAAA,IAACC,MAAAA,KAAW,IACNb,KACAC,KACAP,EACJI,GAAIH,EACJI,KAAMH,EACN1B,aAAcA,EACdC,kBAAmBA,EACnBH,IAAKA,EAAIiB,gBAEDA,GAAa,WACnBA,EAAS,CACPT,UAAW+B,EACX9B,aAAciC,IAGhBE,WAAAE,IAAAC,oBAAA,CAAA9B,SAEI+B,WAAAC,KAAAF,oBADDtB,EACC,CAAAR,UACGG,GACCwB,WAAAE,IAACD,YAAY,CAAA5B,SACX2B,WAAAE,IAACI,kBAAQ,CAACC,MAAM,OAAOC,OAAO,OAAOlD,aAAa,cAGtD0C,WAAAE,IAACD,cAAc,CAAA5B,SACb2B,WAAAE,IAACI,kBAAQ,CAACC,MAAM,OAAOjD,aAAc,EAAEe,SACrC2B,WAAAE,IAACO,UAAI,IAAKd,KAAmB/B,UAKnC,CAAAS,SACGC,CAAAA,GACCd,IAAoB,gBACZc,GAAY,WAChBA,EAAQ,IAAKc,KAAcC,IAC3BqB,MAAYA,aAACpC,EAAS,IAAKc,KAAcC,KAAeC,KAC7DC,GACCS,WAAAE,IAACS,UAAI,CACHC,OAAO,QACPC,YAAatB,GAAW,SAAWA,OAASuB,EAC5CvC,YAAagB,GAAW,SAAWA,OAASuB,KACxCnD,IAGPa,GACCwB,WAAAE,IAACD,YAAY,CAAA5B,SAAE0C,MAAcA,eAACvC,GAASA,EAAQwB,WAAAA,IAACC,MAAAA,IAAU,CAACe,IAAI,MAAOxC,OAEtEH,GAAYD,GAAQK,IACpB2B,WAAAA,KAACH,MAAAA,QAAc,CAAA5B,SAAA,CACZI,GAAWhB,IAAoB,OAC9BuC,WAAAA,~~IAACC~~,~~MAAAA~~,~~WAAiB~~,~~CAACgB~~,~~YAAY~~,~~OAAOvD~~,~~SAAUA,KAAcoC,~~KAAsBjC,EAAYQ,~~SAC7FI~~,KAGHJ,GAAYD,IACZ4B,WAAAA,~~IAACC~~,~~MAAAA~~,~~WAAiB~~,~~CAACgB~~,~~YAAY~~,~~OAAOvD~~,~~SAAUA,KAAciC,~~KAAmB/B,EAASS,~~SACvFA~~,GAAYD,IAGhBK,GAAWhB,IAAoB,UAC9BuC,WAAAA,~~IAACC~~,~~MAAAA~~,~~WAAiB~~,~~CAACgB~~,~~YAAY~~,~~OAAOvD~~,~~SAAUA,KAAcoC,~~KAAsBjC,EAAYQ,~~SAC7FI~~,OAKRC,EACAc,GACCQ,WAAAA,IAACW,KAAAA,KAAI,CACHC,OAAO,QACPC,YAAarB,GAAU,SAAWA,OAAQsB,EAC1CvC,YAAaiB,GAAU,SAAWA,OAAQsB,KACtCnD,IAGPW,GACCd,IAAoB,iBACZc,GAAY,WAChBA,EAAQ,IAAKc,KAAcC,IAC3BqB,MAAYA,aAACpC,EAAS,IAAKc,KAAcC,KAAeC,WAK1D,IAGlB,~~CACE4B~~,YAxKmB,WAyKnBC,MAAOC,UAAAA"}
1	+ {"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { forwardRef, cloneElement, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\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 [ListItemProps](https://github.com/foxford/ui/blob/master/src/components/ListItem/types.ts)\n */\nconst ListItem: React.ForwardRefExoticComponent<ListItemProps> = withMergedProps<ListItemProps>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n borderRadius = 0,\n mediaBorderRadius = '50%',\n controlPosition = 'left',\n captionPosition = 'bottom',\n ellipsis = true,\n iconProps = {},\n textProps = {},\n captionProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n text,\n children,\n control,\n icon,\n media,\n caption,\n addon,\n onColored,\n disabled,\n loading,\n ...restProps\n } = props\n\n let rootNode: ListItemProps['as']\n\n if (control) rootNode = 'label'\n if (restProps.href) rootNode = 'a'\n if (restProps.as) rootNode = restProps.as\n\n let rootType: ListItemProps['type']\n\n if (!rootNode) 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 stateProps = {\n onColored,\n disabled,\n }\n\n const controlProps =\n typeof control === 'object' && typeof control.props === 'object' && control.props !== null ? control.props : {}\n\n const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const textBaseProps: TextProps = { appearance: 'body', size: 'inherit', color: 'inherit', ellipsis }\n\n const captionBaseProps: TextProps = { appearance: 'body', size: 0.9, sizeUnits: 'em', color: 'inherit', ellipsis }\n\n return (\n <Styled.Root\n {...sizeProps}\n {...stateProps}\n {...restProps}\n as={rootNode}\n type={rootType}\n borderRadius={borderRadius}\n mediaBorderRadius={mediaBorderRadius}\n ref={ref}\n >\n {typeof children === 'function' ? (\n children({\n textProps: textBaseProps,\n captionProps: captionBaseProps,\n })\n ) : (\n <>\n {loading ? (\n <>\n {media && (\n <Styled.Media>\n <Skeleton width='100%' height='100%' borderRadius='inherit' />\n </Styled.Media>\n )}\n <Styled.Content>\n <Skeleton width='100%' borderRadius={4}>\n <Text {...textBaseProps} {...textProps} />\n </Skeleton>\n </Styled.Content>\n </>\n ) : (\n <>\n {control &&\n controlPosition === 'left' &&\n (typeof control === 'function'\n ? control({ ...sizeProps, ...stateProps })\n : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\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 {media && (\n <Styled.Media>{isValidElement(media) ? media : <Styled.Img alt='' {...media} />}</Styled.Media>\n )}\n {(children \|\| text \|\| caption) && (\n <Styled.Content>\n {caption && captionPosition === 'top' && (\n <Text as='span' {...captionBaseProps} {...captionProps}>\n {caption}\n </Text>\n )}\n {(children \|\| text) && (\n <Text as='span' {...textBaseProps} {...textProps}>\n {children ?? text}\n </Text>\n )}\n {caption && captionPosition === 'bottom' && (\n <Text as='span' {...captionBaseProps} {...captionProps}>\n {caption}\n </Text>\n )}\n </Styled.Content>\n )}\n {addon}\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 {control &&\n controlPosition === 'right' &&\n (typeof control === 'function'\n ? control({ ...sizeProps, ...stateProps })\n : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\n </>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { ListItem }\n"],"names":["ListItem","withMergedProps","forwardRef","props","ref","size","borderRadius","mediaBorderRadius","controlPosition","captionPosition","ellipsis","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading","restProps","rootNode","rootType","href","as","type","sizeProps","stateProps","controlProps","before","after","Array","isArray","textBaseProps","appearance","color","captionBaseProps","sizeUnits","_jsx","Styled","jsx","_Fragment","_jsxs","jsxs","Skeleton","width","height","Text","cloneElement","Icon","preset","name","undefined","isValidElement","alt","displayName","sizes","SIZES"],"mappings":"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"}

package/components/ListItem/ListItem.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{forwardRef,cloneElement,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES}from'./constants.mjs';import{Root,Media,Content,Img,Typography}from'./style.mjs';import{jsx,Fragment,jsxs}from'react/jsx-runtime';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Icon}from'../Icon/Icon.mjs';const ListItem=withMergedProps(forwardRef(((e,o)=>{const{size:t="s",borderRadius:s=0,mediaBorderRadius:i="50%",controlPosition:r="left",captionPosition:n="bottom",ellipsis:d=!0,iconProps:p={},textProps:a={},captionProps:l={},sizeXXS:c,sizeXS:m,sizeS:f,sizeM:h,sizeL:j,sizeXL:x,text:y,children:g,control:z,icon:b,media:S,caption:u,addon:I,onColored:w,disabled:P,loading:R,...M}=e;let T;let X;z&&(T='label'),M.href&&(T='a'),M.as&&(T=M.as),T||(X='button'),M.type&&(X=M.type);const E={size:t,sizeXXS:c,sizeXS:m,sizeS:f,sizeM:h,sizeL:j,sizeXL:x};const L={onColored:w,disabled:P};const k=typeof z=='object'&&typeof z.props=='object'&&z.props!==null?z.props:{};const[A,C]=Array.isArray(b)?b:[b];const v={appearance:'body',size:'inherit',color:'inherit'};const F={appearance:'body',size:.9,sizeUnits:'em',color:'inherit'};return jsx(Root,{...E,...L,...M,as:T,type:X,borderRadius:s,mediaBorderRadius:i,ref:o,children:typeof g=='function'?g({textProps:v,captionProps:F}):jsx(Fragment,{children:jsxs(Fragment,R?{children:[S&&jsx(Media,{children:jsx(Skeleton,{width:"100%",height:"100%",borderRadius:"inherit"})}),jsx(Content,{children:jsx(Skeleton,{width:"100%",borderRadius:4,children:jsx(Text,{...v,...a})})})]}:{children:[z&&r==='left'&&(typeof z=='function'?z({...E,...L}):cloneElement(z,{...E,...L,...k})),A&&jsx(Icon,{preset:"brand",name:typeof A=='string'?A:void 0,icon:typeof A!='string'?A:void 0,...p}),S&&jsx(Media,{children:isValidElement(S)?S:jsx(Img,{alt:"",...S})}),(g||y||u)&&jsxs(Content,{children:[u&&n==='top'&&jsx(Typography,{forwardedAs:"span",ellipsis:d,...F,...l,children:u}),(g||y)&&jsx(Typography,{forwardedAs:"span",ellipsis:d,...v,...a,children:g??y}),u&&n==='bottom'&&jsx(Typography,{forwardedAs:"span",ellipsis:d,...F,...l,children:u})]}),I,C&&jsx(Icon,{preset:"brand",name:typeof C=='string'?C:void 0,icon:typeof C!='string'?C:void 0,...p}),z&&r==='right'&&(typeof z=='function'?z({...E,...L}):cloneElement(z,{...E,...L,...k}))]})})})})),{displayName:'ListItem',sizes:SIZES});export{ListItem};
+import{forwardRef,cloneElement,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES}from'./constants.mjs';import{Root,Media,Content,Img}from'./style.mjs';import{jsx,Fragment,jsxs}from'react/jsx-runtime';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Icon}from'../Icon/Icon.mjs';const ListItem=withMergedProps(forwardRef(((e,o)=>{const{size:t="s",borderRadius:s=0,mediaBorderRadius:i="50%",controlPosition:r="left",captionPosition:n="bottom",ellipsis:d=!0,iconProps:a={},textProps:l={},captionProps:p={},sizeXXS:c,sizeXS:m,sizeS:x,sizeM:f,sizeL:h,sizeXL:j,text:y,children:z,control:b,icon:g,media:S,caption:u,addon:I,onColored:P,disabled:R,loading:M,...X}=e;let w;let E;b&&(w='label'),X.href&&(w='a'),X.as&&(w=X.as),w||(E='button'),X.type&&(E=X.type);const L={size:t,sizeXXS:c,sizeXS:m,sizeS:x,sizeM:f,sizeL:h,sizeXL:j};const T={onColored:P,disabled:R};const k=typeof b=='object'&&typeof b.props=='object'&&b.props!==null?b.props:{};const[C,v]=Array.isArray(g)?g:[g];const F={appearance:'body',size:'inherit',color:'inherit',ellipsis:d};const A={appearance:'body',size:.9,sizeUnits:'em',color:'inherit',ellipsis:d};return jsx(Root,{...L,...T,...X,as:w,type:E,borderRadius:s,mediaBorderRadius:i,ref:o,children:typeof z=='function'?z({textProps:F,captionProps:A}):jsx(Fragment,{children:jsxs(Fragment,M?{children:[S&&jsx(Media,{children:jsx(Skeleton,{width:"100%",height:"100%",borderRadius:"inherit"})}),jsx(Content,{children:jsx(Skeleton,{width:"100%",borderRadius:4,children:jsx(Text,{...F,...l})})})]}:{children:[b&&r==='left'&&(typeof b=='function'?b({...L,...T}):cloneElement(b,{...L,...T,...k})),C&&jsx(Icon,{preset:"brand",name:typeof C=='string'?C:void 0,icon:typeof C!='string'?C:void 0,...a}),S&&jsx(Media,{children:isValidElement(S)?S:jsx(Img,{alt:"",...S})}),(z||y||u)&&jsxs(Content,{children:[u&&n==='top'&&jsx(Text,{as:"span",...A,...p,children:u}),(z||y)&&jsx(Text,{as:"span",...F,...l,children:z??y}),u&&n==='bottom'&&jsx(Text,{as:"span",...A,...p,children:u})]}),I,v&&jsx(Icon,{preset:"brand",name:typeof v=='string'?v:void 0,icon:typeof v!='string'?v:void 0,...a}),b&&r==='right'&&(typeof b=='function'?b({...L,...T}):cloneElement(b,{...L,...T,...k}))]})})})})),{displayName:'ListItem',sizes:SIZES});export{ListItem};
 //# sourceMappingURL=ListItem.mjs.map

package/components/ListItem/ListItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.mjs","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { forwardRef, cloneElement, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\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 [ListItemProps](https://github.com/foxford/ui/blob/master/src/components/ListItem/types.ts)\n */\nconst ListItem: React.ForwardRefExoticComponent<ListItemProps> = withMergedProps<ListItemProps>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n borderRadius = 0,\n mediaBorderRadius = '50%',\n controlPosition = 'left',\n captionPosition = 'bottom',\n ellipsis = true,\n iconProps = {},\n textProps = {},\n captionProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n text,\n children,\n control,\n icon,\n media,\n caption,\n addon,\n onColored,\n disabled,\n loading,\n ...restProps\n } = props\n\n let rootNode: ListItemProps['as']\n\n if (control) rootNode = 'label'\n if (restProps.href) rootNode = 'a'\n if (restProps.as) rootNode = restProps.as\n\n let rootType: ListItemProps['type']\n\n if (!rootNode) 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 stateProps = {\n onColored,\n disabled,\n }\n\n const controlProps =\n typeof control === 'object' && typeof control.props === 'object' && control.props !== null ? control.props : {}\n\n const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const textBaseProps: TextProps = { appearance: 'body', size: 'inherit', color: 'inherit' }\n\n const captionBaseProps: TextProps = { appearance: 'body', size: 0.9, sizeUnits: 'em', color: 'inherit' }\n\n return (\n <Styled.Root\n {...sizeProps}\n {...stateProps}\n {...restProps}\n as={rootNode}\n type={rootType}\n borderRadius={borderRadius}\n mediaBorderRadius={mediaBorderRadius}\n ref={ref}\n >\n {typeof children === 'function' ? (\n children({\n textProps: textBaseProps,\n captionProps: captionBaseProps,\n })\n ) : (\n <>\n {loading ? (\n <>\n {media && (\n <Styled.Media>\n <Skeleton width='100%' height='100%' borderRadius='inherit' />\n </Styled.Media>\n )}\n <Styled.Content>\n <Skeleton width='100%' borderRadius={4}>\n <Text {...textBaseProps} {...textProps} />\n </Skeleton>\n </Styled.Content>\n </>\n ) : (\n <>\n {control &&\n controlPosition === 'left' &&\n (typeof control === 'function'\n ? control({ ...sizeProps, ...stateProps })\n : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\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 {media && (\n <Styled.Media>{isValidElement(media) ? media : <Styled.Img alt='' {...media} />}</Styled.Media>\n )}\n {(children \|\| text \|\| caption) && (\n <Styled.Content>\n {caption && captionPosition === 'top' && (\n <~~Styled.Typography~~ ~~forwardedAs~~='span' ~~ellipsis=~~{~~ellipsis} {~~...captionBaseProps} {...captionProps}>\n {caption}\n </~~Styled.Typography~~>\n )}\n {(children \|\| text) && (\n <~~Styled.Typography~~ ~~forwardedAs~~='span' ~~ellipsis=~~{~~ellipsis} {~~...textBaseProps} {...textProps}>\n {children ?? text}\n </~~Styled.Typography~~>\n )}\n {caption && captionPosition === 'bottom' && (\n <~~Styled.Typography~~ ~~forwardedAs~~='span' ~~ellipsis=~~{~~ellipsis} {~~...captionBaseProps} {...captionProps}>\n {caption}\n </~~Styled.Typography~~>\n )}\n </Styled.Content>\n )}\n {addon}\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 {control &&\n controlPosition === 'right' &&\n (typeof control === 'function'\n ? control({ ...sizeProps, ...stateProps })\n : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\n </>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { ListItem }\n"],"names":["ListItem","withMergedProps","forwardRef","props","ref","size","borderRadius","mediaBorderRadius","controlPosition","captionPosition","ellipsis","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading","restProps","rootNode","rootType","href","as","type","sizeProps","stateProps","controlProps","before","after","Array","isArray","textBaseProps","appearance","color","captionBaseProps","sizeUnits","_jsx","Styled","_Fragment","_jsxs","Skeleton","width","height","Text","cloneElement","Icon","preset","name","undefined","isValidElement","alt","~~forwardedAs","~~displayName","sizes","SIZES"],"mappings":"~~0XAsBMA~~,MAAAA,SAA2DC,gBAC/DC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,aACVA,EAAe,EAACC,kBAChBA,EAAoB,MAAKC,gBACzBA,EAAkB,OAAMC,gBACxBA,EAAkB,SAAQC,SAC1BA,GAAW,EAAIC,UACfA,EAAY,CAAE,EAAAC,UACdA,EAAY,CAAE,EAAAC,aACdA,EAAe,CAAE,EAAAC,QACjBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,KACNA,EAAIC,SACJA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,QACLA,EAAOC,MACPA,EAAKC,UACLA,EAASC,SACTA,EAAQC,QACRA,KACGC,GACD3B,EAEJ,IAAI4B,EAMJ,IAAIC,EAJAV,IAASS,EAAW,SACpBD,EAAUG,OAAMF,EAAW,KAC3BD,EAAUI,KAAIH,EAAWD,EAAUI,IAIlCH,IAAUC,EAAW,UACtBF,EAAUK,OAAMH,EAAWF,EAAUK,MAEzC,MAAMC,EAAY,CAChB/B,OACAS,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAa,CACjBV,YACAC,YAGF,MAAMU,SACGhB,GAAY,iBAAmBA,EAAQnB,OAAU,UAAYmB,EAAQnB,QAAU,KAAOmB,EAAQnB,MAAQ,CAAA,EAE/G,MAAOoC,EAAQC,GAASC,MAAMC,QAAQnB,GAAQA,EAAO,CAACA,GAEtD,MAAMoB,EAA2B,CAAEC,WAAY,OAAQvC,KAAM,UAAWwC,MAAO,~~WAE/E~~,~~MAAMC~~,EAA8B,CAAEF,WAAY,OAAQvC,KAAM,GAAK0C,UAAW,KAAMF,MAAO,~~WAE7F~~,~~OACEG~~,IAACC,KAAW,IACNb,KACAC,KACAP,EACJI,GAAIH,EACJI,KAAMH,EACN1B,aAAcA,EACdC,kBAAmBA,EACnBH,IAAKA,EAAIiB,gBAEDA,GAAa,WACnBA,EAAS,CACPT,UAAW+B,EACX9B,aAAciC,IAGhBE,IAAAE,SAAA,CAAA7B,SAEI8B,KAAAD,SADDrB,EACC,CAAAR,UACGG,GACCwB,IAACC,MAAY,CAAA5B,SACX2B,IAACI,SAAQ,CAACC,MAAM,OAAOC,OAAO,OAAOhD,aAAa,cAGtD0C,IAACC,QAAc,CAAA5B,SACb2B,IAACI,SAAQ,CAACC,MAAM,OAAO/C,aAAc,EAAEe,SACrC2B,IAACO,KAAI,IAAKZ,KAAmB/B,UAKnC,CAAAS,SACGC,CAAAA,GACCd,IAAoB,gBACZc,GAAY,WAChBA,EAAQ,IAAKc,KAAcC,IAC3BmB,aAAalC,EAAS,IAAKc,KAAcC,KAAeC,KAC7DC,GACCS,IAACS,KAAI,CACHC,OAAO,QACPC,YAAapB,GAAW,SAAWA,OAASqB,EAC5CrC,YAAagB,GAAW,SAAWA,OAASqB,KACxCjD,IAGPa,GACCwB,IAACC,MAAY,CAAA5B,SAAEwC,eAAerC,GAASA,EAAQwB,IAACC,IAAU,CAACa,IAAI,MAAOtC,OAEtEH,GAAYD,GAAQK,IACpB0B,KAACF,QAAc,CAAA5B,SAAA,CACZI,GAAWhB,IAAoB,OAC9BuC,~~IAACC~~,~~WAAiB~~,~~CAACc~~,~~YAAY~~,~~OAAOrD~~,~~SAAUA,KAAcoC,~~KAAsBjC,EAAYQ,~~SAC7FI~~,KAGHJ,GAAYD,IACZ4B,~~IAACC~~,~~WAAiB~~,~~CAACc~~,~~YAAY~~,~~OAAOrD~~,~~SAAUA,KAAciC,~~KAAmB/B,EAASS,~~SACvFA~~,GAAYD,IAGhBK,GAAWhB,IAAoB,UAC9BuC,~~IAACC~~,~~WAAiB~~,~~CAACc~~,~~YAAY~~,~~OAAOrD~~,~~SAAUA,KAAcoC,~~KAAsBjC,EAAYQ,~~SAC7FI~~,OAKRC,EACAc,GACCQ,IAACS,KAAI,CACHC,OAAO,QACPC,YAAanB,GAAU,SAAWA,OAAQoB,EAC1CrC,YAAaiB,GAAU,SAAWA,OAAQoB,KACtCjD,IAGPW,GACCd,IAAoB,iBACZc,GAAY,WAChBA,EAAQ,IAAKc,KAAcC,IAC3BmB,aAAalC,EAAS,IAAKc,KAAcC,KAAeC,WAK1D,IAGlB,~~CACE0B~~,YAxKmB,WAyKnBC,MAAOC"}
1	+ {"version":3,"file":"ListItem.mjs","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { forwardRef, cloneElement, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\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 [ListItemProps](https://github.com/foxford/ui/blob/master/src/components/ListItem/types.ts)\n */\nconst ListItem: React.ForwardRefExoticComponent<ListItemProps> = withMergedProps<ListItemProps>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n borderRadius = 0,\n mediaBorderRadius = '50%',\n controlPosition = 'left',\n captionPosition = 'bottom',\n ellipsis = true,\n iconProps = {},\n textProps = {},\n captionProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n text,\n children,\n control,\n icon,\n media,\n caption,\n addon,\n onColored,\n disabled,\n loading,\n ...restProps\n } = props\n\n let rootNode: ListItemProps['as']\n\n if (control) rootNode = 'label'\n if (restProps.href) rootNode = 'a'\n if (restProps.as) rootNode = restProps.as\n\n let rootType: ListItemProps['type']\n\n if (!rootNode) 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 stateProps = {\n onColored,\n disabled,\n }\n\n const controlProps =\n typeof control === 'object' && typeof control.props === 'object' && control.props !== null ? control.props : {}\n\n const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const textBaseProps: TextProps = { appearance: 'body', size: 'inherit', color: 'inherit', ellipsis }\n\n const captionBaseProps: TextProps = { appearance: 'body', size: 0.9, sizeUnits: 'em', color: 'inherit', ellipsis }\n\n return (\n <Styled.Root\n {...sizeProps}\n {...stateProps}\n {...restProps}\n as={rootNode}\n type={rootType}\n borderRadius={borderRadius}\n mediaBorderRadius={mediaBorderRadius}\n ref={ref}\n >\n {typeof children === 'function' ? (\n children({\n textProps: textBaseProps,\n captionProps: captionBaseProps,\n })\n ) : (\n <>\n {loading ? (\n <>\n {media && (\n <Styled.Media>\n <Skeleton width='100%' height='100%' borderRadius='inherit' />\n </Styled.Media>\n )}\n <Styled.Content>\n <Skeleton width='100%' borderRadius={4}>\n <Text {...textBaseProps} {...textProps} />\n </Skeleton>\n </Styled.Content>\n </>\n ) : (\n <>\n {control &&\n controlPosition === 'left' &&\n (typeof control === 'function'\n ? control({ ...sizeProps, ...stateProps })\n : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\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 {media && (\n <Styled.Media>{isValidElement(media) ? media : <Styled.Img alt='' {...media} />}</Styled.Media>\n )}\n {(children \|\| text \|\| caption) && (\n <Styled.Content>\n {caption && captionPosition === 'top' && (\n <Text as='span' {...captionBaseProps} {...captionProps}>\n {caption}\n </Text>\n )}\n {(children \|\| text) && (\n <Text as='span' {...textBaseProps} {...textProps}>\n {children ?? text}\n </Text>\n )}\n {caption && captionPosition === 'bottom' && (\n <Text as='span' {...captionBaseProps} {...captionProps}>\n {caption}\n </Text>\n )}\n </Styled.Content>\n )}\n {addon}\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 {control &&\n controlPosition === 'right' &&\n (typeof control === 'function'\n ? control({ ...sizeProps, ...stateProps })\n : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\n </>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { ListItem }\n"],"names":["ListItem","withMergedProps","forwardRef","props","ref","size","borderRadius","mediaBorderRadius","controlPosition","captionPosition","ellipsis","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading","restProps","rootNode","rootType","href","as","type","sizeProps","stateProps","controlProps","before","after","Array","isArray","textBaseProps","appearance","color","captionBaseProps","sizeUnits","_jsx","Styled","_Fragment","_jsxs","Skeleton","width","height","Text","cloneElement","Icon","preset","name","undefined","isValidElement","alt","displayName","sizes","SIZES"],"mappings":"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"}

package/components/ListItem/style.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var Text=require('../Text/Text.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardListItemProp=style.createShouldForwardProp((o=>!['danger','success','active','onColored','mediaBorderRadius','borderRadius'].includes(o)));const Media=styled__default.default.span.withConfig({displayName:"ListItem__Media",componentId:"ui__sc-1a62xqm-0"})(["box-sizing:border-box;flex-shrink:0;width:2.2em;height:2.2em;& > *{box-sizing:border-box;width:100%;height:100%;}"]);const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n  }\n\n  & ${Media} img {\n    background-color: ${o.mediaPlaceholderColor};\n  }\n`;const COLOR_SCHEMA={onColored:{danger:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},success:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))}},default:{danger:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},success:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))}}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardListItemProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,padding:'0.4em 0.8em'})}).withConfig({displayName:"ListItem__Root",componentId:"ui__sc-1a62xqm-1"})([""," "," "," "," ",""],(o=>`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    isolation: isolate;\n    position: relative;\n    cursor: ${o.disabled?'not-allowed':'pointer'};\n    border-radius: ${typeof o.borderRadius=='string'?o.borderRadius:`${o.borderRadius}px`};\n    border: none;\n    text-decoration: none;\n    appearance: none;\n    text-align: start;\n    width: 100%;\n    min-width: min-content;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n\n    & ${Media} {\n      border-radius: ${typeof o.mediaBorderRadius=='string'?o.mediaBorderRadius:`${o.mediaBorderRadius}px`};\n    }\n\n    & > *:not(:last-child) {\n      margin-right: 12px;\n    }\n  `),(o=>{const e=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;let r=e.primary;return o.secondary&&(r=e.secondary),o.success&&(r=e.success),o.danger&&(r=e.danger),o.disabled?r.disabled:o.active?r.active:r.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Content=styled__default.default.span.withConfig({displayName:"ListItem__Content",componentId:"ui__sc-1a62xqm-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);const Img=styled__default.default.img.withConfig({displayName:"ListItem__Img",componentId:"ui__sc-1a62xqm-3"})(["box-sizing:border-box;border-radius:inherit;object-fit:contain;"]);const Typography=styled__default.default(Text.Text).withConfig({shouldForwardProp:o=>o!=='ellipsis'}).withConfig({displayName:"ListItem__Typography",componentId:"ui__sc-1a62xqm-4"})(["",""],(o=>o.ellipsis&&"\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      min-width: 100%;\n      width: 5ch;\n    "));exports.Content=Content,exports.Img=Img,exports.Media=Media,exports.Root=Root,exports.Typography=Typography;
+'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardListItemProp=style.createShouldForwardProp((o=>!['danger','success','active','onColored','mediaBorderRadius','borderRadius'].includes(o)));const Media=styled__default.default.span.withConfig({displayName:"ListItem__Media",componentId:"ui__sc-1a62xqm-0"})(["box-sizing:border-box;flex-shrink:0;width:2.2em;height:2.2em;& > *{box-sizing:border-box;width:100%;height:100%;}"]);const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n  }\n\n  & ${Media} img {\n    background-color: ${o.mediaPlaceholderColor};\n  }\n`;const COLOR_SCHEMA={onColored:{danger:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},success:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))}},default:{danger:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},success:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))}}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardListItemProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,padding:'0.4em 0.8em'})}).withConfig({displayName:"ListItem__Root",componentId:"ui__sc-1a62xqm-1"})([""," "," "," "," ",""],(o=>`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    isolation: isolate;\n    position: relative;\n    cursor: ${o.disabled?'not-allowed':'pointer'};\n    border-radius: ${typeof o.borderRadius=='string'?o.borderRadius:`${o.borderRadius}px`};\n    border: none;\n    text-decoration: none;\n    appearance: none;\n    text-align: start;\n    width: 100%;\n    min-width: min-content;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n\n    & ${Media} {\n      border-radius: ${typeof o.mediaBorderRadius=='string'?o.mediaBorderRadius:`${o.mediaBorderRadius}px`};\n    }\n\n    & > *:not(:last-child) {\n      margin-right: 12px;\n    }\n  `),(o=>{const e=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;let r=e.primary;return o.secondary&&(r=e.secondary),o.success&&(r=e.success),o.danger&&(r=e.danger),o.disabled?r.disabled:o.active?r.active:r.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Content=styled__default.default.span.withConfig({displayName:"ListItem__Content",componentId:"ui__sc-1a62xqm-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);const Img=styled__default.default.img.withConfig({displayName:"ListItem__Img",componentId:"ui__sc-1a62xqm-3"})(["box-sizing:border-box;border-radius:inherit;object-fit:contain;"]);exports.Content=Content,exports.Img=Img,exports.Media=Media,exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/ListItem/style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.js","sources":["../../../../src/components/ListItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Text } from 'components/Text'\nimport type { StyledListItemProps, ListItemPalette, TypographyProps } from './types'\n\nconst shouldForwardListItemProp = createShouldForwardProp(\n (propKey) => !['danger', 'success', 'active', 'onColored', 'mediaBorderRadius', 'borderRadius'].includes(propKey)\n)\n\nexport const Media = styled.span`\n box-sizing: border-box;\n flex-shrink: 0;\n width: 2.2em;\n height: 2.2em;\n\n & > * {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n }\n`\n\nconst template = (palette: ListItemPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n }\n\n & ${Media} img {\n background-color: ${palette.mediaPlaceholderColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n danger: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n success: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n },\n default: {\n danger: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n success: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledListItemProps>({\n shouldForwardProp: shouldForwardListItemProp,\n })\n .attrs<StyledListItemProps>(<Required<Pick<StyledListItemProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.4em 0.8em',\n }),\n })`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n align-items: center;\n isolation: isolate;\n position: relative;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n border-radius: ${typeof props.borderRadius === 'string' ? props.borderRadius : `${props.borderRadius}px`};\n border: none;\n text-decoration: none;\n appearance: none;\n text-align: start;\n width: 100%;\n min-width: min-content;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & ${Media} {\n border-radius: ${\n typeof props.mediaBorderRadius === 'string' ? props.mediaBorderRadius : `${props.mediaBorderRadius}px`\n };\n }\n\n & > *:not(:last-child) {\n margin-right: 12px;\n }\n `}\n\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.success) schemaVariant = schema.success\n if (props.danger) schemaVariant = schema.danger\n\n if (props.disabled) return schemaVariant.disabled\n if (props.active) return schemaVariant.active\n\n return 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`\n\nexport const Img = styled.img`\n box-sizing: border-box;\n border-radius: inherit;\n object-fit: contain;\n`\n\nexport const Typography = styled(Text).withConfig<TypographyProps>({\n shouldForwardProp: (propKey) => propKey !== 'ellipsis',\n})`\n ${(props) =>\n props.ellipsis &&\n `\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 100%;\n width: 5ch;\n `}\n`\n"],"names":["shouldForwardListItemProp","createShouldForwardProp","propKey","includes","Media","styled","span","withConfig","displayName","componentId","template","palette","color","backgroundColor","colorHover","backgroundColorHover","mediaPlaceholderColor","COLOR_SCHEMA","onColored","danger","disabled","css","props","theme","colors","transparent","active","default","success","secondary","primary","Root","button","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","borderRadius","mediaBorderRadius","schema","schemaVariant","focus","responsiveSize","responsiveMargin","Content","Img","img","Typography","Text","ellipsis"],"mappings":"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"}
1	+ {"version":3,"file":"style.js","sources":["../../../../src/components/ListItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\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 { StyledListItemProps, ListItemPalette } from './types'\n\nconst shouldForwardListItemProp = createShouldForwardProp(\n (propKey) => !['danger', 'success', 'active', 'onColored', 'mediaBorderRadius', 'borderRadius'].includes(propKey)\n)\n\nexport const Media = styled.span`\n box-sizing: border-box;\n flex-shrink: 0;\n width: 2.2em;\n height: 2.2em;\n\n & > * {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n }\n`\n\nconst template = (palette: ListItemPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n }\n\n & ${Media} img {\n background-color: ${palette.mediaPlaceholderColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n danger: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n success: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n },\n default: {\n danger: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n success: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledListItemProps>({\n shouldForwardProp: shouldForwardListItemProp,\n })\n .attrs<StyledListItemProps>(<Required<Pick<StyledListItemProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.4em 0.8em',\n }),\n })`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n align-items: center;\n isolation: isolate;\n position: relative;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n border-radius: ${typeof props.borderRadius === 'string' ? props.borderRadius : `${props.borderRadius}px`};\n border: none;\n text-decoration: none;\n appearance: none;\n text-align: start;\n width: 100%;\n min-width: min-content;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & ${Media} {\n border-radius: ${\n typeof props.mediaBorderRadius === 'string' ? props.mediaBorderRadius : `${props.mediaBorderRadius}px`\n };\n }\n\n & > *:not(:last-child) {\n margin-right: 12px;\n }\n `}\n\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.success) schemaVariant = schema.success\n if (props.danger) schemaVariant = schema.danger\n\n if (props.disabled) return schemaVariant.disabled\n if (props.active) return schemaVariant.active\n\n return 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`\n\nexport const Img = styled.img`\n box-sizing: border-box;\n border-radius: inherit;\n object-fit: contain;\n`\n"],"names":["shouldForwardListItemProp","createShouldForwardProp","propKey","includes","Media","styled","span","withConfig","displayName","componentId","template","palette","color","backgroundColor","colorHover","backgroundColorHover","mediaPlaceholderColor","COLOR_SCHEMA","onColored","danger","disabled","css","props","theme","colors","transparent","active","default","success","secondary","primary","Root","button","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","borderRadius","mediaBorderRadius","schema","schemaVariant","focus","responsiveSize","responsiveMargin","Content","Img","img"],"mappings":"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"}

package/components/ListItem/style.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{Text}from'../Text/Text.mjs';const shouldForwardListItemProp=createShouldForwardProp((o=>!['danger','success','active','onColored','mediaBorderRadius','borderRadius'].includes(o)));const Media=styled.span.withConfig({displayName:"ListItem__Media",componentId:"ui__sc-1a62xqm-0"})(["box-sizing:border-box;flex-shrink:0;width:2.2em;height:2.2em;& > *{box-sizing:border-box;width:100%;height:100%;}"]);const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n  }\n\n  & ${Media} img {\n    background-color: ${o.mediaPlaceholderColor};\n  }\n`;const COLOR_SCHEMA={onColored:{danger:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},success:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))}},default:{danger:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},success:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))}}};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardListItemProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,padding:'0.4em 0.8em'})}).withConfig({displayName:"ListItem__Root",componentId:"ui__sc-1a62xqm-1"})([""," "," "," "," ",""],(o=>`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    isolation: isolate;\n    position: relative;\n    cursor: ${o.disabled?'not-allowed':'pointer'};\n    border-radius: ${typeof o.borderRadius=='string'?o.borderRadius:`${o.borderRadius}px`};\n    border: none;\n    text-decoration: none;\n    appearance: none;\n    text-align: start;\n    width: 100%;\n    min-width: min-content;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n\n    & ${Media} {\n      border-radius: ${typeof o.mediaBorderRadius=='string'?o.mediaBorderRadius:`${o.mediaBorderRadius}px`};\n    }\n\n    & > *:not(:last-child) {\n      margin-right: 12px;\n    }\n  `),(o=>{const e=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;let r=e.primary;return o.secondary&&(r=e.secondary),o.success&&(r=e.success),o.danger&&(r=e.danger),o.disabled?r.disabled:o.active?r.active:r.default}),focus,responsiveSize,responsiveMargin);const Content=styled.span.withConfig({displayName:"ListItem__Content",componentId:"ui__sc-1a62xqm-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);const Img=styled.img.withConfig({displayName:"ListItem__Img",componentId:"ui__sc-1a62xqm-3"})(["box-sizing:border-box;border-radius:inherit;object-fit:contain;"]);const Typography=styled(Text).withConfig({shouldForwardProp:o=>o!=='ellipsis'}).withConfig({displayName:"ListItem__Typography",componentId:"ui__sc-1a62xqm-4"})(["",""],(o=>o.ellipsis&&"\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      min-width: 100%;\n      width: 5ch;\n    "));export{Content,Img,Media,Root,Typography};
+import styled,{css}from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const shouldForwardListItemProp=createShouldForwardProp((o=>!['danger','success','active','onColored','mediaBorderRadius','borderRadius'].includes(o)));const Media=styled.span.withConfig({displayName:"ListItem__Media",componentId:"ui__sc-1a62xqm-0"})(["box-sizing:border-box;flex-shrink:0;width:2.2em;height:2.2em;& > *{box-sizing:border-box;width:100%;height:100%;}"]);const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n  }\n\n  & ${Media} img {\n    background-color: ${o.mediaPlaceholderColor};\n  }\n`;const COLOR_SCHEMA={onColored:{danger:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},success:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncontrast-hover'],...o.palette})))}},default:{danger:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},success:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['alert-success'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),active:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100-active'],colorHover:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))}}};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardListItemProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,padding:'0.4em 0.8em'})}).withConfig({displayName:"ListItem__Root",componentId:"ui__sc-1a62xqm-1"})([""," "," "," "," ",""],(o=>`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    isolation: isolate;\n    position: relative;\n    cursor: ${o.disabled?'not-allowed':'pointer'};\n    border-radius: ${typeof o.borderRadius=='string'?o.borderRadius:`${o.borderRadius}px`};\n    border: none;\n    text-decoration: none;\n    appearance: none;\n    text-align: start;\n    width: 100%;\n    min-width: min-content;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n\n    & ${Media} {\n      border-radius: ${typeof o.mediaBorderRadius=='string'?o.mediaBorderRadius:`${o.mediaBorderRadius}px`};\n    }\n\n    & > *:not(:last-child) {\n      margin-right: 12px;\n    }\n  `),(o=>{const e=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;let r=e.primary;return o.secondary&&(r=e.secondary),o.success&&(r=e.success),o.danger&&(r=e.danger),o.disabled?r.disabled:o.active?r.active:r.default}),focus,responsiveSize,responsiveMargin);const Content=styled.span.withConfig({displayName:"ListItem__Content",componentId:"ui__sc-1a62xqm-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);const Img=styled.img.withConfig({displayName:"ListItem__Img",componentId:"ui__sc-1a62xqm-3"})(["box-sizing:border-box;border-radius:inherit;object-fit:contain;"]);export{Content,Img,Media,Root};
 //# sourceMappingURL=style.mjs.map

package/components/ListItem/style.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.mjs","sources":["../../../../src/components/ListItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Text } from 'components/Text'\nimport type { StyledListItemProps, ListItemPalette, TypographyProps } from './types'\n\nconst shouldForwardListItemProp = createShouldForwardProp(\n (propKey) => !['danger', 'success', 'active', 'onColored', 'mediaBorderRadius', 'borderRadius'].includes(propKey)\n)\n\nexport const Media = styled.span`\n box-sizing: border-box;\n flex-shrink: 0;\n width: 2.2em;\n height: 2.2em;\n\n & > * {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n }\n`\n\nconst template = (palette: ListItemPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n }\n\n & ${Media} img {\n background-color: ${palette.mediaPlaceholderColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n danger: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n success: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n },\n default: {\n danger: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n success: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledListItemProps>({\n shouldForwardProp: shouldForwardListItemProp,\n })\n .attrs<StyledListItemProps>(<Required<Pick<StyledListItemProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.4em 0.8em',\n }),\n })`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n align-items: center;\n isolation: isolate;\n position: relative;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n border-radius: ${typeof props.borderRadius === 'string' ? props.borderRadius : `${props.borderRadius}px`};\n border: none;\n text-decoration: none;\n appearance: none;\n text-align: start;\n width: 100%;\n min-width: min-content;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & ${Media} {\n border-radius: ${\n typeof props.mediaBorderRadius === 'string' ? props.mediaBorderRadius : `${props.mediaBorderRadius}px`\n };\n }\n\n & > *:not(:last-child) {\n margin-right: 12px;\n }\n `}\n\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.success) schemaVariant = schema.success\n if (props.danger) schemaVariant = schema.danger\n\n if (props.disabled) return schemaVariant.disabled\n if (props.active) return schemaVariant.active\n\n return 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`\n\nexport const Img = styled.img`\n box-sizing: border-box;\n border-radius: inherit;\n object-fit: contain;\n`\n\nexport const Typography = styled(Text).withConfig<TypographyProps>({\n shouldForwardProp: (propKey) => propKey !== 'ellipsis',\n})`\n ${(props) =>\n props.ellipsis &&\n `\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 100%;\n width: 5ch;\n `}\n`\n"],"names":["shouldForwardListItemProp","createShouldForwardProp","propKey","includes","Media","styled","span","withConfig","displayName","componentId","template","palette","color","backgroundColor","colorHover","backgroundColorHover","mediaPlaceholderColor","COLOR_SCHEMA","onColored","danger","disabled","css","props","theme","colors","transparent","active","default","success","secondary","primary","Root","button","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","borderRadius","mediaBorderRadius","schema","schemaVariant","focus","responsiveSize","responsiveMargin","Content","Img","img","Typography","Text","ellipsis"],"mappings":"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"}
1	+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/ListItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\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 { StyledListItemProps, ListItemPalette } from './types'\n\nconst shouldForwardListItemProp = createShouldForwardProp(\n (propKey) => !['danger', 'success', 'active', 'onColored', 'mediaBorderRadius', 'borderRadius'].includes(propKey)\n)\n\nexport const Media = styled.span`\n box-sizing: border-box;\n flex-shrink: 0;\n width: 2.2em;\n height: 2.2em;\n\n & > * {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n }\n`\n\nconst template = (palette: ListItemPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n }\n\n & ${Media} img {\n background-color: ${palette.mediaPlaceholderColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n danger: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n success: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncontrast-hover'],\n ...props.palette,\n })}\n `,\n },\n },\n default: {\n danger: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-error'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['alert-error'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n success: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['alert-success'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['alert-success'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n colorHover: props.theme.colors['content-brand-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledListItemProps>({\n shouldForwardProp: shouldForwardListItemProp,\n })\n .attrs<StyledListItemProps>(<Required<Pick<StyledListItemProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.4em 0.8em',\n }),\n })`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n align-items: center;\n isolation: isolate;\n position: relative;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n border-radius: ${typeof props.borderRadius === 'string' ? props.borderRadius : `${props.borderRadius}px`};\n border: none;\n text-decoration: none;\n appearance: none;\n text-align: start;\n width: 100%;\n min-width: min-content;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & ${Media} {\n border-radius: ${\n typeof props.mediaBorderRadius === 'string' ? props.mediaBorderRadius : `${props.mediaBorderRadius}px`\n };\n }\n\n & > *:not(:last-child) {\n margin-right: 12px;\n }\n `}\n\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.success) schemaVariant = schema.success\n if (props.danger) schemaVariant = schema.danger\n\n if (props.disabled) return schemaVariant.disabled\n if (props.active) return schemaVariant.active\n\n return 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`\n\nexport const Img = styled.img`\n box-sizing: border-box;\n border-radius: inherit;\n object-fit: contain;\n`\n"],"names":["shouldForwardListItemProp","createShouldForwardProp","propKey","includes","Media","styled","span","withConfig","displayName","componentId","template","palette","color","backgroundColor","colorHover","backgroundColorHover","mediaPlaceholderColor","COLOR_SCHEMA","onColored","danger","disabled","css","props","theme","colors","transparent","active","default","success","secondary","primary","Root","button","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","borderRadius","mediaBorderRadius","schema","schemaVariant","focus","responsiveSize","responsiveMargin","Content","Img","img"],"mappings":"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"}

package/components/Text/Ellipsis.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 'use strict';var React=require('react');var ResizeObserver=require('../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.js');var useMergedPalette=require('../../hooks/useMergedPalette.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver.default((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));exports.Ellipsis=e=>{const{lines:r=1,defaultExpanded:t=!1,expandable:n=!1,expandButtonProps:s={},children:i,expanded:l,onExpandedChange:a}=e;const{captionExpanded:c="Свернуть",captionCollapsed:o="Развернуть",...u}=s;const d=React.useRef(null);const p=React.useRef(null);const f=React.useRef(-1);const h=useMergedPalette.useMergedPalette(u);const[b,v]=React.useState(null);const[g,x]=React.useState(l??t);const y=React.useCallback((e=>{cancelAnimationFrame(f.current),f.current=requestAnimationFrame((()=>{if(p.current)if(g){const t=Math.round(e.clientHeight/p.current.clientHeight);v(t>r)}else{const r=Math.round(e.scrollHeight/p.current.clientHeight);const t=Math.round(e.clientHeight/p.current.clientHeight);v(r>t)}}))}),[r,g]);return React.useLayoutEffect((()=>(n&&d.current&&(d.current[resizeHandlerSymbol]=y,resizeObserver.observe(d.current)),()=>{d.current&&resizeObserver.unobserve(d.current)})),[n,y]),React.useLayoutEffect((()=>{l!==void 0&&(x(l),a&&a(l))}),[l,a]),require$$0.jsxs(require$$0.Fragment,{children:[require$$0.jsxs(style.TextEllipsis,{ref:d,lines:r,expanded:g,children:[n&&require$$0.jsx(style.LineHeight,{ref:p,children:" "}),i]}),n&&b===!0&&require$$0.jsx(style.ExpandButton,{...u,type:"button",palette:h,onClick:e=>{if(u.onClick&&u.onClick(e),l===void 0){const e=!g;x(e),a&&a(e)}},children:g?c:o})]})};
2	+ //# sourceMappingURL=Ellipsis.js.map

package/components/Text/Ellipsis.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Ellipsis.js","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n if (expandable && textRef.current) {\n textRef.current[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(textRef.current)\n }\n\n return () => {\n if (textRef.current) {\n resizeObserver.unobserve(textRef.current)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","default","entries","forEach","entry","target","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observe","unobserve","undefined","_jsxs","_Fragment","jsxs","Styled","ref","_jsx","jsx","type","palette","onClick","evt","update"],"mappings":"mUAOA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,eAAcC,SAAEC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOR,sBAAyB,YAC/CO,EAAMC,OAAOR,qBAAqBO,EAAMC,OAC1C,GACA,qBAGcC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,iBACRA,GACEP,EAEJ,MAAMQ,gBAAEA,EAAkB,WAAUC,iBAAEA,EAAmB,gBAAiBC,GAA0BN,EAEpG,MAAMO,EAAUC,aAAwB,MACxC,MAAMC,EAAgBD,aAAwB,MAC9C,MAAME,EAAqBF,MAAAA,QAAgB,GAE3C,MAAMG,EAAsBC,kCAAiBN,GAE7C,MAAOO,EAAqBC,GAA0BC,MAAQA,SAAoB,MAClF,MAAOC,EAAcC,GAAmBF,MAAAA,SAAkBb,GAAYJ,GAEtE,MAAMoB,EAA+BC,MAAWA,aAC7CC,IACCC,qBAAqBX,EAAmBY,SACxCZ,EAAmBY,QAAUC,uBAAsB,KACjD,GAAKd,EAAca,QAEnB,GAAIN,EAAc,CAChB,MAAMQ,EAAkBC,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE1Eb,EAAuBU,EAAkB3B,EAC3C,KAAO,CACL,MAAM2B,EAAkBC,KAAKC,MAAMN,EAAEQ,aAAenB,EAAca,QAAQK,cAC1E,MAAME,EAAoBJ,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE5Eb,EAAuBU,EAAkBK,EAC3C,IACA,GAEJ,CAAChC,EAAOmB,IAuBV,OApBAc,MAAAA,iBAAgB,KACV/B,GAAcQ,EAAQe,UACxBf,EAAQe,QAAQnC,qBAAuB+B,EACvC7B,eAAe0C,QAAQxB,EAAQe,UAG1B,KACDf,EAAQe,SACVjC,eAAe2C,UAAUzB,EAAQe,QACnC,IAED,CAACvB,EAAYmB,IAEhBY,MAAAA,iBAAgB,KACV5B,SAAa+B,IACfhB,EAAgBf,GACZC,GAAkBA,EAAiBD,GACzC,GACC,CAACA,EAAUC,IAGZ+B,WAAAA,KAAAC,WAAAA,SAAA,CAAAlC,SACEiC,CAAAA,WAAAE,KAACC,mBAAmB,CAACC,IAAK/B,EAASV,MAAOA,EAAOK,SAAUc,EAAaf,UACrEF,GAAcwC,WAAAC,IAACH,iBAAiB,CAACC,IAAK7B,EAAcR,SAAC,MACrDA,KAEFF,GAAcc,KAAwB,GACrC0B,WAAAA,IAACF,MAAAA,aAAmB,IACd/B,EACJmC,KAAK,SACLC,QAAS/B,EACTgC,QAAUC,IAGR,GAFItC,EAAsBqC,SAASrC,EAAsBqC,QAAQC,GAE7D1C,SAAa+B,EAAW,CAC1B,MAAMY,GAAU7B,EAEhBC,EAAgB4B,GACZ1C,GAAkBA,EAAiB0C,EACzC,GACA5C,SAEDe,EAAeZ,EAAkBC,MAGrC"}

package/components/Text/Ellipsis.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{useRef,useState,useCallback,useLayoutEffect}from'react';import ResizeObserver from'../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.mjs';import{useMergedPalette}from'../../hooks/useMergedPalette.mjs';import{TextEllipsis,LineHeight,ExpandButton}from'./style.mjs';import{jsxs,Fragment,jsx}from'react/jsx-runtime';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const Ellipsis=e=>{const{lines:t=1,defaultExpanded:r=!1,expandable:n=!1,expandButtonProps:s={},children:o,expanded:i,onExpandedChange:l}=e;const{captionExpanded:c="Свернуть",captionCollapsed:a="Развернуть",...u}=s;const d=useRef(null);const p=useRef(null);const m=useRef(-1);const f=useMergedPalette(u);const[h,x]=useState(null);const[b,g]=useState(i??r);const y=useCallback((e=>{cancelAnimationFrame(m.current),m.current=requestAnimationFrame((()=>{if(p.current)if(b){const r=Math.round(e.clientHeight/p.current.clientHeight);x(r>t)}else{const t=Math.round(e.scrollHeight/p.current.clientHeight);const r=Math.round(e.clientHeight/p.current.clientHeight);x(t>r)}}))}),[t,b]);return useLayoutEffect((()=>(n&&d.current&&(d.current[resizeHandlerSymbol]=y,resizeObserver.observe(d.current)),()=>{d.current&&resizeObserver.unobserve(d.current)})),[n,y]),useLayoutEffect((()=>{i!==void 0&&(g(i),l&&l(i))}),[i,l]),jsxs(Fragment,{children:[jsxs(TextEllipsis,{ref:d,lines:t,expanded:b,children:[n&&jsx(LineHeight,{ref:p,children:" "}),o]}),n&&h===!0&&jsx(ExpandButton,{...u,type:"button",palette:f,onClick:e=>{if(u.onClick&&u.onClick(e),i===void 0){const e=!b;g(e),l&&l(e)}},children:b?c:a})]})};export{Ellipsis};
2	+ //# sourceMappingURL=Ellipsis.mjs.map

package/components/Text/Ellipsis.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Ellipsis.mjs","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n if (expandable && textRef.current) {\n textRef.current[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(textRef.current)\n }\n\n return () => {\n if (textRef.current) {\n resizeObserver.unobserve(textRef.current)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","Ellipsis","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observe","unobserve","undefined","_jsxs","_Fragment","Styled","ref","_jsx","type","palette","onClick","evt","update"],"mappings":"2XAOA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOP,sBAAyB,YAC/CM,EAAMC,OAAOP,qBAAqBM,EAAMC,OAC1C,GACA,IAGEC,MAAAA,SAAYC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,iBACRA,GACEP,EAEJ,MAAMQ,gBAAEA,EAAkB,WAAUC,iBAAEA,EAAmB,gBAAiBC,GAA0BN,EAEpG,MAAMO,EAAUC,OAAwB,MACxC,MAAMC,EAAgBD,OAAwB,MAC9C,MAAME,EAAqBF,QAAgB,GAE3C,MAAMG,EAAsBC,iBAAiBN,GAE7C,MAAOO,EAAqBC,GAA0BC,SAA4B,MAClF,MAAOC,EAAcC,GAAmBF,SAAkBb,GAAYJ,GAEtE,MAAMoB,EAA+BC,aAClCC,IACCC,qBAAqBX,EAAmBY,SACxCZ,EAAmBY,QAAUC,uBAAsB,KACjD,GAAKd,EAAca,QAEnB,GAAIN,EAAc,CAChB,MAAMQ,EAAkBC,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE1Eb,EAAuBU,EAAkB3B,EAC3C,KAAO,CACL,MAAM2B,EAAkBC,KAAKC,MAAMN,EAAEQ,aAAenB,EAAca,QAAQK,cAC1E,MAAME,EAAoBJ,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE5Eb,EAAuBU,EAAkBK,EAC3C,IACA,GAEJ,CAAChC,EAAOmB,IAuBV,OApBAc,iBAAgB,KACV/B,GAAcQ,EAAQe,UACxBf,EAAQe,QAAQnC,qBAAuB+B,EACvC7B,eAAe0C,QAAQxB,EAAQe,UAG1B,KACDf,EAAQe,SACVjC,eAAe2C,UAAUzB,EAAQe,QACnC,IAED,CAACvB,EAAYmB,IAEhBY,iBAAgB,KACV5B,SAAa+B,IACfhB,EAAgBf,GACZC,GAAkBA,EAAiBD,GACzC,GACC,CAACA,EAAUC,IAGZ+B,KAAAC,SAAA,CAAAlC,SACEiC,CAAAA,KAACE,aAAmB,CAACC,IAAK9B,EAASV,MAAOA,EAAOK,SAAUc,EAAaf,UACrEF,GAAcuC,IAACF,WAAiB,CAACC,IAAK5B,EAAcR,SAAC,MACrDA,KAEFF,GAAcc,KAAwB,GACrCyB,IAACF,aAAmB,IACd9B,EACJiC,KAAK,SACLC,QAAS7B,EACT8B,QAAUC,IAGR,GAFIpC,EAAsBmC,SAASnC,EAAsBmC,QAAQC,GAE7DxC,SAAa+B,EAAW,CAC1B,MAAMU,GAAU3B,EAEhBC,EAAgB0B,GACZxC,GAAkBA,EAAiBwC,EACzC,GACA1C,SAEDe,EAAeZ,EAAkBC,MAGrC"}