@foxford/ui 2.38.0-beta-125a219-20240813 → 2.38.0-beta-ff3ed8d-20240813

package/components/InputRadio/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');const shouldForwardInputRadioProp=style.createShouldForwardProp((o=>!['inline','error','success','onColored','disabled'].includes(o)));const Input=styled.input.withConfig({componentId:"fox-ui__sc-rgocm7-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;&:focus{outline:none;}"]);const InputMask=styled.span.withConfig({componentId:"fox-ui__sc-rgocm7-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;&::before{content:'';position:absolute;width:40%;height:40%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;}"]);const template=o=>`\n  & > ${InputMask} {\n    background-color: ${o.backgroundColor};\n    border-color: ${o.borderColor};\n  }\n  & > ${InputMask}::before {\n    background-color: ${o.color};\n  }\n  &:hover > ${InputMask} {\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:hover > ${InputMask}::before {\n    background-color: ${o.colorHover};\n  }\n  & > ${Input}:checked:not(:disabled) + ${InputMask} {\n    background-color: ${o.backgroundColorChecked};\n    border-color: ${o.borderColorChecked};\n  }\n  & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n    background-color: ${o.colorChecked};\n  }\n  & > ${Input}:disabled:not(:checked) + ${InputMask} {\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n    background-color: ${o.colorDisabled};\n  }\n  & > ${Input}:disabled:checked + ${InputMask} {\n    background-color: ${o.backgroundColorDisabledChecked};\n    border-color: ${o.borderColorDisabledChecked};\n  }\n  & > ${Input}:disabled:checked + ${InputMask}::before {\n    background-color: ${o.colorDisabledChecked};\n  }\n`;const COLOR_SCHEMA={default:{error:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['alert-bg-error-500'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-error-500'],borderColorChecked:o.theme.colors['alert-bg-error-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['alert-bg-success-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['alert-bg-success-500'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-success-500'],borderColorChecked:o.theme.colors['alert-bg-success-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-small'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['border-brand-primary'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['bg-brand-primary-basic'],borderColorChecked:o.theme.colors['bg-brand-primary-basic'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette})))},onColored:{error:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['alert-error'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['alert-error'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-error-500'],borderColorChecked:o.theme.colors['alert-bg-error-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['alert-success'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-success-500'],borderColorChecked:o.theme.colors['alert-bg-success-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['bg-brand-primary-basic'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-small'],colorHover:o.theme.colors['bg-brand-primary-basic'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['border-brand-primary'],colorChecked:o.theme.colors['bg-brand-primary-basic'],backgroundColorChecked:o.theme.colors['bg-oncolor-primary'],borderColorChecked:o.theme.colors['bg-oncolor-primary'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette})))}};const Root=styled.span.withConfig({shouldForwardProp:shouldForwardInputRadioProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,height:'1em',width:'1em'})}).withConfig({componentId:"fox-ui__sc-rgocm7-2"})([""," "," ",""],(o=>`\n      box-sizing: border-box;\n      isolation: isolate;\n      position: relative;\n      display: ${o.inline?'inline-flex':'flex'};\n      border-radius: 50%;\n      flex-shrink: 0;\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      & > ${Input} {\n        cursor: inherit;\n      }\n      & > ${Input}:checked + ${InputMask}::before {\n        opacity: 1;\n      }\n      & > ${Input}:focus-visible + ${InputMask} {\n        box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n  `),(o=>{const e=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;return o.error?e.error:o.success?e.success:e.default}),responsiveSize.responsiveSize);exports.Input=Input,exports.InputMask=InputMask,exports.Root=Root;

package/components/InputRadio/style.mjs

@@ -0,0 +1 @@
+import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';const shouldForwardInputRadioProp=createShouldForwardProp((o=>!['inline','error','success','onColored','disabled'].includes(o)));const Input=styled.input.withConfig({componentId:"fox-ui__sc-rgocm7-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;&:focus{outline:none;}"]);const InputMask=styled.span.withConfig({componentId:"fox-ui__sc-rgocm7-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;&::before{content:'';position:absolute;width:40%;height:40%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;}"]);const template=o=>`\n  & > ${InputMask} {\n    background-color: ${o.backgroundColor};\n    border-color: ${o.borderColor};\n  }\n  & > ${InputMask}::before {\n    background-color: ${o.color};\n  }\n  &:hover > ${InputMask} {\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:hover > ${InputMask}::before {\n    background-color: ${o.colorHover};\n  }\n  & > ${Input}:checked:not(:disabled) + ${InputMask} {\n    background-color: ${o.backgroundColorChecked};\n    border-color: ${o.borderColorChecked};\n  }\n  & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n    background-color: ${o.colorChecked};\n  }\n  & > ${Input}:disabled:not(:checked) + ${InputMask} {\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n    background-color: ${o.colorDisabled};\n  }\n  & > ${Input}:disabled:checked + ${InputMask} {\n    background-color: ${o.backgroundColorDisabledChecked};\n    border-color: ${o.borderColorDisabledChecked};\n  }\n  & > ${Input}:disabled:checked + ${InputMask}::before {\n    background-color: ${o.colorDisabledChecked};\n  }\n`;const COLOR_SCHEMA={default:{error:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['alert-bg-error-500'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-error-500'],borderColorChecked:o.theme.colors['alert-bg-error-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['alert-bg-success-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['alert-bg-success-500'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-success-500'],borderColorChecked:o.theme.colors['alert-bg-success-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-small'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['border-brand-primary'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['bg-brand-primary-basic'],borderColorChecked:o.theme.colors['bg-brand-primary-basic'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette})))},onColored:{error:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['alert-error'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['alert-error'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-error-500'],borderColorChecked:o.theme.colors['alert-bg-error-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['alert-success'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-success-500'],borderColorChecked:o.theme.colors['alert-bg-success-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['bg-brand-primary-basic'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-small'],colorHover:o.theme.colors['bg-brand-primary-basic'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['border-brand-primary'],colorChecked:o.theme.colors['bg-brand-primary-basic'],backgroundColorChecked:o.theme.colors['bg-oncolor-primary'],borderColorChecked:o.theme.colors['bg-oncolor-primary'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette})))}};const Root=styled.span.withConfig({shouldForwardProp:shouldForwardInputRadioProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,height:'1em',width:'1em'})}).withConfig({componentId:"fox-ui__sc-rgocm7-2"})([""," "," ",""],(o=>`\n      box-sizing: border-box;\n      isolation: isolate;\n      position: relative;\n      display: ${o.inline?'inline-flex':'flex'};\n      border-radius: 50%;\n      flex-shrink: 0;\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      & > ${Input} {\n        cursor: inherit;\n      }\n      & > ${Input}:checked + ${InputMask}::before {\n        opacity: 1;\n      }\n      & > ${Input}:focus-visible + ${InputMask} {\n        box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n  `),(o=>{const e=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;return o.error?e.error:o.success?e.success:e.default}),responsiveSize);export{Input,InputMask,Root};

package/components/ListItem/ListItem.js

@@ -0,0 +1 @@
+'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;

package/components/ListItem/ListItem.mjs

@@ -0,0 +1 @@
+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};

package/components/ListItem/constants.js

@@ -0,0 +1 @@
+'use strict';exports.SIZES={xxxl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},xxl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},xl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},l:{fontSize:18,paddingTop:10,paddingRight:16,paddingBottom:10,paddingLeft:16},m:{fontSize:16,paddingTop:8,paddingRight:12,paddingBottom:8,paddingLeft:12},s:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xxs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xxxs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10}};

package/components/ListItem/constants.mjs

@@ -0,0 +1 @@
+const SIZES={xxxl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},xxl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},xl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},l:{fontSize:18,paddingTop:10,paddingRight:16,paddingBottom:10,paddingLeft:16},m:{fontSize:16,paddingTop:8,paddingRight:12,paddingBottom:8,paddingLeft:12},s:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xxs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xxxs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10}};export{SIZES};

package/components/ListItem/style.js

@@ -0,0 +1 @@
+'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');const shouldForwardListItemProp=style.createShouldForwardProp((o=>!['danger','success','active','onColored','mediaBorderRadius','borderRadius'].includes(o)));const Media=styled.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%;}"]);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.button.withConfig({shouldForwardProp:shouldForwardListItemProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,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: ${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.span.withConfig({componentId:"fox-ui__sc-1a62xqm-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);const Img=styled.img.withConfig({componentId:"fox-ui__sc-1a62xqm-3"})(["box-sizing:border-box;border-radius:inherit;object-fit:contain;"]);const Typography=styled(Text.Text).withConfig({shouldForwardProp:o=>o!=='ellipsis'}).withConfig({componentId:"fox-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;

package/components/ListItem/style.mjs

@@ -0,0 +1 @@
+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({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%;}"]);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({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: ${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({componentId:"fox-ui__sc-1a62xqm-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);const Img=styled.img.withConfig({componentId:"fox-ui__sc-1a62xqm-3"})(["box-sizing:border-box;border-radius:inherit;object-fit:contain;"]);const Typography=styled(Text).withConfig({shouldForwardProp:o=>o!=='ellipsis'}).withConfig({componentId:"fox-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};

package/components/Menu/Menu.js

@@ -0,0 +1 @@
+'use strict';var React=require('react');var ramda=require('ramda');var withMergedProps=require('../../hocs/withMergedProps.js');var dom=require('../../shared/utils/dom.js');var require$$0=require('react/jsx-runtime');var MenuComponent=require('../MenuComponent/MenuComponent.js');var MenuList=require('../MenuList/MenuList.js');var MenuContainer=require('../MenuContainer/MenuContainer.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');var constants=require('../MenuComponent/constants.js');var Tooltip=require('../Tooltip/Tooltip.js');const Menu=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:n="m",disableFlip:t=!0,offset:s=8,placement:o="bottom-start",styles:i={},sizes:a,sizeUnits:u,render:p,primary:c,secondary:l,palette:M,autoFocus:m,disableAutoFocus:d,maxHeight:v,...f}=e;const C=React.useRef(null);return require$$0.jsx(Tooltip.Tooltip,{...f,ref:r,preset:"brand",size:n,hideArrow:!0,getPopper:(e,r)=>{e.state.elements.reference instanceof HTMLElement&&(C.current=e.state.elements.reference),f.getPopper&&f.getPopper(e,r)},callback:(e,r)=>{e==='close'&&C.current instanceof HTMLElement&&dom.focusFirstFocusable(C.current),f.callback&&f.callback(e,r)},disableFlip:t,offset:s,placement:o,styles:ramda.mergeDeepLeft(i,l?{floater:{filter:'none'},wrapper:{cursor:'pointer'}}:{wrapper:{cursor:'pointer'}}),component:require$$0.jsx(MenuComponent.MenuComponent,{sizes:a,sizeUnits:u,autoFocus:m,disableAutoFocus:d,primary:c,secondary:l,palette:M,maxHeight:v,children:p})})})),{displayName:'Menu',sizes:constants.SIZES}),{Component:MenuComponent.MenuComponent,List:MenuList.MenuList,Container:MenuContainer.MenuContainer,Divider:MenuDivider.MenuDivider});exports.Menu=Menu;

package/components/Menu/Menu.mjs

@@ -0,0 +1 @@
+import{forwardRef,useRef}from'react';import{mergeDeepLeft}from'ramda';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{jsx}from'react/jsx-runtime';import{MenuComponent}from'../MenuComponent/MenuComponent.mjs';import{MenuList}from'../MenuList/MenuList.mjs';import{MenuContainer}from'../MenuContainer/MenuContainer.mjs';import{MenuDivider}from'../MenuDivider/MenuDivider.mjs';import{SIZES}from'../MenuComponent/constants.mjs';import{Tooltip}from'../Tooltip/Tooltip.mjs';const Menu=Object.assign(withMergedProps(forwardRef(((e,t)=>{const{size:o="m",disableFlip:r=!0,offset:n=8,placement:s="bottom-start",styles:i={},sizes:m,sizeUnits:p,render:a,primary:u,secondary:c,palette:l,autoFocus:f,disableAutoFocus:M,maxHeight:d,...j}=e;const b=useRef(null);return jsx(Tooltip,{...j,ref:t,preset:"brand",size:o,hideArrow:!0,getPopper:(e,t)=>{e.state.elements.reference instanceof HTMLElement&&(b.current=e.state.elements.reference),j.getPopper&&j.getPopper(e,t)},callback:(e,t)=>{e==='close'&&b.current instanceof HTMLElement&&focusFirstFocusable(b.current),j.callback&&j.callback(e,t)},disableFlip:r,offset:n,placement:s,styles:mergeDeepLeft(i,c?{floater:{filter:'none'},wrapper:{cursor:'pointer'}}:{wrapper:{cursor:'pointer'}}),component:jsx(MenuComponent,{sizes:m,sizeUnits:p,autoFocus:f,disableAutoFocus:M,primary:u,secondary:c,palette:l,maxHeight:d,children:a})})})),{displayName:'Menu',sizes:SIZES}),{Component:MenuComponent,List:MenuList,Container:MenuContainer,Divider:MenuDivider});export{Menu};

