@foxford/ui 2.89.0-beta-c862583-20251222 → 2.90.0-beta-749a287-20260112

package/components/Notification/constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.mjs","sources":["../../../../src/components/Notification/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { IconName } from 'components/Icon'\nimport { SIZES as SIZES_BUTTON } from 'components/Button'\nimport type { NotificationSize, NotificationStatus } from './types'\n\nexport const SIZES: Record<NotificationSize, CSSProperties> = {\n  l: {\n    fontSize: 20,\n    padding: '0.8em 1em',\n    borderRadius: 12,\n  },\n  m: {\n    fontSize: 16,\n    padding: '0.8em 1em',\n    borderRadius: 10,\n  },\n  s: {\n    fontSize: 12,\n    padding: '0.8em 1em',\n    borderRadius: 8,\n  },\n}\n\nexport const SIZES_ICON: Record<NotificationSize, CSSProperties> = {\n  l: { fontSize: 28 },\n  m: { fontSize: 24 },\n  s: { fontSize: 20 },\n}\n\nexport const ICON_NAMES: Record<NotificationStatus, IconName> = {\n  system: 'infoCircle',\n  info: 'infoCircle',\n  error: 'closeCirlce',\n  success: 'checkCircle',\n  warning: 'warningTriangle',\n}\n\nexport const SIZES_TEXT: Record<NotificationSize, CSSProperties> = {\n  l: { fontSize: 18 },\n  m: { fontSize: 16 },\n  s: { fontSize: 14 },\n}\n\nexport const SIZES_ACTION: Record<NotificationSize, CSSProperties> = {\n  l: SIZES_BUTTON.l,\n  m: SIZES_BUTTON.s,\n  s: SIZES_BUTTON.s,\n}\n"],"names":["SIZES","l","fontSize","padding","borderRadius","m","s","SIZES_ICON","ICON_NAMES","system","info","error","success","warning","SIZES_TEXT","SIZES_ACTION","SIZES_BUTTON"],"mappings":"+EAKO,MAAMA,MAAiD,CAC5DC,EAAG,CACDC,SAAU,GACVC,QAAS,YACTC,aAAc,IAEhBC,EAAG,CACDH,SAAU,GACVC,QAAS,YACTC,aAAc,IAEhBE,EAAG,CACDJ,SAAU,GACVC,QAAS,YACTC,aAAc,IAIX,MAAMG,WAAsD,CACjEN,EAAG,CAAEC,SAAU,IACfG,EAAG,CAAEH,SAAU,IACfI,EAAG,CAAEJ,SAAU,KAGV,MAAMM,WAAmD,CAC9DC,OAAQ,aACRC,KAAM,aACNC,MAAO,cACPC,QAAS,cACTC,QAAS,mBAGJ,MAAMC,WAAsD,CACjEb,EAAG,CAAEC,SAAU,IACfG,EAAG,CAAEH,SAAU,IACfI,EAAG,CAAEJ,SAAU,KAGV,MAAMa,aAAwD,CACnEd,EAAGe,QAAaf,EAChBI,EAAGW,QAAaV,EAChBA,EAAGU,QAAaV"}
+{"version":3,"file":"constants.mjs","sources":["../../../../src/components/Notification/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_BUTTON } from 'components/Button'\nimport type { NotificationSize } from './types'\n\nexport const SIZES: Record<NotificationSize, CSSProperties> = {\n  l: {\n    fontSize: 20,\n    padding: '0.8em 1em',\n    borderRadius: 12,\n  },\n  m: {\n    fontSize: 16,\n    padding: '0.8em 1em',\n    borderRadius: 10,\n  },\n  s: {\n    fontSize: 12,\n    padding: '0.8em 1em',\n    borderRadius: 8,\n  },\n}\n\nexport const SIZES_ICON: Record<NotificationSize, CSSProperties> = {\n  l: { fontSize: 28 },\n  m: { fontSize: 24 },\n  s: { fontSize: 20 },\n}\n\nexport const SIZES_TEXT: Record<NotificationSize, CSSProperties> = {\n  l: { fontSize: 18 },\n  m: { fontSize: 16 },\n  s: { fontSize: 14 },\n}\n\nexport const SIZES_ACTION: Record<NotificationSize, CSSProperties> = {\n  l: SIZES_BUTTON.l,\n  m: SIZES_BUTTON.s,\n  s: SIZES_BUTTON.s,\n}\n"],"names":["SIZES","l","fontSize","padding","borderRadius","m","s","SIZES_ICON","SIZES_TEXT","SIZES_ACTION","SIZES_BUTTON"],"mappings":"+EAIO,MAAMA,MAAiD,CAC5DC,EAAG,CACDC,SAAU,GACVC,QAAS,YACTC,aAAc,IAEhBC,EAAG,CACDH,SAAU,GACVC,QAAS,YACTC,aAAc,IAEhBE,EAAG,CACDJ,SAAU,GACVC,QAAS,YACTC,aAAc,IAIX,MAAMG,WAAsD,CACjEN,EAAG,CAAEC,SAAU,IACfG,EAAG,CAAEH,SAAU,IACfI,EAAG,CAAEJ,SAAU,KAGV,MAAMM,WAAsD,CACjEP,EAAG,CAAEC,SAAU,IACfG,EAAG,CAAEH,SAAU,IACfI,EAAG,CAAEJ,SAAU,KAGV,MAAMO,aAAwD,CACnER,EAAGS,QAAaT,EAChBI,EAAGK,QAAaJ,EAChBA,EAAGI,QAAaJ"}

package/components/PopoverComponent/PopoverComponent.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Badge=require('../Badge/Badge.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');const PopoverComponent=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:s="s",layout:i="vertical",sizeXXS:n,sizeXS:o,sizeS:r,sizeM:a,sizeL:l,sizeXL:u,layoutXXS:c,layoutXS:d,layoutS:x,layoutM:j,layoutL:m,layoutXL:p,root:R,badge:y,caption:S,header:h,title:g,content:z,body:T,closeButton:f,media:E,footer:B,imgSrcVertical:k,imgSrcHorizontal:I,loading:b,palette:w,closeFn:v,...P}=e;const A={size:s,sizeXXS:n,sizeXS:o,sizeS:r,sizeM:a,sizeL:l,sizeXL:u};const L={layout:i,layoutXXS:c,layoutXS:d,layoutS:x,layoutM:j,layoutL:m,layoutXL:p};const X={...A,borderRadius:8,marginRight:12,resetDefaultMargin:!0,sizes:sizes.SIZES_HEADER_BADGE};const V={...A,as:'span',appearance:'caption',color:'content-onmain-tertiary',weight:700,wordBreak:'break-word',sizes:sizes.SIZES_CAPTION};const C={...A,as:'h2',appearance:'subheading',color:'inherit',marginBottom:z?'0.4em':void 0,wordBreak:'break-word',sizes:sizes.SIZES_TITLE};const q={...A,as:'p',appearance:'body',color:'inherit',wordBreak:'break-word',sizes:sizes.SIZES_CONTENT};const _={...A,icon:'close',square:!0,marginTop:10,marginRight:10,sizes:sizes.SIZES_CLOSE_BUTTON,onClick:()=>{typeof v=='function'&&v()}};return jsxRuntime.jsx(style.Root,{...P,...A,...L,layouts:layouts.LAYOUTS,palette:w,ref:t,children:React.isValidElement(R)?R:typeof R=='function'?R({badgeProps:X,captionProps:V,titleProps:C,contentProps:q,closeButtonProps:_}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[b||E||I?jsxRuntime.jsx(style.Media,{...L,layouts:layouts.VISIBILITY_HORIZONTAL,children:b?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"1:1",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{})}):React.isValidElement(E)?E:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"1:1",width:"100%",children:jsxRuntime.jsx(style.Img,{src:I})})}):null,jsxRuntime.jsxs(style.Container,{children:[jsxRuntime.jsxs(style.Content,{children:[b?jsxRuntime.jsx(style.Header,{children:jsxRuntime.jsx(Skeleton.Skeleton,{width:"20%",children:jsxRuntime.jsx(Badge.Badge,{...X})})}):React.isValidElement(h)?h:typeof h=='function'?h({badgeProps:X,captionProps:V}):y||S?jsxRuntime.jsxs(style.Header,{children:[React.isValidElement(y)?y:typeof y=='function'?y(X):typeof y=='string'||typeof y=='number'?jsxRuntime.jsx(Badge.Badge,{...X,children:y}):null,React.isValidElement(S)?S:typeof S=='function'?S(V):typeof S=='string'||typeof S=='number'?jsxRuntime.jsx(Text.Text,{...V,children:S}):null]}):null,b||E||k?jsxRuntime.jsx(style.Media,{...L,layouts:layouts.VISIBILITY_VERTICAL,children:b?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"16:9",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{})}):React.isValidElement(E)?E:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"16:9",width:"100%",children:jsxRuntime.jsx(style.Img,{src:k})})}):null,b?jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,children:jsxRuntime.jsx(Text.Text,{appearance:"subheading",marginBottom:"0.4em",sizes:sizes.SIZES_TITLE,...A})}),jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,width:"70%",children:jsxRuntime.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:sizes.SIZES_CONTENT,...A})}),jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,width:"50%",children:jsxRuntime.jsx(Text.Text,{appearance:"body",sizes:sizes.SIZES_CONTENT,...A})})]}):React.isValidElement(T)?T:typeof T=='function'?T({titleProps:C,contentProps:q}):g||z?jsxRuntime.jsxs("div",{children:[React.isValidElement(g)?g:typeof g=='function'?g(C):typeof g=='string'||typeof g=='number'?jsxRuntime.jsx(Text.Text,{...C,children:g}):null,React.isValidElement(z)?z:typeof z=='function'?z(q):typeof z=='string'||typeof z=='number'?jsxRuntime.jsx(Text.Text,{...q,children:z}):null]}):null]}),B?jsxRuntime.jsx(style.Footer,{children:b?jsxRuntime.jsx(Skeleton.Skeleton,{width:"100%",children:jsxRuntime.jsx(Button.Button,{preset:"brand",...A})}):React.isValidElement(B)?B:null}):null]}),f?jsxRuntime.jsx(style.ButtonPosition,{children:React.isValidElement(f)?f:typeof f=='function'?f(_):null}):null]})})})),{displayName:'PopoverComponent',sizes:sizes.SIZES});exports.PopoverComponent=PopoverComponent;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Badge=require('../Badge/Badge.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');var index=require('../../icon-pack/src/icons/Close/index.js');const PopoverComponent=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:s="s",layout:i="vertical",sizeXXS:n,sizeXS:o,sizeS:r,sizeM:a,sizeL:l,sizeXL:u,layoutXXS:c,layoutXS:d,layoutS:x,layoutM:j,layoutL:m,layoutXL:p,root:R,badge:y,caption:S,header:h,title:g,content:z,body:T,closeButton:f,media:E,footer:k,imgSrcVertical:B,imgSrcHorizontal:I,loading:b,palette:v,closeFn:w,...P}=e;const A={size:s,sizeXXS:n,sizeXS:o,sizeS:r,sizeM:a,sizeL:l,sizeXL:u};const L={layout:i,layoutXXS:c,layoutXS:d,layoutS:x,layoutM:j,layoutL:m,layoutXL:p};const X={...A,borderRadius:8,marginRight:12,resetDefaultMargin:!0,sizes:sizes.SIZES_HEADER_BADGE};const C={...A,as:'span',appearance:'caption',color:'content-onmain-tertiary',weight:700,wordBreak:'break-word',sizes:sizes.SIZES_CAPTION};const V={...A,as:'h2',appearance:'subheading',color:'inherit',marginBottom:z?'0.4em':void 0,wordBreak:'break-word',sizes:sizes.SIZES_TITLE};const q={...A,as:'p',appearance:'body',color:'inherit',wordBreak:'break-word',sizes:sizes.SIZES_CONTENT};const _={...A,icon:jsxRuntime.jsx(index.Close,{}),square:!0,marginTop:10,marginRight:10,sizes:sizes.SIZES_CLOSE_BUTTON,onClick:()=>{typeof w=='function'&&w()}};return jsxRuntime.jsx(style.Root,{...P,...A,...L,layouts:layouts.LAYOUTS,palette:v,ref:t,children:React.isValidElement(R)?R:typeof R=='function'?R({badgeProps:X,captionProps:C,titleProps:V,contentProps:q,closeButtonProps:_}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[b||E||I?jsxRuntime.jsx(style.Media,{...L,layouts:layouts.VISIBILITY_HORIZONTAL,children:b?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"1:1",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{})}):React.isValidElement(E)?E:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"1:1",width:"100%",children:jsxRuntime.jsx(style.Img,{src:I})})}):null,jsxRuntime.jsxs(style.Container,{children:[jsxRuntime.jsxs(style.Content,{children:[b?jsxRuntime.jsx(style.Header,{children:jsxRuntime.jsx(Skeleton.Skeleton,{width:"20%",children:jsxRuntime.jsx(Badge.Badge,{...X})})}):React.isValidElement(h)?h:typeof h=='function'?h({badgeProps:X,captionProps:C}):y||S?jsxRuntime.jsxs(style.Header,{children:[React.isValidElement(y)?y:typeof y=='function'?y(X):typeof y=='string'||typeof y=='number'?jsxRuntime.jsx(Badge.Badge,{...X,children:y}):null,React.isValidElement(S)?S:typeof S=='function'?S(C):typeof S=='string'||typeof S=='number'?jsxRuntime.jsx(Text.Text,{...C,children:S}):null]}):null,b||E||B?jsxRuntime.jsx(style.Media,{...L,layouts:layouts.VISIBILITY_VERTICAL,children:b?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"16:9",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{})}):React.isValidElement(E)?E:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"16:9",width:"100%",children:jsxRuntime.jsx(style.Img,{src:B})})}):null,b?jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,children:jsxRuntime.jsx(Text.Text,{appearance:"subheading",marginBottom:"0.4em",sizes:sizes.SIZES_TITLE,...A})}),jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,width:"70%",children:jsxRuntime.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:sizes.SIZES_CONTENT,...A})}),jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,width:"50%",children:jsxRuntime.jsx(Text.Text,{appearance:"body",sizes:sizes.SIZES_CONTENT,...A})})]}):React.isValidElement(T)?T:typeof T=='function'?T({titleProps:V,contentProps:q}):g||z?jsxRuntime.jsxs("div",{children:[React.isValidElement(g)?g:typeof g=='function'?g(V):typeof g=='string'||typeof g=='number'?jsxRuntime.jsx(Text.Text,{...V,children:g}):null,React.isValidElement(z)?z:typeof z=='function'?z(q):typeof z=='string'||typeof z=='number'?jsxRuntime.jsx(Text.Text,{...q,children:z}):null]}):null]}),k?jsxRuntime.jsx(style.Footer,{children:b?jsxRuntime.jsx(Skeleton.Skeleton,{width:"100%",children:jsxRuntime.jsx(Button.Button,{preset:"brand",...A})}):React.isValidElement(k)?k:null}):null]}),f?jsxRuntime.jsx(style.ButtonPosition,{children:React.isValidElement(f)?f:typeof f=='function'?f(_):null}):null]})})})),{displayName:'PopoverComponent',sizes:sizes.SIZES});exports.PopoverComponent=PopoverComponent;
 //# sourceMappingURL=PopoverComponent.js.map

