@foxford/ui 2.26.0-beta-47ce7b9-20240425 → 2.26.1-beta-1e5776e-20240506
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/PopoverComponent/style.js +1 -1
- package/components/PopoverComponent/style.js.map +1 -1
- package/components/Skeleton/style.js +1 -1
- package/components/Skeleton/style.js.map +1 -1
- package/components/Tooltip/Tooltip.js +1 -1
- package/components/Tooltip/Tooltip.js.map +1 -1
- package/components/TooltipComponent/style.js +1 -1
- package/components/TooltipComponent/style.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import n from'styled-components';import r from'tinycolor2';import{responsiveSize as e}from'../../mixins/responsive-size.js';import{focus as
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import n from'styled-components';import r from'tinycolor2';import{responsiveSize as e}from'../../mixins/responsive-size.js';import{focus as i}from'../../mixins/focus.js';import{createShouldForwardProp as t}from'../../shared/utils/style.js';var c=t((o=>!['orientation','controlsDirection','black','contrast','elevated'].includes(o)));var a=n.div.withConfig({componentId:"fox-ui__sc-hvg57g-0"})(["box-sizing:border-box;flex-shrink:0;width:45%;margin-right:1.6em;"]);var l=n.div.withConfig({shouldForwardProp:o=>'aspectRatio'!==o}).withConfig({componentId:"fox-ui__sc-hvg57g-1"})(["",""],(o=>"\n box-sizing: border-box;\n position: relative;\n height: 0;\n padding-bottom: ".concat('16:9'===o.aspectRatio?'56.25%':'100%',";\n border-radius: 8px;\n\n & > * {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n }\n\n & img,\n & video {\n border-radius: inherit;\n object-fit: contain;\n height: 100%;\n width: 100%;\n } \n ")));var s=n.div.withConfig({componentId:"fox-ui__sc-hvg57g-2"})(["display:flex;flex-wrap:wrap;margin-top:1.6em;"]);var d=n.div.withConfig({shouldForwardProp:c}).attrs((o=>({dynamicSizeDeclaration:(n,r)=>({fontSize:'string'==typeof n?n:"".concat(n).concat(r),width:'portrait'===o.orientation?'28em':'40em',padding:'1.6em',borderRadius:16})}))).withConfig({componentId:"fox-ui__sc-hvg57g-3"})(["box-sizing:border-box;display:inline-flex;isolation:isolate;position:relative;"," "," ",""],(o=>"\n flex-direction: ".concat('landscape'===o.orientation?'row':'column',";\n & ").concat(s," {\n flex-direction: ").concat(o.controlsDirection,";\n }\n ")),(n=>{return r=o({color:n.theme.colors['content-onmain-primary'],backgroundColor:n.theme.colors['bg-onmain-primary'],shadowColor:n.elevated?n.theme.colors['bg-oncolor-hover']:n.theme.colors.transparent,mediaPlaceholderColor:n.theme.colors['bg-oncolor-hover']},n.palette),"\n color: ".concat(r.color,";\n background-color: ").concat(r.backgroundColor,";\n filter: drop-shadow(0 6px 10px ").concat(r.shadowColor,");\n\n & ").concat(l," img,\n & ").concat(l," video {\n background-color: ").concat(r.mediaPlaceholderColor,";\n }\n");var r}),e);var g=n.div.withConfig({componentId:"fox-ui__sc-hvg57g-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;"]);var p=n.div.withConfig({componentId:"fox-ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:center;margin-right:20px;"]);var m=n.div.withConfig({componentId:"fox-ui__sc-hvg57g-6"})(["box-sizing:border-box;word-break:break-word;& > *:not(:last-child){margin-bottom:1.6em;}"]);var h=n.video.withConfig({componentId:"fox-ui__sc-hvg57g-7"})(["",""],i);var b=n.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({componentId:"fox-ui__sc-hvg57g-8"})(["box-sizing:border-box;position:absolute;top:10px;right:10px;appearance:none;padding:2px;margin:0;border:none;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:",";"," ",""],(o=>o.disabled?'not-allowed':'pointer'),(n=>{return e=o({closeColor:n.theme.colors['content-onmain-tertiary'],closeBackgroundColor:n.theme.colors.transparent,closeColorHover:n.theme.colors['content-onmain-primary'],closeBackgroundColorHover:r(n.theme.colors['bg-oncolor-hover']).lighten(20).toString(),closeColorActive:n.theme.colors['content-onmain-primary'],closeBackgroundColorActive:n.theme.colors['bg-oncolor-hover'],closeColorDisabled:n.theme.colors['content-disabled'],closeBackgroundColorDisabled:n.theme.colors.transparent},n.palette),"\n color: ".concat(e.closeColor,";\n background-color: ").concat(e.closeBackgroundColor,";\n &:hover {\n color: ").concat(e.closeColorHover,";\n background-color: ").concat(e.closeBackgroundColorHover,";\n }\n &:active {\n color: ").concat(e.closeColorActive,";\n background-color: ").concat(e.closeBackgroundColorActive,";\n }\n &:disabled {\n color: ").concat(e.closeColorDisabled,";\n background-color: ").concat(e.closeBackgroundColorDisabled,";\n }\n");var e}),i);export{b as CloseButton,g as Container,m as Content,s as Footer,p as Header,l as Media,a as MediaLandscape,d as Root,h as Video};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/PopoverComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type {\n PopoverComponentPalette,\n StyledPopoverComponentProps,\n StyledPopoverComponentCloseProps,\n StyledPopoverComponentMediaProps,\n} from './types'\n\nconst shouldForwardPopoverComponentProp = createShouldForwardProp(\n (propKey) => !['orientation', 'controlsDirection', 'black', 'contrast', 'elevated'].includes(propKey)\n)\n\nexport const MediaLandscape = styled.div`\n box-sizing: border-box;\n flex-shrink: 0;\n width: 45%;\n margin-right: 1.6em;\n`\n\nexport const Media = styled.div.withConfig<StyledPopoverComponentMediaProps>({\n shouldForwardProp: (propKey) => propKey !== 'aspectRatio',\n})`\n ${(props) => `\n box-sizing: border-box;\n position: relative;\n height: 0;\n padding-bottom: ${props.aspectRatio === '16:9' ? '56.25%' : '100%'};\n border-radius: 8px;\n\n & > * {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n }\n\n & img,\n & video {\n border-radius: inherit;\n object-fit: contain;\n height: 100%;\n width: 100%;\n } \n `}\n`\n\nexport const Footer = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin-top: 1.6em;\n`\n\nconst template = (\n palette: Pick<PopoverComponentPalette, 'color' | 'backgroundColor' | 'shadowColor' | 'mediaPlaceholderColor'>\n) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n filter: drop-shadow(0
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/PopoverComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type {\n PopoverComponentPalette,\n StyledPopoverComponentProps,\n StyledPopoverComponentCloseProps,\n StyledPopoverComponentMediaProps,\n} from './types'\n\nconst shouldForwardPopoverComponentProp = createShouldForwardProp(\n (propKey) => !['orientation', 'controlsDirection', 'black', 'contrast', 'elevated'].includes(propKey)\n)\n\nexport const MediaLandscape = styled.div`\n box-sizing: border-box;\n flex-shrink: 0;\n width: 45%;\n margin-right: 1.6em;\n`\n\nexport const Media = styled.div.withConfig<StyledPopoverComponentMediaProps>({\n shouldForwardProp: (propKey) => propKey !== 'aspectRatio',\n})`\n ${(props) => `\n box-sizing: border-box;\n position: relative;\n height: 0;\n padding-bottom: ${props.aspectRatio === '16:9' ? '56.25%' : '100%'};\n border-radius: 8px;\n\n & > * {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n }\n\n & img,\n & video {\n border-radius: inherit;\n object-fit: contain;\n height: 100%;\n width: 100%;\n } \n `}\n`\n\nexport const Footer = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin-top: 1.6em;\n`\n\nconst template = (\n palette: Pick<PopoverComponentPalette, 'color' | 'backgroundColor' | 'shadowColor' | 'mediaPlaceholderColor'>\n) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n filter: drop-shadow(0 6px 10px ${palette.shadowColor});\n\n & ${Media} img,\n & ${Media} video {\n background-color: ${palette.mediaPlaceholderColor};\n }\n`\n\nconst closeTemplate = (\n palette: Pick<\n PopoverComponentPalette,\n | 'closeColor'\n | 'closeBackgroundColor'\n | 'closeColorHover'\n | 'closeBackgroundColorHover'\n | 'closeColorActive'\n | 'closeBackgroundColorActive'\n | 'closeColorDisabled'\n | 'closeBackgroundColorDisabled'\n >\n) => `\n color: ${palette.closeColor};\n background-color: ${palette.closeBackgroundColor};\n &:hover {\n color: ${palette.closeColorHover};\n background-color: ${palette.closeBackgroundColorHover};\n }\n &:active {\n color: ${palette.closeColorActive};\n background-color: ${palette.closeBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.closeColorDisabled};\n background-color: ${palette.closeBackgroundColorDisabled};\n }\n`\n\nexport const Root = styled.div\n .withConfig<StyledPopoverComponentProps>({\n shouldForwardProp: shouldForwardPopoverComponentProp,\n })\n .attrs<StyledPopoverComponentProps>(\n (props): Required<Pick<StyledPopoverComponentProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n width: props.orientation === 'portrait' ? '28em' : '40em',\n padding: '1.6em',\n borderRadius: 16,\n }),\n })\n )`\n box-sizing: border-box;\n display: inline-flex;\n isolation: isolate;\n position: relative;\n\n ${(props) => `\n flex-direction: ${props.orientation === 'landscape' ? 'row' : 'column'};\n & ${Footer} {\n flex-direction: ${props.controlsDirection};\n }\n `}\n\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.elevated ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n\nexport const Container = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex-grow: 1;\n`\n\nexport const Header = styled.div`\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 20px;\n`\n\nexport const Content = styled.div`\n box-sizing: border-box;\n word-break: break-word;\n\n & > *:not(:last-child) {\n margin-bottom: 1.6em;\n }\n`\n\nexport const Video = styled.video`\n ${focus}\n`\n\nexport const CloseButton = styled.button.withConfig<StyledPopoverComponentCloseProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 10px;\n right: 10px;\n appearance: none;\n padding: 2px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\n ${(props) =>\n closeTemplate({\n closeColor: props.theme.colors['content-onmain-tertiary'],\n closeBackgroundColor: props.theme.colors.transparent,\n closeColorHover: props.theme.colors['content-onmain-primary'],\n closeBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover']).lighten(20).toString() as CSSColor,\n closeColorActive: props.theme.colors['content-onmain-primary'],\n closeBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n closeColorDisabled: props.theme.colors['content-disabled'],\n closeBackgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["shouldForwardPopoverComponentProp","createShouldForwardProp","propKey","includes","MediaLandscape","styled","div","withConfig","componentId","Media","shouldForwardProp","props","concat","aspectRatio","Footer","Root","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","orientation","padding","borderRadius","controlsDirection","template","palette","_objectSpread","color","theme","colors","backgroundColor","shadowColor","elevated","transparent","mediaPlaceholderColor","responsiveSize","Container","Header","Content","Video","video","focus","CloseButton","button","disabled","closeTemplate","closeColor","closeBackgroundColor","closeColorHover","closeBackgroundColorHover","tinycolor","lighten","toString","closeColorActive","closeBackgroundColorActive","closeColorDisabled","closeBackgroundColorDisabled"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as t}from'../../shared/utils/style.js';import{responsiveMargin as i}from'../../mixins/responsive-margin.js';var a=t((o=>!['inline','round','borderRadius','width','height','animationDuration','animationDelay','onColored'].includes(o)));var l=e(["0%{background-position
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as t}from'../../shared/utils/style.js';import{responsiveMargin as i}from'../../mixins/responsive-margin.js';var a=t((o=>!['inline','round','borderRadius','width','height','animationDuration','animationDelay','onColored'].includes(o)));var l=e(["0%{background-position:100% 50%;}100%{background-position:0% 50%;}"]);var d=o=>"\n background-color: ".concat(o.color,";\n background-image: linear-gradient(90deg, ").concat(o.gradientColor," 25%, ").concat(o.gradientHighlightColor," 45%, ").concat(o.gradientColor," 65%);\n");var s={onColored:{secondary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-oncolor-secondary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-oncolor'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-oncolor']},r.palette)))),primary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-oncolor-primary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-oncolor'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-oncolor']},r.palette))))},default:{secondary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-onmain-secondary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-onmain'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-onmain']},r.palette)))),primary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-onmain-primary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-onmain'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-onmain']},r.palette))))}};var c=r.div.withConfig({shouldForwardProp:a}).withConfig({componentId:"fox-ui__sc-4t2o9u-0"})([""," "," ",""],(o=>{var r,e;var t=o.round?'50%':8;'string'!=typeof o.borderRadius&&'number'!=typeof o.borderRadius||(t=o.borderRadius);var i=o.width?o.width:'auto';var a=o.height?o.height:'auto';return n(["box-sizing:border-box;display:",";width:",";height:",";border-radius:",";flex-shrink:0;background-origin:border-box;background-size:400% 100%;background-repeat:no-repeat;animation-name:",";animation-duration:","ms;animation-delay:","ms;animation-iteration-count:infinite;& > *{visibility:hidden;}"],o.inline?'inline-block':'block','string'==typeof i?i:"".concat(i,"px"),'string'==typeof a?a:"".concat(a,"px"),'string'==typeof t?t:"".concat(t,"px"),l,null!==(r=o.animationDuration)&&void 0!==r?r:2e3,null!==(e=o.animationDelay)&&void 0!==e?e:500)}),(o=>{var r=o.onColored?s.onColored:s.default;return o.secondary?r.secondary:r.primary}),i);export{c as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Skeleton/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledSkeletonProps, SkeletonPalette } from './types'\n\nconst shouldForwardSkeletonProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'inline',\n 'round',\n 'borderRadius',\n 'width',\n 'height',\n 'animationDuration',\n 'animationDelay',\n 'onColored',\n ].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n 0% {\n background-position
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Skeleton/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledSkeletonProps, SkeletonPalette } from './types'\n\nconst shouldForwardSkeletonProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'inline',\n 'round',\n 'borderRadius',\n 'width',\n 'height',\n 'animationDuration',\n 'animationDelay',\n 'onColored',\n ].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n 0% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n`\n\nconst template = (palette: SkeletonPalette) => `\n background-color: ${palette.color};\n background-image: linear-gradient(90deg, ${palette.gradientColor} 25%, ${palette.gradientHighlightColor} 45%, ${palette.gradientColor} 65%);\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n secondary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-oncolor-secondary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-oncolor'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-oncolor'],\n ...props.palette,\n })}\n `,\n primary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-oncolor-primary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-oncolor'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-oncolor'],\n ...props.palette,\n })}\n `,\n },\n default: {\n secondary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-onmain-secondary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-onmain'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-onmain'],\n ...props.palette,\n })}\n `,\n primary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-onmain-primary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-onmain'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-onmain'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div.withConfig<StyledSkeletonProps>({\n shouldForwardProp: shouldForwardSkeletonProp,\n})`\n ${(props) => {\n let borderRadius = props.round ? '50%' : 8\n if (typeof props.borderRadius === 'string' || typeof props.borderRadius === 'number') {\n borderRadius = props.borderRadius\n }\n\n const width = props.width ? props.width : 'auto'\n const height = props.height ? props.height : 'auto'\n\n return css`\n box-sizing: border-box;\n display: ${props.inline ? 'inline-block' : 'block'};\n width: ${typeof width === 'string' ? width : `${width}px`};\n height: ${typeof height === 'string' ? height : `${height}px`};\n border-radius: ${typeof borderRadius === 'string' ? borderRadius : `${borderRadius}px`};\n flex-shrink: 0;\n background-origin: border-box;\n background-size: 400% 100%;\n background-repeat: no-repeat;\n animation-name: ${shiftAnimation};\n animation-duration: ${props.animationDuration ?? 2000}ms;\n animation-delay: ${props.animationDelay ?? 500}ms;\n animation-iteration-count: infinite;\n\n & > * {\n visibility: hidden;\n }\n `\n }}\n\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n return props.secondary ? schema.secondary : schema.primary\n }}\n\n ${responsiveMargin}\n`\n"],"names":["shouldForwardSkeletonProp","createShouldForwardProp","propKey","includes","shiftAnimation","keyframes","template","palette","color","gradientColor","concat","gradientHighlightColor","COLOR_SCHEMA","onColored","secondary","css","props","_objectSpread","theme","colors","primary","default","Root","styled","div","withConfig","shouldForwardProp","componentId","_props$animationDurat","_props$animationDelay","borderRadius","round","width","height","inline","animationDuration","animationDelay","schema","responsiveMargin"],"mappings":"yPAKA,IAAMA,EAA4BC,GAC/BC,IACE,CACC,SACA,QACA,eACA,QACA,SACA,oBACA,iBACA,aACAC,SAASD,KAGf,IAAME,EAAiBC,EAAvB,CAAA,uEASA,IAAMC,EAAYC,mCACIA,EAAQC,MACeD,kDAAAA,OAAAA,EAAQE,cAFpC,UAAAC,OAE0DH,EAAQI,wCAA+BJ,EAAQE,cAF1H,YAKA,IAAMG,EAAe,CACnBC,UAAW,CACTC,UAAWC,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,8BAC1BV,cAAeO,EAAME,MAAMC,OAAO,wCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,uCACxCH,EAAMT,YAGfa,QAASL,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,4BAC1BV,cAAeO,EAAME,MAAMC,OAAO,wCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,uCACxCH,EAAMT,aAIjBc,QAAS,CACPP,UAAWC,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,6BAC1BV,cAAeO,EAAME,MAAMC,OAAO,uCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,sCACxCH,EAAMT,YAGfa,QAASL,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BV,cAAeO,EAAME,MAAMC,OAAO,uCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,sCACxCH,EAAMT,cAMZ,IAAMe,EAAOC,EAAOC,IAAIC,WAAgC,CAC7DC,kBAAmB1B,IADJyB,WAAA,CAAAE,YAAA,uBAAGJ,CAAH,CAAA,GAAA,IAAA,IAAA,KAGZP,IAAU,IAAAY,EAAAC,EACX,IAAIC,EAAed,EAAMe,MAAQ,MAAQ,EACP,iBAAvBf,EAAMc,cAA2D,iBAAvBd,EAAMc,eACzDA,EAAed,EAAMc,cAGvB,IAAME,EAAQhB,EAAMgB,MAAQhB,EAAMgB,MAAQ,OAC1C,IAAMC,EAASjB,EAAMiB,OAASjB,EAAMiB,OAAS,OAE7C,OAAOlB,EAEMC,CAAAA,iCAAAA,UAAAA,WAAAA,kBAAAA,oHAAAA,uBAAAA,sBAAAA,mEAAAA,EAAMkB,OAAS,eAAiB,QACjB,iBAAVF,EAAqBA,EAA5B,GAAAtB,OAAuCsB,EAAvC,MACmB,iBAAXC,EAAsBA,YAAYA,EAAzC,MAC+B,iBAAjBH,EAA4BA,EAAkBA,GAAAA,OAAAA,EALxE,MAUoB1B,EAC+B,QAA3BY,EAAAA,EAAMmB,yBAAAA,IAAqBP,EAAAA,EAAA,IAXnD,UAYqBZ,EAAMoB,sBAZ3B,IAAAP,EAAAA,EAY6C,QAS5Cb,IACD,IAAMqB,EAASrB,EAAMH,UAAYD,EAAaC,UAAYD,EAAaS,QAEvE,OAAOL,EAAMF,UAAYuB,EAAOvB,UAAYuB,EAAOjB,UAGnDkB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{useTheme as
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{useTheme as s}from'styled-components';import r from'react-floater';import{mergeDeepLeft as i}from'ramda';import{withMergedProps as n}from'../../hocs/withMergedProps.js';import{TooltipComponent as l}from'../TooltipComponent/TooltipComponent.js';import{TooltipWrapper as a}from'./TooltipWrapper.js';import{TOOLTIP_STYLES_DEFAULT as p}from'./default-constants.js';import{jsx as m}from'react/jsx-runtime';import{SIZES as c}from'../TooltipComponent/constants.js';var f=["preset","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps"];var z='Tooltip';var d=Object.assign(n(t(((t,n)=>{var l,c,z;var{preset:d,size:b="s",sizeXXS:u,sizeXS:v,sizeS:h,sizeM:T,sizeL:P,sizeXL:S,sizeUnits:g,sizes:X,palette:C,black:j,contrast:L,titleProps:y,contentProps:w,closeButtonProps:M}=t,k=e(t,f);var x=s();if('brand'!==d){var B;var E=o(o({},k),{},{styles:i(null!==(B=k.styles)&&void 0!==B?B:{},p)});return m(r,o(o({},E),{},{children:m("span",{children:E.children})}))}var O=x.colors['bg-onmain-primary'];j&&(O=x.colors['bg-onmain-inverse']),L&&(O=x.colors['bg-brand-primary-basic']),null!=C&&C.backgroundColor&&(O=null!==(l=x.colors[C.backgroundColor])&&void 0!==l?l:C.backgroundColor);var N=o(o({},k),{},{offset:null!==(c=k.offset)&&void 0!==c?c:8,styles:i(null!==(z=k.styles)&&void 0!==z?z:{},{arrow:{color:O,spread:16,length:8},floater:{filter:"drop-shadow(0 6px 10px ".concat(x.colors['bg-oncolor-hover'],")")}}),component:m(a,{ref:n,size:b,sizeXXS:u,sizeXS:v,sizeS:h,sizeM:T,sizeL:P,sizeXL:S,sizeUnits:g,sizes:X,palette:C,black:j,contrast:L,title:k.title,titleProps:y,content:k.content,contentProps:w,footer:k.footer,showCloseButton:k.showCloseButton,closeButtonProps:M,component:k.component})});return m(r,o(o({},N),{},{modifiers:{flip:{enabled:!N.disableFlip}}}))})),{displayName:"Tooltip",sizes:c}),{Component:l});export{z as COMPONENT_NAME,d as Tooltip};
|
|
2
2
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport { mergeDeepLeft } from 'ramda'\nimport type { Props as FloaterProps } from 'react-floater/lib/types'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES, TooltipComponent } from 'components/TooltipComponent'\nimport { TooltipWrapper } from './TooltipWrapper'\nimport { TOOLTIP_STYLES_DEFAULT } from './default-constants'\nimport type { TooltipProps } from './types'\n\nconst COMPONENT_NAME = 'Tooltip'\n\n/**\n *\n * Component accepts [\"react-floater\"](https://www.npmjs.com/package/react-floater/v/0.8.2) v0.8.2 props.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to tooltip component root.\n *\n * See full [TooltipProps](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts)\n */\nconst Tooltip: React.ForwardRefExoticComponent<TooltipProps> & { Component: typeof TooltipComponent } = Object.assign(\n withMergedProps<TooltipProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n preset,\n size = 's',\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n palette,\n black,\n contrast,\n titleProps,\n contentProps,\n closeButtonProps,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n styles: mergeDeepLeft(restProps.styles ?? {}, TOOLTIP_STYLES_DEFAULT),\n } as FloaterProps\n\n return (\n <Floater {...tooltipProps}>\n <span>{tooltipProps.children}</span>\n </Floater>\n )\n }\n\n let color = theme.colors['bg-onmain-primary']\n\n if (black) color = theme.colors['bg-onmain-inverse']\n if (contrast) color = theme.colors['bg-brand-primary-basic']\n if (palette?.backgroundColor) color = theme.colors[palette.backgroundColor] ?? palette.backgroundColor\n\n const tooltipProps = {\n ...restProps,\n styles: mergeDeepLeft(restProps.styles ?? {}, {\n arrow: {\n color,\n spread: 16,\n length: 8,\n },\n floater: {\n filter: `drop-shadow(0
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport { mergeDeepLeft } from 'ramda'\nimport type { Props as FloaterProps } from 'react-floater/lib/types'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES, TooltipComponent } from 'components/TooltipComponent'\nimport { TooltipWrapper } from './TooltipWrapper'\nimport { TOOLTIP_STYLES_DEFAULT } from './default-constants'\nimport type { TooltipProps } from './types'\n\nconst COMPONENT_NAME = 'Tooltip'\n\n/**\n *\n * Component accepts [\"react-floater\"](https://www.npmjs.com/package/react-floater/v/0.8.2) v0.8.2 props.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to tooltip component root.\n *\n * See full [TooltipProps](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts)\n */\nconst Tooltip: React.ForwardRefExoticComponent<TooltipProps> & { Component: typeof TooltipComponent } = Object.assign(\n withMergedProps<TooltipProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n preset,\n size = 's',\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n palette,\n black,\n contrast,\n titleProps,\n contentProps,\n closeButtonProps,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n styles: mergeDeepLeft(restProps.styles ?? {}, TOOLTIP_STYLES_DEFAULT),\n } as FloaterProps\n\n return (\n <Floater {...tooltipProps}>\n <span>{tooltipProps.children}</span>\n </Floater>\n )\n }\n\n let color = theme.colors['bg-onmain-primary']\n\n if (black) color = theme.colors['bg-onmain-inverse']\n if (contrast) color = theme.colors['bg-brand-primary-basic']\n if (palette?.backgroundColor) color = theme.colors[palette.backgroundColor] ?? palette.backgroundColor\n\n const tooltipProps = {\n ...restProps,\n offset: restProps.offset ?? 8,\n styles: mergeDeepLeft(restProps.styles ?? {}, {\n arrow: {\n color,\n spread: 16,\n length: 8,\n },\n floater: {\n filter: `drop-shadow(0 6px 10px ${theme.colors['bg-oncolor-hover']})`,\n },\n }),\n component: (\n <TooltipWrapper\n ref={ref}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n palette={palette}\n black={black}\n contrast={contrast}\n title={restProps.title}\n titleProps={titleProps}\n content={restProps.content}\n contentProps={contentProps}\n footer={restProps.footer}\n showCloseButton={restProps.showCloseButton}\n closeButtonProps={closeButtonProps}\n component={restProps.component}\n />\n ),\n } as FloaterProps\n\n return (\n <Floater\n {...tooltipProps}\n modifiers={{\n flip: {\n enabled: !tooltipProps.disableFlip,\n },\n }}\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: TooltipComponent,\n }\n)\n\nexport { Tooltip }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Tooltip","Object","assign","withMergedProps","forwardRef","props","ref","_theme$colors$palette","_restProps$offset","_restProps$styles2","preset","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","restProps","_excluded","theme","useTheme","_restProps$styles","tooltipProps","styles","mergeDeepLeft","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","_objectSpread","children","color","colors","backgroundColor","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"kxBAWMA,IAAAA,EAAiB,UAYvB,IAAMC,EAAkGC,OAAOC,OAC7GC,EACEC,IAAYC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACzB,IAAMC,OACJA,EADIC,KAEJA,EAAO,IAFHC,QAGJA,EAHIC,OAIJA,EAJIC,MAKJA,EALIC,MAMJA,EANIC,MAOJA,EAPIC,OAQJA,EARIC,UASJA,EATIC,MAUJA,EAVIC,QAWJA,EAXIC,MAYJA,EAZIC,SAaJA,EAbIC,WAcJA,EAdIC,aAeJA,EAfIC,iBAgBJA,GAEEpB,EADCqB,IACDrB,EAlBJsB,GAoBA,IAAMC,EAAQC,IAEd,GAAe,UAAXnB,EAAoB,CAAA,IAAAoB,EACtB,IAAMC,SACDL,GADa,GAAA,CAEhBM,OAAQC,EAAa,QAACP,EAAAA,EAAUM,cAAAA,IAAXF,EAAAA,EAAqB,GAAII,KAGhD,OACEC,EAACC,EAADC,EAAAA,EAAA,GAAaN,GAAb,GAAA,CAAAO,SACEH,EAAA,OAAA,CAAAG,SAAOP,EAAaO,cAK1B,IAAIC,EAAQX,EAAMY,OAAO,qBAErBnB,IAAOkB,EAAQX,EAAMY,OAAO,sBAC5BlB,IAAUiB,EAAQX,EAAMY,OAAO,2BAC/BpB,MAAAA,GAAAA,EAASqB,kBAAiBF,EAAK,QAAAhC,EAAGqB,EAAMY,OAAOpB,EAAQqB,wBAAxB,IAAAlC,EAAAA,EAA4Ca,EAAQqB,iBAEvF,IAAMV,SACDL,GADa,GAAA,CAEhBgB,eAAQhB,EAAAA,EAAUgB,cAAAA,QAAU,EAC5BV,OAAQC,EAAa,QAACP,EAAAA,EAAUM,cAAX,IAAAvB,EAAAA,EAAqB,GAAI,CAC5CkC,MAAO,CACLJ,MAAAA,EACAK,OAAQ,GACRC,OAAQ,GAEVC,QAAS,CACPC,wCAAkCnB,EAAMY,OAAO,oBAAzC,QAGVQ,UACEb,EAACc,EAAD,CACE3C,IAAKA,EACLK,KAAMA,EACNC,QAASA,EACTC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,UAAWA,EACXC,MAAOA,EACPC,QAASA,EACTC,MAAOA,EACPC,SAAUA,EACV4B,MAAOxB,EAAUwB,MACjB3B,WAAYA,EACZ4B,QAASzB,EAAUyB,QACnB3B,aAAcA,EACd4B,OAAQ1B,EAAU0B,OAClBC,gBAAiB3B,EAAU2B,gBAC3B5B,iBAAkBA,EAClBuB,UAAWtB,EAAUsB,cAK3B,OACEb,EAACC,EAADC,EAAAA,EAAA,GACMN,GADN,GAAA,CAEEuB,UAAW,CACTC,KAAM,CACJC,SAAUzB,EAAa0B,oBAMjC,CACEC,YA5GiB,UA6GjBvC,MAAOwC,IAGX,CACEC,UAAWC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import e,{css as r}from'styled-components';import n from'tinycolor2';import{createShouldForwardProp as t}from'../../shared/utils/style.js';import{focus as c}from'../../mixins/focus.js';import{responsiveSize as l}from'../../mixins/responsive-size.js';var a=t((o=>!['black','contrast','elevated'].includes(o)));var s=e.button.withConfig({componentId:"fox-ui__sc-1fjl2iv-0"})(["box-sizing:border-box;appearance:none;position:absolute;top:0;right:0;padding:4px;margin:0;border:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:transparent;cursor:pointer;&:disabled{cursor:not-allowed;}",""],c);var i=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n filter: drop-shadow(0
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import e,{css as r}from'styled-components';import n from'tinycolor2';import{createShouldForwardProp as t}from'../../shared/utils/style.js';import{focus as c}from'../../mixins/focus.js';import{responsiveSize as l}from'../../mixins/responsive-size.js';var a=t((o=>!['black','contrast','elevated'].includes(o)));var s=e.button.withConfig({componentId:"fox-ui__sc-1fjl2iv-0"})(["box-sizing:border-box;appearance:none;position:absolute;top:0;right:0;padding:4px;margin:0;border:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:transparent;cursor:pointer;&:disabled{cursor:not-allowed;}",""],c);var i=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n filter: drop-shadow(0 6px 10px ").concat(o.shadowColor,");\n\n & > ").concat(s," {\n color: ").concat(o.closeColor,";\n }\n & > ").concat(s,":hover {\n color: ").concat(o.closeColorHover,";\n }\n & > ").concat(s,":active {\n color: ").concat(o.closeColorActive,";\n }\n & > ").concat(s,":disabled {\n color: ").concat(o.closeColorDisabled,";\n }\n\n");var m={contrast:r(["",""],(e=>i(o({color:e.theme.colors['content-oncolor-primary'],backgroundColor:e.theme.colors['bg-brand-primary-basic'],shadowColor:e.elevated?e.theme.colors['bg-oncolor-hover']:e.theme.colors.transparent,closeColor:e.theme.colors['content-oncolor-tertiary'],closeColorHover:e.theme.colors['content-oncolor-primary'],closeColorActive:e.theme.colors['content-oncolor-primary'],closeColorDisabled:e.theme.colors['content-oncolor-disabled']},e.palette)))),black:r(["",""],(e=>i(o({color:e.theme.colors['content-onmain-inverse'],backgroundColor:e.theme.colors['bg-onmain-inverse'],shadowColor:e.elevated?e.theme.colors['bg-oncolor-hover']:e.theme.colors.transparent,closeColor:e.theme.colors['content-onmain-inverse'],closeColorHover:n(e.theme.colors['content-onmain-inverse']).darken(20).toString(),closeColorActive:n(e.theme.colors['content-onmain-inverse']).darken(20).toString(),closeColorDisabled:e.theme.colors['content-disabled']},e.palette)))),primary:r(["",""],(e=>i(o({color:e.theme.colors['content-onmain-primary'],backgroundColor:e.theme.colors['bg-onmain-primary'],shadowColor:e.elevated?e.theme.colors['bg-oncolor-hover']:e.theme.colors.transparent,closeColor:e.theme.colors['content-onmain-tertiary'],closeColorHover:e.theme.colors['content-onmain-primary'],closeColorActive:e.theme.colors['content-onmain-primary'],closeColorDisabled:e.theme.colors['content-disabled']},e.palette))))};var d=e.div.withConfig({shouldForwardProp:a}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(e),minWidth:'4.6em',maxWidth:'24em',padding:'0.8em',borderRadius:8})}).withConfig({componentId:"fox-ui__sc-1fjl2iv-1"})(["box-sizing:border-box;display:inline-block;isolation:isolate;position:relative;cursor:default;word-break:break-word;"," ",""],(o=>{var e=m.primary;return o.black&&(e=m.black),o.contrast&&(e=m.contrast),e}),l);export{s as CloseButton,d as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/TooltipComponent/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledTooltipComponentProps, TooltipComponentPalette } from './types'\n\nconst shouldForwardTooltipComponentProp = createShouldForwardProp(\n (propKey) => !['black', 'contrast', 'elevated'].includes(propKey)\n)\n\nexport const CloseButton = styled.button`\n box-sizing: border-box;\n appearance: none;\n position: absolute;\n top: 0;\n right: 0;\n padding: 4px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: transparent;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n\n ${focus}\n`\n\nconst template = (palette: TooltipComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n filter: drop-shadow(0
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/TooltipComponent/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledTooltipComponentProps, TooltipComponentPalette } from './types'\n\nconst shouldForwardTooltipComponentProp = createShouldForwardProp(\n (propKey) => !['black', 'contrast', 'elevated'].includes(propKey)\n)\n\nexport const CloseButton = styled.button`\n box-sizing: border-box;\n appearance: none;\n position: absolute;\n top: 0;\n right: 0;\n padding: 4px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: transparent;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n\n ${focus}\n`\n\nconst template = (palette: TooltipComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n filter: drop-shadow(0 6px 10px ${palette.shadowColor});\n\n & > ${CloseButton} {\n color: ${palette.closeColor};\n }\n & > ${CloseButton}:hover {\n color: ${palette.closeColorHover};\n }\n & > ${CloseButton}:active {\n color: ${palette.closeColorActive};\n }\n & > ${CloseButton}:disabled {\n color: ${palette.closeColorDisabled};\n }\n\n`\n\nconst COLOR_SCHEMA = {\n contrast: css<StyledTooltipComponentProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-basic'],\n shadowColor: props.elevated ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n closeColor: props.theme.colors['content-oncolor-tertiary'],\n closeColorHover: props.theme.colors['content-oncolor-primary'],\n closeColorActive: props.theme.colors['content-oncolor-primary'],\n closeColorDisabled: props.theme.colors['content-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledTooltipComponentProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-inverse'],\n backgroundColor: props.theme.colors['bg-onmain-inverse'],\n shadowColor: props.elevated ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n closeColor: props.theme.colors['content-onmain-inverse'],\n closeColorHover: tinycolor(props.theme.colors['content-onmain-inverse']).darken(20).toString() as CSSColor,\n closeColorActive: tinycolor(props.theme.colors['content-onmain-inverse']).darken(20).toString() as CSSColor,\n closeColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n `,\n primary: css<StyledTooltipComponentProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.elevated ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n closeColor: props.theme.colors['content-onmain-tertiary'],\n closeColorHover: props.theme.colors['content-onmain-primary'],\n closeColorActive: props.theme.colors['content-onmain-primary'],\n closeColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div\n .withConfig<StyledTooltipComponentProps>({\n shouldForwardProp: shouldForwardTooltipComponentProp,\n })\n .attrs<StyledTooltipComponentProps>(<Required<Pick<StyledTooltipComponentProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n minWidth: '4.6em',\n maxWidth: '24em',\n padding: '0.8em',\n borderRadius: 8,\n }),\n })`\n box-sizing: border-box;\n display: inline-block;\n isolation: isolate;\n position: relative;\n cursor: default;\n word-break: break-word;\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.black) schema = COLOR_SCHEMA.black\n if (props.contrast) schema = COLOR_SCHEMA.contrast\n\n return schema\n }}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardTooltipComponentProp","createShouldForwardProp","propKey","includes","CloseButton","styled","button","withConfig","componentId","focus","template","palette","color","concat","backgroundColor","shadowColor","closeColor","closeColorHover","closeColorActive","closeColorDisabled","COLOR_SCHEMA","contrast","css","props","_objectSpread","theme","colors","elevated","transparent","black","tinycolor","darken","toString","primary","Root","div","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","minWidth","maxWidth","padding","borderRadius","schema","responsiveSize"],"mappings":"8SAQA,IAAMA,EAAoCC,GACvCC,IAAa,CAAC,QAAS,WAAY,YAAYC,SAASD,KAG9CE,IAAAA,EAAcC,EAAOC,OAAVC,WAAA,CAAAC,YAAA,wBAAGH,CAAH,CAAA,8PAAA,IAmBpBI,GAGJ,IAAMC,EAAYC,GACPA,cAAAA,OAAAA,EAAQC,MADF,2BAAAC,OAEKF,EAAQG,gBACKH,wCAAAA,OAAAA,EAAQI,YAH1B,gBAAAF,OAKTT,EACKO,mBAAAA,OAAAA,EAAQK,oCAEbZ,EARS,yBAAAS,OASJF,EAAQM,yCAEbb,EAXS,0BAAAS,OAYJF,EAAQO,iBAEbd,kBAAAA,OAAAA,qCACKO,EAAQQ,mBAfrB,cAoBA,IAAMC,EAAe,CACnBC,SAAUC,EACLC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNZ,MAAOW,EAAME,MAAMC,OAAO,2BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,0BACpCX,YAAaQ,EAAMI,SAAWJ,EAAME,MAAMC,OAAO,oBAAsBH,EAAME,MAAMC,OAAOE,YAC1FZ,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,gBAAiBM,EAAME,MAAMC,OAAO,2BACpCR,iBAAkBK,EAAME,MAAMC,OAAO,2BACrCP,mBAAoBI,EAAME,MAAMC,OAAO,6BACpCH,EAAMZ,YAGfkB,MAAOP,EACFC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNZ,MAAOW,EAAME,MAAMC,OAAO,0BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,qBACpCX,YAAaQ,EAAMI,SAAWJ,EAAME,MAAMC,OAAO,oBAAsBH,EAAME,MAAMC,OAAOE,YAC1FZ,WAAYO,EAAME,MAAMC,OAAO,0BAC/BT,gBAAiBa,EAAUP,EAAME,MAAMC,OAAO,2BAA2BK,OAAO,IAAIC,WACpFd,iBAAkBY,EAAUP,EAAME,MAAMC,OAAO,2BAA2BK,OAAO,IAAIC,WACrFb,mBAAoBI,EAAME,MAAMC,OAAO,qBACpCH,EAAMZ,YAGfsB,QAASX,EACJC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNZ,MAAOW,EAAME,MAAMC,OAAO,0BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,qBACpCX,YAAaQ,EAAMI,SAAWJ,EAAME,MAAMC,OAAO,oBAAsBH,EAAME,MAAMC,OAAOE,YAC1FZ,WAAYO,EAAME,MAAMC,OAAO,2BAC/BT,gBAAiBM,EAAME,MAAMC,OAAO,0BACpCR,iBAAkBK,EAAME,MAAMC,OAAO,0BACrCP,mBAAoBI,EAAME,MAAMC,OAAO,qBACpCH,EAAMZ,aAKV,IAAMuB,EAAO7B,EAAO8B,IACxB5B,WAAwC,CACvC6B,kBAAmBpC,IAEpBqC,MAA0G,CACzGC,uBAAwB,CAACC,EAAMC,KAAAA,CAC7BC,SAA0B,iBAATF,EAAoBA,EAAUA,GAAAA,OAAAA,GAAOC,OAAAA,GACtDE,SAAU,QACVC,SAAU,OACVC,QAAS,QACTC,aAAc,MAVHtC,WAAA,CAAAC,YAAA,wBAAGH,CAAH,CAAA,uHAAA,IAAA,KAoBZkB,IACD,IAAIuB,EAAS1B,EAAaa,QAK1B,OAHIV,EAAMM,QAAOiB,EAAS1B,EAAaS,OACnCN,EAAMF,WAAUyB,EAAS1B,EAAaC,UAEnCyB,IAGPC"}
|