package/components/MenuComponent/MenuComponent.js

@@ -0,0 +1 @@
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var dom=require('../../shared/utils/dom.js');var constants=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const noop=()=>{};const MenuComponent=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const{size:t="m",maxHeight:o=240,closeFn:r=noop,sizeXXS:n,sizeXS:i,sizeS:c,sizeM:u,sizeL:a,sizeXL:l,children:p,autoFocus:m,disableAutoFocus:d,showCloseButton:z,closeButtonProps:f,onUnmount:h,...R}=e;const S=React.useRef(null);React.useImperativeHandle(s,(()=>S.current)),React.useEffect((()=>()=>{h&&h()}),[]),React.useEffect((()=>{const e=setTimeout((()=>{!d&&S.current&&dom.focusFirstFocusable(S.current)}),0);return()=>{clearTimeout(e)}}),[m,d]);const M={size:t,sizeXXS:n,sizeXS:i,sizeS:c,sizeM:u,sizeL:a,sizeXL:l};const q={showCloseButton:z,closeButtonProps:f,closeFn:r};const v=React.isValidElement(p)&&typeof p.props=='object'&&p.props!==null?p.props:{};return require$$0.jsx(style.Root,{...R,...M,maxHeight:o,ref:S,children:React.isValidElement(p)?React.cloneElement(p,{...M,...q,...v}):typeof p=='function'?p({...M,...q}):void 0})})),{displayName:'MenuComponent',sizes:constants.SIZES});exports.SIZES=constants.SIZES,exports.MenuComponent=MenuComponent;

package/components/MenuComponent/MenuComponent.mjs