package/components/PopoverComponent/PopoverComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverComponent.js","sources":["../../../../src/components/PopoverComponent/PopoverComponent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Badge } from 'components/Badge'\nimport { Text } from 'components/Text'\nimport { Button } from 'components/Button'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { BadgeProps } from 'components/Badge'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_CLOSE_BUTTON, SIZES_HEADER_BADGE, SIZES_CAPTION, SIZES_TITLE, SIZES_CONTENT } from './sizes'\nimport { LAYOUTS, VISIBILITY_HORIZONTAL, VISIBILITY_VERTICAL } from './layouts'\nimport * as Styled from './style'\nimport type { PopoverComponentProps } from './types'\n\nconst COMPONENT_NAME = 'PopoverComponent'\n\nconst PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps> = withMergedProps<\n  PopoverComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<PopoverComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      badge,\n      caption,\n      header,\n      title,\n      content,\n      body,\n      closeButton,\n      media,\n      footer,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      loading,\n      palette,\n      closeFn,\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    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const badgeProps: BadgeProps = {\n      ...sizeProps,\n      borderRadius: 8,\n      marginRight: 12,\n      resetDefaultMargin: true,\n      sizes: SIZES_HEADER_BADGE,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      as: 'span',\n      appearance: 'caption',\n      color: 'content-onmain-tertiary',\n      weight: 700,\n      wordBreak: 'break-word',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'subheading',\n      color: 'inherit',\n      marginBottom: content ? '0.4em' : undefined,\n      wordBreak: 'break-word',\n      sizes: SIZES_TITLE,\n    }\n\n    const contentProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'inherit',\n      wordBreak: 'break-word',\n      sizes: SIZES_CONTENT,\n    }\n\n    const closeButtonProps: IconButtonProps = {\n      ...sizeProps,\n      icon: 'close',\n      square: true,\n      marginTop: 10,\n      marginRight: 10,\n      sizes: SIZES_CLOSE_BUTTON,\n      onClick: () => {\n        if (typeof closeFn === 'function') closeFn()\n      },\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} {...layoutProps} layouts={LAYOUTS} palette={palette} ref={ref}>\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            badgeProps,\n            captionProps,\n            titleProps,\n            contentProps,\n            closeButtonProps,\n          })\n        ) : (\n          <>\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={VISIBILITY_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='1:1' width='100%'>\n                    <Skeleton />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='1:1' width='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Container>\n              <Styled.Content>\n                {loading ? (\n                  <Styled.Header>\n                    <Skeleton width='20%'>\n                      <Badge {...badgeProps} />\n                    </Skeleton>\n                  </Styled.Header>\n                ) : isValidElement(header) ? (\n                  header\n                ) : typeof header === 'function' ? (\n                  header({\n                    badgeProps,\n                    captionProps,\n                  })\n                ) : badge || caption ? (\n                  <Styled.Header>\n                    {isValidElement(badge) ? (\n                      badge\n                    ) : typeof badge === 'function' ? (\n                      badge(badgeProps)\n                    ) : typeof badge === 'string' || typeof badge === 'number' ? (\n                      <Badge {...badgeProps}>{badge}</Badge>\n                    ) : null}\n                    {isValidElement(caption) ? (\n                      caption\n                    ) : typeof caption === 'function' ? (\n                      caption(captionProps)\n                    ) : typeof caption === 'string' || typeof caption === 'number' ? (\n                      <Text {...captionProps}>{caption}</Text>\n                    ) : null}\n                  </Styled.Header>\n                ) : null}\n                {loading || media || imgSrcVertical ? (\n                  <Styled.Media {...layoutProps} layouts={VISIBILITY_VERTICAL}>\n                    {loading ? (\n                      <AspectRatio ratio='16:9' width='100%'>\n                        <Skeleton />\n                      </AspectRatio>\n                    ) : isValidElement(media) ? (\n                      media\n                    ) : (\n                      <AspectRatio ratio='16:9' width='100%'>\n                        <Styled.Img src={imgSrcVertical} />\n                      </AspectRatio>\n                    )}\n                  </Styled.Media>\n                ) : null}\n                {loading ? (\n                  <div>\n                    <Skeleton borderRadius={4}>\n                      <Text appearance='subheading' marginBottom='0.4em' sizes={SIZES_TITLE} {...sizeProps} />\n                    </Skeleton>\n                    <Skeleton borderRadius={4} width='70%'>\n                      <Text appearance='body' marginBottom='0.4em' sizes={SIZES_CONTENT} {...sizeProps} />\n                    </Skeleton>\n                    <Skeleton borderRadius={4} width='50%'>\n                      <Text appearance='body' sizes={SIZES_CONTENT} {...sizeProps} />\n                    </Skeleton>\n                  </div>\n                ) : isValidElement(body) ? (\n                  body\n                ) : typeof body === 'function' ? (\n                  body({\n                    titleProps,\n                    contentProps,\n                  })\n                ) : title || content ? (\n                  <div>\n                    {isValidElement(title) ? (\n                      title\n                    ) : typeof title === 'function' ? (\n                      title(titleProps)\n                    ) : typeof title === 'string' || typeof title === 'number' ? (\n                      <Text {...titleProps}>{title}</Text>\n                    ) : null}\n                    {isValidElement(content) ? (\n                      content\n                    ) : typeof content === 'function' ? (\n                      content(contentProps)\n                    ) : typeof content === 'string' || typeof content === 'number' ? (\n                      <Text {...contentProps}>{content}</Text>\n                    ) : null}\n                  </div>\n                ) : null}\n              </Styled.Content>\n              {footer ? (\n                <Styled.Footer>\n                  {loading ? (\n                    <Skeleton width='100%'>\n                      <Button preset='brand' {...sizeProps} />\n                    </Skeleton>\n                  ) : isValidElement(footer) ? (\n                    footer\n                  ) : null}\n                </Styled.Footer>\n              ) : null}\n            </Styled.Container>\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { PopoverComponent }\n"],"names":["PopoverComponent","withMergedProps","forwardRef","props","ref","size","layout","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","badge","caption","header","title","content","body","closeButton","media","footer","imgSrcVertical","imgSrcHorizontal","loading","palette","closeFn","restProps","sizeProps","layoutProps","badgeProps","borderRadius","marginRight","resetDefaultMargin","sizes","SIZES_HEADER_BADGE","captionProps","as","appearance","color","weight","wordBreak","SIZES_CAPTION","titleProps","marginBottom","undefined","SIZES_TITLE","contentProps","SIZES_CONTENT","closeButtonProps","icon","square","marginTop","SIZES_CLOSE_BUTTON","onClick","_jsx","Styled","layouts","LAYOUTS","children","isValidElement","_jsxs","jsxs","_Fragment","VISIBILITY_HORIZONTAL","jsx","AspectRatio","ratio","width","Skeleton","src","Badge","Text","VISIBILITY_VERTICAL","Button","preset","displayName","SIZES"],"mappings":"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"}
+{"version":3,"file":"PopoverComponent.js","sources":["../../../../src/components/PopoverComponent/PopoverComponent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Badge } from 'components/Badge'\nimport { Text } from 'components/Text'\nimport { Button } from 'components/Button'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { BadgeProps } from 'components/Badge'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_CLOSE_BUTTON, SIZES_HEADER_BADGE, SIZES_CAPTION, SIZES_TITLE, SIZES_CONTENT } from './sizes'\nimport { LAYOUTS, VISIBILITY_HORIZONTAL, VISIBILITY_VERTICAL } from './layouts'\nimport * as Styled from './style'\nimport type { PopoverComponentProps } from './types'\n\nconst COMPONENT_NAME = 'PopoverComponent'\n\nconst PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps> = withMergedProps<\n  PopoverComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<PopoverComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      badge,\n      caption,\n      header,\n      title,\n      content,\n      body,\n      closeButton,\n      media,\n      footer,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      loading,\n      palette,\n      closeFn,\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    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const badgeProps: BadgeProps = {\n      ...sizeProps,\n      borderRadius: 8,\n      marginRight: 12,\n      resetDefaultMargin: true,\n      sizes: SIZES_HEADER_BADGE,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      as: 'span',\n      appearance: 'caption',\n      color: 'content-onmain-tertiary',\n      weight: 700,\n      wordBreak: 'break-word',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'subheading',\n      color: 'inherit',\n      marginBottom: content ? '0.4em' : undefined,\n      wordBreak: 'break-word',\n      sizes: SIZES_TITLE,\n    }\n\n    const contentProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'inherit',\n      wordBreak: 'break-word',\n      sizes: SIZES_CONTENT,\n    }\n\n    const closeButtonProps: IconButtonProps = {\n      ...sizeProps,\n      icon: <Close />,\n      square: true,\n      marginTop: 10,\n      marginRight: 10,\n      sizes: SIZES_CLOSE_BUTTON,\n      onClick: () => {\n        if (typeof closeFn === 'function') closeFn()\n      },\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} {...layoutProps} layouts={LAYOUTS} palette={palette} ref={ref}>\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            badgeProps,\n            captionProps,\n            titleProps,\n            contentProps,\n            closeButtonProps,\n          })\n        ) : (\n          <>\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={VISIBILITY_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='1:1' width='100%'>\n                    <Skeleton />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='1:1' width='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Container>\n              <Styled.Content>\n                {loading ? (\n                  <Styled.Header>\n                    <Skeleton width='20%'>\n                      <Badge {...badgeProps} />\n                    </Skeleton>\n                  </Styled.Header>\n                ) : isValidElement(header) ? (\n                  header\n                ) : typeof header === 'function' ? (\n                  header({\n                    badgeProps,\n                    captionProps,\n                  })\n                ) : badge || caption ? (\n                  <Styled.Header>\n                    {isValidElement(badge) ? (\n                      badge\n                    ) : typeof badge === 'function' ? (\n                      badge(badgeProps)\n                    ) : typeof badge === 'string' || typeof badge === 'number' ? (\n                      <Badge {...badgeProps}>{badge}</Badge>\n                    ) : null}\n                    {isValidElement(caption) ? (\n                      caption\n                    ) : typeof caption === 'function' ? (\n                      caption(captionProps)\n                    ) : typeof caption === 'string' || typeof caption === 'number' ? (\n                      <Text {...captionProps}>{caption}</Text>\n                    ) : null}\n                  </Styled.Header>\n                ) : null}\n                {loading || media || imgSrcVertical ? (\n                  <Styled.Media {...layoutProps} layouts={VISIBILITY_VERTICAL}>\n                    {loading ? (\n                      <AspectRatio ratio='16:9' width='100%'>\n                        <Skeleton />\n                      </AspectRatio>\n                    ) : isValidElement(media) ? (\n                      media\n                    ) : (\n                      <AspectRatio ratio='16:9' width='100%'>\n                        <Styled.Img src={imgSrcVertical} />\n                      </AspectRatio>\n                    )}\n                  </Styled.Media>\n                ) : null}\n                {loading ? (\n                  <div>\n                    <Skeleton borderRadius={4}>\n                      <Text appearance='subheading' marginBottom='0.4em' sizes={SIZES_TITLE} {...sizeProps} />\n                    </Skeleton>\n                    <Skeleton borderRadius={4} width='70%'>\n                      <Text appearance='body' marginBottom='0.4em' sizes={SIZES_CONTENT} {...sizeProps} />\n                    </Skeleton>\n                    <Skeleton borderRadius={4} width='50%'>\n                      <Text appearance='body' sizes={SIZES_CONTENT} {...sizeProps} />\n                    </Skeleton>\n                  </div>\n                ) : isValidElement(body) ? (\n                  body\n                ) : typeof body === 'function' ? (\n                  body({\n                    titleProps,\n                    contentProps,\n                  })\n                ) : title || content ? (\n                  <div>\n                    {isValidElement(title) ? (\n                      title\n                    ) : typeof title === 'function' ? (\n                      title(titleProps)\n                    ) : typeof title === 'string' || typeof title === 'number' ? (\n                      <Text {...titleProps}>{title}</Text>\n                    ) : null}\n                    {isValidElement(content) ? (\n                      content\n                    ) : typeof content === 'function' ? (\n                      content(contentProps)\n                    ) : typeof content === 'string' || typeof content === 'number' ? (\n                      <Text {...contentProps}>{content}</Text>\n                    ) : null}\n                  </div>\n                ) : null}\n              </Styled.Content>\n              {footer ? (\n                <Styled.Footer>\n                  {loading ? (\n                    <Skeleton width='100%'>\n                      <Button preset='brand' {...sizeProps} />\n                    </Skeleton>\n                  ) : isValidElement(footer) ? (\n                    footer\n                  ) : null}\n                </Styled.Footer>\n              ) : null}\n            </Styled.Container>\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { PopoverComponent }\n"],"names":["PopoverComponent","withMergedProps","forwardRef","props","ref","size","layout","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","badge","caption","header","title","content","body","closeButton","media","footer","imgSrcVertical","imgSrcHorizontal","loading","palette","closeFn","restProps","sizeProps","layoutProps","badgeProps","borderRadius","marginRight","resetDefaultMargin","sizes","SIZES_HEADER_BADGE","captionProps","as","appearance","color","weight","wordBreak","SIZES_CAPTION","titleProps","marginBottom","undefined","SIZES_TITLE","contentProps","SIZES_CONTENT","closeButtonProps","icon","_jsx","Close","square","marginTop","SIZES_CLOSE_BUTTON","onClick","Styled","layouts","LAYOUTS","children","isValidElement","_jsxs","jsxs","_Fragment","VISIBILITY_HORIZONTAL","jsx","AspectRatio","ratio","width","Skeleton","src","Badge","Text","VISIBILITY_VERTICAL","Button","preset","displayName","SIZES"],"mappings":"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"}

package/components/PopoverComponent/PopoverComponent.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_TITLE,SIZES_CONTENT,SIZES_HEADER_BADGE,SIZES_CAPTION,SIZES_CLOSE_BUTTON}from'./sizes.mjs';import{LAYOUTS,VISIBILITY_HORIZONTAL,VISIBILITY_VERTICAL}from'./layouts.mjs';import{Root,Media,Img,Container,Content,Header,Footer,ButtonPosition}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Badge}from'../Badge/Badge.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const PopoverComponent=withMergedProps(forwardRef(((e,t)=>{const{size:o="s",layout:i="vertical",sizeXXS:n,sizeXS:s,sizeS:r,sizeM:a,sizeL:l,sizeXL:d,layoutXXS:c,layoutXS:p,layoutS:m,layoutM:S,layoutL:u,layoutXL:x,root:h,badge:j,caption:f,header:E,title:I,content:y,body:T,closeButton:g,media:B,footer:z,imgSrcVertical:L,imgSrcHorizontal:R,loading:b,palette:_,closeFn:w,...A}=e;const P={size:o,sizeXXS:n,sizeXS:s,sizeS:r,sizeM:a,sizeL:l,sizeXL:d};const V={layout:i,layoutXXS:c,layoutXS:p,layoutS:m,layoutM:S,layoutL:u,layoutXL:x};const C={...P,borderRadius:8,marginRight:12,resetDefaultMargin:!0,sizes:SIZES_HEADER_BADGE};const k={...P,as:'span',appearance:'caption',color:'content-onmain-tertiary',weight:700,wordBreak:'break-word',sizes:SIZES_CAPTION};const Z={...P,as:'h2',appearance:'subheading',color:'inherit',marginBottom:y?'0.4em':void 0,wordBreak:'break-word',sizes:SIZES_TITLE};const O={...P,as:'p',appearance:'body',color:'inherit',wordBreak:'break-word',sizes:SIZES_CONTENT};const X={...P,icon:'close',square:!0,marginTop:10,marginRight:10,sizes:SIZES_CLOSE_BUTTON,onClick:()=>{typeof w=='function'&&w()}};return jsx(Root,{...A,...P,...V,layouts:LAYOUTS,palette:_,ref:t,children:isValidElement(h)?h:typeof h=='function'?h({badgeProps:C,captionProps:k,titleProps:Z,contentProps:O,closeButtonProps:X}):jsxs(Fragment,{children:[b||B||R?jsx(Media,{...V,layouts:VISIBILITY_HORIZONTAL,children:b?jsx(AspectRatio,{ratio:"1:1",width:"100%",children:jsx(Skeleton,{})}):isValidElement(B)?B:jsx(AspectRatio,{ratio:"1:1",width:"100%",children:jsx(Img,{src:R})})}):null,jsxs(Container,{children:[jsxs(Content,{children:[b?jsx(Header,{children:jsx(Skeleton,{width:"20%",children:jsx(Badge,{...C})})}):isValidElement(E)?E:typeof E=='function'?E({badgeProps:C,captionProps:k}):j||f?jsxs(Header,{children:[isValidElement(j)?j:typeof j=='function'?j(C):typeof j=='string'||typeof j=='number'?jsx(Badge,{...C,children:j}):null,isValidElement(f)?f:typeof f=='function'?f(k):typeof f=='string'||typeof f=='number'?jsx(Text,{...k,children:f}):null]}):null,b||B||L?jsx(Media,{...V,layouts:VISIBILITY_VERTICAL,children:b?jsx(AspectRatio,{ratio:"16:9",width:"100%",children:jsx(Skeleton,{})}):isValidElement(B)?B:jsx(AspectRatio,{ratio:"16:9",width:"100%",children:jsx(Img,{src:L})})}):null,b?jsxs("div",{children:[jsx(Skeleton,{borderRadius:4,children:jsx(Text,{appearance:"subheading",marginBottom:"0.4em",sizes:SIZES_TITLE,...P})}),jsx(Skeleton,{borderRadius:4,width:"70%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_CONTENT,...P})}),jsx(Skeleton,{borderRadius:4,width:"50%",children:jsx(Text,{appearance:"body",sizes:SIZES_CONTENT,...P})})]}):isValidElement(T)?T:typeof T=='function'?T({titleProps:Z,contentProps:O}):I||y?jsxs("div",{children:[isValidElement(I)?I:typeof I=='function'?I(Z):typeof I=='string'||typeof I=='number'?jsx(Text,{...Z,children:I}):null,isValidElement(y)?y:typeof y=='function'?y(O):typeof y=='string'||typeof y=='number'?jsx(Text,{...O,children:y}):null]}):null]}),z?jsx(Footer,{children:b?jsx(Skeleton,{width:"100%",children:jsx(Button,{preset:"brand",...P})}):isValidElement(z)?z:null}):null]}),g?jsx(ButtonPosition,{children:isValidElement(g)?g:typeof g=='function'?g(X):null}):null]})})})),{displayName:'PopoverComponent',sizes:SIZES});export{PopoverComponent};
+import{forwardRef,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_TITLE,SIZES_CONTENT,SIZES_HEADER_BADGE,SIZES_CAPTION,SIZES_CLOSE_BUTTON}from'./sizes.mjs';import{LAYOUTS,VISIBILITY_HORIZONTAL,VISIBILITY_VERTICAL}from'./layouts.mjs';import{Root,Media,Img,Container,Content,Header,Footer,ButtonPosition}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Badge}from'../Badge/Badge.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const PopoverComponent=withMergedProps(forwardRef(((e,t)=>{const{size:o="s",layout:i="vertical",sizeXXS:s,sizeXS:n,sizeS:r,sizeM:a,sizeL:l,sizeXL:d,layoutXXS:c,layoutXS:p,layoutS:m,layoutM:S,layoutL:u,layoutXL:x,root:j,badge:h,caption:f,header:E,title:I,content:y,body:T,closeButton:g,media:B,footer:z,imgSrcVertical:L,imgSrcHorizontal:R,loading:b,palette:C,closeFn:_,...w}=e;const A={size:o,sizeXXS:s,sizeXS:n,sizeS:r,sizeM:a,sizeL:l,sizeXL:d};const P={layout:i,layoutXXS:c,layoutXS:p,layoutS:m,layoutM:S,layoutL:u,layoutXL:x};const V={...A,borderRadius:8,marginRight:12,resetDefaultMargin:!0,sizes:SIZES_HEADER_BADGE};const k={...A,as:'span',appearance:'caption',color:'content-onmain-tertiary',weight:700,wordBreak:'break-word',sizes:SIZES_CAPTION};const Z={...A,as:'h2',appearance:'subheading',color:'inherit',marginBottom:y?'0.4em':void 0,wordBreak:'break-word',sizes:SIZES_TITLE};const O={...A,as:'p',appearance:'body',color:'inherit',wordBreak:'break-word',sizes:SIZES_CONTENT};const X={...A,icon:jsx(Close,{}),square:!0,marginTop:10,marginRight:10,sizes:SIZES_CLOSE_BUTTON,onClick:()=>{typeof _=='function'&&_()}};return jsx(Root,{...w,...A,...P,layouts:LAYOUTS,palette:C,ref:t,children:isValidElement(j)?j:typeof j=='function'?j({badgeProps:V,captionProps:k,titleProps:Z,contentProps:O,closeButtonProps:X}):jsxs(Fragment,{children:[b||B||R?jsx(Media,{...P,layouts:VISIBILITY_HORIZONTAL,children:b?jsx(AspectRatio,{ratio:"1:1",width:"100%",children:jsx(Skeleton,{})}):isValidElement(B)?B:jsx(AspectRatio,{ratio:"1:1",width:"100%",children:jsx(Img,{src:R})})}):null,jsxs(Container,{children:[jsxs(Content,{children:[b?jsx(Header,{children:jsx(Skeleton,{width:"20%",children:jsx(Badge,{...V})})}):isValidElement(E)?E:typeof E=='function'?E({badgeProps:V,captionProps:k}):h||f?jsxs(Header,{children:[isValidElement(h)?h:typeof h=='function'?h(V):typeof h=='string'||typeof h=='number'?jsx(Badge,{...V,children:h}):null,isValidElement(f)?f:typeof f=='function'?f(k):typeof f=='string'||typeof f=='number'?jsx(Text,{...k,children:f}):null]}):null,b||B||L?jsx(Media,{...P,layouts:VISIBILITY_VERTICAL,children:b?jsx(AspectRatio,{ratio:"16:9",width:"100%",children:jsx(Skeleton,{})}):isValidElement(B)?B:jsx(AspectRatio,{ratio:"16:9",width:"100%",children:jsx(Img,{src:L})})}):null,b?jsxs("div",{children:[jsx(Skeleton,{borderRadius:4,children:jsx(Text,{appearance:"subheading",marginBottom:"0.4em",sizes:SIZES_TITLE,...A})}),jsx(Skeleton,{borderRadius:4,width:"70%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_CONTENT,...A})}),jsx(Skeleton,{borderRadius:4,width:"50%",children:jsx(Text,{appearance:"body",sizes:SIZES_CONTENT,...A})})]}):isValidElement(T)?T:typeof T=='function'?T({titleProps:Z,contentProps:O}):I||y?jsxs("div",{children:[isValidElement(I)?I:typeof I=='function'?I(Z):typeof I=='string'||typeof I=='number'?jsx(Text,{...Z,children:I}):null,isValidElement(y)?y:typeof y=='function'?y(O):typeof y=='string'||typeof y=='number'?jsx(Text,{...O,children:y}):null]}):null]}),z?jsx(Footer,{children:b?jsx(Skeleton,{width:"100%",children:jsx(Button,{preset:"brand",...A})}):isValidElement(z)?z:null}):null]}),g?jsx(ButtonPosition,{children:isValidElement(g)?g:typeof g=='function'?g(X):null}):null]})})})),{displayName:'PopoverComponent',sizes:SIZES});export{PopoverComponent};
 //# sourceMappingURL=PopoverComponent.mjs.map

