@foxford/ui 2.44.0 → 2.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Accordion/Accordion.js +2 -0
- package/components/Accordion/Accordion.js.map +1 -0
- package/components/Accordion/Accordion.mjs +2 -0
- package/components/Accordion/Accordion.mjs.map +1 -0
- package/components/Accordion/constants.js +2 -0
- package/components/Accordion/constants.js.map +1 -0
- package/components/Accordion/constants.mjs +2 -0
- package/components/Accordion/constants.mjs.map +1 -0
- package/components/Accordion/style.js +2 -0
- package/components/Accordion/style.js.map +1 -0
- package/components/Accordion/style.mjs +2 -0
- package/components/Accordion/style.mjs.map +1 -0
- package/components/Chip/constants.js +1 -1
- package/components/Chip/constants.js.map +1 -1
- package/components/Chip/constants.mjs +1 -1
- package/components/Chip/constants.mjs.map +1 -1
- package/components/IconButton/constants.js +1 -1
- package/components/IconButton/constants.js.map +1 -1
- package/components/IconButton/constants.mjs +1 -1
- package/components/IconButton/constants.mjs.map +1 -1
- package/dts/index.d.ts +71 -4
- package/external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.js +2 -0
- package/external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.js.map +1 -0
- package/external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.mjs +2 -0
- package/external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.mjs.map +1 -0
- package/external/.pnpm/nanoid@5.0.7/node_modules/nanoid/url-alphabet/index.js +2 -0
- package/external/.pnpm/nanoid@5.0.7/node_modules/nanoid/url-alphabet/index.js.map +1 -0
- package/external/.pnpm/nanoid@5.0.7/node_modules/nanoid/url-alphabet/index.mjs +2 -0
- package/external/.pnpm/nanoid@5.0.7/node_modules/nanoid/url-alphabet/index.mjs.map +1 -0
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/mixins/focus.js.map +1 -1
- package/mixins/focus.mjs.map +1 -1
- package/package.json +1 -1
- package/theme/themes.js +1 -1
- package/theme/themes.js.map +1 -1
- package/theme/themes.mjs +1 -1
- package/theme/themes.mjs.map +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var React=require('react');var index_browser=require('../../external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.js');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 Text=require('../Text/Text.js');const Accordion=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:s="m",iconProps:t={},titleProps:i={},subtitleProps:n={},defaultExpanded:o=!1,sizeXXS:a,sizeXS:d,sizeS:c,sizeM:l,sizeL:p,sizeXL:u,expanded:x,onExpandedChange:$,children:S,icon:h,imgSrc:q,title:j,subtitle:y,addon:b,loading:m,headingAs:z,disabled:g,...v}=e;const E={size:s,sizeXXS:a,sizeXS:d,sizeS:c,sizeM:l,sizeL:p,sizeXL:u};const I=React.isValidElement(b)&&typeof b.props=='object'&&b.props!==null?b.props:{};const[T,w]=React.useState(x??o);const[R,f]=React.useState(x??T);const k=React.useMemo((()=>index_browser.nanoid()),[]);const L=React.useMemo((()=>index_browser.nanoid()),[]);return React.useLayoutEffect((()=>{x!==void 0&&w(x)}),[x]),React.useLayoutEffect((()=>{T&&f(!0)}),[T]),require$$0.jsxs(style.Root,{...v,...E,expanded:T,ref:r,children:[require$$0.jsx(style.Heading,{as:z,children:require$$0.jsxs(style.Button,{id:k,type:"button","aria-controls":L,"aria-expanded":R,"aria-disabled":R&&(g||x!==void 0&&!$),expanded:T,disabled:g,loading:m,palette:v.palette,onClick:()=>{const e=!T;x===void 0&&w(e),$&&$(e)},children:[h&&!m&&require$$0.jsx(style.Spacer,{children:require$$0.jsx(Icon.Icon,{preset:"brand",name:typeof h=='string'?h:void 0,icon:typeof h!='string'?h:void 0,sizes:constants.SIZES_ICON,...E,...t})}),q&&require$$0.jsx(style.Media,{src:m?void 0:q,children:m&&require$$0.jsx(Skeleton.Skeleton,{as:"span",width:"100%",height:"100%",borderRadius:"inherit"})}),b&&require$$0.jsx(style.Spacer,{stretch:!0,children:React.isValidElement(b)?React.cloneElement(b,{...E,...I}):typeof b=='function'?b(E):b}),require$$0.jsxs(style.Content,{children:[m?require$$0.jsx(Skeleton.Skeleton,{as:"span",borderRadius:4,children:require$$0.jsx(Text.Text,{as:"span",appearance:"subheading-compact",sizes:constants.SIZES_TITLE,...E,...i})}):require$$0.jsx(Text.Text,{as:"span",appearance:"subheading-compact",wordBreak:"break-word",color:"inherit",sizes:constants.SIZES_TITLE,...E,...i,children:j}),y&&!m&&require$$0.jsx(Text.Text,{as:"span",appearance:"body",wordBreak:"break-word",color:"content-onmain-tertiary",marginTop:j?'0.2em':void 0,sizes:constants.SIZES_SUBTITLE,...E,...n,children:y})]}),require$$0.jsx(style.IconAnimated,{...E,preset:"brand",name:"chevronDown",sizes:constants.SIZES_ICON,up:T})]})}),require$$0.jsx(style.Panel,{id:L,role:"region","aria-labelledby":k,hidden:!R,onTransitionEnd:e=>{e.propertyName!=='opacity'||T||f(!1)},children:require$$0.jsx(style.Details,{children:S})})]})})),{displayName:'Accordion',sizes:constants.SIZES});exports.Accordion=Accordion;
|
|
2
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement, cloneElement, useLayoutEffect, useMemo } from 'react'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport { Skeleton } from 'components/Skeleton'\nimport { SIZES, SIZES_ICON, SIZES_TITLE, SIZES_SUBTITLE } from './constants'\nimport type { AccordionProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Accordion'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<section\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Accordion/types.ts).\n */\nconst Accordion: React.ForwardRefExoticComponent<AccordionProps> = withMergedProps<AccordionProps, HTMLElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n iconProps = {},\n titleProps = {},\n subtitleProps = {},\n defaultExpanded = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n expanded,\n onExpandedChange,\n children,\n icon,\n imgSrc,\n title,\n subtitle,\n addon,\n loading,\n headingAs,\n disabled,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const addonProps =\n isValidElement(addon) && typeof addon.props === 'object' && addon.props !== null ? addon.props : {}\n\n const [panelExpanded, setPanelExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n const [panelVisible, setPanelVisible] = useState<boolean>(expanded ?? panelExpanded)\n\n const controlId = useMemo(() => nanoid(), [])\n const panelId = useMemo(() => nanoid(), [])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) setPanelExpanded(expanded)\n }, [expanded])\n\n useLayoutEffect(() => {\n if (panelExpanded) setPanelVisible(true)\n }, [panelExpanded])\n\n return (\n <Styled.Root {...restProps} {...sizeProps} expanded={panelExpanded} ref={ref}>\n <Styled.Heading as={headingAs}>\n <Styled.Button\n id={controlId}\n type='button'\n aria-controls={panelId}\n aria-expanded={panelVisible}\n aria-disabled={panelVisible && (disabled || (expanded !== undefined && !onExpandedChange))}\n expanded={panelExpanded}\n disabled={disabled}\n loading={loading}\n palette={restProps.palette}\n onClick={() => {\n const update = !panelExpanded\n\n if (expanded === undefined) setPanelExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }}\n >\n {icon && !loading && (\n <Styled.Spacer>\n <Icon\n preset='brand'\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n sizes={SIZES_ICON}\n {...sizeProps}\n {...iconProps}\n />\n </Styled.Spacer>\n )}\n {imgSrc && (\n <Styled.Media src={loading ? undefined : imgSrc}>\n {loading && <Skeleton as='span' width='100%' height='100%' borderRadius='inherit' />}\n </Styled.Media>\n )}\n {addon && (\n <Styled.Spacer stretch>\n {isValidElement(addon)\n ? cloneElement(addon, { ...sizeProps, ...addonProps })\n : typeof addon === 'function'\n ? addon(sizeProps)\n : addon}\n </Styled.Spacer>\n )}\n <Styled.Content>\n {loading ? (\n <Skeleton as='span' borderRadius={4}>\n <Text as='span' appearance='subheading-compact' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n </Skeleton>\n ) : (\n <Text\n as='span'\n appearance='subheading-compact'\n wordBreak='break-word'\n color='inherit'\n sizes={SIZES_TITLE}\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n )}\n {subtitle && !loading && (\n <Text\n as='span'\n appearance='body'\n wordBreak='break-word'\n color='content-onmain-tertiary'\n marginTop={title ? '0.2em' : undefined}\n sizes={SIZES_SUBTITLE}\n {...sizeProps}\n {...subtitleProps}\n >\n {subtitle}\n </Text>\n )}\n </Styled.Content>\n <Styled.IconAnimated\n {...sizeProps}\n preset='brand'\n name='chevronDown'\n sizes={SIZES_ICON}\n up={panelExpanded}\n />\n </Styled.Button>\n </Styled.Heading>\n <Styled.Panel\n id={panelId}\n role='region'\n aria-labelledby={controlId}\n hidden={!panelVisible}\n onTransitionEnd={(evt) => {\n if (evt.propertyName === 'opacity' && !panelExpanded) {\n setPanelVisible(false)\n }\n }}\n >\n <Styled.Details>{children}</Styled.Details>\n </Styled.Panel>\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Accordion }\n"],"names":["Accordion","withMergedProps","forwardRef","props","ref","size","iconProps","titleProps","subtitleProps","defaultExpanded","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","expanded","onExpandedChange","children","icon","imgSrc","title","subtitle","addon","loading","headingAs","disabled","restProps","sizeProps","addonProps","isValidElement","panelExpanded","setPanelExpanded","useState","panelVisible","setPanelVisible","controlId","useMemo","nanoid","panelId","useLayoutEffect","undefined","_jsxs","Styled","_jsx","jsx","as","jsxs","id","type","palette","onClick","update","Icon","preset","name","sizes","SIZES_ICON","src","Skeleton","width","height","borderRadius","stretch","cloneElement","Text","appearance","SIZES_TITLE","wordBreak","color","marginTop","SIZES_SUBTITLE","up","role","hidden","onTransitionEnd","evt","propertyName","displayName","SIZES"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{forwardRef,isValidElement,useState,useMemo,useLayoutEffect,cloneElement}from'react';import{nanoid}from'../../external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_ICON,SIZES_TITLE,SIZES_SUBTITLE}from'./constants.mjs';import{Root,Heading,Button,Spacer,Media,Content,IconAnimated,Panel,Details}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';const Accordion=withMergedProps(forwardRef(((e,o)=>{const{size:n="m",iconProps:s={},titleProps:i={},subtitleProps:t={},defaultExpanded:r=!1,sizeXXS:a,sizeXS:d,sizeS:c,sizeM:p,sizeL:l,sizeXL:m,expanded:S,onExpandedChange:x,children:h,icon:u,imgSrc:j,title:f,subtitle:E,addon:I,loading:z,headingAs:b,disabled:T,...g}=e;const y={size:n,sizeXXS:a,sizeXS:d,sizeS:c,sizeM:p,sizeL:l,sizeXL:m};const w=isValidElement(I)&&typeof I.props=='object'&&I.props!==null?I.props:{};const[L,k]=useState(S??r);const[M,Z]=useState(S??L);const _=useMemo((()=>nanoid()),[]);const v=useMemo((()=>nanoid()),[]);return useLayoutEffect((()=>{S!==void 0&&k(S)}),[S]),useLayoutEffect((()=>{L&&Z(!0)}),[L]),jsxs(Root,{...g,...y,expanded:L,ref:o,children:[jsx(Heading,{as:b,children:jsxs(Button,{id:_,type:"button","aria-controls":v,"aria-expanded":M,"aria-disabled":M&&(T||S!==void 0&&!x),expanded:L,disabled:T,loading:z,palette:g.palette,onClick:()=>{const e=!L;S===void 0&&k(e),x&&x(e)},children:[u&&!z&&jsx(Spacer,{children:jsx(Icon,{preset:"brand",name:typeof u=='string'?u:void 0,icon:typeof u!='string'?u:void 0,sizes:SIZES_ICON,...y,...s})}),j&&jsx(Media,{src:z?void 0:j,children:z&&jsx(Skeleton,{as:"span",width:"100%",height:"100%",borderRadius:"inherit"})}),I&&jsx(Spacer,{stretch:!0,children:isValidElement(I)?cloneElement(I,{...y,...w}):typeof I=='function'?I(y):I}),jsxs(Content,{children:[z?jsx(Skeleton,{as:"span",borderRadius:4,children:jsx(Text,{as:"span",appearance:"subheading-compact",sizes:SIZES_TITLE,...y,...i})}):jsx(Text,{as:"span",appearance:"subheading-compact",wordBreak:"break-word",color:"inherit",sizes:SIZES_TITLE,...y,...i,children:f}),E&&!z&&jsx(Text,{as:"span",appearance:"body",wordBreak:"break-word",color:"content-onmain-tertiary",marginTop:f?'0.2em':void 0,sizes:SIZES_SUBTITLE,...y,...t,children:E})]}),jsx(IconAnimated,{...y,preset:"brand",name:"chevronDown",sizes:SIZES_ICON,up:L})]})}),jsx(Panel,{id:v,role:"region","aria-labelledby":_,hidden:!M,onTransitionEnd:e=>{e.propertyName!=='opacity'||L||Z(!1)},children:jsx(Details,{children:h})})]})})),{displayName:'Accordion',sizes:SIZES});export{Accordion};
|
|
2
|
+
//# sourceMappingURL=Accordion.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.mjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement, cloneElement, useLayoutEffect, useMemo } from 'react'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport { Skeleton } from 'components/Skeleton'\nimport { SIZES, SIZES_ICON, SIZES_TITLE, SIZES_SUBTITLE } from './constants'\nimport type { AccordionProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Accordion'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<section\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Accordion/types.ts).\n */\nconst Accordion: React.ForwardRefExoticComponent<AccordionProps> = withMergedProps<AccordionProps, HTMLElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n iconProps = {},\n titleProps = {},\n subtitleProps = {},\n defaultExpanded = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n expanded,\n onExpandedChange,\n children,\n icon,\n imgSrc,\n title,\n subtitle,\n addon,\n loading,\n headingAs,\n disabled,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const addonProps =\n isValidElement(addon) && typeof addon.props === 'object' && addon.props !== null ? addon.props : {}\n\n const [panelExpanded, setPanelExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n const [panelVisible, setPanelVisible] = useState<boolean>(expanded ?? panelExpanded)\n\n const controlId = useMemo(() => nanoid(), [])\n const panelId = useMemo(() => nanoid(), [])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) setPanelExpanded(expanded)\n }, [expanded])\n\n useLayoutEffect(() => {\n if (panelExpanded) setPanelVisible(true)\n }, [panelExpanded])\n\n return (\n <Styled.Root {...restProps} {...sizeProps} expanded={panelExpanded} ref={ref}>\n <Styled.Heading as={headingAs}>\n <Styled.Button\n id={controlId}\n type='button'\n aria-controls={panelId}\n aria-expanded={panelVisible}\n aria-disabled={panelVisible && (disabled || (expanded !== undefined && !onExpandedChange))}\n expanded={panelExpanded}\n disabled={disabled}\n loading={loading}\n palette={restProps.palette}\n onClick={() => {\n const update = !panelExpanded\n\n if (expanded === undefined) setPanelExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }}\n >\n {icon && !loading && (\n <Styled.Spacer>\n <Icon\n preset='brand'\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n sizes={SIZES_ICON}\n {...sizeProps}\n {...iconProps}\n />\n </Styled.Spacer>\n )}\n {imgSrc && (\n <Styled.Media src={loading ? undefined : imgSrc}>\n {loading && <Skeleton as='span' width='100%' height='100%' borderRadius='inherit' />}\n </Styled.Media>\n )}\n {addon && (\n <Styled.Spacer stretch>\n {isValidElement(addon)\n ? cloneElement(addon, { ...sizeProps, ...addonProps })\n : typeof addon === 'function'\n ? addon(sizeProps)\n : addon}\n </Styled.Spacer>\n )}\n <Styled.Content>\n {loading ? (\n <Skeleton as='span' borderRadius={4}>\n <Text as='span' appearance='subheading-compact' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n </Skeleton>\n ) : (\n <Text\n as='span'\n appearance='subheading-compact'\n wordBreak='break-word'\n color='inherit'\n sizes={SIZES_TITLE}\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n )}\n {subtitle && !loading && (\n <Text\n as='span'\n appearance='body'\n wordBreak='break-word'\n color='content-onmain-tertiary'\n marginTop={title ? '0.2em' : undefined}\n sizes={SIZES_SUBTITLE}\n {...sizeProps}\n {...subtitleProps}\n >\n {subtitle}\n </Text>\n )}\n </Styled.Content>\n <Styled.IconAnimated\n {...sizeProps}\n preset='brand'\n name='chevronDown'\n sizes={SIZES_ICON}\n up={panelExpanded}\n />\n </Styled.Button>\n </Styled.Heading>\n <Styled.Panel\n id={panelId}\n role='region'\n aria-labelledby={controlId}\n hidden={!panelVisible}\n onTransitionEnd={(evt) => {\n if (evt.propertyName === 'opacity' && !panelExpanded) {\n setPanelVisible(false)\n }\n }}\n >\n <Styled.Details>{children}</Styled.Details>\n </Styled.Panel>\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Accordion }\n"],"names":["Accordion","withMergedProps","forwardRef","props","ref","size","iconProps","titleProps","subtitleProps","defaultExpanded","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","expanded","onExpandedChange","children","icon","imgSrc","title","subtitle","addon","loading","headingAs","disabled","restProps","sizeProps","addonProps","isValidElement","panelExpanded","setPanelExpanded","useState","panelVisible","setPanelVisible","controlId","useMemo","nanoid","panelId","useLayoutEffect","undefined","_jsxs","Styled","_jsx","as","id","type","palette","onClick","update","Icon","preset","name","sizes","SIZES_ICON","src","Skeleton","width","height","borderRadius","stretch","cloneElement","Text","appearance","SIZES_TITLE","wordBreak","color","marginTop","SIZES_SUBTITLE","up","role","hidden","onTransitionEnd","evt","propertyName","displayName","SIZES"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';exports.SIZES={l:{fontSize:32,paddingTop:'0.9em',paddingRight:'0.9em',paddingBottom:'0.9em',paddingLeft:'0.9em',minWidth:'min-content'},m:{fontSize:20,paddingTop:'0.9em',paddingRight:'0.9em',paddingBottom:'0.9em',paddingLeft:'0.9em',minWidth:'min-content'},s:{fontSize:16,paddingTop:'0.9em',paddingRight:'0.9em',paddingBottom:'0.9em',paddingLeft:'0.9em',minWidth:'min-content'},xs:{fontSize:10,paddingTop:'0.9em',paddingRight:'0.9em',paddingBottom:'0.9em',paddingLeft:'0.9em',minWidth:'min-content'}},exports.SIZES_ICON={l:{fontSize:32},m:{fontSize:24},s:{fontSize:20},xs:{fontSize:20}},exports.SIZES_SUBTITLE={l:{fontSize:18},m:{fontSize:16},s:{fontSize:14},xs:{fontSize:14}},exports.SIZES_TITLE={l:{fontSize:24},m:{fontSize:20},s:{fontSize:16},xs:{fontSize:16}};
|
|
2
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/Accordion/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { AccordionSize } from './types'\n\nexport const SIZES: Record<AccordionSize, CSSProperties> = {\n l: {\n fontSize: 32,\n paddingTop: '0.9em',\n paddingRight: '0.9em',\n paddingBottom: '0.9em',\n paddingLeft: '0.9em',\n minWidth: 'min-content',\n },\n m: {\n fontSize: 20,\n paddingTop: '0.9em',\n paddingRight: '0.9em',\n paddingBottom: '0.9em',\n paddingLeft: '0.9em',\n minWidth: 'min-content',\n },\n s: {\n fontSize: 16,\n paddingTop: '0.9em',\n paddingRight: '0.9em',\n paddingBottom: '0.9em',\n paddingLeft: '0.9em',\n minWidth: 'min-content',\n },\n xs: {\n fontSize: 10,\n paddingTop: '0.9em',\n paddingRight: '0.9em',\n paddingBottom: '0.9em',\n paddingLeft: '0.9em',\n minWidth: 'min-content',\n },\n}\n\nexport const SIZES_ICON: Record<AccordionSize, CSSProperties> = {\n l: { fontSize: 32 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n xs: { fontSize: 20 },\n}\n\nexport const SIZES_TITLE: Record<AccordionSize, CSSProperties> = {\n l: { fontSize: 24 },\n m: { fontSize: 20 },\n s: { fontSize: 16 },\n xs: { fontSize: 16 },\n}\n\nexport const SIZES_SUBTITLE: Record<AccordionSize, CSSProperties> = {\n l: { fontSize: 18 },\n m: { fontSize: 16 },\n s: { fontSize: 14 },\n xs: { fontSize: 14 },\n}\n"],"names":["l","fontSize","paddingTop","paddingRight","paddingBottom","paddingLeft","minWidth","m","s","xs"],"mappings":"2BAG2D,CACzDA,EAAG,CACDC,SAAU,GACVC,WAAY,QACZC,aAAc,QACdC,cAAe,QACfC,YAAa,QACbC,SAAU,eAEZC,EAAG,CACDN,SAAU,GACVC,WAAY,QACZC,aAAc,QACdC,cAAe,QACfC,YAAa,QACbC,SAAU,eAEZE,EAAG,CACDP,SAAU,GACVC,WAAY,QACZC,aAAc,QACdC,cAAe,QACfC,YAAa,QACbC,SAAU,eAEZG,GAAI,CACFR,SAAU,GACVC,WAAY,QACZC,aAAc,QACdC,cAAe,QACfC,YAAa,QACbC,SAAU,mCAIkD,CAC9DN,EAAG,CAAEC,SAAU,IACfM,EAAG,CAAEN,SAAU,IACfO,EAAG,CAAEP,SAAU,IACfQ,GAAI,CAAER,SAAU,4BAUkD,CAClED,EAAG,CAAEC,SAAU,IACfM,EAAG,CAAEN,SAAU,IACfO,EAAG,CAAEP,SAAU,IACfQ,GAAI,CAAER,SAAU,yBAX+C,CAC/DD,EAAG,CAAEC,SAAU,IACfM,EAAG,CAAEN,SAAU,IACfO,EAAG,CAAEP,SAAU,IACfQ,GAAI,CAAER,SAAU"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const SIZES={l:{fontSize:32,paddingTop:'0.9em',paddingRight:'0.9em',paddingBottom:'0.9em',paddingLeft:'0.9em',minWidth:'min-content'},m:{fontSize:20,paddingTop:'0.9em',paddingRight:'0.9em',paddingBottom:'0.9em',paddingLeft:'0.9em',minWidth:'min-content'},s:{fontSize:16,paddingTop:'0.9em',paddingRight:'0.9em',paddingBottom:'0.9em',paddingLeft:'0.9em',minWidth:'min-content'},xs:{fontSize:10,paddingTop:'0.9em',paddingRight:'0.9em',paddingBottom:'0.9em',paddingLeft:'0.9em',minWidth:'min-content'}};const SIZES_ICON={l:{fontSize:32},m:{fontSize:24},s:{fontSize:20},xs:{fontSize:20}};const SIZES_TITLE={l:{fontSize:24},m:{fontSize:20},s:{fontSize:16},xs:{fontSize:16}};const SIZES_SUBTITLE={l:{fontSize:18},m:{fontSize:16},s:{fontSize:14},xs:{fontSize:14}};export{SIZES,SIZES_ICON,SIZES_SUBTITLE,SIZES_TITLE};
|
|
2
|
+
//# sourceMappingURL=constants.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.mjs","sources":["../../../../src/components/Accordion/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { AccordionSize } from './types'\n\nexport const SIZES: Record<AccordionSize, CSSProperties> = {\n l: {\n fontSize: 32,\n paddingTop: '0.9em',\n paddingRight: '0.9em',\n paddingBottom: '0.9em',\n paddingLeft: '0.9em',\n minWidth: 'min-content',\n },\n m: {\n fontSize: 20,\n paddingTop: '0.9em',\n paddingRight: '0.9em',\n paddingBottom: '0.9em',\n paddingLeft: '0.9em',\n minWidth: 'min-content',\n },\n s: {\n fontSize: 16,\n paddingTop: '0.9em',\n paddingRight: '0.9em',\n paddingBottom: '0.9em',\n paddingLeft: '0.9em',\n minWidth: 'min-content',\n },\n xs: {\n fontSize: 10,\n paddingTop: '0.9em',\n paddingRight: '0.9em',\n paddingBottom: '0.9em',\n paddingLeft: '0.9em',\n minWidth: 'min-content',\n },\n}\n\nexport const SIZES_ICON: Record<AccordionSize, CSSProperties> = {\n l: { fontSize: 32 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n xs: { fontSize: 20 },\n}\n\nexport const SIZES_TITLE: Record<AccordionSize, CSSProperties> = {\n l: { fontSize: 24 },\n m: { fontSize: 20 },\n s: { fontSize: 16 },\n xs: { fontSize: 16 },\n}\n\nexport const SIZES_SUBTITLE: Record<AccordionSize, CSSProperties> = {\n l: { fontSize: 18 },\n m: { fontSize: 16 },\n s: { fontSize: 14 },\n xs: { fontSize: 14 },\n}\n"],"names":["SIZES","l","fontSize","paddingTop","paddingRight","paddingBottom","paddingLeft","minWidth","m","s","xs","SIZES_ICON","SIZES_TITLE","SIZES_SUBTITLE"],"mappings":"AAGO,MAAMA,MAA8C,CACzDC,EAAG,CACDC,SAAU,GACVC,WAAY,QACZC,aAAc,QACdC,cAAe,QACfC,YAAa,QACbC,SAAU,eAEZC,EAAG,CACDN,SAAU,GACVC,WAAY,QACZC,aAAc,QACdC,cAAe,QACfC,YAAa,QACbC,SAAU,eAEZE,EAAG,CACDP,SAAU,GACVC,WAAY,QACZC,aAAc,QACdC,cAAe,QACfC,YAAa,QACbC,SAAU,eAEZG,GAAI,CACFR,SAAU,GACVC,WAAY,QACZC,aAAc,QACdC,cAAe,QACfC,YAAa,QACbC,SAAU,gBAIP,MAAMI,WAAmD,CAC9DV,EAAG,CAAEC,SAAU,IACfM,EAAG,CAAEN,SAAU,IACfO,EAAG,CAAEP,SAAU,IACfQ,GAAI,CAAER,SAAU,KAGX,MAAMU,YAAoD,CAC/DX,EAAG,CAAEC,SAAU,IACfM,EAAG,CAAEN,SAAU,IACfO,EAAG,CAAEP,SAAU,IACfQ,GAAI,CAAER,SAAU,KAGX,MAAMW,eAAuD,CAClEZ,EAAG,CAAEC,SAAU,IACfM,EAAG,CAAEN,SAAU,IACfO,EAAG,CAAEP,SAAU,IACfQ,GAAI,CAAER,SAAU"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var Icon=require('../Icon/Icon.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardAccordionProp=style.createShouldForwardProp((o=>!['expanded'].includes(o)));const template_button=o=>`\n color: ${o.color};\n &:hover {\n color: ${o.colorHover};\n }\n `;const COLOR_SCHEMA={default:styled.css(["","}"],(o=>template_button({color:o.theme.colors['content-onmain-primary'],colorHover:o.theme.colors['content-brand-primary'],...o.palette}))),disabled:styled.css(["","}"],(o=>template_button({color:o.theme.colors['content-disabled'],colorHover:o.theme.colors['content-disabled'],...o.palette}))),expanded:styled.css(["","}"],(o=>template_button({color:o.theme.colors['content-brand-primary'],colorHover:o.theme.colors['content-brand-primary'],...o.palette})))};const Panel=styled__default.default.div.withConfig({displayName:"Accordion__Panel",componentId:"ui__sc-dk3o6j-0"})(["box-sizing:border-box;overflow:hidden;transition-property:opacity;"]);const Root=styled__default.default.section.withConfig({shouldForwardProp:shouldForwardAccordionProp}).withConfig({displayName:"Accordion__Root",componentId:"ui__sc-dk3o6j-1"})(["box-sizing:border-box;isolation:isolate;display:grid;border-bottom:1px solid;transition-property:grid-template-rows;&,& > ","{transition-timing-function:cubic-bezier(0.42,0,0.75,1);transition-duration:250ms;}"," "," "," ",""],Panel,(o=>o.expanded?`\n grid-template-rows: 0fr 1fr;\n & > ${Panel} {\n opacity: 1;\n }\n `:`\n grid-template-rows: 0fr 0fr;\n & > ${Panel} {\n opacity: 0;\n }\n `),(o=>{return`\n background-color: ${(e={backgroundColor:o.theme.colors.transparent,borderBottomColor:o.theme.colors['border-onmain-default-large'],...o.palette}).backgroundColor};\n border-bottom-color: ${e.borderBottomColor};\n `;var e}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Heading=styled__default.default.h3.withConfig({displayName:"Accordion__Heading",componentId:"ui__sc-dk3o6j-2"})(["box-sizing:border-box;display:flex;font-size:inherit;margin:0;padding:0;"]);const Button=styled__default.default.button.withConfig({shouldForwardProp:o=>!['palette','expanded','loading'].includes(o)}).withConfig({displayName:"Accordion__Button",componentId:"ui__sc-dk3o6j-3"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;appearance:none;border:none;margin:0;padding:0.1em;background-color:inherit;font-size:inherit;text-align:start;transition-property:color;transition-duration:150ms;transition-timing-function:ease-in;& > *:not(:last-child){margin-right:0.8em;}"," "," ",""],(o=>{let e='pointer';return o.loading&&(e='wait'),o.disabled&&(e='not-allowed'),`\n cursor: ${e};\n `}),(o=>o.disabled?COLOR_SCHEMA.disabled:o.expanded?COLOR_SCHEMA.expanded:COLOR_SCHEMA.default),focus.focus);const Content=styled__default.default.span.withConfig({displayName:"Accordion__Content",componentId:"ui__sc-dk3o6j-4"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);const IconAnimated=styled__default.default(Icon.Icon).withConfig({shouldForwardProp:o=>o!=='up'}).withConfig({displayName:"Accordion__IconAnimated",componentId:"ui__sc-dk3o6j-5"})(["",""],(o=>`\n align-self: flex-start;\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${o.up?180:0}deg);\n `));const Media=styled__default.default.span.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"Accordion__Media",componentId:"ui__sc-dk3o6j-6"})(["box-sizing:border-box;width:2em;height:2em;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-position:50%;",""],(o=>o.src?`\n background-image: url(${o.src});\n background-color: ${o.theme.colors['bg-oncolor-hover']};\n `:`\n background-image: none;\n background-color: ${o.theme.colors.transparent};\n `));const Spacer=styled__default.default.span.withConfig({shouldForwardProp:o=>o!=='stretch'}).withConfig({displayName:"Accordion__Spacer",componentId:"ui__sc-dk3o6j-7"})(["",""],(o=>`\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-self: ${o.stretch?'stretch':'auto'}; \n `));const Details=styled__default.default.div.withConfig({displayName:"Accordion__Details",componentId:"ui__sc-dk3o6j-8"})(["box-sizing:border-box;padding:1em 0.1em 0.1em;"]);exports.Button=Button,exports.Content=Content,exports.Details=Details,exports.Heading=Heading,exports.IconAnimated=IconAnimated,exports.Media=Media,exports.Panel=Panel,exports.Root=Root,exports.Spacer=Spacer;
|
|
2
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Accordion/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport type {\n AccordionPalette,\n StyledAccordionProps,\n StyledAccordionButtonProps,\n StyledIconAnimatedProps,\n StyledAccordionMediaProps,\n StyledAccordionSpacerProps,\n} from './types'\n\nconst shouldForwardAccordionProp = createShouldForwardProp((propKey) => !['expanded'].includes(propKey))\n\nconst template = {\n root: (palette: Pick<AccordionPalette, 'backgroundColor' | 'borderBottomColor'>) => `\n background-color: ${palette.backgroundColor};\n border-bottom-color: ${palette.borderBottomColor};\n `,\n button: (palette: Pick<AccordionPalette, 'color' | 'colorHover'>) => `\n color: ${palette.color};\n &:hover {\n color: ${palette.colorHover};\n }\n `,\n}\n\nconst COLOR_SCHEMA = {\n default: css<StyledAccordionButtonProps>`\n ${(props) =>\n template.button({\n color: props.theme.colors['content-onmain-primary'],\n colorHover: props.theme.colors['content-brand-primary'],\n ...props.palette,\n })}}\n `,\n disabled: css<StyledAccordionButtonProps>`\n ${(props) =>\n template.button({\n color: props.theme.colors['content-disabled'],\n colorHover: props.theme.colors['content-disabled'],\n ...props.palette,\n })}}\n `,\n expanded: css<StyledAccordionButtonProps>`\n ${(props) =>\n template.button({\n color: props.theme.colors['content-brand-primary'],\n colorHover: props.theme.colors['content-brand-primary'],\n ...props.palette,\n })}}\n `,\n}\n\nexport const Panel = styled.div`\n box-sizing: border-box;\n overflow: hidden;\n transition-property: opacity;\n`\n\nexport const Root = styled.section.withConfig<StyledAccordionProps>({\n shouldForwardProp: shouldForwardAccordionProp,\n})`\n box-sizing: border-box;\n isolation: isolate;\n display: grid;\n border-bottom: 1px solid;\n transition-property: grid-template-rows;\n\n &,\n & > ${Panel} {\n transition-timing-function: cubic-bezier(0.42, 0, 0.75, 1);\n transition-duration: 250ms;\n }\n\n ${(props) =>\n props.expanded\n ? `\n grid-template-rows: 0fr 1fr;\n & > ${Panel} {\n opacity: 1;\n }\n `\n : `\n grid-template-rows: 0fr 0fr;\n & > ${Panel} {\n opacity: 0;\n }\n `}\n\n ${(props) =>\n template.root({\n backgroundColor: props.theme.colors.transparent,\n borderBottomColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Heading = styled.h3`\n box-sizing: border-box;\n display: flex;\n font-size: inherit;\n margin: 0;\n padding: 0;\n`\n\nexport const Button = styled.button.withConfig<StyledAccordionButtonProps>({\n shouldForwardProp: (propKey) => !['palette', 'expanded', 'loading'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n flex-grow: 1;\n appearance: none;\n border: none;\n margin: 0;\n padding: 0.1em;\n background-color: inherit;\n font-size: inherit;\n text-align: start;\n transition-property: color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > *:not(:last-child) {\n margin-right: 0.8em;\n }\n\n ${(props) => {\n let cursor = 'pointer'\n\n if (props.loading) cursor = 'wait'\n if (props.disabled) cursor = 'not-allowed'\n\n return `\n cursor: ${cursor};\n `\n }}\n\n ${(props) => {\n if (props.disabled) return COLOR_SCHEMA.disabled\n if (props.expanded) return COLOR_SCHEMA.expanded\n\n return COLOR_SCHEMA.default\n }}\n\n ${focus}\n`\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n`\n\nexport const IconAnimated = styled(Icon).withConfig<StyledIconAnimatedProps>({\n shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n ${(props) => `\n align-self: flex-start;\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${props.up ? 180 : 0}deg);\n `}\n`\n\nexport const Media = styled.span.withConfig<StyledAccordionMediaProps>({\n shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n box-sizing: border-box;\n width: 2em;\n height: 2em;\n flex-shrink: 0;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n ${(props) =>\n props.src\n ? `\n background-image: url(${props.src});\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n `\n : `\n background-image: none;\n background-color: ${props.theme.colors.transparent};\n `}\n`\n\nexport const Spacer = styled.span.withConfig<StyledAccordionSpacerProps>({\n shouldForwardProp: (propKey) => propKey !== 'stretch',\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-self: ${props.stretch ? 'stretch' : 'auto'}; \n `}\n`\n\nexport const Details = styled.div`\n box-sizing: border-box;\n padding: 1em 0.1em 0.1em;\n`\n"],"names":["shouldForwardAccordionProp","createShouldForwardProp","propKey","includes","template","palette","color","colorHover","COLOR_SCHEMA","default","css","props","theme","colors","disabled","expanded","Panel","styled","div","withConfig","displayName","componentId","Root","section","shouldForwardProp","backgroundColor","transparent","borderBottomColor","responsiveSize","responsiveMargin","Heading","h3","Button","button","cursor","loading","focus","Content","span","IconAnimated","Icon","up","Media","src","Spacer","stretch","Details"],"mappings":"kaAeA,MAAMA,2BAA6BC,MAAAA,yBAAyBC,IAAa,CAAC,YAAYC,SAASD,KAE/F,MAAME,gBAKKC,GAA4D,gBAC1DA,EAAQC,uCAEND,EAAQE,yBAKvB,MAAMC,aAAe,CACnBC,QAASC,OAAGA,IACPC,CAAAA,GAAAA,MAAAA,GACDP,gBAAgB,CACdE,MAAOK,EAAMC,MAAMC,OAAO,0BAC1BN,WAAYI,EAAMC,MAAMC,OAAO,4BAC5BF,EAAMN,YAGfS,SAAUJ,OAAGA,IACRC,CAAAA,GAAAA,MAAAA,GACDP,gBAAgB,CACdE,MAAOK,EAAMC,MAAMC,OAAO,oBAC1BN,WAAYI,EAAMC,MAAMC,OAAO,uBAC5BF,EAAMN,YAGfU,SAAUL,OAAGA,IACRC,CAAAA,GAAAA,MAAAA,GACDP,gBAAgB,CACdE,MAAOK,EAAMC,MAAMC,OAAO,yBAC1BN,WAAYI,EAAMC,MAAMC,OAAO,4BAC5BF,EAAMN,mBAKJW,MAAQC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,mBAAAC,YAAA,mBAAVJ,CAIpB,CAAA,uEAEM,MAAMK,KAAOL,gBAAAA,QAAOM,QAAQJ,WAAiC,CAClEK,kBAAmBxB,6BACnBmB,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,6HAAA,sFAAA,IAAA,IAAA,IAAA,IAQMD,OAKHL,GACDA,EAAMI,SACF,uDAEMC,oDAIN,uDAEMA,sDAKTL,IACDP,MA5EkF,4BAA7EC,EA4ES,CACZoB,gBAAiBd,EAAMC,MAAMC,OAAOa,YACpCC,kBAAmBhB,EAAMC,MAAMC,OAAO,kCACnCF,EAAMN,UA9EiBoB,8CACLpB,EAAQsB,yBAF1BtB,KAgFH,GAEFuB,eAAcA,eACdC,yCAGSC,QAAUb,gBAAAA,QAAOc,GAAEZ,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAATJ,CAMtB,CAAA,6EAEM,MAAMe,OAASf,gBAAAA,QAAOgB,OAAOd,WAAuC,CACzEK,kBAAoBtB,IAAa,CAAC,UAAW,WAAY,WAAWC,SAASD,KAC7EiB,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAFoBJ,CAEpB,CAAA,kVAAA,IAAA,IAAA,KAsBGN,IACD,IAAIuB,EAAS,UAKb,OAHIvB,EAAMwB,UAASD,EAAS,QACxBvB,EAAMG,WAAUoB,EAAS,eAEtB,mBACKA,UACX,IAGAvB,GACGA,EAAMG,SAAiBN,aAAaM,SACpCH,EAAMI,SAAiBP,aAAaO,SAEjCP,aAAaC,SAGpB2B,mBAGSC,QAAUpB,gBAAAA,QAAOqB,KAAInB,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAAXJ,CAKtB,CAAA,0EAEM,MAAMsB,aAAetB,gBAAMR,QAAC+B,WAAMrB,WAAoC,CAC3EK,kBAAoBtB,GAAYA,IAAY,OAC5CiB,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAF0BJ,CAE1B,CAAA,GAAA,KACGN,GAAU,6JAKSA,EAAM8B,GAAK,IAAM,eAIlC,MAAMC,MAAQzB,gBAAAA,QAAOqB,KAAKnB,WAAsC,CACrEK,kBAAoBtB,GAAYA,IAAY,QAC5CiB,WAAA,CAAAC,YAAA,mBAAAC,YAAA,mBAFmBJ,CAEnB,CAAA,wIAAA,KAQGN,GACDA,EAAMgC,IACF,mCACwBhC,EAAMgC,oCACVhC,EAAMC,MAAMC,OAAO,+BAEvC,gEAEoBF,EAAMC,MAAMC,OAAOa,yBAIxC,MAAMkB,OAAS3B,gBAAAA,QAAOqB,KAAKnB,WAAuC,CACvEK,kBAAoBtB,GAAYA,IAAY,YAC5CiB,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAFoBJ,CAEpB,CAAA,GAAA,KACGN,GAAU,2FAIGA,EAAMkC,QAAU,UAAY,wBAIjCC,QAAU7B,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAAVJ,CAGtB,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{Icon}from'../Icon/Icon.mjs';const shouldForwardAccordionProp=createShouldForwardProp((o=>!['expanded'].includes(o)));const template_button=o=>`\n color: ${o.color};\n &:hover {\n color: ${o.colorHover};\n }\n `;const COLOR_SCHEMA={default:css(["","}"],(o=>template_button({color:o.theme.colors['content-onmain-primary'],colorHover:o.theme.colors['content-brand-primary'],...o.palette}))),disabled:css(["","}"],(o=>template_button({color:o.theme.colors['content-disabled'],colorHover:o.theme.colors['content-disabled'],...o.palette}))),expanded:css(["","}"],(o=>template_button({color:o.theme.colors['content-brand-primary'],colorHover:o.theme.colors['content-brand-primary'],...o.palette})))};const Panel=styled.div.withConfig({displayName:"Accordion__Panel",componentId:"ui__sc-dk3o6j-0"})(["box-sizing:border-box;overflow:hidden;transition-property:opacity;"]);const Root=styled.section.withConfig({shouldForwardProp:shouldForwardAccordionProp}).withConfig({displayName:"Accordion__Root",componentId:"ui__sc-dk3o6j-1"})(["box-sizing:border-box;isolation:isolate;display:grid;border-bottom:1px solid;transition-property:grid-template-rows;&,& > ","{transition-timing-function:cubic-bezier(0.42,0,0.75,1);transition-duration:250ms;}"," "," "," ",""],Panel,(o=>o.expanded?`\n grid-template-rows: 0fr 1fr;\n & > ${Panel} {\n opacity: 1;\n }\n `:`\n grid-template-rows: 0fr 0fr;\n & > ${Panel} {\n opacity: 0;\n }\n `),(o=>{return`\n background-color: ${(n={backgroundColor:o.theme.colors.transparent,borderBottomColor:o.theme.colors['border-onmain-default-large'],...o.palette}).backgroundColor};\n border-bottom-color: ${n.borderBottomColor};\n `;var n}),responsiveSize,responsiveMargin);const Heading=styled.h3.withConfig({displayName:"Accordion__Heading",componentId:"ui__sc-dk3o6j-2"})(["box-sizing:border-box;display:flex;font-size:inherit;margin:0;padding:0;"]);const Button=styled.button.withConfig({shouldForwardProp:o=>!['palette','expanded','loading'].includes(o)}).withConfig({displayName:"Accordion__Button",componentId:"ui__sc-dk3o6j-3"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;appearance:none;border:none;margin:0;padding:0.1em;background-color:inherit;font-size:inherit;text-align:start;transition-property:color;transition-duration:150ms;transition-timing-function:ease-in;& > *:not(:last-child){margin-right:0.8em;}"," "," ",""],(o=>{let n='pointer';return o.loading&&(n='wait'),o.disabled&&(n='not-allowed'),`\n cursor: ${n};\n `}),(o=>o.disabled?COLOR_SCHEMA.disabled:o.expanded?COLOR_SCHEMA.expanded:COLOR_SCHEMA.default),focus);const Content=styled.span.withConfig({displayName:"Accordion__Content",componentId:"ui__sc-dk3o6j-4"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);const IconAnimated=styled(Icon).withConfig({shouldForwardProp:o=>o!=='up'}).withConfig({displayName:"Accordion__IconAnimated",componentId:"ui__sc-dk3o6j-5"})(["",""],(o=>`\n align-self: flex-start;\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${o.up?180:0}deg);\n `));const Media=styled.span.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"Accordion__Media",componentId:"ui__sc-dk3o6j-6"})(["box-sizing:border-box;width:2em;height:2em;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-position:50%;",""],(o=>o.src?`\n background-image: url(${o.src});\n background-color: ${o.theme.colors['bg-oncolor-hover']};\n `:`\n background-image: none;\n background-color: ${o.theme.colors.transparent};\n `));const Spacer=styled.span.withConfig({shouldForwardProp:o=>o!=='stretch'}).withConfig({displayName:"Accordion__Spacer",componentId:"ui__sc-dk3o6j-7"})(["",""],(o=>`\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-self: ${o.stretch?'stretch':'auto'}; \n `));const Details=styled.div.withConfig({displayName:"Accordion__Details",componentId:"ui__sc-dk3o6j-8"})(["box-sizing:border-box;padding:1em 0.1em 0.1em;"]);export{Button,Content,Details,Heading,IconAnimated,Media,Panel,Root,Spacer};
|
|
2
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Accordion/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport type {\n AccordionPalette,\n StyledAccordionProps,\n StyledAccordionButtonProps,\n StyledIconAnimatedProps,\n StyledAccordionMediaProps,\n StyledAccordionSpacerProps,\n} from './types'\n\nconst shouldForwardAccordionProp = createShouldForwardProp((propKey) => !['expanded'].includes(propKey))\n\nconst template = {\n root: (palette: Pick<AccordionPalette, 'backgroundColor' | 'borderBottomColor'>) => `\n background-color: ${palette.backgroundColor};\n border-bottom-color: ${palette.borderBottomColor};\n `,\n button: (palette: Pick<AccordionPalette, 'color' | 'colorHover'>) => `\n color: ${palette.color};\n &:hover {\n color: ${palette.colorHover};\n }\n `,\n}\n\nconst COLOR_SCHEMA = {\n default: css<StyledAccordionButtonProps>`\n ${(props) =>\n template.button({\n color: props.theme.colors['content-onmain-primary'],\n colorHover: props.theme.colors['content-brand-primary'],\n ...props.palette,\n })}}\n `,\n disabled: css<StyledAccordionButtonProps>`\n ${(props) =>\n template.button({\n color: props.theme.colors['content-disabled'],\n colorHover: props.theme.colors['content-disabled'],\n ...props.palette,\n })}}\n `,\n expanded: css<StyledAccordionButtonProps>`\n ${(props) =>\n template.button({\n color: props.theme.colors['content-brand-primary'],\n colorHover: props.theme.colors['content-brand-primary'],\n ...props.palette,\n })}}\n `,\n}\n\nexport const Panel = styled.div`\n box-sizing: border-box;\n overflow: hidden;\n transition-property: opacity;\n`\n\nexport const Root = styled.section.withConfig<StyledAccordionProps>({\n shouldForwardProp: shouldForwardAccordionProp,\n})`\n box-sizing: border-box;\n isolation: isolate;\n display: grid;\n border-bottom: 1px solid;\n transition-property: grid-template-rows;\n\n &,\n & > ${Panel} {\n transition-timing-function: cubic-bezier(0.42, 0, 0.75, 1);\n transition-duration: 250ms;\n }\n\n ${(props) =>\n props.expanded\n ? `\n grid-template-rows: 0fr 1fr;\n & > ${Panel} {\n opacity: 1;\n }\n `\n : `\n grid-template-rows: 0fr 0fr;\n & > ${Panel} {\n opacity: 0;\n }\n `}\n\n ${(props) =>\n template.root({\n backgroundColor: props.theme.colors.transparent,\n borderBottomColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Heading = styled.h3`\n box-sizing: border-box;\n display: flex;\n font-size: inherit;\n margin: 0;\n padding: 0;\n`\n\nexport const Button = styled.button.withConfig<StyledAccordionButtonProps>({\n shouldForwardProp: (propKey) => !['palette', 'expanded', 'loading'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n flex-grow: 1;\n appearance: none;\n border: none;\n margin: 0;\n padding: 0.1em;\n background-color: inherit;\n font-size: inherit;\n text-align: start;\n transition-property: color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > *:not(:last-child) {\n margin-right: 0.8em;\n }\n\n ${(props) => {\n let cursor = 'pointer'\n\n if (props.loading) cursor = 'wait'\n if (props.disabled) cursor = 'not-allowed'\n\n return `\n cursor: ${cursor};\n `\n }}\n\n ${(props) => {\n if (props.disabled) return COLOR_SCHEMA.disabled\n if (props.expanded) return COLOR_SCHEMA.expanded\n\n return COLOR_SCHEMA.default\n }}\n\n ${focus}\n`\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n`\n\nexport const IconAnimated = styled(Icon).withConfig<StyledIconAnimatedProps>({\n shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n ${(props) => `\n align-self: flex-start;\n transition-property: transform;\n transition-duration: 250ms;\n transform-origin: center;\n transform: rotate(${props.up ? 180 : 0}deg);\n `}\n`\n\nexport const Media = styled.span.withConfig<StyledAccordionMediaProps>({\n shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n box-sizing: border-box;\n width: 2em;\n height: 2em;\n flex-shrink: 0;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n ${(props) =>\n props.src\n ? `\n background-image: url(${props.src});\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n `\n : `\n background-image: none;\n background-color: ${props.theme.colors.transparent};\n `}\n`\n\nexport const Spacer = styled.span.withConfig<StyledAccordionSpacerProps>({\n shouldForwardProp: (propKey) => propKey !== 'stretch',\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-self: ${props.stretch ? 'stretch' : 'auto'}; \n `}\n`\n\nexport const Details = styled.div`\n box-sizing: border-box;\n padding: 1em 0.1em 0.1em;\n`\n"],"names":["shouldForwardAccordionProp","createShouldForwardProp","propKey","includes","template","palette","color","colorHover","COLOR_SCHEMA","default","css","props","theme","colors","disabled","expanded","Panel","styled","div","withConfig","displayName","componentId","Root","section","shouldForwardProp","backgroundColor","transparent","borderBottomColor","responsiveSize","responsiveMargin","Heading","h3","Button","button","cursor","loading","focus","Content","span","IconAnimated","Icon","up","Media","src","Spacer","stretch","Details"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';exports.SIZES={
|
|
1
|
+
'use strict';exports.SIZES={l:{fontSize:18,minHeight:40,padding:8,borderRadius:8},m:{fontSize:16,minHeight:36,padding:7,borderRadius:8},s:{fontSize:14,minHeight:32,padding:6,borderRadius:7},xs:{fontSize:12,minHeight:20,padding:4,borderRadius:6}};
|
|
2
2
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type {
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { ChipSize } from './types'\n\nexport const SIZES: Record<ChipSize, CSSProperties> = {\n l: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n m: {\n fontSize: 16,\n minHeight: 36,\n padding: 7,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minHeight: 32,\n padding: 6,\n borderRadius: 7,\n },\n xs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 6,\n },\n}\n"],"names":["l","fontSize","minHeight","padding","borderRadius","m","s","xs"],"mappings":"2BAGsD,CACpDA,EAAG,CACDC,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBC,EAAG,CACDJ,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBE,EAAG,CACDL,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBG,GAAI,CACFN,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const SIZES={
|
|
1
|
+
const SIZES={l:{fontSize:18,minHeight:40,padding:8,borderRadius:8},m:{fontSize:16,minHeight:36,padding:7,borderRadius:8},s:{fontSize:14,minHeight:32,padding:6,borderRadius:7},xs:{fontSize:12,minHeight:20,padding:4,borderRadius:6}};export{SIZES};
|
|
2
2
|
//# sourceMappingURL=constants.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.mjs","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type {
|
|
1
|
+
{"version":3,"file":"constants.mjs","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { ChipSize } from './types'\n\nexport const SIZES: Record<ChipSize, CSSProperties> = {\n l: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n m: {\n fontSize: 16,\n minHeight: 36,\n padding: 7,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minHeight: 32,\n padding: 6,\n borderRadius: 7,\n },\n xs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 6,\n },\n}\n"],"names":["SIZES","l","fontSize","minHeight","padding","borderRadius","m","s","xs"],"mappings":"AAGO,MAAMA,MAAyC,CACpDC,EAAG,CACDC,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBC,EAAG,CACDJ,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBE,EAAG,CACDL,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBG,GAAI,CACFN,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';exports.SIZES={
|
|
1
|
+
'use strict';exports.SIZES={xxl:{width:40,height:40,fontSize:28,borderRadius:'50%'},xl:{width:32,height:32,fontSize:24,borderRadius:'50%'},l:{width:28,height:28,fontSize:20,borderRadius:'50%'},m:{width:24,height:24,fontSize:18,borderRadius:'50%'},s:{width:20,height:20,fontSize:16,borderRadius:'50%'},xs:{width:18,height:18,fontSize:14,borderRadius:'50%'},xxs:{width:16,height:16,fontSize:12,borderRadius:'50%'}},exports.SIZES_SQUARE={xxl:{width:40,height:40,fontSize:28,borderRadius:8},xl:{width:32,height:32,fontSize:24,borderRadius:7},l:{width:28,height:28,fontSize:20,borderRadius:6},m:{width:24,height:24,fontSize:18,borderRadius:5},s:{width:20,height:20,fontSize:16,borderRadius:4},xs:{width:18,height:18,fontSize:14,borderRadius:4},xxs:{width:16,height:16,fontSize:12,borderRadius:4}};
|
|
2
2
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/components/IconButton/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type {
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/IconButton/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { IconButtonSize } from './types'\n\nexport const SIZES: Record<IconButtonSize, CSSProperties> = {\n xxl: {\n width: 40,\n height: 40,\n fontSize: 28,\n borderRadius: '50%',\n },\n xl: {\n width: 32,\n height: 32,\n fontSize: 24,\n borderRadius: '50%',\n },\n l: {\n width: 28,\n height: 28,\n fontSize: 20,\n borderRadius: '50%',\n },\n m: {\n width: 24,\n height: 24,\n fontSize: 18,\n borderRadius: '50%',\n },\n s: {\n width: 20,\n height: 20,\n fontSize: 16,\n borderRadius: '50%',\n },\n xs: {\n width: 18,\n height: 18,\n fontSize: 14,\n borderRadius: '50%',\n },\n xxs: {\n width: 16,\n height: 16,\n fontSize: 12,\n borderRadius: '50%',\n },\n}\n\nexport const SIZES_SQUARE: Record<IconButtonSize, CSSProperties> = {\n xxl: {\n width: 40,\n height: 40,\n fontSize: 28,\n borderRadius: 8,\n },\n xl: {\n width: 32,\n height: 32,\n fontSize: 24,\n borderRadius: 7,\n },\n l: {\n width: 28,\n height: 28,\n fontSize: 20,\n borderRadius: 6,\n },\n m: {\n width: 24,\n height: 24,\n fontSize: 18,\n borderRadius: 5,\n },\n s: {\n width: 20,\n height: 20,\n fontSize: 16,\n borderRadius: 4,\n },\n xs: {\n width: 18,\n height: 18,\n fontSize: 14,\n borderRadius: 4,\n },\n xxs: {\n width: 16,\n height: 16,\n fontSize: 12,\n borderRadius: 4,\n },\n}\n"],"names":["xxl","width","height","fontSize","borderRadius","xl","l","m","s","xs","xxs"],"mappings":"2BAG4D,CAC1DA,IAAK,CACHC,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBC,GAAI,CACFJ,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBE,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBG,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBI,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBK,GAAI,CACFR,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBM,IAAK,CACHT,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,6BAIiD,CACjEJ,IAAK,CACHC,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBC,GAAI,CACFJ,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBE,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBG,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBI,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBK,GAAI,CACFR,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBM,IAAK,CACHT,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const SIZES={
|
|
1
|
+
const SIZES={xxl:{width:40,height:40,fontSize:28,borderRadius:'50%'},xl:{width:32,height:32,fontSize:24,borderRadius:'50%'},l:{width:28,height:28,fontSize:20,borderRadius:'50%'},m:{width:24,height:24,fontSize:18,borderRadius:'50%'},s:{width:20,height:20,fontSize:16,borderRadius:'50%'},xs:{width:18,height:18,fontSize:14,borderRadius:'50%'},xxs:{width:16,height:16,fontSize:12,borderRadius:'50%'}};const SIZES_SQUARE={xxl:{width:40,height:40,fontSize:28,borderRadius:8},xl:{width:32,height:32,fontSize:24,borderRadius:7},l:{width:28,height:28,fontSize:20,borderRadius:6},m:{width:24,height:24,fontSize:18,borderRadius:5},s:{width:20,height:20,fontSize:16,borderRadius:4},xs:{width:18,height:18,fontSize:14,borderRadius:4},xxs:{width:16,height:16,fontSize:12,borderRadius:4}};export{SIZES,SIZES_SQUARE};
|
|
2
2
|
//# sourceMappingURL=constants.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.mjs","sources":["../../../../src/components/IconButton/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type {
|
|
1
|
+
{"version":3,"file":"constants.mjs","sources":["../../../../src/components/IconButton/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { IconButtonSize } from './types'\n\nexport const SIZES: Record<IconButtonSize, CSSProperties> = {\n xxl: {\n width: 40,\n height: 40,\n fontSize: 28,\n borderRadius: '50%',\n },\n xl: {\n width: 32,\n height: 32,\n fontSize: 24,\n borderRadius: '50%',\n },\n l: {\n width: 28,\n height: 28,\n fontSize: 20,\n borderRadius: '50%',\n },\n m: {\n width: 24,\n height: 24,\n fontSize: 18,\n borderRadius: '50%',\n },\n s: {\n width: 20,\n height: 20,\n fontSize: 16,\n borderRadius: '50%',\n },\n xs: {\n width: 18,\n height: 18,\n fontSize: 14,\n borderRadius: '50%',\n },\n xxs: {\n width: 16,\n height: 16,\n fontSize: 12,\n borderRadius: '50%',\n },\n}\n\nexport const SIZES_SQUARE: Record<IconButtonSize, CSSProperties> = {\n xxl: {\n width: 40,\n height: 40,\n fontSize: 28,\n borderRadius: 8,\n },\n xl: {\n width: 32,\n height: 32,\n fontSize: 24,\n borderRadius: 7,\n },\n l: {\n width: 28,\n height: 28,\n fontSize: 20,\n borderRadius: 6,\n },\n m: {\n width: 24,\n height: 24,\n fontSize: 18,\n borderRadius: 5,\n },\n s: {\n width: 20,\n height: 20,\n fontSize: 16,\n borderRadius: 4,\n },\n xs: {\n width: 18,\n height: 18,\n fontSize: 14,\n borderRadius: 4,\n },\n xxs: {\n width: 16,\n height: 16,\n fontSize: 12,\n borderRadius: 4,\n },\n}\n"],"names":["SIZES","xxl","width","height","fontSize","borderRadius","xl","l","m","s","xs","xxs","SIZES_SQUARE"],"mappings":"AAGO,MAAMA,MAA+C,CAC1DC,IAAK,CACHC,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBC,GAAI,CACFJ,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBE,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBG,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBI,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBK,GAAI,CACFR,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,OAEhBM,IAAK,CACHT,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,QAIX,MAAMO,aAAsD,CACjEX,IAAK,CACHC,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBC,GAAI,CACFJ,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBE,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBG,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBI,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBK,GAAI,CACFR,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc,GAEhBM,IAAK,CACHT,MAAO,GACPC,OAAQ,GACRC,SAAU,GACVC,aAAc"}
|
package/dts/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import { CSSProperties, Component, SVGAttributes, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
|
|
4
4
|
import * as styled_components from 'styled-components';
|
|
5
|
-
import { CSSObject, DefaultTheme, FlattenSimpleInterpolation,
|
|
5
|
+
import { CSSObject, DefaultTheme, FlattenSimpleInterpolation, ThemeProps, Interpolation, SimpleInterpolation, css, StyledProps } from 'styled-components';
|
|
6
6
|
import { Props, PopperInstance, PlacementOptions, Styles } from 'react-floater/lib/types';
|
|
7
7
|
import { Props as Props$1, Classes } from 'react-modal';
|
|
8
8
|
import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
|
|
@@ -5742,6 +5742,7 @@ ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
|
|
|
5742
5742
|
*/
|
|
5743
5743
|
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps>;
|
|
5744
5744
|
|
|
5745
|
+
declare type IconButtonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
|
|
5745
5746
|
declare type IconButtonPalette = {
|
|
5746
5747
|
color: CSSColor;
|
|
5747
5748
|
backgroundColor: CSSColor;
|
|
@@ -5752,7 +5753,7 @@ declare type IconButtonPalette = {
|
|
|
5752
5753
|
colorDisabled: CSSColor;
|
|
5753
5754
|
backgroundColorDisabled: CSSColor;
|
|
5754
5755
|
};
|
|
5755
|
-
interface IconButtonProps extends ResponsiveSizeProps<
|
|
5756
|
+
interface IconButtonProps extends ResponsiveSizeProps<IconButtonSize, IconButtonSize | number>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
|
|
5756
5757
|
/** Custom colors */
|
|
5757
5758
|
palette?: Partial<Record<keyof IconButtonPalette, Color>>;
|
|
5758
5759
|
/** Icon to display */
|
|
@@ -5781,6 +5782,7 @@ interface IconButtonProps extends ResponsiveSizeProps<Size, SizeValue>, Responsi
|
|
|
5781
5782
|
*/
|
|
5782
5783
|
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps>;
|
|
5783
5784
|
|
|
5785
|
+
declare type ChipSize = 'l' | 'm' | 's' | 'xs';
|
|
5784
5786
|
declare type ChipPalette = {
|
|
5785
5787
|
color: CSSColor;
|
|
5786
5788
|
backgroundColor: CSSColor;
|
|
@@ -5792,7 +5794,7 @@ declare type ChipPalette = {
|
|
|
5792
5794
|
backgroundColorDisabled: CSSColor;
|
|
5793
5795
|
borderColorDisabled: CSSColor;
|
|
5794
5796
|
};
|
|
5795
|
-
interface ChipProps extends ResponsiveSizeProps<
|
|
5797
|
+
interface ChipProps extends ResponsiveSizeProps<ChipSize, ChipSize | number>, ResponsiveMarginProps, React.RefAttributes<HTMLElement>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children'> {
|
|
5796
5798
|
/** Custom colors */
|
|
5797
5799
|
palette?: Partial<Record<keyof ChipPalette, Color>>;
|
|
5798
5800
|
/** Main text content or render function */
|
|
@@ -6242,6 +6244,67 @@ interface NotificationProps extends ResponsiveSizeProps<NotificationSize>, Respo
|
|
|
6242
6244
|
*/
|
|
6243
6245
|
declare const Notification: React.ForwardRefExoticComponent<NotificationProps>;
|
|
6244
6246
|
|
|
6247
|
+
declare type AccordionSize = 'l' | 'm' | 's' | 'xs';
|
|
6248
|
+
declare type AccordionPalette = {
|
|
6249
|
+
color: CSSColor;
|
|
6250
|
+
colorHover: CSSColor;
|
|
6251
|
+
backgroundColor: CSSColor;
|
|
6252
|
+
borderBottomColor: CSSColor;
|
|
6253
|
+
};
|
|
6254
|
+
interface AccordionProps extends ResponsiveSizeProps<AccordionSize>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'section'>, 'title'> {
|
|
6255
|
+
/** Рендер кастомных компонентов в хедере.
|
|
6256
|
+
* Если передается React элемент, то в его пропсы будут добавлены текущие пропсы размеров аккордеона.
|
|
6257
|
+
* Если передается функция, то пропсы размеров будут переданы аргументом */
|
|
6258
|
+
addon?: JSX.Element | ((props: Pick<AccordionProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
|
|
6259
|
+
/** Контент для динамической панели */
|
|
6260
|
+
children: React.ReactNode;
|
|
6261
|
+
/** Раскрыть динамическую панель в начальном состоянии */
|
|
6262
|
+
defaultExpanded?: boolean;
|
|
6263
|
+
/** Отключение интерактивности */
|
|
6264
|
+
disabled?: boolean;
|
|
6265
|
+
/** Текущее состояние динамической панели.
|
|
6266
|
+
* Использование пропа включает контролируемый режим */
|
|
6267
|
+
expanded?: boolean;
|
|
6268
|
+
/** Иконка слева */
|
|
6269
|
+
icon?: JSX.Element | IconName;
|
|
6270
|
+
/** Пропсы для иконки слева */
|
|
6271
|
+
iconProps?: IconProps;
|
|
6272
|
+
/** Путь для картинки слева.
|
|
6273
|
+
* Ожидаемое соотношение сторон: 1:1 */
|
|
6274
|
+
imgSrc?: string;
|
|
6275
|
+
/** Уровень заголовка в хедере (дефолт h3) */
|
|
6276
|
+
headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
6277
|
+
/** Использование в хедере скелетонов вместо реального контента */
|
|
6278
|
+
loading?: boolean;
|
|
6279
|
+
/** Колбек, который будет вызван при изменении состояния динамической панели.
|
|
6280
|
+
* Получает аргументом текущее состояние панели */
|
|
6281
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
6282
|
+
/** Кастомные цвета */
|
|
6283
|
+
palette?: Partial<Record<keyof AccordionPalette, Color>>;
|
|
6284
|
+
/** Пропсы для скелетонов (используются при loading=true) */
|
|
6285
|
+
skeletonProps?: SkeletonProps;
|
|
6286
|
+
/** Контент подзаголовка аккордеона */
|
|
6287
|
+
subtitle?: React.ReactNode;
|
|
6288
|
+
/** Пропсы типографики для подзаголовка */
|
|
6289
|
+
subtitleProps?: TextProps;
|
|
6290
|
+
/** Контент заголовка аккордеона */
|
|
6291
|
+
title: React.ReactNode;
|
|
6292
|
+
/** Пропсы типографики для заголовка */
|
|
6293
|
+
titleProps?: TextProps;
|
|
6294
|
+
}
|
|
6295
|
+
|
|
6296
|
+
/**
|
|
6297
|
+
*
|
|
6298
|
+
* Компонент поддерживает все атрибуты \<section\> элемента.
|
|
6299
|
+
*
|
|
6300
|
+
* Можно передать "ref", который будет ассоциирован с рутовым элементом.
|
|
6301
|
+
*
|
|
6302
|
+
* Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.
|
|
6303
|
+
*
|
|
6304
|
+
* Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Accordion/types.ts).
|
|
6305
|
+
*/
|
|
6306
|
+
declare const Accordion: React.ForwardRefExoticComponent<AccordionProps>;
|
|
6307
|
+
|
|
6245
6308
|
interface Theme {
|
|
6246
6309
|
breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
|
|
6247
6310
|
assetHost?: string;
|
|
@@ -6259,6 +6322,9 @@ interface Theme {
|
|
|
6259
6322
|
relBuilder?: (_link?: string, _target?: string) => undefined | string;
|
|
6260
6323
|
hexToRgbA?: (hex: string, alpha?: number) => string;
|
|
6261
6324
|
};
|
|
6325
|
+
mixins: {
|
|
6326
|
+
focus: (props: ThemeProps<DefaultTheme>) => string;
|
|
6327
|
+
};
|
|
6262
6328
|
mode: ThemeMode;
|
|
6263
6329
|
preset: ThemePreset;
|
|
6264
6330
|
name: ThemeName;
|
|
@@ -6290,6 +6356,7 @@ interface Theme {
|
|
|
6290
6356
|
Dialog?: Partial<DialogProps>;
|
|
6291
6357
|
DialogComponent?: Partial<DialogComponentProps>;
|
|
6292
6358
|
Notification?: Partial<NotificationProps>;
|
|
6359
|
+
Accordion?: Partial<AccordionProps>;
|
|
6293
6360
|
};
|
|
6294
6361
|
}
|
|
6295
6362
|
|
|
@@ -8006,4 +8073,4 @@ interface DropdownProps extends ResponsiveSizeProps<DropdownSize>, ResponsiveMar
|
|
|
8006
8073
|
*/
|
|
8007
8074
|
declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps>;
|
|
8008
8075
|
|
|
8009
|
-
export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, type BaseProps, type Breakpoint, Button, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, type Color, ColorNames, type ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, Dialog, Dropdown, FormLabel, type HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, type KeysOfUnion, ListItem, Menu, Modal, Notification, type Nullable, Paper, Popover, Progress, type RGB, type RGBA, Radio, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, type Size, type SizeValue, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text$1 as Text, Textarea, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type WithThemePreset, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
|
|
8076
|
+
export { Accordion, ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, type BaseProps, type Breakpoint, Button, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, type Color, ColorNames, type ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, Dialog, Dropdown, FormLabel, type HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, type KeysOfUnion, ListItem, Menu, Modal, Notification, type Nullable, Paper, Popover, Progress, type RGB, type RGBA, Radio, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, type Size, type SizeValue, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text$1 as Text, Textarea, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type WithThemePreset, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.browser.js","sources":["../../../../../../../node_modules/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.js"],"sourcesContent":["import { urlAlphabet as scopedUrlAlphabet } from './url-alphabet/index.js'\nexport { urlAlphabet } from './url-alphabet/index.js'\nexport let random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nexport let customRandom = (alphabet, defaultSize, getRandom) => {\n let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n return (size = defaultSize) => {\n let id = ''\n while (true) {\n let bytes = getRandom(step)\n let j = step\n while (j--) {\n id += alphabet[bytes[j] & mask] || ''\n if (id.length === size) return id\n }\n }\n }\n}\nexport let customAlphabet = (alphabet, size = 21) =>\n customRandom(alphabet, size, random)\nexport let nanoid = (size = 21) => {\n let id = ''\n let bytes = crypto.getRandomValues(new Uint8Array(size))\n while (size--) {\n id += scopedUrlAlphabet[bytes[size] & 63]\n }\n return id\n}\n"],"names":["size","id","bytes","crypto","getRandomValues","Uint8Array","scopedUrlAlphabet"],"mappings":"+GAoBoB,CAACA,EAAO,MAC1B,IAAIC,EAAK,GACT,IAAIC,EAAQC,OAAOC,gBAAgB,IAAIC,WAAWL,IAClD,KAAOA,KACLC,GAAMK,MAAAA,YAAkBJ,EAAMF,GAAQ,IAExC,OAAOC","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.browser.mjs","sources":["../../../../../../../node_modules/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.js"],"sourcesContent":["import { urlAlphabet as scopedUrlAlphabet } from './url-alphabet/index.js'\nexport { urlAlphabet } from './url-alphabet/index.js'\nexport let random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nexport let customRandom = (alphabet, defaultSize, getRandom) => {\n let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n return (size = defaultSize) => {\n let id = ''\n while (true) {\n let bytes = getRandom(step)\n let j = step\n while (j--) {\n id += alphabet[bytes[j] & mask] || ''\n if (id.length === size) return id\n }\n }\n }\n}\nexport let customAlphabet = (alphabet, size = 21) =>\n customRandom(alphabet, size, random)\nexport let nanoid = (size = 21) => {\n let id = ''\n let bytes = crypto.getRandomValues(new Uint8Array(size))\n while (size--) {\n id += scopedUrlAlphabet[bytes[size] & 63]\n }\n return id\n}\n"],"names":["nanoid","size","id","bytes","crypto","getRandomValues","Uint8Array","scopedUrlAlphabet"],"mappings":"kDAoBU,IAACA,OAAS,CAACC,EAAO,MAC1B,IAAIC,EAAK,GACT,IAAIC,EAAQC,OAAOC,gBAAgB,IAAIC,WAAWL,IAClD,KAAOA,KACLC,GAAMK,YAAkBJ,EAAMF,GAAQ,IAExC,OAAOC","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../../../node_modules/.pnpm/nanoid@5.0.7/node_modules/nanoid/url-alphabet/index.js"],"sourcesContent":["export const urlAlphabet =\n 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n"],"names":[],"mappings":"iCACE","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../../../../node_modules/.pnpm/nanoid@5.0.7/node_modules/nanoid/url-alphabet/index.js"],"sourcesContent":["export const urlAlphabet =\n 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n"],"names":["urlAlphabet"],"mappings":"AAAY,MAACA,YACX","x_google_ignoreList":[0]}
|
package/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var colors$1=require('./shared/utils/colors.js');var colors=require('./theme/colors.js');var screen=require('./mixins/screen.js');var responsiveProperty=require('./mixins/responsive-property.js');var color=require('./mixins/color.js');var vAlign=require('./mixins/vAlign.js');var shared=require('./mixins/shared.js');var constants=require('./components/Input.Phone/constants.js');var themeProvider=require('./theme/theme-provider.js');var themes=require('./theme/themes.js');var ActionBtn=require('./components/ActionBtn/ActionBtn.js');var Alert=require('./components/Alert/Alert.js');var Amount=require('./components/Amount/Amount.js');var index=require('./components/Amount/data/index.js');var Anchor=require('./components/Anchor/Anchor.js');var Arrow=require('./components/Arrow/Arrow.js');var ArrowBadge=require('./components/ArrowBadge/ArrowBadge.js');var Avatar=require('./components/Avatar/Avatar.js');var Badge=require('./components/Badge/Badge.js');var Button=require('./components/Button/Button.js');var Container=require('./components/Container/Container.js');var Icon=require('./components/Icon/Icon.js');var Modal=require('./components/Modal/Modal.js');var Paper=require('./components/Paper/Paper.js');var Progress=require('./components/Progress/Progress.js');var Scrollable=require('./components/Scrollable/Scrollable.js');var Section=require('./components/Section/Section.js');var Separator=require('./components/Separator/Separator.js');var Spacer=require('./components/Spacer/Spacer.js');var Spinner=require('./components/Spinner/Spinner.js');var Switcher=require('./components/Switcher/Switcher.js');var Tab=require('./components/Tab/Tab.js');var Tabs=require('./components/Tabs/Tabs.js');var Text=require('./components/Text/Text.js');var Tooltip=require('./components/Tooltip/Tooltip.js');var Tag=require('./components/Tag/Tag.js');var ContextMenu=require('./components/ContextMenu/ContextMenu.js');var Textarea=require('./components/Textarea/Textarea.js');var Input=require('./components/Input/Input.js');var style=require('./components/Input/style.js');var Radio=require('./components/Radio/Radio.js');var Checkbox=require('./components/Checkbox/Checkbox.js');var Select=require('./components/Select/Select.js');var FormLabel=require('./components/FormLabel/FormLabel.js');var Skeleton=require('./components/Skeleton/Skeleton.js');var Popover=require('./components/Popover/Popover.js');var ListItem=require('./components/ListItem/ListItem.js');var Indicator=require('./components/Indicator/Indicator.js');var IconButton=require('./components/IconButton/IconButton.js');var Chip=require('./components/Chip/Chip.js');var Menu=require('./components/Menu/Menu.js');var Dropdown=require('./components/Dropdown/Dropdown.js');var Dialog=require('./components/Dialog/Dialog.js');var Notification=require('./components/Notification/Notification.js');exports.hexToRgbA=colors$1.hexToRgbA,exports.isHex=colors$1.isHex,exports.ColorNames=colors.ColorNames,exports.screenL=screen.screenL,exports.screenM=screen.screenM,exports.screenMaxL=screen.screenMaxL,exports.screenMaxM=screen.screenMaxM,exports.screenMaxS=screen.screenMaxS,exports.screenMaxXl=screen.screenMaxXl,exports.screenMaxXs=screen.screenMaxXs,exports.screenMaxXxs=screen.screenMaxXxs,exports.screenMinL=screen.screenMinL,exports.screenMinM=screen.screenMinM,exports.screenMinS=screen.screenMinS,exports.screenMinXl=screen.screenMinXl,exports.screenMinXs=screen.screenMinXs,exports.screenRetina=screen.screenRetina,exports.screenS=screen.screenS,exports.screenXl=screen.screenXl,exports.screenXs=screen.screenXs,exports.property=responsiveProperty.property,exports.responsiveNamedProperty=responsiveProperty.responsiveNamedProperty,exports.responsiveProperty=responsiveProperty.responsiveProperty,exports.color=color.color,exports.vAlign=vAlign.vAlign,exports.buildMediaQuery=shared.buildMediaQuery,exports.desktopFirst=shared.desktopFirst,exports.mobileFirst=shared.mobileFirst,exports.COUNTRY_DATA=constants.COUNTRY_DATA,exports.DEFAULT_MASK=constants.DEFAULT_MASK,exports.INITIAL_MASK=constants.INITIAL_MASK,exports.ThemeProvider=themeProvider.ThemeProvider,exports.adultDarkTheme=themes.adultDarkTheme,exports.adultLightTheme=themes.adultLightTheme,exports.babyDarkTheme=themes.babyDarkTheme,exports.babyLightTheme=themes.babyLightTheme,exports.motherDarkTheme=themes.motherDarkTheme,exports.motherLightTheme=themes.motherLightTheme,exports.teenDarkTheme=themes.teenDarkTheme,exports.teenLightTheme=themes.teenLightTheme,exports.theme=themes.defaultTheme,exports.ActionBtn=ActionBtn.ActionBtn,exports.Alert=Alert.Alert,exports.Amount=Amount.Amount,exports.CURRENCY_MAP=index.CURRENCY_MAP,exports.CurrencyCodes=index.CurrencyCodes,exports.Anchor=Anchor.Anchor,exports.Arrow=Arrow.Arrow,exports.ArrowBadge=ArrowBadge.ArrowBadge,exports.Avatar=Avatar.Avatar,exports.Badge=Badge.Badge,exports.Button=Button.Button,exports.Container=Container.Container,exports.Icon=Icon.Icon,exports.Modal=Modal.Modal,exports.Paper=Paper.Paper,exports.Progress=Progress.Progress,exports.Scrollable=Scrollable.Scrollable,exports.Section=Section.Section,exports.Separator=Separator.Separator,exports.Spacer=Spacer.Spacer,exports.Spinner=Spinner.Spinner,exports.Switcher=Switcher.Switcher,exports.Tab=Tab.Tab,exports.Tabs=Tabs.Tabs,exports.Text=Text.Text,exports.Tooltip=Tooltip.Tooltip,exports.Tag=Tag.Tag,exports.ContextMenu=ContextMenu.ContextMenu,exports.Textarea=Textarea.Textarea,exports.Input=Input.Input,exports.baseInputStyle=style.baseInputStyle,exports.Radio=Radio.Radio,exports.Checkbox=Checkbox.Checkbox,exports.Select=Select.Select,exports.FormLabel=FormLabel.FormLabel,exports.Skeleton=Skeleton.Skeleton,exports.Popover=Popover.Popover,exports.ListItem=ListItem.ListItem,exports.Indicator=Indicator.Indicator,exports.IconButton=IconButton.IconButton,exports.Chip=Chip.Chip,exports.Menu=Menu.Menu,exports.Dropdown=Dropdown.Dropdown,exports.Dialog=Dialog.Dialog,exports.Notification=Notification.Notification;
|
|
1
|
+
'use strict';var colors$1=require('./shared/utils/colors.js');var colors=require('./theme/colors.js');var screen=require('./mixins/screen.js');var responsiveProperty=require('./mixins/responsive-property.js');var color=require('./mixins/color.js');var vAlign=require('./mixins/vAlign.js');var shared=require('./mixins/shared.js');var constants=require('./components/Input.Phone/constants.js');var themeProvider=require('./theme/theme-provider.js');var themes=require('./theme/themes.js');var ActionBtn=require('./components/ActionBtn/ActionBtn.js');var Alert=require('./components/Alert/Alert.js');var Amount=require('./components/Amount/Amount.js');var index=require('./components/Amount/data/index.js');var Anchor=require('./components/Anchor/Anchor.js');var Arrow=require('./components/Arrow/Arrow.js');var ArrowBadge=require('./components/ArrowBadge/ArrowBadge.js');var Avatar=require('./components/Avatar/Avatar.js');var Badge=require('./components/Badge/Badge.js');var Button=require('./components/Button/Button.js');var Container=require('./components/Container/Container.js');var Icon=require('./components/Icon/Icon.js');var Modal=require('./components/Modal/Modal.js');var Paper=require('./components/Paper/Paper.js');var Progress=require('./components/Progress/Progress.js');var Scrollable=require('./components/Scrollable/Scrollable.js');var Section=require('./components/Section/Section.js');var Separator=require('./components/Separator/Separator.js');var Spacer=require('./components/Spacer/Spacer.js');var Spinner=require('./components/Spinner/Spinner.js');var Switcher=require('./components/Switcher/Switcher.js');var Tab=require('./components/Tab/Tab.js');var Tabs=require('./components/Tabs/Tabs.js');var Text=require('./components/Text/Text.js');var Tooltip=require('./components/Tooltip/Tooltip.js');var Tag=require('./components/Tag/Tag.js');var ContextMenu=require('./components/ContextMenu/ContextMenu.js');var Textarea=require('./components/Textarea/Textarea.js');var Input=require('./components/Input/Input.js');var style=require('./components/Input/style.js');var Radio=require('./components/Radio/Radio.js');var Checkbox=require('./components/Checkbox/Checkbox.js');var Select=require('./components/Select/Select.js');var FormLabel=require('./components/FormLabel/FormLabel.js');var Skeleton=require('./components/Skeleton/Skeleton.js');var Popover=require('./components/Popover/Popover.js');var ListItem=require('./components/ListItem/ListItem.js');var Indicator=require('./components/Indicator/Indicator.js');var IconButton=require('./components/IconButton/IconButton.js');var Chip=require('./components/Chip/Chip.js');var Menu=require('./components/Menu/Menu.js');var Dropdown=require('./components/Dropdown/Dropdown.js');var Dialog=require('./components/Dialog/Dialog.js');var Notification=require('./components/Notification/Notification.js');var Accordion=require('./components/Accordion/Accordion.js');exports.hexToRgbA=colors$1.hexToRgbA,exports.isHex=colors$1.isHex,exports.ColorNames=colors.ColorNames,exports.screenL=screen.screenL,exports.screenM=screen.screenM,exports.screenMaxL=screen.screenMaxL,exports.screenMaxM=screen.screenMaxM,exports.screenMaxS=screen.screenMaxS,exports.screenMaxXl=screen.screenMaxXl,exports.screenMaxXs=screen.screenMaxXs,exports.screenMaxXxs=screen.screenMaxXxs,exports.screenMinL=screen.screenMinL,exports.screenMinM=screen.screenMinM,exports.screenMinS=screen.screenMinS,exports.screenMinXl=screen.screenMinXl,exports.screenMinXs=screen.screenMinXs,exports.screenRetina=screen.screenRetina,exports.screenS=screen.screenS,exports.screenXl=screen.screenXl,exports.screenXs=screen.screenXs,exports.property=responsiveProperty.property,exports.responsiveNamedProperty=responsiveProperty.responsiveNamedProperty,exports.responsiveProperty=responsiveProperty.responsiveProperty,exports.color=color.color,exports.vAlign=vAlign.vAlign,exports.buildMediaQuery=shared.buildMediaQuery,exports.desktopFirst=shared.desktopFirst,exports.mobileFirst=shared.mobileFirst,exports.COUNTRY_DATA=constants.COUNTRY_DATA,exports.DEFAULT_MASK=constants.DEFAULT_MASK,exports.INITIAL_MASK=constants.INITIAL_MASK,exports.ThemeProvider=themeProvider.ThemeProvider,exports.adultDarkTheme=themes.adultDarkTheme,exports.adultLightTheme=themes.adultLightTheme,exports.babyDarkTheme=themes.babyDarkTheme,exports.babyLightTheme=themes.babyLightTheme,exports.motherDarkTheme=themes.motherDarkTheme,exports.motherLightTheme=themes.motherLightTheme,exports.teenDarkTheme=themes.teenDarkTheme,exports.teenLightTheme=themes.teenLightTheme,exports.theme=themes.defaultTheme,exports.ActionBtn=ActionBtn.ActionBtn,exports.Alert=Alert.Alert,exports.Amount=Amount.Amount,exports.CURRENCY_MAP=index.CURRENCY_MAP,exports.CurrencyCodes=index.CurrencyCodes,exports.Anchor=Anchor.Anchor,exports.Arrow=Arrow.Arrow,exports.ArrowBadge=ArrowBadge.ArrowBadge,exports.Avatar=Avatar.Avatar,exports.Badge=Badge.Badge,exports.Button=Button.Button,exports.Container=Container.Container,exports.Icon=Icon.Icon,exports.Modal=Modal.Modal,exports.Paper=Paper.Paper,exports.Progress=Progress.Progress,exports.Scrollable=Scrollable.Scrollable,exports.Section=Section.Section,exports.Separator=Separator.Separator,exports.Spacer=Spacer.Spacer,exports.Spinner=Spinner.Spinner,exports.Switcher=Switcher.Switcher,exports.Tab=Tab.Tab,exports.Tabs=Tabs.Tabs,exports.Text=Text.Text,exports.Tooltip=Tooltip.Tooltip,exports.Tag=Tag.Tag,exports.ContextMenu=ContextMenu.ContextMenu,exports.Textarea=Textarea.Textarea,exports.Input=Input.Input,exports.baseInputStyle=style.baseInputStyle,exports.Radio=Radio.Radio,exports.Checkbox=Checkbox.Checkbox,exports.Select=Select.Select,exports.FormLabel=FormLabel.FormLabel,exports.Skeleton=Skeleton.Skeleton,exports.Popover=Popover.Popover,exports.ListItem=ListItem.ListItem,exports.Indicator=Indicator.Indicator,exports.IconButton=IconButton.IconButton,exports.Chip=Chip.Chip,exports.Menu=Menu.Menu,exports.Dropdown=Dropdown.Dropdown,exports.Dialog=Dialog.Dialog,exports.Notification=Notification.Notification,exports.Accordion=Accordion.Accordion;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{hexToRgbA,isHex}from'./shared/utils/colors.mjs';export{ColorNames}from'./theme/colors.mjs';export{screenL,screenM,screenMaxL,screenMaxM,screenMaxS,screenMaxXl,screenMaxXs,screenMaxXxs,screenMinL,screenMinM,screenMinS,screenMinXl,screenMinXs,screenRetina,screenS,screenXl,screenXs}from'./mixins/screen.mjs';export{property,responsiveNamedProperty,responsiveProperty}from'./mixins/responsive-property.mjs';export{color}from'./mixins/color.mjs';export{vAlign}from'./mixins/vAlign.mjs';export{buildMediaQuery,desktopFirst,mobileFirst}from'./mixins/shared.mjs';export{COUNTRY_DATA,DEFAULT_MASK,INITIAL_MASK}from'./components/Input.Phone/constants.mjs';export{ThemeProvider}from'./theme/theme-provider.mjs';export{adultDarkTheme,adultLightTheme,babyDarkTheme,babyLightTheme,motherDarkTheme,motherLightTheme,teenDarkTheme,teenLightTheme,defaultTheme as theme}from'./theme/themes.mjs';export{ActionBtn}from'./components/ActionBtn/ActionBtn.mjs';export{Alert}from'./components/Alert/Alert.mjs';export{Amount}from'./components/Amount/Amount.mjs';export{CURRENCY_MAP,CurrencyCodes}from'./components/Amount/data/index.mjs';export{Anchor}from'./components/Anchor/Anchor.mjs';export{Arrow}from'./components/Arrow/Arrow.mjs';export{ArrowBadge}from'./components/ArrowBadge/ArrowBadge.mjs';export{Avatar}from'./components/Avatar/Avatar.mjs';export{Badge}from'./components/Badge/Badge.mjs';export{Button}from'./components/Button/Button.mjs';export{Container}from'./components/Container/Container.mjs';export{Icon}from'./components/Icon/Icon.mjs';export{Modal}from'./components/Modal/Modal.mjs';export{Paper}from'./components/Paper/Paper.mjs';export{Progress}from'./components/Progress/Progress.mjs';export{Scrollable}from'./components/Scrollable/Scrollable.mjs';export{Section}from'./components/Section/Section.mjs';export{Separator}from'./components/Separator/Separator.mjs';export{Spacer}from'./components/Spacer/Spacer.mjs';export{Spinner}from'./components/Spinner/Spinner.mjs';export{Switcher}from'./components/Switcher/Switcher.mjs';export{Tab}from'./components/Tab/Tab.mjs';export{Tabs}from'./components/Tabs/Tabs.mjs';export{Text}from'./components/Text/Text.mjs';export{Tooltip}from'./components/Tooltip/Tooltip.mjs';export{Tag}from'./components/Tag/Tag.mjs';export{ContextMenu}from'./components/ContextMenu/ContextMenu.mjs';export{Textarea}from'./components/Textarea/Textarea.mjs';export{Input}from'./components/Input/Input.mjs';export{baseInputStyle}from'./components/Input/style.mjs';export{Radio}from'./components/Radio/Radio.mjs';export{Checkbox}from'./components/Checkbox/Checkbox.mjs';export{Select}from'./components/Select/Select.mjs';export{FormLabel}from'./components/FormLabel/FormLabel.mjs';export{Skeleton}from'./components/Skeleton/Skeleton.mjs';export{Popover}from'./components/Popover/Popover.mjs';export{ListItem}from'./components/ListItem/ListItem.mjs';export{Indicator}from'./components/Indicator/Indicator.mjs';export{IconButton}from'./components/IconButton/IconButton.mjs';export{Chip}from'./components/Chip/Chip.mjs';export{Menu}from'./components/Menu/Menu.mjs';export{Dropdown}from'./components/Dropdown/Dropdown.mjs';export{Dialog}from'./components/Dialog/Dialog.mjs';export{Notification}from'./components/Notification/Notification.mjs';
|
|
1
|
+
export{hexToRgbA,isHex}from'./shared/utils/colors.mjs';export{ColorNames}from'./theme/colors.mjs';export{screenL,screenM,screenMaxL,screenMaxM,screenMaxS,screenMaxXl,screenMaxXs,screenMaxXxs,screenMinL,screenMinM,screenMinS,screenMinXl,screenMinXs,screenRetina,screenS,screenXl,screenXs}from'./mixins/screen.mjs';export{property,responsiveNamedProperty,responsiveProperty}from'./mixins/responsive-property.mjs';export{color}from'./mixins/color.mjs';export{vAlign}from'./mixins/vAlign.mjs';export{buildMediaQuery,desktopFirst,mobileFirst}from'./mixins/shared.mjs';export{COUNTRY_DATA,DEFAULT_MASK,INITIAL_MASK}from'./components/Input.Phone/constants.mjs';export{ThemeProvider}from'./theme/theme-provider.mjs';export{adultDarkTheme,adultLightTheme,babyDarkTheme,babyLightTheme,motherDarkTheme,motherLightTheme,teenDarkTheme,teenLightTheme,defaultTheme as theme}from'./theme/themes.mjs';export{ActionBtn}from'./components/ActionBtn/ActionBtn.mjs';export{Alert}from'./components/Alert/Alert.mjs';export{Amount}from'./components/Amount/Amount.mjs';export{CURRENCY_MAP,CurrencyCodes}from'./components/Amount/data/index.mjs';export{Anchor}from'./components/Anchor/Anchor.mjs';export{Arrow}from'./components/Arrow/Arrow.mjs';export{ArrowBadge}from'./components/ArrowBadge/ArrowBadge.mjs';export{Avatar}from'./components/Avatar/Avatar.mjs';export{Badge}from'./components/Badge/Badge.mjs';export{Button}from'./components/Button/Button.mjs';export{Container}from'./components/Container/Container.mjs';export{Icon}from'./components/Icon/Icon.mjs';export{Modal}from'./components/Modal/Modal.mjs';export{Paper}from'./components/Paper/Paper.mjs';export{Progress}from'./components/Progress/Progress.mjs';export{Scrollable}from'./components/Scrollable/Scrollable.mjs';export{Section}from'./components/Section/Section.mjs';export{Separator}from'./components/Separator/Separator.mjs';export{Spacer}from'./components/Spacer/Spacer.mjs';export{Spinner}from'./components/Spinner/Spinner.mjs';export{Switcher}from'./components/Switcher/Switcher.mjs';export{Tab}from'./components/Tab/Tab.mjs';export{Tabs}from'./components/Tabs/Tabs.mjs';export{Text}from'./components/Text/Text.mjs';export{Tooltip}from'./components/Tooltip/Tooltip.mjs';export{Tag}from'./components/Tag/Tag.mjs';export{ContextMenu}from'./components/ContextMenu/ContextMenu.mjs';export{Textarea}from'./components/Textarea/Textarea.mjs';export{Input}from'./components/Input/Input.mjs';export{baseInputStyle}from'./components/Input/style.mjs';export{Radio}from'./components/Radio/Radio.mjs';export{Checkbox}from'./components/Checkbox/Checkbox.mjs';export{Select}from'./components/Select/Select.mjs';export{FormLabel}from'./components/FormLabel/FormLabel.mjs';export{Skeleton}from'./components/Skeleton/Skeleton.mjs';export{Popover}from'./components/Popover/Popover.mjs';export{ListItem}from'./components/ListItem/ListItem.mjs';export{Indicator}from'./components/Indicator/Indicator.mjs';export{IconButton}from'./components/IconButton/IconButton.mjs';export{Chip}from'./components/Chip/Chip.mjs';export{Menu}from'./components/Menu/Menu.mjs';export{Dropdown}from'./components/Dropdown/Dropdown.mjs';export{Dialog}from'./components/Dialog/Dialog.mjs';export{Notification}from'./components/Notification/Notification.mjs';export{Accordion}from'./components/Accordion/Accordion.mjs';
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/mixins/focus.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus.js","sources":["../../../src/mixins/focus.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"focus.js","sources":["../../../src/mixins/focus.ts"],"sourcesContent":["import type { ThemeProps, DefaultTheme } from 'styled-components'\n\nconst focus = (props: ThemeProps<DefaultTheme>): string => {\n return `\n &:focus-visible {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `\n}\n\nexport { focus }\n"],"names":["props","theme","colors","white"],"mappings":"2BAEeA,GACN,wDAEqBA,EAAMC,MAAMC,OAAOC,oBAAoBH,EAAMC,MAAMC,OAAO"}
|
package/mixins/focus.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus.mjs","sources":["../../../src/mixins/focus.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"focus.mjs","sources":["../../../src/mixins/focus.ts"],"sourcesContent":["import type { ThemeProps, DefaultTheme } from 'styled-components'\n\nconst focus = (props: ThemeProps<DefaultTheme>): string => {\n return `\n &:focus-visible {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `\n}\n\nexport { focus }\n"],"names":["focus","props","theme","colors","white"],"mappings":"AAEMA,MAAAA,MAASC,GACN,wDAEqBA,EAAMC,MAAMC,OAAOC,oBAAoBH,EAAMC,MAAMC,OAAO"}
|
package/package.json
CHANGED
package/theme/themes.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var colors$1=require('../shared/utils/colors.js');var relBuilder=require('../shared/utils/rel-builder.js');var sizeInput=require('../shared/enums/sizeInput.js');var constants=require('../shared/constants.js');var colors=require('./colors.js');var colorsLight=require('./colors-light.js');var colorsDark=require('./colors-dark.js');const defaultTheme={breakpoints:constants.BREAKPOINTS,colors:{...colors.colors,...colors.socialColors,...colors.unitColors,...colorsLight.baseColors,...colorsLight.motherColors},borderRadius:'5px',textColor:'mineShaft',fallbackColor:'mineShaft',zIndex:{modal:9e3,tooltip:80},classNamePrefix:'fox',defaultInputControlsWidth:sizeInput.SizeInput.l,utils:{relBuilder:relBuilder.relBuilder,hexToRgbA:colors$1.hexToRgbA},mode:'light',preset:'default',name:'mother',components:{Arrow:{size:'l'},Button:{size:'m'},Checkbox:{size:'m'},Tooltip:{preset:'default'}}};const motherLightTheme={...defaultTheme,preset:'brand'};const motherDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsDark.baseColors,...colorsDark.motherColors},mode:'dark',preset:'brand'};const babyLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsLight.babyColors},preset:'brand',name:'baby'};const babyDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsDark.baseColors,...colorsDark.babyColors},mode:'dark',preset:'brand',name:'baby'};const teenLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsLight.teenColors},preset:'brand',name:'teen'};const teenDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsDark.baseColors,...colorsDark.teenColors},mode:'dark',preset:'brand',name:'teen'};const adultLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsLight.adultColors},preset:'brand',name:'adult'};const adultDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsDark.baseColors,...colorsDark.adultColors},mode:'dark',preset:'brand',name:'adult'};exports.adultDarkTheme=adultDarkTheme,exports.adultLightTheme=adultLightTheme,exports.babyDarkTheme=babyDarkTheme,exports.babyLightTheme=babyLightTheme,exports.defaultTheme=defaultTheme,exports.motherDarkTheme=motherDarkTheme,exports.motherLightTheme=motherLightTheme,exports.teenDarkTheme=teenDarkTheme,exports.teenLightTheme=teenLightTheme;
|
|
1
|
+
'use strict';var colors$1=require('../shared/utils/colors.js');var relBuilder=require('../shared/utils/rel-builder.js');var focus=require('../mixins/focus.js');var sizeInput=require('../shared/enums/sizeInput.js');var constants=require('../shared/constants.js');var colors=require('./colors.js');var colorsLight=require('./colors-light.js');var colorsDark=require('./colors-dark.js');const defaultTheme={breakpoints:constants.BREAKPOINTS,colors:{...colors.colors,...colors.socialColors,...colors.unitColors,...colorsLight.baseColors,...colorsLight.motherColors},borderRadius:'5px',textColor:'mineShaft',fallbackColor:'mineShaft',zIndex:{modal:9e3,tooltip:80},classNamePrefix:'fox',defaultInputControlsWidth:sizeInput.SizeInput.l,utils:{relBuilder:relBuilder.relBuilder,hexToRgbA:colors$1.hexToRgbA},mixins:{focus:focus.focus},mode:'light',preset:'default',name:'mother',components:{Arrow:{size:'l'},Button:{size:'m'},Checkbox:{size:'m'},Tooltip:{preset:'default'}}};const motherLightTheme={...defaultTheme,preset:'brand'};const motherDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsDark.baseColors,...colorsDark.motherColors},mode:'dark',preset:'brand'};const babyLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsLight.babyColors},preset:'brand',name:'baby'};const babyDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsDark.baseColors,...colorsDark.babyColors},mode:'dark',preset:'brand',name:'baby'};const teenLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsLight.teenColors},preset:'brand',name:'teen'};const teenDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsDark.baseColors,...colorsDark.teenColors},mode:'dark',preset:'brand',name:'teen'};const adultLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsLight.adultColors},preset:'brand',name:'adult'};const adultDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...colorsDark.baseColors,...colorsDark.adultColors},mode:'dark',preset:'brand',name:'adult'};exports.adultDarkTheme=adultDarkTheme,exports.adultLightTheme=adultLightTheme,exports.babyDarkTheme=babyDarkTheme,exports.babyLightTheme=babyLightTheme,exports.defaultTheme=defaultTheme,exports.motherDarkTheme=motherDarkTheme,exports.motherLightTheme=motherLightTheme,exports.teenDarkTheme=teenDarkTheme,exports.teenLightTheme=teenLightTheme;
|
|
2
2
|
//# sourceMappingURL=themes.js.map
|
package/theme/themes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","sources":["../../../src/theme/themes.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components'\nimport { hexToRgbA } from 'shared/utils/colors'\nimport { relBuilder } from 'shared/utils/rel-builder'\nimport { SizeInput } from 'shared/enums/sizeInput'\nimport { BREAKPOINTS } from 'shared/constants'\nimport { colors, socialColors, unitColors } from './colors'\nimport * as ColorsLight from './colors-light'\nimport * as ColorsDark from './colors-dark'\n\nexport const defaultTheme: DefaultTheme = {\n breakpoints: BREAKPOINTS,\n colors: {\n ...colors,\n ...socialColors,\n ...unitColors,\n ...ColorsLight.baseColors,\n ...ColorsLight.motherColors,\n },\n borderRadius: '5px',\n textColor: 'mineShaft',\n fallbackColor: 'mineShaft',\n zIndex: {\n modal: 9000,\n tooltip: 80,\n },\n classNamePrefix: 'fox',\n defaultInputControlsWidth: SizeInput.l,\n utils: {\n relBuilder,\n hexToRgbA,\n },\n mode: 'light',\n preset: 'default',\n name: 'mother',\n components: {\n Arrow: {\n size: 'l',\n },\n Button: {\n size: 'm',\n },\n Checkbox: {\n size: 'm',\n },\n Tooltip: {\n preset: 'default',\n },\n },\n}\n\nexport const motherLightTheme: DefaultTheme = {\n ...defaultTheme,\n preset: 'brand',\n}\n\nexport const motherDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.motherColors,\n },\n mode: 'dark',\n preset: 'brand',\n}\n\nexport const babyLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.babyColors,\n },\n preset: 'brand',\n name: 'baby',\n}\n\nexport const babyDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.babyColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'baby',\n}\n\nexport const teenLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.teenColors,\n },\n preset: 'brand',\n name: 'teen',\n}\n\nexport const teenDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.teenColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'teen',\n}\n\nexport const adultLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.adultColors,\n },\n preset: 'brand',\n name: 'adult',\n}\n\nexport const adultDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.adultColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'adult',\n}\n"],"names":["defaultTheme","breakpoints","BREAKPOINTS","colors","socialColors","unitColors","ColorsLight","baseColors","motherColors","borderRadius","textColor","fallbackColor","zIndex","modal","tooltip","classNamePrefix","defaultInputControlsWidth","SizeInput","l","utils","relBuilder","hexToRgbA","mode","preset","name","components","Arrow","size","Button","Checkbox","Tooltip","motherLightTheme","motherDarkTheme","ColorsDark","babyLightTheme","babyColors","babyDarkTheme","teenLightTheme","teenColors","teenDarkTheme","adultLightTheme","adultColors","adultDarkTheme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"themes.js","sources":["../../../src/theme/themes.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components'\nimport { hexToRgbA } from 'shared/utils/colors'\nimport { relBuilder } from 'shared/utils/rel-builder'\nimport { focus } from 'mixins/focus'\nimport { SizeInput } from 'shared/enums/sizeInput'\nimport { BREAKPOINTS } from 'shared/constants'\nimport { colors, socialColors, unitColors } from './colors'\nimport * as ColorsLight from './colors-light'\nimport * as ColorsDark from './colors-dark'\n\nexport const defaultTheme: DefaultTheme = {\n breakpoints: BREAKPOINTS,\n colors: {\n ...colors,\n ...socialColors,\n ...unitColors,\n ...ColorsLight.baseColors,\n ...ColorsLight.motherColors,\n },\n borderRadius: '5px',\n textColor: 'mineShaft',\n fallbackColor: 'mineShaft',\n zIndex: {\n modal: 9000,\n tooltip: 80,\n },\n classNamePrefix: 'fox',\n defaultInputControlsWidth: SizeInput.l,\n utils: {\n relBuilder,\n hexToRgbA,\n },\n mixins: {\n focus,\n },\n mode: 'light',\n preset: 'default',\n name: 'mother',\n components: {\n Arrow: {\n size: 'l',\n },\n Button: {\n size: 'm',\n },\n Checkbox: {\n size: 'm',\n },\n Tooltip: {\n preset: 'default',\n },\n },\n}\n\nexport const motherLightTheme: DefaultTheme = {\n ...defaultTheme,\n preset: 'brand',\n}\n\nexport const motherDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.motherColors,\n },\n mode: 'dark',\n preset: 'brand',\n}\n\nexport const babyLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.babyColors,\n },\n preset: 'brand',\n name: 'baby',\n}\n\nexport const babyDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.babyColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'baby',\n}\n\nexport const teenLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.teenColors,\n },\n preset: 'brand',\n name: 'teen',\n}\n\nexport const teenDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.teenColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'teen',\n}\n\nexport const adultLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.adultColors,\n },\n preset: 'brand',\n name: 'adult',\n}\n\nexport const adultDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.adultColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'adult',\n}\n"],"names":["defaultTheme","breakpoints","BREAKPOINTS","colors","socialColors","unitColors","ColorsLight","baseColors","motherColors","borderRadius","textColor","fallbackColor","zIndex","modal","tooltip","classNamePrefix","defaultInputControlsWidth","SizeInput","l","utils","relBuilder","hexToRgbA","mixins","focus","mode","preset","name","components","Arrow","size","Button","Checkbox","Tooltip","motherLightTheme","motherDarkTheme","ColorsDark","babyLightTheme","babyColors","babyDarkTheme","teenLightTheme","teenColors","teenDarkTheme","adultLightTheme","adultColors","adultDarkTheme"],"mappings":"gYAUO,MAAMA,aAA6B,CACxCC,YAAaC,UAAWA,YACxBC,OAAQ,IACHA,OAAMA,UACNC,OAAYA,gBACZC,OAAUA,cACVC,YAAsBC,cACtBD,YAAYE,cAEjBC,aAAc,MACdC,UAAW,YACXC,cAAe,YACfC,OAAQ,CACNC,MAAO,IACPC,QAAS,IAEXC,gBAAiB,MACjBC,0BAA2BC,UAASA,UAACC,EACrCC,MAAO,YACLC,WAAUA,WACVC,UAAAA,SAAAA,WAEFC,OAAQ,CACNC,MAAAA,MAAAA,OAEFC,KAAM,QACNC,OAAQ,UACRC,KAAM,SACNC,WAAY,CACVC,MAAO,CACLC,KAAM,KAERC,OAAQ,CACND,KAAM,KAERE,SAAU,CACRF,KAAM,KAERG,QAAS,CACPP,OAAQ,aAKP,MAAMQ,iBAAiC,IACzCjC,aACHyB,OAAQ,SAGH,MAAMS,gBAAgC,IACxClC,aACHG,OAAQ,IACHH,aAAaG,UACbgC,WAAqB5B,cACrB4B,WAAW3B,cAEhBgB,KAAM,OACNC,OAAQ,SAGH,MAAMW,eAA+B,IACvCpC,aACHG,OAAQ,IACHH,aAAaG,UACbG,YAAY+B,YAEjBZ,OAAQ,QACRC,KAAM,QAGD,MAAMY,cAA8B,IACtCtC,aACHG,OAAQ,IACHH,aAAaG,UACbgC,WAAqB5B,cACrB4B,WAAWE,YAEhBb,KAAM,OACNC,OAAQ,QACRC,KAAM,QAGD,MAAMa,eAA+B,IACvCvC,aACHG,OAAQ,IACHH,aAAaG,UACbG,YAAYkC,YAEjBf,OAAQ,QACRC,KAAM,QAGD,MAAMe,cAA8B,IACtCzC,aACHG,OAAQ,IACHH,aAAaG,UACbgC,WAAqB5B,cACrB4B,WAAWK,YAEhBhB,KAAM,OACNC,OAAQ,QACRC,KAAM,QAGD,MAAMgB,gBAAgC,IACxC1C,aACHG,OAAQ,IACHH,aAAaG,UACbG,YAAYqC,aAEjBlB,OAAQ,QACRC,KAAM,SAGD,MAAMkB,eAA+B,IACvC5C,aACHG,OAAQ,IACHH,aAAaG,UACbgC,WAAqB5B,cACrB4B,WAAWQ,aAEhBnB,KAAM,OACNC,OAAQ,QACRC,KAAM"}
|
package/theme/themes.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{hexToRgbA}from'../shared/utils/colors.mjs';import{relBuilder}from'../shared/utils/rel-builder.mjs';import{SizeInput}from'../shared/enums/sizeInput.mjs';import{BREAKPOINTS}from'../shared/constants.mjs';import{colors,socialColors,unitColors}from'./colors.mjs';import{baseColors,motherColors,babyColors,teenColors,adultColors}from'./colors-light.mjs';import{baseColors as baseColors$1,motherColors as motherColors$1,babyColors as babyColors$1,teenColors as teenColors$1,adultColors as adultColors$1}from'./colors-dark.mjs';const defaultTheme={breakpoints:BREAKPOINTS,colors:{...colors,...socialColors,...unitColors,...baseColors,...motherColors},borderRadius:'5px',textColor:'mineShaft',fallbackColor:'mineShaft',zIndex:{modal:9e3,tooltip:80},classNamePrefix:'fox',defaultInputControlsWidth:SizeInput.l,utils:{relBuilder,hexToRgbA},mode:'light',preset:'default',name:'mother',components:{Arrow:{size:'l'},Button:{size:'m'},Checkbox:{size:'m'},Tooltip:{preset:'default'}}};const motherLightTheme={...defaultTheme,preset:'brand'};const motherDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...baseColors$1,...motherColors$1},mode:'dark',preset:'brand'};const babyLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...babyColors},preset:'brand',name:'baby'};const babyDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...baseColors$1,...babyColors$1},mode:'dark',preset:'brand',name:'baby'};const teenLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...teenColors},preset:'brand',name:'teen'};const teenDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...baseColors$1,...teenColors$1},mode:'dark',preset:'brand',name:'teen'};const adultLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...adultColors},preset:'brand',name:'adult'};const adultDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...baseColors$1,...adultColors$1},mode:'dark',preset:'brand',name:'adult'};export{adultDarkTheme,adultLightTheme,babyDarkTheme,babyLightTheme,defaultTheme,motherDarkTheme,motherLightTheme,teenDarkTheme,teenLightTheme};
|
|
1
|
+
import{hexToRgbA}from'../shared/utils/colors.mjs';import{relBuilder}from'../shared/utils/rel-builder.mjs';import{focus}from'../mixins/focus.mjs';import{SizeInput}from'../shared/enums/sizeInput.mjs';import{BREAKPOINTS}from'../shared/constants.mjs';import{colors,socialColors,unitColors}from'./colors.mjs';import{baseColors,motherColors,babyColors,teenColors,adultColors}from'./colors-light.mjs';import{baseColors as baseColors$1,motherColors as motherColors$1,babyColors as babyColors$1,teenColors as teenColors$1,adultColors as adultColors$1}from'./colors-dark.mjs';const defaultTheme={breakpoints:BREAKPOINTS,colors:{...colors,...socialColors,...unitColors,...baseColors,...motherColors},borderRadius:'5px',textColor:'mineShaft',fallbackColor:'mineShaft',zIndex:{modal:9e3,tooltip:80},classNamePrefix:'fox',defaultInputControlsWidth:SizeInput.l,utils:{relBuilder,hexToRgbA},mixins:{focus},mode:'light',preset:'default',name:'mother',components:{Arrow:{size:'l'},Button:{size:'m'},Checkbox:{size:'m'},Tooltip:{preset:'default'}}};const motherLightTheme={...defaultTheme,preset:'brand'};const motherDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...baseColors$1,...motherColors$1},mode:'dark',preset:'brand'};const babyLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...babyColors},preset:'brand',name:'baby'};const babyDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...baseColors$1,...babyColors$1},mode:'dark',preset:'brand',name:'baby'};const teenLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...teenColors},preset:'brand',name:'teen'};const teenDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...baseColors$1,...teenColors$1},mode:'dark',preset:'brand',name:'teen'};const adultLightTheme={...defaultTheme,colors:{...defaultTheme.colors,...adultColors},preset:'brand',name:'adult'};const adultDarkTheme={...defaultTheme,colors:{...defaultTheme.colors,...baseColors$1,...adultColors$1},mode:'dark',preset:'brand',name:'adult'};export{adultDarkTheme,adultLightTheme,babyDarkTheme,babyLightTheme,defaultTheme,motherDarkTheme,motherLightTheme,teenDarkTheme,teenLightTheme};
|
|
2
2
|
//# sourceMappingURL=themes.mjs.map
|
package/theme/themes.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.mjs","sources":["../../../src/theme/themes.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components'\nimport { hexToRgbA } from 'shared/utils/colors'\nimport { relBuilder } from 'shared/utils/rel-builder'\nimport { SizeInput } from 'shared/enums/sizeInput'\nimport { BREAKPOINTS } from 'shared/constants'\nimport { colors, socialColors, unitColors } from './colors'\nimport * as ColorsLight from './colors-light'\nimport * as ColorsDark from './colors-dark'\n\nexport const defaultTheme: DefaultTheme = {\n breakpoints: BREAKPOINTS,\n colors: {\n ...colors,\n ...socialColors,\n ...unitColors,\n ...ColorsLight.baseColors,\n ...ColorsLight.motherColors,\n },\n borderRadius: '5px',\n textColor: 'mineShaft',\n fallbackColor: 'mineShaft',\n zIndex: {\n modal: 9000,\n tooltip: 80,\n },\n classNamePrefix: 'fox',\n defaultInputControlsWidth: SizeInput.l,\n utils: {\n relBuilder,\n hexToRgbA,\n },\n mode: 'light',\n preset: 'default',\n name: 'mother',\n components: {\n Arrow: {\n size: 'l',\n },\n Button: {\n size: 'm',\n },\n Checkbox: {\n size: 'm',\n },\n Tooltip: {\n preset: 'default',\n },\n },\n}\n\nexport const motherLightTheme: DefaultTheme = {\n ...defaultTheme,\n preset: 'brand',\n}\n\nexport const motherDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.motherColors,\n },\n mode: 'dark',\n preset: 'brand',\n}\n\nexport const babyLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.babyColors,\n },\n preset: 'brand',\n name: 'baby',\n}\n\nexport const babyDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.babyColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'baby',\n}\n\nexport const teenLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.teenColors,\n },\n preset: 'brand',\n name: 'teen',\n}\n\nexport const teenDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.teenColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'teen',\n}\n\nexport const adultLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.adultColors,\n },\n preset: 'brand',\n name: 'adult',\n}\n\nexport const adultDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.adultColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'adult',\n}\n"],"names":["defaultTheme","breakpoints","BREAKPOINTS","colors","socialColors","unitColors","ColorsLight","borderRadius","textColor","fallbackColor","zIndex","modal","tooltip","classNamePrefix","defaultInputControlsWidth","SizeInput","l","utils","relBuilder","hexToRgbA","mode","preset","name","components","Arrow","size","Button","Checkbox","Tooltip","motherLightTheme","motherDarkTheme","ColorsDark","babyLightTheme","babyDarkTheme","teenLightTheme","teenDarkTheme","adultLightTheme","adultDarkTheme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"themes.mjs","sources":["../../../src/theme/themes.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components'\nimport { hexToRgbA } from 'shared/utils/colors'\nimport { relBuilder } from 'shared/utils/rel-builder'\nimport { focus } from 'mixins/focus'\nimport { SizeInput } from 'shared/enums/sizeInput'\nimport { BREAKPOINTS } from 'shared/constants'\nimport { colors, socialColors, unitColors } from './colors'\nimport * as ColorsLight from './colors-light'\nimport * as ColorsDark from './colors-dark'\n\nexport const defaultTheme: DefaultTheme = {\n breakpoints: BREAKPOINTS,\n colors: {\n ...colors,\n ...socialColors,\n ...unitColors,\n ...ColorsLight.baseColors,\n ...ColorsLight.motherColors,\n },\n borderRadius: '5px',\n textColor: 'mineShaft',\n fallbackColor: 'mineShaft',\n zIndex: {\n modal: 9000,\n tooltip: 80,\n },\n classNamePrefix: 'fox',\n defaultInputControlsWidth: SizeInput.l,\n utils: {\n relBuilder,\n hexToRgbA,\n },\n mixins: {\n focus,\n },\n mode: 'light',\n preset: 'default',\n name: 'mother',\n components: {\n Arrow: {\n size: 'l',\n },\n Button: {\n size: 'm',\n },\n Checkbox: {\n size: 'm',\n },\n Tooltip: {\n preset: 'default',\n },\n },\n}\n\nexport const motherLightTheme: DefaultTheme = {\n ...defaultTheme,\n preset: 'brand',\n}\n\nexport const motherDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.motherColors,\n },\n mode: 'dark',\n preset: 'brand',\n}\n\nexport const babyLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.babyColors,\n },\n preset: 'brand',\n name: 'baby',\n}\n\nexport const babyDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.babyColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'baby',\n}\n\nexport const teenLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.teenColors,\n },\n preset: 'brand',\n name: 'teen',\n}\n\nexport const teenDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.teenColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'teen',\n}\n\nexport const adultLightTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsLight.adultColors,\n },\n preset: 'brand',\n name: 'adult',\n}\n\nexport const adultDarkTheme: DefaultTheme = {\n ...defaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...ColorsDark.baseColors,\n ...ColorsDark.adultColors,\n },\n mode: 'dark',\n preset: 'brand',\n name: 'adult',\n}\n"],"names":["defaultTheme","breakpoints","BREAKPOINTS","colors","socialColors","unitColors","ColorsLight","borderRadius","textColor","fallbackColor","zIndex","modal","tooltip","classNamePrefix","defaultInputControlsWidth","SizeInput","l","utils","relBuilder","hexToRgbA","mixins","focus","mode","preset","name","components","Arrow","size","Button","Checkbox","Tooltip","motherLightTheme","motherDarkTheme","ColorsDark","babyLightTheme","babyDarkTheme","teenLightTheme","teenDarkTheme","adultLightTheme","adultDarkTheme"],"mappings":"sjBAUO,MAAMA,aAA6B,CACxCC,YAAaC,YACbC,OAAQ,IACHA,UACAC,gBACAC,cACAC,cACAA,cAELC,aAAc,MACdC,UAAW,YACXC,cAAe,YACfC,OAAQ,CACNC,MAAO,IACPC,QAAS,IAEXC,gBAAiB,MACjBC,0BAA2BC,UAAUC,EACrCC,MAAO,CACLC,WACAC,WAEFC,OAAQ,CACNC,OAEFC,KAAM,QACNC,OAAQ,UACRC,KAAM,SACNC,WAAY,CACVC,MAAO,CACLC,KAAM,KAERC,OAAQ,CACND,KAAM,KAERE,SAAU,CACRF,KAAM,KAERG,QAAS,CACPP,OAAQ,aAKP,MAAMQ,iBAAiC,IACzC/B,aACHuB,OAAQ,SAGH,MAAMS,gBAAgC,IACxChC,aACHG,OAAQ,IACHH,aAAaG,UACb8B,gBACAA,gBAELX,KAAM,OACNC,OAAQ,SAGH,MAAMW,eAA+B,IACvClC,aACHG,OAAQ,IACHH,aAAaG,UACbG,YAELiB,OAAQ,QACRC,KAAM,QAGD,MAAMW,cAA8B,IACtCnC,aACHG,OAAQ,IACHH,aAAaG,UACb8B,gBACAA,cAELX,KAAM,OACNC,OAAQ,QACRC,KAAM,QAGD,MAAMY,eAA+B,IACvCpC,aACHG,OAAQ,IACHH,aAAaG,UACbG,YAELiB,OAAQ,QACRC,KAAM,QAGD,MAAMa,cAA8B,IACtCrC,aACHG,OAAQ,IACHH,aAAaG,UACb8B,gBACAA,cAELX,KAAM,OACNC,OAAQ,QACRC,KAAM,QAGD,MAAMc,gBAAgC,IACxCtC,aACHG,OAAQ,IACHH,aAAaG,UACbG,aAELiB,OAAQ,QACRC,KAAM,SAGD,MAAMe,eAA+B,IACvCvC,aACHG,OAAQ,IACHH,aAAaG,UACb8B,gBACAA,eAELX,KAAM,OACNC,OAAQ,QACRC,KAAM"}
|