npm - @foxford/ui - Versions diffs - 2.59.0-beta-92b12b1-20250115 → 2.61.0-beta-5e98b7f-20250131 - Mend

@foxford/ui 2.59.0-beta-92b12b1-20250115 → 2.61.0-beta-5e98b7f-20250131

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.

Files changed (318) hide show

package/components/Switcher/style.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{getColor}from'../../mixins/color.mjs';const Input=styled.input.withConfig({displayName:"Switcher__Input",componentId:"ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);const Label=styled.label.withConfig({displayName:"Switcher__Label",componentId:"ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);const Switcher=styled.label.withConfig({displayName:"Switcher",componentId:"ui__sc-w14piw-2"})(["position:relative;display:block;box-sizing:border-box;width:","px;height:","px;cursor:pointer;user-select:none;transition:background 0.3s ease,background-image 0.3s ease;border-radius:","px;flex:0 0 auto;&::before{position:absolute;top:","px;left:","px;display:block;width:","px;height:","px;content:'';transition:background 0.3s ease,left 0.3s ease;transform:translateZ(0);border-radius:50%;}"],(e=>e.switcherWidth),(e=>e.switcherHeight),(e=>e.borderRadius),(({switcherHeight:e,dotSize:o})=>(e-o)/2),(({switcherHeight:e,dotSize:o})=>(e-o)/2),(e=>e.dotSize),(e=>e.dotSize));const disabledStyles=`\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ${Switcher} {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    &::before {\n      box-shadow: none;\n    }\n  }\n\n  & ${Label} {\n    cursor: not-allowed;\n  }\n`;const checkedStyles=css(["& ","{&::before{left:","px;}}"],Switcher,(({switcherWidth:e,switcherHeight:o,dotSize:n})=>e-n-(o-n)/2));const baseStyles=css(["",""],(e=>`\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: ${e.switcherHeight}px;\n    line-height: ${e.switcherHeight}px;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n  `));const defaultPresetStyle=css(["",""],(e=>{const o=e.color||'atlantis';return`\n      & ${Switcher} {\n        box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n        background-color: #eaecf3;\n\n        &::before {\n          background-color: ${e.theme.colors.white};\n          box-shadow: ${e.disabled?'none':'0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n        }\n\n        ${e.inactiveColor?`\n                background-image: linear-gradient(\n                  to right,\n                  ${tinycolor(getColor(e.inactiveColor,e)).lighten(10).toString()},\n                  ${getColor(e.inactiveColor,e)}\n                );\n              `:''}\n\n        ${e.checked?`\n                background-image: linear-gradient(\n                  to right,\n                  ${tinycolor(getColor(o,e)).lighten(10).toString()},\n                  ${getColor(o,e)}\n                );\n              `:''}\n      }\n\n      & ${Input}:focus-visible + ${Switcher} {\n        outline: 1px solid ${getColor(o,e)};\n        outline-offset: 2px;\n      }\n    `}));const brandPresetStyles=css(["",""],(e=>`\n    & ${Switcher} {\n      background-color: ${e.disabled?e.theme.colors[e.checked?'bg-disabled-active':'bg-disabled-small']:e.theme.colors[e.checked?'bg-brand-primary-basic':'bg-onmain-tertiary']};\n\n      &::before {\n        background-color: ${e.theme.colors['bg-oncolor-primary']};\n        box-shadow: ${e.disabled?'none':'0px 2px 4px rgba(0, 0, 0, 0.08)'};\n      }\n\n      ${!e.checked&&e.inactiveColor?`background-color: ${getColor(e.inactiveColor,e)};`:''}\n      ${e.checked&&e.color?`background-color: ${getColor(e.color,e)};`:''}\n    }\n\n    & ${Input}:focus-visible + ${Switcher} {\n      box-shadow: 0 0 0 2px ${e.theme.colors.white}, 0 0 0 4px ${e.theme.colors['border-focus']};\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  `));const Root=styled.div.withConfig({shouldForwardProp:e=>['children','className','style'].includes(e)}).withConfig({displayName:"Switcher__Root",componentId:"ui__sc-w14piw-3"})([""," "," "," ",""],baseStyles,(e=>e.checked?checkedStyles:''),(e=>e.disabled?disabledStyles:''),(({brandPresetUsed:e})=>e?brandPresetStyles:defaultPresetStyle));export{Input,Label,Root,Switcher};
+import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{getColor}from'../../mixins/color.mjs';const Input=styled.input.withConfig({displayName:"Switcher__Input",componentId:"ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);const Label=styled.label.withConfig({displayName:"Switcher__Label",componentId:"ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);const Switcher=styled.label.withConfig({displayName:"Switcher",componentId:"ui__sc-w14piw-2"})(["position:relative;display:block;box-sizing:border-box;width:","px;height:","px;cursor:pointer;user-select:none;transition:background 0.3s ease,background-image 0.3s ease;border-radius:","px;flex:0 0 auto;&::before{position:absolute;top:","px;left:","px;display:block;width:","px;height:","px;content:'';transition:background 0.3s ease,left 0.3s ease;transform:translateZ(0);border-radius:50%;}"],(e=>e.switcherWidth),(e=>e.switcherHeight),(e=>e.borderRadius),(({switcherHeight:e,dotSize:o})=>(e-o)/2),(({switcherHeight:e,dotSize:o})=>(e-o)/2),(e=>e.dotSize),(e=>e.dotSize));const disabledStyles=`\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ${Switcher} {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    &::before {\n      box-shadow: none;\n    }\n  }\n\n  & ${Label} {\n    cursor: not-allowed;\n  }\n`;const checkedStyles=css(["& ","{&::before{left:","px;}}"],Switcher,(({switcherWidth:e,switcherHeight:o,dotSize:n})=>e-n-(o-n)/2));const baseStyles=css(["",""],(e=>`\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: ${e.switcherHeight}px;\n    line-height: ${e.switcherHeight}px;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n  `));const defaultPresetStyle=css(["",""],(e=>{const o=e.color||'atlantis';return`\n      & ${Switcher} {\n        box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n        background-color: #eaecf3;\n\n        &::before {\n          background-color: ${e.theme.colors.white};\n          box-shadow: ${e.disabled?'none':'0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n        }\n\n        ${e.inactiveColor?`\n                background-image: linear-gradient(\n                  to right,\n                  ${tinycolor(getColor(e.inactiveColor,e)).lighten(10).toString()},\n                  ${getColor(e.inactiveColor,e)}\n                );\n              `:''}\n\n        ${e.checked?`\n                background-image: linear-gradient(\n                  to right,\n                  ${tinycolor(getColor(o,e)).lighten(10).toString()},\n                  ${getColor(o,e)}\n                );\n              `:''}\n      }\n\n      & ${Input}:focus-visible + ${Switcher} {\n        outline: 1px solid ${getColor(o,e)};\n        outline-offset: 2px;\n      }\n    `}));const brandPresetStyles=css(["",""],(e=>`\n    & ${Switcher} {\n      background-color: ${e.disabled?e.theme.colors[e.checked?'bg-disabled-active':'bg-disabled-small']:e.theme.colors[e.checked?'bg-brand-primary-basic':'bg-onmain-tertiary']};\n\n      &::before {\n        background-color: ${e.theme.colors['bg-oncolor-primary']};\n        box-shadow: ${e.disabled?'none':'0px 2px 4px rgba(0, 0, 0, 0.08)'};\n      }\n\n      ${!e.checked&&e.inactiveColor?`background-color: ${getColor(e.inactiveColor,e)};`:''}\n      ${e.checked&&e.color?`background-color: ${getColor(e.color,e)};`:''}\n    }\n\n    & ${Input}:focus-visible + ${Switcher} {\n      box-shadow: 0 0 0 2px ${e.theme.colors.white}, 0 0 0 4px ${e.theme.colors['border-focus']};\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  `));const Root=styled.div.withConfig({shouldForwardProp:e=>['children','className','style'].includes(e)}).withConfig({displayName:"Switcher__Root",componentId:"ui__sc-w14piw-3"})([""," "," "," ",""],baseStyles,(e=>e.checked?checkedStyles:''),(e=>e.disabled?disabledStyles:''),(({brandPresetUsed:e})=>e?brandPresetStyles:defaultPresetStyle));export{Input,Label,Root,Switcher};
 //# sourceMappingURL=style.mjs.map

package/components/Switcher/style.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Switcher/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport type { StyledSwitcherProps, SwitcherPropsByPreset } from './types'\n\nexport const Input = styled.input`\n position: absolute;\n overflow: visible;\n z-index: -1;\n opacity: 0;\n width: 0;\n height: 0;\n margin: 0;\n`\n\nexport const Label = styled.label`\n display: inline;\n padding-left: 14px;\n cursor: pointer;\n user-select: none;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\nexport const Switcher = styled.label<SwitcherPropsByPreset>`\n position: relative;\n display: block;\n box-sizing: border-box;\n width: ${(props) => props.switcherWidth}px;\n height: ${(props) => props.switcherHeight}px;\n cursor: pointer;\n user-select: none;\n transition: background 0.3s ease, background-image 0.3s ease;\n border-radius: ${(props) => props.borderRadius}px;\n flex: 0 0 auto;\n\n &::before {\n position: absolute;\n top: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n left: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n display: block;\n width: ${(props) => props.dotSize}px;\n height: ${(props) => props.dotSize}px;\n content: '';\n transition: background 0.3s ease, left 0.3s ease;\n transform: translateZ(0);\n border-radius: 50%;\n }\n`\n\nconst disabledStyles = `\n cursor: not-allowed;\n opacity: 0.7;\n\n & ${Switcher} {\n cursor: not-allowed;\n box-shadow: none;\n\n &::before {\n box-shadow: none;\n }\n }\n\n & ${Label} {\n cursor: not-allowed;\n }\n`\n\nconst checkedStyles = css<StyledSwitcherProps>`\n & ${Switcher} {\n &::before {\n left: ${({ switcherWidth, switcherHeight, dotSize }) =>\n switcherWidth - dotSize - (switcherHeight - dotSize) / 2}px;\n }\n }\n`\n\nconst baseStyles = css<StyledSwitcherProps>`\n ${(props) => `\n position: relative;\n display: inline-flex;\n flex-direction: row;\n box-sizing: border-box;\n height: ${props.switcherHeight}px;\n line-height: ${props.switcherHeight}px;\n vertical-align: middle;\n justify-content: flex-start;\n align-content: center;\n align-items: center;\n max-width: 100%;\n color: inherit;\n `}\n`\n\nconst defaultPresetStyle = css<StyledSwitcherProps>`\n ${(props) => {\n const color = props.color \|\| 'atlantis'\n\n return `\n & ${Switcher} {\n box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n background-color: #eaecf3;\n\n &::before {\n background-color: ${props.theme.colors.white};\n box-shadow: ${props.disabled ? 'none' : '0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n }\n\n ${\n props.inactiveColor\n ? `\n background-image: linear-gradient(\n to right,\n ${tinycolor(getColor(props.inactiveColor, props)).lighten(10).toString()},\n ${getColor(props.inactiveColor, props)}\n );\n `\n : ''\n }\n\n ${\n props.checked\n ? `\n background-image: linear-gradient(\n to right,\n ${tinycolor(getColor(color, props)).lighten(10).toString()},\n ${getColor(color, props)}\n );\n `\n : ''\n }\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n outline: 1px solid ${getColor(color, props)};\n outline-offset: 2px;\n }\n `\n }}\n`\n\nconst brandPresetStyles = css<StyledSwitcherProps>`\n ${(props) => `\n & ${Switcher} {\n background-color: ${\n props.disabled\n ? props.theme.colors[props.checked ? 'bg-disabled-active' : 'bg-disabled-small']\n : props.theme.colors[props.checked ? 'bg-brand-primary-basic' : 'bg-onmain-tertiary']\n };\n\n &::before {\n background-color: ${props.theme.colors['bg-oncolor-primary']};\n box-shadow: ${props.disabled ? 'none' : '0px 2px 4px rgba(0, 0, 0, 0.08)'};\n }\n\n ${!props.checked && props.inactiveColor ? `background-color: ${getColor(props.inactiveColor, props)};` : ''}\n ${props.checked && props.color ? `background-color: ${getColor(props.color, props)};` : ''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n`\n\nexport const Root = styled.div.withConfig<StyledSwitcherProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n ${baseStyles}\n\n ${(props) => (props.checked ? checkedStyles : '')}\n ${(props) => (props.disabled ? disabledStyles : '')}\n ${({ brandPresetUsed }) => (brandPresetUsed ? brandPresetStyles : defaultPresetStyle)}\n`\n"],"names":["Input","styled","input","withConfig","displayName","componentId","Label","label","Switcher","props","switcherWidth","switcherHeight","borderRadius","dotSize","disabledStyles","checkedStyles","css","baseStyles","defaultPresetStyle","color","theme","colors","white","disabled","inactiveColor","tinycolor","getColor","lighten","toString","checked","brandPresetStyles","Root","div","shouldForwardProp","prop","includes","brandPresetUsed"],"mappings":"~~iMAKaA~~,MAAQC,OAAOC,MAAKC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAQpB,CAAA,6FAEYK,MAAQL,OAAOM,MAAKJ,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAQpB,CAAA,sIAEYO,SAAWP,OAAOM,MAAKJ,WAAA,CAAAC,YAAA,WAAAC,YAAA,mBAAZJ,CAAY,CAAA,+DAAA,aAAA,+GAAA,oDAAA,WAAA,0BAAA,aAAA,6GAIxBQ,GAAUA,EAAMC,gBACfD,GAAUA,EAAME,iBAITF,GAAUA,EAAMG,eAKzB,EAAGD,iBAAgBE,cAAeF,EAAiBE,GAAW,IAC7D,EAAGF,iBAAgBE,cAAeF,EAAiBE,GAAW,IAE5DJ,GAAUA,EAAMI,UACfJ,GAAUA,EAAMI,UAQ/B,MAAMC,eAAiB,oDAIjBN,8HASAF,2CAKN,MAAMS,cAAgBC,IAChBR,CAAAA,KAAAA,mBAAAA,SAAAA,UAEQ,EAAGE,gBAAeC,iBAAgBE,aACxCH,EAAgBG,GAAWF,EAAiBE,GAAW,IAK/D,MAAMI,WAAaD,IAAG,CAAA,GAAA,KACjBP,GAAU,4HAKDA,EAAME,uCACDF,EAAME,0LAUzB,MAAMO,mBAAqBF,IAAG,CAAA,GAAA,KACzBP,IACD,MAAMU,EAAQV,EAAMU,OAAS,WAE7B,MAAO,aACDX,kKAKoBC,EAAMW,MAAMC,OAAOC,iCACzBb,EAAMc,SAAW,OAAS,0DAIxCd,EAAMe,cACF,wGAGMC,UAAUC,SAASjB,EAAMe,cAAef,IAAQkB,QAAQ,IAAIC,kCAC5DF,SAASjB,EAAMe,cAAef,yCAGpC,iBAIJA,EAAMoB,QACF,wGAGMJ,UAAUC,SAASP,EAAOV,IAAQkB,QAAQ,IAAIC,kCAC9CF,SAASP,EAAOV,yCAGtB,0BAIJT,yBAAyBQ,0CACNkB,SAASP,EAAOV,kDAGxC,IAIL,MAAMqB,kBAAoBd,IAAG,CAAA,GAAA,KACxBP,GAAU,WACPD,uCAEAC,EAAMc,SACFd,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,qBAAuB,qBAC1DpB,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,yBAA2B,0EAI9CpB,EAAMW,MAAMC,OAAO,+CACzBZ,EAAMc,SAAW,OAAS,yDAGvCd,EAAMoB,SAAWpB,EAAMe,cAAgB,qBAAqBE,SAASjB,EAAMe,cAAef,MAAY,aACvGA,EAAMoB,SAAWpB,EAAMU,MAAQ,qBAAqBO,SAASjB,EAAMU,MAAOV,MAAY,sBAGtFT,yBAAyBQ,2CACHC,EAAMW,MAAMC,OAAOC,oBAAoBb,EAAMW,MAAMC,OAAO,mGAOjF,MAAMU,KAAO9B,OAAO+B,IAAI7B,WAAgC,CAC7D8B,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KACzE/B,WAAA,CAAAC,YAAA,iBAAAC,YAAA,mBAFkBJ,CAGhBgB,CAAAA,GAAAA,IAAAA,IAAAA,IAAAA,IAAAA,YAECR,GAAWA,EAAMoB,QAAUd,cAAgB,KAC3CN,GAAWA,EAAMc,SAAWT,eAAiB,KAC9C,EAAGsB,qBAAuBA,EAAkBN,kBAAoBZ"}
1	+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Switcher/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport type { StyledSwitcherProps, SwitcherPropsByPreset } from './types'\n\nexport const Input = styled.input`\n position: absolute;\n overflow: visible;\n z-index: -1;\n opacity: 0;\n width: 0;\n height: 0;\n margin: 0;\n`\n\nexport const Label = styled.label`\n display: inline;\n padding-left: 14px;\n cursor: pointer;\n user-select: none;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\nexport const Switcher = styled.label<SwitcherPropsByPreset>`\n position: relative;\n display: block;\n box-sizing: border-box;\n width: ${(props) => props.switcherWidth}px;\n height: ${(props) => props.switcherHeight}px;\n cursor: pointer;\n user-select: none;\n transition: background 0.3s ease, background-image 0.3s ease;\n border-radius: ${(props) => props.borderRadius}px;\n flex: 0 0 auto;\n\n &::before {\n position: absolute;\n top: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n left: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n display: block;\n width: ${(props) => props.dotSize}px;\n height: ${(props) => props.dotSize}px;\n content: '';\n transition: background 0.3s ease, left 0.3s ease;\n transform: translateZ(0);\n border-radius: 50%;\n }\n`\n\nconst disabledStyles = `\n cursor: not-allowed;\n opacity: 0.7;\n\n & ${Switcher} {\n cursor: not-allowed;\n box-shadow: none;\n\n &::before {\n box-shadow: none;\n }\n }\n\n & ${Label} {\n cursor: not-allowed;\n }\n`\n\nconst checkedStyles = css<StyledSwitcherProps>`\n & ${Switcher} {\n &::before {\n left: ${({ switcherWidth, switcherHeight, dotSize }) =>\n switcherWidth - dotSize - (switcherHeight - dotSize) / 2}px;\n }\n }\n`\n\nconst baseStyles = css<StyledSwitcherProps>`\n ${(props) => `\n position: relative;\n display: inline-flex;\n flex-direction: row;\n box-sizing: border-box;\n height: ${props.switcherHeight}px;\n line-height: ${props.switcherHeight}px;\n vertical-align: middle;\n justify-content: flex-start;\n align-content: center;\n align-items: center;\n max-width: 100%;\n color: inherit;\n `}\n`\n\nconst defaultPresetStyle = css<StyledSwitcherProps>`\n ${(props) => {\n const color = props.color \|\| 'atlantis'\n\n return `\n & ${Switcher} {\n box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n background-color: #eaecf3;\n\n &::before {\n background-color: ${props.theme.colors.white};\n box-shadow: ${props.disabled ? 'none' : '0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n }\n\n ${\n props.inactiveColor\n ? `\n background-image: linear-gradient(\n to right,\n ${tinycolor(getColor(props.inactiveColor, props)).lighten(10).toString()},\n ${getColor(props.inactiveColor, props)}\n );\n `\n : ''\n }\n\n ${\n props.checked\n ? `\n background-image: linear-gradient(\n to right,\n ${tinycolor(getColor(color, props)).lighten(10).toString()},\n ${getColor(color, props)}\n );\n `\n : ''\n }\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n outline: 1px solid ${getColor(color, props)};\n outline-offset: 2px;\n }\n `\n }}\n`\n\nconst brandPresetStyles = css<StyledSwitcherProps>`\n ${(props) => `\n & ${Switcher} {\n background-color: ${\n props.disabled\n ? props.theme.colors[props.checked ? 'bg-disabled-active' : 'bg-disabled-small']\n : props.theme.colors[props.checked ? 'bg-brand-primary-basic' : 'bg-onmain-tertiary']\n };\n\n &::before {\n background-color: ${props.theme.colors['bg-oncolor-primary']};\n box-shadow: ${props.disabled ? 'none' : '0px 2px 4px rgba(0, 0, 0, 0.08)'};\n }\n\n ${!props.checked && props.inactiveColor ? `background-color: ${getColor(props.inactiveColor, props)};` : ''}\n ${props.checked && props.color ? `background-color: ${getColor(props.color, props)};` : ''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n`\n\nexport const Root = styled.div.withConfig<StyledSwitcherProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n ${baseStyles}\n\n ${(props) => (props.checked ? checkedStyles : '')}\n ${(props) => (props.disabled ? disabledStyles : '')}\n ${({ brandPresetUsed }) => (brandPresetUsed ? brandPresetStyles : defaultPresetStyle)}\n`\n"],"names":["Input","styled","input","withConfig","displayName","componentId","Label","label","Switcher","props","switcherWidth","switcherHeight","borderRadius","dotSize","disabledStyles","checkedStyles","css","baseStyles","defaultPresetStyle","color","theme","colors","white","disabled","inactiveColor","tinycolor","getColor","lighten","toString","checked","brandPresetStyles","Root","div","shouldForwardProp","prop","includes","brandPresetUsed"],"mappings":"gIAKaA,MAAQC,OAAOC,MAAKC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAQpB,CAAA,6FAEYK,MAAQL,OAAOM,MAAKJ,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAQpB,CAAA,sIAEYO,SAAWP,OAAOM,MAAKJ,WAAA,CAAAC,YAAA,WAAAC,YAAA,mBAAZJ,CAAY,CAAA,+DAAA,aAAA,+GAAA,oDAAA,WAAA,0BAAA,aAAA,6GAIxBQ,GAAUA,EAAMC,gBACfD,GAAUA,EAAME,iBAITF,GAAUA,EAAMG,eAKzB,EAAGD,iBAAgBE,cAAeF,EAAiBE,GAAW,IAC7D,EAAGF,iBAAgBE,cAAeF,EAAiBE,GAAW,IAE5DJ,GAAUA,EAAMI,UACfJ,GAAUA,EAAMI,UAQ/B,MAAMC,eAAiB,oDAIjBN,8HASAF,2CAKN,MAAMS,cAAgBC,IAChBR,CAAAA,KAAAA,mBAAAA,SAAAA,UAEQ,EAAGE,gBAAeC,iBAAgBE,aACxCH,EAAgBG,GAAWF,EAAiBE,GAAW,IAK/D,MAAMI,WAAaD,IAAG,CAAA,GAAA,KACjBP,GAAU,4HAKDA,EAAME,uCACDF,EAAME,0LAUzB,MAAMO,mBAAqBF,IAAG,CAAA,GAAA,KACzBP,IACD,MAAMU,EAAQV,EAAMU,OAAS,WAE7B,MAAO,aACDX,kKAKoBC,EAAMW,MAAMC,OAAOC,iCACzBb,EAAMc,SAAW,OAAS,0DAIxCd,EAAMe,cACF,wGAGMC,UAAUC,SAASjB,EAAMe,cAAef,IAAQkB,QAAQ,IAAIC,kCAC5DF,SAASjB,EAAMe,cAAef,yCAGpC,iBAIJA,EAAMoB,QACF,wGAGMJ,UAAUC,SAASP,EAAOV,IAAQkB,QAAQ,IAAIC,kCAC9CF,SAASP,EAAOV,yCAGtB,0BAIJT,yBAAyBQ,0CACNkB,SAASP,EAAOV,kDAGxC,IAIL,MAAMqB,kBAAoBd,IAAG,CAAA,GAAA,KACxBP,GAAU,WACPD,uCAEAC,EAAMc,SACFd,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,qBAAuB,qBAC1DpB,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,yBAA2B,0EAI9CpB,EAAMW,MAAMC,OAAO,+CACzBZ,EAAMc,SAAW,OAAS,yDAGvCd,EAAMoB,SAAWpB,EAAMe,cAAgB,qBAAqBE,SAASjB,EAAMe,cAAef,MAAY,aACvGA,EAAMoB,SAAWpB,EAAMU,MAAQ,qBAAqBO,SAASjB,EAAMU,MAAOV,MAAY,sBAGtFT,yBAAyBQ,2CACHC,EAAMW,MAAMC,OAAOC,oBAAoBb,EAAMW,MAAMC,OAAO,mGAOjF,MAAMU,KAAO9B,OAAO+B,IAAI7B,WAAgC,CAC7D8B,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KACzE/B,WAAA,CAAAC,YAAA,iBAAAC,YAAA,mBAFkBJ,CAGhBgB,CAAAA,GAAAA,IAAAA,IAAAA,IAAAA,IAAAA,YAECR,GAAWA,EAAMoB,QAAUd,cAAgB,KAC3CN,GAAWA,EAAMc,SAAWT,eAAiB,KAC9C,EAAGsB,qBAAuBA,EAAkBN,kBAAoBZ"}

package/components/Tab/Tab.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Text=require('../Text/Text.js');const Tab=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:t="m",type:s="button",textProps:i={},children:a,theme:n,...o}=e;const u={as:'span',size:'inherit',color:'inherit',weight:'inherit'};return require$$0.jsx(style.Root,{...o,size:t,tabTheme:n,type:o.as===void 0?s:void 0,ref:r,children:o.preset==='brand'?require$$0.jsxs(require$$0.Fragment,{children:[o.left&&require$$0.jsx(style.Edge,{}),require$$0.jsx(style.Content,{children:typeof a=='function'?a({baseTextProps:u,textProps:i}):require$$0.jsx(Text.Text,{...u,...i,children:a})}),o.right&&require$$0.jsx(style.Edge,{after:!0})]}):require$$0.jsx(require$$0.Fragment,{children:typeof a=='function'?a({baseTextProps:u,textProps:i}):require$$0.jsx(Text.Text,{...u,...i,children:a})})})})),{displayName:"Tab",sizes:e=>e.preset==='brand'?constants.SIZES:defaultConstants.SIZES_DEFAULT});exports.COMPONENT_NAME="Tab",exports.Tab=Tab;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const Tab=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:s="m",type:r="button",textProps:n={},children:i,theme:a,...o}=e;const x={as:'span',size:'inherit',color:'inherit',weight:'inherit'};return jsxRuntime.jsx(style.Root,{...o,size:s,tabTheme:a,type:o.as===void 0?r:void 0,ref:t,children:o.preset==='brand'?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[o.left&&jsxRuntime.jsx(style.Edge,{}),jsxRuntime.jsx(style.Content,{children:typeof i=='function'?i({baseTextProps:x,textProps:n}):jsxRuntime.jsx(Text.Text,{...x,...n,children:i})}),o.right&&jsxRuntime.jsx(style.Edge,{after:!0})]}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:typeof i=='function'?i({baseTextProps:x,textProps:n}):jsxRuntime.jsx(Text.Text,{...x,...n,children:i})})})})),{displayName:"Tab",sizes:e=>e.preset==='brand'?constants.SIZES:defaultConstants.SIZES_DEFAULT});exports.COMPONENT_NAME="Tab",exports.Tab=Tab;
 //# sourceMappingURL=Tab.js.map