package/components/PopoverComponent/PopoverComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverComponent.mjs","sources":["../../../../src/components/PopoverComponent/PopoverComponent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Badge } from 'components/Badge'\nimport { Text } from 'components/Text'\nimport { Button } from 'components/Button'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { BadgeProps } from 'components/Badge'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_CLOSE_BUTTON, SIZES_HEADER_BADGE, SIZES_CAPTION, SIZES_TITLE, SIZES_CONTENT } from './sizes'\nimport { LAYOUTS, VISIBILITY_HORIZONTAL, VISIBILITY_VERTICAL } from './layouts'\nimport * as Styled from './style'\nimport type { PopoverComponentProps } from './types'\n\nconst COMPONENT_NAME = 'PopoverComponent'\n\nconst PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps> = withMergedProps<\n  PopoverComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<PopoverComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      badge,\n      caption,\n      header,\n      title,\n      content,\n      body,\n      closeButton,\n      media,\n      footer,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      loading,\n      palette,\n      closeFn,\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    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const badgeProps: BadgeProps = {\n      ...sizeProps,\n      borderRadius: 8,\n      marginRight: 12,\n      resetDefaultMargin: true,\n      sizes: SIZES_HEADER_BADGE,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      as: 'span',\n      appearance: 'caption',\n      color: 'content-onmain-tertiary',\n      weight: 700,\n      wordBreak: 'break-word',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'subheading',\n      color: 'inherit',\n      marginBottom: content ? '0.4em' : undefined,\n      wordBreak: 'break-word',\n      sizes: SIZES_TITLE,\n    }\n\n    const contentProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'inherit',\n      wordBreak: 'break-word',\n      sizes: SIZES_CONTENT,\n    }\n\n    const closeButtonProps: IconButtonProps = {\n      ...sizeProps,\n      icon: 'close',\n      square: true,\n      marginTop: 10,\n      marginRight: 10,\n      sizes: SIZES_CLOSE_BUTTON,\n      onClick: () => {\n        if (typeof closeFn === 'function') closeFn()\n      },\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} {...layoutProps} layouts={LAYOUTS} palette={palette} ref={ref}>\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            badgeProps,\n            captionProps,\n            titleProps,\n            contentProps,\n            closeButtonProps,\n          })\n        ) : (\n          <>\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={VISIBILITY_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='1:1' width='100%'>\n                    <Skeleton />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='1:1' width='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Container>\n              <Styled.Content>\n                {loading ? (\n                  <Styled.Header>\n                    <Skeleton width='20%'>\n                      <Badge {...badgeProps} />\n                    </Skeleton>\n                  </Styled.Header>\n                ) : isValidElement(header) ? (\n                  header\n                ) : typeof header === 'function' ? (\n                  header({\n                    badgeProps,\n                    captionProps,\n                  })\n                ) : badge || caption ? (\n                  <Styled.Header>\n                    {isValidElement(badge) ? (\n                      badge\n                    ) : typeof badge === 'function' ? (\n                      badge(badgeProps)\n                    ) : typeof badge === 'string' || typeof badge === 'number' ? (\n                      <Badge {...badgeProps}>{badge}</Badge>\n                    ) : null}\n                    {isValidElement(caption) ? (\n                      caption\n                    ) : typeof caption === 'function' ? (\n                      caption(captionProps)\n                    ) : typeof caption === 'string' || typeof caption === 'number' ? (\n                      <Text {...captionProps}>{caption}</Text>\n                    ) : null}\n                  </Styled.Header>\n                ) : null}\n                {loading || media || imgSrcVertical ? (\n                  <Styled.Media {...layoutProps} layouts={VISIBILITY_VERTICAL}>\n                    {loading ? (\n                      <AspectRatio ratio='16:9' width='100%'>\n                        <Skeleton />\n                      </AspectRatio>\n                    ) : isValidElement(media) ? (\n                      media\n                    ) : (\n                      <AspectRatio ratio='16:9' width='100%'>\n                        <Styled.Img src={imgSrcVertical} />\n                      </AspectRatio>\n                    )}\n                  </Styled.Media>\n                ) : null}\n                {loading ? (\n                  <div>\n                    <Skeleton borderRadius={4}>\n                      <Text appearance='subheading' marginBottom='0.4em' sizes={SIZES_TITLE} {...sizeProps} />\n                    </Skeleton>\n                    <Skeleton borderRadius={4} width='70%'>\n                      <Text appearance='body' marginBottom='0.4em' sizes={SIZES_CONTENT} {...sizeProps} />\n                    </Skeleton>\n                    <Skeleton borderRadius={4} width='50%'>\n                      <Text appearance='body' sizes={SIZES_CONTENT} {...sizeProps} />\n                    </Skeleton>\n                  </div>\n                ) : isValidElement(body) ? (\n                  body\n                ) : typeof body === 'function' ? (\n                  body({\n                    titleProps,\n                    contentProps,\n                  })\n                ) : title || content ? (\n                  <div>\n                    {isValidElement(title) ? (\n                      title\n                    ) : typeof title === 'function' ? (\n                      title(titleProps)\n                    ) : typeof title === 'string' || typeof title === 'number' ? (\n                      <Text {...titleProps}>{title}</Text>\n                    ) : null}\n                    {isValidElement(content) ? (\n                      content\n                    ) : typeof content === 'function' ? (\n                      content(contentProps)\n                    ) : typeof content === 'string' || typeof content === 'number' ? (\n                      <Text {...contentProps}>{content}</Text>\n                    ) : null}\n                  </div>\n                ) : null}\n              </Styled.Content>\n              {footer ? (\n                <Styled.Footer>\n                  {loading ? (\n                    <Skeleton width='100%'>\n                      <Button preset='brand' {...sizeProps} />\n                    </Skeleton>\n                  ) : isValidElement(footer) ? (\n                    footer\n                  ) : null}\n                </Styled.Footer>\n              ) : null}\n            </Styled.Container>\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { PopoverComponent }\n"],"names":["PopoverComponent","withMergedProps","forwardRef","props","ref","size","layout","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","badge","caption","header","title","content","body","closeButton","media","footer","imgSrcVertical","imgSrcHorizontal","loading","palette","closeFn","restProps","sizeProps","layoutProps","badgeProps","borderRadius","marginRight","resetDefaultMargin","sizes","SIZES_HEADER_BADGE","captionProps","as","appearance","color","weight","wordBreak","SIZES_CAPTION","titleProps","marginBottom","undefined","SIZES_TITLE","contentProps","SIZES_CONTENT","closeButtonProps","icon","square","marginTop","SIZES_CLOSE_BUTTON","onClick","_jsx","Styled","layouts","LAYOUTS","children","isValidElement","_jsxs","_Fragment","VISIBILITY_HORIZONTAL","AspectRatio","ratio","width","Skeleton","src","Badge","Text","VISIBILITY_VERTICAL","Button","preset","displayName","SIZES"],"mappings":"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"}
+{"version":3,"file":"PopoverComponent.mjs","sources":["../../../../src/components/PopoverComponent/PopoverComponent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Badge } from 'components/Badge'\nimport { Text } from 'components/Text'\nimport { Button } from 'components/Button'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { BadgeProps } from 'components/Badge'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_CLOSE_BUTTON, SIZES_HEADER_BADGE, SIZES_CAPTION, SIZES_TITLE, SIZES_CONTENT } from './sizes'\nimport { LAYOUTS, VISIBILITY_HORIZONTAL, VISIBILITY_VERTICAL } from './layouts'\nimport * as Styled from './style'\nimport type { PopoverComponentProps } from './types'\n\nconst COMPONENT_NAME = 'PopoverComponent'\n\nconst PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps> = withMergedProps<\n  PopoverComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<PopoverComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      badge,\n      caption,\n      header,\n      title,\n      content,\n      body,\n      closeButton,\n      media,\n      footer,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      loading,\n      palette,\n      closeFn,\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    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const badgeProps: BadgeProps = {\n      ...sizeProps,\n      borderRadius: 8,\n      marginRight: 12,\n      resetDefaultMargin: true,\n      sizes: SIZES_HEADER_BADGE,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      as: 'span',\n      appearance: 'caption',\n      color: 'content-onmain-tertiary',\n      weight: 700,\n      wordBreak: 'break-word',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'subheading',\n      color: 'inherit',\n      marginBottom: content ? '0.4em' : undefined,\n      wordBreak: 'break-word',\n      sizes: SIZES_TITLE,\n    }\n\n    const contentProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'inherit',\n      wordBreak: 'break-word',\n      sizes: SIZES_CONTENT,\n    }\n\n    const closeButtonProps: IconButtonProps = {\n      ...sizeProps,\n      icon: <Close />,\n      square: true,\n      marginTop: 10,\n      marginRight: 10,\n      sizes: SIZES_CLOSE_BUTTON,\n      onClick: () => {\n        if (typeof closeFn === 'function') closeFn()\n      },\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} {...layoutProps} layouts={LAYOUTS} palette={palette} ref={ref}>\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            badgeProps,\n            captionProps,\n            titleProps,\n            contentProps,\n            closeButtonProps,\n          })\n        ) : (\n          <>\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={VISIBILITY_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='1:1' width='100%'>\n                    <Skeleton />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='1:1' width='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Container>\n              <Styled.Content>\n                {loading ? (\n                  <Styled.Header>\n                    <Skeleton width='20%'>\n                      <Badge {...badgeProps} />\n                    </Skeleton>\n                  </Styled.Header>\n                ) : isValidElement(header) ? (\n                  header\n                ) : typeof header === 'function' ? (\n                  header({\n                    badgeProps,\n                    captionProps,\n                  })\n                ) : badge || caption ? (\n                  <Styled.Header>\n                    {isValidElement(badge) ? (\n                      badge\n                    ) : typeof badge === 'function' ? (\n                      badge(badgeProps)\n                    ) : typeof badge === 'string' || typeof badge === 'number' ? (\n                      <Badge {...badgeProps}>{badge}</Badge>\n                    ) : null}\n                    {isValidElement(caption) ? (\n                      caption\n                    ) : typeof caption === 'function' ? (\n                      caption(captionProps)\n                    ) : typeof caption === 'string' || typeof caption === 'number' ? (\n                      <Text {...captionProps}>{caption}</Text>\n                    ) : null}\n                  </Styled.Header>\n                ) : null}\n                {loading || media || imgSrcVertical ? (\n                  <Styled.Media {...layoutProps} layouts={VISIBILITY_VERTICAL}>\n                    {loading ? (\n                      <AspectRatio ratio='16:9' width='100%'>\n                        <Skeleton />\n                      </AspectRatio>\n                    ) : isValidElement(media) ? (\n                      media\n                    ) : (\n                      <AspectRatio ratio='16:9' width='100%'>\n                        <Styled.Img src={imgSrcVertical} />\n                      </AspectRatio>\n                    )}\n                  </Styled.Media>\n                ) : null}\n                {loading ? (\n                  <div>\n                    <Skeleton borderRadius={4}>\n                      <Text appearance='subheading' marginBottom='0.4em' sizes={SIZES_TITLE} {...sizeProps} />\n                    </Skeleton>\n                    <Skeleton borderRadius={4} width='70%'>\n                      <Text appearance='body' marginBottom='0.4em' sizes={SIZES_CONTENT} {...sizeProps} />\n                    </Skeleton>\n                    <Skeleton borderRadius={4} width='50%'>\n                      <Text appearance='body' sizes={SIZES_CONTENT} {...sizeProps} />\n                    </Skeleton>\n                  </div>\n                ) : isValidElement(body) ? (\n                  body\n                ) : typeof body === 'function' ? (\n                  body({\n                    titleProps,\n                    contentProps,\n                  })\n                ) : title || content ? (\n                  <div>\n                    {isValidElement(title) ? (\n                      title\n                    ) : typeof title === 'function' ? (\n                      title(titleProps)\n                    ) : typeof title === 'string' || typeof title === 'number' ? (\n                      <Text {...titleProps}>{title}</Text>\n                    ) : null}\n                    {isValidElement(content) ? (\n                      content\n                    ) : typeof content === 'function' ? (\n                      content(contentProps)\n                    ) : typeof content === 'string' || typeof content === 'number' ? (\n                      <Text {...contentProps}>{content}</Text>\n                    ) : null}\n                  </div>\n                ) : null}\n              </Styled.Content>\n              {footer ? (\n                <Styled.Footer>\n                  {loading ? (\n                    <Skeleton width='100%'>\n                      <Button preset='brand' {...sizeProps} />\n                    </Skeleton>\n                  ) : isValidElement(footer) ? (\n                    footer\n                  ) : null}\n                </Styled.Footer>\n              ) : null}\n            </Styled.Container>\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { PopoverComponent }\n"],"names":["PopoverComponent","withMergedProps","forwardRef","props","ref","size","layout","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","badge","caption","header","title","content","body","closeButton","media","footer","imgSrcVertical","imgSrcHorizontal","loading","palette","closeFn","restProps","sizeProps","layoutProps","badgeProps","borderRadius","marginRight","resetDefaultMargin","sizes","SIZES_HEADER_BADGE","captionProps","as","appearance","color","weight","wordBreak","SIZES_CAPTION","titleProps","marginBottom","undefined","SIZES_TITLE","contentProps","SIZES_CONTENT","closeButtonProps","icon","_jsx","Close","square","marginTop","SIZES_CLOSE_BUTTON","onClick","Styled","layouts","LAYOUTS","children","isValidElement","_jsxs","_Fragment","VISIBILITY_HORIZONTAL","AspectRatio","ratio","width","Skeleton","src","Badge","Text","VISIBILITY_VERTICAL","Button","preset","displayName","SIZES"],"mappings":"isBAmBMA,MAAAA,iBAA2EC,gBAI/EC,YAA+D,CAACC,EAAOC,KACrE,MAAMC,KACJA,EAAO,IAAGC,OACVA,EAAS,WAAUC,QACnBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,SACTA,EAAQC,QACRA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,KACRA,EAAIC,MACJA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,YACJA,EAAWC,MACXA,EAAKC,OACLA,EAAMC,eACNA,EAAcC,iBACdA,EAAgBC,QAChBA,EAAOC,QACPA,EAAOC,QACPA,KACGC,GACD/B,EAEJ,MAAMgC,EAAY,CAChB9B,OACAE,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMwB,EAAc,CAClB9B,SACAO,YACAC,WACAC,UACAC,UACAC,UACAC,YAGF,MAAMmB,EAAyB,IAC1BF,EACHG,aAAc,EACdC,YAAa,GACbC,oBAAoB,EACpBC,MAAOC,oBAGT,MAAMC,EAA0B,IAC3BR,EACHS,GAAI,OACJC,WAAY,UACZC,MAAO,0BACPC,OAAQ,IACRC,UAAW,aACXP,MAAOQ,eAGT,MAAMC,EAAwB,IACzBf,EACHS,GAAI,KACJC,WAAY,aACZC,MAAO,UACPK,aAAc3B,EAAU,aAAU4B,EAClCJ,UAAW,aACXP,MAAOY,aAGT,MAAMC,EAA0B,IAC3BnB,EACHS,GAAI,IACJC,WAAY,OACZC,MAAO,UACPE,UAAW,aACXP,MAAOc,eAGT,MAAMC,EAAoC,IACrCrB,EACHsB,KAAMC,IAACC,UACPC,QAAQ,EACRC,UAAW,GACXtB,YAAa,GACbE,MAAOqB,mBACPC,QAASA,YACI9B,GAAY,YAAYA,GAAS,GAIhD,OACEyB,IAACM,KAAW,IAAK9B,KAAeC,KAAeC,EAAa6B,QAASC,QAASlC,QAASA,EAAS5B,IAAKA,EAAI+D,SACtGC,eAAejD,GACdA,SACSA,GAAS,WAClBA,EAAK,CACHkB,aACAM,eACAO,aACAI,eACAE,qBAGFa,KAAAC,SAAA,CAAAH,SAAA,CACGpC,GAAWJ,GAASG,EACnB4B,IAACM,MAAY,IAAK5B,EAAa6B,QAASM,sBAAsBJ,SAC3DpC,EACC2B,IAACc,YAAW,CAACC,MAAM,MAAMC,MAAM,OAAMP,SACnCT,IAACiB,SAAU,MAEXP,eAAezC,GACjBA,EAEA+B,IAACc,YAAW,CAACC,MAAM,MAAMC,MAAM,OAAMP,SACnCT,IAACM,IAAU,CAACY,IAAK9C,QAIrB,KACJuC,KAACL,UAAgB,CAAAG,SACfE,CAAAA,KAACL,QAAc,CAAAG,UACZpC,EACC2B,IAACM,OAAa,CAAAG,SACZT,IAACiB,SAAQ,CAACD,MAAM,MAAKP,SACnBT,IAACmB,MAAK,IAAKxC,QAGb+B,eAAe9C,GACjBA,SACSA,GAAW,WACpBA,EAAO,CACLe,aACAM,iBAEAvB,GAASC,EACXgD,KAACL,OAAa,CAAAG,SACX,CAAAC,eAAehD,GACdA,SACSA,GAAU,WACnBA,EAAMiB,UACGjB,GAAU,iBAAmBA,GAAU,SAChDsC,IAACmB,MAAK,IAAKxC,EAAU8B,SAAG/C,IACtB,KACHgD,eAAe/C,GACdA,SACSA,GAAY,WACrBA,EAAQsB,UACCtB,GAAY,iBAAmBA,GAAY,SACpDqC,IAACoB,KAAI,IAAKnC,EAAYwB,SAAG9C,IACvB,QAEJ,KACHU,GAAWJ,GAASE,EACnB6B,IAACM,MAAY,IAAK5B,EAAa6B,QAASc,oBAAoBZ,SACzDpC,EACC2B,IAACc,YAAW,CAACC,MAAM,OAAOC,MAAM,OAAMP,SACpCT,IAACiB,SAAU,MAEXP,eAAezC,GACjBA,EAEA+B,IAACc,YAAW,CAACC,MAAM,OAAOC,MAAM,OAAMP,SACpCT,IAACM,IAAU,CAACY,IAAK/C,QAIrB,KACHE,EACCsC,KAAA,MAAA,CAAAF,SAAA,CACET,IAACiB,SAAQ,CAACrC,aAAc,EAAE6B,SACxBT,IAACoB,KAAI,CAACjC,WAAW,aAAaM,aAAa,QAAQV,MAAOY,eAAiBlB,MAE7EuB,IAACiB,SAAQ,CAACrC,aAAc,EAAGoC,MAAM,MAAKP,SACpCT,IAACoB,KAAI,CAACjC,WAAW,OAAOM,aAAa,QAAQV,MAAOc,iBAAmBpB,MAEzEuB,IAACiB,SAAQ,CAACrC,aAAc,EAAGoC,MAAM,MAAKP,SACpCT,IAACoB,KAAI,CAACjC,WAAW,OAAOJ,MAAOc,iBAAmBpB,SAGpDiC,eAAe3C,GACjBA,SACSA,GAAS,WAClBA,EAAK,CACHyB,aACAI,iBAEA/B,GAASC,EACX6C,KAAA,MAAA,CAAAF,SACG,CAAAC,eAAe7C,GACdA,SACSA,GAAU,WACnBA,EAAM2B,UACG3B,GAAU,iBAAmBA,GAAU,SAChDmC,IAACoB,KAAI,IAAK5B,EAAUiB,SAAG5C,IACrB,KACH6C,eAAe5C,GACdA,SACSA,GAAY,WACrBA,EAAQ8B,UACC9B,GAAY,iBAAmBA,GAAY,SACpDkC,IAACoB,KAAI,IAAKxB,EAAYa,SAAG3C,IACvB,QAEJ,QAELI,EACC8B,IAACM,OAAa,CAAAG,SACXpC,EACC2B,IAACiB,SAAQ,CAACD,MAAM,OAAMP,SACpBT,IAACsB,OAAM,CAACC,OAAO,WAAY9C,MAE3BiC,eAAexC,GACjBA,EACE,OAEJ,QAELF,EACCgC,IAACM,eAAqB,CAAAG,SACnBC,eAAe1C,GACZA,SACOA,GAAgB,WACrBA,EAAY8B,GACZ,OAEN,SAGI,IAGlB,CACE0B,YA3PmB,mBA4PnBzC,MAAO0C"}

package/components/ProgressLine/ProgressLine.js

@@ -1,2 +1,2 @@
-'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');const ProgressLine=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const{size:r="s",max:i=1,iconProps:n={},sizeXXS:t,sizeXS:o,sizeS:a,sizeM:c,sizeL:l,sizeXL:u,...j}=e;const x={size:r,sizeXXS:t,sizeXS:o,sizeS:a,sizeM:c,sizeL:l,sizeXL:u};const z=Boolean(typeof j.value=='number'&&j.fancy);return jsxRuntime.jsxs(style.Root,{...j,...x,role:"progressbar","aria-valuemax":i,"aria-valuenow":j.value,max:i,hasIcon:z,ref:s,children:[jsxRuntime.jsx(style.Track,{children:jsxRuntime.jsx(style.Bar,{children:" "})}),z?jsxRuntime.jsx(style.IconBar,{children:jsxRuntime.jsx(style.IconPosition,{children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(style.StarFillRotated,{}),sizes:constants.SIZES_ICON,...x,...n})})}):null]})})),{displayName:'ProgressLine',sizes:constants.SIZES});exports.ProgressLine=ProgressLine;
+'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');const ProgressLine=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const{size:r="s",max:i=1,iconProps:n={},sizeXXS:t,sizeXS:o,sizeS:a,sizeM:c,sizeL:l,sizeXL:u,...j}=e;const x={size:r,sizeXXS:t,sizeXS:o,sizeS:a,sizeM:c,sizeL:l,sizeXL:u};const z=Boolean(typeof j.value=='number'&&j.fancy);return jsxRuntime.jsxs(style.Root,{...j,...x,role:"progressbar","aria-valuemax":i,"aria-valuenow":j.value,max:i,hasIcon:z,ref:s,children:[jsxRuntime.jsx(style.Track,{children:jsxRuntime.jsx(style.Bar,{children:" "})}),z?jsxRuntime.jsx(style.IconBar,{children:jsxRuntime.jsx(style.IconPosition,{children:jsxRuntime.jsx(Icon.Icon,{icon:n.name||n.icon?void 0:jsxRuntime.jsx(style.StarFillRotated,{}),sizes:constants.SIZES_ICON,...x,...n})})}):null]})})),{displayName:'ProgressLine',sizes:constants.SIZES});exports.ProgressLine=ProgressLine;
 //# sourceMappingURL=ProgressLine.js.map

