@foxford/ui 2.3.0 → 2.3.1-beta-c5df908-20230413
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/Arrow/Arrow.js +1 -1
- package/components/Arrow/Arrow.js.map +1 -1
- package/components/Arrow/constants.js +2 -0
- package/components/Arrow/constants.js.map +1 -0
- package/components/Arrow/style.js +1 -1
- package/components/Arrow/style.js.map +1 -1
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/dts/index.d.ts +3 -3
- package/hooks/use-theme.js +1 -1
- package/hooks/use-theme.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +2 -1
- package/shared/utils/get-config.js +2 -0
- package/shared/utils/get-config.js.map +1 -0
- package/shared/utils/inject-theme.js +1 -1
- package/shared/utils/inject-theme.js.map +1 -1
- package/theme/themes.js +1 -1
- package/theme/themes.js.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from'@babel/runtime/helpers/objectSpread2';import{forwardRef as o}from'react';import{
|
|
1
|
+
import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as o}from'react';import{useFallbackTheme as s}from'../../hooks/use-theme.js';import{getComponentConfig as t}from'../../shared/utils/get-config.js';import a from'./images/arrow.module.svg.js';import i from'./images/chevron.module.svg.js';import{CONFIG_PROPS as m}from'./constants.js';import{getArrowRotation as l}from'./utils.js';import{Root as n}from'./style.js';import{jsx as p}from'react/jsx-runtime';var f=["className","style","onClick"],d=["size"];var v=o(((o,v)=>{var c,u;var b=s();var j=null!==(c=null===(u=b.components)||void 0===u?void 0:u.Arrow)&&void 0!==c?c:{};var{className:g,style:h,onClick:y}=o,N=e(o,f);var w=t(m,j,N),{size:C="l"}=w,A=e(w,d);var k='brand'===b.preset;'string'==typeof A.preset&&(k='brand'===A.preset);var P=A.square?'8px':'50%';var R=k?a:i;var x=l(A);return p(n,r(r({ref:v,type:"button",className:g,style:h,size:C,borderRadius:P,brandPresetUsed:k,onClick:r=>{r.preventDefault(),A.disabled||'function'!=typeof y||y(r)}},A),{},{children:p("span",{children:p(R,{style:x})})}))}));var c='Arrow';v.displayName="Arrow";export{v as Arrow,c as COMPONENT_NAME};
|
|
2
2
|
//# sourceMappingURL=Arrow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Arrow.js","sources":["../../../../src/components/Arrow/Arrow.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"Arrow.js","sources":["../../../../src/components/Arrow/Arrow.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { getComponentConfig } from 'shared/utils/get-config'\nimport ArrowSvg from './images/arrow.module.svg'\nimport ChevronSvg from './images/chevron.module.svg'\nimport { CONFIG_PROPS } from './constants'\nimport type { ArrowProps } from './types'\nimport { getArrowRotation } from './utils'\n\nimport * as Styled from './style'\n\n/**\n * Button with arrow icon\n */\nconst Arrow = forwardRef<HTMLButtonElement, ArrowProps>((props, ref) => {\n const theme = useFallbackTheme()\n\n const context = theme.components?.Arrow ?? {}\n const { className, style, onClick, ...restProps } = props\n const { size = 'l', ...configProps } = getComponentConfig<ArrowProps>(CONFIG_PROPS, context, restProps)\n\n let brandPresetUsed = theme.preset === 'brand'\n if (typeof configProps.preset === 'string') brandPresetUsed = configProps.preset === 'brand'\n\n const borderRadius = configProps.square ? '8px' : '50%'\n const Icon = brandPresetUsed ? ArrowSvg : ChevronSvg\n const iconStyles = getArrowRotation(configProps)\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault()\n\n if (!configProps.disabled && typeof onClick === 'function') {\n onClick(event)\n }\n }\n\n return (\n <Styled.Root\n ref={ref}\n type='button'\n className={className}\n style={style}\n size={size}\n borderRadius={borderRadius}\n brandPresetUsed={brandPresetUsed}\n onClick={handleClick}\n {...configProps}\n >\n <span>{<Icon style={iconStyles} />}</span>\n </Styled.Root>\n )\n})\n\nconst COMPONENT_NAME = 'Arrow'\n\nArrow.displayName = COMPONENT_NAME\n\nexport { Arrow, COMPONENT_NAME }\n\nexport type { ArrowProps }\n"],"names":["Arrow","forwardRef","props","ref","_theme$components$Arr","_theme$components","theme","useFallbackTheme","context","components","className","style","onClick","restProps","_excluded","_getComponentConfig","getComponentConfig","CONFIG_PROPS","size","configProps","_objectWithoutProperties","_excluded2","brandPresetUsed","preset","borderRadius","square","Icon","ArrowSvg","ChevronSvg","iconStyles","getArrowRotation","_jsx","Styled.Root","_objectSpread","type","event","preventDefault","disabled","children","COMPONENT_NAME","displayName"],"mappings":"wkBAcMA,IAAAA,EAAQC,GAAAA,CAA2CC,EAAOC,KAAQ,IAAAC,EAAAC,EACtE,IAAMC,EAAQC,IAEd,IAAMC,EAAO,UAAG,UAAAF,EAAMG,kBAAN,IAAAJ,SAAAA,EAAkBL,aAArB,IAAAI,EAAAA,EAA8B,GAC3C,IAAMM,UAAEA,EAAFC,MAAaA,EAAbC,QAAoBA,GAA0BV,EAAdW,IAAcX,EAApDY,GACA,IAAAC,EAAuCC,EAA+BC,EAAcT,EAASK,IAAvFK,KAAEA,EAAO,KAAfH,EAAuBI,EAAvBC,EAAAL,EAAAM,GAEA,IAAIC,EAAmC,UAAjBhB,EAAMiB,OACM,iBAAvBJ,EAAYI,SAAqBD,EAAyC,UAAvBH,EAAYI,QAE1E,IAAMC,EAAeL,EAAYM,OAAS,MAAQ,MAClD,IAAMC,EAAOJ,EAAkBK,EAAWC,EAC1C,IAAMC,EAAaC,EAAiBX,GAUpC,OACEY,EAACC,EAADC,EAAAA,EAAA,CACE9B,IAAKA,EACL+B,KAAK,SACLxB,UAAWA,EACXC,MAAOA,EACPO,KAAMA,EACNM,aAAcA,EACdF,gBAAiBA,EACjBV,QAjBiBuB,IACnBA,EAAMC,iBAEDjB,EAAYkB,UAA+B,mBAAZzB,GAClCA,EAAQuB,KAcJhB,GATN,GAAA,CAAAmB,SAWEP,EAAA,OAAA,CAAAO,SAAOP,EAACL,EAAD,CAAMf,MAAOkB,YAKpBU,IAAAA,EAAiB,QAEvBvC,EAAMwC,YAFiB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e=['preset','square','onColored','size','top','right','bottom','left','inverse','outline','disabled'];var r=['preset','square','onColored','size','top','right','bottom','left','inverse','outline','borderRadius','brandPresetUsed'];export{e as CONFIG_PROPS,r as TRANSIENT_PROPS};
|
|
2
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/Arrow/constants.ts"],"sourcesContent":["import type { ArrowConfigProp, ArrowTransientProp } from './types'\n\nexport const CONFIG_PROPS: ArrowConfigProp[] = [\n 'preset',\n 'square',\n 'onColored',\n 'size',\n 'top',\n 'right',\n 'bottom',\n 'left',\n 'inverse',\n 'outline',\n 'disabled',\n]\n\nexport const TRANSIENT_PROPS: ArrowTransientProp[] = [\n 'preset',\n 'square',\n 'onColored',\n 'size',\n 'top',\n 'right',\n 'bottom',\n 'left',\n 'inverse',\n 'outline',\n 'borderRadius',\n 'brandPresetUsed',\n]\n"],"names":["CONFIG_PROPS","TRANSIENT_PROPS"],"mappings":"AAEO,IAAMA,EAAkC,CAC7C,SACA,SACA,YACA,OACA,MACA,QACA,SACA,OACA,UACA,UACA,YAGK,IAAMC,EAAwC,CACnD,SACA,SACA,YACA,OACA,MACA,QACA,SACA,OACA,UACA,UACA,eACA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o,{css as n}from'styled-components';import{injectDefaultTheme as r}from'../../shared/utils/inject-theme.js';import{responsiveProperty as c}from'../../mixins/responsive-property.js';var
|
|
1
|
+
import o,{css as n}from'styled-components';import{injectDefaultTheme as r}from'../../shared/utils/inject-theme.js';import{responsiveProperty as c}from'../../mixins/responsive-property.js';import{TRANSIENT_PROPS as e}from'./constants.js';var t={l:48,m:44,xs:40};var a={l:40,m:28,xs:20};var l="\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n";var s="\n cursor: not-allowed;\n -webkit-filter: grayscale(100%);\n -moz-filter: grayscale(100%);\n -ms-filter: grayscale(100%);\n -o-filter: grayscale(100%);\n filter: grayscale(100%);\n";var i={filled:{default:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n background-color: ".concat(r?n.colors['bg-disabled-large']:n.colors['bg-onmain-tertiary'],";\n color: ").concat(r?n.colors['content-disabled']:n.colors['content-onmain-primary'],";\n &::before {\n ").concat(l,"\n opacity: 0;\n background-color: ").concat(n.colors['bg-oncolor-hover'],";\n \n }\n &::after {\n ").concat(l,"\n opacity: 0;\n box-shadow: inset 0 4px ").concat(n.colors['bg-oncolor-hover'],";\n }\n ").concat(r?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::before {\n opacity: 0;\n }\n &:active::after {\n opacity: 1;\n }\n &:active {\n background-color: ".concat(n.colors['bg-brand-primary-basic-active'],";\n color: ").concat(n.colors['content-oncolor-primary'],";\n }\n "),"\n ")})),onColored:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n background-color: ".concat(n.colors['bg-oncolor-primary'],";\n color: ").concat(r?n.colors['content-disabled']:n.colors['content-oncolor-constant'],";\n &::before {\n ").concat(l,"\n opacity: 0;\n background-color: ").concat(n.colors['bg-oncolor-hover'],";\n }\n &::after {\n ").concat(l,"\n opacity: 0;\n box-shadow: inset 0 4px ").concat(n.colors['bg-oncolor-hover'],";\n }\n ").concat(r?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},outline:{default:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n background-color: transparent; \n color: ".concat(r?n.colors['border-disabled']:n.colors['content-onmain-primary'],";\n &::before {\n ").concat(l,"\n opacity: 1;\n box-shadow: inset 0 0 0 1px ").concat(r?n.colors['border-disabled']:n.colors['border-onmain-contrast'],";\n }\n &::after {\n ").concat(l,"\n opacity: 0;\n box-shadow: inset 0 4px ").concat(n.colors['bg-oncolor-hover'],";\n }\n ").concat(r?'cursor: default;':"\n &:hover::before {\n opacity: 0;\n }\n &:hover {\n background-color: ".concat(n.colors['bg-onmain-tertiary'],";\n }\n &:active::after {\n opacity: 1;\n }\n &:active {\n background-color: ").concat(n.colors['bg-brand-primary-basic-active'],";\n color: ").concat(n.colors['content-oncolor-primary'],";\n }\n "),"\n ")})),onColored:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n background-color: transparent; \n color: ".concat(r?n.colors['border-oncolor-disabled']:n.colors['content-oncolor-primary'],";\n &::before {\n ").concat(l,"\n opacity: 1;\n box-shadow: inset 0 0 0 1px ").concat(r?n.colors['border-oncolor-disabled']:n.colors['border-oncolor-default'],";\n }\n &::after {\n ").concat(l,"\n opacity: 0;\n box-shadow: inset 0 4px ").concat(n.colors['bg-oncolor-hover'],";\n }\n ").concat(r?'cursor: default;':"\n &:hover::before {\n opacity: 0;\n }\n &:hover {\n background-color: ".concat(n.colors['bg-oncolor-primary'],";\n color: ").concat(n.colors['content-oncolor-constant'],";\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")}))}};var d={filled:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n background-color: ".concat(n.colors.white,";\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n & svg {\n fill: ").concat(n.colors.accent,";\n }\n &:hover {\n background-color: ").concat(n.colors.accent,";\n box-shadow: none;\n svg {\n fill: ").concat(n.colors.white,";\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ").concat(r?s:'',"\n ")})),outline:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ".concat(n.colors.alto,";\n & svg {\n fill: ").concat(n.colors.alto,";\n }\n &:hover {\n background-color: ").concat(n.colors.accent,";\n box-shadow: none;\n svg {\n fill: ").concat(n.colors.white,";\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ").concat(r?s:'',"\n ")})),inverse:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ".concat(n.colors.white,";\n & svg {\n fill: ").concat(n.colors.white,";\n }\n &:hover {\n background-color: ").concat(n.colors.white,";\n box-shadow: none;\n svg {\n fill: ").concat(n.colors.accent,";\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 #eaecf3;\n }\n ").concat(r?s:'',"\n ")}))};var b=(o,n)=>{var r=o.brandPresetUsed?t:a;return['l','m','xs'].includes(o.size)?"".concat(n,": ").concat(r[o.size],"px;"):c('size',n)};var p=o.button.withConfig({shouldForwardProp:o=>!e.includes(o)}).attrs(r).withConfig({componentId:"fox-ui__sc-1xgj0m4-0"})([""," "," "," "," ",""],"\n &,\n & > span {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n position: relative;\n flex-shrink: 0;\n padding: 0;\n border: 0;\n line-height: 1;\n cursor: pointer;\n overflow: hidden;\n transition-property: background-color, box-shadow;\n &::before, \n &::after {\n transition-property: opacity;\n }\n &,\n &::before,\n &::after {\n transition-duration: 200ms;\n }\n",(o=>o.brandPresetUsed?o.outline&&o.onColored?i.outline.onColored:o.outline&&!o.onColored?i.outline.default:!o.outline&&o.onColored?i.filled.onColored:i.filled.default:o.inverse?d.inverse:o.outline?d.outline:d.filled),(o=>b(o,'height')),(o=>b(o,'width')),(o=>"border-radius: ".concat(o.borderRadius,";")));export{p as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Arrow/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport type { ArrowRootProps, ArrowStaticSize, ArrowTransientProp } from './types'\n\nconst SIZES: Record<ArrowStaticSize, number> = { l: 48, m: 44, xs: 40 }\n\nconst DEFAULT_SIZES: Record<ArrowStaticSize, number> = { l: 40, m: 28, xs: 20 }\n\nconst TRANSIENT_PROPS: ArrowTransientProp[] = [\n 'preset',\n 'square',\n 'onColored',\n 'size',\n 'top',\n 'right',\n 'bottom',\n 'left',\n 'inverse',\n 'outline',\n 'borderRadius',\n]\n\nconst baseStyles = `\n &,\n & > span {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n position: relative;\n flex-shrink: 0;\n padding: 0;\n border: 0;\n line-height: 1;\n cursor: pointer;\n overflow: hidden;\n transition-property: 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\nconst pseudoBaseStyles = `\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n`\n\nconst defaultDisabledStyles = `\n cursor: not-allowed;\n -webkit-filter: grayscale(100%);\n -moz-filter: grayscale(100%);\n -ms-filter: grayscale(100%);\n -o-filter: grayscale(100%);\n filter: grayscale(100%);\n`\n\nconst PRESET = {\n filled: {\n default: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: ${disabled ? theme.colors['bg-disabled-large'] : theme.colors['bg-onmain-tertiary']};\n color: ${disabled ? theme.colors['content-disabled'] : theme.colors['content-onmain-primary']};\n &::before {\n ${pseudoBaseStyles}\n opacity: 0;\n background-color: ${theme.colors['bg-oncolor-hover']};\n \n }\n &::after {\n ${pseudoBaseStyles}\n opacity: 0;\n box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n }\n ${\n disabled\n ? 'cursor: default;'\n : `\n &:hover::before {\n opacity: 1;\n }\n &:active::before {\n opacity: 0;\n }\n &:active::after {\n opacity: 1;\n }\n &:active {\n background-color: ${theme.colors['bg-brand-primary-basic-active']};\n color: ${theme.colors['content-oncolor-primary']};\n }\n `\n }\n `}\n `,\n onColored: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: ${theme.colors['bg-oncolor-primary']};\n color: ${disabled ? theme.colors['content-disabled'] : theme.colors['content-oncolor-constant']};\n &::before {\n ${pseudoBaseStyles}\n opacity: 0;\n background-color: ${theme.colors['bg-oncolor-hover']};\n }\n &::after {\n ${pseudoBaseStyles}\n opacity: 0;\n box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n }\n ${\n disabled\n ? 'cursor: default;'\n : `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n }\n `}\n `,\n },\n outline: {\n default: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: transparent; \n color: ${disabled ? theme.colors['border-disabled'] : theme.colors['content-onmain-primary']};\n &::before {\n ${pseudoBaseStyles}\n opacity: 1;\n box-shadow: inset 0 0 0 1px ${\n disabled ? theme.colors['border-disabled'] : theme.colors['border-onmain-contrast']\n };\n }\n &::after {\n ${pseudoBaseStyles}\n opacity: 0;\n box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n }\n ${\n disabled\n ? 'cursor: default;'\n : `\n &:hover::before {\n opacity: 0;\n }\n &:hover {\n background-color: ${theme.colors['bg-onmain-tertiary']};\n }\n &:active::after {\n opacity: 1;\n }\n &:active {\n background-color: ${theme.colors['bg-brand-primary-basic-active']};\n color: ${theme.colors['content-oncolor-primary']};\n }\n `\n }\n `}\n `,\n onColored: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: transparent; \n color: ${disabled ? theme.colors['border-oncolor-disabled'] : theme.colors['content-oncolor-primary']};\n &::before {\n ${pseudoBaseStyles}\n opacity: 1;\n box-shadow: inset 0 0 0 1px ${\n disabled ? theme.colors['border-oncolor-disabled'] : theme.colors['border-oncolor-default']\n };\n }\n &::after {\n ${pseudoBaseStyles}\n opacity: 0;\n box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n }\n ${\n disabled\n ? 'cursor: default;'\n : `\n &:hover::before {\n opacity: 0;\n }\n &:hover {\n background-color: ${theme.colors['bg-oncolor-primary']};\n color: ${theme.colors['content-oncolor-constant']};\n }\n &:active::after {\n opacity: 1;\n }\n `\n }\n `}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n filled: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: ${theme.colors.white};\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n & svg {\n fill: ${theme.colors.accent};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n outline: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.alto};\n & svg {\n fill: ${theme.colors.alto};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n inverse: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.white};\n & svg {\n fill: ${theme.colors.white};\n }\n &:hover {\n background-color: ${theme.colors.white};\n box-shadow: none;\n svg {\n fill: ${theme.colors.accent};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 #eaecf3;\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n}\n\nconst extractSize = (props: ArrowRootProps & { theme: DefaultTheme }, cssProperty: 'height' | 'width') => {\n const brandPresetUsed = props.preset === 'brand' || props.theme.preset === 'brand'\n const config = brandPresetUsed ? SIZES : DEFAULT_SIZES\n\n return ['l', 'm', 'xs'].includes(<ArrowStaticSize>props.size)\n ? `${cssProperty}: ${config[<ArrowStaticSize>props.size]}px;`\n : responsiveProperty('size', cssProperty)\n}\n\nconst extractStyles = (props: ArrowRootProps & { theme: DefaultTheme }) => {\n const brandPresetUsed = props.preset === 'brand' || props.theme.preset === 'brand'\n\n if (brandPresetUsed) {\n if (props.outline && props.onColored) return PRESET.outline.onColored\n if (props.outline && !props.onColored) return PRESET.outline.default\n if (!props.outline && props.onColored) return PRESET.filled.onColored\n\n return PRESET.filled.default\n }\n\n if (props.inverse) return PRESET_DEFAULT.inverse\n if (props.outline) return PRESET_DEFAULT.outline\n\n return PRESET_DEFAULT.filled\n}\n\nexport const Root = styled.button\n .withConfig({\n shouldForwardProp: (prop) => {\n return !TRANSIENT_PROPS.includes(<ArrowTransientProp>prop)\n },\n })\n .attrs(injectDefaultTheme)<ArrowRootProps>`\n ${baseStyles}\n ${extractStyles}\n ${(props) => extractSize(props, 'height')}\n ${(props) => extractSize(props, 'width')}\n ${(props) => `border-radius: ${props.borderRadius};`}\n`\n"],"names":["SIZES","l","m","xs","DEFAULT_SIZES","TRANSIENT_PROPS","pseudoBaseStyles","defaultDisabledStyles","PRESET","filled","default","css","_ref","theme","disabled","concat","colors","onColored","_ref2","outline","_ref3","_ref4","PRESET_DEFAULT","_ref5","white","accent","_ref6","alto","inverse","_ref7","extractSize","props","cssProperty","config","preset","includes","size","responsiveProperty","Root","styled","button","withConfig","shouldForwardProp","prop","attrs","injectDefaultTheme","componentId","borderRadius"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Arrow/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { DefaultTheme, ThemedStyledProps } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { TRANSIENT_PROPS } from './constants'\nimport type { ArrowRootProps, ArrowStaticSize, ArrowTransientProp } from './types'\n\nconst SIZES: Record<ArrowStaticSize, number> = { l: 48, m: 44, xs: 40 }\n\nconst DEFAULT_SIZES: Record<ArrowStaticSize, number> = { l: 40, m: 28, xs: 20 }\n\nconst baseStyles = `\n &,\n & > span {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n position: relative;\n flex-shrink: 0;\n padding: 0;\n border: 0;\n line-height: 1;\n cursor: pointer;\n overflow: hidden;\n transition-property: 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\nconst pseudoBaseStyles = `\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n`\n\nconst defaultDisabledStyles = `\n cursor: not-allowed;\n -webkit-filter: grayscale(100%);\n -moz-filter: grayscale(100%);\n -ms-filter: grayscale(100%);\n -o-filter: grayscale(100%);\n filter: grayscale(100%);\n`\n\nconst PRESET = {\n filled: {\n default: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: ${disabled ? theme.colors['bg-disabled-large'] : theme.colors['bg-onmain-tertiary']};\n color: ${disabled ? theme.colors['content-disabled'] : theme.colors['content-onmain-primary']};\n &::before {\n ${pseudoBaseStyles}\n opacity: 0;\n background-color: ${theme.colors['bg-oncolor-hover']};\n \n }\n &::after {\n ${pseudoBaseStyles}\n opacity: 0;\n box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n }\n ${\n disabled\n ? 'cursor: default;'\n : `\n &:hover::before {\n opacity: 1;\n }\n &:active::before {\n opacity: 0;\n }\n &:active::after {\n opacity: 1;\n }\n &:active {\n background-color: ${theme.colors['bg-brand-primary-basic-active']};\n color: ${theme.colors['content-oncolor-primary']};\n }\n `\n }\n `}\n `,\n onColored: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: ${theme.colors['bg-oncolor-primary']};\n color: ${disabled ? theme.colors['content-disabled'] : theme.colors['content-oncolor-constant']};\n &::before {\n ${pseudoBaseStyles}\n opacity: 0;\n background-color: ${theme.colors['bg-oncolor-hover']};\n }\n &::after {\n ${pseudoBaseStyles}\n opacity: 0;\n box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n }\n ${\n disabled\n ? 'cursor: default;'\n : `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n }\n `}\n `,\n },\n outline: {\n default: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: transparent; \n color: ${disabled ? theme.colors['border-disabled'] : theme.colors['content-onmain-primary']};\n &::before {\n ${pseudoBaseStyles}\n opacity: 1;\n box-shadow: inset 0 0 0 1px ${\n disabled ? theme.colors['border-disabled'] : theme.colors['border-onmain-contrast']\n };\n }\n &::after {\n ${pseudoBaseStyles}\n opacity: 0;\n box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n }\n ${\n disabled\n ? 'cursor: default;'\n : `\n &:hover::before {\n opacity: 0;\n }\n &:hover {\n background-color: ${theme.colors['bg-onmain-tertiary']};\n }\n &:active::after {\n opacity: 1;\n }\n &:active {\n background-color: ${theme.colors['bg-brand-primary-basic-active']};\n color: ${theme.colors['content-oncolor-primary']};\n }\n `\n }\n `}\n `,\n onColored: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: transparent; \n color: ${disabled ? theme.colors['border-oncolor-disabled'] : theme.colors['content-oncolor-primary']};\n &::before {\n ${pseudoBaseStyles}\n opacity: 1;\n box-shadow: inset 0 0 0 1px ${\n disabled ? theme.colors['border-oncolor-disabled'] : theme.colors['border-oncolor-default']\n };\n }\n &::after {\n ${pseudoBaseStyles}\n opacity: 0;\n box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n }\n ${\n disabled\n ? 'cursor: default;'\n : `\n &:hover::before {\n opacity: 0;\n }\n &:hover {\n background-color: ${theme.colors['bg-oncolor-primary']};\n color: ${theme.colors['content-oncolor-constant']};\n }\n &:active::after {\n opacity: 1;\n }\n `\n }\n `}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n filled: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: ${theme.colors.white};\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n & svg {\n fill: ${theme.colors.accent};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n outline: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.alto};\n & svg {\n fill: ${theme.colors.alto};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n inverse: css<ArrowRootProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.white};\n & svg {\n fill: ${theme.colors.white};\n }\n &:hover {\n background-color: ${theme.colors.white};\n box-shadow: none;\n svg {\n fill: ${theme.colors.accent};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 #eaecf3;\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n}\n\nconst extractSize = (props: ThemedStyledProps<ArrowRootProps, DefaultTheme>, cssProperty: 'height' | 'width') => {\n const config = props.brandPresetUsed ? SIZES : DEFAULT_SIZES\n\n return ['l', 'm', 'xs'].includes(<ArrowStaticSize>props.size)\n ? `${cssProperty}: ${config[<ArrowStaticSize>props.size]}px;`\n : responsiveProperty('size', cssProperty)\n}\n\nconst extractStyles = (props: ThemedStyledProps<ArrowRootProps, DefaultTheme>) => {\n if (props.brandPresetUsed) {\n if (props.outline && props.onColored) return PRESET.outline.onColored\n if (props.outline && !props.onColored) return PRESET.outline.default\n if (!props.outline && props.onColored) return PRESET.filled.onColored\n\n return PRESET.filled.default\n }\n\n if (props.inverse) return PRESET_DEFAULT.inverse\n if (props.outline) return PRESET_DEFAULT.outline\n\n return PRESET_DEFAULT.filled\n}\n\nexport const Root = styled.button\n .withConfig({\n shouldForwardProp: (prop) => {\n return !TRANSIENT_PROPS.includes(<ArrowTransientProp>prop)\n },\n })\n .attrs(injectDefaultTheme)<ArrowRootProps>`\n ${baseStyles}\n ${extractStyles}\n ${(props) => extractSize(props, 'height')}\n ${(props) => extractSize(props, 'width')}\n ${(props) => `border-radius: ${props.borderRadius};`}\n`\n"],"names":["SIZES","l","m","xs","DEFAULT_SIZES","pseudoBaseStyles","defaultDisabledStyles","PRESET","filled","default","css","_ref","theme","disabled","concat","colors","onColored","_ref2","outline","_ref3","_ref4","PRESET_DEFAULT","_ref5","white","accent","_ref6","alto","inverse","_ref7","extractSize","props","cssProperty","config","brandPresetUsed","includes","size","responsiveProperty","Root","styled","button","withConfig","shouldForwardProp","prop","TRANSIENT_PROPS","attrs","injectDefaultTheme","componentId","borderRadius"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i,{keyframes as n,css as t}from'styled-components';import r from'tinycolor2';import{property as o,responsiveNamedProperty as a}from'../../mixins/responsive-property.js';import{color as e}from'../../mixins/color.js';import{display as d}from'../../mixins/display.js';import{chooseWidthValue as g}from'./helpers.js';var p={l:52,m:48,s:40,xs:32};var l=n(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var s=t(["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;"],l);var m=t(["border-radius:",";"],(i=>i.theme.borderRadius));var h=t(["cursor:not-allowed;background-color:",";color:",";"],(i=>i.theme.colors.mercury),(i=>i.theme.colors.silver));var c=t(["&:active{box-shadow:inset 0 4px 0px 0px rgba(0,0,0,0.14);}&:hover{","}",""],(i=>i.color&&i.fontColor?t(["color:",";background-color:",";"],i.fontColor,r(i.theme.colors[i.color]).saturate(-5).lighten(-8).toString()):null),(i=>(i.inverted||i.basic)&&i.fontColor&&i.color?t(["&:not(:hover){border:1px solid ",";}&:hover{border:1px solid ",";}"],i.theme.colors[i.color],i.theme.colors[i.color]):null));var u=function(i,n){var r=arguments.length>1&&void 0!==n?n:'px';return t(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],i,r,i,r,.44*i,r,.44*i,r,.28*i,r)};var f=()=>t(["min-width:initial;width:100%;"]);var L=i.span.withConfig({componentId:"fox-ui__sc-16o31r2-0"})(["display:inline-block;line-height:1;vertical-align:middle;"]);var S=i.div.withConfig({shouldForwardProp:i=>['children','className','
|
|
1
|
+
import i,{keyframes as n,css as t}from'styled-components';import r from'tinycolor2';import{property as o,responsiveNamedProperty as a}from'../../mixins/responsive-property.js';import{color as e}from'../../mixins/color.js';import{display as d}from'../../mixins/display.js';import{chooseWidthValue as g}from'./helpers.js';var p={l:52,m:48,s:40,xs:32};var l=n(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var s=t(["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;"],l);var m=t(["border-radius:",";"],(i=>i.theme.borderRadius));var h=t(["cursor:not-allowed;background-color:",";color:",";"],(i=>i.theme.colors.mercury),(i=>i.theme.colors.silver));var c=t(["&:active{box-shadow:inset 0 4px 0px 0px rgba(0,0,0,0.14);}&:hover{","}",""],(i=>i.color&&i.fontColor?t(["color:",";background-color:",";"],i.fontColor,r(i.theme.colors[i.color]).saturate(-5).lighten(-8).toString()):null),(i=>(i.inverted||i.basic)&&i.fontColor&&i.color?t(["&:not(:hover){border:1px solid ",";}&:hover{border:1px solid ",";}"],i.theme.colors[i.color],i.theme.colors[i.color]):null));var u=function(i,n){var r=arguments.length>1&&void 0!==n?n:'px';return t(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],i,r,i,r,.44*i,r,.44*i,r,.28*i,r)};var f=()=>t(["min-width:initial;width:100%;"]);var L=i.span.withConfig({componentId:"fox-ui__sc-16o31r2-0"})(["display:inline-block;line-height:1;vertical-align:middle;"]);var S=i.div.withConfig({shouldForwardProp:i=>['children','className','form','href','id','onClick','onClickCapture','onMouseEnter','onMouseLeave','ref','rel','style','target','to','type'].includes(i)||i.includes('data')}).withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["-webkit-box-sizing:border-box !important;-moz-box-sizing:border-box !important;-ms-box-sizing:border-box !important;box-sizing:border-box !important;position:relative;overflow:hidden;border:none;cursor:pointer;user-select:none;font-weight:600;padding-top:0;padding-bottom:0;text-decoration:none;justify-content:center;align-items:center;text-align:center;transition:0.2s all;white-space:nowrap;appearance:none;vertical-align:top;& + &{margin-left:1em;","}"," "," "," "," "," "," "," &:focus{outline:0;}"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(i=>i.noSpacing?t(["margin-left:auto;"]):null),(i=>i.display?d(i.display):null),(i=>i.loading?s:null),(i=>i.rounded?m:null),(i=>i.color?e(i.color,i.inverted||i.basic?'color':'background-color'):null),(i=>i.fontColor?e(i.fontColor,i.inverted||i.basic?'background-color':'color'):null),(i=>i.basic?t(["background-color:transparent;"]):null),(i=>i.round?t(["border-radius:100%;letter-spacing:0.5px;& > *{display:inline-block !important;vertical-align:middle !important;}.icon{vertical-align:middle;& > *{vertical-align:middle !important;}svg{vertical-align:middle;}}"]):t([".icon{display:inline-block;font-size:inherit;line-height:0;vertical-align:middle;& > *{vertical-align:baseline !important;}& + ","{margin-left:10px;}}"],L)),(i=>i.padding?o(i.padding,'padding'):null),(i=>i.paddingTop?o(i.paddingTop,'padding-top'):null),(i=>i.paddingRight?o(i.paddingRight,'padding-right'):null),(i=>i.paddingBottom?o(i.paddingBottom,'padding-bottom'):null),(i=>i.paddingLeft?o(i.paddingLeft,'padding-left'):null),(i=>i.margin?o(i.margin,'margin'):null),(i=>i.marginTop?o(i.marginTop,'margin-top'):null),(i=>i.marginRight?o(i.marginRight,'margin-right'):null),(i=>i.marginBottom?o(i.marginBottom,'margin-bottom'):null),(i=>i.marginLeft?o(i.marginLeft,'margin-left'):null),(i=>{var{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e}=i;return a({sizes:{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e},cssProperty:'padding'})}),(i=>{var{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e}=i;return a({sizes:{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e},cssProperty:'padding-top'})}),(i=>{var{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e}=i;return a({sizes:{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e},cssProperty:'padding-right'})}),(i=>{var{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e}=i;return a({sizes:{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e},cssProperty:'padding-bottom'})}),(i=>{var{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e}=i;return a({sizes:{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e},cssProperty:'padding-left'})}),(i=>{var{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e}=i;return a({sizes:{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e},cssProperty:'margin'})}),(i=>{var{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e}=i;return a({sizes:{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e},cssProperty:'margin-top'})}),(i=>{var{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e}=i;return a({sizes:{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e},cssProperty:'margin-right'})}),(i=>{var{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e}=i;return a({sizes:{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e},cssProperty:'margin-bottom'})}),(i=>{var{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e}=i;return a({sizes:{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e},cssProperty:'margin-left'})}),(i=>i.fontSize?o(i.fontSize,'font-size'):null),(i=>{var{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e}=i;return a({sizes:{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e},cssProperty:'font-size'})}),(i=>i.height?o(i.height,'height'):null),(i=>{var{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e}=i;return a({sizes:{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e},cssProperty:'height'})}),(i=>i.width?o(g(i.width),i.fluid&&'auto'!==i.width?'max-width':'width'):null),(i=>{var{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e,fluid:d,width:p}=i;return a({sizes:{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e},cssProperty:d&&'auto'!==p?'max-width':'width',customSizeHandler:g})}),(i=>i.round&&i.size?o('string'==typeof i.size&&p[i.size]?p[i.size]:i.size,u):null),(i=>i.fluid?o(i.fluid,f):null),(i=>{var{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e}=i;return a({sizes:{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e},cssProperty:f})}),(i=>i.disabled?h:null),(i=>i.disabled||i.loading?null:c));export{L as Content,S as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveNamedProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n l: 52,\n m: 48,\n s: 40,\n xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst loading = 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: ${loadingAnimation} 2s linear infinite;\n /* pointer-events: none; */\n cursor: progress;\n`\n\nconst rounded = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: ${(props) => props.theme.colors.mercury};\n color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n ${(props: ButtonProps & { theme: DefaultTheme }) => {\n if (!props.color || !props.fontColor) return null\n\n return css`\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n `\n }}\n }\n ${(props) =>\n (props.inverted || props.basic) && props.fontColor && props.color\n ? css`\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 : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n return css`\n width: ${size as number}${sizing};\n height: ${size as number}${sizing};\n font-size: ${0.44 * (size as number)}${sizing};\n line-height: ${0.44 * (size as number)}${sizing};\n padding: ${0.28 * (size as number)}${sizing};\n `\n}\n\nconst fluid: CalcProperty = () => {\n return css`\n min-width: initial;\n width: 100%;\n `\n}\n\nexport const Content = styled.span`\n display: inline-block;\n line-height: 1;\n vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n shouldForwardProp: (prop) =>\n [\n 'children',\n 'className',\n 'style',\n 'target',\n 'to',\n 'id',\n 'href',\n 'ref',\n 'onClick',\n 'type',\n 'onMouseEnter',\n 'onMouseLeave',\n 'form',\n 'rel',\n ].includes(prop) || prop.includes('data'),\n})`\n -webkit-box-sizing: border-box !important;\n -moz-box-sizing: border-box !important;\n -ms-box-sizing: border-box !important;\n box-sizing: border-box !important;\n position: relative;\n overflow: hidden;\n border: none;\n cursor: pointer;\n user-select: none;\n font-weight: 600;\n padding-top: 0;\n padding-bottom: 0;\n text-decoration: none;\n justify-content: center;\n align-items: center;\n text-align: center;\n transition: 0.2s all;\n white-space: nowrap;\n appearance: none;\n vertical-align: top;\n & + & {\n margin-left: 1em;\n ${(props) =>\n props.noSpacing\n ? css`\n margin-left: auto;\n `\n : null}\n }\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.loading ? loading : null)}\n ${(props) => (props.rounded ? rounded : null)}\n ${(props) => (props.color ? color(props.color, props.inverted || props.basic ? 'color' : 'background-color') : null)}\n ${(props) =>\n props.fontColor ? color(props.fontColor, props.inverted || props.basic ? 'background-color' : 'color') : null}\n ${(props) =>\n props.basic\n ? css`\n background-color: transparent;\n `\n : null}\n\n ${(props) =>\n props.round\n ? css`\n border-radius: 100%;\n letter-spacing: 0.5px;\n & > * {\n display: inline-block !important;\n vertical-align: middle !important;\n }\n .icon {\n vertical-align: middle;\n\n & > * {\n vertical-align: middle !important;\n }\n svg {\n vertical-align: middle;\n }\n }\n `\n : css`\n .icon {\n display: inline-block;\n font-size: inherit;\n line-height: 0;\n vertical-align: middle;\n & > * {\n vertical-align: baseline !important;\n }\n & + ${Content} {\n margin-left: 10px;\n }\n }\n `}\n\n &:focus {\n outline: 0;\n }\n\n /** BEGIN paddings */\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 /** END paddings */ \n\n /** BEGIN margins */\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 /** END margins */ \n\n /** BEGIN Responsive paddings */\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n responsiveNamedProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })}\n /** END Responsive paddings */ \n\n /** BEGIN Responsive margins */\n ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })}\n /** END Responsive margins */\n\n /** BEGIN Responsive font-size */\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveNamedProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n /** END Responsive font-size */\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) =>\n responsiveNamedProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n \n\n ${(props) =>\n props.round && props.size\n ? property(\n typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n roundSize\n )\n : null}\n \n\n ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n responsiveNamedProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","basic","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","cssProperty","_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","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","chooseWidthValue","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveNamedProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n l: 52,\n m: 48,\n s: 40,\n xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst loading = 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: ${loadingAnimation} 2s linear infinite;\n /* pointer-events: none; */\n cursor: progress;\n`\n\nconst rounded = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: ${(props) => props.theme.colors.mercury};\n color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n ${(props: ButtonProps & { theme: DefaultTheme }) => {\n if (!props.color || !props.fontColor) return null\n\n return css`\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n `\n }}\n }\n ${(props) =>\n (props.inverted || props.basic) && props.fontColor && props.color\n ? css`\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 : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n return css`\n width: ${size as number}${sizing};\n height: ${size as number}${sizing};\n font-size: ${0.44 * (size as number)}${sizing};\n line-height: ${0.44 * (size as number)}${sizing};\n padding: ${0.28 * (size as number)}${sizing};\n `\n}\n\nconst fluid: CalcProperty = () => {\n return css`\n min-width: initial;\n width: 100%;\n `\n}\n\nexport const Content = styled.span`\n display: inline-block;\n line-height: 1;\n vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n shouldForwardProp: (prop) =>\n [\n 'children',\n 'className',\n 'form',\n 'href',\n 'id',\n 'onClick',\n 'onClickCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'ref',\n 'rel',\n 'style',\n 'target',\n 'to',\n 'type',\n ].includes(prop) || prop.includes('data'),\n})`\n -webkit-box-sizing: border-box !important;\n -moz-box-sizing: border-box !important;\n -ms-box-sizing: border-box !important;\n box-sizing: border-box !important;\n position: relative;\n overflow: hidden;\n border: none;\n cursor: pointer;\n user-select: none;\n font-weight: 600;\n padding-top: 0;\n padding-bottom: 0;\n text-decoration: none;\n justify-content: center;\n align-items: center;\n text-align: center;\n transition: 0.2s all;\n white-space: nowrap;\n appearance: none;\n vertical-align: top;\n & + & {\n margin-left: 1em;\n ${(props) =>\n props.noSpacing\n ? css`\n margin-left: auto;\n `\n : null}\n }\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.loading ? loading : null)}\n ${(props) => (props.rounded ? rounded : null)}\n ${(props) => (props.color ? color(props.color, props.inverted || props.basic ? 'color' : 'background-color') : null)}\n ${(props) =>\n props.fontColor ? color(props.fontColor, props.inverted || props.basic ? 'background-color' : 'color') : null}\n ${(props) =>\n props.basic\n ? css`\n background-color: transparent;\n `\n : null}\n\n ${(props) =>\n props.round\n ? css`\n border-radius: 100%;\n letter-spacing: 0.5px;\n & > * {\n display: inline-block !important;\n vertical-align: middle !important;\n }\n .icon {\n vertical-align: middle;\n\n & > * {\n vertical-align: middle !important;\n }\n svg {\n vertical-align: middle;\n }\n }\n `\n : css`\n .icon {\n display: inline-block;\n font-size: inherit;\n line-height: 0;\n vertical-align: middle;\n & > * {\n vertical-align: baseline !important;\n }\n & + ${Content} {\n margin-left: 10px;\n }\n }\n `}\n\n &:focus {\n outline: 0;\n }\n\n /** BEGIN paddings */\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 /** END paddings */\n\n /** BEGIN margins */\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 /** END margins */\n\n /** BEGIN Responsive paddings */\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n responsiveNamedProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })}\n /** END Responsive paddings */\n\n /** BEGIN Responsive margins */\n ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })}\n /** END Responsive margins */\n\n /** BEGIN Responsive font-size */\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveNamedProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n /** END Responsive font-size */\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) =>\n responsiveNamedProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n\n\n ${(props) =>\n props.round && props.size\n ? property(\n typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n roundSize\n )\n : null}\n\n\n ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n responsiveNamedProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","basic","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","cssProperty","_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","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","chooseWidthValue","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"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"}
|
package/dts/index.d.ts
CHANGED
|
@@ -332,7 +332,7 @@ declare type RGB = `rgb(${number}, ${number}, ${number})`;
|
|
|
332
332
|
declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
|
|
333
333
|
declare type ThemePreset = 'default' | 'brand';
|
|
334
334
|
declare type ThemeMode = 'light' | 'dark';
|
|
335
|
-
declare type
|
|
335
|
+
declare type ComponentContext<P> = Omit<Partial<P>, 'onClick' | 'className' | 'style'>;
|
|
336
336
|
interface Tooltiped {
|
|
337
337
|
innerRef?: React.LegacyRef<HTMLElement>;
|
|
338
338
|
onMouseEnter?: () => void;
|
|
@@ -414,7 +414,7 @@ interface Theme {
|
|
|
414
414
|
mode: ThemeMode;
|
|
415
415
|
preset: ThemePreset;
|
|
416
416
|
components?: {
|
|
417
|
-
Arrow?:
|
|
417
|
+
Arrow?: ComponentContext<ArrowProps>;
|
|
418
418
|
};
|
|
419
419
|
}
|
|
420
420
|
|
|
@@ -2578,4 +2578,4 @@ declare namespace Select {
|
|
|
2578
2578
|
var displayName: string;
|
|
2579
2579
|
}
|
|
2580
2580
|
|
|
2581
|
-
export { ActionBtn, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames,
|
|
2581
|
+
export { ActionBtn, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, ComponentContext, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemePreset, ThemeProvider, Tooltip, Tooltiped, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, 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 };
|
package/hooks/use-theme.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useTheme as e}from'styled-components';import{defaultTheme as t}from'../theme/themes.js';function m(){var m=e();return'object'==typeof m&&Object.keys(m).length?m:t}export{m as
|
|
1
|
+
import{useTheme as e}from'styled-components';import{defaultTheme as t}from'../theme/themes.js';function m(){var m=e();return'object'==typeof m&&null!==m&&Object.keys(m).length>0?m:t}export{m as useFallbackTheme};
|
|
2
2
|
//# sourceMappingURL=use-theme.js.map
|
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
|
|
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":"+FAIO,SAASA,IACd,IAAMC,EAAeC,IAKrB,MAF0B,iBAAjBD,GAA8C,OAAjBA,GAAyBE,OAAOC,KAAKH,GAAcI,OAAS,EAEtEJ,EAAeK"}
|