@@ -0,0 +1 @@
+import{forwardRef,useRef,useImperativeHandle,useEffect,isValidElement,cloneElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{SIZES}from'./constants.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';const noop=()=>{};const MenuComponent=withMergedProps(forwardRef(((e,o)=>{const{size:s="m",maxHeight:t=240,closeFn:n=noop,sizeXXS:r,sizeXS:i,sizeS:c,sizeM:m,sizeL:u,sizeXL:l,children:p,autoFocus:f,disableAutoFocus:a,showCloseButton:d,closeButtonProps:z,onUnmount:S,...h}=e;const E=useRef(null);useImperativeHandle(o,(()=>E.current)),useEffect((()=>()=>{S&&S()}),[]),useEffect((()=>{const e=setTimeout((()=>{!a&&E.current&&focusFirstFocusable(E.current)}),0);return()=>{clearTimeout(e)}}),[f,a]);const j={size:s,sizeXXS:r,sizeXS:i,sizeS:c,sizeM:m,sizeL:u,sizeXL:l};const F={showCloseButton:d,closeButtonProps:z,closeFn:n};const M=isValidElement(p)&&typeof p.props=='object'&&p.props!==null?p.props:{};return jsx(Root,{...h,...j,maxHeight:t,ref:E,children:isValidElement(p)?cloneElement(p,{...j,...F,...M}):typeof p=='function'?p({...j,...F}):void 0})})),{displayName:'MenuComponent',sizes:SIZES});export{MenuComponent,SIZES};

package/components/MenuComponent/constants.js

@@ -0,0 +1 @@
+'use strict';exports.SIZES={xxxl:{maxWidth:560,minWidth:'min-content'},xxl:{maxWidth:560,minWidth:'min-content'},xl:{maxWidth:560,minWidth:'min-content'},l:{maxWidth:560,minWidth:'min-content'},m:{maxWidth:480,minWidth:'min-content'},s:{maxWidth:280,minWidth:'min-content'},xs:{maxWidth:280,minWidth:'min-content'},xxs:{maxWidth:280,minWidth:'min-content'},xxxs:{maxWidth:280,minWidth:'min-content'}};

package/components/MenuComponent/constants.mjs

@@ -0,0 +1 @@
+const SIZES={xxxl:{maxWidth:560,minWidth:'min-content'},xxl:{maxWidth:560,minWidth:'min-content'},xl:{maxWidth:560,minWidth:'min-content'},l:{maxWidth:560,minWidth:'min-content'},m:{maxWidth:480,minWidth:'min-content'},s:{maxWidth:280,minWidth:'min-content'},xs:{maxWidth:280,minWidth:'min-content'},xxs:{maxWidth:280,minWidth:'min-content'},xxxs:{maxWidth:280,minWidth:'min-content'}};export{SIZES};

package/components/MenuComponent/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');const shouldForwardMenuComponentProp=style.createShouldForwardProp((o=>!['black','elevated','maxHeight'].includes(o)));const template=o=>`\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n  box-shadow: 0 6px 20px ${o.shadowColor};\n`;const COLOR_SCHEMA={primary:styled.css(["",""],(o=>template({backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors.transparent,shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette}))),secondary:styled.css(["",""],(o=>template({backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette})))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardMenuComponentProp}).attrs({dynamicSizeDeclaration:(o,e)=>({width:typeof o=='string'?o:`${o}${e}`})}).withConfig({componentId:"fox-ui__sc-10iu45v-0"})([""," "," ",""],(o=>`\n    box-sizing: border-box;\n    isolation: isolate;\n    border-radius: 12px;\n    border: 1px solid transparent;\n    overflow-x: hidden;\n    overflow-y: auto;\n    scrollbar-width: thin;\n    max-height: ${typeof o.maxHeight=='string'?o.maxHeight:`${o.maxHeight}px`};\n  `),(o=>o.secondary?COLOR_SCHEMA.secondary:COLOR_SCHEMA.primary),responsiveSize.responsiveSize);exports.COLOR_SCHEMA=COLOR_SCHEMA,exports.Root=Root;

package/components/MenuComponent/style.mjs

@@ -0,0 +1 @@
+import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';const shouldForwardMenuComponentProp=createShouldForwardProp((o=>!['black','elevated','maxHeight'].includes(o)));const template=o=>`\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n  box-shadow: 0 6px 20px ${o.shadowColor};\n`;const COLOR_SCHEMA={primary:css(["",""],(o=>template({backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors.transparent,shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette}))),secondary:css(["",""],(o=>template({backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette})))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardMenuComponentProp}).attrs({dynamicSizeDeclaration:(o,r)=>({width:typeof o=='string'?o:`${o}${r}`})}).withConfig({componentId:"fox-ui__sc-10iu45v-0"})([""," "," ",""],(o=>`\n    box-sizing: border-box;\n    isolation: isolate;\n    border-radius: 12px;\n    border: 1px solid transparent;\n    overflow-x: hidden;\n    overflow-y: auto;\n    scrollbar-width: thin;\n    max-height: ${typeof o.maxHeight=='string'?o.maxHeight:`${o.maxHeight}px`};\n  `),(o=>o.secondary?COLOR_SCHEMA.secondary:COLOR_SCHEMA.primary),responsiveSize);export{COLOR_SCHEMA,Root};

package/components/MenuContainer/MenuContainer.js

@@ -0,0 +1 @@
+'use strict';var React=require('react');var style=require('./style.js');var require$$0=require('react/jsx-runtime');exports.MenuContainer=React.forwardRef(((e,r)=>{const{closeButtonProps:s={},children:t,showCloseButton:o,closeFn:i}=e;return require$$0.jsxs(style.Root,{ref:r,children:[o&&require$$0.jsx(style.CloseButton,{square:!0,size:"m",icon:"close",...s,onClick:e=>{i&&i(),s.onClick&&s.onClick(e)}}),t]})}));

package/components/MenuContainer/MenuContainer.mjs

@@ -0,0 +1 @@
+import{forwardRef}from'react';import{Root,CloseButton}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';const MenuContainer=forwardRef(((o,e)=>{const{closeButtonProps:r={},children:t,showCloseButton:n,closeFn:s}=o;return jsxs(Root,{ref:e,children:[n&&jsx(CloseButton,{square:!0,size:"m",icon:"close",...r,onClick:o=>{s&&s(),r.onClick&&r.onClick(o)}}),t]})}));export{MenuContainer};

package/components/MenuContainer/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var IconButton=require('../IconButton/IconButton.js');const shouldForwardMenuContainerProp=style.createShouldForwardProp();const Root=styled.div.withConfig({shouldForwardProp:shouldForwardMenuContainerProp}).withConfig({componentId:"fox-ui__sc-1u4llna-0"})(["box-sizing:border-box;position:relative;padding:8px;border-radius:inherit;"]);const CloseButton=styled(IconButton.IconButton).withConfig({componentId:"fox-ui__sc-1u4llna-1"})(["position:absolute;top:8px;right:8px;"]);exports.CloseButton=CloseButton,exports.Root=Root;

package/components/MenuContainer/style.mjs

@@ -0,0 +1 @@
+import styled from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const shouldForwardMenuContainerProp=createShouldForwardProp();const Root=styled.div.withConfig({shouldForwardProp:shouldForwardMenuContainerProp}).withConfig({componentId:"fox-ui__sc-1u4llna-0"})(["box-sizing:border-box;position:relative;padding:8px;border-radius:inherit;"]);const CloseButton=styled(IconButton).withConfig({componentId:"fox-ui__sc-1u4llna-1"})(["position:absolute;top:8px;right:8px;"]);export{CloseButton,Root};

package/components/MenuDivider/MenuDivider.js

@@ -0,0 +1 @@
+'use strict';var React=require('react');var useMergedPalette=require('../../hooks/useMergedPalette.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Text=require('../Text/Text.js');exports.MenuDivider=React.forwardRef(((e,r)=>{const{textProps:t={},children:s,text:i,...a}=e;const o=useMergedPalette.useMergedPalette(a);return require$$0.jsxs(style.Root,{...a,palette:o,ref:r,children:[(s||i)&&require$$0.jsx(Text.Text,{appearance:"body",size:"xs",color:"inherit",marginTop:8,marginBottom:4,...t,children:s??i}),require$$0.jsx(style.HorizontalLine,{})]})}));

package/components/MenuDivider/MenuDivider.mjs

@@ -0,0 +1 @@
+import{forwardRef}from'react';import{useMergedPalette}from'../../hooks/useMergedPalette.mjs';import{Root,HorizontalLine}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const MenuDivider=forwardRef(((e,r)=>{const{textProps:t={},children:o,text:i,...s}=e;const n=useMergedPalette(s);return jsxs(Root,{...s,palette:n,ref:r,children:[(o||i)&&jsx(Text,{appearance:"body",size:"xs",color:"inherit",marginTop:8,marginBottom:4,...t,children:o??i}),jsx(HorizontalLine,{})]})}));export{MenuDivider};

package/components/MenuDivider/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');const shouldForwardMenuDividerProp=require('../../shared/utils/style.js').createShouldForwardProp();const HorizontalLine=styled.div.withConfig({componentId:"fox-ui__sc-cur5va-0"})(["box-sizing:border-box;height:1px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardMenuDividerProp}).withConfig({componentId:"fox-ui__sc-cur5va-1"})(["box-sizing:border-box;width:100%;min-width:min-content;padding:4px 16px;",""],(o=>{return`\n  color: ${(r={color:o.theme.colors['content-onmain-tertiary'],lineColor:o.theme.colors['border-onmain-default-large'],...o.palette}).color};\n\n  & > ${HorizontalLine} {\n    background-color: ${r.lineColor};\n  }\n`;var r}));exports.HorizontalLine=HorizontalLine,exports.Root=Root;

package/components/MenuDivider/style.mjs

@@ -0,0 +1 @@
+import styled from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const shouldForwardMenuDividerProp=createShouldForwardProp();const HorizontalLine=styled.div.withConfig({componentId:"fox-ui__sc-cur5va-0"})(["box-sizing:border-box;height:1px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardMenuDividerProp}).withConfig({componentId:"fox-ui__sc-cur5va-1"})(["box-sizing:border-box;width:100%;min-width:min-content;padding:4px 16px;",""],(o=>{return`\n  color: ${(r={color:o.theme.colors['content-onmain-tertiary'],lineColor:o.theme.colors['border-onmain-default-large'],...o.palette}).color};\n\n  & > ${HorizontalLine} {\n    background-color: ${r.lineColor};\n  }\n`;var r}));export{HorizontalLine,Root};

package/components/MenuList/MenuList.js

@@ -0,0 +1 @@
+'use strict';var React=require('react');var dom=require('../../shared/utils/dom.js');var constants=require('../../shared/constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const HOT_KEYS=[constants.keyboardKeys.ArrowUp.key,constants.keyboardKeys.ArrowDown.key];exports.MenuList=React.forwardRef(((e,s)=>{const{role:r="list",gap:t=4,size:i,sizeXXS:n,sizeXS:o,sizeS:c,sizeM:a,sizeL:l,sizeXL:d,sizeUnits:p,sizes:u,...y}=e;const z={size:i,sizeXXS:n,sizeXS:o,sizeS:c,sizeM:a,sizeL:l,sizeXL:d,sizeUnits:p,sizes:u};const h=React.isValidElement(y.children)&&y.children.type===React.Fragment&&typeof y.children.props=='object'&&y.children.props!==null?y.children.props.children:y.children;return require$$0.jsx(style.Root,{...y,role:r,gap:t,onKeyDown:e=>{if(y.onKeyDown&&y.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const s=[...e.currentTarget.children];let r=s.findIndex((s=>s.contains(e.target)));for(;r>=0&&r<s.length;){r=constants.keyboardKeys.ArrowUp.validate(e.key)?--r:++r;const t=s[r];if(t instanceof HTMLElement&&dom.focusFirstFocusable(t))break}}},ref:s,children:React.Children.map(h,((e,s)=>require$$0.jsx("li",React.isValidElement(e)?{children:React.cloneElement(e,{...z,...typeof e.props=='object'&&e.props!==null?e.props:{}})}:{children:e},s)))})}));

package/components/MenuList/MenuList.mjs

@@ -0,0 +1 @@
+import{forwardRef,isValidElement,Fragment,Children,cloneElement}from'react';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';const HOT_KEYS=[keyboardKeys.ArrowUp.key,keyboardKeys.ArrowDown.key];const MenuList=forwardRef(((e,s)=>{const{role:r="list",gap:o=4,size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:a,sizeXL:d,sizeUnits:p,sizes:m,...f}=e;const y={size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:a,sizeXL:d,sizeUnits:p,sizes:m};const z=isValidElement(f.children)&&f.children.type===Fragment&&typeof f.children.props=='object'&&f.children.props!==null?f.children.props.children:f.children;return jsx(Root,{...f,role:r,gap:o,onKeyDown:e=>{if(f.onKeyDown&&f.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const s=[...e.currentTarget.children];let r=s.findIndex((s=>s.contains(e.target)));for(;r>=0&&r<s.length;){r=keyboardKeys.ArrowUp.validate(e.key)?--r:++r;const o=s[r];if(o instanceof HTMLElement&&focusFirstFocusable(o))break}}},ref:s,children:Children.map(z,((e,s)=>jsx("li",isValidElement(e)?{children:cloneElement(e,{...y,...typeof e.props=='object'&&e.props!==null?e.props:{}})}:{children:e},s)))})}));export{MenuList};

package/components/MenuList/style.js

@@ -0,0 +1 @@
+'use strict';const Root=require('styled-components').ul.withConfig({shouldForwardProp:n=>!['showCloseButton','closeButtonProps','closeFn','gap'].includes(n)}).withConfig({componentId:"fox-ui__sc-afqmnb-0"})(["",""],(n=>`\n    box-sizing: border-box;\n    appearance: none;\n    list-style-type: none;\n    margin: 0;\n    padding: 8px;\n    border-radius: inherit;\n\n    & > li:not(:last-child) {\n      margin-bottom: ${typeof n.gap=='string'?n.gap:`${n.gap}px`};\n    }  \n  `));exports.Root=Root;

package/components/MenuList/style.mjs

@@ -0,0 +1 @@
+import styled from'styled-components';const Root=styled.ul.withConfig({shouldForwardProp:n=>!['showCloseButton','closeButtonProps','closeFn','gap'].includes(n)}).withConfig({componentId:"fox-ui__sc-afqmnb-0"})(["",""],(n=>`\n    box-sizing: border-box;\n    appearance: none;\n    list-style-type: none;\n    margin: 0;\n    padding: 8px;\n    border-radius: inherit;\n\n    & > li:not(:last-child) {\n      margin-bottom: ${typeof n.gap=='string'?n.gap:`${n.gap}px`};\n    }  \n  `));export{Root};

package/components/Modal/Close.js

@@ -0,0 +1 @@
+'use strict';var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');exports.ModalClose=({className:e,onClick:r})=>require$$0.jsx(style.ModalClose,{className:e,onClick:r,children:require$$0.jsx(Icon.Icon,{name:"tinyCross",color:"#D9D9D9"})});

package/components/Modal/Close.mjs

@@ -0,0 +1 @@
+import{ModalClose as ModalClose$1}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';function ModalClose({className:o,onClick:s}){return jsx(ModalClose$1,{className:o,onClick:s,children:jsx(Icon,{name:"tinyCross",color:"#D9D9D9"})})}export{ModalClose};

package/components/Modal/Modal.js

@@ -0,0 +1 @@
+'use strict';var ReactModal=require('react-modal');var Close=require('./Close.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');function Modal(e){const{blurredOverlay:l,children:o,closeTimeoutMS:a,contentLabel:s,isOpen:r,onAfterOpen:n,onRequestClose:t,overlayClassName:d,role:i,shouldCloseOnOverlayClick:c,width:u,valign:m,className:y,style:C,zIndex:v}=e;return require$$0.jsx(style.Modal,{blurredOverlay:l,closeTimeoutMS:a,contentLabel:s,isOpen:Boolean(r),onAfterOpen:n,onRequestClose:t,portalClassName:y,overlayClassName:d,bodyOpenClassName:"modal--open",role:i,zIndex:v,valign:m,width:u,shouldCloseOnOverlayClick:c,children:require$$0.jsx("div",{style:C,children:o})})}typeof window!='undefined'&&(()=>{const e=document.body;e&&e instanceof HTMLElement&&ReactModal.setAppElement(e)})(),Modal.defaultProps={blurredOverlay:!1,closeTimeoutMS:0,zIndex:9e3,contentLabel:'',isOpen:!1,role:'dialog',shouldCloseOnOverlayClick:!0,width:'m',valign:'center',className:'modal'},Modal.Close=Close.ModalClose,Modal.displayName='Modal',exports.Modal=Modal;

package/components/Modal/Modal.mjs

@@ -0,0 +1 @@
+import ReactModal from'react-modal';import{ModalClose}from'./Close.mjs';import{Modal as Modal$1}from'./style.mjs';import{jsx}from'react/jsx-runtime';function Modal(e){const{blurredOverlay:l,children:o,closeTimeoutMS:a,contentLabel:s,isOpen:n,onAfterOpen:t,onRequestClose:d,overlayClassName:r,role:i,shouldCloseOnOverlayClick:m,width:c,valign:p,className:u,style:M,zIndex:C}=e;return jsx(Modal$1,{blurredOverlay:l,closeTimeoutMS:a,contentLabel:s,isOpen:Boolean(n),onAfterOpen:t,onRequestClose:d,portalClassName:u,overlayClassName:r,bodyOpenClassName:"modal--open",role:i,zIndex:C,valign:p,width:c,shouldCloseOnOverlayClick:m,children:jsx("div",{style:M,children:o})})}typeof window!='undefined'&&(()=>{const e=document.body;e&&e instanceof HTMLElement&&ReactModal.setAppElement(e)})(),Modal.defaultProps={blurredOverlay:!1,closeTimeoutMS:0,zIndex:9e3,contentLabel:'',isOpen:!1,role:'dialog',shouldCloseOnOverlayClick:!0,width:'m',valign:'center',className:'modal'},Modal.Close=ModalClose,Modal.displayName='Modal';export{Modal};

package/components/Modal/adapter.js

@@ -0,0 +1 @@
+'use strict';var ReactModal=require('react-modal');var cx=require('clsx');var require$$0=require('react/jsx-runtime');exports.ReactModalAdapter=({className:e,isOpen:a,overlayClassName:r,style:s,...l})=>{const t=`${e}__overlay`;return require$$0.jsx(ReactModal,{portalClassName:e,className:`${e}__content`,isOpen:Boolean(a),overlayClassName:cx(t,r),...l})};

package/components/Modal/adapter.mjs

@@ -0,0 +1 @@
+import ReactModal from'react-modal';import cx from'clsx';import{jsx}from'react/jsx-runtime';const ReactModalAdapter=({className:a,isOpen:e,overlayClassName:o,style:t,...s})=>{const r=`${a}__overlay`;return jsx(ReactModal,{portalClassName:a,className:`${a}__content`,isOpen:Boolean(e),overlayClassName:cx(r,o),...s})};export{ReactModalAdapter};

package/components/Modal/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var responsiveProperty=require('../../mixins/responsive-property.js');var adapter=require('./adapter.js');const WIDTHS={xxxs:100,xxs:200,xs:300,s:400,m:500,l:600,xl:740,xxl:800,xxxl:900};const Modal=styled(adapter.ReactModalAdapter).withConfig({componentId:"fox-ui__sc-1ilisuf-0"})(["&__overlay{z-index:",";display:flex;flex-direction:row;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-x:none;overflow-y:auto;"," &.ReactModal__Overlay--after-open{","}&.ReactModal__Overlay--before-close{}}&__content{width:100%;max-height:100%;position:relative;&:focus{outline:0;}"," &.ReactModal__Content--after-open{}&.ReactModal__Content--before-close{}}"],(e=>e.zIndex||e.theme.zIndex.modal),(e=>e.valign?styled.css(["align-items:",";"],(e=>{switch(e){case'top':return'flex-start';case'bottom':return'flex-end';default:return'center'}})(e.valign)):null),(e=>e.overlayClassName?null:styled.css(e.blurredOverlay?["background:rgba(246,247,251,0.3);backdrop-filter:blur(3.5px);"]:["background:rgba(246,247,251,0.9);"])),(e=>e.width?responsiveProperty.property((e=>typeof e.width=='number'?e.width:e.width&&typeof e.width=='string'&&WIDTHS[e.width]?WIDTHS[e.width]:'auto')(e),'max-width'):null));const ModalClose=styled.span.withConfig({componentId:"fox-ui__sc-1ilisuf-1"})(["opacity:1;transition:0.3s;position:absolute;right:20px;top:20px;cursor:pointer;z-index:10;svg{width:18px;height:18px;}&:hover{opacity:0.5;}"]);styled.createGlobalStyle([".bodyOpen{overflow:hidden;}"]),exports.Modal=Modal,exports.ModalClose=ModalClose;

package/components/Modal/style.mjs

@@ -0,0 +1 @@
+import styled,{css,createGlobalStyle}from'styled-components';import{property}from'../../mixins/responsive-property.mjs';import{ReactModalAdapter}from'./adapter.mjs';const WIDTHS={xxxs:100,xxs:200,xs:300,s:400,m:500,l:600,xl:740,xxl:800,xxxl:900};const Modal=styled(ReactModalAdapter).withConfig({componentId:"fox-ui__sc-1ilisuf-0"})(["&__overlay{z-index:",";display:flex;flex-direction:row;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-x:none;overflow-y:auto;"," &.ReactModal__Overlay--after-open{","}&.ReactModal__Overlay--before-close{}}&__content{width:100%;max-height:100%;position:relative;&:focus{outline:0;}"," &.ReactModal__Content--after-open{}&.ReactModal__Content--before-close{}}"],(e=>e.zIndex||e.theme.zIndex.modal),(e=>e.valign?css(["align-items:",";"],(e=>{switch(e){case'top':return'flex-start';case'bottom':return'flex-end';default:return'center'}})(e.valign)):null),(e=>e.overlayClassName?null:css(e.blurredOverlay?["background:rgba(246,247,251,0.3);backdrop-filter:blur(3.5px);"]:["background:rgba(246,247,251,0.9);"])),(e=>e.width?property((e=>typeof e.width=='number'?e.width:e.width&&typeof e.width=='string'&&WIDTHS[e.width]?WIDTHS[e.width]:'auto')(e),'max-width'):null));const ModalClose=styled.span.withConfig({componentId:"fox-ui__sc-1ilisuf-1"})(["opacity:1;transition:0.3s;position:absolute;right:20px;top:20px;cursor:pointer;z-index:10;svg{width:18px;height:18px;}&:hover{opacity:0.5;}"]);createGlobalStyle([".bodyOpen{overflow:hidden;}"]);export{Modal,ModalClose};

package/components/Paper/Paper.js

@@ -0,0 +1 @@
+'use strict';var useClassname=require('../../hooks/useClassname.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');function Paper({padding:e="m",rounded:s=!0,shadow:a=!0,className:r,...u}){const n=useClassname.useClassname(Paper.displayName,r);return require$$0.jsx(style.Root,{padding:e,rounded:s,shadow:a,className:n,...u})}Paper.displayName='Paper',exports.Paper=Paper;

package/components/Paper/Paper.mjs

@@ -0,0 +1 @@
+import{useClassname}from'../../hooks/useClassname.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';function Paper({padding:s="m",rounded:a=!0,shadow:e=!0,className:o,...r}){const m=useClassname(Paper.displayName,o);return jsx(Root,{padding:s,rounded:a,shadow:e,className:m,...r})}Paper.displayName='Paper';export{Paper};

package/components/Paper/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');var Spacer=require('../Spacer/Spacer.js');const zDepth={0:styled.css(["box-shadow:0 2px 0 0 rgba(0,0,0,0.11);"]),1:styled.css(["box-shadow:0 2px 4px 0 rgba(0,0,0,0.08);"]),2:styled.css(["box-shadow:0 6px 20px 0 rgba(0,0,0,0.1);"]),3:styled.css(["box-shadow:0 10px 20px 0 rgba(0,0,0,0.08);"]),4:styled.css(["box-shadow:0 10px 40px 0 rgba(0,0,0,0.14);"])};const circle=styled.css(["border-radius:50%;justify-content:center;display:flex;align-items:center;min-width:100px;min-height:100px;"]);const rounded=styled.css(["border-radius:",";"],(o=>o.theme.borderRadius));const Root=styled(Spacer.Spacer).withConfig({componentId:"fox-ui__sc-1tlpowq-0"})(["box-sizing:border-box;background-color:",";"," "," "," "," ",""],(o=>o.theme.colors.white),(o=>o.textAlign?styled.css(["text-align:",";"],o.textAlign):null),(o=>o.color?color.color(o.color,'background-color'):null),(o=>typeof o.zDepth=='number'&&o.shadow?zDepth[o.zDepth]:null),(o=>o.rounded?rounded:null),(o=>o.circle?circle:null));exports.Root=Root;

package/components/Paper/style.mjs

@@ -0,0 +1 @@
+import styled,{css}from'styled-components';import{color}from'../../mixins/color.mjs';import{Spacer}from'../Spacer/Spacer.mjs';const zDepth={0:css(["box-shadow:0 2px 0 0 rgba(0,0,0,0.11);"]),1:css(["box-shadow:0 2px 4px 0 rgba(0,0,0,0.08);"]),2:css(["box-shadow:0 6px 20px 0 rgba(0,0,0,0.1);"]),3:css(["box-shadow:0 10px 20px 0 rgba(0,0,0,0.08);"]),4:css(["box-shadow:0 10px 40px 0 rgba(0,0,0,0.14);"])};const circle=css(["border-radius:50%;justify-content:center;display:flex;align-items:center;min-width:100px;min-height:100px;"]);const rounded=css(["border-radius:",";"],(o=>o.theme.borderRadius));const Root=styled(Spacer).withConfig({componentId:"fox-ui__sc-1tlpowq-0"})(["box-sizing:border-box;background-color:",";"," "," "," "," ",""],(o=>o.theme.colors.white),(o=>o.textAlign?css(["text-align:",";"],o.textAlign):null),(o=>o.color?color(o.color,'background-color'):null),(o=>typeof o.zDepth=='number'&&o.shadow?zDepth[o.zDepth]:null),(o=>o.rounded?rounded:null),(o=>o.circle?circle:null));export{Root};

package/components/Popover/Popover.js

@@ -0,0 +1 @@
+'use strict';var React=require('react');var ramda=require('ramda');var withMergedProps=require('../../hocs/withMergedProps.js');var require$$0=require('react/jsx-runtime');var PopoverComponent=require('../PopoverComponent/PopoverComponent.js');var constants=require('../PopoverComponent/constants.js');var Tooltip=require('../Tooltip/Tooltip.js');const Popover=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,o)=>{const{size:r="s",styles:t={},sizes:n,sizeUnits:s,palette:i,orientation:p,loading:a,badge:c,caption:P,captionProps:l,titleProps:v,contentProps:d,controlsDirection:m,media:u,controls:g,...C}=e;return require$$0.jsx(Tooltip.Tooltip,{...C,preset:"brand",size:r,ref:o,styles:ramda.mergeDeepLeft(t,{arrow:{spread:20,length:12}}),component:require$$0.jsx(PopoverComponent.PopoverComponent,{sizes:n,sizeUnits:s,palette:i,orientation:p,loading:a,badge:c,caption:P,captionProps:l,title:C.title,titleProps:v,content:C.content,contentProps:d,controlsDirection:m,media:u,controls:g})})})),{displayName:"Popover",sizes:e=>e.orientation==='landscape'?constants.SIZES_LANDSCAPE:constants.SIZES}),{Component:PopoverComponent.PopoverComponent});exports.COMPONENT_NAME="Popover",exports.Popover=Popover;

