@foxford/ui 2.28.0-beta-8fe57b3-20240527 → 2.28.1-beta-c70e081-20240528
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as i,cloneElement as r,isValidElement as s}from'react';import{withMergedProps as t}from'../../hocs/withMergedProps.js';import{Icon as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as i,cloneElement as r,isValidElement as s}from'react';import{withMergedProps as t}from'../../hocs/withMergedProps.js';import{Icon as a}from'../Icon/Icon.js';import'../Icon/icons.js';import{Skeleton as n}from'../Skeleton/Skeleton.js';import{Text as d}from'../Text/Text.js';import{SIZES as p}from'./constants.js';import{Root as c,Media as l,Content as m,Img as f,Ellipsis as h}from'./style.js';import{jsx as z,Fragment as b,jsxs as u}from'react/jsx-runtime';var y=["size","borderRadius","mediaBorderRadius","controlPosition","captionPosition","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading"];var v=t(i(((i,t)=>{var{size:p="s",borderRadius:v=0,mediaBorderRadius:P="50%",controlPosition:S="left",captionPosition:j="bottom",iconProps:g={},textProps:x={},captionProps:X={},sizeXXS:R,sizeXS:w,sizeS:I,sizeM:L,sizeL:M,sizeXL:A,text:C,children:E,control:k,icon:B,media:T,caption:F,addon:N,onColored:U,disabled:V,loading:W}=i,Z=o(i,y);var q;var D;k&&(q='label'),Z.href&&(q='a'),Z.as&&(q=Z.as),q||(D='button'),Z.type&&(D=Z.type);var G={size:p,sizeXXS:R,sizeXS:w,sizeS:I,sizeM:L,sizeL:M,sizeXL:A};var H={onColored:U,disabled:V};var J='object'==typeof k&&'object'==typeof k.props&&null!==k.props?k.props:{};var[K,O]=Array.isArray(B)?B:[B];var Q={appearance:'body',size:'inherit',color:'inherit'};var Y={appearance:'body',size:.9,sizeUnits:'em',color:'inherit'};return z(c,e(e(e(e({},G),H),Z),{},{as:q,type:D,borderRadius:v,mediaBorderRadius:P,ref:t,children:'function'==typeof E?E({textProps:Q,captionProps:Y}):z(b,{children:u(b,W?{children:[T&&z(l,{children:z(n,{width:"100%",height:"100%",borderRadius:"inherit"})}),z(m,{children:z(n,{width:"100%",borderRadius:4,children:z(d,e(e({},Q),x))})})]}:{children:[k&&'left'===S&&('function'==typeof k?k(e(e({},G),H)):r(k,e(e(e({},G),H),J))),K&&z(a,e({preset:"brand",name:'string'==typeof K?K:void 0,icon:'string'!=typeof K?K:void 0},g)),T&&z(l,{children:s(T)?T:z(f,e({alt:""},T))}),u(m,{children:[F&&'top'===j&&z(h,e(e(e({forwardedAs:"span"},Y),X),{},{children:F})),z(h,e(e(e({forwardedAs:"span"},Q),x),{},{children:null!=E?E:C})),F&&'bottom'===j&&z(h,e(e(e({forwardedAs:"span"},Y),X),{},{children:F}))]}),N,O&&z(a,e({preset:"brand",name:'string'==typeof O?O:void 0,icon:'string'!=typeof O?O:void 0},g)),k&&'right'===S&&('function'==typeof k?k(e(e({},G),H)):r(k,e(e(e({},G),H),J)))]})})}))})),{displayName:'ListItem',sizes:p});export{v as ListItem};
|
|
2
2
|
//# sourceMappingURL=ListItem.js.map
|
|
@@ -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 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 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 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 <Styled.Content>\n {caption && captionPosition === 'top' && (\n <Styled.Ellipsis forwardedAs='span' {...captionBaseProps} {...captionProps}>\n {caption}\n </Styled.Ellipsis>\n )}\n <Styled.Ellipsis forwardedAs='span' {...textBaseProps} {...textProps}>\n {children ?? text}\n </Styled.Ellipsis>\n {caption && captionPosition === 'bottom' && (\n <Styled.Ellipsis forwardedAs='span' {...captionBaseProps} {...captionProps}>\n {caption}\n </Styled.Ellipsis>\n )}\n </Styled.Content>\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","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading","restProps","_excluded","sizeProps","stateProps","controlProps","before","after","Array","isArray","textBaseProps","appearance","color","captionBaseProps","sizeUnits","_jsx","Styled.Root","_Fragment","_jsxs","Styled.Media","Skeleton","width","height","Styled.Content","Text","_objectSpread","cloneElement","Icon","preset","name","isValidElement","Styled.Img","alt","Styled.Ellipsis","forwardedAs","undefined","displayName","sizes","SIZES"],"mappings":"41BAsBMA,IAAAA,EAA2DC,EAC/DC,GAAAA,CAAYC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,aAEJA,EAAe,EAFXC,kBAGJA,EAAoB,MAHhBC,gBAIJA,EAAkB,OAJdC,gBAKJA,EAAkB,SALdC,UAMJA,EAAY,GANRC,UAOJA,EAAY,GAPRC,aAQJA,EAAe,GARXC,QASJA,EATIC,OAUJA,EAVIC,MAWJA,EAXIC,MAYJA,EAZIC,MAaJA,EAbIC,OAcJA,EAdIC,KAeJA,EAfIC,SAgBJA,EAhBIC,QAiBJA,EAjBIC,KAkBJA,EAlBIC,MAmBJA,EAnBIC,QAoBJA,EApBIC,MAqBJA,EArBIC,UAsBJA,EAtBIC,SAuBJA,EAvBIC,QAwBJA,GAEEzB,EADC0B,IACD1B,EA1BJ2B,GA4BA,IAAMC,EAAY,
|
|
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 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 <Styled.Content>\n {caption && captionPosition === 'top' && (\n <Styled.Ellipsis forwardedAs='span' {...captionBaseProps} {...captionProps}>\n {caption}\n </Styled.Ellipsis>\n )}\n <Styled.Ellipsis forwardedAs='span' {...textBaseProps} {...textProps}>\n {children ?? text}\n </Styled.Ellipsis>\n {caption && captionPosition === 'bottom' && (\n <Styled.Ellipsis forwardedAs='span' {...captionBaseProps} {...captionProps}>\n {caption}\n </Styled.Ellipsis>\n )}\n </Styled.Content>\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","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading","restProps","_excluded","rootNode","rootType","href","as","type","sizeProps","stateProps","controlProps","before","after","Array","isArray","textBaseProps","appearance","color","captionBaseProps","sizeUnits","_jsx","Styled.Root","_Fragment","_jsxs","Styled.Media","Skeleton","width","height","Styled.Content","Text","_objectSpread","cloneElement","Icon","preset","name","isValidElement","Styled.Img","alt","Styled.Ellipsis","forwardedAs","undefined","displayName","sizes","SIZES"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{responsiveSize as t}from'../../mixins/responsive-size.js';import{responsiveMargin as n}from'../../mixins/responsive-margin.js';import{focus as
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{responsiveSize as t}from'../../mixins/responsive-size.js';import{responsiveMargin as n}from'../../mixins/responsive-margin.js';import{focus as a}from'../../mixins/focus.js';import{createShouldForwardProp as c}from'../../shared/utils/style.js';import{Text as l}from'../Text/Text.js';var s=c((o=>!['danger','active','onColored','mediaBorderRadius','borderRadius'].includes(o)));var d=r.span.withConfig({componentId:"fox-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%;}"]);var i=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n &:hover {\n color: ").concat(o.colorHover,";\n background-color: ").concat(o.backgroundColorHover,";\n }\n\n & ").concat(d," img {\n background-color: ").concat(o.mediaPlaceholderColor,";\n }\n");var m={onColored:{danger:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['alert-error'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['alert-error'],mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette))))},secondary:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100-active'],colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette))))},primary:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100-active'],colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncontrast-hover']},r.palette))))}},default:{danger:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['alert-error'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['alert-error'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['alert-error'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['alert-error'],backgroundColorHover:r.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))},secondary:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100-active'],colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))},primary:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100-active'],colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))}}};var h=r.button.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),padding:'0.4em 0.8em'})}).withConfig({componentId:"fox-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: ".concat(o.disabled?'not-allowed':'pointer',";\n border-radius: ").concat('string'==typeof o.borderRadius?o.borderRadius:"".concat(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 & ").concat(d," {\n border-radius: ").concat('string'==typeof o.mediaBorderRadius?o.mediaBorderRadius:"".concat(o.mediaBorderRadius,"px"),";\n }\n\n & > *:not(:last-child) {\n margin-right: 12px;\n }\n ")),(o=>{var r=o.onColored?m.onColored:m.default;var e=r.primary;return o.secondary&&(e=r.secondary),o.danger&&(e=r.danger),o.disabled?e.disabled:o.active?e.active:e.default}),a,t,n);var b=r.span.withConfig({componentId:"fox-ui__sc-1a62xqm-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);var p=r.img.withConfig({componentId:"fox-ui__sc-1a62xqm-3"})(["box-sizing:border-box;border-radius:inherit;object-fit:contain;"]);var g=r(l).withConfig({componentId:"fox-ui__sc-1a62xqm-4"})(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:100%;width:5ch;"]);export{b as Content,g as Ellipsis,p as Img,d as Media,h as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -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 } from './types'\n\nconst shouldForwardListItemProp = createShouldForwardProp(\n (propKey) => !['danger', '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-oncolor-hover'],\n ...props.palette,\n })}\n `,\n active: css<StyledListItemProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['alert-error'],\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-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-oncolor-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-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-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-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-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-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-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-oncolor-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['content-oncolor-primary'],\n backgroundColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['alert-error'],\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 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.div\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.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 Ellipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 100%;\n width: 5ch;\n`\n"],"names":["shouldForwardListItemProp","createShouldForwardProp","propKey","includes","Media","styled","span","withConfig","componentId","template","palette","color","concat","backgroundColor","colorHover","backgroundColorHover","mediaPlaceholderColor","COLOR_SCHEMA","onColored","danger","disabled","css","props","_objectSpread","theme","colors","transparent","active","default","secondary","primary","Root","div","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","borderRadius","mediaBorderRadius","schema","schemaVariant","focus","responsiveSize","responsiveMargin","Content","Img","img","Ellipsis","Text"],"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 { Text } from 'components/Text'\nimport type { StyledListItemProps, ListItemPalette } from './types'\n\nconst shouldForwardListItemProp = createShouldForwardProp(\n (propKey) => !['danger', '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['content-oncolor-primary'],\n backgroundColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['alert-error'],\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['content-oncolor-primary'],\n backgroundColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['alert-error'],\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 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.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 Ellipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 100%;\n width: 5ch;\n`\n"],"names":["shouldForwardListItemProp","createShouldForwardProp","propKey","includes","Media","styled","span","withConfig","componentId","template","palette","color","concat","backgroundColor","colorHover","backgroundColorHover","mediaPlaceholderColor","COLOR_SCHEMA","onColored","danger","disabled","css","props","_objectSpread","theme","colors","transparent","active","default","secondary","primary","Root","button","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","borderRadius","mediaBorderRadius","schema","schemaVariant","focus","responsiveSize","responsiveMargin","Content","Img","img","Ellipsis","Text"],"mappings":"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"}
|
package/dts/index.d.ts
CHANGED
|
@@ -2106,8 +2106,8 @@ declare type ListItemPalette = {
|
|
|
2106
2106
|
mediaPlaceholderColor: CSSColor;
|
|
2107
2107
|
};
|
|
2108
2108
|
interface ListItemProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type'>, Omit<React.AnchorHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type' | 'media'> {
|
|
2109
|
-
/** Root node
|
|
2110
|
-
as?:
|
|
2109
|
+
/** Root node type */
|
|
2110
|
+
as?: React.ElementType;
|
|
2111
2111
|
/** Main text content or render function */
|
|
2112
2112
|
children?: React.ReactNode | ((props: Required<Pick<ListItemProps, 'textProps' | 'captionProps'>>) => React.ReactNode);
|
|
2113
2113
|
/** Control to render (checkbox, radio, button, etc.) */
|