package/components/ProgressLine/ProgressLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressLine.js","sources":["../../../../src/components/ProgressLine/ProgressLine.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { SIZES, SIZES_ICON } from './constants'\nimport * as Styled from './style'\nimport type { ProgressLineProps } from './types'\n\nconst COMPONENT_NAME = 'ProgressLine'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Переданный \"ref\" будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/ProgressLine/types.ts).\n */\nconst ProgressLine: React.ForwardRefExoticComponent<ProgressLineProps> = withMergedProps<\n  ProgressLineProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<ProgressLineProps>>((props, ref) => {\n    const { size = 's', max = 1, iconProps = {}, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL, ...restProps } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const hasIcon = Boolean(typeof restProps.value === 'number' && restProps.fancy)\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        role='progressbar'\n        aria-valuemax={max}\n        aria-valuenow={restProps.value}\n        max={max}\n        hasIcon={hasIcon}\n        ref={ref}\n      >\n        <Styled.Track>\n          <Styled.Bar>&nbsp;</Styled.Bar>\n        </Styled.Track>\n        {hasIcon ? (\n          <Styled.IconBar>\n            <Styled.IconPosition>\n              <Icon icon={<Styled.StarFillRotated />} sizes={SIZES_ICON} {...sizeProps} {...iconProps} />\n            </Styled.IconPosition>\n          </Styled.IconBar>\n        ) : null}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { ProgressLine }\n"],"names":["ProgressLine","withMergedProps","forwardRef","props","ref","size","max","iconProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","sizeProps","hasIcon","Boolean","value","fancy","_jsxs","Styled","role","children","_jsx","jsx","Icon","icon","StarFillRotated","sizes","SIZES_ICON","displayName","SIZES"],"mappings":"6PAoBMA,MAAAA,aAAmEC,gBAAAA,gBAIvEC,MAAAA,YAA2D,CAACC,EAAOC,KACjE,MAAMC,KAAEA,EAAO,IAAGC,IAAEA,EAAM,EAACC,UAAEA,EAAY,CAAE,EAAAC,QAAEA,EAAOC,OAAEA,EAAMC,MAAEA,EAAKC,MAAEA,EAAKC,MAAEA,EAAKC,OAAEA,KAAWC,GAAcX,EAE5G,MAAMY,EAAY,CAChBV,OACAG,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMG,EAAUC,eAAeH,EAAUI,OAAU,UAAYJ,EAAUK,OAEzE,OACEC,WAAAA,KAACC,MAAAA,KAAW,IACNP,KACAC,EACJO,KAAK,cACL,gBAAehB,EACf,gBAAeQ,EAAUI,MACzBZ,IAAKA,EACLU,QAASA,EACTZ,IAAKA,EAAImB,SAETC,CAAAA,WAAAC,IAACJ,YAAY,CAAAE,SACXC,WAAAC,IAACJ,UAAU,CAAAE,SAAC,QAEbP,EACCQ,WAAAC,IAACJ,cAAc,CAAAE,SACbC,WAAAC,IAACJ,mBAAmB,CAAAE,SAClBC,WAAAC,IAACC,UAAI,CAACC,KAAMH,WAAAA,IAACH,MAAsBO,oBAAKC,MAAOC,UAAWA,cAAKf,KAAeR,QAGhF,OACQ,IAGlB,CACEwB,YAxDmB,eAyDnBF,MAAOG,UAAAA"}
+{"version":3,"file":"ProgressLine.js","sources":["../../../../src/components/ProgressLine/ProgressLine.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { SIZES, SIZES_ICON } from './constants'\nimport * as Styled from './style'\nimport type { ProgressLineProps } from './types'\n\nconst COMPONENT_NAME = 'ProgressLine'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Переданный \"ref\" будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/ProgressLine/types.ts).\n */\nconst ProgressLine: React.ForwardRefExoticComponent<ProgressLineProps> = withMergedProps<\n  ProgressLineProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<ProgressLineProps>>((props, ref) => {\n    const { size = 's', max = 1, iconProps = {}, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL, ...restProps } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const hasIcon = Boolean(typeof restProps.value === 'number' && restProps.fancy)\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        role='progressbar'\n        aria-valuemax={max}\n        aria-valuenow={restProps.value}\n        max={max}\n        hasIcon={hasIcon}\n        ref={ref}\n      >\n        <Styled.Track>\n          <Styled.Bar>&nbsp;</Styled.Bar>\n        </Styled.Track>\n        {hasIcon ? (\n          <Styled.IconBar>\n            <Styled.IconPosition>\n              <Icon\n                icon={!iconProps.name && !iconProps.icon ? <Styled.StarFillRotated /> : undefined}\n                sizes={SIZES_ICON}\n                {...sizeProps}\n                {...iconProps}\n              />\n            </Styled.IconPosition>\n          </Styled.IconBar>\n        ) : null}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { ProgressLine }\n"],"names":["ProgressLine","withMergedProps","forwardRef","props","ref","size","max","iconProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","sizeProps","hasIcon","Boolean","value","fancy","_jsxs","Styled","role","children","_jsx","jsx","Icon","icon","name","undefined","sizes","SIZES_ICON","displayName","SIZES"],"mappings":"6PAoBMA,MAAAA,aAAmEC,gBAAAA,gBAIvEC,MAAAA,YAA2D,CAACC,EAAOC,KACjE,MAAMC,KAAEA,EAAO,IAAGC,IAAEA,EAAM,EAACC,UAAEA,EAAY,CAAE,EAAAC,QAAEA,EAAOC,OAAEA,EAAMC,MAAEA,EAAKC,MAAEA,EAAKC,MAAEA,EAAKC,OAAEA,KAAWC,GAAcX,EAE5G,MAAMY,EAAY,CAChBV,OACAG,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMG,EAAUC,eAAeH,EAAUI,OAAU,UAAYJ,EAAUK,OAEzE,OACEC,WAAAA,KAACC,MAAAA,KAAW,IACNP,KACAC,EACJO,KAAK,cACL,gBAAehB,EACf,gBAAeQ,EAAUI,MACzBZ,IAAKA,EACLU,QAASA,EACTZ,IAAKA,EAAImB,SAETC,CAAAA,WAAAC,IAACJ,YAAY,CAAAE,SACXC,WAAAC,IAACJ,UAAU,CAAAE,SAAC,QAEbP,EACCQ,WAAAC,IAACJ,cAAc,CAAAE,SACbC,WAAAC,IAACJ,mBAAmB,CAAAE,SAClBC,WAAAC,IAACC,UAAI,CACHC,KAAOpB,EAAUqB,MAASrB,EAAUoB,UAAoCE,EAA7BL,eAACH,MAAAA,gBAAwB,CAAA,GACpES,MAAOC,UAAWA,cACdhB,KACAR,QAIR,OACQ,IAGlB,CACEyB,YA7DmB,eA8DnBF,MAAOG,UAAAA"}

package/components/ProgressLine/ProgressLine.mjs

@@ -1,2 +1,2 @@
-import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_ICON}from'./constants.mjs';import{Root,Track,Bar,IconBar,IconPosition,StarFillRotated}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';const ProgressLine=withMergedProps(forwardRef(((s,r)=>{const{size:o="s",max:e=1,iconProps:i={},sizeXXS:n,sizeXS:a,sizeS:t,sizeM:c,sizeL:m,sizeXL:l,...z}=s;const S={size:o,sizeXXS:n,sizeXS:a,sizeS:t,sizeM:c,sizeL:m,sizeXL:l};const I=Boolean(typeof z.value=='number'&&z.fancy);return jsxs(Root,{...z,...S,role:"progressbar","aria-valuemax":e,"aria-valuenow":z.value,max:e,hasIcon:I,ref:r,children:[jsx(Track,{children:jsx(Bar,{children:" "})}),I?jsx(IconBar,{children:jsx(IconPosition,{children:jsx(Icon,{icon:jsx(StarFillRotated,{}),sizes:SIZES_ICON,...S,...i})})}):null]})})),{displayName:'ProgressLine',sizes:SIZES});export{ProgressLine};
+import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_ICON}from'./constants.mjs';import{Root,Track,Bar,IconBar,IconPosition,StarFillRotated}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';const ProgressLine=withMergedProps(forwardRef(((s,o)=>{const{size:r="s",max:e=1,iconProps:i={},sizeXXS:n,sizeXS:a,sizeS:t,sizeM:c,sizeL:m,sizeXL:l,...z}=s;const S={size:r,sizeXXS:n,sizeXS:a,sizeS:t,sizeM:c,sizeL:m,sizeXL:l};const I=Boolean(typeof z.value=='number'&&z.fancy);return jsxs(Root,{...z,...S,role:"progressbar","aria-valuemax":e,"aria-valuenow":z.value,max:e,hasIcon:I,ref:o,children:[jsx(Track,{children:jsx(Bar,{children:" "})}),I?jsx(IconBar,{children:jsx(IconPosition,{children:jsx(Icon,{icon:i.name||i.icon?void 0:jsx(StarFillRotated,{}),sizes:SIZES_ICON,...S,...i})})}):null]})})),{displayName:'ProgressLine',sizes:SIZES});export{ProgressLine};
 //# sourceMappingURL=ProgressLine.mjs.map

package/components/ProgressLine/ProgressLine.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressLine.mjs","sources":["../../../../src/components/ProgressLine/ProgressLine.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { SIZES, SIZES_ICON } from './constants'\nimport * as Styled from './style'\nimport type { ProgressLineProps } from './types'\n\nconst COMPONENT_NAME = 'ProgressLine'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Переданный \"ref\" будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/ProgressLine/types.ts).\n */\nconst ProgressLine: React.ForwardRefExoticComponent<ProgressLineProps> = withMergedProps<\n  ProgressLineProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<ProgressLineProps>>((props, ref) => {\n    const { size = 's', max = 1, iconProps = {}, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL, ...restProps } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const hasIcon = Boolean(typeof restProps.value === 'number' && restProps.fancy)\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        role='progressbar'\n        aria-valuemax={max}\n        aria-valuenow={restProps.value}\n        max={max}\n        hasIcon={hasIcon}\n        ref={ref}\n      >\n        <Styled.Track>\n          <Styled.Bar>&nbsp;</Styled.Bar>\n        </Styled.Track>\n        {hasIcon ? (\n          <Styled.IconBar>\n            <Styled.IconPosition>\n              <Icon icon={<Styled.StarFillRotated />} sizes={SIZES_ICON} {...sizeProps} {...iconProps} />\n            </Styled.IconPosition>\n          </Styled.IconBar>\n        ) : null}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { ProgressLine }\n"],"names":["ProgressLine","withMergedProps","forwardRef","props","ref","size","max","iconProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","sizeProps","hasIcon","Boolean","value","fancy","_jsxs","Styled","role","children","_jsx","Icon","icon","sizes","SIZES_ICON","displayName","SIZES"],"mappings":"gSAoBMA,MAAAA,aAAmEC,gBAIvEC,YAA2D,CAACC,EAAOC,KACjE,MAAMC,KAAEA,EAAO,IAAGC,IAAEA,EAAM,EAACC,UAAEA,EAAY,CAAE,EAAAC,QAAEA,EAAOC,OAAEA,EAAMC,MAAEA,EAAKC,MAAEA,EAAKC,MAAEA,EAAKC,OAAEA,KAAWC,GAAcX,EAE5G,MAAMY,EAAY,CAChBV,OACAG,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMG,EAAUC,eAAeH,EAAUI,OAAU,UAAYJ,EAAUK,OAEzE,OACEC,KAACC,KAAW,IACNP,KACAC,EACJO,KAAK,cACL,gBAAehB,EACf,gBAAeQ,EAAUI,MACzBZ,IAAKA,EACLU,QAASA,EACTZ,IAAKA,EAAImB,SAETC,CAAAA,IAACH,MAAY,CAAAE,SACXC,IAACH,IAAU,CAAAE,SAAC,QAEbP,EACCQ,IAACH,QAAc,CAAAE,SACbC,IAACH,aAAmB,CAAAE,SAClBC,IAACC,KAAI,CAACC,KAAMF,IAACH,oBAA2BM,MAAOC,cAAgBb,KAAeR,QAGhF,OACQ,IAGlB,CACEsB,YAxDmB,eAyDnBF,MAAOG"}
+{"version":3,"file":"ProgressLine.mjs","sources":["../../../../src/components/ProgressLine/ProgressLine.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { SIZES, SIZES_ICON } from './constants'\nimport * as Styled from './style'\nimport type { ProgressLineProps } from './types'\n\nconst COMPONENT_NAME = 'ProgressLine'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Переданный \"ref\" будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/ProgressLine/types.ts).\n */\nconst ProgressLine: React.ForwardRefExoticComponent<ProgressLineProps> = withMergedProps<\n  ProgressLineProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<ProgressLineProps>>((props, ref) => {\n    const { size = 's', max = 1, iconProps = {}, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL, ...restProps } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const hasIcon = Boolean(typeof restProps.value === 'number' && restProps.fancy)\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        role='progressbar'\n        aria-valuemax={max}\n        aria-valuenow={restProps.value}\n        max={max}\n        hasIcon={hasIcon}\n        ref={ref}\n      >\n        <Styled.Track>\n          <Styled.Bar>&nbsp;</Styled.Bar>\n        </Styled.Track>\n        {hasIcon ? (\n          <Styled.IconBar>\n            <Styled.IconPosition>\n              <Icon\n                icon={!iconProps.name && !iconProps.icon ? <Styled.StarFillRotated /> : undefined}\n                sizes={SIZES_ICON}\n                {...sizeProps}\n                {...iconProps}\n              />\n            </Styled.IconPosition>\n          </Styled.IconBar>\n        ) : null}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { ProgressLine }\n"],"names":["ProgressLine","withMergedProps","forwardRef","props","ref","size","max","iconProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","sizeProps","hasIcon","Boolean","value","fancy","_jsxs","Styled","role","children","_jsx","Icon","icon","name","undefined","sizes","SIZES_ICON","displayName","SIZES"],"mappings":"gSAoBMA,MAAAA,aAAmEC,gBAIvEC,YAA2D,CAACC,EAAOC,KACjE,MAAMC,KAAEA,EAAO,IAAGC,IAAEA,EAAM,EAACC,UAAEA,EAAY,CAAE,EAAAC,QAAEA,EAAOC,OAAEA,EAAMC,MAAEA,EAAKC,MAAEA,EAAKC,MAAEA,EAAKC,OAAEA,KAAWC,GAAcX,EAE5G,MAAMY,EAAY,CAChBV,OACAG,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMG,EAAUC,eAAeH,EAAUI,OAAU,UAAYJ,EAAUK,OAEzE,OACEC,KAACC,KAAW,IACNP,KACAC,EACJO,KAAK,cACL,gBAAehB,EACf,gBAAeQ,EAAUI,MACzBZ,IAAKA,EACLU,QAASA,EACTZ,IAAKA,EAAImB,SAETC,CAAAA,IAACH,MAAY,CAAAE,SACXC,IAACH,IAAU,CAAAE,SAAC,QAEbP,EACCQ,IAACH,QAAc,CAAAE,SACbC,IAACH,aAAmB,CAAAE,SAClBC,IAACC,KAAI,CACHC,KAAOnB,EAAUoB,MAASpB,EAAUmB,UAAoCE,EAA7BJ,IAACH,gBAAwB,CAAA,GACpEQ,MAAOC,cACHf,KACAR,QAIR,OACQ,IAGlB,CACEwB,YA7DmB,eA8DnBF,MAAOG"}