package/components/Popover/Popover.mjs

@@ -0,0 +1 @@
+import{forwardRef}from'react';import{mergeDeepLeft}from'ramda';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{jsx}from'react/jsx-runtime';import{PopoverComponent}from'../PopoverComponent/PopoverComponent.mjs';import{SIZES_LANDSCAPE,SIZES}from'../PopoverComponent/constants.mjs';import{Tooltip}from'../Tooltip/Tooltip.mjs';const COMPONENT_NAME='Popover';const Popover=Object.assign(withMergedProps(forwardRef(((o,e)=>{const{size:t="s",styles:r={},sizes:n,sizeUnits:p,palette:s,orientation:i,loading:m,badge:a,caption:c,captionProps:P,titleProps:l,contentProps:d,controlsDirection:f,media:g,controls:C,...v}=o;return jsx(Tooltip,{...v,preset:"brand",size:t,ref:e,styles:mergeDeepLeft(r,{arrow:{spread:20,length:12}}),component:jsx(PopoverComponent,{sizes:n,sizeUnits:p,palette:s,orientation:i,loading:m,badge:a,caption:c,captionProps:P,title:v.title,titleProps:l,content:v.content,contentProps:d,controlsDirection:f,media:g,controls:C})})})),{displayName:"Popover",sizes:o=>o.orientation==='landscape'?SIZES_LANDSCAPE:SIZES}),{Component:PopoverComponent});export{COMPONENT_NAME,Popover};

package/components/PopoverComponent/PopoverComponent.js

@@ -0,0 +1 @@
+'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 Icon=require('../Icon/Icon.js');var Skeleton=require('../Skeleton/Skeleton.js');var Badge=require('../Badge/Badge.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');const PopoverComponent=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:t="s",orientation:i="portrait",controlsDirection:s="row",badge:n={},captionProps:o={},titleProps:a={},contentProps:c={},closeButtonProps:l={},media:u={},controls:$={},sizeXXS:d,sizeXS:p,sizeS:x,sizeM:q,sizeL:h,sizeXL:j,loading:m,caption:g,title:S,content:y,closeFn:P,palette:z,showCloseButton:b,...B}=e;const k={size:t,sizeXXS:d,sizeXS:p,sizeS:x,sizeM:q,sizeL:h,sizeXL:j};const{badgeProps:v={}}=n;const{imgProps:C={},videoProps:M={}}=u;const{text:T,buttonProps:R={}}=$.secondary??{};const{text:w,buttonProps:I={}}=$.primary??{};return require$$0.jsxs(style.Root,{...B,...k,palette:z,orientation:i,controlsDirection:s,ref:r,children:[b&&require$$0.jsx(style.CloseButton,{...l,onClick:e=>{typeof P=='function'&&P(),typeof l.onClick=='function'&&l.onClick(e)},palette:z,type:"button",children:require$$0.jsx(Icon.Icon,{as:"span",name:"close",size:24})}),i==='landscape'&&require$$0.jsxs(require$$0.Fragment,{children:[m&&require$$0.jsx(style.MediaLandscape,{children:require$$0.jsx(style.Media,{aspectRatio:"1:1",children:require$$0.jsx(Skeleton.Skeleton,{})})}),!m&&(C.src||M.src)&&require$$0.jsx(style.MediaLandscape,{children:require$$0.jsx(style.Media,{aspectRatio:"1:1",children:C.src?require$$0.jsx("img",{alt:"",...C}):require$$0.jsx(style.Video,{controls:!0,controlsList:"nofullscreen",disablePictureInPicture:!0,...M})})})]}),require$$0.jsxs(style.Container,{children:[require$$0.jsxs(style.Content,{children:[(n.text||g||m||b)&&require$$0.jsx(style.Header,{children:m?require$$0.jsx(Skeleton.Skeleton,{width:"20%",children:require$$0.jsx(Badge.Badge,{...k,resetDefaultMargin:!0,...v})}):require$$0.jsxs(require$$0.Fragment,{children:[n.text&&require$$0.jsx(Badge.Badge,{...k,borderRadius:8,marginRight:12,resetDefaultMargin:!0,...v,children:n.text}),g&&require$$0.jsx(Text.Text,{as:"span",appearance:"caption",size:.9,sizeUnits:"em",color:"content-onmain-tertiary",weight:700,...o,children:g})]})}),i==='portrait'&&require$$0.jsxs(require$$0.Fragment,{children:[m&&require$$0.jsx(style.Media,{aspectRatio:"16:9",children:require$$0.jsx(Skeleton.Skeleton,{})}),!m&&(C.src||M.src)&&require$$0.jsx(style.Media,{aspectRatio:"16:9",children:C.src?require$$0.jsx("img",{alt:"",...C}):require$$0.jsx(style.Video,{controls:!0,controlsList:"nofullscreen",disablePictureInPicture:!0,...M})})]}),(S||y||m)&&require$$0.jsx("div",{children:require$$0.jsxs(require$$0.Fragment,m?{children:[require$$0.jsx(Skeleton.Skeleton,{borderRadius:4,marginBottom:.6,marginUnits:"em",children:require$$0.jsx(Text.Text,{appearance:"subheading",size:1.4,sizeUnits:"em",...a})}),require$$0.jsx(Skeleton.Skeleton,{borderRadius:4,width:"70%",marginBottom:.4,marginUnits:"em",children:require$$0.jsx(Text.Text,{appearance:"body",size:"inherit",...c})}),require$$0.jsx(Skeleton.Skeleton,{borderRadius:4,width:"50%",children:require$$0.jsx(Text.Text,{appearance:"body",size:"inherit",...c})})]}:{children:[S&&require$$0.jsx(Text.Text,{as:"h2",appearance:"subheading",size:1.4,color:"inherit",marginBottom:y?.4:void 0,sizeUnits:"em",marginUnits:"em",...a,children:S}),y&&require$$0.jsx(Text.Text,{as:"p",appearance:"body",size:"inherit",color:"inherit",...c,children:y})]})})]}),(T||w||m)&&require$$0.jsx(style.Footer,{children:m?require$$0.jsx(Skeleton.Skeleton,{width:"100%",children:require$$0.jsx(Button.Button,{preset:"brand",...k})}):require$$0.jsxs(require$$0.Fragment,{children:[T&&require$$0.jsx(Button.Button,{preset:"brand",black:!0,outline:!0,type:"button",marginRight:s==='row'?6:void 0,marginBottom:s==='column'?6:void 0,...k,...R,children:T}),w&&require$$0.jsx(Button.Button,{preset:"brand",black:!0,type:"button",...k,...I,children:w})]})})]})]})})),{displayName:"PopoverComponent",sizes:e=>e.orientation==='landscape'?constants.SIZES_LANDSCAPE:constants.SIZES});exports.SIZES=constants.SIZES,exports.SIZES_LANDSCAPE=constants.SIZES_LANDSCAPE,exports.COMPONENT_NAME="PopoverComponent",exports.PopoverComponent=PopoverComponent;

package/components/PopoverComponent/PopoverComponent.mjs

