@foxford/ui 2.65.0 → 2.66.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/components/DialogComponent/DialogComponent.js +1 -1
  2. package/components/DialogComponent/DialogComponent.js.map +1 -1
  3. package/components/DialogComponent/DialogComponent.mjs +1 -1
  4. package/components/DialogComponent/DialogComponent.mjs.map +1 -1
  5. package/components/DialogComponent/ProgressLineContainer.js +2 -0
  6. package/components/DialogComponent/ProgressLineContainer.js.map +1 -0
  7. package/components/DialogComponent/ProgressLineContainer.mjs +2 -0
  8. package/components/DialogComponent/ProgressLineContainer.mjs.map +1 -0
  9. package/components/DialogComponent/constants.js +1 -1
  10. package/components/DialogComponent/constants.js.map +1 -1
  11. package/components/DialogComponent/constants.mjs +1 -1
  12. package/components/DialogComponent/constants.mjs.map +1 -1
  13. package/components/DialogComponent/style.js +1 -1
  14. package/components/DialogComponent/style.js.map +1 -1
  15. package/components/DialogComponent/style.mjs +1 -1
  16. package/components/DialogComponent/style.mjs.map +1 -1
  17. package/components/Popover/Popover.js +1 -1
  18. package/components/Popover/Popover.js.map +1 -1
  19. package/components/Popover/Popover.mjs +1 -1
  20. package/components/Popover/Popover.mjs.map +1 -1
  21. package/components/PopoverComponent/PopoverComponent.js +1 -1
  22. package/components/PopoverComponent/PopoverComponent.js.map +1 -1
  23. package/components/PopoverComponent/PopoverComponent.mjs +1 -1
  24. package/components/PopoverComponent/PopoverComponent.mjs.map +1 -1
  25. package/components/PopoverComponent/constants.js +1 -1
  26. package/components/PopoverComponent/constants.js.map +1 -1
  27. package/components/PopoverComponent/constants.mjs +1 -1
  28. package/components/PopoverComponent/constants.mjs.map +1 -1
  29. package/components/PopoverComponent/style.js +1 -1
  30. package/components/PopoverComponent/style.js.map +1 -1
  31. package/components/PopoverComponent/style.mjs +1 -1
  32. package/components/PopoverComponent/style.mjs.map +1 -1
  33. package/components/Tooltip/Tooltip.js.map +1 -1
  34. package/components/Tooltip/Tooltip.mjs.map +1 -1
  35. package/components/TooltipComponent/TooltipComponent.js +1 -1
  36. package/components/TooltipComponent/TooltipComponent.js.map +1 -1
  37. package/components/TooltipComponent/TooltipComponent.mjs +1 -1
  38. package/components/TooltipComponent/TooltipComponent.mjs.map +1 -1
  39. package/components/TooltipComponent/constants.js +1 -1
  40. package/components/TooltipComponent/constants.js.map +1 -1
  41. package/components/TooltipComponent/constants.mjs +1 -1
  42. package/components/TooltipComponent/constants.mjs.map +1 -1
  43. package/components/TooltipComponent/style.js +1 -1
  44. package/components/TooltipComponent/style.js.map +1 -1
  45. package/components/TooltipComponent/style.mjs +1 -1
  46. package/components/TooltipComponent/style.mjs.map +1 -1
  47. package/dts/index.d.ts +592 -292
  48. package/package.json +1 -1
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var responsiveSize=require('../../mixins/responsive-size.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardPopoverComponentProp=style.createShouldForwardProp((o=>!['orientation','controlsDirection','black','contrast','elevated'].includes(o)));const MediaLandscape=styled__default.default.div.withConfig({displayName:"PopoverComponent__MediaLandscape",componentId:"ui__sc-hvg57g-0"})(["box-sizing:border-box;flex-shrink:0;width:45%;margin-right:1.6em;"]);const Media=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='aspectRatio'}).withConfig({displayName:"PopoverComponent__Media",componentId:"ui__sc-hvg57g-1"})(["",""],(o=>`\n box-sizing: border-box;\n position: relative;\n height: 0;\n padding-bottom: ${o.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 `));const Footer=styled__default.default.div.withConfig({displayName:"PopoverComponent__Footer",componentId:"ui__sc-hvg57g-2"})(["display:flex;flex-wrap:wrap;margin-top:1.6em;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardPopoverComponentProp}).attrs((o=>({dynamicSizeDeclaration:(e,n)=>({fontSize:typeof e=='string'?e:`${e}${n}`,width:o.orientation==='portrait'?'28em':'40em',padding:'1.6em',borderRadius:16})}))).withConfig({displayName:"PopoverComponent__Root",componentId:"ui__sc-hvg57g-3"})(["box-sizing:border-box;display:inline-flex;isolation:isolate;position:relative;"," "," ",""],(o=>`\n flex-direction: ${o.orientation==='landscape'?'row':'column'};\n & ${Footer} {\n flex-direction: ${o.controlsDirection};\n }\n `),(o=>{return`\n color: ${(e={color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}).color};\n background-color: ${e.backgroundColor};\n filter: drop-shadow(0 6px 10px ${e.shadowColor});\n\n & ${Media} img,\n & ${Media} video {\n background-color: ${e.mediaPlaceholderColor};\n }\n`;var e}),responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({displayName:"PopoverComponent__Container",componentId:"ui__sc-hvg57g-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;"]);const Header=styled__default.default.div.withConfig({displayName:"PopoverComponent__Header",componentId:"ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:center;margin-right:20px;"]);const Content=styled__default.default.div.withConfig({displayName:"PopoverComponent__Content",componentId:"ui__sc-hvg57g-6"})(["box-sizing:border-box;word-break:break-word;& > *:not(:last-child){margin-bottom:1.6em;}"]);const Video=styled__default.default.video.withConfig({displayName:"PopoverComponent__Video",componentId:"ui__sc-hvg57g-7"})(["",""],focus.focus);const CloseButton=styled__default.default.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"PopoverComponent__CloseButton",componentId:"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'),(o=>{return`\n color: ${(e={closeColor:o.theme.colors['content-onmain-tertiary'],closeBackgroundColor:o.theme.colors.transparent,closeColorHover:o.theme.colors['content-onmain-primary'],closeBackgroundColorHover:tinycolor__default.default(o.theme.colors['bg-oncolor-hover']).lighten(20).toString(),closeColorActive:o.theme.colors['content-onmain-primary'],closeBackgroundColorActive:o.theme.colors['bg-oncolor-hover'],closeColorDisabled:o.theme.colors['content-disabled'],closeBackgroundColorDisabled:o.theme.colors.transparent,...o.palette}).closeColor};\n background-color: ${e.closeBackgroundColor};\n &:hover {\n color: ${e.closeColorHover};\n background-color: ${e.closeBackgroundColorHover};\n }\n &:active {\n color: ${e.closeColorActive};\n background-color: ${e.closeBackgroundColorActive};\n }\n &:disabled {\n color: ${e.closeColorDisabled};\n background-color: ${e.closeBackgroundColorDisabled};\n }\n`;var e}),focus.focus);exports.CloseButton=CloseButton,exports.Container=Container,exports.Content=Content,exports.Footer=Footer,exports.Header=Header,exports.Media=Media,exports.MediaLandscape=MediaLandscape,exports.Root=Root,exports.Video=Video;
1
+ 'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var IconButton=require('../IconButton/IconButton.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardPopoverComponentProp=style.createShouldForwardProp((o=>!['orientation','controlsDirection','black','contrast','elevated'].includes(o)));const MediaLandscape=styled__default.default.div.withConfig({displayName:"PopoverComponent__MediaLandscape",componentId:"ui__sc-hvg57g-0"})(["box-sizing:border-box;flex-shrink:0;width:45%;margin-right:18px;"]);const Media=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='aspectRatio'}).withConfig({displayName:"PopoverComponent__Media",componentId:"ui__sc-hvg57g-1"})(["",""],(o=>`\n box-sizing: border-box;\n position: relative;\n height: 0;\n padding-bottom: ${o.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 `));const Controls=styled__default.default.div.withConfig({displayName:"PopoverComponent__Controls",componentId:"ui__sc-hvg57g-2"})(["display:flex;flex-wrap:wrap;margin-top:18px;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardPopoverComponentProp}).withConfig({displayName:"PopoverComponent__Root",componentId:"ui__sc-hvg57g-3"})(["box-sizing:border-box;display:inline-flex;isolation:isolate;position:relative;"," "," ",""],(o=>`\n & ${Controls} {\n flex-direction: ${o.controlsDirection};\n }\n `),(o=>{return`\n color: ${(e={color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}).color};\n background-color: ${e.backgroundColor};\n filter: drop-shadow(0 6px 10px ${e.shadowColor});\n\n & ${Media} img,\n & ${Media} video {\n background-color: ${e.mediaPlaceholderColor};\n }\n`;var e}),responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({displayName:"PopoverComponent__Container",componentId:"ui__sc-hvg57g-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;"]);const Header=styled__default.default.div.withConfig({displayName:"PopoverComponent__Header",componentId:"ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:center;margin-right:20px;"]);const Content=styled__default.default.div.withConfig({displayName:"PopoverComponent__Content",componentId:"ui__sc-hvg57g-6"})(["box-sizing:border-box;word-break:break-word;& > *:not(:last-child){margin-bottom:18px;}"]);const Video=styled__default.default.video.withConfig({displayName:"PopoverComponent__Video",componentId:"ui__sc-hvg57g-7"})(["",""],focus.focus);const CloseButton=styled__default.default(IconButton.IconButton).withConfig({displayName:"PopoverComponent__CloseButton",componentId:"ui__sc-hvg57g-8"})(["position:absolute;top:10px;right:10px;"]);const Footer=styled__default.default.div.withConfig({displayName:"PopoverComponent__Footer",componentId:"ui__sc-hvg57g-9"})(["box-sizing:border-box;position:relative;margin-top:18px;"]);exports.CloseButton=CloseButton,exports.Container=Container,exports.Content=Content,exports.Controls=Controls,exports.Footer=Footer,exports.Header=Header,exports.Media=Media,exports.MediaLandscape=MediaLandscape,exports.Root=Root,exports.Video=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 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","displayName","componentId","Media","shouldForwardProp","props","aspectRatio","Footer","Root","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","orientation","padding","borderRadius","controlsDirection","template","palette","color","theme","colors","backgroundColor","shadowColor","elevated","transparent","mediaPlaceholderColor","responsiveSize","Container","Header","Content","Video","video","focus","CloseButton","button","disabled","closeTemplate","closeColor","closeBackgroundColor","closeColorHover","closeBackgroundColorHover","tinycolor","default","lighten","toString","closeColorActive","closeBackgroundColorActive","closeColorDisabled","closeBackgroundColorDisabled"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/PopoverComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { IconButton } from 'components/IconButton'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { PopoverComponentPalette, StyledPopoverComponentProps, StyledPopoverComponentMediaProps } 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: 18px;\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 Controls = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin-top: 18px;\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\nexport const Root = styled.div.withConfig<StyledPopoverComponentProps>({\n shouldForwardProp: shouldForwardPopoverComponentProp,\n})`\n box-sizing: border-box;\n display: inline-flex;\n isolation: isolate;\n position: relative;\n\n ${(props) => `\n & ${Controls} {\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: 18px;\n }\n`\n\nexport const Video = styled.video`\n ${focus}\n`\n\nexport const CloseButton = styled(IconButton)`\n position: absolute;\n top: 10px;\n right: 10px;\n`\n\nexport const Footer = styled.div`\n box-sizing: border-box;\n position: relative;\n margin-top: 18px;\n`\n"],"names":["shouldForwardPopoverComponentProp","createShouldForwardProp","propKey","includes","MediaLandscape","styled","div","withConfig","displayName","componentId","Media","shouldForwardProp","props","aspectRatio","Controls","Root","controlsDirection","template","palette","color","theme","colors","backgroundColor","shadowColor","elevated","transparent","mediaPlaceholderColor","responsiveSize","Container","Header","Content","Video","video","focus","CloseButton","default","IconButton","Footer"],"mappings":"kXAOA,MAAMA,kCAAoCC,MAAAA,yBACvCC,IAAa,CAAC,cAAe,oBAAqB,QAAS,WAAY,YAAYC,SAASD,WAGlFE,eAAiBC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,mCAAAC,YAAA,mBAAVJ,CAK7B,CAAA,qEAEM,MAAMK,MAAQL,gBAAAA,QAAOC,IAAIC,WAA6C,CAC3EI,kBAAoBT,GAAYA,IAAY,gBAC5CK,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAFmBJ,CAEnB,CAAA,GAAA,KACGO,GAAU,+FAIOA,EAAMC,cAAgB,OAAS,SAAW,iVAsBnDC,SAAWT,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,6BAAAC,YAAA,mBAAVJ,CAIvB,CAAA,iDAeM,MAAMU,KAAOV,gBAAAA,QAAOC,IAAIC,WAAwC,CACrEI,kBAAmBX,oCACnBO,WAAA,CAAAC,YAAA,yBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,iFAAA,IAAA,IAAA,KAMGO,GAAU,WACPE,qCACgBF,EAAMI,kCAIzBJ,IACDK,MA1BC,eADHC,EA2BW,CACPC,MAAOP,EAAMQ,MAAMC,OAAO,0BAC1BC,gBAAiBV,EAAMQ,MAAMC,OAAO,qBACpCE,YAAaX,EAAMY,SAAWZ,EAAMQ,MAAMC,OAAO,oBAAsBT,EAAMQ,MAAMC,OAAOI,YAC1FC,sBAAuBd,EAAMQ,MAAMC,OAAO,uBACvCT,EAAMM,UA9BIC,+BACGD,EAAQI,sDACKJ,EAAQK,wBAErCb,mBACAA,wCACkBQ,EAAQQ,gCAR9BR,KAiCI,GAEFS,eAAAA,sBAGSC,UAAYvB,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,mBAAVJ,CAMxB,CAAA,8GAEYwB,OAASxB,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,mBAAVJ,CAKrB,CAAA,mFAEYyB,QAAUzB,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,mBAAVJ,CAOtB,CAAA,kGAEY0B,MAAQ1B,gBAAAA,QAAO2B,MAAKzB,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAAZJ,CAAY,CAAA,GAAA,IAC7B4B,MAAAA,OAGG,MAAMC,YAAc7B,gBAAM8B,QAACC,uBAAW7B,WAAA,CAAAC,YAAA,gCAAAC,YAAA,mBAAlBJ,CAI1B,CAAA,iDAEYgC,OAAShC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,mBAAVJ,CAIrB,CAAA"}
@@ -1,2 +1,2 @@
1
- import styled from'styled-components';import tinycolor from'tinycolor2';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const shouldForwardPopoverComponentProp=createShouldForwardProp((o=>!['orientation','controlsDirection','black','contrast','elevated'].includes(o)));const MediaLandscape=styled.div.withConfig({displayName:"PopoverComponent__MediaLandscape",componentId:"ui__sc-hvg57g-0"})(["box-sizing:border-box;flex-shrink:0;width:45%;margin-right:1.6em;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='aspectRatio'}).withConfig({displayName:"PopoverComponent__Media",componentId:"ui__sc-hvg57g-1"})(["",""],(o=>`\n box-sizing: border-box;\n position: relative;\n height: 0;\n padding-bottom: ${o.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 `));const Footer=styled.div.withConfig({displayName:"PopoverComponent__Footer",componentId:"ui__sc-hvg57g-2"})(["display:flex;flex-wrap:wrap;margin-top:1.6em;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardPopoverComponentProp}).attrs((o=>({dynamicSizeDeclaration:(e,n)=>({fontSize:typeof e=='string'?e:`${e}${n}`,width:o.orientation==='portrait'?'28em':'40em',padding:'1.6em',borderRadius:16})}))).withConfig({displayName:"PopoverComponent__Root",componentId:"ui__sc-hvg57g-3"})(["box-sizing:border-box;display:inline-flex;isolation:isolate;position:relative;"," "," ",""],(o=>`\n flex-direction: ${o.orientation==='landscape'?'row':'column'};\n & ${Footer} {\n flex-direction: ${o.controlsDirection};\n }\n `),(o=>{return`\n color: ${(e={color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}).color};\n background-color: ${e.backgroundColor};\n filter: drop-shadow(0 6px 10px ${e.shadowColor});\n\n & ${Media} img,\n & ${Media} video {\n background-color: ${e.mediaPlaceholderColor};\n }\n`;var e}),responsiveSize);const Container=styled.div.withConfig({displayName:"PopoverComponent__Container",componentId:"ui__sc-hvg57g-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;"]);const Header=styled.div.withConfig({displayName:"PopoverComponent__Header",componentId:"ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:center;margin-right:20px;"]);const Content=styled.div.withConfig({displayName:"PopoverComponent__Content",componentId:"ui__sc-hvg57g-6"})(["box-sizing:border-box;word-break:break-word;& > *:not(:last-child){margin-bottom:1.6em;}"]);const Video=styled.video.withConfig({displayName:"PopoverComponent__Video",componentId:"ui__sc-hvg57g-7"})(["",""],focus);const CloseButton=styled.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"PopoverComponent__CloseButton",componentId:"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'),(o=>{return`\n color: ${(e={closeColor:o.theme.colors['content-onmain-tertiary'],closeBackgroundColor:o.theme.colors.transparent,closeColorHover:o.theme.colors['content-onmain-primary'],closeBackgroundColorHover:tinycolor(o.theme.colors['bg-oncolor-hover']).lighten(20).toString(),closeColorActive:o.theme.colors['content-onmain-primary'],closeBackgroundColorActive:o.theme.colors['bg-oncolor-hover'],closeColorDisabled:o.theme.colors['content-disabled'],closeBackgroundColorDisabled:o.theme.colors.transparent,...o.palette}).closeColor};\n background-color: ${e.closeBackgroundColor};\n &:hover {\n color: ${e.closeColorHover};\n background-color: ${e.closeBackgroundColorHover};\n }\n &:active {\n color: ${e.closeColorActive};\n background-color: ${e.closeBackgroundColorActive};\n }\n &:disabled {\n color: ${e.closeColorDisabled};\n background-color: ${e.closeBackgroundColorDisabled};\n }\n`;var e}),focus);export{CloseButton,Container,Content,Footer,Header,Media,MediaLandscape,Root,Video};
1
+ import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const shouldForwardPopoverComponentProp=createShouldForwardProp((o=>!['orientation','controlsDirection','black','contrast','elevated'].includes(o)));const MediaLandscape=styled.div.withConfig({displayName:"PopoverComponent__MediaLandscape",componentId:"ui__sc-hvg57g-0"})(["box-sizing:border-box;flex-shrink:0;width:45%;margin-right:18px;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='aspectRatio'}).withConfig({displayName:"PopoverComponent__Media",componentId:"ui__sc-hvg57g-1"})(["",""],(o=>`\n box-sizing: border-box;\n position: relative;\n height: 0;\n padding-bottom: ${o.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 `));const Controls=styled.div.withConfig({displayName:"PopoverComponent__Controls",componentId:"ui__sc-hvg57g-2"})(["display:flex;flex-wrap:wrap;margin-top:18px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardPopoverComponentProp}).withConfig({displayName:"PopoverComponent__Root",componentId:"ui__sc-hvg57g-3"})(["box-sizing:border-box;display:inline-flex;isolation:isolate;position:relative;"," "," ",""],(o=>`\n & ${Controls} {\n flex-direction: ${o.controlsDirection};\n }\n `),(o=>{return`\n color: ${(n={color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}).color};\n background-color: ${n.backgroundColor};\n filter: drop-shadow(0 6px 10px ${n.shadowColor});\n\n & ${Media} img,\n & ${Media} video {\n background-color: ${n.mediaPlaceholderColor};\n }\n`;var n}),responsiveSize);const Container=styled.div.withConfig({displayName:"PopoverComponent__Container",componentId:"ui__sc-hvg57g-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;"]);const Header=styled.div.withConfig({displayName:"PopoverComponent__Header",componentId:"ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:center;margin-right:20px;"]);const Content=styled.div.withConfig({displayName:"PopoverComponent__Content",componentId:"ui__sc-hvg57g-6"})(["box-sizing:border-box;word-break:break-word;& > *:not(:last-child){margin-bottom:18px;}"]);const Video=styled.video.withConfig({displayName:"PopoverComponent__Video",componentId:"ui__sc-hvg57g-7"})(["",""],focus);const CloseButton=styled(IconButton).withConfig({displayName:"PopoverComponent__CloseButton",componentId:"ui__sc-hvg57g-8"})(["position:absolute;top:10px;right:10px;"]);const Footer=styled.div.withConfig({displayName:"PopoverComponent__Footer",componentId:"ui__sc-hvg57g-9"})(["box-sizing:border-box;position:relative;margin-top:18px;"]);export{CloseButton,Container,Content,Controls,Footer,Header,Media,MediaLandscape,Root,Video};
2
2
  //# sourceMappingURL=style.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","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","displayName","componentId","Media","shouldForwardProp","props","aspectRatio","Footer","Root","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","orientation","padding","borderRadius","controlsDirection","template","palette","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":"iPAaA,MAAMA,kCAAoCC,yBACvCC,IAAa,CAAC,cAAe,oBAAqB,QAAS,WAAY,YAAYC,SAASD,WAGlFE,eAAiBC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,mCAAAC,YAAA,mBAAVJ,CAK7B,CAAA,sEAEM,MAAMK,MAAQL,OAAOC,IAAIC,WAA6C,CAC3EI,kBAAoBT,GAAYA,IAAY,gBAC5CK,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAFmBJ,CAEnB,CAAA,GAAA,KACGO,GAAU,+FAIOA,EAAMC,cAAgB,OAAS,SAAW,iVAsBnDC,OAAST,OAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,mBAAVJ,CAIrB,CAAA,kDA4CM,MAAMU,KAAOV,OAAOC,IACxBC,WAAwC,CACvCI,kBAAmBX,oCAEpBgB,OACEJ,IAAkF,CACjFK,uBAAwBA,CAACC,EAAMC,KAAe,CAC5CC,gBAAiBF,GAAS,SAAWA,EAAO,GAAGA,IAAOC,IACtDE,MAAOT,EAAMU,cAAgB,WAAa,OAAS,OACnDC,QAAS,QACTC,aAAc,SAGnBjB,WAAA,CAAAC,YAAA,yBAAAC,YAAA,mBAbiBJ,CAajB,CAAA,iFAAA,IAAA,IAAA,KAMEO,GAAU,yBACOA,EAAMU,cAAgB,YAAc,MAAQ,oBAC1DR,mCACgBF,EAAMa,kCAIzBb,IACDc,MAnEC,eADHC,EAoEW,CACPC,MAAOhB,EAAMiB,MAAMC,OAAO,0BAC1BC,gBAAiBnB,EAAMiB,MAAMC,OAAO,qBACpCE,YAAapB,EAAMqB,SAAWrB,EAAMiB,MAAMC,OAAO,oBAAsBlB,EAAMiB,MAAMC,OAAOI,YAC1FC,sBAAuBvB,EAAMiB,MAAMC,OAAO,uBACvClB,EAAMe,UAvEIC,+BACGD,EAAQI,sDACKJ,EAAQK,wBAErCtB,mBACAA,wCACkBiB,EAAQQ,gCAR9BR,KA0EI,GAEFS,sBAGSC,UAAYhC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,mBAAVJ,CAMxB,CAAA,8GAEYiC,OAASjC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,mBAAVJ,CAKrB,CAAA,mFAEYkC,QAAUlC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,mBAAVJ,CAOtB,CAAA,mGAEYmC,MAAQnC,OAAOoC,MAAKlC,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAAZJ,CAAY,CAAA,GAAA,IAC7BqC,OAGG,MAAMC,YAActC,OAAOuC,OAAOrC,WAA6C,CACpFI,kBAAoBT,IAAa,CAAC,WAAWC,SAASD,KACtDK,WAAA,CAAAC,YAAA,gCAAAC,YAAA,mBAFyBJ,CAEzB,CAAA,gMAAA,IAAA,IAAA,KAaWO,GAAWA,EAAMiC,SAAW,cAAgB,YAEpDjC,IACDkC,MArGC,eAXHnB,EAgHgB,CACZoB,WAAYnC,EAAMiB,MAAMC,OAAO,2BAC/BkB,qBAAsBpC,EAAMiB,MAAMC,OAAOI,YACzCe,gBAAiBrC,EAAMiB,MAAMC,OAAO,0BACpCoB,0BAA2BC,UAAUvC,EAAMiB,MAAMC,OAAO,qBAAqBsB,QAAQ,IAAIC,WACzFC,iBAAkB1C,EAAMiB,MAAMC,OAAO,0BACrCyB,2BAA4B3C,EAAMiB,MAAMC,OAAO,oBAC/C0B,mBAAoB5C,EAAMiB,MAAMC,OAAO,oBACvC2B,6BAA8B7C,EAAMiB,MAAMC,OAAOI,eAC9CtB,EAAMe,UA7GIoB,oCACGpB,EAAQqB,kDAEjBrB,EAAQsB,2CACGtB,EAAQuB,6DAGnBvB,EAAQ2B,4CACG3B,EAAQ4B,gEAGnB5B,EAAQ6B,8CACG7B,EAAQ8B,uCAxB9B9B,KA0HI,GAEFe"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/PopoverComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { IconButton } from 'components/IconButton'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { PopoverComponentPalette, StyledPopoverComponentProps, StyledPopoverComponentMediaProps } 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: 18px;\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 Controls = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin-top: 18px;\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\nexport const Root = styled.div.withConfig<StyledPopoverComponentProps>({\n shouldForwardProp: shouldForwardPopoverComponentProp,\n})`\n box-sizing: border-box;\n display: inline-flex;\n isolation: isolate;\n position: relative;\n\n ${(props) => `\n & ${Controls} {\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: 18px;\n }\n`\n\nexport const Video = styled.video`\n ${focus}\n`\n\nexport const CloseButton = styled(IconButton)`\n position: absolute;\n top: 10px;\n right: 10px;\n`\n\nexport const Footer = styled.div`\n box-sizing: border-box;\n position: relative;\n margin-top: 18px;\n`\n"],"names":["shouldForwardPopoverComponentProp","createShouldForwardProp","propKey","includes","MediaLandscape","styled","div","withConfig","displayName","componentId","Media","shouldForwardProp","props","aspectRatio","Controls","Root","controlsDirection","template","palette","color","theme","colors","backgroundColor","shadowColor","elevated","transparent","mediaPlaceholderColor","responsiveSize","Container","Header","Content","Video","video","focus","CloseButton","IconButton","Footer"],"mappings":"oQAOA,MAAMA,kCAAoCC,yBACvCC,IAAa,CAAC,cAAe,oBAAqB,QAAS,WAAY,YAAYC,SAASD,WAGlFE,eAAiBC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,mCAAAC,YAAA,mBAAVJ,CAK7B,CAAA,qEAEM,MAAMK,MAAQL,OAAOC,IAAIC,WAA6C,CAC3EI,kBAAoBT,GAAYA,IAAY,gBAC5CK,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAFmBJ,CAEnB,CAAA,GAAA,KACGO,GAAU,+FAIOA,EAAMC,cAAgB,OAAS,SAAW,iVAsBnDC,SAAWT,OAAOC,IAAGC,WAAA,CAAAC,YAAA,6BAAAC,YAAA,mBAAVJ,CAIvB,CAAA,iDAeM,MAAMU,KAAOV,OAAOC,IAAIC,WAAwC,CACrEI,kBAAmBX,oCACnBO,WAAA,CAAAC,YAAA,yBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,iFAAA,IAAA,IAAA,KAMGO,GAAU,WACPE,qCACgBF,EAAMI,kCAIzBJ,IACDK,MA1BC,eADHC,EA2BW,CACPC,MAAOP,EAAMQ,MAAMC,OAAO,0BAC1BC,gBAAiBV,EAAMQ,MAAMC,OAAO,qBACpCE,YAAaX,EAAMY,SAAWZ,EAAMQ,MAAMC,OAAO,oBAAsBT,EAAMQ,MAAMC,OAAOI,YAC1FC,sBAAuBd,EAAMQ,MAAMC,OAAO,uBACvCT,EAAMM,UA9BIC,+BACGD,EAAQI,sDACKJ,EAAQK,wBAErCb,mBACAA,wCACkBQ,EAAQQ,gCAR9BR,KAiCI,GAEFS,sBAGSC,UAAYvB,OAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,mBAAVJ,CAMxB,CAAA,8GAEYwB,OAASxB,OAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,mBAAVJ,CAKrB,CAAA,mFAEYyB,QAAUzB,OAAOC,IAAGC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,mBAAVJ,CAOtB,CAAA,kGAEY0B,MAAQ1B,OAAO2B,MAAKzB,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAAZJ,CAAY,CAAA,GAAA,IAC7B4B,OAGG,MAAMC,YAAc7B,OAAO8B,YAAW5B,WAAA,CAAAC,YAAA,gCAAAC,YAAA,mBAAlBJ,CAI1B,CAAA,iDAEY+B,OAAS/B,OAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,mBAAVJ,CAIrB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useState, useLayoutEffect } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport { mergeDeepLeft } from 'ramda'\nimport type { Props as FloaterProps, PopperInstance, Styles } from 'react-floater'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\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 based on [\"react-floater\"](https://www.npmjs.com/package/react-floater).\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 styles = {},\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 closeOnClickOutside,\n closeOnScroll,\n portalElement,\n zIndex,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n const [popper, setPopper] = useState<PopperInstance | null>(null)\n\n const floaterStyles: Partial<Styles> =\n typeof zIndex === 'number' ? mergeDeepLeft({ options: { zIndex } }, styles) : styles\n\n useLayoutEffect(() => {\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n let popperPortal = document.querySelector<HTMLElement>('[data-popper-portal]')\n\n if (!popperPortal) {\n popperPortal = document.createElement('div')\n popperPortal.dataset.popperPortal = 'true'\n popperPortal.style.position = 'relative'\n\n document.body.appendChild(popperPortal)\n }\n\n setPortal(popperPortal)\n }\n }, [portalElement])\n\n useResizeObserver({\n target: document.body,\n onResize: () => {\n if (popper && popper.state.options.strategy === 'absolute') {\n popper.update()\n }\n },\n })\n\n if (!portalElement && !portal) {\n return null\n }\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n styles: mergeDeepLeft(floaterStyles, 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 portalElement: portalElement ?? portal,\n getPopper: (popper, origin) => {\n setPopper(popper)\n if (restProps.getPopper) {\n restProps.getPopper(popper, origin)\n }\n },\n offset: restProps.offset ?? 8,\n styles: mergeDeepLeft(floaterStyles, {\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 closeOnClickOutside={closeOnClickOutside}\n closeOnScroll={closeOnScroll}\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":["Tooltip","Object","assign","withMergedProps","forwardRef","props","ref","preset","size","styles","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","closeOnClickOutside","closeOnScroll","portalElement","zIndex","restProps","theme","useTheme","portal","setPortal","useState","popper","setPopper","floaterStyles","mergeDeepLeft","options","useLayoutEffect","document","body","popperPortal","querySelector","createElement","dataset","style","position","appendChild","useResizeObserver","target","onResize","state","strategy","update","tooltipProps","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","children","jsx","color","colors","backgroundColor","getPopper","origin","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"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"}
1
+ {"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useState, useLayoutEffect } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport { mergeDeepLeft } from 'ramda'\nimport type { Props as FloaterProps, PopperInstance, Styles } from 'react-floater'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\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 * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Компонент основан на [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Tooltip.Component`.\n *\n * Полный интерфейс `Tooltip` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts), интерфейс `Tooltip.Component` [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).\n *\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 styles = {},\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 closeOnClickOutside,\n closeOnScroll,\n portalElement,\n zIndex,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n const [popper, setPopper] = useState<PopperInstance | null>(null)\n\n const floaterStyles: Partial<Styles> =\n typeof zIndex === 'number' ? mergeDeepLeft({ options: { zIndex } }, styles) : styles\n\n useLayoutEffect(() => {\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n let popperPortal = document.querySelector<HTMLElement>('[data-popper-portal]')\n\n if (!popperPortal) {\n popperPortal = document.createElement('div')\n popperPortal.dataset.popperPortal = 'true'\n popperPortal.style.position = 'relative'\n\n document.body.appendChild(popperPortal)\n }\n\n setPortal(popperPortal)\n }\n }, [portalElement])\n\n useResizeObserver({\n target: document.body,\n onResize: () => {\n if (popper && popper.state.options.strategy === 'absolute') {\n popper.update()\n }\n },\n })\n\n if (!portalElement && !portal) {\n return null\n }\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n styles: mergeDeepLeft(floaterStyles, 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 portalElement: portalElement ?? portal,\n getPopper: (popper, origin) => {\n setPopper(popper)\n if (restProps.getPopper) {\n restProps.getPopper(popper, origin)\n }\n },\n offset: restProps.offset ?? 8,\n styles: mergeDeepLeft(floaterStyles, {\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 closeOnClickOutside={closeOnClickOutside}\n closeOnScroll={closeOnScroll}\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":["Tooltip","Object","assign","withMergedProps","forwardRef","props","ref","preset","size","styles","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","closeOnClickOutside","closeOnScroll","portalElement","zIndex","restProps","theme","useTheme","portal","setPortal","useState","popper","setPopper","floaterStyles","mergeDeepLeft","options","useLayoutEffect","document","body","popperPortal","querySelector","createElement","dataset","style","position","appendChild","useResizeObserver","target","onResize","state","strategy","update","tooltipProps","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","children","jsx","color","colors","backgroundColor","getPopper","origin","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.mjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useState, useLayoutEffect } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport { mergeDeepLeft } from 'ramda'\nimport type { Props as FloaterProps, PopperInstance, Styles } from 'react-floater'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\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 based on [\"react-floater\"](https://www.npmjs.com/package/react-floater).\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 styles = {},\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 closeOnClickOutside,\n closeOnScroll,\n portalElement,\n zIndex,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n const [popper, setPopper] = useState<PopperInstance | null>(null)\n\n const floaterStyles: Partial<Styles> =\n typeof zIndex === 'number' ? mergeDeepLeft({ options: { zIndex } }, styles) : styles\n\n useLayoutEffect(() => {\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n let popperPortal = document.querySelector<HTMLElement>('[data-popper-portal]')\n\n if (!popperPortal) {\n popperPortal = document.createElement('div')\n popperPortal.dataset.popperPortal = 'true'\n popperPortal.style.position = 'relative'\n\n document.body.appendChild(popperPortal)\n }\n\n setPortal(popperPortal)\n }\n }, [portalElement])\n\n useResizeObserver({\n target: document.body,\n onResize: () => {\n if (popper && popper.state.options.strategy === 'absolute') {\n popper.update()\n }\n },\n })\n\n if (!portalElement && !portal) {\n return null\n }\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n styles: mergeDeepLeft(floaterStyles, 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 portalElement: portalElement ?? portal,\n getPopper: (popper, origin) => {\n setPopper(popper)\n if (restProps.getPopper) {\n restProps.getPopper(popper, origin)\n }\n },\n offset: restProps.offset ?? 8,\n styles: mergeDeepLeft(floaterStyles, {\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 closeOnClickOutside={closeOnClickOutside}\n closeOnScroll={closeOnScroll}\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","preset","size","styles","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","closeOnClickOutside","closeOnScroll","portalElement","zIndex","restProps","theme","useTheme","portal","setPortal","useState","popper","setPopper","floaterStyles","mergeDeepLeft","options","useLayoutEffect","document","body","popperPortal","querySelector","createElement","dataset","style","position","appendChild","useResizeObserver","target","onResize","state","strategy","update","tooltipProps","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","children","color","colors","backgroundColor","getPopper","origin","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"4iBAYMA,MAAAA,eAAiB,UAYvB,MAAMC,QAAkGC,OAAOC,OAC7GC,gBACEC,YAAW,CAACC,EAAOC,KACjB,MAAMC,OACJA,EAAMC,KACNA,EAAO,IAAGC,OACVA,EAAS,CAAE,EAAAC,QACXA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,EAAKC,QACLA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,WACRA,EAAUC,aACVA,EAAYC,iBACZA,EAAgBC,oBAChBA,EAAmBC,cACnBA,EAAaC,cACbA,EAAaC,OACbA,KACGC,GACDvB,EAEJ,MAAMwB,EAAQC,WAEd,MAAOC,EAAQC,GAAaC,SAA6B,MACzD,MAAOC,EAAQC,GAAaF,SAAgC,MAE5D,MAAMG,SACGT,GAAW,SAAWU,cAAc,CAAEC,QAAS,CAAEX,WAAYlB,GAAUA,EA6BhF,GA3BA8B,iBAAgB,KACd,GAAIb,EACFM,EAAU,WACL,GAAIQ,SAASC,KAAM,CACxB,IAAIC,EAAeF,SAASG,cAA2B,wBAElDD,IACHA,EAAeF,SAASI,cAAc,OACtCF,EAAaG,QAAQH,aAAe,OACpCA,EAAaI,MAAMC,SAAW,WAE9BP,SAASC,KAAKO,YAAYN,IAG5BV,EAAUU,EACZ,IACC,CAAChB,IAEJuB,kBAAkB,CAChBC,OAAQV,SAASC,KACjBU,SAAUA,KACJjB,GAAUA,EAAOkB,MAAMd,QAAQe,WAAa,YAC9CnB,EAAOoB,QACT,KAIC5B,IAAkBK,EACrB,OAAO,KAGT,GAAIxB,IAAW,QAAS,CACtB,MAAMgD,EAAe,IAChB3B,EACHF,cAAeA,GAAiBK,EAChCtB,OAAQ4B,cAAcD,EAAeoB,yBAGvC,OACEC,IAACC,QAAO,IAAKH,EAAYI,SACvBF,IAAA,OAAA,CAAAE,SAAOJ,EAAaI,YAG1B,CAEA,IAAIC,EAAQ/B,EAAMgC,OAAO,qBAErB1C,IAAOyC,EAAQ/B,EAAMgC,OAAO,sBAC5BzC,IAAUwC,EAAQ/B,EAAMgC,OAAO,2BAC/B3C,GAAS4C,kBAAiBF,EAAQ/B,EAAMgC,OAAO3C,EAAQ4C,kBAAoB5C,EAAQ4C,iBAEvF,MAAMP,EAAe,IAChB3B,EACHF,cAAeA,GAAiBK,EAChCgC,UAAWA,CAAC7B,EAAQ8B,KAClB7B,EAAUD,GACNN,EAAUmC,WACZnC,EAAUmC,UAAU7B,EAAQ8B,EAC9B,EAEFC,OAAQrC,EAAUqC,QAAU,EAC5BxD,OAAQ4B,cAAcD,EAAe,CACnC8B,MAAO,CACLN,QACAO,OAAQ,GACRC,OAAQ,GAEVC,QAAS,CACPC,OAAQ,0BAA0BzC,EAAMgC,OAAO,0BAGnDU,UACEd,IAACe,eAAc,CACblE,IAAKA,EACLE,KAAMA,EACNE,QAASA,EACTC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,UAAWA,EACXC,MAAOA,EACPC,QAASA,EACTC,MAAOA,EACPC,SAAUA,EACVqD,MAAO7C,EAAU6C,MACjBpD,WAAYA,EACZqD,QAAS9C,EAAU8C,QACnBpD,aAAcA,EACdqD,OAAQ/C,EAAU+C,OAClBC,gBAAiBhD,EAAUgD,gBAC3BrD,iBAAkBA,EAClBC,oBAAqBA,EACrBC,cAAeA,EACf8C,UAAW3C,EAAU2C,aAK3B,OACEd,IAACC,QAAO,IACFH,EACJsB,UAAW,CACTC,KAAM,CACJC,SAAUxB,EAAayB,eAG3B,IAGN,CACEC,YAhKiB,UAiKjBhE,MAAOiE,QAGX,CACEC,UAAWC"}
1
+ {"version":3,"file":"Tooltip.mjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useState, useLayoutEffect } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport { mergeDeepLeft } from 'ramda'\nimport type { Props as FloaterProps, PopperInstance, Styles } from 'react-floater'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\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 * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Компонент основан на [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Tooltip.Component`.\n *\n * Полный интерфейс `Tooltip` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts), интерфейс `Tooltip.Component` [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).\n *\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 styles = {},\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 closeOnClickOutside,\n closeOnScroll,\n portalElement,\n zIndex,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n const [popper, setPopper] = useState<PopperInstance | null>(null)\n\n const floaterStyles: Partial<Styles> =\n typeof zIndex === 'number' ? mergeDeepLeft({ options: { zIndex } }, styles) : styles\n\n useLayoutEffect(() => {\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n let popperPortal = document.querySelector<HTMLElement>('[data-popper-portal]')\n\n if (!popperPortal) {\n popperPortal = document.createElement('div')\n popperPortal.dataset.popperPortal = 'true'\n popperPortal.style.position = 'relative'\n\n document.body.appendChild(popperPortal)\n }\n\n setPortal(popperPortal)\n }\n }, [portalElement])\n\n useResizeObserver({\n target: document.body,\n onResize: () => {\n if (popper && popper.state.options.strategy === 'absolute') {\n popper.update()\n }\n },\n })\n\n if (!portalElement && !portal) {\n return null\n }\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n styles: mergeDeepLeft(floaterStyles, 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 portalElement: portalElement ?? portal,\n getPopper: (popper, origin) => {\n setPopper(popper)\n if (restProps.getPopper) {\n restProps.getPopper(popper, origin)\n }\n },\n offset: restProps.offset ?? 8,\n styles: mergeDeepLeft(floaterStyles, {\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 closeOnClickOutside={closeOnClickOutside}\n closeOnScroll={closeOnScroll}\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","preset","size","styles","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","closeOnClickOutside","closeOnScroll","portalElement","zIndex","restProps","theme","useTheme","portal","setPortal","useState","popper","setPopper","floaterStyles","mergeDeepLeft","options","useLayoutEffect","document","body","popperPortal","querySelector","createElement","dataset","style","position","appendChild","useResizeObserver","target","onResize","state","strategy","update","tooltipProps","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","children","color","colors","backgroundColor","getPopper","origin","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"4iBAYMA,MAAAA,eAAiB,UAiBvB,MAAMC,QAAkGC,OAAOC,OAC7GC,gBACEC,YAAW,CAACC,EAAOC,KACjB,MAAMC,OACJA,EAAMC,KACNA,EAAO,IAAGC,OACVA,EAAS,CAAE,EAAAC,QACXA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,EAAKC,QACLA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,WACRA,EAAUC,aACVA,EAAYC,iBACZA,EAAgBC,oBAChBA,EAAmBC,cACnBA,EAAaC,cACbA,EAAaC,OACbA,KACGC,GACDvB,EAEJ,MAAMwB,EAAQC,WAEd,MAAOC,EAAQC,GAAaC,SAA6B,MACzD,MAAOC,EAAQC,GAAaF,SAAgC,MAE5D,MAAMG,SACGT,GAAW,SAAWU,cAAc,CAAEC,QAAS,CAAEX,WAAYlB,GAAUA,EA6BhF,GA3BA8B,iBAAgB,KACd,GAAIb,EACFM,EAAU,WACL,GAAIQ,SAASC,KAAM,CACxB,IAAIC,EAAeF,SAASG,cAA2B,wBAElDD,IACHA,EAAeF,SAASI,cAAc,OACtCF,EAAaG,QAAQH,aAAe,OACpCA,EAAaI,MAAMC,SAAW,WAE9BP,SAASC,KAAKO,YAAYN,IAG5BV,EAAUU,EACZ,IACC,CAAChB,IAEJuB,kBAAkB,CAChBC,OAAQV,SAASC,KACjBU,SAAUA,KACJjB,GAAUA,EAAOkB,MAAMd,QAAQe,WAAa,YAC9CnB,EAAOoB,QACT,KAIC5B,IAAkBK,EACrB,OAAO,KAGT,GAAIxB,IAAW,QAAS,CACtB,MAAMgD,EAAe,IAChB3B,EACHF,cAAeA,GAAiBK,EAChCtB,OAAQ4B,cAAcD,EAAeoB,yBAGvC,OACEC,IAACC,QAAO,IAAKH,EAAYI,SACvBF,IAAA,OAAA,CAAAE,SAAOJ,EAAaI,YAG1B,CAEA,IAAIC,EAAQ/B,EAAMgC,OAAO,qBAErB1C,IAAOyC,EAAQ/B,EAAMgC,OAAO,sBAC5BzC,IAAUwC,EAAQ/B,EAAMgC,OAAO,2BAC/B3C,GAAS4C,kBAAiBF,EAAQ/B,EAAMgC,OAAO3C,EAAQ4C,kBAAoB5C,EAAQ4C,iBAEvF,MAAMP,EAAe,IAChB3B,EACHF,cAAeA,GAAiBK,EAChCgC,UAAWA,CAAC7B,EAAQ8B,KAClB7B,EAAUD,GACNN,EAAUmC,WACZnC,EAAUmC,UAAU7B,EAAQ8B,EAC9B,EAEFC,OAAQrC,EAAUqC,QAAU,EAC5BxD,OAAQ4B,cAAcD,EAAe,CACnC8B,MAAO,CACLN,QACAO,OAAQ,GACRC,OAAQ,GAEVC,QAAS,CACPC,OAAQ,0BAA0BzC,EAAMgC,OAAO,0BAGnDU,UACEd,IAACe,eAAc,CACblE,IAAKA,EACLE,KAAMA,EACNE,QAASA,EACTC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,UAAWA,EACXC,MAAOA,EACPC,QAASA,EACTC,MAAOA,EACPC,SAAUA,EACVqD,MAAO7C,EAAU6C,MACjBpD,WAAYA,EACZqD,QAAS9C,EAAU8C,QACnBpD,aAAcA,EACdqD,OAAQ/C,EAAU+C,OAClBC,gBAAiBhD,EAAUgD,gBAC3BrD,iBAAkBA,EAClBC,oBAAqBA,EACrBC,cAAeA,EACf8C,UAAW3C,EAAU2C,aAK3B,OACEd,IAACC,QAAO,IACFH,EACJsB,UAAW,CACTC,KAAM,CACJC,SAAUxB,EAAayB,eAG3B,IAGN,CACEC,YArKiB,UAsKjBhE,MAAOiE,QAGX,CACEC,UAAWC"}
@@ -1,2 +1,2 @@
1
- 'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');const TooltipComponent=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:o="s",titleProps:s={},contentProps:n={},closeButtonProps:r={},title:i,content:c,footer:a,closeFn:p,showCloseButton:l,...m}=e;const x={appearance:'body',size:'inherit',color:'inherit'};return jsxRuntime.jsxs(style.Root,{...m,size:o,ref:t,children:[l&&jsxRuntime.jsx(style.CloseButton,{...r,type:"button",onClick:e=>{typeof p=='function'&&p(),r.onClick&&r.onClick(e)},children:jsxRuntime.jsx(Icon.Icon,{as:"span",name:"close",size:16})}),i&&jsxRuntime.jsx(Text.Text,{weight:700,marginRight:l?16:void 0,marginBottom:c||a?'0.3em':void 0,...x,...s,children:i}),c&&jsxRuntime.jsx(Text.Text,{marginRight:!i&&l?16:void 0,marginBottom:a?'0.2em':void 0,...x,...n,children:c}),a]})})),{sizes:constants.SIZES,displayName:"TooltipComponent"});exports.SIZES=constants.SIZES,exports.COMPONENT_NAME="TooltipComponent",exports.TooltipComponent=TooltipComponent;
1
+ 'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const TooltipComponent=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:o="s",titleProps:s={},contentProps:i={},closeButtonProps:n={},sizeXXS:r,sizeXS:c,sizeS:a,sizeM:l,sizeL:p,sizeXL:m,title:x,content:u,footer:z,closeFn:T,showCloseButton:d,...S}=e;const h={size:o,sizeXXS:r,sizeXS:c,sizeS:a,sizeM:l,sizeL:p,sizeXL:m};return jsxRuntime.jsxs(style.Root,{...S,...h,ref:t,children:[d&&jsxRuntime.jsx(style.CloseButton,{size:"s",icon:"close",secondary:S.black,contrast:S.black||S.contrast,...n,onClick:e=>{typeof T=='function'&&T(),n.onClick&&n.onClick(e)}}),x&&jsxRuntime.jsx(Text.Text,{appearance:"body",color:"inherit",weight:700,marginRight:d?16:void 0,marginBottom:u||z?'0.3em':void 0,sizes:constants.SIZES_TEXT,...h,...s,children:x}),u&&jsxRuntime.jsx(Text.Text,{appearance:"body",color:"inherit",marginRight:!x&&d?16:void 0,marginBottom:z?'0.2em':void 0,sizes:constants.SIZES_TEXT,...h,...i,children:u}),typeof z=='function'?z(h):z]})})),{sizes:constants.SIZES,displayName:"TooltipComponent"});exports.SIZES=constants.SIZES,exports.COMPONENT_NAME="TooltipComponent",exports.TooltipComponent=TooltipComponent;
2
2
  //# sourceMappingURL=TooltipComponent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TooltipComponent.js","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [TooltipComponentProps](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts)\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n TooltipComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n titleProps = {},\n contentProps = {},\n closeButtonProps = {},\n title,\n content,\n footer,\n closeFn,\n showCloseButton,\n ...restProps\n } = props\n\n const textProps: TextProps = { appearance: 'body', size: 'inherit', color: 'inherit' }\n\n return (\n <Styled.Root {...restProps} size={size} ref={ref}>\n {showCloseButton && (\n <Styled.CloseButton\n {...closeButtonProps}\n type='button'\n onClick={(evt) => {\n if (typeof closeFn === 'function') closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n >\n <Icon as='span' name='close' size={16} />\n </Styled.CloseButton>\n )}\n {title && (\n <Text\n weight={700}\n marginRight={showCloseButton ? 16 : undefined}\n marginBottom={content || footer ? '0.3em' : undefined}\n {...textProps}\n {...titleProps}\n >\n {title}\n </Text>\n )}\n {content && (\n <Text\n marginRight={!title && showCloseButton ? 16 : undefined}\n marginBottom={footer ? '0.2em' : undefined}\n {...textProps}\n {...contentProps}\n >\n {content}\n </Text>\n )}\n {footer}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","title","content","footer","closeFn","showCloseButton","restProps","textProps","appearance","color","_jsxs","Styled","children","_jsx","jsx","type","onClick","evt","Icon","as","name","Text","weight","marginRight","undefined","marginBottom","sizes","SIZES","displayName"],"mappings":"iSAqBMA,MAAAA,iBAA2EC,gBAAAA,gBAI/EC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,MACrBA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDX,EAEJ,MAAMY,EAAuB,CAAEC,WAAY,OAAQX,KAAM,UAAWY,MAAO,WAE3E,OACEC,WAAAA,KAACC,MAAAA,KAAW,IAAKL,EAAWT,KAAMA,EAAMD,IAAKA,EAAIgB,UAC9CP,GACCQ,WAAAC,IAACH,kBAAkB,IACbX,EACJe,KAAK,SACLC,QAAUC,WACGb,GAAY,YAAYA,IAC/BJ,EAAiBgB,SAAShB,EAAiBgB,QAAQC,EAAI,EAC3DL,SAEFC,WAAAC,IAACI,UAAI,CAACC,GAAG,OAAOC,KAAK,QAAQvB,KAAM,OAGtCI,GACCY,WAAAC,IAACO,UAAI,CACHC,OAAQ,IACRC,YAAalB,EAAkB,QAAKmB,EACpCC,aAAcvB,GAAWC,EAAS,aAAUqB,KACxCjB,KACAT,EAAUc,SAEbX,IAGJC,GACCW,WAAAC,IAACO,UAAI,CACHE,aAActB,GAASI,EAAkB,QAAKmB,EAC9CC,aAActB,EAAS,aAAUqB,KAC7BjB,KACAR,EAAYa,SAEfV,IAGJC,IACW,IAGlB,CACEuB,MAAOC,UAAKA,MACZC,YAzEmB,0EAAA"}
1
+ {"version":3,"file":"TooltipComponent.js","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_TEXT } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n TooltipComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n titleProps = {},\n contentProps = {},\n closeButtonProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n title,\n content,\n footer,\n closeFn,\n showCloseButton,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n {showCloseButton && (\n <Styled.CloseButton\n size='s'\n icon='close'\n secondary={restProps.black}\n contrast={restProps.black || restProps.contrast}\n {...closeButtonProps}\n onClick={(evt) => {\n if (typeof closeFn === 'function') closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n />\n )}\n {title && (\n <Text\n appearance='body'\n color='inherit'\n weight={700}\n marginRight={showCloseButton ? 16 : undefined}\n marginBottom={content || footer ? '0.3em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n )}\n {content && (\n <Text\n appearance='body'\n color='inherit'\n marginRight={!title && showCloseButton ? 16 : undefined}\n marginBottom={footer ? '0.2em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...contentProps}\n >\n {content}\n </Text>\n )}\n {typeof footer === 'function' ? footer(sizeProps) : footer}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","title","content","footer","closeFn","showCloseButton","restProps","sizeProps","_jsxs","Styled","children","_jsx","jsx","icon","secondary","black","contrast","onClick","evt","Text","appearance","color","weight","marginRight","undefined","marginBottom","sizes","SIZES_TEXT","SIZES","displayName"],"mappings":"6PAmBMA,MAAAA,iBAA2EC,gBAAAA,gBAI/EC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,QACrBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDjB,EAEJ,MAAMkB,EAAY,CAChBhB,OACAI,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEQ,WAAAA,KAACC,MAAAA,KAAW,IAAKH,KAAeC,EAAWjB,IAAKA,EAAIoB,UACjDL,GACCM,WAAAC,IAACH,kBAAkB,CACjBlB,KAAK,IACLsB,KAAK,QACLC,UAAWR,EAAUS,MACrBC,SAAUV,EAAUS,OAAST,EAAUU,YACnCtB,EACJuB,QAAUC,WACGd,GAAY,YAAYA,IAC/BV,EAAiBuB,SAASvB,EAAiBuB,QAAQC,EAAI,IAIhEjB,GACCU,WAAAC,IAACO,UAAI,CACHC,WAAW,OACXC,MAAM,UACNC,OAAQ,IACRC,YAAalB,EAAkB,QAAKmB,EACpCC,aAAcvB,GAAWC,EAAS,aAAUqB,EAC5CE,MAAOC,UAAWA,cACdpB,KACAf,EAAUkB,SAEbT,IAGJC,GACCS,WAAAC,IAACO,UAAI,CACHC,WAAW,OACXC,MAAM,UACNE,aAActB,GAASI,EAAkB,QAAKmB,EAC9CC,aAActB,EAAS,aAAUqB,EACjCE,MAAOC,UAAWA,cACdpB,KACAd,EAAYiB,SAEfR,WAGGC,GAAW,WAAaA,EAAOI,GAAaJ,IACxC,IAGlB,CACEuB,MAAOE,UAAKA,MACZC,YA9FmB,0EAAA"}
@@ -1,2 +1,2 @@
1
- import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES}from'./constants.mjs';import{Root,CloseButton}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{Text}from'../Text/Text.mjs';const COMPONENT_NAME='TooltipComponent';const TooltipComponent=withMergedProps(forwardRef(((o,t)=>{const{size:e="s",titleProps:n={},contentProps:r={},closeButtonProps:i={},title:s,content:m,footer:p,closeFn:c,showCloseButton:l,...a}=o;const d={appearance:'body',size:'inherit',color:'inherit'};return jsxs(Root,{...a,size:e,ref:t,children:[l&&jsx(CloseButton,{...i,type:"button",onClick:o=>{typeof c=='function'&&c(),i.onClick&&i.onClick(o)},children:jsx(Icon,{as:"span",name:"close",size:16})}),s&&jsx(Text,{weight:700,marginRight:l?16:void 0,marginBottom:m||p?'0.3em':void 0,...d,...n,children:s}),m&&jsx(Text,{marginRight:!s&&l?16:void 0,marginBottom:p?'0.2em':void 0,...d,...r,children:m}),p]})})),{sizes:SIZES,displayName:"TooltipComponent"});export{COMPONENT_NAME,SIZES,TooltipComponent};
1
+ import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_TEXT}from'./constants.mjs';import{Root,CloseButton}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const COMPONENT_NAME='TooltipComponent';const TooltipComponent=withMergedProps(forwardRef(((o,t)=>{const{size:e="s",titleProps:s={},contentProps:i={},closeButtonProps:r={},sizeXXS:n,sizeXS:c,sizeS:m,sizeM:p,sizeL:l,sizeXL:a,title:z,content:S,footer:T,closeFn:d,showCloseButton:f,...h}=o;const x={size:e,sizeXXS:n,sizeXS:c,sizeS:m,sizeM:p,sizeL:l,sizeXL:a};return jsxs(Root,{...h,...x,ref:t,children:[f&&jsx(CloseButton,{size:"s",icon:"close",secondary:h.black,contrast:h.black||h.contrast,...r,onClick:o=>{typeof d=='function'&&d(),r.onClick&&r.onClick(o)}}),z&&jsx(Text,{appearance:"body",color:"inherit",weight:700,marginRight:f?16:void 0,marginBottom:S||T?'0.3em':void 0,sizes:SIZES_TEXT,...x,...s,children:z}),S&&jsx(Text,{appearance:"body",color:"inherit",marginRight:!z&&f?16:void 0,marginBottom:T?'0.2em':void 0,sizes:SIZES_TEXT,...x,...i,children:S}),typeof T=='function'?T(x):T]})})),{sizes:SIZES,displayName:"TooltipComponent"});export{COMPONENT_NAME,SIZES,TooltipComponent};
2
2
  //# sourceMappingURL=TooltipComponent.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TooltipComponent.mjs","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [TooltipComponentProps](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts)\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n TooltipComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n titleProps = {},\n contentProps = {},\n closeButtonProps = {},\n title,\n content,\n footer,\n closeFn,\n showCloseButton,\n ...restProps\n } = props\n\n const textProps: TextProps = { appearance: 'body', size: 'inherit', color: 'inherit' }\n\n return (\n <Styled.Root {...restProps} size={size} ref={ref}>\n {showCloseButton && (\n <Styled.CloseButton\n {...closeButtonProps}\n type='button'\n onClick={(evt) => {\n if (typeof closeFn === 'function') closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n >\n <Icon as='span' name='close' size={16} />\n </Styled.CloseButton>\n )}\n {title && (\n <Text\n weight={700}\n marginRight={showCloseButton ? 16 : undefined}\n marginBottom={content || footer ? '0.3em' : undefined}\n {...textProps}\n {...titleProps}\n >\n {title}\n </Text>\n )}\n {content && (\n <Text\n marginRight={!title && showCloseButton ? 16 : undefined}\n marginBottom={footer ? '0.2em' : undefined}\n {...textProps}\n {...contentProps}\n >\n {content}\n </Text>\n )}\n {footer}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["COMPONENT_NAME","TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","title","content","footer","closeFn","showCloseButton","restProps","textProps","appearance","color","_jsxs","Styled","children","_jsx","type","onClick","evt","Icon","as","name","Text","weight","marginRight","undefined","marginBottom","sizes","SIZES","displayName"],"mappings":"qRASMA,MAAAA,eAAiB,mBAYjBC,MAAAA,iBAA2EC,gBAI/EC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,MACrBA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDX,EAEJ,MAAMY,EAAuB,CAAEC,WAAY,OAAQX,KAAM,UAAWY,MAAO,WAE3E,OACEC,KAACC,KAAW,IAAKL,EAAWT,KAAMA,EAAMD,IAAKA,EAAIgB,UAC9CP,GACCQ,IAACF,YAAkB,IACbX,EACJc,KAAK,SACLC,QAAUC,WACGZ,GAAY,YAAYA,IAC/BJ,EAAiBe,SAASf,EAAiBe,QAAQC,EAAI,EAC3DJ,SAEFC,IAACI,KAAI,CAACC,GAAG,OAAOC,KAAK,QAAQtB,KAAM,OAGtCI,GACCY,IAACO,KAAI,CACHC,OAAQ,IACRC,YAAajB,EAAkB,QAAKkB,EACpCC,aAActB,GAAWC,EAAS,aAAUoB,KACxChB,KACAT,EAAUc,SAEbX,IAGJC,GACCW,IAACO,KAAI,CACHE,aAAcrB,GAASI,EAAkB,QAAKkB,EAC9CC,aAAcrB,EAAS,aAAUoB,KAC7BhB,KACAR,EAAYa,SAEfV,IAGJC,IACW,IAGlB,CACEsB,MAAOC,MACPC,YAzEmB"}