package/components/ProgressLine/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var iconPack=require('@foxford/icon-pack');var getProgressPercent=require('../../shared/utils/getProgressPercent.js');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');function _interopDefault(r){return r&&r.__esModule?r:{default:r}}var styled__default=_interopDefault(styled);const shouldForwardProgressLineProp=style.createShouldForwardProp((r=>!['value','max','fancy','hasIcon'].includes(r)));const shiftAnimation=styled.keyframes(["0%{transform:translateX(-100%);}100%{transform:translateX(200%);}"]);const Track=styled__default.default.div.withConfig({displayName:"ProgressLine__Track",componentId:"ui__sc-3juwyd-0"})(["box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:inherit;"]);const Bar=styled__default.default.div.withConfig({displayName:"ProgressLine__Bar",componentId:"ui__sc-3juwyd-1"})(["box-sizing:border-box;width:100%;height:100%;border-radius:inherit;"]);const IconBar=styled__default.default.div.withConfig({displayName:"ProgressLine__IconBar",componentId:"ui__sc-3juwyd-2"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;"]);const IconPosition=styled__default.default.div.withConfig({displayName:"ProgressLine__IconPosition",componentId:"ui__sc-3juwyd-3"})(["box-sizing:border-box;display:flex;position:absolute;right:0;top:50%;transform:translate(50%,-50%);"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardProgressLineProp}).withConfig({displayName:"ProgressLine__Root",componentId:"ui__sc-3juwyd-4"})(["box-sizing:border-box;position:relative;"," "," "," "," ",""],(r=>typeof r.value=='number'?`\n        & ${Bar}, \n        & ${IconBar} {\n          transition: transform 150ms linear;\n          transform: translateX(-${100-getProgressPercent.getProgressPercent(r.value,r.max)}%);\n        }\n      `:styled.css(["& ","{width:50%;animation:"," 2000ms infinite;}"],Bar,shiftAnimation)),(r=>r.hasIcon&&`\n      & ${Bar} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `),(r=>{return o={barColor:r.theme.colors['bg-brand-primary-basic'],iconColor:r.theme.colors['bg-brand-primary-basic'],trackColor:r.theme.colors['bg-onmain-tertiary'],...r.palette},`\n  & ${Bar} {\n    background-color: ${o.barColor};\n  }\n  & ${IconBar} {\n    color: ${o.iconColor};\n  }\n  & ${Track} {\n    background-color: ${o.trackColor};\n  }\n`;var o}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const StarFillRotated=styled__default.default(iconPack.StarFill).withConfig({displayName:"ProgressLine__StarFillRotated",componentId:"ui__sc-3juwyd-5"})(["transform:rotate(-21deg);"]);exports.Bar=Bar,exports.IconBar=IconBar,exports.IconPosition=IconPosition,exports.Root=Root,exports.StarFillRotated=StarFillRotated,exports.Track=Track;
+'use strict';var styled=require('styled-components');var getProgressPercent=require('../../shared/utils/getProgressPercent.js');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var index=require('../../icon-pack/src/icons/StarFill/index.js');function _interopDefault(r){return r&&r.__esModule?r:{default:r}}var styled__default=_interopDefault(styled);const shouldForwardProgressLineProp=style.createShouldForwardProp((r=>!['value','max','fancy','hasIcon'].includes(r)));const shiftAnimation=styled.keyframes(["0%{transform:translateX(-100%);}100%{transform:translateX(200%);}"]);const Track=styled__default.default.div.withConfig({displayName:"ProgressLine__Track",componentId:"ui__sc-3juwyd-0"})(["box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:inherit;"]);const Bar=styled__default.default.div.withConfig({displayName:"ProgressLine__Bar",componentId:"ui__sc-3juwyd-1"})(["box-sizing:border-box;width:100%;height:100%;border-radius:inherit;"]);const IconBar=styled__default.default.div.withConfig({displayName:"ProgressLine__IconBar",componentId:"ui__sc-3juwyd-2"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;"]);const IconPosition=styled__default.default.div.withConfig({displayName:"ProgressLine__IconPosition",componentId:"ui__sc-3juwyd-3"})(["box-sizing:border-box;display:flex;position:absolute;right:0;top:50%;transform:translate(50%,-50%);"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardProgressLineProp}).withConfig({displayName:"ProgressLine__Root",componentId:"ui__sc-3juwyd-4"})(["box-sizing:border-box;position:relative;"," "," "," "," ",""],(r=>typeof r.value=='number'?`\n        & ${Bar}, \n        & ${IconBar} {\n          transition: transform 150ms linear;\n          transform: translateX(-${100-getProgressPercent.getProgressPercent(r.value,r.max)}%);\n        }\n      `:styled.css(["& ","{width:50%;animation:"," 2000ms infinite;}"],Bar,shiftAnimation)),(r=>r.hasIcon&&`\n      & ${Bar} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `),(r=>{return o={barColor:r.theme.colors['bg-brand-primary-basic'],iconColor:r.theme.colors['bg-brand-primary-basic'],trackColor:r.theme.colors['bg-onmain-tertiary'],...r.palette},`\n  & ${Bar} {\n    background-color: ${o.barColor};\n  }\n  & ${IconBar} {\n    color: ${o.iconColor};\n  }\n  & ${Track} {\n    background-color: ${o.trackColor};\n  }\n`;var o}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const StarFillRotated=styled__default.default(index.StarFill).withConfig({displayName:"ProgressLine__StarFillRotated",componentId:"ui__sc-3juwyd-5"})(["transform:rotate(-21deg);"]);exports.Bar=Bar,exports.IconBar=IconBar,exports.IconPosition=IconPosition,exports.Root=Root,exports.StarFillRotated=StarFillRotated,exports.Track=Track;
 //# sourceMappingURL=style.js.map

package/components/ProgressLine/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/ProgressLine/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StarFill } from '@foxford/icon-pack'\nimport { getProgressPercent } from 'shared/utils/getProgressPercent'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledProgressLineProps, ProgressLinePalette } from './types'\n\nconst shouldForwardProgressLineProp = createShouldForwardProp(\n  (propKey) => !['value', 'max', 'fancy', 'hasIcon'].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n`\n\nexport const Track = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: inherit;\n`\n\nexport const Bar = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n`\n\nexport const IconBar = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`\n\nexport const IconPosition = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translate(50%, -50%);\n`\n\nconst template = (palette: ProgressLinePalette) => `\n  & ${Bar} {\n    background-color: ${palette.barColor};\n  }\n  & ${IconBar} {\n    color: ${palette.iconColor};\n  }\n  & ${Track} {\n    background-color: ${palette.trackColor};\n  }\n`\n\nexport const Root = styled.div.withConfig<StyledProgressLineProps>({\n  shouldForwardProp: shouldForwardProgressLineProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n\n  ${(props) =>\n    typeof props.value === 'number'\n      ? `\n        & ${Bar}, \n        & ${IconBar} {\n          transition: transform 150ms linear;\n          transform: translateX(-${100 - getProgressPercent(props.value, props.max)}%);\n        }\n      `\n      : css`\n          & ${Bar} {\n            width: 50%;\n            animation: ${shiftAnimation} 2000ms infinite;\n          }\n        `}\n\n  ${(props) =>\n    props.hasIcon &&\n    `\n      & ${Bar} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `}\n\n  ${(props) =>\n    template({\n      barColor: props.theme.colors['bg-brand-primary-basic'],\n      iconColor: props.theme.colors['bg-brand-primary-basic'],\n      trackColor: props.theme.colors['bg-onmain-tertiary'],\n      ...props.palette,\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const StarFillRotated = styled(StarFill)`\n  transform: rotate(-21deg);\n`\n"],"names":["shouldForwardProgressLineProp","createShouldForwardProp","propKey","includes","shiftAnimation","keyframes","Track","styled","div","withConfig","displayName","componentId","Bar","IconBar","IconPosition","Root","shouldForwardProp","props","value","getProgressPercent","max","css","hasIcon","template","palette","barColor","theme","colors","iconColor","trackColor","responsiveSize","responsiveMargin","StarFillRotated","default","StarFill"],"mappings":"ycAQA,MAAMA,8BAAgCC,MAAuBA,yBAC1DC,IAAa,CAAC,QAAS,MAAO,QAAS,WAAWC,SAASD,KAG9D,MAAME,eAAiBC,OAASA,UAO/B,CAAA,4EAEYC,MAAQC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAAVJ,CAMpB,CAAA,8FAEYK,IAAML,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAAVJ,CAKlB,CAAA,8EAEYM,QAAUN,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAVJ,CAOtB,CAAA,uFAEYO,aAAeP,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,6BAAAC,YAAA,mBAAVJ,CAO3B,CAAA,wGAcM,MAAMQ,KAAOR,gBAAAA,QAAOC,IAAIC,WAAoC,CACjEO,kBAAmBhB,gCACnBS,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAFkBJ,CAMfU,CAAAA,2CAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,UACMA,EAAMC,OAAU,SACnB,eACIN,oBACAC,8FAEuB,IAAMM,mBAAAA,mBAAmBF,EAAMC,MAAOD,EAAMG,6BAGvEC,OAAGA,IACGT,CAAAA,KAAAA,wBAAAA,sBAAAA,IAEWR,kBAIpBa,GACDA,EAAMK,SACN,aACMV,sGAMLK,IACDM,OA5CcC,EA4CL,CACPC,SAAUR,EAAMS,MAAMC,OAAO,0BAC7BC,UAAWX,EAAMS,MAAMC,OAAO,0BAC9BE,WAAYZ,EAAMS,MAAMC,OAAO,yBAC5BV,EAAMO,SAhDoC,SAC7CZ,gCACkBY,EAAQC,uBAE1BZ,yBACOW,EAAQI,wBAEftB,kCACkBkB,EAAQK,qBARdL,KAiDZ,GAEFM,eAAcA,eACdC,mCAGG,MAAMC,gBAAkBzB,gBAAM0B,QAACC,mBAASzB,WAAA,CAAAC,YAAA,gCAAAC,YAAA,mBAAhBJ,CAE9B,CAAA"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/ProgressLine/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StarFill } from '@foxford/icon-pack'\nimport { getProgressPercent } from 'shared/utils/getProgressPercent'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledProgressLineProps, ProgressLinePalette } from './types'\n\nconst shouldForwardProgressLineProp = createShouldForwardProp(\n  (propKey) => !['value', 'max', 'fancy', 'hasIcon'].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n`\n\nexport const Track = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: inherit;\n`\n\nexport const Bar = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n`\n\nexport const IconBar = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`\n\nexport const IconPosition = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translate(50%, -50%);\n`\n\nconst template = (palette: ProgressLinePalette) => `\n  & ${Bar} {\n    background-color: ${palette.barColor};\n  }\n  & ${IconBar} {\n    color: ${palette.iconColor};\n  }\n  & ${Track} {\n    background-color: ${palette.trackColor};\n  }\n`\n\nexport const Root = styled.div.withConfig<StyledProgressLineProps>({\n  shouldForwardProp: shouldForwardProgressLineProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n\n  ${(props) =>\n    typeof props.value === 'number'\n      ? `\n        & ${Bar}, \n        & ${IconBar} {\n          transition: transform 150ms linear;\n          transform: translateX(-${100 - getProgressPercent(props.value, props.max)}%);\n        }\n      `\n      : css`\n          & ${Bar} {\n            width: 50%;\n            animation: ${shiftAnimation} 2000ms infinite;\n          }\n        `}\n\n  ${(props) =>\n    props.hasIcon &&\n    `\n      & ${Bar} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `}\n\n  ${(props) =>\n    template({\n      barColor: props.theme.colors['bg-brand-primary-basic'],\n      iconColor: props.theme.colors['bg-brand-primary-basic'],\n      trackColor: props.theme.colors['bg-onmain-tertiary'],\n      ...props.palette,\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const StarFillRotated = styled(StarFill)`\n  transform: rotate(-21deg);\n`\n"],"names":["shouldForwardProgressLineProp","createShouldForwardProp","propKey","includes","shiftAnimation","keyframes","Track","styled","div","withConfig","displayName","componentId","Bar","IconBar","IconPosition","Root","shouldForwardProp","props","value","getProgressPercent","max","css","hasIcon","template","palette","barColor","theme","colors","iconColor","trackColor","responsiveSize","responsiveMargin","StarFillRotated","default","StarFill"],"mappings":"+dAQA,MAAMA,8BAAgCC,MAAuBA,yBAC1DC,IAAa,CAAC,QAAS,MAAO,QAAS,WAAWC,SAASD,KAG9D,MAAME,eAAiBC,OAASA,UAO/B,CAAA,4EAEYC,MAAQC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAAVJ,CAMpB,CAAA,8FAEYK,IAAML,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAAVJ,CAKlB,CAAA,8EAEYM,QAAUN,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAVJ,CAOtB,CAAA,uFAEYO,aAAeP,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,6BAAAC,YAAA,mBAAVJ,CAO3B,CAAA,wGAcM,MAAMQ,KAAOR,gBAAAA,QAAOC,IAAIC,WAAoC,CACjEO,kBAAmBhB,gCACnBS,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAFkBJ,CAMfU,CAAAA,2CAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,UACMA,EAAMC,OAAU,SACnB,eACIN,oBACAC,8FAEuB,IAAMM,mBAAAA,mBAAmBF,EAAMC,MAAOD,EAAMG,6BAGvEC,OAAGA,IACGT,CAAAA,KAAAA,wBAAAA,sBAAAA,IAEWR,kBAIpBa,GACDA,EAAMK,SACN,aACMV,sGAMLK,IACDM,OA5CcC,EA4CL,CACPC,SAAUR,EAAMS,MAAMC,OAAO,0BAC7BC,UAAWX,EAAMS,MAAMC,OAAO,0BAC9BE,WAAYZ,EAAMS,MAAMC,OAAO,yBAC5BV,EAAMO,SAhDoC,SAC7CZ,gCACkBY,EAAQC,uBAE1BZ,yBACOW,EAAQI,wBAEftB,kCACkBkB,EAAQK,qBARdL,KAiDZ,GAEFM,eAAcA,eACdC,mCAGG,MAAMC,gBAAkBzB,gBAAM0B,QAACC,gBAASzB,WAAA,CAAAC,YAAA,gCAAAC,YAAA,mBAAhBJ,CAE9B,CAAA"}

package/components/ProgressLine/style.mjs

@@ -1,2 +1,2 @@
-import styled,{keyframes,css}from'styled-components';import{StarFill}from'@foxford/icon-pack';import{getProgressPercent}from'../../shared/utils/getProgressPercent.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';const shouldForwardProgressLineProp=createShouldForwardProp((o=>!['value','max','fancy','hasIcon'].includes(o)));const shiftAnimation=keyframes(["0%{transform:translateX(-100%);}100%{transform:translateX(200%);}"]);const Track=styled.div.withConfig({displayName:"ProgressLine__Track",componentId:"ui__sc-3juwyd-0"})(["box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:inherit;"]);const Bar=styled.div.withConfig({displayName:"ProgressLine__Bar",componentId:"ui__sc-3juwyd-1"})(["box-sizing:border-box;width:100%;height:100%;border-radius:inherit;"]);const IconBar=styled.div.withConfig({displayName:"ProgressLine__IconBar",componentId:"ui__sc-3juwyd-2"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;"]);const IconPosition=styled.div.withConfig({displayName:"ProgressLine__IconPosition",componentId:"ui__sc-3juwyd-3"})(["box-sizing:border-box;display:flex;position:absolute;right:0;top:50%;transform:translate(50%,-50%);"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardProgressLineProp}).withConfig({displayName:"ProgressLine__Root",componentId:"ui__sc-3juwyd-4"})(["box-sizing:border-box;position:relative;"," "," "," "," ",""],(o=>typeof o.value=='number'?`\n        & ${Bar}, \n        & ${IconBar} {\n          transition: transform 150ms linear;\n          transform: translateX(-${100-getProgressPercent(o.value,o.max)}%);\n        }\n      `:css(["& ","{width:50%;animation:"," 2000ms infinite;}"],Bar,shiftAnimation)),(o=>o.hasIcon&&`\n      & ${Bar} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `),(o=>{return r={barColor:o.theme.colors['bg-brand-primary-basic'],iconColor:o.theme.colors['bg-brand-primary-basic'],trackColor:o.theme.colors['bg-onmain-tertiary'],...o.palette},`\n  & ${Bar} {\n    background-color: ${r.barColor};\n  }\n  & ${IconBar} {\n    color: ${r.iconColor};\n  }\n  & ${Track} {\n    background-color: ${r.trackColor};\n  }\n`;var r}),responsiveSize,responsiveMargin);const StarFillRotated=styled(StarFill).withConfig({displayName:"ProgressLine__StarFillRotated",componentId:"ui__sc-3juwyd-5"})(["transform:rotate(-21deg);"]);export{Bar,IconBar,IconPosition,Root,StarFillRotated,Track};
+import styled,{keyframes,css}from'styled-components';import{getProgressPercent}from'../../shared/utils/getProgressPercent.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{StarFill}from'../../icon-pack/src/icons/StarFill/index.mjs';const shouldForwardProgressLineProp=createShouldForwardProp((o=>!['value','max','fancy','hasIcon'].includes(o)));const shiftAnimation=keyframes(["0%{transform:translateX(-100%);}100%{transform:translateX(200%);}"]);const Track=styled.div.withConfig({displayName:"ProgressLine__Track",componentId:"ui__sc-3juwyd-0"})(["box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:inherit;"]);const Bar=styled.div.withConfig({displayName:"ProgressLine__Bar",componentId:"ui__sc-3juwyd-1"})(["box-sizing:border-box;width:100%;height:100%;border-radius:inherit;"]);const IconBar=styled.div.withConfig({displayName:"ProgressLine__IconBar",componentId:"ui__sc-3juwyd-2"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;"]);const IconPosition=styled.div.withConfig({displayName:"ProgressLine__IconPosition",componentId:"ui__sc-3juwyd-3"})(["box-sizing:border-box;display:flex;position:absolute;right:0;top:50%;transform:translate(50%,-50%);"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardProgressLineProp}).withConfig({displayName:"ProgressLine__Root",componentId:"ui__sc-3juwyd-4"})(["box-sizing:border-box;position:relative;"," "," "," "," ",""],(o=>typeof o.value=='number'?`\n        & ${Bar}, \n        & ${IconBar} {\n          transition: transform 150ms linear;\n          transform: translateX(-${100-getProgressPercent(o.value,o.max)}%);\n        }\n      `:css(["& ","{width:50%;animation:"," 2000ms infinite;}"],Bar,shiftAnimation)),(o=>o.hasIcon&&`\n      & ${Bar} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `),(o=>{return r={barColor:o.theme.colors['bg-brand-primary-basic'],iconColor:o.theme.colors['bg-brand-primary-basic'],trackColor:o.theme.colors['bg-onmain-tertiary'],...o.palette},`\n  & ${Bar} {\n    background-color: ${r.barColor};\n  }\n  & ${IconBar} {\n    color: ${r.iconColor};\n  }\n  & ${Track} {\n    background-color: ${r.trackColor};\n  }\n`;var r}),responsiveSize,responsiveMargin);const StarFillRotated=styled(StarFill).withConfig({displayName:"ProgressLine__StarFillRotated",componentId:"ui__sc-3juwyd-5"})(["transform:rotate(-21deg);"]);export{Bar,IconBar,IconPosition,Root,StarFillRotated,Track};
 //# sourceMappingURL=style.mjs.map

package/components/ProgressLine/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/ProgressLine/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StarFill } from '@foxford/icon-pack'\nimport { getProgressPercent } from 'shared/utils/getProgressPercent'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledProgressLineProps, ProgressLinePalette } from './types'\n\nconst shouldForwardProgressLineProp = createShouldForwardProp(\n  (propKey) => !['value', 'max', 'fancy', 'hasIcon'].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n`\n\nexport const Track = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: inherit;\n`\n\nexport const Bar = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n`\n\nexport const IconBar = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`\n\nexport const IconPosition = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translate(50%, -50%);\n`\n\nconst template = (palette: ProgressLinePalette) => `\n  & ${Bar} {\n    background-color: ${palette.barColor};\n  }\n  & ${IconBar} {\n    color: ${palette.iconColor};\n  }\n  & ${Track} {\n    background-color: ${palette.trackColor};\n  }\n`\n\nexport const Root = styled.div.withConfig<StyledProgressLineProps>({\n  shouldForwardProp: shouldForwardProgressLineProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n\n  ${(props) =>\n    typeof props.value === 'number'\n      ? `\n        & ${Bar}, \n        & ${IconBar} {\n          transition: transform 150ms linear;\n          transform: translateX(-${100 - getProgressPercent(props.value, props.max)}%);\n        }\n      `\n      : css`\n          & ${Bar} {\n            width: 50%;\n            animation: ${shiftAnimation} 2000ms infinite;\n          }\n        `}\n\n  ${(props) =>\n    props.hasIcon &&\n    `\n      & ${Bar} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `}\n\n  ${(props) =>\n    template({\n      barColor: props.theme.colors['bg-brand-primary-basic'],\n      iconColor: props.theme.colors['bg-brand-primary-basic'],\n      trackColor: props.theme.colors['bg-onmain-tertiary'],\n      ...props.palette,\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const StarFillRotated = styled(StarFill)`\n  transform: rotate(-21deg);\n`\n"],"names":["shouldForwardProgressLineProp","createShouldForwardProp","propKey","includes","shiftAnimation","keyframes","Track","styled","div","withConfig","displayName","componentId","Bar","IconBar","IconPosition","Root","shouldForwardProp","props","value","getProgressPercent","max","css","hasIcon","template","palette","barColor","theme","colors","iconColor","trackColor","responsiveSize","responsiveMargin","StarFillRotated","StarFill"],"mappings":"wWAQA,MAAMA,8BAAgCC,yBACnCC,IAAa,CAAC,QAAS,MAAO,QAAS,WAAWC,SAASD,KAG9D,MAAME,eAAiBC,UAOtB,CAAA,4EAEYC,MAAQC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAAVJ,CAMpB,CAAA,8FAEYK,IAAML,OAAOC,IAAGC,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAAVJ,CAKlB,CAAA,8EAEYM,QAAUN,OAAOC,IAAGC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAVJ,CAOtB,CAAA,uFAEYO,aAAeP,OAAOC,IAAGC,WAAA,CAAAC,YAAA,6BAAAC,YAAA,mBAAVJ,CAO3B,CAAA,wGAcM,MAAMQ,KAAOR,OAAOC,IAAIC,WAAoC,CACjEO,kBAAmBhB,gCACnBS,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAFkBJ,CAMfU,CAAAA,2CAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,UACMA,EAAMC,OAAU,SACnB,eACIN,oBACAC,8FAEuB,IAAMM,mBAAmBF,EAAMC,MAAOD,EAAMG,6BAGvEC,IACMT,CAAAA,KAAAA,wBAAAA,sBAAAA,IAEWR,kBAIpBa,GACDA,EAAMK,SACN,aACMV,sGAMLK,IACDM,OA5CcC,EA4CL,CACPC,SAAUR,EAAMS,MAAMC,OAAO,0BAC7BC,UAAWX,EAAMS,MAAMC,OAAO,0BAC9BE,WAAYZ,EAAMS,MAAMC,OAAO,yBAC5BV,EAAMO,SAhDoC,SAC7CZ,gCACkBY,EAAQC,uBAE1BZ,yBACOW,EAAQI,wBAEftB,kCACkBkB,EAAQK,qBARdL,KAiDZ,GAEFM,eACAC,kBAGG,MAAMC,gBAAkBzB,OAAO0B,UAASxB,WAAA,CAAAC,YAAA,gCAAAC,YAAA,mBAAhBJ,CAE9B,CAAA"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/ProgressLine/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StarFill } from '@foxford/icon-pack'\nimport { getProgressPercent } from 'shared/utils/getProgressPercent'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledProgressLineProps, ProgressLinePalette } from './types'\n\nconst shouldForwardProgressLineProp = createShouldForwardProp(\n  (propKey) => !['value', 'max', 'fancy', 'hasIcon'].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n`\n\nexport const Track = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: inherit;\n`\n\nexport const Bar = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n`\n\nexport const IconBar = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`\n\nexport const IconPosition = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translate(50%, -50%);\n`\n\nconst template = (palette: ProgressLinePalette) => `\n  & ${Bar} {\n    background-color: ${palette.barColor};\n  }\n  & ${IconBar} {\n    color: ${palette.iconColor};\n  }\n  & ${Track} {\n    background-color: ${palette.trackColor};\n  }\n`\n\nexport const Root = styled.div.withConfig<StyledProgressLineProps>({\n  shouldForwardProp: shouldForwardProgressLineProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n\n  ${(props) =>\n    typeof props.value === 'number'\n      ? `\n        & ${Bar}, \n        & ${IconBar} {\n          transition: transform 150ms linear;\n          transform: translateX(-${100 - getProgressPercent(props.value, props.max)}%);\n        }\n      `\n      : css`\n          & ${Bar} {\n            width: 50%;\n            animation: ${shiftAnimation} 2000ms infinite;\n          }\n        `}\n\n  ${(props) =>\n    props.hasIcon &&\n    `\n      & ${Bar} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `}\n\n  ${(props) =>\n    template({\n      barColor: props.theme.colors['bg-brand-primary-basic'],\n      iconColor: props.theme.colors['bg-brand-primary-basic'],\n      trackColor: props.theme.colors['bg-onmain-tertiary'],\n      ...props.palette,\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const StarFillRotated = styled(StarFill)`\n  transform: rotate(-21deg);\n`\n"],"names":["shouldForwardProgressLineProp","createShouldForwardProp","propKey","includes","shiftAnimation","keyframes","Track","styled","div","withConfig","displayName","componentId","Bar","IconBar","IconPosition","Root","shouldForwardProp","props","value","getProgressPercent","max","css","hasIcon","template","palette","barColor","theme","colors","iconColor","trackColor","responsiveSize","responsiveMargin","StarFillRotated","StarFill"],"mappings":"kYAQA,MAAMA,8BAAgCC,yBACnCC,IAAa,CAAC,QAAS,MAAO,QAAS,WAAWC,SAASD,KAG9D,MAAME,eAAiBC,UAOtB,CAAA,4EAEYC,MAAQC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAAVJ,CAMpB,CAAA,8FAEYK,IAAML,OAAOC,IAAGC,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAAVJ,CAKlB,CAAA,8EAEYM,QAAUN,OAAOC,IAAGC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAVJ,CAOtB,CAAA,uFAEYO,aAAeP,OAAOC,IAAGC,WAAA,CAAAC,YAAA,6BAAAC,YAAA,mBAAVJ,CAO3B,CAAA,wGAcM,MAAMQ,KAAOR,OAAOC,IAAIC,WAAoC,CACjEO,kBAAmBhB,gCACnBS,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAFkBJ,CAMfU,CAAAA,2CAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,UACMA,EAAMC,OAAU,SACnB,eACIN,oBACAC,8FAEuB,IAAMM,mBAAmBF,EAAMC,MAAOD,EAAMG,6BAGvEC,IACMT,CAAAA,KAAAA,wBAAAA,sBAAAA,IAEWR,kBAIpBa,GACDA,EAAMK,SACN,aACMV,sGAMLK,IACDM,OA5CcC,EA4CL,CACPC,SAAUR,EAAMS,MAAMC,OAAO,0BAC7BC,UAAWX,EAAMS,MAAMC,OAAO,0BAC9BE,WAAYZ,EAAMS,MAAMC,OAAO,yBAC5BV,EAAMO,SAhDoC,SAC7CZ,gCACkBY,EAAQC,uBAE1BZ,yBACOW,EAAQI,wBAEftB,kCACkBkB,EAAQK,qBARdL,KAiDZ,GAEFM,eACAC,kBAGG,MAAMC,gBAAkBzB,OAAO0B,UAASxB,WAAA,CAAAC,YAAA,gCAAAC,YAAA,mBAAhBJ,CAE9B,CAAA"}

package/components/TabList/TabList.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var tabList=require('../../shared/context/tabList.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var focus=require('../../mixins/focus.js');var TabListPanel=require('./TabListPanel.js');var hooks=require('./hooks.js');var TabListMenuTab=require('./TabListMenuTab.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var TabListTab=require('../TabListTab/TabListTab.js');var IconButton=require('../IconButton/IconButton.js');const TabList=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:o="m",layout:r="horizontal",gap:s=8,activationOnFocus:n=!1,tabsAutoGroup:a=!1,scrollControls:l=!1,scrollFading:i=!1,defaultActiveTab:c,activeTab:u,onActiveTabChange:d,variant:b,disabled:h,children:y,menuItems:g,addon:m,menuTabText:v,menuTabControl:T,scrollControlLeft:f,scrollControlRight:j,palette:x,sizeXXS:R,sizeXS:L,sizeS:C,sizeM:k,sizeL:p,sizeXL:S,layoutXXS:A,layoutXS:z,layoutS:B,layoutM:M,layoutL:I,layoutXL:q,...D}=e;const O=React.useMemo((()=>({size:o,sizeXXS:R,sizeXS:L,sizeS:C,sizeM:k,sizeL:p,sizeXL:S})),[o,R,L,C,k,p,S]);const X={layout:r,layoutXXS:A,layoutXS:z,layoutS:B,layoutM:M,layoutL:I,layoutXL:q};const P=React.useRef(null);const E=React.useRef(null);const w=React.useRef(null);React.useImperativeHandle(t,(()=>P.current),[]);const F=hooks.useTabListItems(y,g);const H=hooks.useTabListAutoGroup({enabled:a,tabList:F.tabs});const K=hooks.useTabList({defaultActiveTab:c,activeTab:u,onActiveTabChange:d,tabList:a?F.tabs:F.combined});const{scrollThresholds:_,setScrollThresholds:N}=useScrollThresholds.useScrollThresholds({enabled:!a,target:E});const U={...O,sizes:sizes.SIZES_SCROLL_CONTROL,icon:'chevronLeft',tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!E.current||!w.current)return;const e=Math.round(E.current.getBoundingClientRect().left+w.current.getBoundingClientRect().width);const t=Array.from(E.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().left+focus.focus.padding)));const o=t.findIndex((t=>t>=e));[-1,0,1].includes(o)?E.current.scrollTo({top:0,left:0,behavior:'smooth'}):E.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const W={...O,sizes:sizes.SIZES_SCROLL_CONTROL,icon:'chevronRight',tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!E.current)return;const e=Math.round(E.current.getBoundingClientRect().right);const t=Array.from(E.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().right+focus.focus.padding))).reverse();const o=t.findIndex((t=>t<=e));[-1,0,1].includes(o)?E.current.scrollTo({top:0,left:E.current.scrollWidth,behavior:'smooth'}):E.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const Y=React.useMemo((()=>({...K,activationOnFocus:n})),[K,n]);const Z=React.useMemo((()=>({...O,role:'tab',marginRight:s,variant:b,disabled:h,palette:{color:x.tabColor,colorHover:x.tabColorHover,colorActive:x.tabColorActive,colorDisabled:x.tabColorDisabled,colorActiveDisabled:x.tabColorActiveDisabled,backgroundColor:x.tabBackgroundColor,backgroundColorHover:x.tabBackgroundColorHover,backgroundColorActive:x.tabBackgroundColorActive,backgroundColorDisabled:x.tabBackgroundColorDisabled,backgroundColorActiveDisabled:x.tabBackgroundColorActiveDisabled}})),[O,s,b,h,x]);const G=React.useMemo((()=>({...O,marginRight:s,variant:b})),[O,s,b]);const V=a?H.groups.tabs:F.tabs;const J=a?H.groups.menuItems:F.menuItems;return jsxRuntime.jsxs(style.Root,{...D,...O,...X,layouts:layouts.LAYOUTS,palette:{backgroundColor:x.backgroundColor},ref:e=>{P.current=e,H.refs.root(e)},children:[jsxRuntime.jsxs(style.List,{role:"tablist","aria-orientation":"horizontal",onKeyDown:e=>{if(!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="tab"]')&&(constants.keyboardKeys.Home.validate(e.key)||constants.keyboardKeys.End.validate(e.key)||constants.keyboardKeys.ArrowRight.validate(e.key)||constants.keyboardKeys.ArrowLeft.validate(e.key))))return;const t=Array.from(e.currentTarget.querySelectorAll('[role="tab"]')).filter((e=>!e.closest('[aria-hidden="true"]')));t.length!==0&&(constants.keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):constants.keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(constants.keyboardKeys.ArrowRight.validate(e.key)||constants.keyboardKeys.ArrowLeft.validate(e.key))&&(e.preventDefault(),dom.navigateHorizontalList(e.key,document.activeElement,t,dom.SELECTORS_FOCUSABLE)))},children:[jsxRuntime.jsxs(style.Container,{ref:H.refs.container,children:[jsxRuntime.jsxs(style.TabsTrack,{children:[a||!l&&!i?null:jsxRuntime.jsxs(style.Floats,{hidden:_.left===!0||_.left===null,children:[l?jsxRuntime.jsx(style.Control,{ref:w,children:typeof f=='function'?f(U):jsxRuntime.jsx(IconButton.IconButton,{...U})}):null,i?jsxRuntime.jsx(style.ScrollFading,{}):null]}),jsxRuntime.jsx(style.TrackScrollable,{ref:e=>{E.current=e,H.refs.track(e)},tabIndex:-1,"data-ui-track-scrollable":!0,onFocus:e=>{if(!e.target.matches('[role="tab"]'))return;const t=e.currentTarget.getBoundingClientRect();const o=e.target.getBoundingClientRect();const r=Math.round(t.right);const s=Math.round(w.current&&_.left===!1?t.left+w.current.getBoundingClientRect().width:t.left);const n=Math.round(o.right+focus.focus.padding);const a=Math.round(o.left-focus.focus.padding);n>r?e.currentTarget.scrollBy(n-r,0):a<s&&e.currentTarget.scrollBy(a-s,0)},onScroll:e=>{a||N(e.currentTarget)},children:jsxRuntime.jsx(tabList.TabListTabsContext.Provider,{value:Y,children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:Z,children:a?V.map(((e,t)=>jsxRuntime.jsx(style.TabWrapper,{children:e},t))):V})})}),!a&&i?jsxRuntime.jsx(style.Floats,{hidden:_.right===!0||_.right===null,after:!0,children:jsxRuntime.jsx(style.ScrollFading,{after:!0})}):null]}),!a&&l?jsxRuntime.jsx(style.Control,{hidden:_.right===!0||_.right===null,children:typeof j=='function'?j(W):jsxRuntime.jsx(IconButton.IconButton,{...W})}):null,J.length>0&&jsxRuntime.jsx(style.Control,{ref:e=>{H.refs.control(e)},children:jsxRuntime.jsx(TabListMenuTab.TabListMenuTab,{...O,...K,role:"tab",variant:b,disabled:h,palette:x,menuItems:J,activationOnFocus:n,text:v,control:T})})]}),a?jsxRuntime.jsx(style.Hidden,{"aria-hidden":!0,children:jsxRuntime.jsx(style.TabsHidden,{children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:G,children:F.tabs.map(((e,t)=>jsxRuntime.jsx(style.TabWrapper,{ref:e=>{H.refs.tabHidden(t,e)},children:React.cloneElement(e,{ref:null,id:void 0,role:'none'})},t)))})})}):null]}),m?jsxRuntime.jsx(style.Addon,{...X,layouts:layouts.LAYOUTS_ADDON,ref:e=>{H.refs.addon(e)},children:m}):null,b==='underlined'&&jsxRuntime.jsx(style.DividerPositioned,{...X,layouts:layouts.LAYOUTS_DIVIDER,color:x.dividerColor})]})})),{displayName:'TabList',sizes:sizes.SIZES}),{Tab:TabListTab.TabListTab,Panel:TabListPanel.TabListPanel});exports.TabList=TabList;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var tabList=require('../../shared/context/tabList.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var focus=require('../../mixins/focus.js');var TabListPanel=require('./TabListPanel.js');var hooks=require('./hooks.js');var TabListMenuTab=require('./TabListMenuTab.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var TabListTab=require('../TabListTab/TabListTab.js');var index=require('../../icon-pack/src/icons/ChevronLeft/index.js');var index$1=require('../../icon-pack/src/icons/ChevronRight/index.js');var IconButton=require('../IconButton/IconButton.js');const TabList=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:r="m",layout:o="horizontal",gap:s=8,activationOnFocus:n=!1,tabsAutoGroup:a=!1,scrollControls:i=!1,scrollFading:l=!1,defaultActiveTab:c,activeTab:u,onActiveTabChange:d,variant:b,disabled:h,children:y,menuItems:m,addon:v,menuTabText:g,menuTabControl:x,scrollControlLeft:j,scrollControlRight:T,palette:f,sizeXXS:R,sizeXS:L,sizeS:C,sizeM:k,sizeL:p,sizeXL:S,layoutXXS:A,layoutXS:z,layoutS:B,layoutM:M,layoutL:I,layoutXL:q,...D}=e;const O=React.useMemo((()=>({size:r,sizeXXS:R,sizeXS:L,sizeS:C,sizeM:k,sizeL:p,sizeXL:S})),[r,R,L,C,k,p,S]);const X={layout:o,layoutXXS:A,layoutXS:z,layoutS:B,layoutM:M,layoutL:I,layoutXL:q};const P=React.useRef(null);const E=React.useRef(null);const w=React.useRef(null);React.useImperativeHandle(t,(()=>P.current),[]);const F=hooks.useTabListItems(y,m);const H=hooks.useTabListAutoGroup({enabled:a,tabList:F.tabs});const K=hooks.useTabList({defaultActiveTab:c,activeTab:u,onActiveTabChange:d,tabList:a?F.tabs:F.combined});const{scrollThresholds:_,setScrollThresholds:N}=useScrollThresholds.useScrollThresholds({enabled:!a,target:E});const U={...O,sizes:sizes.SIZES_SCROLL_CONTROL,icon:jsxRuntime.jsx(index.ChevronLeft,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!E.current||!w.current)return;const e=Math.round(E.current.getBoundingClientRect().left+w.current.getBoundingClientRect().width);const t=Array.from(E.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().left+focus.focus.padding)));const r=t.findIndex((t=>t>=e));[-1,0,1].includes(r)?E.current.scrollTo({top:0,left:0,behavior:'smooth'}):E.current.scrollBy({top:0,left:t[r-1]-e,behavior:'smooth'})}};const W={...O,sizes:sizes.SIZES_SCROLL_CONTROL,icon:jsxRuntime.jsx(index$1.ChevronRight,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!E.current)return;const e=Math.round(E.current.getBoundingClientRect().right);const t=Array.from(E.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().right+focus.focus.padding))).reverse();const r=t.findIndex((t=>t<=e));[-1,0,1].includes(r)?E.current.scrollTo({top:0,left:E.current.scrollWidth,behavior:'smooth'}):E.current.scrollBy({top:0,left:t[r-1]-e,behavior:'smooth'})}};const Y=React.useMemo((()=>({...K,activationOnFocus:n})),[K,n]);const Z=React.useMemo((()=>({...O,role:'tab',marginRight:s,variant:b,disabled:h,palette:{color:f.tabColor,colorHover:f.tabColorHover,colorActive:f.tabColorActive,colorDisabled:f.tabColorDisabled,colorActiveDisabled:f.tabColorActiveDisabled,backgroundColor:f.tabBackgroundColor,backgroundColorHover:f.tabBackgroundColorHover,backgroundColorActive:f.tabBackgroundColorActive,backgroundColorDisabled:f.tabBackgroundColorDisabled,backgroundColorActiveDisabled:f.tabBackgroundColorActiveDisabled}})),[O,s,b,h,f]);const G=React.useMemo((()=>({...O,marginRight:s,variant:b})),[O,s,b]);const $=a?H.groups.tabs:F.tabs;const V=a?H.groups.menuItems:F.menuItems;return jsxRuntime.jsxs(style.Root,{...D,...O,...X,layouts:layouts.LAYOUTS,palette:{backgroundColor:f.backgroundColor},ref:e=>{P.current=e,H.refs.root(e)},children:[jsxRuntime.jsxs(style.List,{role:"tablist","aria-orientation":"horizontal",onKeyDown:e=>{if(!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="tab"]')&&(constants.keyboardKeys.Home.validate(e.key)||constants.keyboardKeys.End.validate(e.key)||constants.keyboardKeys.ArrowRight.validate(e.key)||constants.keyboardKeys.ArrowLeft.validate(e.key))))return;const t=Array.from(e.currentTarget.querySelectorAll('[role="tab"]')).filter((e=>!e.closest('[aria-hidden="true"]')));t.length!==0&&(constants.keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):constants.keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(constants.keyboardKeys.ArrowRight.validate(e.key)||constants.keyboardKeys.ArrowLeft.validate(e.key))&&(e.preventDefault(),dom.navigateHorizontalList(e.key,document.activeElement,t,dom.SELECTORS_FOCUSABLE)))},children:[jsxRuntime.jsxs(style.Container,{ref:H.refs.container,children:[jsxRuntime.jsxs(style.TabsTrack,{children:[a||!i&&!l?null:jsxRuntime.jsxs(style.Floats,{hidden:_.left===!0||_.left===null,children:[i?jsxRuntime.jsx(style.Control,{ref:w,children:typeof j=='function'?j(U):jsxRuntime.jsx(IconButton.IconButton,{...U})}):null,l?jsxRuntime.jsx(style.ScrollFading,{}):null]}),jsxRuntime.jsx(style.TrackScrollable,{ref:e=>{E.current=e,H.refs.track(e)},tabIndex:-1,"data-ui-track-scrollable":!0,onFocus:e=>{if(!e.target.matches('[role="tab"]'))return;const t=e.currentTarget.getBoundingClientRect();const r=e.target.getBoundingClientRect();const o=Math.round(t.right);const s=Math.round(w.current&&_.left===!1?t.left+w.current.getBoundingClientRect().width:t.left);const n=Math.round(r.right+focus.focus.padding);const a=Math.round(r.left-focus.focus.padding);n>o?e.currentTarget.scrollBy(n-o,0):a<s&&e.currentTarget.scrollBy(a-s,0)},onScroll:e=>{a||N(e.currentTarget)},children:jsxRuntime.jsx(tabList.TabListTabsContext.Provider,{value:Y,children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:Z,children:a?$.map(((e,t)=>jsxRuntime.jsx(style.TabWrapper,{children:e},t))):$})})}),!a&&l?jsxRuntime.jsx(style.Floats,{hidden:_.right===!0||_.right===null,after:!0,children:jsxRuntime.jsx(style.ScrollFading,{after:!0})}):null]}),!a&&i?jsxRuntime.jsx(style.Control,{hidden:_.right===!0||_.right===null,children:typeof T=='function'?T(W):jsxRuntime.jsx(IconButton.IconButton,{...W})}):null,V.length>0&&jsxRuntime.jsx(style.Control,{ref:e=>{H.refs.control(e)},children:jsxRuntime.jsx(TabListMenuTab.TabListMenuTab,{...O,...K,role:"tab",variant:b,disabled:h,palette:f,menuItems:V,activationOnFocus:n,text:g,control:x})})]}),a?jsxRuntime.jsx(style.Hidden,{"aria-hidden":!0,children:jsxRuntime.jsx(style.TabsHidden,{children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:G,children:F.tabs.map(((e,t)=>jsxRuntime.jsx(style.TabWrapper,{ref:e=>{H.refs.tabHidden(t,e)},children:React.cloneElement(e,{ref:null,id:void 0,role:'none'})},t)))})})}):null]}),v?jsxRuntime.jsx(style.Addon,{...X,layouts:layouts.LAYOUTS_ADDON,ref:e=>{H.refs.addon(e)},children:v}):null,b==='underlined'&&jsxRuntime.jsx(style.DividerPositioned,{...X,layouts:layouts.LAYOUTS_DIVIDER,color:f.dividerColor})]})})),{displayName:'TabList',sizes:sizes.SIZES}),{Tab:TabListTab.TabListTab,Panel:TabListPanel.TabListPanel});exports.TabList=TabList;
 //# sourceMappingURL=TabList.js.map