@@ -0,0 +1 @@
+import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_LANDSCAPE,SIZES}from'./constants.mjs';import{Root,CloseButton,MediaLandscape,Media,Video,Container,Content,Header,Footer}from'./style.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Badge}from'../Badge/Badge.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const COMPONENT_NAME='PopoverComponent';const PopoverComponent=withMergedProps(forwardRef(((e,t)=>{const{size:o="s",orientation:n="portrait",controlsDirection:s="row",badge:i={},captionProps:r={},titleProps:a={},contentProps:c={},closeButtonProps:d={},media:l={},controls:p={},sizeXXS:m,sizeXS:x,sizeS:j,sizeM:h,sizeL:g,sizeXL:u,loading:S,caption:z,title:P,content:b,closeFn:f,palette:B,showCloseButton:C,...M}=e;const k={size:o,sizeXXS:m,sizeXS:x,sizeS:j,sizeM:h,sizeL:g,sizeXL:u};const{badgeProps:R={}}=i;const{imgProps:w={},videoProps:y={}}=l;const{text:E,buttonProps:I={}}=p.secondary??{};const{text:L,buttonProps:T={}}=p.primary??{};return jsxs(Root,{...M,...k,palette:B,orientation:n,controlsDirection:s,ref:t,children:[C&&jsx(CloseButton,{...d,onClick:e=>{typeof f=='function'&&f(),typeof d.onClick=='function'&&d.onClick(e)},palette:B,type:"button",children:jsx(Icon,{as:"span",name:"close",size:24})}),n==='landscape'&&jsxs(Fragment,{children:[S&&jsx(MediaLandscape,{children:jsx(Media,{aspectRatio:"1:1",children:jsx(Skeleton,{})})}),!S&&(w.src||y.src)&&jsx(MediaLandscape,{children:jsx(Media,{aspectRatio:"1:1",children:w.src?jsx("img",{alt:"",...w}):jsx(Video,{controls:!0,controlsList:"nofullscreen",disablePictureInPicture:!0,...y})})})]}),jsxs(Container,{children:[jsxs(Content,{children:[(i.text||z||S||C)&&jsx(Header,{children:S?jsx(Skeleton,{width:"20%",children:jsx(Badge,{...k,resetDefaultMargin:!0,...R})}):jsxs(Fragment,{children:[i.text&&jsx(Badge,{...k,borderRadius:8,marginRight:12,resetDefaultMargin:!0,...R,children:i.text}),z&&jsx(Text,{as:"span",appearance:"caption",size:.9,sizeUnits:"em",color:"content-onmain-tertiary",weight:700,...r,children:z})]})}),n==='portrait'&&jsxs(Fragment,{children:[S&&jsx(Media,{aspectRatio:"16:9",children:jsx(Skeleton,{})}),!S&&(w.src||y.src)&&jsx(Media,{aspectRatio:"16:9",children:w.src?jsx("img",{alt:"",...w}):jsx(Video,{controls:!0,controlsList:"nofullscreen",disablePictureInPicture:!0,...y})})]}),(P||b||S)&&jsx("div",{children:jsxs(Fragment,S?{children:[jsx(Skeleton,{borderRadius:4,marginBottom:.6,marginUnits:"em",children:jsx(Text,{appearance:"subheading",size:1.4,sizeUnits:"em",...a})}),jsx(Skeleton,{borderRadius:4,width:"70%",marginBottom:.4,marginUnits:"em",children:jsx(Text,{appearance:"body",size:"inherit",...c})}),jsx(Skeleton,{borderRadius:4,width:"50%",children:jsx(Text,{appearance:"body",size:"inherit",...c})})]}:{children:[P&&jsx(Text,{as:"h2",appearance:"subheading",size:1.4,color:"inherit",marginBottom:b?.4:void 0,sizeUnits:"em",marginUnits:"em",...a,children:P}),b&&jsx(Text,{as:"p",appearance:"body",size:"inherit",color:"inherit",...c,children:b})]})})]}),(E||L||S)&&jsx(Footer,{children:S?jsx(Skeleton,{width:"100%",children:jsx(Button,{preset:"brand",...k})}):jsxs(Fragment,{children:[E&&jsx(Button,{preset:"brand",black:!0,outline:!0,type:"button",marginRight:s==='row'?6:void 0,marginBottom:s==='column'?6:void 0,...k,...I,children:E}),L&&jsx(Button,{preset:"brand",black:!0,type:"button",...k,...T,children:L})]})})]})]})})),{displayName:"PopoverComponent",sizes:e=>e.orientation==='landscape'?SIZES_LANDSCAPE:SIZES});export{COMPONENT_NAME,PopoverComponent,SIZES,SIZES_LANDSCAPE};

package/components/PopoverComponent/constants.js

@@ -0,0 +1 @@
+'use strict';exports.SIZES={xxxl:{width:600,padding:'1.6em',borderRadius:16,fontSize:22},xxl:{width:600,padding:'1.6em',borderRadius:16,fontSize:22},xl:{width:600,padding:'1.6em',borderRadius:16,fontSize:22},l:{width:560,padding:'1.6em',borderRadius:16,fontSize:20},m:{width:356,padding:'1.6em',borderRadius:16,fontSize:16},s:{width:280,padding:'1.6em',borderRadius:16,fontSize:14},xs:{width:260,padding:'1.6em',borderRadius:16,fontSize:12},xxs:{width:260,padding:'1.6em',borderRadius:16,fontSize:12},xxxs:{width:260,padding:'1.6em',borderRadius:16,fontSize:12}},exports.SIZES_LANDSCAPE={xxxl:{width:900,padding:'1.6em',borderRadius:16,fontSize:22},xxl:{width:900,padding:'1.6em',borderRadius:16,fontSize:22},xl:{width:900,padding:'1.6em',borderRadius:16,fontSize:22},l:{width:792,padding:'1.6em',borderRadius:16,fontSize:20},m:{width:600,padding:'1.6em',borderRadius:16,fontSize:16},s:{width:520,padding:'1.6em',borderRadius:16,fontSize:14},xs:{width:375,padding:'1.6em',borderRadius:16,fontSize:12},xxs:{width:375,padding:'1.6em',borderRadius:16,fontSize:12},xxxs:{width:375,padding:'1.6em',borderRadius:16,fontSize:12}};

package/components/PopoverComponent/constants.mjs

@@ -0,0 +1 @@
+const SIZES={xxxl:{width:600,padding:'1.6em',borderRadius:16,fontSize:22},xxl:{width:600,padding:'1.6em',borderRadius:16,fontSize:22},xl:{width:600,padding:'1.6em',borderRadius:16,fontSize:22},l:{width:560,padding:'1.6em',borderRadius:16,fontSize:20},m:{width:356,padding:'1.6em',borderRadius:16,fontSize:16},s:{width:280,padding:'1.6em',borderRadius:16,fontSize:14},xs:{width:260,padding:'1.6em',borderRadius:16,fontSize:12},xxs:{width:260,padding:'1.6em',borderRadius:16,fontSize:12},xxxs:{width:260,padding:'1.6em',borderRadius:16,fontSize:12}};const SIZES_LANDSCAPE={xxxl:{width:900,padding:'1.6em',borderRadius:16,fontSize:22},xxl:{width:900,padding:'1.6em',borderRadius:16,fontSize:22},xl:{width:900,padding:'1.6em',borderRadius:16,fontSize:22},l:{width:792,padding:'1.6em',borderRadius:16,fontSize:20},m:{width:600,padding:'1.6em',borderRadius:16,fontSize:16},s:{width:520,padding:'1.6em',borderRadius:16,fontSize:14},xs:{width:375,padding:'1.6em',borderRadius:16,fontSize:12},xxs:{width:375,padding:'1.6em',borderRadius:16,fontSize:12},xxxs:{width:375,padding:'1.6em',borderRadius:16,fontSize:12}};export{SIZES,SIZES_LANDSCAPE};

package/components/PopoverComponent/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var responsiveSize=require('../../mixins/responsive-size.js');var focus=require('../../mixins/focus.js');const shouldForwardPopoverComponentProp=require('../../shared/utils/style.js').createShouldForwardProp((o=>!['orientation','controlsDirection','black','contrast','elevated'].includes(o)));const MediaLandscape=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-0"})(["box-sizing:border-box;flex-shrink:0;width:45%;margin-right:1.6em;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='aspectRatio'}).withConfig({componentId:"fox-ui__sc-hvg57g-1"})(["",""],(o=>`\n    box-sizing: border-box;\n    position: relative;\n    height: 0;\n    padding-bottom: ${o.aspectRatio==='16:9'?'56.25%':'100%'};\n    border-radius: 8px;\n\n    & > * {\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n    }\n\n    & img,\n    & video {\n      border-radius: inherit;\n      object-fit: contain;\n      height: 100%;\n      width: 100%;\n    }  \n  `));const Footer=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-2"})(["display:flex;flex-wrap:wrap;margin-top:1.6em;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardPopoverComponentProp}).attrs((o=>({dynamicSizeDeclaration:(e,n)=>({fontSize:typeof e=='string'?e:`${e}${n}`,width:o.orientation==='portrait'?'28em':'40em',padding:'1.6em',borderRadius:16})}))).withConfig({componentId:"fox-ui__sc-hvg57g-3"})(["box-sizing:border-box;display:inline-flex;isolation:isolate;position:relative;"," "," ",""],(o=>`\n    flex-direction: ${o.orientation==='landscape'?'row':'column'};\n    & ${Footer} {\n      flex-direction: ${o.controlsDirection};\n    }\n  `),(o=>{return`\n  color: ${(e={color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}).color};\n  background-color: ${e.backgroundColor};\n  filter: drop-shadow(0 6px 10px ${e.shadowColor});\n\n  & ${Media} img,\n  & ${Media} video {\n    background-color: ${e.mediaPlaceholderColor};\n  }\n`;var e}),responsiveSize.responsiveSize);const Container=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;"]);const Header=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:center;margin-right:20px;"]);const Content=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-6"})(["box-sizing:border-box;word-break:break-word;& > *:not(:last-child){margin-bottom:1.6em;}"]);const Video=styled.video.withConfig({componentId:"fox-ui__sc-hvg57g-7"})(["",""],focus.focus);const CloseButton=styled.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({componentId:"fox-ui__sc-hvg57g-8"})(["box-sizing:border-box;position:absolute;top:10px;right:10px;appearance:none;padding:2px;margin:0;border:none;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:",";"," ",""],(o=>o.disabled?'not-allowed':'pointer'),(o=>{return`\n  color: ${(e={closeColor:o.theme.colors['content-onmain-tertiary'],closeBackgroundColor:o.theme.colors.transparent,closeColorHover:o.theme.colors['content-onmain-primary'],closeBackgroundColorHover:tinycolor(o.theme.colors['bg-oncolor-hover']).lighten(20).toString(),closeColorActive:o.theme.colors['content-onmain-primary'],closeBackgroundColorActive:o.theme.colors['bg-oncolor-hover'],closeColorDisabled:o.theme.colors['content-disabled'],closeBackgroundColorDisabled:o.theme.colors.transparent,...o.palette}).closeColor};\n  background-color: ${e.closeBackgroundColor};\n  &:hover {\n    color: ${e.closeColorHover};\n    background-color: ${e.closeBackgroundColorHover};\n  }\n  &:active {\n    color: ${e.closeColorActive};\n    background-color: ${e.closeBackgroundColorActive};\n  }\n  &:disabled {\n    color: ${e.closeColorDisabled};\n    background-color: ${e.closeBackgroundColorDisabled};\n  }\n`;var e}),focus.focus);exports.CloseButton=CloseButton,exports.Container=Container,exports.Content=Content,exports.Footer=Footer,exports.Header=Header,exports.Media=Media,exports.MediaLandscape=MediaLandscape,exports.Root=Root,exports.Video=Video;

package/components/PopoverComponent/style.mjs

@@ -0,0 +1 @@
+import styled from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const shouldForwardPopoverComponentProp=createShouldForwardProp((o=>!['orientation','controlsDirection','black','contrast','elevated'].includes(o)));const MediaLandscape=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-0"})(["box-sizing:border-box;flex-shrink:0;width:45%;margin-right:1.6em;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='aspectRatio'}).withConfig({componentId:"fox-ui__sc-hvg57g-1"})(["",""],(o=>`\n    box-sizing: border-box;\n    position: relative;\n    height: 0;\n    padding-bottom: ${o.aspectRatio==='16:9'?'56.25%':'100%'};\n    border-radius: 8px;\n\n    & > * {\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n    }\n\n    & img,\n    & video {\n      border-radius: inherit;\n      object-fit: contain;\n      height: 100%;\n      width: 100%;\n    }  \n  `));const Footer=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-2"})(["display:flex;flex-wrap:wrap;margin-top:1.6em;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardPopoverComponentProp}).attrs((o=>({dynamicSizeDeclaration:(e,n)=>({fontSize:typeof e=='string'?e:`${e}${n}`,width:o.orientation==='portrait'?'28em':'40em',padding:'1.6em',borderRadius:16})}))).withConfig({componentId:"fox-ui__sc-hvg57g-3"})(["box-sizing:border-box;display:inline-flex;isolation:isolate;position:relative;"," "," ",""],(o=>`\n    flex-direction: ${o.orientation==='landscape'?'row':'column'};\n    & ${Footer} {\n      flex-direction: ${o.controlsDirection};\n    }\n  `),(o=>{return`\n  color: ${(e={color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}).color};\n  background-color: ${e.backgroundColor};\n  filter: drop-shadow(0 6px 10px ${e.shadowColor});\n\n  & ${Media} img,\n  & ${Media} video {\n    background-color: ${e.mediaPlaceholderColor};\n  }\n`;var e}),responsiveSize);const Container=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;"]);const Header=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:center;margin-right:20px;"]);const Content=styled.div.withConfig({componentId:"fox-ui__sc-hvg57g-6"})(["box-sizing:border-box;word-break:break-word;& > *:not(:last-child){margin-bottom:1.6em;}"]);const Video=styled.video.withConfig({componentId:"fox-ui__sc-hvg57g-7"})(["",""],focus);const CloseButton=styled.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({componentId:"fox-ui__sc-hvg57g-8"})(["box-sizing:border-box;position:absolute;top:10px;right:10px;appearance:none;padding:2px;margin:0;border:none;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:",";"," ",""],(o=>o.disabled?'not-allowed':'pointer'),(o=>{return`\n  color: ${(e={closeColor:o.theme.colors['content-onmain-tertiary'],closeBackgroundColor:o.theme.colors.transparent,closeColorHover:o.theme.colors['content-onmain-primary'],closeBackgroundColorHover:tinycolor(o.theme.colors['bg-oncolor-hover']).lighten(20).toString(),closeColorActive:o.theme.colors['content-onmain-primary'],closeBackgroundColorActive:o.theme.colors['bg-oncolor-hover'],closeColorDisabled:o.theme.colors['content-disabled'],closeBackgroundColorDisabled:o.theme.colors.transparent,...o.palette}).closeColor};\n  background-color: ${e.closeBackgroundColor};\n  &:hover {\n    color: ${e.closeColorHover};\n    background-color: ${e.closeBackgroundColorHover};\n  }\n  &:active {\n    color: ${e.closeColorActive};\n    background-color: ${e.closeBackgroundColorActive};\n  }\n  &:disabled {\n    color: ${e.closeColorDisabled};\n    background-color: ${e.closeBackgroundColorDisabled};\n  }\n`;var e}),focus);export{CloseButton,Container,Content,Footer,Header,Media,MediaLandscape,Root,Video};