1
+ {"version":3,"file":"TooltipComponent.mjs","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_TEXT } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n TooltipComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n titleProps = {},\n contentProps = {},\n closeButtonProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n title,\n content,\n footer,\n closeFn,\n showCloseButton,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n {showCloseButton && (\n <Styled.CloseButton\n size='s'\n icon='close'\n secondary={restProps.black}\n contrast={restProps.black || restProps.contrast}\n {...closeButtonProps}\n onClick={(evt) => {\n if (typeof closeFn === 'function') closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n />\n )}\n {title && (\n <Text\n appearance='body'\n color='inherit'\n weight={700}\n marginRight={showCloseButton ? 16 : undefined}\n marginBottom={content || footer ? '0.3em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n )}\n {content && (\n <Text\n appearance='body'\n color='inherit'\n marginRight={!title && showCloseButton ? 16 : undefined}\n marginBottom={footer ? '0.2em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...contentProps}\n >\n {content}\n </Text>\n )}\n {typeof footer === 'function' ? footer(sizeProps) : footer}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["COMPONENT_NAME","TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","title","content","footer","closeFn","showCloseButton","restProps","sizeProps","_jsxs","Styled","children","_jsx","icon","secondary","black","contrast","onClick","evt","Text","appearance","color","weight","marginRight","undefined","marginBottom","sizes","SIZES_TEXT","SIZES","displayName"],"mappings":"6PAOMA,MAAAA,eAAiB,mBAYjBC,MAAAA,iBAA2EC,gBAI/EC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,QACrBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDjB,EAEJ,MAAMkB,EAAY,CAChBhB,OACAI,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEQ,KAACC,KAAW,IAAKH,KAAeC,EAAWjB,IAAKA,EAAIoB,UACjDL,GACCM,IAACF,YAAkB,CACjBlB,KAAK,IACLqB,KAAK,QACLC,UAAWP,EAAUQ,MACrBC,SAAUT,EAAUQ,OAASR,EAAUS,YACnCrB,EACJsB,QAAUC,WACGb,GAAY,YAAYA,IAC/BV,EAAiBsB,SAAStB,EAAiBsB,QAAQC,EAAI,IAIhEhB,GACCU,IAACO,KAAI,CACHC,WAAW,OACXC,MAAM,UACNC,OAAQ,IACRC,YAAajB,EAAkB,QAAKkB,EACpCC,aAActB,GAAWC,EAAS,aAAUoB,EAC5CE,MAAOC,cACHnB,KACAf,EAAUkB,SAEbT,IAGJC,GACCS,IAACO,KAAI,CACHC,WAAW,OACXC,MAAM,UACNE,aAAcrB,GAASI,EAAkB,QAAKkB,EAC9CC,aAAcrB,EAAS,aAAUoB,EACjCE,MAAOC,cACHnB,KACAd,EAAYiB,SAEfR,WAGGC,GAAW,WAAaA,EAAOI,GAAaJ,IACxC,IAGlB,CACEsB,MAAOE,MACPC,YA9FmB"}
@@ -1,2 +1,2 @@
1
- 'use strict';exports.SIZES={xxxl:{fontSize:16,minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},xxl:{fontSize:16,minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},xl:{fontSize:16,minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},l:{fontSize:16,minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},m:{fontSize:14,minWidth:64,maxWidth:340,paddingTop:12,paddingRight:16,paddingBottom:12,paddingLeft:16,borderRadius:8},s:{fontSize:14,minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8},xs:{fontSize:14,minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8},xxs:{fontSize:14,minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8},xxxs:{fontSize:14,minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8}};
1
+ 'use strict';exports.SIZES={l:{minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},m:{minWidth:64,maxWidth:340,paddingTop:12,paddingRight:16,paddingBottom:12,paddingLeft:16,borderRadius:8},s:{minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8}},exports.SIZES_TEXT={l:{fontSize:16},m:{fontSize:14},s:{fontSize:14}};
2
2
  //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../src/components/TooltipComponent/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from 'shared/types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xxxl: {\n fontSize: 16,\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n xxl: {\n fontSize: 16,\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n xl: {\n fontSize: 16,\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n l: {\n fontSize: 16,\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n m: {\n fontSize: 14,\n minWidth: 64,\n maxWidth: 340,\n paddingTop: 12,\n paddingRight: 16,\n paddingBottom: 12,\n paddingLeft: 16,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n xs: {\n fontSize: 14,\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n xxs: {\n fontSize: 14,\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n xxxs: {\n fontSize: 14,\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n}\n"],"names":["xxxl","fontSize","minWidth","maxWidth","paddingTop","paddingRight","paddingBottom","paddingLeft","borderRadius","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"2BAGkD,CAChDA,KAAM,CACJC,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBC,IAAK,CACHR,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBE,GAAI,CACFT,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBG,EAAG,CACDV,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBI,EAAG,CACDX,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBK,EAAG,CACDZ,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc,GAEhBM,GAAI,CACFb,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc,GAEhBO,IAAK,CACHd,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc,GAEhBQ,KAAM,CACJf,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc"}
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/components/TooltipComponent/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { TooltipComponentSize } from './types'\n\nexport const SIZES: Record<TooltipComponentSize, CSSProperties> = {\n l: {\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n m: {\n minWidth: 64,\n maxWidth: 340,\n paddingTop: 12,\n paddingRight: 16,\n paddingBottom: 12,\n paddingLeft: 16,\n borderRadius: 8,\n },\n s: {\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n}\n\nexport const SIZES_TEXT: Record<TooltipComponentSize, CSSProperties> = {\n l: { fontSize: 16 },\n m: { fontSize: 14 },\n s: { fontSize: 14 },\n}\n"],"names":["l","minWidth","maxWidth","paddingTop","paddingRight","paddingBottom","paddingLeft","borderRadius","m","s","fontSize"],"mappings":"2BAGkE,CAChEA,EAAG,CACDC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBC,EAAG,CACDP,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBE,EAAG,CACDR,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc,uBAIqD,CACrEP,EAAG,CAAEU,SAAU,IACfF,EAAG,CAAEE,SAAU,IACfD,EAAG,CAAEC,SAAU"}
@@ -1,2 +1,2 @@
1
- const SIZES={xxxl:{fontSize:16,minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},xxl:{fontSize:16,minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},xl:{fontSize:16,minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},l:{fontSize:16,minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},m:{fontSize:14,minWidth:64,maxWidth:340,paddingTop:12,paddingRight:16,paddingBottom:12,paddingLeft:16,borderRadius:8},s:{fontSize:14,minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8},xs:{fontSize:14,minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8},xxs:{fontSize:14,minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8},xxxs:{fontSize:14,minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8}};export{SIZES};
1
+ const SIZES={l:{minWidth:80,maxWidth:380,paddingTop:14,paddingRight:18,paddingBottom:14,paddingLeft:18,borderRadius:8},m:{minWidth:64,maxWidth:340,paddingTop:12,paddingRight:16,paddingBottom:12,paddingLeft:16,borderRadius:8},s:{minWidth:45,maxWidth:200,paddingTop:8,paddingRight:8,paddingBottom:8,paddingLeft:8,borderRadius:8}};const SIZES_TEXT={l:{fontSize:16},m:{fontSize:14},s:{fontSize:14}};export{SIZES,SIZES_TEXT};
2
2
  //# sourceMappingURL=constants.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.mjs","sources":["../../../../src/components/TooltipComponent/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from 'shared/types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xxxl: {\n fontSize: 16,\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n xxl: {\n fontSize: 16,\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n xl: {\n fontSize: 16,\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n l: {\n fontSize: 16,\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n m: {\n fontSize: 14,\n minWidth: 64,\n maxWidth: 340,\n paddingTop: 12,\n paddingRight: 16,\n paddingBottom: 12,\n paddingLeft: 16,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n xs: {\n fontSize: 14,\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n xxs: {\n fontSize: 14,\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n xxxs: {\n fontSize: 14,\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n}\n"],"names":["SIZES","xxxl","fontSize","minWidth","maxWidth","paddingTop","paddingRight","paddingBottom","paddingLeft","borderRadius","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAGO,MAAMA,MAAqC,CAChDC,KAAM,CACJC,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBC,IAAK,CACHR,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBE,GAAI,CACFT,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBG,EAAG,CACDV,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBI,EAAG,CACDX,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBK,EAAG,CACDZ,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc,GAEhBM,GAAI,CACFb,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc,GAEhBO,IAAK,CACHd,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc,GAEhBQ,KAAM,CACJf,SAAU,GACVC,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc"}
1
+ {"version":3,"file":"constants.mjs","sources":["../../../../src/components/TooltipComponent/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { TooltipComponentSize } from './types'\n\nexport const SIZES: Record<TooltipComponentSize, CSSProperties> = {\n l: {\n minWidth: 80,\n maxWidth: 380,\n paddingTop: 14,\n paddingRight: 18,\n paddingBottom: 14,\n paddingLeft: 18,\n borderRadius: 8,\n },\n m: {\n minWidth: 64,\n maxWidth: 340,\n paddingTop: 12,\n paddingRight: 16,\n paddingBottom: 12,\n paddingLeft: 16,\n borderRadius: 8,\n },\n s: {\n minWidth: 45,\n maxWidth: 200,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n borderRadius: 8,\n },\n}\n\nexport const SIZES_TEXT: Record<TooltipComponentSize, CSSProperties> = {\n l: { fontSize: 16 },\n m: { fontSize: 14 },\n s: { fontSize: 14 },\n}\n"],"names":["SIZES","l","minWidth","maxWidth","paddingTop","paddingRight","paddingBottom","paddingLeft","borderRadius","m","s","SIZES_TEXT","fontSize"],"mappings":"AAGO,MAAMA,MAAqD,CAChEC,EAAG,CACDC,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBC,EAAG,CACDP,SAAU,GACVC,SAAU,IACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,GACbC,aAAc,GAEhBE,EAAG,CACDR,SAAU,GACVC,SAAU,IACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,EACbC,aAAc,IAIX,MAAMG,WAA0D,CACrEV,EAAG,CAAEW,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,EAAG,CAAEE,SAAU"}
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var focus=require('../../mixins/focus.js');var responsiveSize=require('../../mixins/responsive-size.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardTooltipComponentProp=style.createShouldForwardProp((o=>!['black','contrast','elevated'].includes(o)));const CloseButton=styled__default.default.button.withConfig({displayName:"TooltipComponent__CloseButton",componentId:"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;}",""],focus.focus);const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n filter: drop-shadow(0 6px 10px ${o.shadowColor});\n\n & > ${CloseButton} {\n color: ${o.closeColor};\n }\n & > ${CloseButton}:hover {\n color: ${o.closeColorHover};\n }\n & > ${CloseButton}:active {\n color: ${o.closeColorActive};\n }\n & > ${CloseButton}:disabled {\n color: ${o.closeColorDisabled};\n }\n\n`;const COLOR_SCHEMA={contrast:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-primary-basic'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,closeColor:o.theme.colors['content-oncolor-tertiary'],closeColorHover:o.theme.colors['content-oncolor-primary'],closeColorActive:o.theme.colors['content-oncolor-primary'],closeColorDisabled:o.theme.colors['content-oncolor-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-onmain-inverse'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,closeColor:o.theme.colors['content-onmain-inverse'],closeColorHover:tinycolor__default.default(o.theme.colors['content-onmain-inverse']).darken(20).toString(),closeColorActive:tinycolor__default.default(o.theme.colors['content-onmain-inverse']).darken(20).toString(),closeColorDisabled:o.theme.colors['content-disabled'],...o.palette}))),primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,closeColor:o.theme.colors['content-onmain-tertiary'],closeColorHover:o.theme.colors['content-onmain-primary'],closeColorActive:o.theme.colors['content-onmain-primary'],closeColorDisabled:o.theme.colors['content-disabled'],...o.palette})))};const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTooltipComponentProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,minWidth:'4.6em',maxWidth:'24em',padding:'0.8em',borderRadius:8})}).withConfig({displayName:"TooltipComponent__Root",componentId:"ui__sc-1fjl2iv-1"})(["box-sizing:border-box;display:inline-block;isolation:isolate;position:relative;cursor:default;word-break:break-word;"," ",""],(o=>{let e=COLOR_SCHEMA.primary;return o.black&&(e=COLOR_SCHEMA.black),o.contrast&&(e=COLOR_SCHEMA.contrast),e}),responsiveSize.responsiveSize);exports.CloseButton=CloseButton,exports.Root=Root;
1
+ 'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var IconButton=require('../IconButton/IconButton.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardTooltipComponentProp=style.createShouldForwardProp((o=>!['black','contrast','elevated'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n filter: drop-shadow(0 6px 10px ${o.shadowColor});\n`;const COLOR_SCHEMA={contrast:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-primary-basic'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-onmain-inverse'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette}))),primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette})))};const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTooltipComponentProp}).withConfig({displayName:"TooltipComponent__Root",componentId:"ui__sc-1fjl2iv-0"})(["box-sizing:border-box;display:inline-block;isolation:isolate;position:relative;cursor:default;word-break:break-word;"," ",""],(o=>{let e=COLOR_SCHEMA.primary;return o.black&&(e=COLOR_SCHEMA.black),o.contrast&&(e=COLOR_SCHEMA.contrast),e}),responsiveSize.responsiveSize);const CloseButton=styled__default.default(IconButton.IconButton).withConfig({displayName:"TooltipComponent__CloseButton",componentId:"ui__sc-1fjl2iv-1"})(["position:absolute;top:2px;right:2px;"]);exports.CloseButton=CloseButton,exports.Root=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 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","displayName","componentId","focus","template","palette","color","backgroundColor","shadowColor","closeColor","closeColorHover","closeColorActive","closeColorDisabled","COLOR_SCHEMA","contrast","css","props","theme","colors","elevated","transparent","black","tinycolor","default","darken","toString","primary","Root","div","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","minWidth","maxWidth","padding","borderRadius","schema","responsiveSize"],"mappings":"kZAQA,MAAMA,kCAAoCC,MAAuBA,yBAC9DC,IAAa,CAAC,QAAS,WAAY,YAAYC,SAASD,WAG9CE,YAAcC,gBAAAA,QAAOC,OAAMC,WAAA,CAAAC,YAAA,gCAAAC,YAAA,oBAAbJ,CAAa,CAAA,8PAAA,IAmBpCK,MAAAA,OAGJ,MAAMC,SAAYC,GAAqC,cAC5CA,EAAQC,+BACGD,EAAQE,sDACKF,EAAQG,0BAEnCX,6BACKQ,EAAQI,2BAEbZ,mCACKQ,EAAQK,gCAEbb,oCACKQ,EAAQM,iCAEbd,sCACKQ,EAAQO,+BAKrB,MAAMC,aAAe,CACnBC,SAAUC,OAAGA,IAAA,CAAA,GAAA,KACRC,GACDZ,SAAS,CACPE,MAAOU,EAAMC,MAAMC,OAAO,2BAC1BX,gBAAiBS,EAAMC,MAAMC,OAAO,0BACpCV,YAAaQ,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,YAC1FX,WAAYO,EAAMC,MAAMC,OAAO,4BAC/BR,gBAAiBM,EAAMC,MAAMC,OAAO,2BACpCP,iBAAkBK,EAAMC,MAAMC,OAAO,2BACrCN,mBAAoBI,EAAMC,MAAMC,OAAO,+BACpCF,EAAMX,YAGfgB,MAAON,OAAGA,IAAA,CAAA,GAAA,KACLC,GACDZ,SAAS,CACPE,MAAOU,EAAMC,MAAMC,OAAO,0BAC1BX,gBAAiBS,EAAMC,MAAMC,OAAO,qBACpCV,YAAaQ,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,YAC1FX,WAAYO,EAAMC,MAAMC,OAAO,0BAC/BR,gBAAiBY,mBAASC,QAACP,EAAMC,MAAMC,OAAO,2BAA2BM,OAAO,IAAIC,WACpFd,iBAAkBW,mBAASC,QAACP,EAAMC,MAAMC,OAAO,2BAA2BM,OAAO,IAAIC,WACrFb,mBAAoBI,EAAMC,MAAMC,OAAO,uBACpCF,EAAMX,YAGfqB,QAASX,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDZ,SAAS,CACPE,MAAOU,EAAMC,MAAMC,OAAO,0BAC1BX,gBAAiBS,EAAMC,MAAMC,OAAO,qBACpCV,YAAaQ,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,YAC1FX,WAAYO,EAAMC,MAAMC,OAAO,2BAC/BR,gBAAiBM,EAAMC,MAAMC,OAAO,0BACpCP,iBAAkBK,EAAMC,MAAMC,OAAO,0BACrCN,mBAAoBI,EAAMC,MAAMC,OAAO,uBACpCF,EAAMX,aAKV,MAAMsB,KAAO7B,gBAAAA,QAAO8B,IACxB5B,WAAwC,CACvC6B,kBAAmBpC,oCAEpBqC,MAA0G,CACzGC,uBAAwBA,CAACC,EAAMC,KAAe,CAC5CC,gBAAiBF,GAAS,SAAWA,EAAO,GAAGA,IAAOC,IACtDE,SAAU,QACVC,SAAU,OACVC,QAAS,QACTC,aAAc,MAEhBtC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,oBAZgBJ,CAYhB,CAAA,uHAAA,IAAA,KAQCkB,IACD,IAAIuB,EAAS1B,aAAaa,QAK1B,OAHIV,EAAMK,QAAOkB,EAAS1B,aAAaQ,OACnCL,EAAMF,WAAUyB,EAAS1B,aAAaC,UAEnCyB,CAAM,GAGbC,eAAcA"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/TooltipComponent/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { IconButton } from 'components/IconButton'\nimport type { StyledTooltipComponentProps, TooltipComponentPalette } from './types'\n\nconst shouldForwardTooltipComponentProp = createShouldForwardProp(\n (propKey) => !['black', 'contrast', 'elevated'].includes(propKey)\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\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 ...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 ...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 ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledTooltipComponentProps>({\n shouldForwardProp: shouldForwardTooltipComponentProp,\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\nexport const CloseButton = styled(IconButton)`\n position: absolute;\n top: 2px;\n right: 2px;\n`\n"],"names":["shouldForwardTooltipComponentProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","shadowColor","COLOR_SCHEMA","contrast","css","props","theme","colors","elevated","transparent","black","primary","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","schema","responsiveSize","CloseButton","default","IconButton"],"mappings":"uUAMA,MAAMA,kCAAoCC,MAAuBA,yBAC9DC,IAAa,CAAC,QAAS,WAAY,YAAYC,SAASD,KAG3D,MAAME,SAAYC,GAAqC,cAC5CA,EAAQC,+BACGD,EAAQE,sDACKF,EAAQG,kBAG3C,MAAMC,aAAe,CACnBC,SAAUC,OAAGA,IAAA,CAAA,GAAA,KACRC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,2BAC1BP,gBAAiBK,EAAMC,MAAMC,OAAO,0BACpCN,YAAaI,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,eACvFJ,EAAMP,YAGfY,MAAON,OAAGA,IAAA,CAAA,GAAA,KACLC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMC,MAAMC,OAAO,qBACpCN,YAAaI,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,eACvFJ,EAAMP,YAGfa,QAASP,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMC,MAAMC,OAAO,qBACpCN,YAAaI,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,eACvFJ,EAAMP,aAKV,MAAMc,KAAOC,gBAAAA,QAAOC,IAAIC,WAAwC,CACrEC,kBAAmBvB,oCACnBsB,WAAA,CAAAE,YAAA,yBAAAC,YAAA,oBAFkBL,CAElB,CAAA,uHAAA,IAAA,KAQGR,IACD,IAAIc,EAASjB,aAAaS,QAK1B,OAHIN,EAAMK,QAAOS,EAASjB,aAAaQ,OACnCL,EAAMF,WAAUgB,EAASjB,aAAaC,UAEnCgB,CAAM,GAGbC,+BAGG,MAAMC,YAAcR,gBAAMS,QAACC,uBAAWR,WAAA,CAAAE,YAAA,gCAAAC,YAAA,oBAAlBL,CAI1B,CAAA"}
@@ -1,2 +1,2 @@
1
- import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{focus}from'../../mixins/focus.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';const shouldForwardTooltipComponentProp=createShouldForwardProp((o=>!['black','contrast','elevated'].includes(o)));const CloseButton=styled.button.withConfig({displayName:"TooltipComponent__CloseButton",componentId:"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;}",""],focus);const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n filter: drop-shadow(0 6px 10px ${o.shadowColor});\n\n & > ${CloseButton} {\n color: ${o.closeColor};\n }\n & > ${CloseButton}:hover {\n color: ${o.closeColorHover};\n }\n & > ${CloseButton}:active {\n color: ${o.closeColorActive};\n }\n & > ${CloseButton}:disabled {\n color: ${o.closeColorDisabled};\n }\n\n`;const COLOR_SCHEMA={contrast:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-primary-basic'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,closeColor:o.theme.colors['content-oncolor-tertiary'],closeColorHover:o.theme.colors['content-oncolor-primary'],closeColorActive:o.theme.colors['content-oncolor-primary'],closeColorDisabled:o.theme.colors['content-oncolor-disabled'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-onmain-inverse'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,closeColor:o.theme.colors['content-onmain-inverse'],closeColorHover:tinycolor(o.theme.colors['content-onmain-inverse']).darken(20).toString(),closeColorActive:tinycolor(o.theme.colors['content-onmain-inverse']).darken(20).toString(),closeColorDisabled:o.theme.colors['content-disabled'],...o.palette}))),primary:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,closeColor:o.theme.colors['content-onmain-tertiary'],closeColorHover:o.theme.colors['content-onmain-primary'],closeColorActive:o.theme.colors['content-onmain-primary'],closeColorDisabled:o.theme.colors['content-disabled'],...o.palette})))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardTooltipComponentProp}).attrs({dynamicSizeDeclaration:(o,e)=>({fontSize:typeof o=='string'?o:`${o}${e}`,minWidth:'4.6em',maxWidth:'24em',padding:'0.8em',borderRadius:8})}).withConfig({displayName:"TooltipComponent__Root",componentId:"ui__sc-1fjl2iv-1"})(["box-sizing:border-box;display:inline-block;isolation:isolate;position:relative;cursor:default;word-break:break-word;"," ",""],(o=>{let e=COLOR_SCHEMA.primary;return o.black&&(e=COLOR_SCHEMA.black),o.contrast&&(e=COLOR_SCHEMA.contrast),e}),responsiveSize);export{CloseButton,Root};
1
+ import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const shouldForwardTooltipComponentProp=createShouldForwardProp((o=>!['black','contrast','elevated'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n filter: drop-shadow(0 6px 10px ${o.shadowColor});\n`;const COLOR_SCHEMA={contrast:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-primary-basic'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-onmain-inverse'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette}))),primary:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette})))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardTooltipComponentProp}).withConfig({displayName:"TooltipComponent__Root",componentId:"ui__sc-1fjl2iv-0"})(["box-sizing:border-box;display:inline-block;isolation:isolate;position:relative;cursor:default;word-break:break-word;"," ",""],(o=>{let t=COLOR_SCHEMA.primary;return o.black&&(t=COLOR_SCHEMA.black),o.contrast&&(t=COLOR_SCHEMA.contrast),t}),responsiveSize);const CloseButton=styled(IconButton).withConfig({displayName:"TooltipComponent__CloseButton",componentId:"ui__sc-1fjl2iv-1"})(["position:absolute;top:2px;right:2px;"]);export{CloseButton,Root};
2
2
  //# sourceMappingURL=style.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","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","displayName","componentId","focus","template","palette","color","backgroundColor","shadowColor","closeColor","closeColorHover","closeColorActive","closeColorDisabled","COLOR_SCHEMA","contrast","css","props","theme","colors","elevated","transparent","black","tinycolor","darken","toString","primary","Root","div","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","minWidth","maxWidth","padding","borderRadius","schema","responsiveSize"],"mappings":"sPAQA,MAAMA,kCAAoCC,yBACvCC,IAAa,CAAC,QAAS,WAAY,YAAYC,SAASD,WAG9CE,YAAcC,OAAOC,OAAMC,WAAA,CAAAC,YAAA,gCAAAC,YAAA,oBAAbJ,CAAa,CAAA,8PAAA,IAmBpCK,OAGJ,MAAMC,SAAYC,GAAqC,cAC5CA,EAAQC,+BACGD,EAAQE,sDACKF,EAAQG,0BAEnCX,6BACKQ,EAAQI,2BAEbZ,mCACKQ,EAAQK,gCAEbb,oCACKQ,EAAQM,iCAEbd,sCACKQ,EAAQO,+BAKrB,MAAMC,aAAe,CACnBC,SAAUC,IAAG,CAAA,GAAA,KACRC,GACDZ,SAAS,CACPE,MAAOU,EAAMC,MAAMC,OAAO,2BAC1BX,gBAAiBS,EAAMC,MAAMC,OAAO,0BACpCV,YAAaQ,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,YAC1FX,WAAYO,EAAMC,MAAMC,OAAO,4BAC/BR,gBAAiBM,EAAMC,MAAMC,OAAO,2BACpCP,iBAAkBK,EAAMC,MAAMC,OAAO,2BACrCN,mBAAoBI,EAAMC,MAAMC,OAAO,+BACpCF,EAAMX,YAGfgB,MAAON,IAAG,CAAA,GAAA,KACLC,GACDZ,SAAS,CACPE,MAAOU,EAAMC,MAAMC,OAAO,0BAC1BX,gBAAiBS,EAAMC,MAAMC,OAAO,qBACpCV,YAAaQ,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,YAC1FX,WAAYO,EAAMC,MAAMC,OAAO,0BAC/BR,gBAAiBY,UAAUN,EAAMC,MAAMC,OAAO,2BAA2BK,OAAO,IAAIC,WACpFb,iBAAkBW,UAAUN,EAAMC,MAAMC,OAAO,2BAA2BK,OAAO,IAAIC,WACrFZ,mBAAoBI,EAAMC,MAAMC,OAAO,uBACpCF,EAAMX,YAGfoB,QAASV,IAAG,CAAA,GAAA,KACPC,GACDZ,SAAS,CACPE,MAAOU,EAAMC,MAAMC,OAAO,0BAC1BX,gBAAiBS,EAAMC,MAAMC,OAAO,qBACpCV,YAAaQ,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,YAC1FX,WAAYO,EAAMC,MAAMC,OAAO,2BAC/BR,gBAAiBM,EAAMC,MAAMC,OAAO,0BACpCP,iBAAkBK,EAAMC,MAAMC,OAAO,0BACrCN,mBAAoBI,EAAMC,MAAMC,OAAO,uBACpCF,EAAMX,aAKV,MAAMqB,KAAO5B,OAAO6B,IACxB3B,WAAwC,CACvC4B,kBAAmBnC,oCAEpBoC,MAA0G,CACzGC,uBAAwBA,CAACC,EAAMC,KAAe,CAC5CC,gBAAiBF,GAAS,SAAWA,EAAO,GAAGA,IAAOC,IACtDE,SAAU,QACVC,SAAU,OACVC,QAAS,QACTC,aAAc,MAEhBrC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,oBAZgBJ,CAYhB,CAAA,uHAAA,IAAA,KAQCkB,IACD,IAAIsB,EAASzB,aAAaY,QAK1B,OAHIT,EAAMK,QAAOiB,EAASzB,aAAaQ,OACnCL,EAAMF,WAAUwB,EAASzB,aAAaC,UAEnCwB,CAAM,GAGbC"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/TooltipComponent/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { IconButton } from 'components/IconButton'\nimport type { StyledTooltipComponentProps, TooltipComponentPalette } from './types'\n\nconst shouldForwardTooltipComponentProp = createShouldForwardProp(\n (propKey) => !['black', 'contrast', 'elevated'].includes(propKey)\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\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 ...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 ...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 ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledTooltipComponentProps>({\n shouldForwardProp: shouldForwardTooltipComponentProp,\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\nexport const CloseButton = styled(IconButton)`\n position: absolute;\n top: 2px;\n right: 2px;\n`\n"],"names":["shouldForwardTooltipComponentProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","shadowColor","COLOR_SCHEMA","contrast","css","props","theme","colors","elevated","transparent","black","primary","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","schema","responsiveSize","CloseButton","IconButton"],"mappings":"+NAMA,MAAMA,kCAAoCC,yBACvCC,IAAa,CAAC,QAAS,WAAY,YAAYC,SAASD,KAG3D,MAAME,SAAYC,GAAqC,cAC5CA,EAAQC,+BACGD,EAAQE,sDACKF,EAAQG,kBAG3C,MAAMC,aAAe,CACnBC,SAAUC,IAAG,CAAA,GAAA,KACRC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,2BAC1BP,gBAAiBK,EAAMC,MAAMC,OAAO,0BACpCN,YAAaI,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,eACvFJ,EAAMP,YAGfY,MAAON,IAAG,CAAA,GAAA,KACLC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMC,MAAMC,OAAO,qBACpCN,YAAaI,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,eACvFJ,EAAMP,YAGfa,QAASP,IAAG,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMC,MAAMC,OAAO,qBACpCN,YAAaI,EAAMG,SAAWH,EAAMC,MAAMC,OAAO,oBAAsBF,EAAMC,MAAMC,OAAOE,eACvFJ,EAAMP,aAKV,MAAMc,KAAOC,OAAOC,IAAIC,WAAwC,CACrEC,kBAAmBvB,oCACnBsB,WAAA,CAAAE,YAAA,yBAAAC,YAAA,oBAFkBL,CAElB,CAAA,uHAAA,IAAA,KAQGR,IACD,IAAIc,EAASjB,aAAaS,QAK1B,OAHIN,EAAMK,QAAOS,EAASjB,aAAaQ,OACnCL,EAAMF,WAAUgB,EAASjB,aAAaC,UAEnCgB,CAAM,GAGbC,gBAGG,MAAMC,YAAcR,OAAOS,YAAWP,WAAA,CAAAE,YAAA,gCAAAC,YAAA,oBAAlBL,CAI1B,CAAA"}