package/components/Tab/style.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var arrow=require('./images/arrow.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardTabProp=style.createShouldForwardProp((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));const DEFAULT_STYLES={default:styled.css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `)),compact:styled.css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `)),crispyCompact:styled.css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `)),crispy:styled.css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `))};const Content=styled__default.default.span.withConfig({displayName:"Tab__Content",componentId:"ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);const Edge=styled__default.default(arrow.default).withConfig({shouldForwardProp:()=>!1}).withConfig({displayName:"Tab__Edge",componentId:"ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));const template=o=>`\n  & > ${Content} {\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    border-color: ${o.borderColor};\n  }\n  & > ${Edge} {\n    color: ${o.backgroundColor};\n    stroke: ${o.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${o.backgroundColorHover};\n    stroke: ${o.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${o.backgroundColorDisabled};\n    stroke: ${o.borderColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},onColored:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:o.theme.colors['bg-brand-primary-500'],borderColor:o.theme.colors['bg-onmain-primary'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:o.theme.colors['bg-onmain-primary'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette})))},black:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabProp}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:typeof o=='string'?o:`${o}${r}`})}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{const r=o.rounded?8:0;const e=o.left?0:r;const t=o.right?0:r;return`\n      box-sizing: border-box;\n      display: ${o.preset==='brand'?'inline-flex':'inline-block'};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${e}px ${t}px ${t}px ${e}px;\n        border-left-style: ${o.left?'none':'solid'};\n        border-right-style: ${o.right?'none':'solid'};\n        margin-left: ${o.left?-2:0}px;\n        margin-right: ${o.right?-2:0}px;\n      }\n    `}),(o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.onColored&&(r=COLOR_SCHEMA.onColored),o.outline?r.outline:r.default}return o.compact||o.tabTheme==='compact'?DEFAULT_STYLES.compact:o.crispyCompact||o.tabTheme==='crispyCompact'?DEFAULT_STYLES.crispyCompact:o.crispy||o.tabTheme==='crispy'?DEFAULT_STYLES.crispy:DEFAULT_STYLES.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(o=>o.color&&`color: ${color.getColor(o.color,o)};`),(o=>o.borderColor&&`border-color: ${color.getColor(o.borderColor,o)};`));exports.Content=Content,exports.Edge=Edge,exports.Root=Root;
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var arrow=require('./images/arrow.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardTabProp=style.createShouldForwardProp((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));const DEFAULT_STYLES={default:styled.css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `)),compact:styled.css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `)),crispyCompact:styled.css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `)),crispy:styled.css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `))};const Content=styled__default.default.span.withConfig({displayName:"Tab__Content",componentId:"ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);const Edge=styled__default.default(arrow.default).withConfig({shouldForwardProp:()=>!1}).withConfig({displayName:"Tab__Edge",componentId:"ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));const template=o=>`\n  & > ${Content} {\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    border-color: ${o.borderColor};\n  }\n  & > ${Edge} {\n    color: ${o.backgroundColor};\n    stroke: ${o.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${o.backgroundColorHover};\n    stroke: ${o.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${o.backgroundColorDisabled};\n    stroke: ${o.borderColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},onColored:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:o.theme.colors['bg-brand-primary-500'],borderColor:o.theme.colors['bg-onmain-primary'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:o.theme.colors['bg-onmain-primary'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette})))},black:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabProp}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:typeof o=='string'?o:`${o}${r}`})}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{const r=o.rounded?8:0;const e=o.left?0:r;const t=o.right?0:r;return`\n      box-sizing: border-box;\n      display: ${o.preset==='brand'?'inline-flex':'inline-block'};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${e}px ${t}px ${t}px ${e}px;\n        border-left-style: ${o.left?'none':'solid'};\n        border-right-style: ${o.right?'none':'solid'};\n        margin-left: ${o.left?-2:0}px;\n        margin-right: ${o.right?-2:0}px;\n      }\n    `}),(o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.onColored&&(r=COLOR_SCHEMA.onColored),o.outline?r.outline:r.default}return o.compact||o.tabTheme==='compact'?DEFAULT_STYLES.compact:o.crispyCompact||o.tabTheme==='crispyCompact'?DEFAULT_STYLES.crispyCompact:o.crispy||o.tabTheme==='crispy'?DEFAULT_STYLES.crispy:DEFAULT_STYLES.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(o=>o.color&&`color: ${color.getColor(o.color,o)};`),(o=>o.borderColor&&`border-color: ${color.getColor(o.borderColor,o)};`));exports.Content=Content,exports.Edge=Edge,exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/Tab/style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.js","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.svg?module'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'active',\n 'compact',\n 'crispy',\n 'crispyCompact',\n 'tabTheme',\n 'left',\n 'right',\n 'rounded',\n 'outline',\n 'onColored',\n 'black',\n ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n default: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n `}\n `,\n compact: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n `}\n `,\n crispyCompact: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n `}\n `,\n crispy: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 14px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n `}\n `,\n}\n\nexport const Content = styled.span`\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n flex-grow: 1;\n flex-shrink: 0;\n height: 100%;\n padding: 0 1em;\n border: 1px solid transparent;\n transition-property: background-color, border-color;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n box-sizing: border-box;\n flex-shrink: 0;\n height: 100%;\n transition-property: color, stroke;\n ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n & > ${Content} {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Edge} {\n color: ${palette.backgroundColor};\n stroke: ${palette.borderColor};\n }\n &:hover > ${Content} {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${Edge} {\n color: ${palette.backgroundColorHover};\n stroke: ${palette.borderColorHover};\n }\n &:disabled > ${Content} {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n &:disabled > ${Edge} {\n color: ${palette.backgroundColorDisabled};\n stroke: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n onColored: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n borderColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : props.theme.colors['bg-brand-primary-500'],\n borderColor: props.theme.colors['bg-onmain-primary'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n borderColorHover: props.theme.colors['bg-onmain-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n },\n black: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledTabProps>({\n shouldForwardProp: shouldForwardTabProp,\n })\n .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n height: '2.8em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n }\n },\n })`\n ${(props) => {\n const radius = props.rounded ? 8 : 0\n const leftRadius = props.left ? 0 : radius\n const rightRadius = props.right ? 0 : radius\n\n return `\n box-sizing: border-box;\n display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n & > ${Content}, \n & > ${Edge} {\n transition-duration: 250ms;\n }\n & > ${Content} {\n border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n border-left-style: ${props.left ? 'none' : 'solid'};\n border-right-style: ${props.right ? 'none' : 'solid'};\n margin-left: ${props.left ? -2 : 0}px;\n margin-right: ${props.right ? -2 : 0}px;\n }\n `\n }}\n\n ${(props) => {\n if (props.preset === 'brand') {\n let schema = COLOR_SCHEMA.default\n\n if (props.black) schema = COLOR_SCHEMA.black\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n return props.outline ? schema.outline : schema.default\n }\n\n if (props.compact \|\| props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n if (props.crispyCompact \|\| props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n if (props.crispy \|\| props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n return DEFAULT_STYLES.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","compact","crispyCompact","crispy","Content","styled","span","withConfig","displayName","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","tinycolor","darken","toString","outline","onColored","lighten","black","Root","button","attrs","dynamicSizeDeclaration","size","sizeUnits","height","fontSize","radius","rounded","leftRadius","left","rightRadius","right","preset","disabled","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"wjBAWA,MAAMA,qBAAuBC,MAAAA,yBAC1BC,IACE,CACC,SACA,UACA,SACA,gBACA,WACA,OACA,QACA,UACA,UACA,YACA,SACAC,SAASD,KAGf,MAAME,eAAiB,CACrBC,QAASC,OAAGA,IACPC,CAAAA,GAAAA,KAAAA,GAAU,iGAIFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,mDAEhDD,EAAME,MAAMC,OAAOC,uDAGnBJ,EAAME,MAAMC,OAAOC,4HAQlCE,QAASP,OAAGA,IACPC,CAAAA,GAAAA,KAAAA,GAAU,mGAIFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,mDAEhDD,EAAME,MAAMC,OAAOC,uDAGnBJ,EAAME,MAAMC,OAAOC,4HAQlCG,cAAeR,OAAGA,IACbC,CAAAA,GAAAA,KAAAA,GAAU,kIAKFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,mDAEhDD,EAAME,MAAMC,OAAOC,uDAGnBJ,EAAME,MAAMC,OAAOC,4HAQlCI,OAAQT,OAAGA,IACNC,CAAAA,GAAAA,KAAAA,GAAU,mIAKFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,mDAEhDD,EAAME,MAAMC,OAAOC,uDAGnBJ,EAAME,MAAMC,OAAOC,mIAUvBK,QAAUC,gBAAAA,QAAOC,KAAIC,WAAA,CAAAC,YAAA,eAAAC,YAAA,mBAAXJ,CAYtB,CAAA,0NAEM,MAAMK,KAAOL,gBAAMZ,QAACkB,eAAOJ,WAAW,CAC3CK,kBAAmBA,KAAM,IACzBL,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAFkBJ,CAElB,CAAA,oFAAA,KAKGV,GAAUA,EAAMkB,OAAS,+BAG9B,MAAMC,SAAYC,GAAwB,WAClCX,yBACKW,EAAQC,iCACGD,EAAQE,uCACZF,EAAQG,4BAEpBR,sBACKK,EAAQE,iCACPF,EAAQG,kCAERd,yBACDW,EAAQI,sCACGJ,EAAQK,4CACZL,EAAQM,uCAEdX,sBACDK,EAAQK,sCACPL,EAAQM,0CAELjB,yBACJW,EAAQO,yCACGP,EAAQQ,+CACZR,EAAQS,6CAEXd,sBACJK,EAAQQ,yCACPR,EAAQS,8BAItB,MAAMC,aAAe,CACnBhC,QAAS,CACPA,QAASC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,sBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,sBACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,wBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,uBAAuB6B,OAAO,GAAGC,WACnEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,uBAAuB6B,OAAO,GAAGC,WACnEN,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,YAGfc,QAASnC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,qBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,+BACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,wBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,sBAAsB6B,OAAO,GAAGC,WAClEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,+BACvBwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,aAIjBe,UAAW,CACTrC,QAASC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,qBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,yBAAyBiC,QAAQ,IAAIH,WACvEV,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,qBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,yBAAyBiC,QAAQ,IAAIH,WACvET,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,qBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,yBAAyBiC,QAAQ,GAAGH,WACtEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,qBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,yBAAyBiC,QAAQ,GAAGH,WACtEN,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,YAGfc,QAASnC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,qBACnBH,EAAME,MAAMC,OAAO,wBACvBoB,YAAavB,EAAME,MAAMC,OAAO,qBAChCqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,qBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,yBAAyB6B,OAAO,GAAGC,WACrEP,iBAAkB1B,EAAME,MAAMC,OAAO,qBACrCwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,aAIjBiB,MAAO,CACLvC,QAASC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,sBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,uBAAuB6B,OAAO,GAAGC,WACnEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,sBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,uBAAuB6B,OAAO,GAAGC,WACnEN,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,YAGfc,QAASnC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,qBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,+BACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,sBAClB4B,UAAAA,QAAU/B,EAAME,MAAMC,OAAO,sBAAsB6B,OAAO,GAAGC,WAClEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,+BACvBwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,cAMZ,MAAMkB,KAAO5B,gBAAAA,QAAO6B,OACxB3B,WAA2B,CAC1BK,kBAAmBxB,uBAEpB+C,MAAgE,CAC/DC,uBAAwBA,CAACC,EAAMC,KACtB,CACLC,OAAQ,QACRC,gBAAiBH,GAAS,SAAWA,EAAO,GAAGA,IAAOC,QAG1D/B,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAXgBJ,CAWhB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACCV,IACD,MAAM8C,EAAS9C,EAAM+C,QAAU,EAAI,EACnC,MAAMC,EAAahD,EAAMiD,KAAO,EAAIH,EACpC,MAAMI,EAAclD,EAAMmD,MAAQ,EAAIL,EAEtC,MAAO,mDAEM9C,EAAMoD,SAAW,QAAU,cAAgB,kCAC5CpD,EAAMqD,SAAW,cAAgB,2OASrC5C,wBACAM,mEAGAN,qCACauC,OAAgBE,OAAiBA,OAAiBF,oCAC9ChD,EAAMiD,KAAO,OAAS,yCACrBjD,EAAMmD,MAAQ,OAAS,kCAC9BnD,EAAMiD,MAAQ,EAAI,+BACjBjD,EAAMmD,OAAS,EAAI,qBAEtC,IAGAnD,IACD,GAAIA,EAAMoD,SAAW,QAAS,CAC5B,IAAIE,EAASxB,aAAahC,QAK1B,OAHIE,EAAMqC,QAAOiB,EAASxB,aAAaO,OACnCrC,EAAMmC,YAAWmB,EAASxB,aAAaK,WAEpCnC,EAAMkC,QAAUoB,EAAOpB,QAAUoB,EAAOxD,OACjD,CAEA,OAAIE,EAAMM,SAAWN,EAAMuD,WAAa,UAAkB1D,eAAeS,QACrEN,EAAMO,eAAiBP,EAAMuD,WAAa,gBAAwB1D,eAAeU,cACjFP,EAAMQ,QAAUR,EAAMuD,WAAa,SAAiB1D,eAAeW,OAEhEX,eAAeC,OAAO,GAG7B0D,YACAC,eAAAA,eACAC,iBAAgBA,kBAEf1D,GAAUA,EAAMqB,OAAS,UAAUsC,eAAS3D,EAAMqB,MAAOrB,QACzDA,GAAUA,EAAMuB,aAAe,iBAAiBoC,MAAQA,SAAC3D,EAAMuB,YAAavB"}
1	+ {"version":3,"file":"style.js","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.svg?module'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'active',\n 'compact',\n 'crispy',\n 'crispyCompact',\n 'tabTheme',\n 'left',\n 'right',\n 'rounded',\n 'outline',\n 'onColored',\n 'black',\n ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n default: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n `}\n `,\n compact: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n `}\n `,\n crispyCompact: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n `}\n `,\n crispy: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 14px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n `}\n `,\n}\n\nexport const Content = styled.span`\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n flex-grow: 1;\n flex-shrink: 0;\n height: 100%;\n padding: 0 1em;\n border: 1px solid transparent;\n transition-property: background-color, border-color;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n box-sizing: border-box;\n flex-shrink: 0;\n height: 100%;\n transition-property: color, stroke;\n ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n & > ${Content} {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Edge} {\n color: ${palette.backgroundColor};\n stroke: ${palette.borderColor};\n }\n &:hover > ${Content} {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${Edge} {\n color: ${palette.backgroundColorHover};\n stroke: ${palette.borderColorHover};\n }\n &:disabled > ${Content} {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n &:disabled > ${Edge} {\n color: ${palette.backgroundColorDisabled};\n stroke: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n onColored: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n borderColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : props.theme.colors['bg-brand-primary-500'],\n borderColor: props.theme.colors['bg-onmain-primary'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n borderColorHover: props.theme.colors['bg-onmain-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n },\n black: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledTabProps>({\n shouldForwardProp: shouldForwardTabProp,\n })\n .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n height: '2.8em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n }\n },\n })`\n ${(props) => {\n const radius = props.rounded ? 8 : 0\n const leftRadius = props.left ? 0 : radius\n const rightRadius = props.right ? 0 : radius\n\n return `\n box-sizing: border-box;\n display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n & > ${Content}, \n & > ${Edge} {\n transition-duration: 250ms;\n }\n & > ${Content} {\n border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n border-left-style: ${props.left ? 'none' : 'solid'};\n border-right-style: ${props.right ? 'none' : 'solid'};\n margin-left: ${props.left ? -2 : 0}px;\n margin-right: ${props.right ? -2 : 0}px;\n }\n `\n }}\n\n ${(props) => {\n if (props.preset === 'brand') {\n let schema = COLOR_SCHEMA.default\n\n if (props.black) schema = COLOR_SCHEMA.black\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n return props.outline ? schema.outline : schema.default\n }\n\n if (props.compact \|\| props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n if (props.crispyCompact \|\| props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n if (props.crispy \|\| props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n return DEFAULT_STYLES.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","compact","crispyCompact","crispy","Content","styled","span","withConfig","displayName","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","tinycolor","darken","toString","outline","onColored","lighten","black","Root","button","attrs","dynamicSizeDeclaration","size","sizeUnits","height","fontSize","radius","rounded","leftRadius","left","rightRadius","right","preset","disabled","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}

package/components/Tab/style.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{getColor}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import SvgArrow from'./images/arrow.svg.mjs';const shouldForwardTabProp=createShouldForwardProp((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));const DEFAULT_STYLES={default:css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `)),compact:css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `)),crispyCompact:css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `)),crispy:css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `))};const Content=styled.span.withConfig({displayName:"Tab__Content",componentId:"ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);const Edge=styled(SvgArrow).withConfig({shouldForwardProp:()=>!1}).withConfig({displayName:"Tab__Edge",componentId:"ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));const template=o=>`\n  & > ${Content} {\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    border-color: ${o.borderColor};\n  }\n  & > ${Edge} {\n    color: ${o.backgroundColor};\n    stroke: ${o.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${o.backgroundColorHover};\n    stroke: ${o.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${o.backgroundColorDisabled};\n    stroke: ${o.borderColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},onColored:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:o.theme.colors['bg-brand-primary-500'],borderColor:o.theme.colors['bg-onmain-primary'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:o.theme.colors['bg-onmain-primary'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette})))},black:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))}};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardTabProp}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:typeof o=='string'?o:`${o}${r}`})}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{const r=o.rounded?8:0;const e=o.left?0:r;const t=o.right?0:r;return`\n      box-sizing: border-box;\n      display: ${o.preset==='brand'?'inline-flex':'inline-block'};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${e}px ${t}px ${t}px ${e}px;\n        border-left-style: ${o.left?'none':'solid'};\n        border-right-style: ${o.right?'none':'solid'};\n        margin-left: ${o.left?-2:0}px;\n        margin-right: ${o.right?-2:0}px;\n      }\n    `}),(o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.onColored&&(r=COLOR_SCHEMA.onColored),o.outline?r.outline:r.default}return o.compact||o.tabTheme==='compact'?DEFAULT_STYLES.compact:o.crispyCompact||o.tabTheme==='crispyCompact'?DEFAULT_STYLES.crispyCompact:o.crispy||o.tabTheme==='crispy'?DEFAULT_STYLES.crispy:DEFAULT_STYLES.default}),focus,responsiveSize,responsiveMargin,(o=>o.color&&`color: ${getColor(o.color,o)};`),(o=>o.borderColor&&`border-color: ${getColor(o.borderColor,o)};`));export{Content,Edge,Root};
+import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{getColor}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import SvgArrow from'./images/arrow.svg.mjs';const shouldForwardTabProp=createShouldForwardProp((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));const DEFAULT_STYLES={default:css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `)),compact:css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `)),crispyCompact:css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `)),crispy:css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `))};const Content=styled.span.withConfig({displayName:"Tab__Content",componentId:"ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);const Edge=styled(SvgArrow).withConfig({shouldForwardProp:()=>!1}).withConfig({displayName:"Tab__Edge",componentId:"ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));const template=o=>`\n  & > ${Content} {\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    border-color: ${o.borderColor};\n  }\n  & > ${Edge} {\n    color: ${o.backgroundColor};\n    stroke: ${o.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${o.backgroundColorHover};\n    stroke: ${o.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${o.backgroundColorDisabled};\n    stroke: ${o.borderColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},onColored:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:o.theme.colors['bg-brand-primary-500'],borderColor:o.theme.colors['bg-onmain-primary'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:o.theme.colors['bg-onmain-primary'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette})))},black:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))}};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardTabProp}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:typeof o=='string'?o:`${o}${r}`})}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{const r=o.rounded?8:0;const e=o.left?0:r;const t=o.right?0:r;return`\n      box-sizing: border-box;\n      display: ${o.preset==='brand'?'inline-flex':'inline-block'};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${e}px ${t}px ${t}px ${e}px;\n        border-left-style: ${o.left?'none':'solid'};\n        border-right-style: ${o.right?'none':'solid'};\n        margin-left: ${o.left?-2:0}px;\n        margin-right: ${o.right?-2:0}px;\n      }\n    `}),(o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.onColored&&(r=COLOR_SCHEMA.onColored),o.outline?r.outline:r.default}return o.compact||o.tabTheme==='compact'?DEFAULT_STYLES.compact:o.crispyCompact||o.tabTheme==='crispyCompact'?DEFAULT_STYLES.crispyCompact:o.crispy||o.tabTheme==='crispy'?DEFAULT_STYLES.crispy:DEFAULT_STYLES.default}),focus,responsiveSize,responsiveMargin,(o=>o.color&&`color: ${getColor(o.color,o)};`),(o=>o.borderColor&&`border-color: ${getColor(o.borderColor,o)};`));export{Content,Edge,Root};
 //# sourceMappingURL=style.mjs.map