package/components/Progress/Progress.js

@@ -0,0 +1 @@
+'use strict';var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Progress_Circle=require('../Progress.Circle/Progress.Circle.js');var Progress_Segmented=require('../Progress.Segmented/Progress.Segmented.js');function Progress(r){const{className:e,isLoading:s,backgroundColor:o,color:g,percent:t}=r;let i=typeof t=='string'?parseInt(t,10):t||0;return i>100&&(i=100),i<0&&(i=0),require$$0.jsx(style.Root,{className:e,backgroundColor:o,color:g,children:require$$0.jsx(style.Bar,{width:i,isLoading:Boolean(s)})})}Progress.defaultProps={percent:0,color:'green',backgroundColor:'alto',isLoading:!1},Progress.Circle=Progress_Circle.ProgressCircle,Progress.Segmented=Progress_Segmented.ProgressSegmented,Progress.displayName='Progress',exports.Progress=Progress;

package/components/Progress/Progress.mjs

@@ -0,0 +1 @@
+import{Root,Bar}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{ProgressCircle}from'../Progress.Circle/Progress.Circle.mjs';import{ProgressSegmented}from'../Progress.Segmented/Progress.Segmented.mjs';function Progress(r){const{className:e,isLoading:o,backgroundColor:s,color:g,percent:t}=r;let n=typeof t=='string'?parseInt(t,10):t||0;return n>100&&(n=100),n<0&&(n=0),jsx(Root,{className:e,backgroundColor:s,color:g,children:jsx(Bar,{width:n,isLoading:Boolean(o)})})}Progress.defaultProps={percent:0,color:'green',backgroundColor:'alto',isLoading:!1},Progress.Circle=ProgressCircle,Progress.Segmented=ProgressSegmented,Progress.displayName='Progress';export{Progress};

package/components/Progress/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var color=require('../../mixins/color.js');const move=styled.keyframes(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);const bgColor=o=>styled.css(["background-color:",";"],tinycolor(o).setAlpha(.6).toString());const isLoading=styled.css(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.4) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;"],move);const Root=styled.div.withConfig({componentId:"fox-ui__sc-1vq95i6-0"})(["display:block;height:4px;border-radius:40px;overflow:hidden;"," ",""],(o=>o.backgroundColor?color.color(o.backgroundColor,bgColor):null),(o=>o.color?color.color(o.color):null));const Bar=styled.div.withConfig({shouldForwardProp:()=>!1}).withConfig({componentId:"fox-ui__sc-1vq95i6-1"})(["width:0;transition:width 1s ease-in-out;height:100%;border-radius:inherit;color:inherit;background-color:currentColor;"," ",""],(o=>o.isLoading?isLoading:null),(o=>o.width?styled.css(["width:","%;"],o.width):styled.css(["width:0%;"])));exports.Bar=Bar,exports.Root=Root;

package/components/Progress/style.mjs

@@ -0,0 +1 @@
+import styled,{keyframes,css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{color}from'../../mixins/color.mjs';const move=keyframes(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);const bgColor=o=>css(["background-color:",";"],tinycolor(o).setAlpha(.6).toString());const isLoading=css(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.4) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;"],move);const Root=styled.div.withConfig({componentId:"fox-ui__sc-1vq95i6-0"})(["display:block;height:4px;border-radius:40px;overflow:hidden;"," ",""],(o=>o.backgroundColor?color(o.backgroundColor,bgColor):null),(o=>o.color?color(o.color):null));const Bar=styled.div.withConfig({shouldForwardProp:()=>!1}).withConfig({componentId:"fox-ui__sc-1vq95i6-1"})(["width:0;transition:width 1s ease-in-out;height:100%;border-radius:inherit;color:inherit;background-color:currentColor;"," ",""],(o=>o.isLoading?isLoading:null),(o=>o.width?css(["width:","%;"],o.width):css(["width:0%;"])));export{Bar,Root};

package/components/Progress.Circle/Progress.Circle.js

@@ -0,0 +1 @@
+'use strict';var React=require('react');var style=require('./style.js');var require$$0=require('react/jsx-runtime');function polarToCartesian(e,s,r,t){const o=(t-90)*Math.PI/180;return{x:e+r*Math.cos(o),y:s+r*Math.sin(o)}}function describeArc(e,s,r,t,o,i=!1){const n=polarToCartesian(e,s,r,o);const c=polarToCartesian(e,s,r,t);const a=o-t;const l=(a<0?-a:a)<=180?'1':'0';return['M',n.x,n.y,'A',r,r,0,i?+!+l:l,0,c.x,c.y].join(' ')}exports.ProgressCircle=class ProgressCircle extends React.PureComponent{static displayName='Progress.Circle';static defaultProps={size:84,progress:0,strokeLineWidth:2,strokeBGWidth:2,resultColor:'accent',progressStartAngle:180};constructor(e){super(e),this.state={bgAngleDiff:0,describeArcProgress:null,describeArcBg:null}}componentDidMount(){this.renderSvg()}componentDidUpdate(e){const{progress:s,size:r}=this.props;const{progress:t,size:o}=e;s===t&&r===o||this.renderSvg()}renderSvg=()=>{const{size:e,progress:s,strokeLineWidth:r,strokeBGWidth:t,progressStartAngle:o}=this.props;const i=r>t?r:t;const n=e/2+i/2;const c=o;const a=c-.5;const l=n-i/2;const d=n-i/2;const g=n-i;const u=c-a;const h=describeArc(l,d,g,o,o-.5+ +s/100*360,!0);const p=describeArc(l,d,g,c,a);this.setState({describeArcProgress:h,describeArcBg:p,bgAngleDiff:u<0?-u:u})};render(){const{size:e,children:s,content:r,strokeLineWidth:t,strokeBGWidth:o,resultColor:i,strokeBGColor:n,status:c,progress:a,className:l,style:d}=this.props;const{bgAngleDiff:g,describeArcProgress:u,describeArcBg:h}=this.state;return require$$0.jsxs(style.Root,{className:l,style:d,size:e,strokeBGColor:n,resultColor:i,status:c,children:[require$$0.jsx("svg",{width:e,height:e,viewBox:`0 0 ${e} ${e}`,children:require$$0.jsxs("g",{className:'pathBox',children:[require$$0.jsx("path",{className:"bg",d:g<360&&h?h:'',fill:"none",strokeWidth:o,strokeLinecap:"round"}),require$$0.jsx("path",{className:"line",d:Boolean(+a)&&u?u:'',strokeWidth:t,strokeLinecap:"round"})]})}),(s||r)&&require$$0.jsx(style.Content,{children:s||r})]})}};

package/components/Progress.Circle/Progress.Circle.mjs

@@ -0,0 +1 @@
+import{PureComponent}from'react';import{Root,Content}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';function polarToCartesian(s,e,r,t){const o=(t-90)*Math.PI/180;return{x:s+r*Math.cos(o),y:e+r*Math.sin(o)}}function describeArc(s,e,r,t,o,n=!1){const c=polarToCartesian(s,e,r,o);const i=polarToCartesian(s,e,r,t);const a=o-t;const l=(a<0?-a:a)<=180?'1':'0';return['M',c.x,c.y,'A',r,r,0,n?+!+l:l,0,i.x,i.y].join(' ')}class ProgressCircle extends PureComponent{static displayName='Progress.Circle';static defaultProps={size:84,progress:0,strokeLineWidth:2,strokeBGWidth:2,resultColor:'accent',progressStartAngle:180};constructor(s){super(s),this.state={bgAngleDiff:0,describeArcProgress:null,describeArcBg:null}}componentDidMount(){this.renderSvg()}componentDidUpdate(s){const{progress:e,size:r}=this.props;const{progress:t,size:o}=s;e===t&&r===o||this.renderSvg()}renderSvg=()=>{const{size:s,progress:e,strokeLineWidth:r,strokeBGWidth:t,progressStartAngle:o}=this.props;const n=r>t?r:t;const c=s/2+n/2;const i=o;const a=i-.5;const l=c-n/2;const d=c-n/2;const p=c-n;const g=i-a;const h=describeArc(l,d,p,o,o-.5+ +e/100*360,!0);const u=describeArc(l,d,p,i,a);this.setState({describeArcProgress:h,describeArcBg:u,bgAngleDiff:g<0?-g:g})};render(){const{size:s,children:e,content:r,strokeLineWidth:t,strokeBGWidth:o,resultColor:n,strokeBGColor:c,status:i,progress:a,className:l,style:d}=this.props;const{bgAngleDiff:p,describeArcProgress:g,describeArcBg:h}=this.state;return jsxs(Root,{className:l,style:d,size:s,strokeBGColor:c,resultColor:n,status:i,children:[jsx("svg",{width:s,height:s,viewBox:`0 0 ${s} ${s}`,children:jsxs("g",{className:'pathBox',children:[jsx("path",{className:"bg",d:p<360&&h?h:'',fill:"none",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{className:"line",d:Boolean(+a)&&g?g:'',strokeWidth:t,strokeLinecap:"round"})]})}),(e||r)&&jsx(Content,{children:e||r})]})}}export{ProgressCircle};

package/components/Progress.Circle/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');const Root=styled.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({componentId:"fox-ui__sc-yu7d34-0"})(["position:relative;width:",";height:",";flex-shrink:0;svg{width:100%;height:100%;font-size:0px;}.line{fill:none;display:block;","}.bg{stroke:",";fill:rgba(255,255,255,0);&.fail{stroke:#f1512c;}&.success{stroke:#7bb909;}&.started{stroke:#459ff3;}}"],(o=>o.size?`${o.size}px`:'84px'),(o=>o.size?`${o.size}px`:'84px'),(o=>o.resultColor?color.color(o.resultColor,'stroke'):null),(o=>o.strokeBGColor?color.getColor(o.strokeBGColor,o):"rgba(0, 0, 0, 0.12)"));const Content=styled.div.withConfig({componentId:"fox-ui__sc-yu7d34-1"})(["position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;img{border-radius:50%;}"]);exports.Content=Content,exports.Root=Root;

package/components/Progress.Circle/style.mjs

@@ -0,0 +1 @@
+import styled from'styled-components';import{color,getColor}from'../../mixins/color.mjs';const Root=styled.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({componentId:"fox-ui__sc-yu7d34-0"})(["position:relative;width:",";height:",";flex-shrink:0;svg{width:100%;height:100%;font-size:0px;}.line{fill:none;display:block;","}.bg{stroke:",";fill:rgba(255,255,255,0);&.fail{stroke:#f1512c;}&.success{stroke:#7bb909;}&.started{stroke:#459ff3;}}"],(o=>o.size?`${o.size}px`:'84px'),(o=>o.size?`${o.size}px`:'84px'),(o=>o.resultColor?color(o.resultColor,'stroke'):null),(o=>o.strokeBGColor?getColor(o.strokeBGColor,o):"rgba(0, 0, 0, 0.12)"));const Content=styled.div.withConfig({componentId:"fox-ui__sc-yu7d34-1"})(["position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;img{border-radius:50%;}"]);export{Content,Root};

package/components/Progress.Segmented/Progress.Segmented.js

@@ -0,0 +1 @@
+'use strict';var style=require('./style.js');var require$$0=require('react/jsx-runtime');function ProgressSegmented(e){const{percent:r,segments:s,className:t,style:o,percentColor:a,separatorColor:l,haveCircle:n,isActive:c}=e;return require$$0.jsxs(style.Root,{className:t,style:o,percent:r,haveCircle:n,percentColor:a,isActive:c,children:[require$$0.jsx(style.Progress,{percent:r,percentColor:a}),require$$0.jsx(style.Separators,{children:Array.from(new Array(s+1).keys()).map(((e,r)=>require$$0.jsx(style.Separator,{separatorColor:l},r)))})]})}ProgressSegmented.defaultProps={percent:0,percentColor:'#7fc92e',separatorColor:'#ffffff',segments:9,haveCircle:!0},ProgressSegmented.displayName='Progress.Segmented',exports.ProgressSegmented=ProgressSegmented;

package/components/Progress.Segmented/Progress.Segmented.mjs

@@ -0,0 +1 @@
+import{Root,Progress,Separators,Separator}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';function ProgressSegmented(e){const{percent:r,segments:s,className:o,style:t,percentColor:a,separatorColor:n,haveCircle:c,isActive:p}=e;return jsxs(Root,{className:o,style:t,percent:r,haveCircle:c,percentColor:a,isActive:p,children:[jsx(Progress,{percent:r,percentColor:a}),jsx(Separators,{children:Array.from(new Array(s+1).keys()).map(((e,r)=>jsx(Separator,{separatorColor:n},r)))})]})}ProgressSegmented.defaultProps={percent:0,percentColor:'#7fc92e',separatorColor:'#ffffff',segments:9,haveCircle:!0},ProgressSegmented.displayName='Progress.Segmented';export{ProgressSegmented};

package/components/Progress.Segmented/style.js

@@ -0,0 +1 @@
+'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');var colors=require('../../theme/colors.js');const Progress=styled.div.withConfig({componentId:"fox-ui__sc-10x2wrn-0"})(["height:100%;border-radius:10px;width:",";",";"],(o=>`${o.percent||0}%`),(o=>color.color(o.percentColor?o.percentColor:colors.DefaultColorNames.atlantis,'background')));const Separators=styled.div.withConfig({componentId:"fox-ui__sc-10x2wrn-1"})(["position:absolute;top:0;display:flex;justify-content:space-between;width:100%;height:4px;z-index:3;"]);const Separator=styled.div.withConfig({componentId:"fox-ui__sc-10x2wrn-2"})(["width:2px;height:100%;&:first-child,&:last-child{width:0;}",""],(o=>color.color(o.separatorColor?o.separatorColor:colors.DefaultColorNames.white,'background')));const isEmpty=styled.css(["& ","{&:first-child{&:before{background:rgba(0,0,0,0.1);}}}"],Separator);const Root=styled.div.withConfig({componentId:"fox-ui__sc-10x2wrn-3"})(["position:relative;height:4px;background:rgba(0,0,0,0.1);border-radius:10px;"," "," ",""],(o=>o.haveCircle?(o=>styled.css(["margin-left:8px;border-radius:0 10px 10px 0;& ","{border-radius:0 10px 10px 0;}& ","{&:first-child{position:relative;&:before{position:absolute;display:block;content:'';left:-8px;top:-2px;width:8px;height:8px;border-radius:50%;background:",";}}}"],Progress,Separator,color.getColor(o.percentColor||colors.DefaultColorNames.atlantis,o)))(o):null),(o=>o.percent===100?(o=>styled.css(["& ","{&:last-child{position:relative;&:before{position:absolute;top:-6px;right:-6px;display:block;content:'';background:"," url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K') center no-repeat;width:16px;height:16px;border-radius:50%;}}}"],Separator,color.getColor(o.percentColor||colors.DefaultColorNames.atlantis,o)))(o):null),(o=>o.percent===0?isEmpty:null));exports.Progress=Progress,exports.Root=Root,exports.Separator=Separator,exports.Separators=Separators;