package/components/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/TabList/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef, useImperativeHandle, cloneElement, useMemo } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { TabListTab } from 'components/TabListTab'\nimport { IconButton } from 'components/IconButton'\nimport type { IconButtonProps } from 'components/IconButton'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { keyboardKeys } from 'shared/constants'\nimport { navigateHorizontalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport { focus } from 'mixins/focus'\nimport { TabListPanel } from './TabListPanel'\nimport { useTabList, useTabListItems, useTabListAutoGroup } from './hooks'\nimport { TabListMenuTab } from './TabListMenuTab'\nimport { SIZES, SIZES_SCROLL_CONTROL } from './sizes'\nimport { LAYOUTS, LAYOUTS_DIVIDER, LAYOUTS_ADDON } from './layouts'\nimport type { TabListProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabList'\n\n/**\n *\n * Компонент для создания группы табов и ассоциированных с ними панелей с контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabList: React.ForwardRefExoticComponent<TabListProps> & {\n  Tab: typeof TabListTab\n  Panel: typeof TabListPanel\n} = Object.assign(\n  withMergedProps<TabListProps, HTMLDivElement>(\n    forwardRef<HTMLDivElement, MergedProps<TabListProps>>((props, forwardedRef) => {\n      const {\n        size = 'm',\n        layout = 'horizontal',\n        gap = 8,\n        activationOnFocus = false,\n        tabsAutoGroup = false,\n        scrollControls = false,\n        scrollFading = false,\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        variant,\n        disabled,\n        children,\n        menuItems: menuItemsProp,\n        addon,\n        menuTabText,\n        menuTabControl,\n        scrollControlLeft,\n        scrollControlRight,\n        palette,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n        ...restProps\n      } = props\n\n      const sizeProps = useMemo(\n        () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n        [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n      )\n\n      const layoutProps = {\n        layout,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n      }\n\n      const rootRef = useRef<HTMLDivElement | null>(null)\n      const tabsTrackRef = useRef<HTMLDivElement | null>(null)\n      const scrollControlRef = useRef<HTMLDivElement | null>(null)\n\n      useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement, [])\n\n      const tabListItems = useTabListItems(children, menuItemsProp)\n\n      const autoGroupMode = useTabListAutoGroup({\n        enabled: tabsAutoGroup,\n        tabList: tabListItems.tabs,\n      })\n\n      const tabList = useTabList({\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        tabList: tabsAutoGroup ? tabListItems.tabs : tabListItems.combined,\n      })\n\n      const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n        enabled: !tabsAutoGroup,\n        target: tabsTrackRef,\n      })\n\n      const scrollControlLeftProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: 'chevronLeft',\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current || !scrollControlRef.current) {\n            return\n          }\n\n          const trackLeft = Math.round(\n            tabsTrackRef.current.getBoundingClientRect().left + scrollControlRef.current.getBoundingClientRect().width\n          )\n          const tabsLeft = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]')).map((tab) =>\n            Math.round(tab.getBoundingClientRect().left + focus.padding)\n          )\n\n          const idx = tabsLeft.findIndex((tabLeft) => tabLeft >= trackLeft)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsLeft[idx - 1] - trackLeft,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const scrollControlRightProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: 'chevronRight',\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current) {\n            return\n          }\n\n          const trackRight = Math.round(tabsTrackRef.current.getBoundingClientRect().right)\n          const tabsRight = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]'))\n            .map((tab) => Math.round(tab.getBoundingClientRect().right + focus.padding))\n            .reverse()\n\n          const idx = tabsRight.findIndex((tabRight) => tabRight <= trackRight)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: tabsTrackRef.current.scrollWidth, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsRight[idx - 1] - trackRight,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const controlsContextProps = useMemo(() => ({ ...tabList, activationOnFocus }), [tabList, activationOnFocus])\n\n      const tabsContextProps = useMemo(\n        () => ({\n          ...sizeProps,\n          role: 'tab',\n          marginRight: gap,\n          variant,\n          disabled,\n          palette: {\n            color: palette.tabColor,\n            colorHover: palette.tabColorHover,\n            colorActive: palette.tabColorActive,\n            colorDisabled: palette.tabColorDisabled,\n            colorActiveDisabled: palette.tabColorActiveDisabled,\n            backgroundColor: palette.tabBackgroundColor,\n            backgroundColorHover: palette.tabBackgroundColorHover,\n            backgroundColorActive: palette.tabBackgroundColorActive,\n            backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n            backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n          },\n        }),\n        [sizeProps, gap, variant, disabled, palette]\n      )\n\n      const hiddenTabsContextProps = useMemo(\n        () => ({ ...sizeProps, marginRight: gap, variant }),\n        [sizeProps, gap, variant]\n      )\n\n      const tabs = tabsAutoGroup ? autoGroupMode.groups.tabs : tabListItems.tabs\n      const menuItems = tabsAutoGroup ? autoGroupMode.groups.menuItems : tabListItems.menuItems\n\n      return (\n        <Styled.Root\n          {...restProps}\n          {...sizeProps}\n          {...layoutProps}\n          layouts={LAYOUTS}\n          palette={{\n            backgroundColor: palette.backgroundColor,\n          }}\n          ref={(node) => {\n            rootRef.current = node\n            autoGroupMode.refs.root(node)\n          }}\n        >\n          <Styled.List\n            role='tablist'\n            aria-orientation='horizontal'\n            onKeyDown={(evt) => {\n              if (\n                !(document.activeElement instanceof HTMLElement) ||\n                !document.activeElement.matches('[role=\"tab\"]') ||\n                (!keyboardKeys.Home.validate(evt.key) &&\n                  !keyboardKeys.End.validate(evt.key) &&\n                  !keyboardKeys.ArrowRight.validate(evt.key) &&\n                  !keyboardKeys.ArrowLeft.validate(evt.key))\n              ) {\n                return\n              }\n\n              const tabListTabs = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n                (tab) => !tab.closest('[aria-hidden=\"true\"]')\n              )\n\n              if (tabListTabs.length === 0) return\n\n              if (keyboardKeys.Home.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[0].focus()\n              } else if (keyboardKeys.End.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[tabListTabs.length - 1].focus()\n              } else if (keyboardKeys.ArrowRight.validate(evt.key) || keyboardKeys.ArrowLeft.validate(evt.key)) {\n                evt.preventDefault()\n                navigateHorizontalList(evt.key, document.activeElement, tabListTabs, SELECTORS_FOCUSABLE)\n              }\n            }}\n          >\n            <Styled.Container ref={autoGroupMode.refs.container}>\n              <Styled.TabsTrack>\n                {!tabsAutoGroup && (scrollControls || scrollFading) ? (\n                  <Styled.Floats hidden={scrollThresholds.left === true || scrollThresholds.left === null}>\n                    {scrollControls ? (\n                      <Styled.Control ref={scrollControlRef}>\n                        {typeof scrollControlLeft === 'function' ? (\n                          scrollControlLeft(scrollControlLeftProps)\n                        ) : (\n                          <IconButton {...scrollControlLeftProps} />\n                        )}\n                      </Styled.Control>\n                    ) : null}\n                    {scrollFading ? <Styled.ScrollFading /> : null}\n                  </Styled.Floats>\n                ) : null}\n                <Styled.TrackScrollable\n                  ref={(node) => {\n                    tabsTrackRef.current = node\n                    autoGroupMode.refs.track(node)\n                  }}\n                  tabIndex={-1}\n                  data-ui-track-scrollable\n                  onFocus={(evt) => {\n                    if (!evt.target.matches('[role=\"tab\"]')) {\n                      return\n                    }\n\n                    const trackRect = evt.currentTarget.getBoundingClientRect()\n                    const tabRect = evt.target.getBoundingClientRect()\n\n                    const trackRight = Math.round(trackRect.right)\n                    const trackLeft = Math.round(\n                      scrollControlRef.current && scrollThresholds.left === false\n                        ? trackRect.left + scrollControlRef.current.getBoundingClientRect().width\n                        : trackRect.left\n                    )\n\n                    const tabRight = Math.round(tabRect.right + focus.padding)\n                    const tabLeft = Math.round(tabRect.left - focus.padding)\n\n                    if (tabRight > trackRight) {\n                      evt.currentTarget.scrollBy(tabRight - trackRight, 0)\n                    } else if (tabLeft < trackLeft) {\n                      evt.currentTarget.scrollBy(tabLeft - trackLeft, 0)\n                    }\n                  }}\n                  onScroll={(evt) => {\n                    if (!tabsAutoGroup) {\n                      setScrollThresholds(evt.currentTarget)\n                    }\n                  }}\n                >\n                  <TabListTabsContext.Provider value={controlsContextProps}>\n                    <TabListPropsContext.Provider value={tabsContextProps}>\n                      {tabsAutoGroup\n                        ? tabs.map((tab, idx) => <Styled.TabWrapper key={idx}>{tab}</Styled.TabWrapper>)\n                        : tabs}\n                    </TabListPropsContext.Provider>\n                  </TabListTabsContext.Provider>\n                </Styled.TrackScrollable>\n                {!tabsAutoGroup && scrollFading ? (\n                  <Styled.Floats hidden={scrollThresholds.right === true || scrollThresholds.right === null} after>\n                    <Styled.ScrollFading after />\n                  </Styled.Floats>\n                ) : null}\n              </Styled.TabsTrack>\n              {!tabsAutoGroup && scrollControls ? (\n                <Styled.Control hidden={scrollThresholds.right === true || scrollThresholds.right === null}>\n                  {typeof scrollControlRight === 'function' ? (\n                    scrollControlRight(scrollControlRightProps)\n                  ) : (\n                    <IconButton {...scrollControlRightProps} />\n                  )}\n                </Styled.Control>\n              ) : null}\n              {menuItems.length > 0 && (\n                <Styled.Control\n                  ref={(node) => {\n                    autoGroupMode.refs.control(node)\n                  }}\n                >\n                  <TabListMenuTab\n                    {...sizeProps}\n                    {...tabList}\n                    role='tab'\n                    variant={variant}\n                    disabled={disabled}\n                    palette={palette}\n                    menuItems={menuItems}\n                    activationOnFocus={activationOnFocus}\n                    text={menuTabText}\n                    control={menuTabControl}\n                  />\n                </Styled.Control>\n              )}\n            </Styled.Container>\n            {tabsAutoGroup ? (\n              <Styled.Hidden aria-hidden>\n                <Styled.TabsHidden>\n                  <TabListPropsContext.Provider value={hiddenTabsContextProps}>\n                    {tabListItems.tabs.map((tab, idx) => (\n                      <Styled.TabWrapper\n                        key={idx}\n                        ref={(node) => {\n                          autoGroupMode.refs.tabHidden(idx, node)\n                        }}\n                      >\n                        {cloneElement(tab, { ref: null, id: undefined, role: 'none' })}\n                      </Styled.TabWrapper>\n                    ))}\n                  </TabListPropsContext.Provider>\n                </Styled.TabsHidden>\n              </Styled.Hidden>\n            ) : null}\n          </Styled.List>\n          {addon ? (\n            <Styled.Addon\n              {...layoutProps}\n              layouts={LAYOUTS_ADDON}\n              ref={(node) => {\n                autoGroupMode.refs.addon(node)\n              }}\n            >\n              {addon}\n            </Styled.Addon>\n          ) : null}\n          {variant === 'underlined' && (\n            <Styled.DividerPositioned {...layoutProps} layouts={LAYOUTS_DIVIDER} color={palette.dividerColor} />\n          )}\n        </Styled.Root>\n      )\n    }),\n    {\n      displayName: COMPONENT_NAME,\n      sizes: SIZES,\n    }\n  ),\n  {\n    Tab: TabListTab,\n    Panel: TabListPanel,\n  }\n)\n\nexport { TabList }\n"],"names":["TabList","Object","assign","withMergedProps","forwardRef","props","forwardedRef","size","layout","gap","activationOnFocus","tabsAutoGroup","scrollControls","scrollFading","defaultActiveTab","activeTab","onActiveTabChange","variant","disabled","children","menuItems","menuItemsProp","addon","menuTabText","menuTabControl","scrollControlLeft","scrollControlRight","palette","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","restProps","sizeProps","useMemo","layoutProps","rootRef","useRef","tabsTrackRef","scrollControlRef","useImperativeHandle","current","tabListItems","useTabListItems","autoGroupMode","useTabListAutoGroup","enabled","tabList","tabs","useTabList","combined","scrollThresholds","setScrollThresholds","useScrollThresholds","target","scrollControlLeftProps","sizes","SIZES_SCROLL_CONTROL","icon","tabIndex","onFocus","evt","currentTarget","blur","onClick","trackLeft","Math","round","getBoundingClientRect","left","width","tabsLeft","Array","from","querySelectorAll","map","tab","focus","padding","idx","findIndex","tabLeft","includes","scrollTo","top","behavior","scrollBy","scrollControlRightProps","trackRight","right","tabsRight","reverse","tabRight","scrollWidth","controlsContextProps","tabsContextProps","role","marginRight","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","hiddenTabsContextProps","groups","_jsxs","Styled","layouts","LAYOUTS","ref","node","refs","root","jsxs","onKeyDown","document","activeElement","HTMLElement","matches","keyboardKeys","Home","validate","key","End","ArrowRight","ArrowLeft","tabListTabs","filter","closest","length","preventDefault","navigateHorizontalList","SELECTORS_FOCUSABLE","container","hidden","_jsx","jsx","IconButton","track","trackRect","tabRect","onScroll","TabListTabsContext","Provider","value","TabListPropsContext","after","control","TabListMenuTab","text","tabHidden","cloneElement","id","undefined","LAYOUTS_ADDON","LAYOUTS_DIVIDER","dividerColor","displayName","SIZES","Tab","TabListTab","Panel","TabListPanel"],"mappings":"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"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/TabList/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef, useImperativeHandle, cloneElement, useMemo } from 'react'\nimport { ChevronLeft, ChevronRight } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { TabListTab } from 'components/TabListTab'\nimport { IconButton } from 'components/IconButton'\nimport type { IconButtonProps } from 'components/IconButton'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { keyboardKeys } from 'shared/constants'\nimport { navigateHorizontalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport { focus } from 'mixins/focus'\nimport { TabListPanel } from './TabListPanel'\nimport { useTabList, useTabListItems, useTabListAutoGroup } from './hooks'\nimport { TabListMenuTab } from './TabListMenuTab'\nimport { SIZES, SIZES_SCROLL_CONTROL } from './sizes'\nimport { LAYOUTS, LAYOUTS_DIVIDER, LAYOUTS_ADDON } from './layouts'\nimport type { TabListProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabList'\n\n/**\n *\n * Компонент для создания группы табов и ассоциированных с ними панелей с контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabList: React.ForwardRefExoticComponent<TabListProps> & {\n  Tab: typeof TabListTab\n  Panel: typeof TabListPanel\n} = Object.assign(\n  withMergedProps<TabListProps, HTMLDivElement>(\n    forwardRef<HTMLDivElement, MergedProps<TabListProps>>((props, forwardedRef) => {\n      const {\n        size = 'm',\n        layout = 'horizontal',\n        gap = 8,\n        activationOnFocus = false,\n        tabsAutoGroup = false,\n        scrollControls = false,\n        scrollFading = false,\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        variant,\n        disabled,\n        children,\n        menuItems: menuItemsProp,\n        addon,\n        menuTabText,\n        menuTabControl,\n        scrollControlLeft,\n        scrollControlRight,\n        palette,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n        ...restProps\n      } = props\n\n      const sizeProps = useMemo(\n        () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n        [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n      )\n\n      const layoutProps = {\n        layout,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n      }\n\n      const rootRef = useRef<HTMLDivElement | null>(null)\n      const tabsTrackRef = useRef<HTMLDivElement | null>(null)\n      const scrollControlRef = useRef<HTMLDivElement | null>(null)\n\n      useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement, [])\n\n      const tabListItems = useTabListItems(children, menuItemsProp)\n\n      const autoGroupMode = useTabListAutoGroup({\n        enabled: tabsAutoGroup,\n        tabList: tabListItems.tabs,\n      })\n\n      const tabList = useTabList({\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        tabList: tabsAutoGroup ? tabListItems.tabs : tabListItems.combined,\n      })\n\n      const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n        enabled: !tabsAutoGroup,\n        target: tabsTrackRef,\n      })\n\n      const scrollControlLeftProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: <ChevronLeft />,\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current || !scrollControlRef.current) {\n            return\n          }\n\n          const trackLeft = Math.round(\n            tabsTrackRef.current.getBoundingClientRect().left + scrollControlRef.current.getBoundingClientRect().width\n          )\n          const tabsLeft = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]')).map((tab) =>\n            Math.round(tab.getBoundingClientRect().left + focus.padding)\n          )\n\n          const idx = tabsLeft.findIndex((tabLeft) => tabLeft >= trackLeft)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsLeft[idx - 1] - trackLeft,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const scrollControlRightProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: <ChevronRight />,\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current) {\n            return\n          }\n\n          const trackRight = Math.round(tabsTrackRef.current.getBoundingClientRect().right)\n          const tabsRight = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]'))\n            .map((tab) => Math.round(tab.getBoundingClientRect().right + focus.padding))\n            .reverse()\n\n          const idx = tabsRight.findIndex((tabRight) => tabRight <= trackRight)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: tabsTrackRef.current.scrollWidth, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsRight[idx - 1] - trackRight,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const controlsContextProps = useMemo(() => ({ ...tabList, activationOnFocus }), [tabList, activationOnFocus])\n\n      const tabsContextProps = useMemo(\n        () => ({\n          ...sizeProps,\n          role: 'tab',\n          marginRight: gap,\n          variant,\n          disabled,\n          palette: {\n            color: palette.tabColor,\n            colorHover: palette.tabColorHover,\n            colorActive: palette.tabColorActive,\n            colorDisabled: palette.tabColorDisabled,\n            colorActiveDisabled: palette.tabColorActiveDisabled,\n            backgroundColor: palette.tabBackgroundColor,\n            backgroundColorHover: palette.tabBackgroundColorHover,\n            backgroundColorActive: palette.tabBackgroundColorActive,\n            backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n            backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n          },\n        }),\n        [sizeProps, gap, variant, disabled, palette]\n      )\n\n      const hiddenTabsContextProps = useMemo(\n        () => ({ ...sizeProps, marginRight: gap, variant }),\n        [sizeProps, gap, variant]\n      )\n\n      const tabs = tabsAutoGroup ? autoGroupMode.groups.tabs : tabListItems.tabs\n      const menuItems = tabsAutoGroup ? autoGroupMode.groups.menuItems : tabListItems.menuItems\n\n      return (\n        <Styled.Root\n          {...restProps}\n          {...sizeProps}\n          {...layoutProps}\n          layouts={LAYOUTS}\n          palette={{\n            backgroundColor: palette.backgroundColor,\n          }}\n          ref={(node) => {\n            rootRef.current = node\n            autoGroupMode.refs.root(node)\n          }}\n        >\n          <Styled.List\n            role='tablist'\n            aria-orientation='horizontal'\n            onKeyDown={(evt) => {\n              if (\n                !(document.activeElement instanceof HTMLElement) ||\n                !document.activeElement.matches('[role=\"tab\"]') ||\n                (!keyboardKeys.Home.validate(evt.key) &&\n                  !keyboardKeys.End.validate(evt.key) &&\n                  !keyboardKeys.ArrowRight.validate(evt.key) &&\n                  !keyboardKeys.ArrowLeft.validate(evt.key))\n              ) {\n                return\n              }\n\n              const tabListTabs = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n                (tab) => !tab.closest('[aria-hidden=\"true\"]')\n              )\n\n              if (tabListTabs.length === 0) return\n\n              if (keyboardKeys.Home.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[0].focus()\n              } else if (keyboardKeys.End.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[tabListTabs.length - 1].focus()\n              } else if (keyboardKeys.ArrowRight.validate(evt.key) || keyboardKeys.ArrowLeft.validate(evt.key)) {\n                evt.preventDefault()\n                navigateHorizontalList(evt.key, document.activeElement, tabListTabs, SELECTORS_FOCUSABLE)\n              }\n            }}\n          >\n            <Styled.Container ref={autoGroupMode.refs.container}>\n              <Styled.TabsTrack>\n                {!tabsAutoGroup && (scrollControls || scrollFading) ? (\n                  <Styled.Floats hidden={scrollThresholds.left === true || scrollThresholds.left === null}>\n                    {scrollControls ? (\n                      <Styled.Control ref={scrollControlRef}>\n                        {typeof scrollControlLeft === 'function' ? (\n                          scrollControlLeft(scrollControlLeftProps)\n                        ) : (\n                          <IconButton {...scrollControlLeftProps} />\n                        )}\n                      </Styled.Control>\n                    ) : null}\n                    {scrollFading ? <Styled.ScrollFading /> : null}\n                  </Styled.Floats>\n                ) : null}\n                <Styled.TrackScrollable\n                  ref={(node) => {\n                    tabsTrackRef.current = node\n                    autoGroupMode.refs.track(node)\n                  }}\n                  tabIndex={-1}\n                  data-ui-track-scrollable\n                  onFocus={(evt) => {\n                    if (!evt.target.matches('[role=\"tab\"]')) {\n                      return\n                    }\n\n                    const trackRect = evt.currentTarget.getBoundingClientRect()\n                    const tabRect = evt.target.getBoundingClientRect()\n\n                    const trackRight = Math.round(trackRect.right)\n                    const trackLeft = Math.round(\n                      scrollControlRef.current && scrollThresholds.left === false\n                        ? trackRect.left + scrollControlRef.current.getBoundingClientRect().width\n                        : trackRect.left\n                    )\n\n                    const tabRight = Math.round(tabRect.right + focus.padding)\n                    const tabLeft = Math.round(tabRect.left - focus.padding)\n\n                    if (tabRight > trackRight) {\n                      evt.currentTarget.scrollBy(tabRight - trackRight, 0)\n                    } else if (tabLeft < trackLeft) {\n                      evt.currentTarget.scrollBy(tabLeft - trackLeft, 0)\n                    }\n                  }}\n                  onScroll={(evt) => {\n                    if (!tabsAutoGroup) {\n                      setScrollThresholds(evt.currentTarget)\n                    }\n                  }}\n                >\n                  <TabListTabsContext.Provider value={controlsContextProps}>\n                    <TabListPropsContext.Provider value={tabsContextProps}>\n                      {tabsAutoGroup\n                        ? tabs.map((tab, idx) => <Styled.TabWrapper key={idx}>{tab}</Styled.TabWrapper>)\n                        : tabs}\n                    </TabListPropsContext.Provider>\n                  </TabListTabsContext.Provider>\n                </Styled.TrackScrollable>\n                {!tabsAutoGroup && scrollFading ? (\n                  <Styled.Floats hidden={scrollThresholds.right === true || scrollThresholds.right === null} after>\n                    <Styled.ScrollFading after />\n                  </Styled.Floats>\n                ) : null}\n              </Styled.TabsTrack>\n              {!tabsAutoGroup && scrollControls ? (\n                <Styled.Control hidden={scrollThresholds.right === true || scrollThresholds.right === null}>\n                  {typeof scrollControlRight === 'function' ? (\n                    scrollControlRight(scrollControlRightProps)\n                  ) : (\n                    <IconButton {...scrollControlRightProps} />\n                  )}\n                </Styled.Control>\n              ) : null}\n              {menuItems.length > 0 && (\n                <Styled.Control\n                  ref={(node) => {\n                    autoGroupMode.refs.control(node)\n                  }}\n                >\n                  <TabListMenuTab\n                    {...sizeProps}\n                    {...tabList}\n                    role='tab'\n                    variant={variant}\n                    disabled={disabled}\n                    palette={palette}\n                    menuItems={menuItems}\n                    activationOnFocus={activationOnFocus}\n                    text={menuTabText}\n                    control={menuTabControl}\n                  />\n                </Styled.Control>\n              )}\n            </Styled.Container>\n            {tabsAutoGroup ? (\n              <Styled.Hidden aria-hidden>\n                <Styled.TabsHidden>\n                  <TabListPropsContext.Provider value={hiddenTabsContextProps}>\n                    {tabListItems.tabs.map((tab, idx) => (\n                      <Styled.TabWrapper\n                        key={idx}\n                        ref={(node) => {\n                          autoGroupMode.refs.tabHidden(idx, node)\n                        }}\n                      >\n                        {cloneElement(tab, { ref: null, id: undefined, role: 'none' })}\n                      </Styled.TabWrapper>\n                    ))}\n                  </TabListPropsContext.Provider>\n                </Styled.TabsHidden>\n              </Styled.Hidden>\n            ) : null}\n          </Styled.List>\n          {addon ? (\n            <Styled.Addon\n              {...layoutProps}\n              layouts={LAYOUTS_ADDON}\n              ref={(node) => {\n                autoGroupMode.refs.addon(node)\n              }}\n            >\n              {addon}\n            </Styled.Addon>\n          ) : null}\n          {variant === 'underlined' && (\n            <Styled.DividerPositioned {...layoutProps} layouts={LAYOUTS_DIVIDER} color={palette.dividerColor} />\n          )}\n        </Styled.Root>\n      )\n    }),\n    {\n      displayName: COMPONENT_NAME,\n      sizes: SIZES,\n    }\n  ),\n  {\n    Tab: TabListTab,\n    Panel: TabListPanel,\n  }\n)\n\nexport { TabList }\n"],"names":["TabList","Object","assign","withMergedProps","forwardRef","props","forwardedRef","size","layout","gap","activationOnFocus","tabsAutoGroup","scrollControls","scrollFading","defaultActiveTab","activeTab","onActiveTabChange","variant","disabled","children","menuItems","menuItemsProp","addon","menuTabText","menuTabControl","scrollControlLeft","scrollControlRight","palette","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","restProps","sizeProps","useMemo","layoutProps","rootRef","useRef","tabsTrackRef","scrollControlRef","useImperativeHandle","current","tabListItems","useTabListItems","autoGroupMode","useTabListAutoGroup","enabled","tabList","tabs","useTabList","combined","scrollThresholds","setScrollThresholds","useScrollThresholds","target","scrollControlLeftProps","sizes","SIZES_SCROLL_CONTROL","icon","_jsx","ChevronLeft","tabIndex","onFocus","evt","currentTarget","blur","onClick","trackLeft","Math","round","getBoundingClientRect","left","width","tabsLeft","Array","from","querySelectorAll","map","tab","focus","padding","idx","findIndex","tabLeft","includes","scrollTo","top","behavior","scrollBy","scrollControlRightProps","ChevronRight","trackRight","right","tabsRight","reverse","tabRight","scrollWidth","controlsContextProps","tabsContextProps","role","marginRight","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","hiddenTabsContextProps","groups","_jsxs","Styled","layouts","LAYOUTS","ref","node","refs","root","jsxs","onKeyDown","document","activeElement","HTMLElement","matches","keyboardKeys","Home","validate","key","End","ArrowRight","ArrowLeft","tabListTabs","filter","closest","length","preventDefault","navigateHorizontalList","SELECTORS_FOCUSABLE","container","hidden","jsx","IconButton","track","trackRect","tabRect","onScroll","TabListTabsContext","Provider","value","TabListPropsContext","after","control","TabListMenuTab","text","tabHidden","cloneElement","id","undefined","LAYOUTS_ADDON","LAYOUTS_DIVIDER","dividerColor","displayName","SIZES","Tab","TabListTab","Panel","TabListPanel"],"mappings":"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"}