@foxford/ui 2.13.1 → 2.14.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/ArrowBadge/ArrowBadge.js +2 -0
- package/components/ArrowBadge/ArrowBadge.js.map +1 -0
- package/components/ArrowBadge/constants.js +2 -0
- package/components/ArrowBadge/constants.js.map +1 -0
- package/components/ArrowBadge/images/arrow.module.svg.js +2 -0
- package/components/ArrowBadge/images/arrow.module.svg.js.map +1 -0
- package/components/ArrowBadge/images/fancy.module.svg.js +2 -0
- package/components/ArrowBadge/images/fancy.module.svg.js.map +1 -0
- package/components/ArrowBadge/images/rectangle.module.svg.js +2 -0
- package/components/ArrowBadge/images/rectangle.module.svg.js.map +1 -0
- package/components/ArrowBadge/style.js +2 -0
- package/components/ArrowBadge/style.js.map +1 -0
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/dts/index.d.ts +44 -7
- package/hooks/use-config-priority.js.map +1 -1
- package/hooks/use-theme.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/index.js +1 -1
- package/mixins/focus.js +2 -0
- package/mixins/focus.js.map +1 -0
- package/mixins/margin.js +2 -0
- package/mixins/margin.js.map +1 -0
- package/mixins/size.js +2 -0
- package/mixins/size.js.map +1 -0
- package/package.json +1 -1
- package/shared/regexp.js +2 -0
- package/shared/regexp.js.map +1 -0
- package/shared/utils/inject-theme.js.map +1 -1
- package/shared/utils/style.js +2 -0
- package/shared/utils/style.js.map +1 -0
- package/theme/themes.js +1 -1
- package/theme/themes.js.map +1 -1
- package/mixins/sizing.js +0 -2
- package/mixins/sizing.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as s}from'../../hocs/withMergedProps.js';import{Root as a,Edge as o,Content as i}from'./style.js';import{SIZES as f}from'./constants.js';import{jsxs as m,jsx as n}from'react/jsx-runtime';var p=["size","children","left","right","fancy"];var c='ArrowBadge';var h=s(t(((t,s)=>{var{size:f="m",children:c,left:h,right:l,fancy:d}=t,g=e(t,p);return m(a,r(r({},g),{},{size:f,ref:s,children:[n(o,{left:h,right:l,fancy:d}),n(i,{children:c}),n(o,{left:h,right:l,fancy:d,after:!0})]}))})),{displayName:"ArrowBadge",sizes:f});export{h as ArrowBadge,c as COMPONENT_NAME};
|
|
2
|
+
//# sourceMappingURL=ArrowBadge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ArrowBadge.js","sources":["../../../../src/components/ArrowBadge/ArrowBadge.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport * as Styled from './style'\nimport type { ArrowBadgeProps } from './types'\nimport { SIZES } from './constants'\n\nconst COMPONENT_NAME = 'ArrowBadge'\n\n/**\n *\n * Component interface extends:\n * - [`ResponsiveSizeProps`](#/Interfaces)\n * - [`ResponsiveMarginProps`](#/Interfaces)\n * - [`ColorSchemaProps`](#/Interfaces)\n * - [`ColorProperty<'color'>`](#/Interfaces)\n * - [`ColorProperty<'backgroundColor'>`](#/Interfaces)\n * - [`BaseProps`](#/Interfaces)\n * - [`React.ComponentPropsWithRef<'div'>`](#/Interfaces)\n */\nconst ArrowBadge: React.ForwardRefExoticComponent<ArrowBadgeProps> = withMergedProps<ArrowBadgeProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const { size = 'm', children, left, right, fancy, ...restProps } = props\n\n return (\n <Styled.Root {...restProps} size={size} ref={ref}>\n <Styled.Edge left={left} right={right} fancy={fancy} />\n <Styled.Content>{children}</Styled.Content>\n <Styled.Edge left={left} right={right} fancy={fancy} after />\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { ArrowBadge, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","ArrowBadge","withMergedProps","forwardRef","props","ref","size","children","left","right","fancy","restProps","_excluded","_jsxs","Styled.Root","_jsx","Styled.Edge","Styled.Content","after","displayName","sizes","SIZES"],"mappings":"wZAMMA,IAAAA,EAAiB,aAajBC,IAAAA,EAA+DC,EACnEC,GAAW,CAACC,EAAOC,KACjB,IAAMC,KAAEA,EAAO,IAATC,SAAcA,EAAdC,KAAwBA,EAAxBC,MAA8BA,EAA9BC,MAAqCA,GAAwBN,EAAdO,IAAcP,EAAnEQ,GAEA,OACEC,EAACC,SAAgBH,GAAjB,GAAA,CAA4BL,KAAMA,EAAMD,IAAKA,EAA7CE,SACE,CAAAQ,EAACC,EAAD,CAAaR,KAAMA,EAAMC,MAAOA,EAAOC,MAAOA,IAC9CK,EAACE,EAAD,CAAAV,SAAiBA,IACjBQ,EAACC,EAAD,CAAaR,KAAMA,EAAMC,MAAOA,EAAOC,MAAOA,EAAOQ,OAAK,WAIhE,CACEC,YA1BmB,aA2BnBC,MAAOC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={xxxl:{height:64,fontSize:36},xxl:{height:60,fontSize:34},xl:{height:54,fontSize:32},l:{height:48,fontSize:28},m:{height:40,fontSize:22},s:{height:32,fontSize:16},xs:{height:24,fontSize:14},xxs:{height:20,fontSize:10},xxxs:{height:16,fontSize:10}};export{e as SIZES};
|
|
2
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/ArrowBadge/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/interfaces'\n\nexport const SIZES: Sizes = {\n xxxl: {\n height: 64,\n fontSize: 36,\n },\n xxl: {\n height: 60,\n fontSize: 34,\n },\n xl: {\n height: 54,\n fontSize: 32,\n },\n l: {\n height: 48,\n fontSize: 28,\n },\n m: {\n height: 40,\n fontSize: 22,\n },\n s: {\n height: 32,\n fontSize: 16,\n },\n xs: {\n height: 24,\n fontSize: 14,\n },\n xxs: {\n height: 20,\n fontSize: 10,\n },\n xxxs: {\n height: 16,\n fontSize: 10,\n },\n}\n"],"names":["SIZES","xxxl","height","fontSize","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,OAAQ,GACRC,SAAU,IAEZC,IAAK,CACHF,OAAQ,GACRC,SAAU,IAEZE,GAAI,CACFH,OAAQ,GACRC,SAAU,IAEZG,EAAG,CACDJ,OAAQ,GACRC,SAAU,IAEZI,EAAG,CACDL,OAAQ,GACRC,SAAU,IAEZK,EAAG,CACDN,OAAQ,GACRC,SAAU,IAEZM,GAAI,CACFP,OAAQ,GACRC,SAAU,IAEZO,IAAK,CACHR,OAAQ,GACRC,SAAU,IAEZQ,KAAM,CACJT,OAAQ,GACRC,SAAU"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as r from'react';var t;function e(){return e=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var a in e)({}).hasOwnProperty.call(e,a)&&(r[a]=e[a])}return r},e.apply(this,arguments)}var a=a=>r.createElement("svg",e({viewBox:"0 0 20 40",xmlns:"http://www.w3.org/2000/svg"},a),t||(t=r.createElement("path",{d:"M0 20 18 0h2v40h-2z",fill:"currentColor"})));export{a as default};
|
|
2
|
+
//# sourceMappingURL=arrow.module.svg.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"arrow.module.svg.js","sources":["../../../../../src/components/ArrowBadge/images/arrow.module.svg"],"sourcesContent":["<svg viewBox=\"0 0 20 40\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 20 18 0h2v40h-2z\" fill=\"currentColor\"/></svg>"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgArrowmodule","props","React","createElement","viewBox","xmlns","d","fill"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAcN,IAAiBQ,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAAyCC,GACvBC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,QAAS,YACTC,MAAO,8BACNJ,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEG,EAAG,sBACHC,KAAM"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as r from'react';var t;function e(){return e=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var a in e)({}).hasOwnProperty.call(e,a)&&(r[a]=e[a])}return r},e.apply(this,arguments)}var a=a=>r.createElement("svg",e({viewBox:"0 0 28 40",xmlns:"http://www.w3.org/2000/svg"},a),t||(t=r.createElement("path",{d:"M2 0h26v40H2l18-20z",fill:"currentColor"})));export{a as default};
|
|
2
|
+
//# sourceMappingURL=fancy.module.svg.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fancy.module.svg.js","sources":["../../../../../src/components/ArrowBadge/images/fancy.module.svg"],"sourcesContent":["<svg viewBox=\"0 0 28 40\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 0h26v40H2l18-20z\" fill=\"currentColor\"/></svg>"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgFancymodule","props","React","createElement","viewBox","xmlns","d","fill"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAcN,IAAiBQ,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAAyCC,GACvBC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,QAAS,YACTC,MAAO,8BACNJ,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEG,EAAG,sBACHC,KAAM"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as r from'react';var t;function e(){return e=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var a in e)({}).hasOwnProperty.call(e,a)&&(r[a]=e[a])}return r},e.apply(this,arguments)}var a=a=>r.createElement("svg",e({viewBox:"0 0 20 40",xmlns:"http://www.w3.org/2000/svg"},a),t||(t=r.createElement("path",{d:"M0 0h20v40H0z",fill:"currentColor"})));export{a as default};
|
|
2
|
+
//# sourceMappingURL=rectangle.module.svg.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rectangle.module.svg.js","sources":["../../../../../src/components/ArrowBadge/images/rectangle.module.svg"],"sourcesContent":["<svg viewBox=\"0 0 20 40\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h20v40H0z\" fill=\"currentColor\"/></svg>"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgRectanglemodule","props","React","createElement","viewBox","xmlns","d","fill"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAcN,IAAiBQ,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAAiDC,GAC/BC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,QAAS,YACTC,MAAO,8BACNJ,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEG,EAAG,gBACHC,KAAM"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import o,{css as r}from'styled-components';import{responsiveSize as n}from'../../mixins/size.js';import{responsiveMargin as a}from'../../mixins/margin.js';import{createShouldForwardProp as c}from'../../shared/utils/style.js';import{getColor as t}from'../../mixins/color.js';import{focus as e}from'../../mixins/focus.js';import i from'./images/arrow.module.svg.js';import s from'./images/rectangle.module.svg.js';import m from'./images/fancy.module.svg.js';var l=c();var d=o.div.withConfig({componentId:"fox-ui__sc-gzccd8-0"})(["flex-shrink:0;display:flex;align-items:center;padding:0 1px;margin:0 -1px;"]);var g=o.svg.withConfig({shouldForwardProp:()=>!1}).attrs((o=>{var r=s;return o.fancy&&(r=m),(o.right&&o.after||o.left&&!o.after)&&(r=i),{as:r}})).withConfig({componentId:"fox-ui__sc-gzccd8-1"})(["flex-shrink:0;height:100%;",""],(o=>o.after&&'transform: rotate(180deg);'));var f=o=>"\n & > ".concat(d," {\n color: ").concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n }\n & > ").concat(g," {\n color: ").concat(o.backgroundColor,";\n }\n");var u={primary:r(["",""],(o=>f({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-200']}))),secondary:r(["",""],(o=>f({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-200']}))),tertiary:r(["",""],(o=>f({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-tertiary-200']}))),quaternary:r(["",""],(o=>f({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-quaternary-200']})))};var p=o.div.withConfig({shouldForwardProp:l}).attrs({dynamicSizeDeclaration:function(o,r,n){return{height:'1.8em',fontSize:"".concat(arguments.length<=0?void 0:o).concat(arguments.length<=2?void 0:n)}}}).withConfig({componentId:"fox-ui__sc-gzccd8-2"})(["box-sizing:border-box;display:inline-flex;width:max-content;flex-shrink:0;"," "," "," "," "," "," ",""],(o=>o.quaternary?u.quaternary:o.tertiary?u.tertiary:o.secondary?u.secondary:u.primary),e,n,a,(o=>o.cursor&&"cursor: ".concat(o.cursor,";")),(o=>o.color&&"& > ".concat(d," {\n color: ").concat(t(o.color,o),";\n }")),(o=>o.backgroundColor&&"& > ".concat(d," {\n background-color: ").concat(t(o.backgroundColor,o),";\n }\n & > ").concat(g," {\n color: ").concat(t(o.backgroundColor,o),";\n }")));export{d as Content,g as Edge,p as Root};
|
|
2
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/ArrowBadge/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { responsiveSize } from 'mixins/size'\nimport { responsiveMargin } from 'mixins/margin'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { DynamicSizeDeclaration } from 'shared/interfaces'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport type { StyledArrowBadgeProps, StyledArrowBadgeEdgeProps, StyledArrowBadgeTemplatePalette } from './types'\nimport Arrow from './images/arrow.module.svg'\nimport Rectangle from './images/rectangle.module.svg'\nimport Fancy from './images/fancy.module.svg'\n\nconst shouldForwardArrowBadgeProp = createShouldForwardProp()\n\nexport const Content = styled.div`\n flex-shrink: 0;\n display: flex;\n align-items: center;\n padding: 0 1px;\n margin: 0 -1px;\n`\n\nexport const Edge = styled.svg\n .withConfig({ shouldForwardProp: () => false })\n .attrs((props: StyledArrowBadgeEdgeProps) => {\n let Shape = Rectangle\n\n if (props.fancy) Shape = Fancy\n if ((props.right && props.after) || (props.left && !props.after)) Shape = Arrow\n\n return { as: Shape }\n })<StyledArrowBadgeEdgeProps>`\n flex-shrink: 0;\n height: 100%;\n ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: StyledArrowBadgeTemplatePalette) => `\n & > ${Content} {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n }\n & > ${Edge} {\n color: ${palette.backgroundColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n primary: css<StyledArrowBadgeEdgeProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-200'],\n })}\n `,\n secondary: css<StyledArrowBadgeEdgeProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-secondary-200'],\n })}\n `,\n tertiary: css`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-tertiary-200'],\n })}\n `,\n quaternary: css`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-quaternary-200'],\n })}\n `,\n}\n\nconst colorSchema = (props: ThemedStyledProps<StyledArrowBadgeProps, DefaultTheme>) => {\n if (props.quaternary) return COLOR_SCHEMA.quaternary\n if (props.tertiary) return COLOR_SCHEMA.tertiary\n if (props.secondary) return COLOR_SCHEMA.secondary\n\n return COLOR_SCHEMA.primary\n}\n\nexport const Root = styled.div\n .withConfig<StyledArrowBadgeProps>({\n shouldForwardProp: shouldForwardArrowBadgeProp,\n })\n .attrs({\n dynamicSizeDeclaration: (...args: Parameters<DynamicSizeDeclaration>) => {\n return {\n height: '1.8em',\n fontSize: `${args[0]}${args[2]}`,\n }\n },\n })`\n box-sizing: border-box;\n display: inline-flex;\n width: max-content;\n flex-shrink: 0;\n\n ${colorSchema}\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => props.cursor && `cursor: ${props.cursor};`}\n ${(props) =>\n props.color &&\n `& > ${Content} {\n color: ${getColor(props.color, props)};\n }`}\n ${(props) =>\n props.backgroundColor &&\n `& > ${Content} {\n background-color: ${getColor(props.backgroundColor, props)};\n }\n & > ${Edge} {\n color: ${getColor(props.backgroundColor, props)};\n }`}\n`\n"],"names":["shouldForwardArrowBadgeProp","createShouldForwardProp","Content","styled","div","withConfig","componentId","Edge","svg","shouldForwardProp","attrs","props","Shape","Rectangle","fancy","Fancy","right","after","left","Arrow","as","template","palette","concat","color","backgroundColor","COLOR_SCHEMA","primary","css","theme","colors","secondary","tertiary","quaternary","Root","dynamicSizeDeclaration","o","r","n","height","fontSize","arguments","length","undefined","focus","responsiveSize","responsiveMargin","cursor","getColor"],"mappings":"wcAaA,IAAMA,EAA8BC,IAEvBC,IAAAA,EAAUC,EAAOC,IAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAhB,CAAA,+EAQA,IAAMI,EAAOJ,EAAOK,IACxBH,WAAW,CAAEI,kBAAmB,SAChCC,OAAOC,IACN,IAAIC,EAAQC,EAKZ,OAHIF,EAAMG,QAAOF,EAAQG,IACpBJ,EAAMK,OAASL,EAAMM,OAAWN,EAAMO,OAASP,EAAMM,SAAQL,EAAQO,GAEnE,CAAEC,GAAIR,MARAP,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,6BAAA,KAYZQ,GAAUA,EAAMM,OAAS,+BAG9B,IAAMI,EAAYC,qBACVpB,EADS,mBAAAqB,OAEJD,EAAQE,0CACGF,EAAQG,gBAExBlB,kBAAAA,OAAAA,4BACKe,EAAQG,gBANrB,YAUA,IAAMC,EAAe,CACnBC,QAASC,EAAF,CAAA,GAAA,KACFjB,GACDU,EAAS,CACPG,MAAOb,EAAMkB,MAAMC,OAAO,0BAC1BL,gBAAiBd,EAAMkB,MAAMC,OAAO,4BAG1CC,UAAWH,EAAF,CAAA,GAAA,KACJjB,GACDU,EAAS,CACPG,MAAOb,EAAMkB,MAAMC,OAAO,0BAC1BL,gBAAiBd,EAAMkB,MAAMC,OAAO,8BAG1CE,SAAUJ,EAAF,CAAA,GAAA,KACHjB,GACDU,EAAS,CACPG,MAAOb,EAAMkB,MAAMC,OAAO,0BAC1BL,gBAAiBd,EAAMkB,MAAMC,OAAO,6BAG1CG,WAAYL,EAAF,CAAA,GAAA,KACLjB,GACDU,EAAS,CACPG,MAAOb,EAAMkB,MAAMC,OAAO,0BAC1BL,gBAAiBd,EAAMkB,MAAMC,OAAO,gCAarC,IAAMI,EAAO/B,EAAOC,IACxBC,WAAkC,CACjCI,kBAAmBT,IAEpBU,MAAM,CACLyB,uBAAwB,SAAAC,EAAAC,EAAAC,GACtB,MAAO,CACLC,OAAQ,QACRC,SAAQ,GAAAjB,OAAAkB,UAAAC,QAAA,OAAA,EAHYN,GAGZb,OAAAkB,UAAAC,QAAA,OAAAC,EAHYL,OALXjC,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,6EAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KARIQ,GACfA,EAAMsB,WAAmBP,EAAaO,WACtCtB,EAAMqB,SAAiBN,EAAaM,SACpCrB,EAAMoB,UAAkBL,EAAaK,UAElCL,EAAaC,SAqBlBiB,EACAC,EACAC,GAECnC,GAAUA,EAAMoC,QAAqBpC,WAAAA,OAAAA,EAAMoC,OAtB/B,OAuBZpC,GACDA,EAAMa,OAAN,OAAAD,OACOrB,EADP,sBAAAqB,OAEYyB,EAASrC,EAAMa,MAAOb,GAFlC,eAICA,GACDA,EAAMc,iBACCvB,OAAAA,OAAAA,EACgB8C,iCAAAA,OAAAA,EAASrC,EAAMc,gBAAiBd,GAEhDJ,wBAAAA,OAAAA,+BACKyC,EAASrC,EAAMc,gBAAiBd"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o,{css as n,keyframes as r}from'styled-components';import e from'tinycolor2';import{property as t,responsiveNamedProperty as a}from'../../mixins/responsive-property.js';import{color as c}from'../../mixins/color.js';import{responsiveSizing as i}from'../../mixins/sizing.js';import{injectDefaultTheme as s}from'../../shared/utils/inject-theme.js';import{FORWARD_PROPS as d}from'./constants.js';import l from'./images/check.module.svg.js';import g from'./images/spinner.module.svg.js';var m={xl:320,l:280,m:245,s:180,xs:140};var p=n(["",""],(o=>"\n display: ".concat(o.display,";\n font-weight: ").concat(o.fontWeight,";\n border-radius: ").concat(o.borderRadius,";\n line-height: ").concat(o.lineHeight,";\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n border: none;\n text-decoration: none;\n appearance: none;\n white-space: nowrap;\n text-align: center;\n vertical-align: top;\n transition-property: color, background-color, box-shadow;\n &::before,\n &::after {\n transition-property: opacity;\n }\n &,\n &::before,\n &::after {\n transition-duration: 200ms;\n }\n & + & {\n margin-left: ").concat(o.noSpacing?'auto':'1em',";\n }\n ")));var h=r(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var b=r(["100%{transform:rotate(360deg);}"]);var u=n(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],h);var f=o=>'auto'===o?'auto':'number'==typeof o||'boolean'==typeof o?o:o&&m[o]?m[o]:'auto';var v=()=>n(["min-width:initial;width:100%;"]);var y="\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n";var L={filled:{default:n(["",""],(o=>{var n=o.theme.colors['bg-brand-primary-basic'];o.black&&(n=o.theme.colors['bg-onmain-contrast']),o.danger&&(n=o.theme.colors['alert-bg-error-500']),o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-oncolor-primary'];o.disabled&&(r=o.theme.colors['content-disabled']);var e=o.theme.colors['bg-oncolor-hover'];return o.black&&!o.danger&&(e=o.theme.colors['bg-oncontrast-hover']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(e,";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['bg-oncolor-primary'];o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-constant'];return o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},outline:{default:n(["",""],(o=>{var n='transparent';!o.loading||o.success||o.black||o.danger||(n=o.theme.colors['bg-brand-primary-basic']),o.loading&&!o.success&&o.black&&(n=o.theme.colors['bg-onmain-contrast']),o.loading&&!o.success&&o.danger&&(n=o.theme.colors['alert-bg-error-500']),o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-brand-primary'];o.black&&(r=o.theme.colors['content-oncolor-inverse']),o.danger&&(r=o.theme.colors['alert-error']),(o.success||o.loading)&&(r=o.theme.colors['content-oncolor-primary']),o.disabled&&(r=o.theme.colors['content-disabled']);var e=o.theme.colors['border-brand-primary'];o.black&&(e=o.theme.colors['border-onmain-contrast']),o.danger&&(e=o.theme.colors['alert-bg-error-500']),o.loading&&!o.success&&(e='transparent'),o.success&&(e=o.theme.colors['alert-bg-success-500']),o.disabled&&(e=o.theme.colors['bg-disabled-large']);var t=o.theme.colors['bg-brand-primary-basic'];o.black&&(t=o.theme.colors['bg-onmain-contrast']),o.danger&&(t=o.theme.colors['alert-bg-error-500']);var a=o.theme.colors['bg-oncolor-hover'];return o.black&&!o.danger&&(a=o.theme.colors['bg-oncontrast-hover']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n box-shadow: inset 0 0 0 1px ").concat(e,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(t,";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n background-color: ").concat(a,";\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover {\n color: ".concat(o.theme.colors['content-oncolor-primary'],";\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")})),onColored:n(["",""],(o=>{var n='transparent';(o.success||o.loading)&&(n=o.theme.colors['bg-oncolor-primary']),o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-primary'];o.loading&&!o.success&&(r=o.theme.colors['content-oncolor-constant']),o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']);var e=o.theme.colors['border-oncolor-default'];return o.disabled&&(e='transparent'),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n box-shadow: inset 0 0 0 1px ").concat(e,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-primary'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover {\n color: ".concat(o.theme.colors['content-oncolor-constant'],";\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")}))},base:{default:n(["",""],(o=>{var n=o.theme.colors['bg-onmain-tertiary'];o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-brand-primary'];return o.black&&(r=o.theme.colors['content-oncolor-inverse']),o.danger&&(r=o.theme.colors['alert-error']),o.success&&(r=o.theme.colors['content-oncolor-primary']),o.disabled&&(r=o.theme.colors['content-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['bg-oncolor-secondary'];o.success&&(n=o.theme.colors['bg-oncolor-primary']),o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-primary'];return o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},clear:{default:n(["",""],(o=>{var n=o.theme.colors['content-brand-primary'];return o.black&&(n=o.theme.colors['content-oncolor-inverse']),o.danger&&(n=o.theme.colors['alert-error']),o.success&&(n=o.theme.colors['alert-success']),o.disabled&&(n=o.theme.colors['content-disabled']),"\n background-color: transparent;\n color: ".concat(n,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['content-oncolor-primary'];return o.disabled&&(n=o.theme.colors['content-oncolor-disabled']),"\n background-color: transparent;\n color: ".concat(n,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncontrast-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncontrast-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))}};var S={default:n([""," "," "," "," "," ",""],(o=>o.disabled||o.loading?'':"\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n color: ".concat(o.fontColor,";\n background-color: ").concat(e(o.theme.colors[o.color]).saturate(-5).lighten(-8).toString(),";\n }\n ").concat(o.inverted||o.basic||o.outline?"\n &:not(:hover) {\n border: 1px solid ".concat(o.theme.colors[o.color],";\n }\n &:hover {\n border: 1px solid ").concat(o.theme.colors[o.color],";\n }\n "):'',"\n ")),(o=>o.loading?u:''),(o=>{var n='background-color';return(o.inverted||o.basic||o.outline)&&(n='color'),c(o.color,n)}),(o=>{var n='color';return(o.inverted||o.basic||o.outline)&&(n='background-color'),c(o.fontColor,n)}),(o=>o.disabled?"\n cursor: not-allowed;\n background-color: ".concat(o.theme.colors.mercury,";\n color: ").concat(o.theme.colors.silver,";\n "):''),(o=>o.basic||o.outline?'background-color: transparent;':''))};var x=o.button.withConfig({shouldForwardProp:o=>d.includes(o)||o.includes('data')}).attrs(s).withConfig({componentId:"fox-ui__sc-16o31r2-0"})([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],p,(o=>o.brandPresetUsed?!o.clear||o.base||o.outline||o.onColored?o.clear&&!o.base&&!o.outline&&o.onColored?L.clear.onColored:!o.base||o.clear||o.outline||o.onColored?o.base&&!o.clear&&!o.outline&&o.onColored?L.base.onColored:!o.outline||o.clear||o.base||o.onColored?o.outline&&!o.clear&&!o.base&&o.onColored?L.outline.onColored:o.onColored?L.filled.onColored:L.filled.default:L.outline.default:L.base.default:L.clear.default:S.default),i,(o=>o.padding?t(o.padding,'padding'):null),(o=>o.paddingTop?t(o.paddingTop,'padding-top'):null),(o=>o.paddingRight?t(o.paddingRight,'padding-right'):null),(o=>o.paddingBottom?t(o.paddingBottom,'padding-bottom'):null),(o=>o.paddingLeft?t(o.paddingLeft,'padding-left'):null),(o=>o.margin?t(o.margin,'margin'):null),(o=>o.marginTop?t(o.marginTop,'margin-top'):null),(o=>o.marginRight?t(o.marginRight,'margin-right'):null),(o=>o.marginBottom?t(o.marginBottom,'margin-bottom'):null),(o=>o.marginLeft?t(o.marginLeft,'margin-left'):null),(o=>o.fontSize?t(o.fontSize,'font-size'):null),(o=>o.height?t(o.height,'height'):null),(o=>{var n=o.fluid&&'auto'!==o.width?'max-width':'width';return o.width?t(f(o.width),n):null}),(o=>{var{paddingXS:n,paddingS:r,paddingM:e,paddingL:t,paddingXL:c}=o;return a({sizes:{paddingXS:n,paddingS:r,paddingM:e,paddingL:t,paddingXL:c},cssProperty:'padding'})}),(o=>{var{paddingTopXS:n,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:c}=o;return a({sizes:{paddingTopXS:n,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:c},cssProperty:'padding-top'})}),(o=>{var{paddingRightXS:n,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:c}=o;return a({sizes:{paddingRightXS:n,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:c},cssProperty:'padding-right'})}),(o=>{var{paddingBottomXS:n,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:c}=o;return a({sizes:{paddingBottomXS:n,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:c},cssProperty:'padding-bottom'})}),(o=>{var{paddingLeftXS:n,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:c}=o;return a({sizes:{paddingLeftXS:n,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:c},cssProperty:'padding-left'})}),(o=>{var{marginXS:n,marginS:r,marginM:e,marginL:t,marginXL:c}=o;return a({sizes:{marginXS:n,marginS:r,marginM:e,marginL:t,marginXL:c},cssProperty:'margin'})}),(o=>{var{marginTopXS:n,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:c}=o;return a({sizes:{marginTopXS:n,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:c},cssProperty:'margin-top'})}),(o=>{var{marginRightXS:n,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:c}=o;return a({sizes:{marginRightXS:n,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:c},cssProperty:'margin-right'})}),(o=>{var{marginBottomXS:n,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:c}=o;return a({sizes:{marginBottomXS:n,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:c},cssProperty:'margin-bottom'})}),(o=>{var{marginLeftXS:n,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:c}=o;return a({sizes:{marginLeftXS:n,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:c},cssProperty:'margin-left'})}),(o=>{var{fontSizeXS:n,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:c}=o;return a({sizes:{fontSizeXS:n,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:c},cssProperty:'font-size'})}),(o=>{var{heightXS:n,heightS:r,heightM:e,heightL:t,heightXL:c}=o;return a({sizes:{heightXS:n,heightS:r,heightM:e,heightL:t,heightXL:c},cssProperty:'height'})}),(o=>{var{widthXS:n,widthS:r,widthM:e,widthL:t,widthXL:c,fluid:i,width:s}=o;return a({sizes:{widthXS:n,widthS:r,widthM:e,widthL:t,widthXL:c},cssProperty:i&&'auto'!==s?'max-width':'width',customSizeHandler:f})}),(o=>o.fluid?t(o.fluid,v):null),(o=>{var{fluidXS:n,fluidS:r,fluidM:e,fluidL:t,fluidXL:c}=o;return a({sizes:{fluidXS:n,fluidS:r,fluidM:e,fluidL:t,fluidXL:c},cssProperty:v})}));var X=o.span.withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["",""],(o=>"\n position: relative;\n z-index: 1;\n display: flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n margin-left: ".concat(o.marginLeft?'0.4em':0,";\n margin-right: ").concat(o.marginRight?'0.4em':0,";\n ")));var w=o.span.withConfig({componentId:"fox-ui__sc-16o31r2-2"})(["position:relative;z-index:1;"]);var k=o(g).withConfig({componentId:"fox-ui__sc-16o31r2-3"})(["width:100%;animation:"," 2000ms linear infinite;",""],b,(o=>"\n > path {\n stroke-width: ".concat(o.strokeWidth,";\n }\n ")));var z=o(l).withConfig({componentId:"fox-ui__sc-16o31r2-4"})(["width:100%;",""],(o=>"\n > path {\n stroke-width: ".concat(o.strokeWidth,";\n }\n ")));export{z as CheckIcon,w as Content,X as IconSlot,x as Root,k as SpinnerIcon};
|
|
1
|
+
import o,{css as n,keyframes as r}from'styled-components';import e from'tinycolor2';import{property as t,responsiveNamedProperty as a}from'../../mixins/responsive-property.js';import{color as c}from'../../mixins/color.js';import{responsiveSize as i}from'../../mixins/size.js';import{injectDefaultTheme as s}from'../../shared/utils/inject-theme.js';import{FORWARD_PROPS as d}from'./constants.js';import l from'./images/check.module.svg.js';import g from'./images/spinner.module.svg.js';var m={xl:320,l:280,m:245,s:180,xs:140};var p=n(["",""],(o=>"\n display: ".concat(o.display,";\n font-weight: ").concat(o.fontWeight,";\n border-radius: ").concat(o.borderRadius,";\n line-height: ").concat(o.lineHeight,";\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n border: none;\n text-decoration: none;\n appearance: none;\n white-space: nowrap;\n text-align: center;\n vertical-align: top;\n transition-property: color, background-color, box-shadow;\n &::before,\n &::after {\n transition-property: opacity;\n }\n &,\n &::before,\n &::after {\n transition-duration: 200ms;\n }\n & + & {\n margin-left: ").concat(o.noSpacing?'auto':'1em',";\n }\n ")));var h=r(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var b=r(["100%{transform:rotate(360deg);}"]);var u=n(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],h);var f=o=>'auto'===o?'auto':'number'==typeof o||'boolean'==typeof o?o:o&&m[o]?m[o]:'auto';var v=()=>n(["min-width:initial;width:100%;"]);var y="\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n";var L={filled:{default:n(["",""],(o=>{var n=o.theme.colors['bg-brand-primary-basic'];o.black&&(n=o.theme.colors['bg-onmain-contrast']),o.danger&&(n=o.theme.colors['alert-bg-error-500']),o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-oncolor-primary'];o.disabled&&(r=o.theme.colors['content-disabled']);var e=o.theme.colors['bg-oncolor-hover'];return o.black&&!o.danger&&(e=o.theme.colors['bg-oncontrast-hover']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(e,";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['bg-oncolor-primary'];o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-constant'];return o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},outline:{default:n(["",""],(o=>{var n='transparent';!o.loading||o.success||o.black||o.danger||(n=o.theme.colors['bg-brand-primary-basic']),o.loading&&!o.success&&o.black&&(n=o.theme.colors['bg-onmain-contrast']),o.loading&&!o.success&&o.danger&&(n=o.theme.colors['alert-bg-error-500']),o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-brand-primary'];o.black&&(r=o.theme.colors['content-oncolor-inverse']),o.danger&&(r=o.theme.colors['alert-error']),(o.success||o.loading)&&(r=o.theme.colors['content-oncolor-primary']),o.disabled&&(r=o.theme.colors['content-disabled']);var e=o.theme.colors['border-brand-primary'];o.black&&(e=o.theme.colors['border-onmain-contrast']),o.danger&&(e=o.theme.colors['alert-bg-error-500']),o.loading&&!o.success&&(e='transparent'),o.success&&(e=o.theme.colors['alert-bg-success-500']),o.disabled&&(e=o.theme.colors['bg-disabled-large']);var t=o.theme.colors['bg-brand-primary-basic'];o.black&&(t=o.theme.colors['bg-onmain-contrast']),o.danger&&(t=o.theme.colors['alert-bg-error-500']);var a=o.theme.colors['bg-oncolor-hover'];return o.black&&!o.danger&&(a=o.theme.colors['bg-oncontrast-hover']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n box-shadow: inset 0 0 0 1px ").concat(e,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(t,";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n background-color: ").concat(a,";\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover {\n color: ".concat(o.theme.colors['content-oncolor-primary'],";\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")})),onColored:n(["",""],(o=>{var n='transparent';(o.success||o.loading)&&(n=o.theme.colors['bg-oncolor-primary']),o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-primary'];o.loading&&!o.success&&(r=o.theme.colors['content-oncolor-constant']),o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']);var e=o.theme.colors['border-oncolor-default'];return o.disabled&&(e='transparent'),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n box-shadow: inset 0 0 0 1px ").concat(e,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-primary'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover {\n color: ".concat(o.theme.colors['content-oncolor-constant'],";\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")}))},base:{default:n(["",""],(o=>{var n=o.theme.colors['bg-onmain-tertiary'];o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-brand-primary'];return o.black&&(r=o.theme.colors['content-oncolor-inverse']),o.danger&&(r=o.theme.colors['alert-error']),o.success&&(r=o.theme.colors['content-oncolor-primary']),o.disabled&&(r=o.theme.colors['content-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['bg-oncolor-secondary'];o.success&&(n=o.theme.colors['bg-oncolor-primary']),o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-primary'];return o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},clear:{default:n(["",""],(o=>{var n=o.theme.colors['content-brand-primary'];return o.black&&(n=o.theme.colors['content-oncolor-inverse']),o.danger&&(n=o.theme.colors['alert-error']),o.success&&(n=o.theme.colors['alert-success']),o.disabled&&(n=o.theme.colors['content-disabled']),"\n background-color: transparent;\n color: ".concat(n,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['content-oncolor-primary'];return o.disabled&&(n=o.theme.colors['content-oncolor-disabled']),"\n background-color: transparent;\n color: ".concat(n,";\n\n &::before {\n ").concat(y,"\n background-color: ").concat(o.theme.colors['bg-oncontrast-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(y,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncontrast-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))}};var S={default:n([""," "," "," "," "," ",""],(o=>o.disabled||o.loading?'':"\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n color: ".concat(o.fontColor,";\n background-color: ").concat(e(o.theme.colors[o.color]).saturate(-5).lighten(-8).toString(),";\n }\n ").concat(o.inverted||o.basic||o.outline?"\n &:not(:hover) {\n border: 1px solid ".concat(o.theme.colors[o.color],";\n }\n &:hover {\n border: 1px solid ").concat(o.theme.colors[o.color],";\n }\n "):'',"\n ")),(o=>o.loading?u:''),(o=>{var n='background-color';return(o.inverted||o.basic||o.outline)&&(n='color'),c(o.color,n)}),(o=>{var n='color';return(o.inverted||o.basic||o.outline)&&(n='background-color'),c(o.fontColor,n)}),(o=>o.disabled?"\n cursor: not-allowed;\n background-color: ".concat(o.theme.colors.mercury,";\n color: ").concat(o.theme.colors.silver,";\n "):''),(o=>o.basic||o.outline?'background-color: transparent;':''))};var x=o.button.withConfig({shouldForwardProp:o=>d.includes(o)||o.includes('data')}).attrs(s).withConfig({componentId:"fox-ui__sc-16o31r2-0"})([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],p,(o=>o.brandPresetUsed?!o.clear||o.base||o.outline||o.onColored?o.clear&&!o.base&&!o.outline&&o.onColored?L.clear.onColored:!o.base||o.clear||o.outline||o.onColored?o.base&&!o.clear&&!o.outline&&o.onColored?L.base.onColored:!o.outline||o.clear||o.base||o.onColored?o.outline&&!o.clear&&!o.base&&o.onColored?L.outline.onColored:o.onColored?L.filled.onColored:L.filled.default:L.outline.default:L.base.default:L.clear.default:S.default),i,(o=>o.padding?t(o.padding,'padding'):null),(o=>o.paddingTop?t(o.paddingTop,'padding-top'):null),(o=>o.paddingRight?t(o.paddingRight,'padding-right'):null),(o=>o.paddingBottom?t(o.paddingBottom,'padding-bottom'):null),(o=>o.paddingLeft?t(o.paddingLeft,'padding-left'):null),(o=>o.margin?t(o.margin,'margin'):null),(o=>o.marginTop?t(o.marginTop,'margin-top'):null),(o=>o.marginRight?t(o.marginRight,'margin-right'):null),(o=>o.marginBottom?t(o.marginBottom,'margin-bottom'):null),(o=>o.marginLeft?t(o.marginLeft,'margin-left'):null),(o=>o.fontSize?t(o.fontSize,'font-size'):null),(o=>o.height?t(o.height,'height'):null),(o=>{var n=o.fluid&&'auto'!==o.width?'max-width':'width';return o.width?t(f(o.width),n):null}),(o=>{var{paddingXS:n,paddingS:r,paddingM:e,paddingL:t,paddingXL:c}=o;return a({sizes:{paddingXS:n,paddingS:r,paddingM:e,paddingL:t,paddingXL:c},cssProperty:'padding'})}),(o=>{var{paddingTopXS:n,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:c}=o;return a({sizes:{paddingTopXS:n,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:c},cssProperty:'padding-top'})}),(o=>{var{paddingRightXS:n,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:c}=o;return a({sizes:{paddingRightXS:n,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:c},cssProperty:'padding-right'})}),(o=>{var{paddingBottomXS:n,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:c}=o;return a({sizes:{paddingBottomXS:n,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:c},cssProperty:'padding-bottom'})}),(o=>{var{paddingLeftXS:n,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:c}=o;return a({sizes:{paddingLeftXS:n,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:c},cssProperty:'padding-left'})}),(o=>{var{marginXS:n,marginS:r,marginM:e,marginL:t,marginXL:c}=o;return a({sizes:{marginXS:n,marginS:r,marginM:e,marginL:t,marginXL:c},cssProperty:'margin'})}),(o=>{var{marginTopXS:n,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:c}=o;return a({sizes:{marginTopXS:n,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:c},cssProperty:'margin-top'})}),(o=>{var{marginRightXS:n,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:c}=o;return a({sizes:{marginRightXS:n,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:c},cssProperty:'margin-right'})}),(o=>{var{marginBottomXS:n,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:c}=o;return a({sizes:{marginBottomXS:n,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:c},cssProperty:'margin-bottom'})}),(o=>{var{marginLeftXS:n,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:c}=o;return a({sizes:{marginLeftXS:n,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:c},cssProperty:'margin-left'})}),(o=>{var{fontSizeXS:n,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:c}=o;return a({sizes:{fontSizeXS:n,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:c},cssProperty:'font-size'})}),(o=>{var{heightXS:n,heightS:r,heightM:e,heightL:t,heightXL:c}=o;return a({sizes:{heightXS:n,heightS:r,heightM:e,heightL:t,heightXL:c},cssProperty:'height'})}),(o=>{var{widthXS:n,widthS:r,widthM:e,widthL:t,widthXL:c,fluid:i,width:s}=o;return a({sizes:{widthXS:n,widthS:r,widthM:e,widthL:t,widthXL:c},cssProperty:i&&'auto'!==s?'max-width':'width',customSizeHandler:f})}),(o=>o.fluid?t(o.fluid,v):null),(o=>{var{fluidXS:n,fluidS:r,fluidM:e,fluidL:t,fluidXL:c}=o;return a({sizes:{fluidXS:n,fluidS:r,fluidM:e,fluidL:t,fluidXL:c},cssProperty:v})}));var X=o.span.withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["",""],(o=>"\n position: relative;\n z-index: 1;\n display: flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n margin-left: ".concat(o.marginLeft?'0.4em':0,";\n margin-right: ").concat(o.marginRight?'0.4em':0,";\n ")));var w=o.span.withConfig({componentId:"fox-ui__sc-16o31r2-2"})(["position:relative;z-index:1;"]);var k=o(g).withConfig({componentId:"fox-ui__sc-16o31r2-3"})(["width:100%;animation:"," 2000ms linear infinite;",""],b,(o=>"\n > path {\n stroke-width: ".concat(o.strokeWidth,";\n }\n ")));var z=o(l).withConfig({componentId:"fox-ui__sc-16o31r2-4"})(["width:100%;",""],(o=>"\n > path {\n stroke-width: ".concat(o.strokeWidth,";\n }\n ")));export{z as CheckIcon,w as Content,X as IconSlot,x as Root,k as SpinnerIcon};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport type { DefaultTheme, ThemedStyledProps } from 'styled-components'\nimport { CalcProperty, property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { color as colorFn, ColorValue } from 'mixins/color'\nimport type { PossibleValues } from 'mixins/responsive-property'\nimport { responsiveSizing } from 'mixins/sizing'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { FORWARD_PROPS } from './constants'\nimport Check from './images/check.module.svg'\nimport Spinner from './images/spinner.module.svg'\nimport type { StyledButtonProps } from './types'\n\nconst WIDTHS: Record<string, number> = {\n xl: 320,\n l: 280,\n m: 245,\n s: 180,\n xs: 140,\n}\n\nconst baseStyles = css<StyledButtonProps>`\n ${(props) => `\n display: ${props.display};\n font-weight: ${props.fontWeight};\n border-radius: ${props.borderRadius};\n line-height: ${props.lineHeight};\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n border: none;\n text-decoration: none;\n appearance: none;\n white-space: nowrap;\n text-align: center;\n vertical-align: top;\n transition-property: color, background-color, box-shadow;\n &::before,\n &::after {\n transition-property: opacity;\n }\n &,\n &::before,\n &::after {\n transition-duration: 200ms;\n }\n & + & {\n margin-left: ${props.noSpacing ? 'auto' : '1em'};\n }\n `}\n`\n\nconst loading = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst spin = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`\n\nconst defaultLoadingStyles = css`\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n background-size: 25px 25px;\n animation: ${loading} 2s linear infinite;\n cursor: progress;\n`\n\nconst getWidth = (width: PossibleValues): PossibleValues => {\n if (width === 'auto') return 'auto'\n if (typeof width === 'number') return width\n if (typeof width === 'boolean') return width\n\n if (width && WIDTHS[width]) return WIDTHS[width]\n\n return 'auto'\n}\n\nconst fluidStyles: CalcProperty = () => css`\n min-width: initial;\n width: 100%;\n`\n\nconst pseudoBaseStyles = `\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n`\n\nconst PRESET = {\n filled: {\n default: css<StyledButtonProps>`\n ${(props) => {\n let background = props.theme.colors['bg-brand-primary-basic']\n if (props.black) background = props.theme.colors['bg-onmain-contrast']\n if (props.danger) background = props.theme.colors['alert-bg-error-500']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n let backgroundBefore = props.theme.colors['bg-oncolor-hover']\n if (props.black && !props.danger) backgroundBefore = props.theme.colors['bg-oncontrast-hover']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${backgroundBefore};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<StyledButtonProps>`\n ${(props) => {\n let background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-constant']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n outline: {\n default: css<StyledButtonProps>`\n ${(props) => {\n let background: ColorValue = 'transparent'\n if (props.loading && !props.success && !props.black && !props.danger)\n background = props.theme.colors['bg-brand-primary-basic']\n if (props.loading && !props.success && props.black) background = props.theme.colors['bg-onmain-contrast']\n if (props.loading && !props.success && props.danger) background = props.theme.colors['alert-bg-error-500']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success || props.loading) color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n let boxShadow: ColorValue = props.theme.colors['border-brand-primary']\n if (props.black) boxShadow = props.theme.colors['border-onmain-contrast']\n if (props.danger) boxShadow = props.theme.colors['alert-bg-error-500']\n if (props.loading && !props.success) boxShadow = 'transparent'\n if (props.success) boxShadow = props.theme.colors['alert-bg-success-500']\n if (props.disabled) boxShadow = props.theme.colors['bg-disabled-large']\n\n let backgroundBefore = props.theme.colors['bg-brand-primary-basic']\n if (props.black) backgroundBefore = props.theme.colors['bg-onmain-contrast']\n if (props.danger) backgroundBefore = props.theme.colors['alert-bg-error-500']\n\n let backgroundAfter = props.theme.colors['bg-oncolor-hover']\n if (props.black && !props.danger) backgroundAfter = props.theme.colors['bg-oncontrast-hover']\n\n return `\n background-color: ${background};\n color: ${color};\n box-shadow: inset 0 0 0 1px ${boxShadow};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${backgroundBefore};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n background-color: ${backgroundAfter};\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover {\n color: ${props.theme.colors['content-oncolor-primary']};\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<StyledButtonProps>`\n ${(props) => {\n let background: ColorValue = 'transparent'\n if (props.success || props.loading) background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.loading && !props.success) color = props.theme.colors['content-oncolor-constant']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n let boxShadow: ColorValue = props.theme.colors['border-oncolor-default']\n if (props.disabled) boxShadow = 'transparent'\n\n return `\n background-color: ${background};\n color: ${color};\n box-shadow: inset 0 0 0 1px ${boxShadow};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-primary']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover {\n color: ${props.theme.colors['content-oncolor-constant']};\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n base: {\n default: css<StyledButtonProps>`\n ${(props) => {\n let background = props.theme.colors['bg-onmain-tertiary']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success) color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<StyledButtonProps>`\n ${(props) => {\n let background = props.theme.colors['bg-oncolor-secondary']\n if (props.success) background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n clear: {\n default: css<StyledButtonProps>`\n ${(props) => {\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n return `\n background-color: transparent;\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<StyledButtonProps>`\n ${(props) => {\n let color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: transparent;\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncontrast-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncontrast-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<StyledButtonProps>`\n ${(props) => {\n if (props.disabled || props.loading) return ''\n\n return `\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n }\n ${\n props.inverted || props.basic || props.outline\n ? `\n &:not(:hover) {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n &:hover {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n `\n : ''\n }\n `\n }}\n\n ${(props) => (props.loading ? defaultLoadingStyles : '')}\n\n ${(props) => {\n let cssProperty = 'background-color'\n if (props.inverted || props.basic || props.outline) cssProperty = 'color'\n\n return colorFn(props.color, cssProperty)\n }}\n\n ${(props) => {\n let cssProperty = 'color'\n if (props.inverted || props.basic || props.outline) cssProperty = 'background-color'\n\n return colorFn(props.fontColor, cssProperty)\n }}\n\n ${(props) => {\n if (!props.disabled) return ''\n\n return `\n cursor: not-allowed;\n background-color: ${props.theme.colors.mercury};\n color: ${props.theme.colors.silver};\n `\n }}\n\n ${(props) => (props.basic || props.outline ? 'background-color: transparent;' : '')}\n `,\n}\n\nconst dynamicStyles = (props: ThemedStyledProps<StyledButtonProps, DefaultTheme>) => {\n if (props.brandPresetUsed) {\n if (props.clear && !props.base && !props.outline && !props.onColored) return PRESET.clear.default\n if (props.clear && !props.base && !props.outline && props.onColored) return PRESET.clear.onColored\n\n if (props.base && !props.clear && !props.outline && !props.onColored) return PRESET.base.default\n if (props.base && !props.clear && !props.outline && props.onColored) return PRESET.base.onColored\n\n if (props.outline && !props.clear && !props.base && !props.onColored) return PRESET.outline.default\n if (props.outline && !props.clear && !props.base && props.onColored) return PRESET.outline.onColored\n\n return props.onColored ? PRESET.filled.onColored : PRESET.filled.default\n }\n\n return PRESET_DEFAULT.default\n}\n\nexport const Root = styled.button\n .withConfig({\n shouldForwardProp: (prop) => {\n return FORWARD_PROPS.includes(prop) || prop.includes('data')\n },\n })\n .attrs<StyledButtonProps>(injectDefaultTheme)`\n ${baseStyles}\n ${dynamicStyles}\n ${responsiveSizing}\n\n ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n\n ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n\n ${(props) => {\n const cssProperty = props.fluid && props.width !== 'auto' ? 'max-width' : 'width'\n return props.width ? property(getWidth(props.width), cssProperty) : null\n }}\n\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL },\n cssProperty: 'padding',\n })\n }}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })\n }}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })\n }}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })\n }}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })\n }}\n\n ${({ marginXS, marginS, marginM, marginL, marginXL }) => {\n return responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })\n }}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) => {\n return responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })\n }}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) => {\n return responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })\n }}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) => {\n return responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })\n }}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) => {\n return responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })\n }}\n\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveNamedProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n\n ${({ heightXS, heightS, heightM, heightL, heightXL }) => {\n return responsiveNamedProperty({\n sizes: { heightXS, heightS, heightM, heightL, heightXL },\n cssProperty: 'height',\n })\n }}\n\n ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) => {\n return responsiveNamedProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: getWidth,\n })\n }}\n\n ${(props) => (props.fluid ? property(props.fluid, fluidStyles) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) => {\n return responsiveNamedProperty({\n sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL },\n cssProperty: fluidStyles,\n })\n }}\n`\n\nexport const IconSlot = styled.span<{\n children: React.ReactNode\n marginLeft?: boolean\n marginRight?: boolean\n}>`\n ${(props) => `\n position: relative;\n z-index: 1;\n display: flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n margin-left: ${props.marginLeft ? '0.4em' : 0};\n margin-right: ${props.marginRight ? '0.4em' : 0};\n `}\n`\n\nexport const Content = styled.span`\n position: relative;\n z-index: 1;\n`\n\nexport const SpinnerIcon = styled(Spinner)`\n width: 100%;\n animation: ${spin} 2000ms linear infinite;\n ${(props) => `\n > path {\n stroke-width: ${props.strokeWidth};\n }\n `}\n`\n\nexport const CheckIcon = styled(Check)`\n width: 100%;\n ${(props) => `\n > path {\n stroke-width: ${props.strokeWidth};\n }\n `}\n`\n"],"names":["WIDTHS","xl","l","m","s","xs","baseStyles","css","props","concat","display","fontWeight","borderRadius","lineHeight","noSpacing","loading","keyframes","spin","defaultLoadingStyles","getWidth","width","fluidStyles","pseudoBaseStyles","PRESET","filled","default","background","theme","colors","black","danger","success","disabled","color","backgroundBefore","onColored","outline","boxShadow","backgroundAfter","base","clear","PRESET_DEFAULT","fontColor","tiny","saturate","lighten","toString","inverted","basic","cssProperty","colorFn","mercury","silver","Root","styled","button","withConfig","shouldForwardProp","prop","FORWARD_PROPS","includes","attrs","injectDefaultTheme","componentId","brandPresetUsed","responsiveSizing","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","fontSize","height","fluid","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","_ref12","heightXS","heightS","heightM","heightL","heightXL","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL","IconSlot","span","Content","SpinnerIcon","Spinner","strokeWidth","CheckIcon","Check"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport type { DefaultTheme, ThemedStyledProps } from 'styled-components'\nimport { CalcProperty, property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { color as colorFn, ColorValue } from 'mixins/color'\nimport type { PossibleValues } from 'mixins/responsive-property'\nimport { responsiveSize } from 'mixins/size'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { FORWARD_PROPS } from './constants'\nimport Check from './images/check.module.svg'\nimport Spinner from './images/spinner.module.svg'\nimport type { StyledButtonProps } from './types'\n\nconst WIDTHS: Record<string, number> = {\n xl: 320,\n l: 280,\n m: 245,\n s: 180,\n xs: 140,\n}\n\nconst baseStyles = css<StyledButtonProps>`\n ${(props) => `\n display: ${props.display};\n font-weight: ${props.fontWeight};\n border-radius: ${props.borderRadius};\n line-height: ${props.lineHeight};\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n border: none;\n text-decoration: none;\n appearance: none;\n white-space: nowrap;\n text-align: center;\n vertical-align: top;\n transition-property: color, background-color, box-shadow;\n &::before,\n &::after {\n transition-property: opacity;\n }\n &,\n &::before,\n &::after {\n transition-duration: 200ms;\n }\n & + & {\n margin-left: ${props.noSpacing ? 'auto' : '1em'};\n }\n `}\n`\n\nconst loading = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst spin = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`\n\nconst defaultLoadingStyles = css`\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n background-size: 25px 25px;\n animation: ${loading} 2s linear infinite;\n cursor: progress;\n`\n\nconst getWidth = (width: PossibleValues): PossibleValues => {\n if (width === 'auto') return 'auto'\n if (typeof width === 'number') return width\n if (typeof width === 'boolean') return width\n\n if (width && WIDTHS[width]) return WIDTHS[width]\n\n return 'auto'\n}\n\nconst fluidStyles: CalcProperty = () => css`\n min-width: initial;\n width: 100%;\n`\n\nconst pseudoBaseStyles = `\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n`\n\nconst PRESET = {\n filled: {\n default: css<StyledButtonProps>`\n ${(props) => {\n let background = props.theme.colors['bg-brand-primary-basic']\n if (props.black) background = props.theme.colors['bg-onmain-contrast']\n if (props.danger) background = props.theme.colors['alert-bg-error-500']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n let backgroundBefore = props.theme.colors['bg-oncolor-hover']\n if (props.black && !props.danger) backgroundBefore = props.theme.colors['bg-oncontrast-hover']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${backgroundBefore};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<StyledButtonProps>`\n ${(props) => {\n let background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-constant']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n outline: {\n default: css<StyledButtonProps>`\n ${(props) => {\n let background: ColorValue = 'transparent'\n if (props.loading && !props.success && !props.black && !props.danger)\n background = props.theme.colors['bg-brand-primary-basic']\n if (props.loading && !props.success && props.black) background = props.theme.colors['bg-onmain-contrast']\n if (props.loading && !props.success && props.danger) background = props.theme.colors['alert-bg-error-500']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success || props.loading) color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n let boxShadow: ColorValue = props.theme.colors['border-brand-primary']\n if (props.black) boxShadow = props.theme.colors['border-onmain-contrast']\n if (props.danger) boxShadow = props.theme.colors['alert-bg-error-500']\n if (props.loading && !props.success) boxShadow = 'transparent'\n if (props.success) boxShadow = props.theme.colors['alert-bg-success-500']\n if (props.disabled) boxShadow = props.theme.colors['bg-disabled-large']\n\n let backgroundBefore = props.theme.colors['bg-brand-primary-basic']\n if (props.black) backgroundBefore = props.theme.colors['bg-onmain-contrast']\n if (props.danger) backgroundBefore = props.theme.colors['alert-bg-error-500']\n\n let backgroundAfter = props.theme.colors['bg-oncolor-hover']\n if (props.black && !props.danger) backgroundAfter = props.theme.colors['bg-oncontrast-hover']\n\n return `\n background-color: ${background};\n color: ${color};\n box-shadow: inset 0 0 0 1px ${boxShadow};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${backgroundBefore};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n background-color: ${backgroundAfter};\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover {\n color: ${props.theme.colors['content-oncolor-primary']};\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<StyledButtonProps>`\n ${(props) => {\n let background: ColorValue = 'transparent'\n if (props.success || props.loading) background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.loading && !props.success) color = props.theme.colors['content-oncolor-constant']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n let boxShadow: ColorValue = props.theme.colors['border-oncolor-default']\n if (props.disabled) boxShadow = 'transparent'\n\n return `\n background-color: ${background};\n color: ${color};\n box-shadow: inset 0 0 0 1px ${boxShadow};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-primary']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover {\n color: ${props.theme.colors['content-oncolor-constant']};\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n base: {\n default: css<StyledButtonProps>`\n ${(props) => {\n let background = props.theme.colors['bg-onmain-tertiary']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success) color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<StyledButtonProps>`\n ${(props) => {\n let background = props.theme.colors['bg-oncolor-secondary']\n if (props.success) background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n clear: {\n default: css<StyledButtonProps>`\n ${(props) => {\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n return `\n background-color: transparent;\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<StyledButtonProps>`\n ${(props) => {\n let color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: transparent;\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncontrast-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncontrast-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<StyledButtonProps>`\n ${(props) => {\n if (props.disabled || props.loading) return ''\n\n return `\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n }\n ${\n props.inverted || props.basic || props.outline\n ? `\n &:not(:hover) {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n &:hover {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n `\n : ''\n }\n `\n }}\n\n ${(props) => (props.loading ? defaultLoadingStyles : '')}\n\n ${(props) => {\n let cssProperty = 'background-color'\n if (props.inverted || props.basic || props.outline) cssProperty = 'color'\n\n return colorFn(props.color, cssProperty)\n }}\n\n ${(props) => {\n let cssProperty = 'color'\n if (props.inverted || props.basic || props.outline) cssProperty = 'background-color'\n\n return colorFn(props.fontColor, cssProperty)\n }}\n\n ${(props) => {\n if (!props.disabled) return ''\n\n return `\n cursor: not-allowed;\n background-color: ${props.theme.colors.mercury};\n color: ${props.theme.colors.silver};\n `\n }}\n\n ${(props) => (props.basic || props.outline ? 'background-color: transparent;' : '')}\n `,\n}\n\nconst dynamicStyles = (props: ThemedStyledProps<StyledButtonProps, DefaultTheme>) => {\n if (props.brandPresetUsed) {\n if (props.clear && !props.base && !props.outline && !props.onColored) return PRESET.clear.default\n if (props.clear && !props.base && !props.outline && props.onColored) return PRESET.clear.onColored\n\n if (props.base && !props.clear && !props.outline && !props.onColored) return PRESET.base.default\n if (props.base && !props.clear && !props.outline && props.onColored) return PRESET.base.onColored\n\n if (props.outline && !props.clear && !props.base && !props.onColored) return PRESET.outline.default\n if (props.outline && !props.clear && !props.base && props.onColored) return PRESET.outline.onColored\n\n return props.onColored ? PRESET.filled.onColored : PRESET.filled.default\n }\n\n return PRESET_DEFAULT.default\n}\n\nexport const Root = styled.button\n .withConfig({\n shouldForwardProp: (prop) => {\n return FORWARD_PROPS.includes(prop) || prop.includes('data')\n },\n })\n .attrs<StyledButtonProps>(injectDefaultTheme)`\n ${baseStyles}\n ${dynamicStyles}\n ${responsiveSize}\n\n ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n\n ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n\n ${(props) => {\n const cssProperty = props.fluid && props.width !== 'auto' ? 'max-width' : 'width'\n return props.width ? property(getWidth(props.width), cssProperty) : null\n }}\n\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL },\n cssProperty: 'padding',\n })\n }}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })\n }}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })\n }}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })\n }}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })\n }}\n\n ${({ marginXS, marginS, marginM, marginL, marginXL }) => {\n return responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })\n }}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) => {\n return responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })\n }}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) => {\n return responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })\n }}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) => {\n return responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })\n }}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) => {\n return responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })\n }}\n\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveNamedProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n\n ${({ heightXS, heightS, heightM, heightL, heightXL }) => {\n return responsiveNamedProperty({\n sizes: { heightXS, heightS, heightM, heightL, heightXL },\n cssProperty: 'height',\n })\n }}\n\n ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) => {\n return responsiveNamedProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: getWidth,\n })\n }}\n\n ${(props) => (props.fluid ? property(props.fluid, fluidStyles) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) => {\n return responsiveNamedProperty({\n sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL },\n cssProperty: fluidStyles,\n })\n }}\n`\n\nexport const IconSlot = styled.span<{\n children: React.ReactNode\n marginLeft?: boolean\n marginRight?: boolean\n}>`\n ${(props) => `\n position: relative;\n z-index: 1;\n display: flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n margin-left: ${props.marginLeft ? '0.4em' : 0};\n margin-right: ${props.marginRight ? '0.4em' : 0};\n `}\n`\n\nexport const Content = styled.span`\n position: relative;\n z-index: 1;\n`\n\nexport const SpinnerIcon = styled(Spinner)`\n width: 100%;\n animation: ${spin} 2000ms linear infinite;\n ${(props) => `\n > path {\n stroke-width: ${props.strokeWidth};\n }\n `}\n`\n\nexport const CheckIcon = styled(Check)`\n width: 100%;\n ${(props) => `\n > path {\n stroke-width: ${props.strokeWidth};\n }\n `}\n`\n"],"names":["WIDTHS","xl","l","m","s","xs","baseStyles","css","props","concat","display","fontWeight","borderRadius","lineHeight","noSpacing","loading","keyframes","spin","defaultLoadingStyles","getWidth","width","fluidStyles","pseudoBaseStyles","PRESET","filled","default","background","theme","colors","black","danger","success","disabled","color","backgroundBefore","onColored","outline","boxShadow","backgroundAfter","base","clear","PRESET_DEFAULT","fontColor","tiny","saturate","lighten","toString","inverted","basic","cssProperty","colorFn","mercury","silver","Root","styled","button","withConfig","shouldForwardProp","prop","FORWARD_PROPS","includes","attrs","injectDefaultTheme","componentId","brandPresetUsed","responsiveSize","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","fontSize","height","fluid","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","_ref12","heightXS","heightS","heightM","heightL","heightXL","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL","IconSlot","span","Content","SpinnerIcon","Spinner","strokeWidth","CheckIcon","Check"],"mappings":"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"}
|
package/dts/index.d.ts
CHANGED
|
@@ -862,13 +862,12 @@ declare type Breakpoint = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
|
|
|
862
862
|
declare type CSSUnit = 'px' | 'rem' | 'em' | '%';
|
|
863
863
|
declare type SizeValue = Size | number;
|
|
864
864
|
declare type Sizes = Record<Size, CSSProperties>;
|
|
865
|
+
declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
|
|
865
866
|
interface BaseProps {
|
|
866
|
-
|
|
867
|
-
preset?: 'default' | 'brand';
|
|
868
|
-
/** CSS classname */
|
|
867
|
+
preset?: ThemePreset;
|
|
869
868
|
className?: string;
|
|
870
|
-
/** Style object */
|
|
871
869
|
style?: React.CSSProperties;
|
|
870
|
+
cursor?: string;
|
|
872
871
|
}
|
|
873
872
|
interface InputField extends ColorProperty, ColorProperty<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
|
|
874
873
|
/**
|
|
@@ -911,12 +910,24 @@ declare type ResponsiveSizeProps = {
|
|
|
911
910
|
} & {
|
|
912
911
|
[key in `size${Breakpoint}`]?: SizeValue;
|
|
913
912
|
};
|
|
914
|
-
declare type
|
|
915
|
-
|
|
913
|
+
declare type DynamicSizeDeclaration = (size: number, cssProperty: keyof CSSProperties, cssUnit: CSSUnit) => CSSProperties;
|
|
914
|
+
declare type ResponsiveSizeInterpolationProps<T extends ResponsiveSizeProps> = Omit<T, 'sizes' | 'size'> & {
|
|
915
|
+
dynamicSizeDeclaration?: DynamicSizeDeclaration;
|
|
916
916
|
sizeProperty?: keyof CSSProperties;
|
|
917
917
|
sizes: Sizes;
|
|
918
918
|
size: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
|
|
919
919
|
};
|
|
920
|
+
declare type ResponsiveMarginProps = {
|
|
921
|
+
marginUnits?: CSSUnit;
|
|
922
|
+
} & {
|
|
923
|
+
[key in `${MarginProperty}${Breakpoint | ''}`]?: CSSProperties['margin'];
|
|
924
|
+
};
|
|
925
|
+
declare type ColorSchemaProps = {
|
|
926
|
+
primary?: boolean;
|
|
927
|
+
secondary?: boolean;
|
|
928
|
+
tertiary?: boolean;
|
|
929
|
+
quaternary?: boolean;
|
|
930
|
+
};
|
|
920
931
|
|
|
921
932
|
/**
|
|
922
933
|
* Converts HEX color code to RGB(A) string
|
|
@@ -1466,6 +1477,30 @@ interface SwitcherProps extends BaseProps, ColorProperty<'color'>, ColorProperty
|
|
|
1466
1477
|
|
|
1467
1478
|
declare const Switcher: react.ForwardRefExoticComponent<SwitcherProps & react.RefAttributes<HTMLDivElement>>;
|
|
1468
1479
|
|
|
1480
|
+
interface ArrowBadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, ColorSchemaProps, ColorProperty<'color'>, ColorProperty<'backgroundColor'>, BaseProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
|
|
1481
|
+
/** React children */
|
|
1482
|
+
children: React.ReactNode;
|
|
1483
|
+
/** Pointed left */
|
|
1484
|
+
left?: boolean;
|
|
1485
|
+
/** Pointed right */
|
|
1486
|
+
right?: boolean;
|
|
1487
|
+
/** Fancy tail shape */
|
|
1488
|
+
fancy?: boolean;
|
|
1489
|
+
}
|
|
1490
|
+
|
|
1491
|
+
/**
|
|
1492
|
+
*
|
|
1493
|
+
* Component interface extends:
|
|
1494
|
+
* - [`ResponsiveSizeProps`](#/Interfaces)
|
|
1495
|
+
* - [`ResponsiveMarginProps`](#/Interfaces)
|
|
1496
|
+
* - [`ColorSchemaProps`](#/Interfaces)
|
|
1497
|
+
* - [`ColorProperty<'color'>`](#/Interfaces)
|
|
1498
|
+
* - [`ColorProperty<'backgroundColor'>`](#/Interfaces)
|
|
1499
|
+
* - [`BaseProps`](#/Interfaces)
|
|
1500
|
+
* - [`React.ComponentPropsWithRef<'div'>`](#/Interfaces)
|
|
1501
|
+
*/
|
|
1502
|
+
declare const ArrowBadge: React.ForwardRefExoticComponent<ArrowBadgeProps>;
|
|
1503
|
+
|
|
1469
1504
|
interface Theme {
|
|
1470
1505
|
breakpoints: Readonly<{
|
|
1471
1506
|
xl: number;
|
|
@@ -1488,6 +1523,7 @@ interface Theme {
|
|
|
1488
1523
|
domain?: string;
|
|
1489
1524
|
utils?: {
|
|
1490
1525
|
relBuilder?: (_link?: string, _target?: string) => undefined | string;
|
|
1526
|
+
hexToRgbA?: (hex: string, alpha?: number) => string;
|
|
1491
1527
|
};
|
|
1492
1528
|
mode: ThemeMode;
|
|
1493
1529
|
preset: ThemePreset;
|
|
@@ -1499,6 +1535,7 @@ interface Theme {
|
|
|
1499
1535
|
Checkbox?: CheckboxProps;
|
|
1500
1536
|
Textarea?: TextareaProps;
|
|
1501
1537
|
Text?: TextProps;
|
|
1538
|
+
ArrowBadge?: ArrowBadgeProps;
|
|
1502
1539
|
'Text.Heading'?: TextHeadingProps;
|
|
1503
1540
|
Switcher?: SwitcherProps;
|
|
1504
1541
|
};
|
|
@@ -3187,4 +3224,4 @@ declare namespace Select {
|
|
|
3187
3224
|
var displayName: string;
|
|
3188
3225
|
}
|
|
3189
3226
|
|
|
3190
|
-
export { ActionBtn, Alert, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSUnit, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio,
|
|
3227
|
+
export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSUnit, CURRENCY_MAP, Checkbox, ColorNames, ColorSchemaProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, DynamicSizeDeclaration, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, MarginProperty, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, ResponsiveMarginProps, ResponsiveSizeInterpolationProps, ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, SizeValue, Sizes, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-config-priority.js","sources":["../../../src/hooks/use-config-priority.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nexport function useConfigPriority<T extends object>(minor?: Partial<T>, major?: Partial<T>): Partial<T> {\n return useMemo(() => {\n const minorConfig = minor ?? {}\n const majorConfig = major ?? {}\n const uniqueKeys = [...new Set([...Object.keys(minorConfig), ...Object.keys(majorConfig)])]\n\n return uniqueKeys.reduce((prioritized, key) => {\n let finalVal\n\n if (valid(minorConfig[key])) finalVal = minorConfig[key]\n if (valid(majorConfig[key])) finalVal = majorConfig[key]\n\n return valid(finalVal) ? { ...prioritized, [key]: finalVal } : prioritized\n }, {} as Partial<T>)\n }, [minor, major])\n}\n\nfunction valid(value: unknown): boolean {\n return Boolean(value) || typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string'\n}\n"],"names":["useConfigPriority","minor","major","useMemo","minorConfig","majorConfig","Set","Object","keys","reduce","prioritized","key","finalVal","valid","value","Boolean"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-config-priority.js","sources":["../../../src/hooks/use-config-priority.ts"],"sourcesContent":["import { useMemo } from 'react'\n\n/**\n *\n * @deprecated it will be deleted in near future\n */\nexport function useConfigPriority<T extends object>(minor?: Partial<T>, major?: Partial<T>): Partial<T> {\n return useMemo(() => {\n const minorConfig = minor ?? {}\n const majorConfig = major ?? {}\n const uniqueKeys = [...new Set([...Object.keys(minorConfig), ...Object.keys(majorConfig)])]\n\n return uniqueKeys.reduce((prioritized, key) => {\n let finalVal\n\n if (valid(minorConfig[key])) finalVal = minorConfig[key]\n if (valid(majorConfig[key])) finalVal = majorConfig[key]\n\n return valid(finalVal) ? { ...prioritized, [key]: finalVal } : prioritized\n }, {} as Partial<T>)\n }, [minor, major])\n}\n\nfunction valid(value: unknown): boolean {\n return Boolean(value) || typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string'\n}\n"],"names":["useConfigPriority","minor","major","useMemo","minorConfig","majorConfig","Set","Object","keys","reduce","prioritized","key","finalVal","valid","value","Boolean"],"mappings":"oFAMO,SAASA,EAAoCC,EAAoBC,GACtE,OAAOC,GAAQ,KACb,IAAMC,EAAcH,MAAAA,EAAAA,EAAS,GAC7B,IAAMI,EAAcH,MAAAA,EAAAA,EAAS,GAG7B,MAFmB,IAAI,IAAII,IAAI,IAAIC,OAAOC,KAAKJ,MAAiBG,OAAOC,KAAKH,MAE1DI,SAAQC,EAAaC,KACrC,IAAIC,EAKJ,OAHIC,EAAMT,EAAYO,MAAOC,EAAWR,EAAYO,IAChDE,EAAMR,EAAYM,MAAOC,EAAWP,EAAYM,IAE7CE,EAAMD,UAAiBF,GAAvB,GAAA,CAAoCC,CAACA,GAAMC,IAAaF,IAC9D,MACF,CAACT,EAAOC,IAGb,SAASW,EAAMC,GACb,OAAOC,QAAQD,IAA2B,kBAAVA,GAAwC,iBAAVA,GAAuC,iBAAVA"}
|
package/hooks/use-theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-theme.js","sources":["../../../src/hooks/use-theme.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { defaultTheme } from '../theme/themes'\n\nexport function useFallbackTheme(): DefaultTheme {\n const contextTheme = useTheme()\n\n const shouldForwardTheme =\n typeof contextTheme === 'object' && contextTheme !== null && Object.keys(contextTheme).length > 0\n\n return shouldForwardTheme ? contextTheme : defaultTheme\n}\n"],"names":["useFallbackTheme","contextTheme","useTheme","Object","keys","length","defaultTheme"],"mappings":"+
|
|
1
|
+
{"version":3,"file":"use-theme.js","sources":["../../../src/hooks/use-theme.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { defaultTheme } from '../theme/themes'\n\n/**\n *\n * @deprecated it will be deleted in near future\n */\nexport function useFallbackTheme(): DefaultTheme {\n const contextTheme = useTheme()\n\n const shouldForwardTheme =\n typeof contextTheme === 'object' && contextTheme !== null && Object.keys(contextTheme).length > 0\n\n return shouldForwardTheme ? contextTheme : defaultTheme\n}\n"],"names":["useFallbackTheme","contextTheme","useTheme","Object","keys","length","defaultTheme"],"mappings":"+FAQO,SAASA,IACd,IAAMC,EAAeC,IAKrB,MAF0B,iBAAjBD,GAA8C,OAAjBA,GAAyBE,OAAOC,KAAKH,GAAcI,OAAS,EAEtEJ,EAAeK"}
|