package/components/Progress.Segmented/style.mjs

@@ -0,0 +1 @@
+import styled,{css}from'styled-components';import{color,getColor}from'../../mixins/color.mjs';import{DefaultColorNames}from'../../theme/colors.mjs';const Progress=styled.div.withConfig({componentId:"fox-ui__sc-10x2wrn-0"})(["height:100%;border-radius:10px;width:",";",";"],(o=>`${o.percent||0}%`),(o=>color(o.percentColor?o.percentColor:DefaultColorNames.atlantis,'background')));const Separators=styled.div.withConfig({componentId:"fox-ui__sc-10x2wrn-1"})(["position:absolute;top:0;display:flex;justify-content:space-between;width:100%;height:4px;z-index:3;"]);const Separator=styled.div.withConfig({componentId:"fox-ui__sc-10x2wrn-2"})(["width:2px;height:100%;&:first-child,&:last-child{width:0;}",""],(o=>color(o.separatorColor?o.separatorColor:DefaultColorNames.white,'background')));const isEmpty=css(["& ","{&:first-child{&:before{background:rgba(0,0,0,0.1);}}}"],Separator);const Root=styled.div.withConfig({componentId:"fox-ui__sc-10x2wrn-3"})(["position:relative;height:4px;background:rgba(0,0,0,0.1);border-radius:10px;"," "," ",""],(o=>o.haveCircle?(o=>css(["margin-left:8px;border-radius:0 10px 10px 0;& ","{border-radius:0 10px 10px 0;}& ","{&:first-child{position:relative;&:before{position:absolute;display:block;content:'';left:-8px;top:-2px;width:8px;height:8px;border-radius:50%;background:",";}}}"],Progress,Separator,getColor(o.percentColor||DefaultColorNames.atlantis,o)))(o):null),(o=>o.percent===100?(o=>css(["& ","{&:last-child{position:relative;&:before{position:absolute;top:-6px;right:-6px;display:block;content:'';background:"," url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K') center no-repeat;width:16px;height:16px;border-radius:50%;}}}"],Separator,getColor(o.percentColor||DefaultColorNames.atlantis,o)))(o):null),(o=>o.percent===0?isEmpty:null));export{Progress,Root,Separator,Separators};

package/components/Radio/Group.js

@@ -0,0 +1 @@
+'use strict';var style=require('./style.js');var require$$0=require('react/jsx-runtime');exports.RadioGroup=({children:r,...e})=>require$$0.jsx(style.Group,{...e,children:r});

package/components/Radio/Group.mjs

@@ -0,0 +1 @@
+import{Group}from'./style.mjs';import{jsx}from'react/jsx-runtime';function RadioGroup({children:r,...o}){return jsx(Group,{...o,children:r})}export{RadioGroup};

package/components/Radio/Radio.js

@@ -0,0 +1 @@
+'use strict';var cx=require('clsx');var styled=require('styled-components');var useClassname=require('../../hooks/useClassname.js');var Group=require('./Group.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var InputRadio=require('../InputRadio/InputRadio.js');function Radio(e){const s=e.checked===void 0;const r=styled.useTheme();const{children:i,disabled:a,error:d,id:l,name:o,size:t,value:u,label:c,className:n,width:p=r.defaultInputControlsWidth,style:h,fluid:m,display:x,...y}=e;const R=useClassname.useClassname(Radio.displayName);const $=cx(R,n,e.checked&&!s?`${R}--checked`:null);const q=`${R}__label`;return require$$0.jsxs(style.Root,{className:$,style:h,disabled:a,error:d,htmlFor:l||o,size:t,width:p,display:x,fluid:m,children:[require$$0.jsx("input",{...y,id:l||o,name:o,type:"radio",value:u,disabled:a,...s?{defaultChecked:e.defaultChecked}:{checked:e.checked}}),require$$0.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:[require$$0.jsx("circle",{cx:"10",cy:"10",r:"9",stroke:"#727D8A",strokeWidth:"2",fill:"#fff"}),require$$0.jsx("circle",{cx:"10",cy:"10",r:"5",fill:"#727D8A"})]}),(c||i)&&require$$0.jsx("span",{className:q,children:c||i})]})}Radio.defaultProps={disabled:!1,size:'medium',display:'inline-flex',onChange:e=>console.log(e,e.target.value)},Radio.Input=InputRadio.InputRadio,Radio.Group=Group.RadioGroup,Radio.displayName='Radio',exports.Radio=Radio;

package/components/Radio/Radio.mjs

@@ -0,0 +1 @@
+import cx from'clsx';import{useTheme}from'styled-components';import{useClassname}from'../../hooks/useClassname.mjs';import{RadioGroup}from'./Group.mjs';import{Root}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{InputRadio}from'../InputRadio/InputRadio.mjs';function Radio(e){const s=e.checked===void 0;const o=useTheme();const{children:i,disabled:d,error:a,id:l,name:t,size:r,value:c,label:n,className:m,width:u=o.defaultInputControlsWidth,style:p,fluid:h,display:f,...x}=e;const R=useClassname(Radio.displayName);const j=cx(R,m,e.checked&&!s?`${R}--checked`:null);const y=`${R}__label`;return jsxs(Root,{className:j,style:p,disabled:d,error:a,htmlFor:l||t,size:r,width:u,display:f,fluid:h,children:[jsx("input",{...x,id:l||t,name:t,type:"radio",value:c,disabled:d,...s?{defaultChecked:e.defaultChecked}:{checked:e.checked}}),jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:[jsx("circle",{cx:"10",cy:"10",r:"9",stroke:"#727D8A",strokeWidth:"2",fill:"#fff"}),jsx("circle",{cx:"10",cy:"10",r:"5",fill:"#727D8A"})]}),(n||i)&&jsx("span",{className:y,children:n||i})]})}Radio.defaultProps={disabled:!1,size:'medium',display:'inline-flex',onChange:e=>console.log(e,e.target.value)},Radio.Input=InputRadio,Radio.Group=RadioGroup,Radio.displayName='Radio';export{Radio};

package/components/Radio/style.js

@@ -0,0 +1,10 @@
+'use strict';var styled=require('styled-components');var screen=require('../../mixins/screen.js');var responsiveProperty=require('../../mixins/responsive-property.js');var display=require('../../mixins/display.js');const sizeRadio=(e=14)=>styled.css(["font-size:","px;svg{width:","px;height:","px;}"],e,e,e);const disabled=styled.css(["cursor:not-allowed;color:#d4d4d4;svg{circle:nth-child(1){stroke:#d4d4d4;}circle:nth-child(2){fill:#d4d4d4;}}& > span{cursor:not-allowed;}"]);const error=styled.css(["svg{circle{fill:#ffeef0;stroke:#ffa3a3;}circle:nth-child(2){fill:#ffa3a3;}}"]);const Root=styled.label.withConfig({shouldForwardProp:e=>['children','htmlFor'].includes(e)}).withConfig({componentId:"fox-ui__sc-1u0nc40-0"})(["align-items:baseline;user-select:none;cursor:pointer;width:auto;svg{position:relative;top:2px;flex-shrink:0;circle:nth-child(2){opacity:0;transition:all 0.2s ease;}}& + &{margin-left:15px;}input{display:none;appearance:none;&:checked + svg{circle:nth-child(2){opacity:1;transform:scale(1);}","}}> span{margin-left:10px;cursor:pointer;}"," "," "," "," "," "," "," ",""],(e=>e.error?null:styled.css(["circle:not(:disabled){stroke:#48a1e6;}circle:not(:disabled):last-child{fill:#48a1e6;}"])),(e=>e.size==='small'?sizeRadio(14):null),(e=>e.size==='medium'?sizeRadio(16):null),(e=>e.size==='large'?sizeRadio(18):null),(e=>e.disabled?disabled:null),(e=>e.error?error:null),(e=>e.display?display.display(e.display):null),(e=>responsiveProperty.responsiveProperty('width',e.fluid&&e.width!=='auto'&&!Array.isArray(e.width)?'max-width':'width')),(e=>e.fluid?styled.css(["width:100%;"]):null));const Group=styled.div.withConfig({shouldForwardProp:e=>e!=='inline'}).withConfig({componentId:"fox-ui__sc-1u0nc40-1"})(["display:flex;flex-direction:column;line-height:normal;> ","{margin-left:0;&:not(:first-child){margin-top:15px;}}",""],Root,(e=>e.inline?styled.css(["flex-direction:row;&&& > ","{margin-top:0;}> "," + ","{margin-left:15px;}",""],Root,Root,Root,screen.screenMaxS()`
+            flex-direction: column;
+            > &{Root} {
+              margin-top: 0;
+            }
+            > ${Root} + ${Root} {
+              margin-left: 0;
+              margin-top: 15px;
+            }
+          `):null));exports.Group=Group,exports.Root=Root;

package/components/Radio/style.mjs