package/components/Tab/style.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.svg?module'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'active',\n 'compact',\n 'crispy',\n 'crispyCompact',\n 'tabTheme',\n 'left',\n 'right',\n 'rounded',\n 'outline',\n 'onColored',\n 'black',\n ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n default: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n `}\n `,\n compact: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n `}\n `,\n crispyCompact: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n `}\n `,\n crispy: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 14px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n `}\n `,\n}\n\nexport const Content = styled.span`\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n flex-grow: 1;\n flex-shrink: 0;\n height: 100%;\n padding: 0 1em;\n border: 1px solid transparent;\n transition-property: background-color, border-color;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n box-sizing: border-box;\n flex-shrink: 0;\n height: 100%;\n transition-property: color, stroke;\n ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n & > ${Content} {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Edge} {\n color: ${palette.backgroundColor};\n stroke: ${palette.borderColor};\n }\n &:hover > ${Content} {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${Edge} {\n color: ${palette.backgroundColorHover};\n stroke: ${palette.borderColorHover};\n }\n &:disabled > ${Content} {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n &:disabled > ${Edge} {\n color: ${palette.backgroundColorDisabled};\n stroke: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n onColored: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n borderColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : props.theme.colors['bg-brand-primary-500'],\n borderColor: props.theme.colors['bg-onmain-primary'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n borderColorHover: props.theme.colors['bg-onmain-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n },\n black: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledTabProps>({\n shouldForwardProp: shouldForwardTabProp,\n })\n .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n height: '2.8em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n }\n },\n })`\n ${(props) => {\n const radius = props.rounded ? 8 : 0\n const leftRadius = props.left ? 0 : radius\n const rightRadius = props.right ? 0 : radius\n\n return `\n box-sizing: border-box;\n display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n & > ${Content}, \n & > ${Edge} {\n transition-duration: 250ms;\n }\n & > ${Content} {\n border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n border-left-style: ${props.left ? 'none' : 'solid'};\n border-right-style: ${props.right ? 'none' : 'solid'};\n margin-left: ${props.left ? -2 : 0}px;\n margin-right: ${props.right ? -2 : 0}px;\n }\n `\n }}\n\n ${(props) => {\n if (props.preset === 'brand') {\n let schema = COLOR_SCHEMA.default\n\n if (props.black) schema = COLOR_SCHEMA.black\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n return props.outline ? schema.outline : schema.default\n }\n\n if (props.compact \|\| props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n if (props.crispyCompact \|\| props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n if (props.crispy \|\| props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n return DEFAULT_STYLES.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","compact","crispyCompact","crispy","Content","styled","span","withConfig","displayName","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","tinycolor","darken","toString","outline","onColored","lighten","black","Root","button","attrs","dynamicSizeDeclaration","size","sizeUnits","height","fontSize","radius","rounded","leftRadius","left","rightRadius","right","preset","disabled","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}
1	+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.svg?module'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'active',\n 'compact',\n 'crispy',\n 'crispyCompact',\n 'tabTheme',\n 'left',\n 'right',\n 'rounded',\n 'outline',\n 'onColored',\n 'black',\n ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n default: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n `}\n `,\n compact: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n `}\n `,\n crispyCompact: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n `}\n `,\n crispy: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 14px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n `}\n `,\n}\n\nexport const Content = styled.span`\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n flex-grow: 1;\n flex-shrink: 0;\n height: 100%;\n padding: 0 1em;\n border: 1px solid transparent;\n transition-property: background-color, border-color;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n box-sizing: border-box;\n flex-shrink: 0;\n height: 100%;\n transition-property: color, stroke;\n ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n & > ${Content} {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Edge} {\n color: ${palette.backgroundColor};\n stroke: ${palette.borderColor};\n }\n &:hover > ${Content} {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${Edge} {\n color: ${palette.backgroundColorHover};\n stroke: ${palette.borderColorHover};\n }\n &:disabled > ${Content} {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n &:disabled > ${Edge} {\n color: ${palette.backgroundColorDisabled};\n stroke: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n onColored: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n borderColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : props.theme.colors['bg-brand-primary-500'],\n borderColor: props.theme.colors['bg-onmain-primary'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n borderColorHover: props.theme.colors['bg-onmain-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n },\n black: {\n default: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledTabProps>({\n shouldForwardProp: shouldForwardTabProp,\n })\n .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n height: '2.8em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n }\n },\n })`\n ${(props) => {\n const radius = props.rounded ? 8 : 0\n const leftRadius = props.left ? 0 : radius\n const rightRadius = props.right ? 0 : radius\n\n return `\n box-sizing: border-box;\n display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n & > ${Content}, \n & > ${Edge} {\n transition-duration: 250ms;\n }\n & > ${Content} {\n border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n border-left-style: ${props.left ? 'none' : 'solid'};\n border-right-style: ${props.right ? 'none' : 'solid'};\n margin-left: ${props.left ? -2 : 0}px;\n margin-right: ${props.right ? -2 : 0}px;\n }\n `\n }}\n\n ${(props) => {\n if (props.preset === 'brand') {\n let schema = COLOR_SCHEMA.default\n\n if (props.black) schema = COLOR_SCHEMA.black\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n return props.outline ? schema.outline : schema.default\n }\n\n if (props.compact \|\| props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n if (props.crispyCompact \|\| props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n if (props.crispy \|\| props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n return DEFAULT_STYLES.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","compact","crispyCompact","crispy","Content","styled","span","withConfig","displayName","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","tinycolor","darken","toString","outline","onColored","lighten","black","Root","button","attrs","dynamicSizeDeclaration","size","sizeUnits","height","fontSize","radius","rounded","leftRadius","left","rightRadius","right","preset","disabled","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}

package/components/Tabs/Tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Tab=require('../Tab/Tab.js');function Tabs(r){const{children:e,className:s,classNameInner:a,classNameContent:o,borderColor:l,color:t,noBorder:n,style:c,width:i}=r;return require$$0.jsx(style.Root,{className:s,style:c,width:i,borderColor:l,color:t,noBorder:n,children:require$$0.jsx(style.Inner,{className:a,children:require$$0.jsx(style.Content,{noBorder:n,className:o,children:e})})})}Tabs.defaultProps={borderColor:'alto',color:'rgba(247, 247, 247, 1)'},Tabs.Tab=Tab.Tab,exports.Tabs=Tabs;
+'use strict';var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Tab=require('../Tab/Tab.js');function Tabs(e){const{children:r,className:s,classNameInner:a,classNameContent:o,borderColor:t,color:l,noBorder:n,style:c,width:i}=e;return jsxRuntime.jsx(style.Root,{className:s,style:c,width:i,borderColor:t,color:l,noBorder:n,children:jsxRuntime.jsx(style.Inner,{className:a,children:jsxRuntime.jsx(style.Content,{noBorder:n,className:o,children:r})})})}Tabs.defaultProps={borderColor:'alto',color:'rgba(247, 247, 247, 1)'},Tabs.Tab=Tab.Tab,exports.Tabs=Tabs;
 //# sourceMappingURL=Tabs.js.map

package/components/Tag/Tag.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var colors=require('../../theme/colors.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');function TagInput(e){return require$$0.jsx(Tag,{as:"input",...e})}function Tag(e){const{as:t,textProps:r,content:i,children:n,htmlFor:a,id:l,name:s,inputType:o,value:u,disabled:c,onChange:d,onClick:p,inverse:h,checked:g,...T}=e;return require$$0.jsxs(style.Root,{as:t==='input'?'label':t,inverse:h,checked:g,disabled:c,onClick:t!=='input'?p:void 0,...t==='label'?{htmlFor:a}:{},...t==='button'?{type:'button'}:{},...t==='input'?{htmlFor:l||s}:{},...T,children:[t==='input'?require$$0.jsx("input",{id:l||s,name:s,type:o||'checkbox',tabIndex:0,onChange:e=>(e.persist(),d&&d(e)),onClick:e=>(e.persist(),p&&p(e)),defaultChecked:e.defaultChecked,checked:g,value:u,disabled:c,hidden:!0}):null,n,require$$0.jsx(style.Text,{size:14,forwardedAs:"span",color:g&&!h?colors.DefaultColorNames.white:colors.DefaultColorNames.mineShaft,...r,children:i})]})}Tag.defaultProps={display:'inline-block',as:'button',height:40},TagInput.defaultProps={display:'inline-block',height:40},Tag.Input=TagInput,Tag.displayName='Tag',exports.Tag=Tag;
+'use strict';var colors=require('../../theme/colors.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');function TagInput(e){return jsxRuntime.jsx(Tag,{as:"input",...e})}function Tag(e){const{as:t,textProps:n,content:s,children:i,htmlFor:a,id:l,name:o,inputType:r,value:u,disabled:c,onChange:d,onClick:p,inverse:h,checked:m,...g}=e;return jsxRuntime.jsxs(style.Root,{as:t==='input'?'label':t,inverse:h,checked:m,disabled:c,onClick:t!=='input'?p:void 0,...t==='label'?{htmlFor:a}:{},...t==='button'?{type:'button'}:{},...t==='input'?{htmlFor:l||o}:{},...g,children:[t==='input'?jsxRuntime.jsx("input",{id:l||o,name:o,type:r||'checkbox',tabIndex:0,onChange:e=>(e.persist(),d&&d(e)),onClick:e=>(e.persist(),p&&p(e)),defaultChecked:e.defaultChecked,checked:m,value:u,disabled:c,hidden:!0}):null,i,jsxRuntime.jsx(style.Text,{size:14,forwardedAs:"span",color:m&&!h?colors.DefaultColorNames.white:colors.DefaultColorNames.mineShaft,...n,children:s})]})}Tag.defaultProps={display:'inline-block',as:'button',height:40},TagInput.defaultProps={display:'inline-block',height:40},Tag.Input=TagInput,Tag.displayName='Tag',exports.Tag=Tag;
 //# sourceMappingURL=Tag.js.map

package/components/Text/Ellipsis.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var ResizeObserver=require('../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.js');var useMergedPalette=require('../../hooks/useMergedPalette.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver.default((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));exports.Ellipsis=e=>{const{lines:r=1,defaultExpanded:t=!1,expandable:n=!1,expandButtonProps:s={},children:i,expanded:l,underline:a,onExpandedChange:c}=e;const{captionExpanded:o="Свернуть",captionCollapsed:u="Развернуть",...d}=s;const p=React.useRef(null);const f=React.useRef(null);const h=React.useRef(-1);const b=useMergedPalette.useMergedPalette(d);const[v,g]=React.useState(null);const[x,y]=React.useState(l??t);const R=React.useCallback((e=>{cancelAnimationFrame(h.current),h.current=requestAnimationFrame((()=>{if(f.current)if(x){const t=Math.round(e.clientHeight/f.current.clientHeight);g(t>r)}else{const r=Math.round(e.scrollHeight/f.current.clientHeight);const t=Math.round(e.clientHeight/f.current.clientHeight);g(r>t)}}))}),[r,x]);return React.useLayoutEffect((()=>{const e=p.current;return n&&e&&(e[resizeHandlerSymbol]=R,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[n,R]),React.useLayoutEffect((()=>{l!==void 0&&(y(l),c&&c(l))}),[l,c]),require$$0.jsxs(require$$0.Fragment,{children:[require$$0.jsxs(style.TextEllipsis,{ref:p,lines:r,expanded:x,underline:a,children:[n&&require$$0.jsx(style.LineHeight,{ref:f,children:" "}),i]}),n&&v===!0&&require$$0.jsx(style.ExpandButton,{...d,type:"button",palette:b,onClick:e=>{if(d.onClick&&d.onClick(e),l===void 0){const e=!x;y(e),c&&c(e)}},children:x?o:u})]})};
+'use strict';var React=require('react');var ResizeObserver=require('resize-observer-polyfill');var useMergedPalette=require('../../hooks/useMergedPalette.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var ResizeObserver__default=_interopDefault(ResizeObserver);const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver__default.default((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));exports.Ellipsis=e=>{const{lines:t=1,defaultExpanded:r=!1,expandable:n=!1,expandButtonProps:s={},children:i,expanded:l,underline:a,onExpandedChange:u}=e;const{captionExpanded:c="Свернуть",captionCollapsed:o="Развернуть",...d}=s;const f=React.useRef(null);const R=React.useRef(null);const p=React.useRef(-1);const x=useMergedPalette.useMergedPalette(d);const[h,b]=React.useState(null);const[v,m]=React.useState(l??r);const g=React.useCallback((e=>{cancelAnimationFrame(p.current),p.current=requestAnimationFrame((()=>{if(R.current)if(v){const r=Math.round(e.clientHeight/R.current.clientHeight);b(r>t)}else{const t=Math.round(e.scrollHeight/R.current.clientHeight);const r=Math.round(e.clientHeight/R.current.clientHeight);b(t>r)}}))}),[t,v]);return React.useLayoutEffect((()=>{const e=f.current;return n&&e&&(e[resizeHandlerSymbol]=g,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[n,g]),React.useLayoutEffect((()=>{l!==void 0&&(m(l),u&&u(l))}),[l,u]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(style.TextEllipsis,{ref:f,lines:t,expanded:v,underline:a,children:[n&&jsxRuntime.jsx(style.LineHeight,{ref:R,children:" "}),i]}),n&&h===!0&&jsxRuntime.jsx(style.ExpandButton,{...d,type:"button",palette:x,onClick:e=>{if(d.onClick&&d.onClick(e),l===void 0){const e=!v;m(e),u&&u(e)}},children:v?c:o})]})};
 //# sourceMappingURL=Ellipsis.js.map

package/components/Text/Ellipsis.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Ellipsis.js","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n underline,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n const observerTarget = textRef.current\n\n if (expandable && observerTarget) {\n observerTarget[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(observerTarget)\n }\n\n return () => {\n if (observerTarget) {\n resizeObserver.unobserve(observerTarget)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded} underline={underline}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","default","entries","forEach","entry","target","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","underline","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observerTarget","observe","unobserve","undefined","_jsxs","_Fragment","jsxs","Styled","ref","_jsx","jsx","type","palette","onClick","evt","update"],"mappings":"~~mUAOA~~,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,~~eAAcC~~,SAAEC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOR,sBAAyB,YAC/CO,EAAMC,OAAOR,qBAAqBO,EAAMC,OAC1C,GACA,qBAGcC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,UACRA,EAASC,iBACTA,GACER,EAEJ,MAAMS,gBAAEA,EAAkB,WAAUC,iBAAEA,EAAmB,gBAAiBC,GAA0BP,EAEpG,MAAMQ,EAAUC,aAAwB,MACxC,MAAMC,EAAgBD,aAAwB,MAC9C,MAAME,EAAqBF,MAAAA,QAAgB,GAE3C,MAAMG,EAAsBC,kCAAiBN,GAE7C,MAAOO,EAAqBC,GAA0BC,MAAQA,SAAoB,MAClF,MAAOC,EAAcC,GAAmBF,MAAAA,SAAkBd,GAAYJ,GAEtE,MAAMqB,EAA+BC,MAAWA,aAC7CC,IACCC,qBAAqBX,EAAmBY,SACxCZ,EAAmBY,QAAUC,uBAAsB,KACjD,GAAKd,EAAca,QAEnB,GAAIN,EAAc,CAChB,MAAMQ,EAAkBC,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE1Eb,EAAuBU,EAAkB5B,EAC3C,KAAO,CACL,MAAM4B,EAAkBC,KAAKC,MAAMN,EAAEQ,aAAenB,EAAca,QAAQK,cAC1E,MAAME,EAAoBJ,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE5Eb,EAAuBU,EAAkBK,EAC3C,IACA,GAEJ,CAACjC,EAAOoB,IAyBV,OAtBAc,MAAAA,iBAAgB,KACd,MAAMC,EAAiBxB,EAAQe,QAO/B,OALIxB,GAAciC,IAChBA,EAAe7C,qBAAuBgC,EACtC9B,eAAe4C,QAAQD,IAGlB,KACDA,GACF3C,eAAe6C,UAAUF,EAC3B,CACD,GACA,CAACjC,EAAYoB,IAEhBY,MAAAA,iBAAgB,KACV7B,SAAaiC,IACfjB,EAAgBhB,GACZE,GAAkBA,EAAiBF,GACzC,GACC,CAACA,EAAUE,IAGZgC,WAAAA,KAAAC,WAAAA,SAAA,CAAApC,SACEmC,CAAAA,WAAAE,KAACC,mBAAmB,CAACC,IAAKhC,EAASX,MAAOA,EAAOK,SAAUe,EAAcd,UAAWA,EAAUF,UAC3FF,GAAc0C,WAAAC,IAACH,iBAAiB,CAACC,IAAK9B,EAAcT,SAAC,MACrDA,KAEFF,GAAce,KAAwB,GACrC2B,WAAAA,IAACF,MAAAA,aAAmB,IACdhC,EACJoC,KAAK,SACLC,QAAShC,EACTiC,QAAUC,IAGR,GAFIvC,EAAsBsC,SAAStC,EAAsBsC,QAAQC,GAE7D5C,SAAaiC,EAAW,CAC1B,MAAMY,GAAU9B,EAEhBC,EAAgB6B,GACZ3C,GAAkBA,EAAiB2C,EACzC,GACA9C,SAEDgB,EAAeZ,EAAkBC,MAGrC"}
1	+ {"version":3,"file":"Ellipsis.js","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n underline,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n const observerTarget = textRef.current\n\n if (expandable && observerTarget) {\n observerTarget[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(observerTarget)\n }\n\n return () => {\n if (observerTarget) {\n resizeObserver.unobserve(observerTarget)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded} underline={underline}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","default","entries","forEach","entry","target","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","underline","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observerTarget","observe","unobserve","undefined","_jsxs","_Fragment","jsxs","Styled","ref","_jsx","jsx","type","palette","onClick","evt","update"],"mappings":"wWAOA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,wBAAcC,SAAEC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOR,sBAAyB,YAC/CO,EAAMC,OAAOR,qBAAqBO,EAAMC,OAC1C,GACA,qBAGcC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,UACRA,EAASC,iBACTA,GACER,EAEJ,MAAMS,gBAAEA,EAAkB,WAAUC,iBAAEA,EAAmB,gBAAiBC,GAA0BP,EAEpG,MAAMQ,EAAUC,aAAwB,MACxC,MAAMC,EAAgBD,aAAwB,MAC9C,MAAME,EAAqBF,MAAAA,QAAgB,GAE3C,MAAMG,EAAsBC,kCAAiBN,GAE7C,MAAOO,EAAqBC,GAA0BC,MAAQA,SAAoB,MAClF,MAAOC,EAAcC,GAAmBF,MAAAA,SAAkBd,GAAYJ,GAEtE,MAAMqB,EAA+BC,MAAWA,aAC7CC,IACCC,qBAAqBX,EAAmBY,SACxCZ,EAAmBY,QAAUC,uBAAsB,KACjD,GAAKd,EAAca,QAEnB,GAAIN,EAAc,CAChB,MAAMQ,EAAkBC,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE1Eb,EAAuBU,EAAkB5B,EAC3C,KAAO,CACL,MAAM4B,EAAkBC,KAAKC,MAAMN,EAAEQ,aAAenB,EAAca,QAAQK,cAC1E,MAAME,EAAoBJ,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE5Eb,EAAuBU,EAAkBK,EAC3C,IACA,GAEJ,CAACjC,EAAOoB,IAyBV,OAtBAc,MAAAA,iBAAgB,KACd,MAAMC,EAAiBxB,EAAQe,QAO/B,OALIxB,GAAciC,IAChBA,EAAe7C,qBAAuBgC,EACtC9B,eAAe4C,QAAQD,IAGlB,KACDA,GACF3C,eAAe6C,UAAUF,EAC3B,CACD,GACA,CAACjC,EAAYoB,IAEhBY,MAAAA,iBAAgB,KACV7B,SAAaiC,IACfjB,EAAgBhB,GACZE,GAAkBA,EAAiBF,GACzC,GACC,CAACA,EAAUE,IAGZgC,WAAAA,KAAAC,WAAAA,SAAA,CAAApC,SACEmC,CAAAA,WAAAE,KAACC,mBAAmB,CAACC,IAAKhC,EAASX,MAAOA,EAAOK,SAAUe,EAAcd,UAAWA,EAAUF,UAC3FF,GAAc0C,WAAAC,IAACH,iBAAiB,CAACC,IAAK9B,EAAcT,SAAC,MACrDA,KAEFF,GAAce,KAAwB,GACrC2B,WAAAA,IAACF,MAAAA,aAAmB,IACdhC,EACJoC,KAAK,SACLC,QAAShC,EACTiC,QAAUC,IAGR,GAFIvC,EAAsBsC,SAAStC,EAAsBsC,QAAQC,GAE7D5C,SAAaiC,EAAW,CAC1B,MAAMY,GAAU9B,EAEhBC,EAAgB6B,GACZ3C,GAAkBA,EAAiB2C,EACzC,GACA9C,SAEDgB,EAAeZ,EAAkBC,MAGrC"}

package/components/Text/Ellipsis.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useRef,useState,useCallback,useLayoutEffect}from'react';import ResizeObserver from'../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.mjs';import{useMergedPalette}from'../../hooks/useMergedPalette.mjs';import{TextEllipsis,LineHeight,ExpandButton}from'./style.mjs';import{jsxs,Fragment,jsx}from'react/jsx-runtime';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const Ellipsis=e=>{const{lines:t=1,defaultExpanded:r=!1,expandable:n=!1,expandButtonProps:s={},children:i,expanded:o,underline:l,onExpandedChange:a}=e;const{captionExpanded:c="Свернуть",captionCollapsed:u="Развернуть",...d}=s;const p=useRef(null);const m=useRef(null);const f=useRef(-1);const h=useMergedPalette(d);const[x,b]=useState(null);const[g,y]=useState(o??r);const z=useCallback((e=>{cancelAnimationFrame(f.current),f.current=requestAnimationFrame((()=>{if(m.current)if(g){const r=Math.round(e.clientHeight/m.current.clientHeight);b(r>t)}else{const t=Math.round(e.scrollHeight/m.current.clientHeight);const r=Math.round(e.clientHeight/m.current.clientHeight);b(t>r)}}))}),[t,g]);return useLayoutEffect((()=>{const e=p.current;return n&&e&&(e[resizeHandlerSymbol]=z,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[n,z]),useLayoutEffect((()=>{o!==void 0&&(y(o),a&&a(o))}),[o,a]),jsxs(Fragment,{children:[jsxs(TextEllipsis,{ref:p,lines:t,expanded:g,underline:l,children:[n&&jsx(LineHeight,{ref:m,children:" "}),i]}),n&&x===!0&&jsx(ExpandButton,{...d,type:"button",palette:h,onClick:e=>{if(d.onClick&&d.onClick(e),o===void 0){const e=!g;y(e),a&&a(e)}},children:g?c:u})]})};export{Ellipsis};
+import{useRef,useState,useCallback,useLayoutEffect}from'react';import ResizeObserver from'resize-observer-polyfill';import{useMergedPalette}from'../../hooks/useMergedPalette.mjs';import{TextEllipsis,LineHeight,ExpandButton}from'./style.mjs';import{jsxs,Fragment,jsx}from'react/jsx-runtime';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const Ellipsis=e=>{const{lines:t=1,defaultExpanded:n=!1,expandable:r=!1,expandButtonProps:s={},children:i,expanded:o,underline:l,onExpandedChange:c}=e;const{captionExpanded:a="Свернуть",captionCollapsed:u="Развернуть",...d}=s;const p=useRef(null);const f=useRef(null);const m=useRef(-1);const h=useMergedPalette(d);const[x,b]=useState(null);const[g,E]=useState(o??n);const y=useCallback((e=>{cancelAnimationFrame(m.current),m.current=requestAnimationFrame((()=>{if(f.current)if(g){const n=Math.round(e.clientHeight/f.current.clientHeight);b(n>t)}else{const t=Math.round(e.scrollHeight/f.current.clientHeight);const n=Math.round(e.clientHeight/f.current.clientHeight);b(t>n)}}))}),[t,g]);return useLayoutEffect((()=>{const e=p.current;return r&&e&&(e[resizeHandlerSymbol]=y,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[r,y]),useLayoutEffect((()=>{o!==void 0&&(E(o),c&&c(o))}),[o,c]),jsxs(Fragment,{children:[jsxs(TextEllipsis,{ref:p,lines:t,expanded:g,underline:l,children:[r&&jsx(LineHeight,{ref:f,children:" "}),i]}),r&&x===!0&&jsx(ExpandButton,{...d,type:"button",palette:h,onClick:e=>{if(d.onClick&&d.onClick(e),o===void 0){const e=!g;E(e),c&&c(e)}},children:g?a:u})]})};export{Ellipsis};
 //# sourceMappingURL=Ellipsis.mjs.map

package/components/Text/Ellipsis.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Ellipsis.mjs","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n underline,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n const observerTarget = textRef.current\n\n if (expandable && observerTarget) {\n observerTarget[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(observerTarget)\n }\n\n return () => {\n if (observerTarget) {\n resizeObserver.unobserve(observerTarget)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded} underline={underline}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","Ellipsis","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","underline","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observerTarget","observe","unobserve","undefined","_jsxs","_Fragment","Styled","ref","_jsx","type","palette","onClick","evt","update"],"mappings":"~~2XAOA~~,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOP,sBAAyB,YAC/CM,EAAMC,OAAOP,qBAAqBM,EAAMC,OAC1C,GACA,IAGEC,MAAAA,SAAYC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,UACRA,EAASC,iBACTA,GACER,EAEJ,MAAMS,gBAAEA,EAAkB,WAAUC,iBAAEA,EAAmB,gBAAiBC,GAA0BP,EAEpG,MAAMQ,EAAUC,OAAwB,MACxC,MAAMC,EAAgBD,OAAwB,MAC9C,MAAME,EAAqBF,QAAgB,GAE3C,MAAMG,EAAsBC,iBAAiBN,GAE7C,MAAOO,EAAqBC,GAA0BC,SAA4B,MAClF,MAAOC,EAAcC,GAAmBF,SAAkBd,GAAYJ,GAEtE,MAAMqB,EAA+BC,aAClCC,IACCC,qBAAqBX,EAAmBY,SACxCZ,EAAmBY,QAAUC,uBAAsB,KACjD,GAAKd,EAAca,QAEnB,GAAIN,EAAc,CAChB,MAAMQ,EAAkBC,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE1Eb,EAAuBU,EAAkB5B,EAC3C,KAAO,CACL,MAAM4B,EAAkBC,KAAKC,MAAMN,EAAEQ,aAAenB,EAAca,QAAQK,cAC1E,MAAME,EAAoBJ,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE5Eb,EAAuBU,EAAkBK,EAC3C,IACA,GAEJ,CAACjC,EAAOoB,IAyBV,OAtBAc,iBAAgB,KACd,MAAMC,EAAiBxB,EAAQe,QAO/B,OALIxB,GAAciC,IAChBA,EAAe7C,qBAAuBgC,EACtC9B,eAAe4C,QAAQD,IAGlB,KACDA,GACF3C,eAAe6C,UAAUF,EAC3B,CACD,GACA,CAACjC,EAAYoB,IAEhBY,iBAAgB,KACV7B,SAAaiC,IACfjB,EAAgBhB,GACZE,GAAkBA,EAAiBF,GACzC,GACC,CAACA,EAAUE,IAGZgC,KAAAC,SAAA,CAAApC,SACEmC,CAAAA,KAACE,aAAmB,CAACC,IAAK/B,EAASX,MAAOA,EAAOK,SAAUe,EAAcd,UAAWA,EAAUF,UAC3FF,GAAcyC,IAACF,WAAiB,CAACC,IAAK7B,EAAcT,SAAC,MACrDA,KAEFF,GAAce,KAAwB,GACrC0B,IAACF,aAAmB,IACd/B,EACJkC,KAAK,SACLC,QAAS9B,EACT+B,QAAUC,IAGR,GAFIrC,EAAsBoC,SAASpC,EAAsBoC,QAAQC,GAE7D1C,SAAaiC,EAAW,CAC1B,MAAMU,GAAU5B,EAEhBC,EAAgB2B,GACZzC,GAAkBA,EAAiByC,EACzC,GACA5C,SAEDgB,EAAeZ,EAAkBC,MAGrC"}
1	+ {"version":3,"file":"Ellipsis.mjs","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n underline,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n const observerTarget = textRef.current\n\n if (expandable && observerTarget) {\n observerTarget[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(observerTarget)\n }\n\n return () => {\n if (observerTarget) {\n resizeObserver.unobserve(observerTarget)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded} underline={underline}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","Ellipsis","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","underline","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observerTarget","observe","unobserve","undefined","_jsxs","_Fragment","Styled","ref","_jsx","type","palette","onClick","evt","update"],"mappings":"kSAOA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOP,sBAAyB,YAC/CM,EAAMC,OAAOP,qBAAqBM,EAAMC,OAC1C,GACA,IAGEC,MAAAA,SAAYC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,UACRA,EAASC,iBACTA,GACER,EAEJ,MAAMS,gBAAEA,EAAkB,WAAUC,iBAAEA,EAAmB,gBAAiBC,GAA0BP,EAEpG,MAAMQ,EAAUC,OAAwB,MACxC,MAAMC,EAAgBD,OAAwB,MAC9C,MAAME,EAAqBF,QAAgB,GAE3C,MAAMG,EAAsBC,iBAAiBN,GAE7C,MAAOO,EAAqBC,GAA0BC,SAA4B,MAClF,MAAOC,EAAcC,GAAmBF,SAAkBd,GAAYJ,GAEtE,MAAMqB,EAA+BC,aAClCC,IACCC,qBAAqBX,EAAmBY,SACxCZ,EAAmBY,QAAUC,uBAAsB,KACjD,GAAKd,EAAca,QAEnB,GAAIN,EAAc,CAChB,MAAMQ,EAAkBC,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE1Eb,EAAuBU,EAAkB5B,EAC3C,KAAO,CACL,MAAM4B,EAAkBC,KAAKC,MAAMN,EAAEQ,aAAenB,EAAca,QAAQK,cAC1E,MAAME,EAAoBJ,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE5Eb,EAAuBU,EAAkBK,EAC3C,IACA,GAEJ,CAACjC,EAAOoB,IAyBV,OAtBAc,iBAAgB,KACd,MAAMC,EAAiBxB,EAAQe,QAO/B,OALIxB,GAAciC,IAChBA,EAAe7C,qBAAuBgC,EACtC9B,eAAe4C,QAAQD,IAGlB,KACDA,GACF3C,eAAe6C,UAAUF,EAC3B,CACD,GACA,CAACjC,EAAYoB,IAEhBY,iBAAgB,KACV7B,SAAaiC,IACfjB,EAAgBhB,GACZE,GAAkBA,EAAiBF,GACzC,GACC,CAACA,EAAUE,IAGZgC,KAAAC,SAAA,CAAApC,SACEmC,CAAAA,KAACE,aAAmB,CAACC,IAAK/B,EAASX,MAAOA,EAAOK,SAAUe,EAAcd,UAAWA,EAAUF,UAC3FF,GAAcyC,IAACF,WAAiB,CAACC,IAAK7B,EAAcT,SAAC,MACrDA,KAEFF,GAAce,KAAwB,GACrC0B,IAACF,aAAmB,IACd/B,EACJkC,KAAK,SACLC,QAAS9B,EACT+B,QAAUC,IAGR,GAFIrC,EAAsBoC,SAASpC,EAAsBoC,QAAQC,GAE7D1C,SAAaiC,EAAW,CAC1B,MAAMU,GAAU5B,EAEhBC,EAAgB2B,GACZzC,GAAkBA,EAAiByC,EACzC,GACA5C,SAEDgB,EAAeZ,EAAkBC,MAGrC"}

package/components/Text/Text.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useClassname=require('../../hooks/useClassname.js');var Ellipsis=require('./Ellipsis.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Text_Heading=require('../Text.Heading/Text.Heading.js');var Text_Ellipse=require('../Text.Ellipse/Text.Ellipse.js');const Text=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const t=e.appearance?{...constants.APPEARANCE[e.appearance],...e}:e;const{size:r="m",weight:a="normal",lineHeight:n="m",fontStyle:i="normal",className:l,content:o,children:p,ellipsis:u,expandButtonProps:c,onExpandedChange:d,...x}=t;const E=typeof u=='object'&&u!==null?u:{};const T=useClassname.useClassname("Text",l);return require$$0.jsx(style.Root,{...x,size:r,weight:a,lineHeight:n,fontStyle:i,className:T,ellipsis:u,ref:s,children:u?require$$0.jsx(Ellipsis.Ellipsis,{...E,underline:x.underline,expandButtonProps:c,onExpandedChange:d,children:p||o}):p||o})})),{displayName:"Text",sizes:e=>typeof e.appearance=='string'?constants.SIZES[e.appearance]??defaultConstants.SIZES_DEFAULT:defaultConstants.SIZES_DEFAULT}),{Heading:Text_Heading.TextHeading,Ellipse:Text_Ellipse.TextEllipse});exports.COMPONENT_NAME="Text",exports.Text=Text;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useClassname=require('../../hooks/useClassname.js');var Ellipsis=require('./Ellipsis.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text_Heading=require('../Text.Heading/Text.Heading.js');var Text_Ellipse=require('../Text.Ellipse/Text.Ellipse.js');const Text=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const t=e.appearance?{...constants.APPEARANCE[e.appearance],...e}:e;const{size:a="m",weight:n="normal",lineHeight:r="m",fontStyle:i="normal",className:l,content:o,children:p,ellipsis:u,expandButtonProps:c,onExpandedChange:x,...d}=t;const E=typeof u=='object'&&u!==null?u:{};const T=useClassname.useClassname("Text",l);return jsxRuntime.jsx(style.Root,{...d,size:a,weight:n,lineHeight:r,fontStyle:i,className:T,ellipsis:u,ref:s,children:u?jsxRuntime.jsx(Ellipsis.Ellipsis,{...E,underline:d.underline,expandButtonProps:c,onExpandedChange:x,children:p||o}):p||o})})),{displayName:"Text",sizes:e=>typeof e.appearance=='string'?constants.SIZES[e.appearance]??defaultConstants.SIZES_DEFAULT:defaultConstants.SIZES_DEFAULT}),{Heading:Text_Heading.TextHeading,Ellipse:Text_Ellipse.TextEllipse});exports.COMPONENT_NAME="Text",exports.Text=Text;
 //# sourceMappingURL=Text.js.map