@@ -0,0 +1,10 @@
+import styled,{css}from'styled-components';import{screenMaxS}from'../../mixins/screen.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import{display}from'../../mixins/display.mjs';const sizeRadio=(i=14)=>css(["font-size:","px;svg{width:","px;height:","px;}"],i,i,i);const disabled=css(["cursor:not-allowed;color:#d4d4d4;svg{circle:nth-child(1){stroke:#d4d4d4;}circle:nth-child(2){fill:#d4d4d4;}}& > span{cursor:not-allowed;}"]);const error=css(["svg{circle{fill:#ffeef0;stroke:#ffa3a3;}circle:nth-child(2){fill:#ffa3a3;}}"]);const Root=styled.label.withConfig({shouldForwardProp:i=>['children','htmlFor'].includes(i)}).withConfig({componentId:"fox-ui__sc-1u0nc40-0"})(["align-items:baseline;user-select:none;cursor:pointer;width:auto;svg{position:relative;top:2px;flex-shrink:0;circle:nth-child(2){opacity:0;transition:all 0.2s ease;}}& + &{margin-left:15px;}input{display:none;appearance:none;&:checked + svg{circle:nth-child(2){opacity:1;transform:scale(1);}","}}> span{margin-left:10px;cursor:pointer;}"," "," "," "," "," "," "," ",""],(i=>i.error?null:css(["circle:not(:disabled){stroke:#48a1e6;}circle:not(:disabled):last-child{fill:#48a1e6;}"])),(i=>i.size==='small'?sizeRadio(14):null),(i=>i.size==='medium'?sizeRadio(16):null),(i=>i.size==='large'?sizeRadio(18):null),(i=>i.disabled?disabled:null),(i=>i.error?error:null),(i=>i.display?display(i.display):null),(i=>responsiveProperty('width',i.fluid&&i.width!=='auto'&&!Array.isArray(i.width)?'max-width':'width')),(i=>i.fluid?css(["width:100%;"]):null));const Group=styled.div.withConfig({shouldForwardProp:i=>i!=='inline'}).withConfig({componentId:"fox-ui__sc-1u0nc40-1"})(["display:flex;flex-direction:column;line-height:normal;> ","{margin-left:0;&:not(:first-child){margin-top:15px;}}",""],Root,(i=>i.inline?css(["flex-direction:row;&&& > ","{margin-top:0;}> "," + ","{margin-left:15px;}",""],Root,Root,Root,screenMaxS()`
+            flex-direction: column;
+            > &{Root} {
+              margin-top: 0;
+            }
+            > ${Root} + ${Root} {
+              margin-left: 0;
+              margin-top: 15px;
+            }
+          `):null));export{Group,Root};

package/components/Scrollable/Scrollable.js

@@ -0,0 +1 @@
+'use strict';var React=require('react');var rcScrollbars=require('rc-scrollbars');var styled=require('styled-components');var require$$0=require('react/jsx-runtime');const withThemeScrollable=styled.withTheme(class Scrollable extends React.PureComponent{static displayName='Scrollable';static defaultProps={autoHide:!1,autoHideTimeout:1e3,autoHideDuration:200,autoHeight:!1,withShadow:!1,shadowHeight:50,shadowOpacity:.15,shadowColor:'mineShaft',thumbColor:'mineShaft',thumbOpacity:.15,thumbBorderRadius:1,thumbWidth:4,trackColor:'#333333',trackOpacity:.15,trackBorderRadius:1,trackWidth:4,disabled:!1,isolate:!0};scrollable=null;ts=0;state={scrollTop:0,scrollHeight:0,clientHeight:0};componentDidMount(){this.scrollable&&this.scrollable.parentNode&&(this.scrollable.parentNode.addEventListener('touchstart',this.handleTouchStart,!1),this.scrollable.parentNode.addEventListener('touchmove',this.handleTouchMove,!1),this.scrollable.parentNode.addEventListener('wheel',this.handleScroll,!1),this.scrollable.parentNode.addEventListener('scroll',this.handleScroll,!1))}componentWillUnmount(){this.scrollable&&this.scrollable.parentNode&&(this.scrollable.parentNode.removeEventListener('touchstart',this.handleTouchStart),this.scrollable.parentNode.removeEventListener('touchmove',this.handleTouchMove),this.scrollable.parentNode.removeEventListener('wheel',this.handleScroll),this.scrollable.parentNode.removeEventListener('scroll',this.handleScroll))}handleTouchStart=e=>{this.ts=e.touches[0].clientY};handleTouchMove=e=>{if(!this.props.isolate||!this.scrollable)return!0;const t=this.scrollable.parentNode;if(!t)return;const r=e.changedTouches[0].clientY;const o=this.ts>r?-1:1;const l=o===1&&t.scrollTop===0;const s=o===-1&&Math.floor(t.scrollTop)===t.scrollHeight-t.clientHeight;return(l||s)&&(e.preventDefault(),this.ts=r),!0};handleScroll=e=>{if(!this.props.isolate||!this.scrollable)return!0;const t=this.scrollable.parentNode;if(!t)return;const r=(e.deltaY||e.detail)<0?1:-1;return(r===1&&t.scrollTop===0||r===-1&&t.scrollTop===t.scrollHeight-t.clientHeight)&&e.preventDefault(),!0};handleUpdate=e=>{const{scrollTop:t,scrollHeight:r,clientHeight:o}=e;this.setState({scrollTop:t,scrollHeight:r,clientHeight:o})};calculateShadowOffset(){const{scrollTop:e,scrollHeight:t,clientHeight:r}=this.state;const{shadowHeight:o=50}=this.props;const l=t-r||0;return Math.floor(o*(e*100/(l<=0?1:l))/100-o)}hexToRgb=e=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null};renderTrack=({style:e,...t},r)=>{const{trackColor:o,trackOpacity:l,trackBorderRadius:s,trackWidth:a}=this.props;const i=o?this.hexToRgb(o):null;const h={background:i?`rgba(${i.r}, ${i.g}, ${i.b}, ${l})`:"rgba(255,255,255,0)",borderRadius:`${s}px`,zIndex:14,...r==='vertical'?{right:4,top:2,bottom:2,width:`${a}px`}:{bottom:4,left:2,right:2,height:`${a}px`}};return require$$0.jsx("div",{style:{...e,...h},...t})};renderThumb=({style:e,...t})=>{const{thumbColor:r,thumbOpacity:o,thumbBorderRadius:l,thumbWidth:s}=this.props;return require$$0.jsx("div",{style:{...e,opacity:o,backgroundColor:this.props.theme.colors[r]||this.props.theme.colors[r],borderRadius:`${l}px`,width:`${s}px`},...t})};render(){const{children:e,withShadow:t,shadowHeight:r,shadowColor:o,shadowOpacity:l,className:s,thumbColor:a,thumbOpacity:i,thumbBorderRadius:h,thumbWidth:c,trackColor:n,trackOpacity:d,trackBorderRadius:u,trackWidth:p,isolate:b,style:m,disabled:g,...$}=this.props;if(g)return require$$0.jsx("div",{children:e});const{scrollHeight:v,clientHeight:T}=this.state;const x=this.calculateShadowOffset();return require$$0.jsxs("div",{style:{...m,position:'relative'},className:s,children:[t&&v>T&&x!==-r&&require$$0.jsx("div",{style:{position:'absolute',display:'block',height:`${r}px`,left:0,right:0,top:`-${r}px`,opacity:l,backgroundImage:`linear-gradient(to bottom, ${this.props.theme.colors[o]} 20%, rgba(255, 255, 255, 0) 100%)`,transform:`translateY(${r+x}px)`,zIndex:10}}),t&&v>T&&x<0&&require$$0.jsx("div",{style:{position:'absolute',display:'block',height:`${r}px`,left:0,right:0,bottom:0,opacity:l,backgroundImage:`linear-gradient(to top, ${this.props.theme.colors[o]} 20%, rgba(255, 255, 255, 0) 100%)`,transform:`translateY(${r+x}px)`,zIndex:10}}),require$$0.jsx(rcScrollbars.Scrollbars,{renderTrackVertical:e=>this.renderTrack({...e},'vertical'),renderTrackHorizontal:e=>this.renderTrack({...e},'horizontal'),renderThumbHorizontal:this.renderThumb,renderThumbVertical:this.renderThumb,onUpdate:this.handleUpdate,hideTracksWhenNotNeeded:!0,...$,children:require$$0.jsx("div",{ref:e=>{this.scrollable=e},children:e})})]})}});withThemeScrollable.displayName='Scrollable',exports.Scrollable=withThemeScrollable;

package/components/Scrollable/Scrollable.mjs

@@ -0,0 +1 @@
+import{PureComponent}from'react';import{Scrollbars}from'rc-scrollbars';import{withTheme}from'styled-components';import{jsx,jsxs}from'react/jsx-runtime';const withThemeScrollable=withTheme(class Scrollable extends PureComponent{static displayName='Scrollable';static defaultProps={autoHide:!1,autoHideTimeout:1e3,autoHideDuration:200,autoHeight:!1,withShadow:!1,shadowHeight:50,shadowOpacity:.15,shadowColor:'mineShaft',thumbColor:'mineShaft',thumbOpacity:.15,thumbBorderRadius:1,thumbWidth:4,trackColor:'#333333',trackOpacity:.15,trackBorderRadius:1,trackWidth:4,disabled:!1,isolate:!0};scrollable=null;ts=0;state={scrollTop:0,scrollHeight:0,clientHeight:0};componentDidMount(){this.scrollable&&this.scrollable.parentNode&&(this.scrollable.parentNode.addEventListener('touchstart',this.handleTouchStart,!1),this.scrollable.parentNode.addEventListener('touchmove',this.handleTouchMove,!1),this.scrollable.parentNode.addEventListener('wheel',this.handleScroll,!1),this.scrollable.parentNode.addEventListener('scroll',this.handleScroll,!1))}componentWillUnmount(){this.scrollable&&this.scrollable.parentNode&&(this.scrollable.parentNode.removeEventListener('touchstart',this.handleTouchStart),this.scrollable.parentNode.removeEventListener('touchmove',this.handleTouchMove),this.scrollable.parentNode.removeEventListener('wheel',this.handleScroll),this.scrollable.parentNode.removeEventListener('scroll',this.handleScroll))}handleTouchStart=t=>{this.ts=t.touches[0].clientY};handleTouchMove=t=>{if(!this.props.isolate||!this.scrollable)return!0;const e=this.scrollable.parentNode;if(!e)return;const r=t.changedTouches[0].clientY;const o=this.ts>r?-1:1;const l=o===1&&e.scrollTop===0;const s=o===-1&&Math.floor(e.scrollTop)===e.scrollHeight-e.clientHeight;return(l||s)&&(t.preventDefault(),this.ts=r),!0};handleScroll=t=>{if(!this.props.isolate||!this.scrollable)return!0;const e=this.scrollable.parentNode;if(!e)return;const r=(t.deltaY||t.detail)<0?1:-1;return(r===1&&e.scrollTop===0||r===-1&&e.scrollTop===e.scrollHeight-e.clientHeight)&&t.preventDefault(),!0};handleUpdate=t=>{const{scrollTop:e,scrollHeight:r,clientHeight:o}=t;this.setState({scrollTop:e,scrollHeight:r,clientHeight:o})};calculateShadowOffset(){const{scrollTop:t,scrollHeight:e,clientHeight:r}=this.state;const{shadowHeight:o=50}=this.props;const l=e-r||0;return Math.floor(o*(t*100/(l<=0?1:l))/100-o)}hexToRgb=t=>{const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null};renderTrack=({style:t,...e},r)=>{const{trackColor:o,trackOpacity:l,trackBorderRadius:s,trackWidth:a}=this.props;const i=o?this.hexToRgb(o):null;const h={background:i?`rgba(${i.r}, ${i.g}, ${i.b}, ${l})`:"rgba(255,255,255,0)",borderRadius:`${s}px`,zIndex:14,...r==='vertical'?{right:4,top:2,bottom:2,width:`${a}px`}:{bottom:4,left:2,right:2,height:`${a}px`}};return jsx("div",{style:{...t,...h},...e})};renderThumb=({style:t,...e})=>{const{thumbColor:r,thumbOpacity:o,thumbBorderRadius:l,thumbWidth:s}=this.props;return jsx("div",{style:{...t,opacity:o,backgroundColor:this.props.theme.colors[r]||this.props.theme.colors[r],borderRadius:`${l}px`,width:`${s}px`},...e})};render(){const{children:t,withShadow:e,shadowHeight:r,shadowColor:o,shadowOpacity:l,className:s,thumbColor:a,thumbOpacity:i,thumbBorderRadius:h,thumbWidth:c,trackColor:n,trackOpacity:d,trackBorderRadius:p,trackWidth:u,isolate:b,style:m,disabled:g,...T}=this.props;if(g)return jsx("div",{children:t});const{scrollHeight:f,clientHeight:v}=this.state;const x=this.calculateShadowOffset();return jsxs("div",{style:{...m,position:'relative'},className:s,children:[e&&f>v&&x!==-r&&jsx("div",{style:{position:'absolute',display:'block',height:`${r}px`,left:0,right:0,top:`-${r}px`,opacity:l,backgroundImage:`linear-gradient(to bottom, ${this.props.theme.colors[o]} 20%, rgba(255, 255, 255, 0) 100%)`,transform:`translateY(${r+x}px)`,zIndex:10}}),e&&f>v&&x<0&&jsx("div",{style:{position:'absolute',display:'block',height:`${r}px`,left:0,right:0,bottom:0,opacity:l,backgroundImage:`linear-gradient(to top, ${this.props.theme.colors[o]} 20%, rgba(255, 255, 255, 0) 100%)`,transform:`translateY(${r+x}px)`,zIndex:10}}),jsx(Scrollbars,{renderTrackVertical:t=>this.renderTrack({...t},'vertical'),renderTrackHorizontal:t=>this.renderTrack({...t},'horizontal'),renderThumbHorizontal:this.renderThumb,renderThumbVertical:this.renderThumb,onUpdate:this.handleUpdate,hideTracksWhenNotNeeded:!0,...T,children:jsx("div",{ref:t=>{this.scrollable=t},children:t})})]})}});withThemeScrollable.displayName='Scrollable';export{withThemeScrollable as Scrollable};

package/components/Section/Section.js

@@ -0,0 +1 @@
+'use strict';var style=require('./style.js');var require$$0=require('react/jsx-runtime');function Section(e){return require$$0.jsx(style.Root,{...e})}Section.displayName='Section',exports.Section=Section;

package/components/Section/Section.mjs

@@ -0,0 +1 @@
+import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';function Section(o){return jsx(Root,{...o})}Section.displayName='Section';export{Section};