@foxford/ui 2.91.0-beta-c135980-20260113 → 2.91.0-beta-7cc2222-20260116

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/components/Dialog/Dialog.js +1 -1
  2. package/components/Dialog/Dialog.js.map +1 -1
  3. package/components/Dialog/Dialog.mjs +1 -1
  4. package/components/Dialog/Dialog.mjs.map +1 -1
  5. package/components/FormInputLabel/style.js +1 -1
  6. package/components/FormInputLabel/style.js.map +1 -1
  7. package/components/FormInputLabel/style.mjs +1 -1
  8. package/components/FormInputLabel/style.mjs.map +1 -1
  9. package/components/Notification/Notification.js +1 -1
  10. package/components/Notification/Notification.js.map +1 -1
  11. package/components/Notification/Notification.mjs +1 -1
  12. package/components/Notification/Notification.mjs.map +1 -1
  13. package/components/Notification/constants.js +2 -0
  14. package/components/Notification/constants.js.map +1 -0
  15. package/components/Notification/constants.mjs +2 -0
  16. package/components/Notification/constants.mjs.map +1 -0
  17. package/components/Notification/style.js +1 -1
  18. package/components/Notification/style.js.map +1 -1
  19. package/components/Notification/style.mjs +1 -1
  20. package/components/Notification/style.mjs.map +1 -1
  21. package/dts/index.d.ts +225 -363
  22. package/hooks/useScrollLock.js +2 -0
  23. package/hooks/useScrollLock.js.map +1 -0
  24. package/hooks/useScrollLock.mjs +2 -0
  25. package/hooks/useScrollLock.mjs.map +1 -0
  26. package/icon-pack/src/icons/CheckCircle/index.js +2 -0
  27. package/icon-pack/src/icons/CheckCircle/index.js.map +1 -0
  28. package/icon-pack/src/icons/CheckCircle/index.mjs +2 -0
  29. package/icon-pack/src/icons/CheckCircle/index.mjs.map +1 -0
  30. package/icon-pack/src/icons/CloseCirlce/index.js +2 -0
  31. package/icon-pack/src/icons/CloseCirlce/index.js.map +1 -0
  32. package/icon-pack/src/icons/CloseCirlce/index.mjs +2 -0
  33. package/icon-pack/src/icons/CloseCirlce/index.mjs.map +1 -0
  34. package/icon-pack/src/icons/WarningTriangle/index.js +2 -0
  35. package/icon-pack/src/icons/WarningTriangle/index.js.map +1 -0
  36. package/icon-pack/src/icons/WarningTriangle/index.mjs +2 -0
  37. package/icon-pack/src/icons/WarningTriangle/index.mjs.map +1 -0
  38. package/index.js +1 -1
  39. package/index.mjs +1 -1
  40. package/package.json +2 -2
  41. package/components/Notification/layouts.js +0 -2
  42. package/components/Notification/layouts.js.map +0 -1
  43. package/components/Notification/layouts.mjs +0 -2
  44. package/components/Notification/layouts.mjs.map +0 -1
  45. package/components/Notification/sizes.js +0 -2
  46. package/components/Notification/sizes.js.map +0 -1
  47. package/components/Notification/sizes.mjs +0 -2
  48. package/components/Notification/sizes.mjs.map +0 -1
@@ -1,2 +1,2 @@
1
- 'use strict';var React=require('react');var ReactModal=require('react-modal');var withMergedProps=require('../../hocs/withMergedProps.js');var withTranslation=require('../../hocs/withTranslation.js');var misc=require('../../shared/utils/misc.js');var sizes=require('./sizes.js');var positions=require('./positions.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var DialogComponent=require('../DialogComponent/DialogComponent.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var ReactModal__default=_interopDefault(ReactModal);const TranslationDialogComponent=withTranslation.withTranslation(React.forwardRef(((e,o)=>{const{positions:s={},translated:n,...a}=e;const r=n?{}:misc.deepmerge(positions.POSITIONS,s);return jsxRuntime.jsx(style.PositionedDialogComponent,{...a,positions:r,ref:o})})));const Dialog=Object.assign(withMergedProps.withMergedProps((e=>{const{size:o="s",position:s="center",role:n="dialog",open:a,preventScrollAfterClose:r,closeTimeoutMS:l,portalClassName:t,className:i,bodyOpenClassName:c,htmlOpenClassName:u,overlayClassName:p,shouldCloseOnOverlayClick:d,shouldCloseOnEsc:C,shouldReturnFocusAfterClose:m,parentSelector:g,overlayRef:D,contentRef:f,palette:v,overlayBlur:y,overlayDisabled:M,zIndex:h,onAfterOpen:w,onAfterClose:N,onRequestClose:R,...O}=e;const j=O.draggable||M;return jsxRuntime.jsx(ReactModal__default.default,{isOpen:a,ariaHideApp:!1,preventScroll:r,closeTimeoutMS:l,portalClassName:t,className:i,bodyOpenClassName:c,htmlOpenClassName:u,overlayClassName:p,shouldCloseOnOverlayClick:d,shouldCloseOnEsc:C,shouldReturnFocusAfterClose:m,parentSelector:g,overlayRef:D,contentRef:f,onAfterOpen:w,onAfterClose:N,onRequestClose:R,contentElement:e=>{const{ref:a,className:r,tabIndex:l,onKeyDown:t,onMouseDown:i,onMouseUp:c,onClick:u}=e;return jsxRuntime.jsx(TranslationDialogComponent,{...O,ref:a,size:o,role:n,className:r,tabIndex:l,position:s,"aria-modal":!O.draggable&&!M,palette:{color:v.color,backgroundColor:v.backgroundColor,shadowColor:v.shadowColor},zIndex:j?h:void 0,onKeyDown:e=>{O.onKeyDown&&O.onKeyDown(e),t&&t(e)},onMouseDown:e=>{O.onMouseDown&&O.onMouseDown(e),i&&i(e)},onMouseUp:e=>{O.onMouseUp&&O.onMouseUp(e),c&&c(e)},onClick:e=>{O.onClick&&O.onClick(e),u&&u(e)}})},overlayElement:(e,o)=>{const{ref:s,className:n,onClick:a,onMouseDown:r}=e;return j?o:jsxRuntime.jsx(style.DialogOverlay,{ref:s,className:n,blur:y,palette:{backgroundColor:v.overlayBackgroundColor},zIndex:h,onClick:a,onMouseDown:r,children:o})}})}),{sizes:e=>e.fancy?sizes.SIZES_FANCY:sizes.SIZES,displayName:"Dialog"}),{Component:DialogComponent.DialogComponent});exports.COMPONENT_NAME="Dialog",exports.Dialog=Dialog;
1
+ 'use strict';var React=require('react');var ReactModal=require('react-modal');var withMergedProps=require('../../hocs/withMergedProps.js');var withTranslation=require('../../hocs/withTranslation.js');var misc=require('../../shared/utils/misc.js');var useScrollLock=require('../../hooks/useScrollLock.js');var sizes=require('./sizes.js');var positions=require('./positions.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var DialogComponent=require('../DialogComponent/DialogComponent.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var ReactModal__default=_interopDefault(ReactModal);const TranslationDialogComponent=withTranslation.withTranslation(React.forwardRef(((e,o)=>{const{positions:s={},translated:n,...l}=e;const r=n?{}:misc.deepmerge(positions.POSITIONS,s);return jsxRuntime.jsx(style.PositionedDialogComponent,{...l,positions:r,ref:o})})));const Dialog=Object.assign(withMergedProps.withMergedProps((e=>{const{size:o="s",position:s="center",role:n="dialog",open:l,preventScrollAfterClose:r,closeTimeoutMS:a,portalClassName:t,className:i,bodyOpenClassName:c,htmlOpenClassName:u,overlayClassName:p,shouldCloseOnOverlayClick:d,shouldCloseOnEsc:C,shouldReturnFocusAfterClose:m,parentSelector:g,overlayRef:D,contentRef:f,palette:v,overlayBlur:h,overlayDisabled:y,zIndex:M,scrollLock:w,onAfterOpen:N,onAfterClose:R,onRequestClose:j,...k}=e;const O=k.draggable||y;return useScrollLock.useScrollLock(w||{locked:!1}),jsxRuntime.jsx(ReactModal__default.default,{isOpen:l,ariaHideApp:!1,preventScroll:r,closeTimeoutMS:a,portalClassName:t,className:i,bodyOpenClassName:c,htmlOpenClassName:u,overlayClassName:p,shouldCloseOnOverlayClick:d,shouldCloseOnEsc:C,shouldReturnFocusAfterClose:m,parentSelector:g,overlayRef:D,contentRef:f,onAfterOpen:N,onAfterClose:R,onRequestClose:j,contentElement:e=>{const{ref:l,className:r,tabIndex:a,onKeyDown:t,onMouseDown:i,onMouseUp:c,onClick:u}=e;return jsxRuntime.jsx(TranslationDialogComponent,{...k,ref:l,size:o,role:n,className:r,tabIndex:a,position:s,"aria-modal":!k.draggable&&!y,palette:{color:v.color,backgroundColor:v.backgroundColor,shadowColor:v.shadowColor},zIndex:O?M:void 0,onKeyDown:e=>{k.onKeyDown&&k.onKeyDown(e),t&&t(e)},onMouseDown:e=>{k.onMouseDown&&k.onMouseDown(e),i&&i(e)},onMouseUp:e=>{k.onMouseUp&&k.onMouseUp(e),c&&c(e)},onClick:e=>{k.onClick&&k.onClick(e),u&&u(e)}})},overlayElement:(e,o)=>{const{ref:s,className:n,onClick:l,onMouseDown:r}=e;return O?o:jsxRuntime.jsx(style.DialogOverlay,{ref:s,className:n,blur:h,palette:{backgroundColor:v.overlayBackgroundColor},zIndex:M,onClick:l,onMouseDown:r,children:o})}})}),{sizes:e=>e.fancy?sizes.SIZES_FANCY:sizes.SIZES,displayName:"Dialog"}),{Component:DialogComponent.DialogComponent});exports.COMPONENT_NAME="Dialog",exports.Dialog=Dialog;
2
2
  //# sourceMappingURL=Dialog.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport ReactModal from 'react-modal'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { withTranslation } from 'hocs/withTranslation'\nimport type { InjectedTranslationProps } from 'hocs/withTranslation'\nimport { DialogComponent } from 'components/DialogComponent'\nimport { deepmerge } from 'shared/utils/misc'\nimport { SIZES, SIZES_FANCY } from './sizes'\nimport { POSITIONS } from './positions'\nimport * as Styled from './style'\nimport type { DialogProps, TranslationDialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'Dialog'\n\nconst TranslationDialogComponent = withTranslation<HTMLDivElement, TranslationDialogComponentProps>(\n forwardRef<HTMLDivElement, InjectedTranslationProps<HTMLDivElement, TranslationDialogComponentProps>>(\n (props, ref) => {\n const { positions = {}, translated, ...restProps } = props\n\n const dialogPositions = translated ? {} : deepmerge(POSITIONS, positions)\n\n return <Styled.PositionedDialogComponent {...restProps} positions={dialogPositions} ref={ref} />\n }\n )\n)\n\n/**\n *\n * Компонент для отображения контента поверх основного интерфейса.\n *\n * Поддерживаются все нативные атрибуты \\<div\\> элемента.\n */\nconst Dialog: React.ForwardRefExoticComponent<DialogProps> & { Component: typeof DialogComponent } = Object.assign(\n withMergedProps<DialogProps, HTMLDivElement>(\n (props) => {\n const {\n size = 's',\n position = 'center',\n role = 'dialog',\n open,\n preventScrollAfterClose,\n closeTimeoutMS,\n portalClassName,\n className,\n bodyOpenClassName,\n htmlOpenClassName,\n overlayClassName,\n shouldCloseOnOverlayClick,\n shouldCloseOnEsc,\n shouldReturnFocusAfterClose,\n parentSelector,\n overlayRef,\n contentRef,\n palette,\n overlayBlur,\n overlayDisabled,\n zIndex,\n onAfterOpen,\n onAfterClose,\n onRequestClose,\n ...dialogProps\n } = props\n\n const overlayElementDisabled = dialogProps.draggable || overlayDisabled\n\n return (\n <ReactModal\n isOpen={open}\n ariaHideApp={false}\n preventScroll={preventScrollAfterClose}\n closeTimeoutMS={closeTimeoutMS}\n portalClassName={portalClassName}\n className={className}\n bodyOpenClassName={bodyOpenClassName}\n htmlOpenClassName={htmlOpenClassName}\n overlayClassName={overlayClassName}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEsc={shouldCloseOnEsc}\n shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}\n parentSelector={parentSelector}\n overlayRef={overlayRef}\n contentRef={contentRef}\n onAfterOpen={onAfterOpen}\n onAfterClose={onAfterClose}\n onRequestClose={onRequestClose}\n contentElement={(contentProps) => {\n const {\n ref,\n className: contentElementClassName,\n tabIndex,\n onKeyDown,\n onMouseDown,\n onMouseUp,\n onClick,\n } = contentProps\n\n return (\n <TranslationDialogComponent\n {...dialogProps}\n ref={ref}\n size={size}\n role={role}\n className={contentElementClassName}\n tabIndex={tabIndex}\n position={position}\n aria-modal={!dialogProps.draggable && !overlayDisabled}\n palette={{\n color: palette.color,\n backgroundColor: palette.backgroundColor,\n shadowColor: palette.shadowColor,\n }}\n zIndex={overlayElementDisabled ? zIndex : undefined}\n onKeyDown={(evt) => {\n if (dialogProps.onKeyDown) dialogProps.onKeyDown(evt)\n if (onKeyDown) onKeyDown(evt)\n }}\n onMouseDown={(evt) => {\n if (dialogProps.onMouseDown) dialogProps.onMouseDown(evt)\n if (onMouseDown) onMouseDown(evt)\n }}\n onMouseUp={(evt) => {\n if (dialogProps.onMouseUp) dialogProps.onMouseUp(evt)\n if (onMouseUp) onMouseUp(evt)\n }}\n onClick={(evt) => {\n if (dialogProps.onClick) dialogProps.onClick(evt)\n if (onClick) onClick(evt)\n }}\n />\n )\n }}\n overlayElement={(overlayProps, contentElement) => {\n const { ref, className: overlayElementClassName, onClick, onMouseDown } = overlayProps\n\n return overlayElementDisabled ? (\n contentElement\n ) : (\n <Styled.DialogOverlay\n ref={ref}\n className={overlayElementClassName}\n blur={overlayBlur}\n palette={{\n backgroundColor: palette.overlayBackgroundColor,\n }}\n zIndex={zIndex}\n onClick={onClick}\n onMouseDown={onMouseDown}\n >\n {contentElement}\n </Styled.DialogOverlay>\n )\n }}\n />\n )\n },\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Component: DialogComponent,\n }\n)\n\nexport { Dialog }\n\nexport { COMPONENT_NAME }\n"],"names":["TranslationDialogComponent","withTranslation","forwardRef","props","ref","positions","translated","restProps","dialogPositions","deepmerge","POSITIONS","_jsx","Styled","Dialog","Object","assign","withMergedProps","size","position","role","open","preventScrollAfterClose","closeTimeoutMS","portalClassName","className","bodyOpenClassName","htmlOpenClassName","overlayClassName","shouldCloseOnOverlayClick","shouldCloseOnEsc","shouldReturnFocusAfterClose","parentSelector","overlayRef","contentRef","palette","overlayBlur","overlayDisabled","zIndex","onAfterOpen","onAfterClose","onRequestClose","dialogProps","overlayElementDisabled","draggable","ReactModal","isOpen","ariaHideApp","preventScroll","contentElement","contentProps","contentElementClassName","tabIndex","onKeyDown","onMouseDown","onMouseUp","onClick","color","backgroundColor","shadowColor","undefined","evt","overlayElement","overlayProps","overlayElementClassName","jsx","blur","overlayBackgroundColor","children","sizes","fancy","SIZES_FANCY","SIZES","displayName","Component","DialogComponent"],"mappings":"qkBAcA,MAAMA,2BAA6BC,gBAAAA,gBACjCC,MAAAA,YACE,CAACC,EAAOC,KACN,MAAQC,UAAAA,EAAY,CAAE,EAAAC,WAAEA,KAAeC,GAAcJ,EAErD,MAAMK,EAAkBF,EAAa,CAAA,EAAKG,KAAAA,UAAUC,UAAAA,UAAWL,GAE/D,OAAOM,WAAAA,IAACC,MAAAA,0BAAgC,IAAKL,EAAWF,UAAWG,EAAiBJ,IAAKA,GAAO,KAWhGS,MAAAA,OAA+FC,OAAOC,OAC1GC,gBAAAA,iBACGb,IACC,MAAMc,KACJA,EAAO,IAAGC,SACVA,EAAW,SAAQC,KACnBA,EAAO,SAAQC,KACfA,EAAIC,wBACJA,EAAuBC,eACvBA,EAAcC,gBACdA,EAAeC,UACfA,EAASC,kBACTA,EAAiBC,kBACjBA,EAAiBC,iBACjBA,EAAgBC,0BAChBA,EAAyBC,iBACzBA,EAAgBC,4BAChBA,EAA2BC,eAC3BA,EAAcC,WACdA,EAAUC,WACVA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,gBACXA,EAAeC,OACfA,EAAMC,YACNA,EAAWC,aACXA,EAAYC,eACZA,KACGC,GACDtC,EAEJ,MAAMuC,EAAyBD,EAAYE,WAAaP,EAExD,OACEzB,WAAAA,IAACiC,oBAAAA,QAAU,CACTC,OAAQzB,EACR0B,aAAa,EACbC,cAAe1B,EACfC,eAAgBA,EAChBC,gBAAiBA,EACjBC,UAAWA,EACXC,kBAAmBA,EACnBC,kBAAmBA,EACnBC,iBAAkBA,EAClBC,0BAA2BA,EAC3BC,iBAAkBA,EAClBC,4BAA6BA,EAC7BC,eAAgBA,EAChBC,WAAYA,EACZC,WAAYA,EACZK,YAAaA,EACbC,aAAcA,EACdC,eAAgBA,EAChBQ,eAAiBC,IACf,MAAM7C,IACJA,EACAoB,UAAW0B,EAAuBC,SAClCA,EAAQC,UACRA,EAASC,YACTA,EAAWC,UACXA,EAASC,QACTA,GACEN,EAEJ,OACEtC,WAAAA,IAACX,2BAA0B,IACrByC,EACJrC,IAAKA,EACLa,KAAMA,EACNE,KAAMA,EACNK,UAAW0B,EACXC,SAAUA,EACVjC,SAAUA,EACV,cAAauB,EAAYE,YAAcP,EACvCF,QAAS,CACPsB,MAAOtB,EAAQsB,MACfC,gBAAiBvB,EAAQuB,gBACzBC,YAAaxB,EAAQwB,aAEvBrB,OAAQK,EAAyBL,OAASsB,EAC1CP,UAAYQ,IACNnB,EAAYW,WAAWX,EAAYW,UAAUQ,GAC7CR,GAAWA,EAAUQ,EAAI,EAE/BP,YAAcO,IACRnB,EAAYY,aAAaZ,EAAYY,YAAYO,GACjDP,GAAaA,EAAYO,EAAI,EAEnCN,UAAYM,IACNnB,EAAYa,WAAWb,EAAYa,UAAUM,GAC7CN,GAAWA,EAAUM,EAAI,EAE/BL,QAAUK,IACJnB,EAAYc,SAASd,EAAYc,QAAQK,GACzCL,GAASA,EAAQK,EAAI,GAE3B,EAGNC,eAAgBA,CAACC,EAAcd,KAC7B,MAAM5C,IAAEA,EAAKoB,UAAWuC,EAAuBR,QAAEA,EAAOF,YAAEA,GAAgBS,EAE1E,OAAOpB,EACLM,EAEArC,WAAAqD,IAACpD,oBAAoB,CACnBR,IAAKA,EACLoB,UAAWuC,EACXE,KAAM9B,EACND,QAAS,CACPuB,gBAAiBvB,EAAQgC,wBAE3B7B,OAAQA,EACRkB,QAASA,EACTF,YAAaA,EAAYc,SAExBnB,GAEJ,GAEH,GAGN,CACEoB,MAAQjE,GAAWA,EAAMkE,MAAQC,MAAWA,YAAGC,MAAMA,MACrDC,YAjJiB,WAoJrB,CACEC,UAAWC,gBAAAA,yCArJQ"}
1
+ {"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport ReactModal from 'react-modal'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { withTranslation } from 'hocs/withTranslation'\nimport type { InjectedTranslationProps } from 'hocs/withTranslation'\nimport { DialogComponent } from 'components/DialogComponent'\nimport { deepmerge } from 'shared/utils/misc'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport { SIZES, SIZES_FANCY } from './sizes'\nimport { POSITIONS } from './positions'\nimport * as Styled from './style'\nimport type { DialogProps, TranslationDialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'Dialog'\n\nconst TranslationDialogComponent = withTranslation<HTMLDivElement, TranslationDialogComponentProps>(\n forwardRef<HTMLDivElement, InjectedTranslationProps<HTMLDivElement, TranslationDialogComponentProps>>(\n (props, ref) => {\n const { positions = {}, translated, ...restProps } = props\n\n const dialogPositions = translated ? {} : deepmerge(POSITIONS, positions)\n\n return <Styled.PositionedDialogComponent {...restProps} positions={dialogPositions} ref={ref} />\n }\n )\n)\n\n/**\n *\n * Компонент для отображения контента поверх основного интерфейса.\n *\n * Поддерживаются все нативные атрибуты \\<div\\> элемента.\n */\nconst Dialog: React.ForwardRefExoticComponent<DialogProps> & { Component: typeof DialogComponent } = Object.assign(\n withMergedProps<DialogProps, HTMLDivElement>(\n (props) => {\n const {\n size = 's',\n position = 'center',\n role = 'dialog',\n open,\n preventScrollAfterClose,\n closeTimeoutMS,\n portalClassName,\n className,\n bodyOpenClassName,\n htmlOpenClassName,\n overlayClassName,\n shouldCloseOnOverlayClick,\n shouldCloseOnEsc,\n shouldReturnFocusAfterClose,\n parentSelector,\n overlayRef,\n contentRef,\n palette,\n overlayBlur,\n overlayDisabled,\n zIndex,\n scrollLock,\n onAfterOpen,\n onAfterClose,\n onRequestClose,\n ...dialogProps\n } = props\n\n const overlayElementDisabled = dialogProps.draggable || overlayDisabled\n\n useScrollLock(\n scrollLock || {\n locked: false,\n }\n )\n\n return (\n <ReactModal\n isOpen={open}\n ariaHideApp={false}\n preventScroll={preventScrollAfterClose}\n closeTimeoutMS={closeTimeoutMS}\n portalClassName={portalClassName}\n className={className}\n bodyOpenClassName={bodyOpenClassName}\n htmlOpenClassName={htmlOpenClassName}\n overlayClassName={overlayClassName}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEsc={shouldCloseOnEsc}\n shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}\n parentSelector={parentSelector}\n overlayRef={overlayRef}\n contentRef={contentRef}\n onAfterOpen={onAfterOpen}\n onAfterClose={onAfterClose}\n onRequestClose={onRequestClose}\n contentElement={(contentProps) => {\n const {\n ref,\n className: contentElementClassName,\n tabIndex,\n onKeyDown,\n onMouseDown,\n onMouseUp,\n onClick,\n } = contentProps\n\n return (\n <TranslationDialogComponent\n {...dialogProps}\n ref={ref}\n size={size}\n role={role}\n className={contentElementClassName}\n tabIndex={tabIndex}\n position={position}\n aria-modal={!dialogProps.draggable && !overlayDisabled}\n palette={{\n color: palette.color,\n backgroundColor: palette.backgroundColor,\n shadowColor: palette.shadowColor,\n }}\n zIndex={overlayElementDisabled ? zIndex : undefined}\n onKeyDown={(evt) => {\n if (dialogProps.onKeyDown) dialogProps.onKeyDown(evt)\n if (onKeyDown) onKeyDown(evt)\n }}\n onMouseDown={(evt) => {\n if (dialogProps.onMouseDown) dialogProps.onMouseDown(evt)\n if (onMouseDown) onMouseDown(evt)\n }}\n onMouseUp={(evt) => {\n if (dialogProps.onMouseUp) dialogProps.onMouseUp(evt)\n if (onMouseUp) onMouseUp(evt)\n }}\n onClick={(evt) => {\n if (dialogProps.onClick) dialogProps.onClick(evt)\n if (onClick) onClick(evt)\n }}\n />\n )\n }}\n overlayElement={(overlayProps, contentElement) => {\n const { ref, className: overlayElementClassName, onClick, onMouseDown } = overlayProps\n\n return overlayElementDisabled ? (\n contentElement\n ) : (\n <Styled.DialogOverlay\n ref={ref}\n className={overlayElementClassName}\n blur={overlayBlur}\n palette={{\n backgroundColor: palette.overlayBackgroundColor,\n }}\n zIndex={zIndex}\n onClick={onClick}\n onMouseDown={onMouseDown}\n >\n {contentElement}\n </Styled.DialogOverlay>\n )\n }}\n />\n )\n },\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Component: DialogComponent,\n }\n)\n\nexport { Dialog }\n\nexport { COMPONENT_NAME }\n"],"names":["TranslationDialogComponent","withTranslation","forwardRef","props","ref","positions","translated","restProps","dialogPositions","deepmerge","POSITIONS","_jsx","Styled","Dialog","Object","assign","withMergedProps","size","position","role","open","preventScrollAfterClose","closeTimeoutMS","portalClassName","className","bodyOpenClassName","htmlOpenClassName","overlayClassName","shouldCloseOnOverlayClick","shouldCloseOnEsc","shouldReturnFocusAfterClose","parentSelector","overlayRef","contentRef","palette","overlayBlur","overlayDisabled","zIndex","scrollLock","onAfterOpen","onAfterClose","onRequestClose","dialogProps","overlayElementDisabled","draggable","useScrollLock","locked","ReactModal","isOpen","ariaHideApp","preventScroll","contentElement","contentProps","contentElementClassName","tabIndex","onKeyDown","onMouseDown","onMouseUp","onClick","color","backgroundColor","shadowColor","undefined","evt","overlayElement","overlayProps","overlayElementClassName","jsx","blur","overlayBackgroundColor","children","sizes","fancy","SIZES_FANCY","SIZES","displayName","Component","DialogComponent"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{forwardRef}from'react';import ReactModal from'react-modal';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{withTranslation}from'../../hocs/withTranslation.mjs';import{deepmerge}from'../../shared/utils/misc.mjs';import{SIZES_FANCY,SIZES}from'./sizes.mjs';import{POSITIONS}from'./positions.mjs';import{DialogOverlay,PositionedDialogComponent}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{DialogComponent}from'../DialogComponent/DialogComponent.mjs';const COMPONENT_NAME='Dialog';const TranslationDialogComponent=withTranslation(forwardRef(((o,e)=>{const{positions:n={},translated:s,...l}=o;const r=s?{}:deepmerge(POSITIONS,n);return jsx(PositionedDialogComponent,{...l,positions:r,ref:e})})));const Dialog=Object.assign(withMergedProps((o=>{const{size:e="s",position:n="center",role:s="dialog",open:l,preventScrollAfterClose:r,closeTimeoutMS:a,portalClassName:t,className:i,bodyOpenClassName:m,htmlOpenClassName:c,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:u,parentSelector:f,overlayRef:g,contentRef:D,palette:N,overlayBlur:O,overlayDisabled:y,zIndex:M,onAfterOpen:h,onAfterClose:w,onRequestClose:S,...v}=o;const j=v.draggable||y;return jsx(ReactModal,{isOpen:l,ariaHideApp:!1,preventScroll:r,closeTimeoutMS:a,portalClassName:t,className:i,bodyOpenClassName:m,htmlOpenClassName:c,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:u,parentSelector:f,overlayRef:g,contentRef:D,onAfterOpen:h,onAfterClose:w,onRequestClose:S,contentElement:o=>{const{ref:l,className:r,tabIndex:a,onKeyDown:t,onMouseDown:i,onMouseUp:m,onClick:c}=o;return jsx(TranslationDialogComponent,{...v,ref:l,size:e,role:s,className:r,tabIndex:a,position:n,"aria-modal":!v.draggable&&!y,palette:{color:N.color,backgroundColor:N.backgroundColor,shadowColor:N.shadowColor},zIndex:j?M:void 0,onKeyDown:o=>{v.onKeyDown&&v.onKeyDown(o),t&&t(o)},onMouseDown:o=>{v.onMouseDown&&v.onMouseDown(o),i&&i(o)},onMouseUp:o=>{v.onMouseUp&&v.onMouseUp(o),m&&m(o)},onClick:o=>{v.onClick&&v.onClick(o),c&&c(o)}})},overlayElement:(o,e)=>{const{ref:n,className:s,onClick:l,onMouseDown:r}=o;return j?e:jsx(DialogOverlay,{ref:n,className:s,blur:O,palette:{backgroundColor:N.overlayBackgroundColor},zIndex:M,onClick:l,onMouseDown:r,children:e})}})}),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:"Dialog"}),{Component:DialogComponent});export{COMPONENT_NAME,Dialog};
1
+ import{forwardRef}from'react';import ReactModal from'react-modal';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{withTranslation}from'../../hocs/withTranslation.mjs';import{deepmerge}from'../../shared/utils/misc.mjs';import{useScrollLock}from'../../hooks/useScrollLock.mjs';import{SIZES_FANCY,SIZES}from'./sizes.mjs';import{POSITIONS}from'./positions.mjs';import{DialogOverlay,PositionedDialogComponent}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{DialogComponent}from'../DialogComponent/DialogComponent.mjs';const COMPONENT_NAME='Dialog';const TranslationDialogComponent=withTranslation(forwardRef(((o,e)=>{const{positions:s={},translated:n,...l}=o;const r=n?{}:deepmerge(POSITIONS,s);return jsx(PositionedDialogComponent,{...l,positions:r,ref:e})})));const Dialog=Object.assign(withMergedProps((o=>{const{size:e="s",position:s="center",role:n="dialog",open:l,preventScrollAfterClose:r,closeTimeoutMS:a,portalClassName:t,className:i,bodyOpenClassName:m,htmlOpenClassName:c,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:u,parentSelector:f,overlayRef:g,contentRef:D,palette:N,overlayBlur:O,overlayDisabled:h,zIndex:y,scrollLock:M,onAfterOpen:S,onAfterClose:w,onRequestClose:k,...j}=o;const v=j.draggable||h;return useScrollLock(M||{locked:!1}),jsx(ReactModal,{isOpen:l,ariaHideApp:!1,preventScroll:r,closeTimeoutMS:a,portalClassName:t,className:i,bodyOpenClassName:m,htmlOpenClassName:c,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:u,parentSelector:f,overlayRef:g,contentRef:D,onAfterOpen:S,onAfterClose:w,onRequestClose:k,contentElement:o=>{const{ref:l,className:r,tabIndex:a,onKeyDown:t,onMouseDown:i,onMouseUp:m,onClick:c}=o;return jsx(TranslationDialogComponent,{...j,ref:l,size:e,role:n,className:r,tabIndex:a,position:s,"aria-modal":!j.draggable&&!h,palette:{color:N.color,backgroundColor:N.backgroundColor,shadowColor:N.shadowColor},zIndex:v?y:void 0,onKeyDown:o=>{j.onKeyDown&&j.onKeyDown(o),t&&t(o)},onMouseDown:o=>{j.onMouseDown&&j.onMouseDown(o),i&&i(o)},onMouseUp:o=>{j.onMouseUp&&j.onMouseUp(o),m&&m(o)},onClick:o=>{j.onClick&&j.onClick(o),c&&c(o)}})},overlayElement:(o,e)=>{const{ref:s,className:n,onClick:l,onMouseDown:r}=o;return v?e:jsx(DialogOverlay,{ref:s,className:n,blur:O,palette:{backgroundColor:N.overlayBackgroundColor},zIndex:y,onClick:l,onMouseDown:r,children:e})}})}),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:"Dialog"}),{Component:DialogComponent});export{COMPONENT_NAME,Dialog};
2
2
  //# sourceMappingURL=Dialog.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.mjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport ReactModal from 'react-modal'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { withTranslation } from 'hocs/withTranslation'\nimport type { InjectedTranslationProps } from 'hocs/withTranslation'\nimport { DialogComponent } from 'components/DialogComponent'\nimport { deepmerge } from 'shared/utils/misc'\nimport { SIZES, SIZES_FANCY } from './sizes'\nimport { POSITIONS } from './positions'\nimport * as Styled from './style'\nimport type { DialogProps, TranslationDialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'Dialog'\n\nconst TranslationDialogComponent = withTranslation<HTMLDivElement, TranslationDialogComponentProps>(\n forwardRef<HTMLDivElement, InjectedTranslationProps<HTMLDivElement, TranslationDialogComponentProps>>(\n (props, ref) => {\n const { positions = {}, translated, ...restProps } = props\n\n const dialogPositions = translated ? {} : deepmerge(POSITIONS, positions)\n\n return <Styled.PositionedDialogComponent {...restProps} positions={dialogPositions} ref={ref} />\n }\n )\n)\n\n/**\n *\n * Компонент для отображения контента поверх основного интерфейса.\n *\n * Поддерживаются все нативные атрибуты \\<div\\> элемента.\n */\nconst Dialog: React.ForwardRefExoticComponent<DialogProps> & { Component: typeof DialogComponent } = Object.assign(\n withMergedProps<DialogProps, HTMLDivElement>(\n (props) => {\n const {\n size = 's',\n position = 'center',\n role = 'dialog',\n open,\n preventScrollAfterClose,\n closeTimeoutMS,\n portalClassName,\n className,\n bodyOpenClassName,\n htmlOpenClassName,\n overlayClassName,\n shouldCloseOnOverlayClick,\n shouldCloseOnEsc,\n shouldReturnFocusAfterClose,\n parentSelector,\n overlayRef,\n contentRef,\n palette,\n overlayBlur,\n overlayDisabled,\n zIndex,\n onAfterOpen,\n onAfterClose,\n onRequestClose,\n ...dialogProps\n } = props\n\n const overlayElementDisabled = dialogProps.draggable || overlayDisabled\n\n return (\n <ReactModal\n isOpen={open}\n ariaHideApp={false}\n preventScroll={preventScrollAfterClose}\n closeTimeoutMS={closeTimeoutMS}\n portalClassName={portalClassName}\n className={className}\n bodyOpenClassName={bodyOpenClassName}\n htmlOpenClassName={htmlOpenClassName}\n overlayClassName={overlayClassName}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEsc={shouldCloseOnEsc}\n shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}\n parentSelector={parentSelector}\n overlayRef={overlayRef}\n contentRef={contentRef}\n onAfterOpen={onAfterOpen}\n onAfterClose={onAfterClose}\n onRequestClose={onRequestClose}\n contentElement={(contentProps) => {\n const {\n ref,\n className: contentElementClassName,\n tabIndex,\n onKeyDown,\n onMouseDown,\n onMouseUp,\n onClick,\n } = contentProps\n\n return (\n <TranslationDialogComponent\n {...dialogProps}\n ref={ref}\n size={size}\n role={role}\n className={contentElementClassName}\n tabIndex={tabIndex}\n position={position}\n aria-modal={!dialogProps.draggable && !overlayDisabled}\n palette={{\n color: palette.color,\n backgroundColor: palette.backgroundColor,\n shadowColor: palette.shadowColor,\n }}\n zIndex={overlayElementDisabled ? zIndex : undefined}\n onKeyDown={(evt) => {\n if (dialogProps.onKeyDown) dialogProps.onKeyDown(evt)\n if (onKeyDown) onKeyDown(evt)\n }}\n onMouseDown={(evt) => {\n if (dialogProps.onMouseDown) dialogProps.onMouseDown(evt)\n if (onMouseDown) onMouseDown(evt)\n }}\n onMouseUp={(evt) => {\n if (dialogProps.onMouseUp) dialogProps.onMouseUp(evt)\n if (onMouseUp) onMouseUp(evt)\n }}\n onClick={(evt) => {\n if (dialogProps.onClick) dialogProps.onClick(evt)\n if (onClick) onClick(evt)\n }}\n />\n )\n }}\n overlayElement={(overlayProps, contentElement) => {\n const { ref, className: overlayElementClassName, onClick, onMouseDown } = overlayProps\n\n return overlayElementDisabled ? (\n contentElement\n ) : (\n <Styled.DialogOverlay\n ref={ref}\n className={overlayElementClassName}\n blur={overlayBlur}\n palette={{\n backgroundColor: palette.overlayBackgroundColor,\n }}\n zIndex={zIndex}\n onClick={onClick}\n onMouseDown={onMouseDown}\n >\n {contentElement}\n </Styled.DialogOverlay>\n )\n }}\n />\n )\n },\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Component: DialogComponent,\n }\n)\n\nexport { Dialog }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","TranslationDialogComponent","withTranslation","forwardRef","props","ref","positions","translated","restProps","dialogPositions","deepmerge","POSITIONS","_jsx","Styled","Dialog","Object","assign","withMergedProps","size","position","role","open","preventScrollAfterClose","closeTimeoutMS","portalClassName","className","bodyOpenClassName","htmlOpenClassName","overlayClassName","shouldCloseOnOverlayClick","shouldCloseOnEsc","shouldReturnFocusAfterClose","parentSelector","overlayRef","contentRef","palette","overlayBlur","overlayDisabled","zIndex","onAfterOpen","onAfterClose","onRequestClose","dialogProps","overlayElementDisabled","draggable","ReactModal","isOpen","ariaHideApp","preventScroll","contentElement","contentProps","contentElementClassName","tabIndex","onKeyDown","onMouseDown","onMouseUp","onClick","color","backgroundColor","shadowColor","undefined","evt","overlayElement","overlayProps","overlayElementClassName","blur","overlayBackgroundColor","children","sizes","fancy","SIZES_FANCY","SIZES","displayName","Component","DialogComponent"],"mappings":"ueAYMA,MAAAA,eAAiB,SAEvB,MAAMC,2BAA6BC,gBACjCC,YACE,CAACC,EAAOC,KACN,MAAMC,UAAEA,EAAY,CAAE,EAAAC,WAAEA,KAAeC,GAAcJ,EAErD,MAAMK,EAAkBF,EAAa,CAAA,EAAKG,UAAUC,UAAWL,GAE/D,OAAOM,IAACC,0BAAgC,IAAKL,EAAWF,UAAWG,EAAiBJ,IAAKA,GAAO,KAWhGS,MAAAA,OAA+FC,OAAOC,OAC1GC,iBACGb,IACC,MAAMc,KACJA,EAAO,IAAGC,SACVA,EAAW,SAAQC,KACnBA,EAAO,SAAQC,KACfA,EAAIC,wBACJA,EAAuBC,eACvBA,EAAcC,gBACdA,EAAeC,UACfA,EAASC,kBACTA,EAAiBC,kBACjBA,EAAiBC,iBACjBA,EAAgBC,0BAChBA,EAAyBC,iBACzBA,EAAgBC,4BAChBA,EAA2BC,eAC3BA,EAAcC,WACdA,EAAUC,WACVA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,gBACXA,EAAeC,OACfA,EAAMC,YACNA,EAAWC,aACXA,EAAYC,eACZA,KACGC,GACDtC,EAEJ,MAAMuC,EAAyBD,EAAYE,WAAaP,EAExD,OACEzB,IAACiC,WAAU,CACTC,OAAQzB,EACR0B,aAAa,EACbC,cAAe1B,EACfC,eAAgBA,EAChBC,gBAAiBA,EACjBC,UAAWA,EACXC,kBAAmBA,EACnBC,kBAAmBA,EACnBC,iBAAkBA,EAClBC,0BAA2BA,EAC3BC,iBAAkBA,EAClBC,4BAA6BA,EAC7BC,eAAgBA,EAChBC,WAAYA,EACZC,WAAYA,EACZK,YAAaA,EACbC,aAAcA,EACdC,eAAgBA,EAChBQ,eAAiBC,IACf,MAAM7C,IACJA,EACAoB,UAAW0B,EAAuBC,SAClCA,EAAQC,UACRA,EAASC,YACTA,EAAWC,UACXA,EAASC,QACTA,GACEN,EAEJ,OACEtC,IAACX,2BAA0B,IACrByC,EACJrC,IAAKA,EACLa,KAAMA,EACNE,KAAMA,EACNK,UAAW0B,EACXC,SAAUA,EACVjC,SAAUA,EACV,cAAauB,EAAYE,YAAcP,EACvCF,QAAS,CACPsB,MAAOtB,EAAQsB,MACfC,gBAAiBvB,EAAQuB,gBACzBC,YAAaxB,EAAQwB,aAEvBrB,OAAQK,EAAyBL,OAASsB,EAC1CP,UAAYQ,IACNnB,EAAYW,WAAWX,EAAYW,UAAUQ,GAC7CR,GAAWA,EAAUQ,EAAI,EAE/BP,YAAcO,IACRnB,EAAYY,aAAaZ,EAAYY,YAAYO,GACjDP,GAAaA,EAAYO,EAAI,EAEnCN,UAAYM,IACNnB,EAAYa,WAAWb,EAAYa,UAAUM,GAC7CN,GAAWA,EAAUM,EAAI,EAE/BL,QAAUK,IACJnB,EAAYc,SAASd,EAAYc,QAAQK,GACzCL,GAASA,EAAQK,EAAI,GAE3B,EAGNC,eAAgBA,CAACC,EAAcd,KAC7B,MAAM5C,IAAEA,EAAKoB,UAAWuC,EAAuBR,QAAEA,EAAOF,YAAEA,GAAgBS,EAE1E,OAAOpB,EACLM,EAEArC,IAACC,cAAoB,CACnBR,IAAKA,EACLoB,UAAWuC,EACXC,KAAM7B,EACND,QAAS,CACPuB,gBAAiBvB,EAAQ+B,wBAE3B5B,OAAQA,EACRkB,QAASA,EACTF,YAAaA,EAAYa,SAExBlB,GAEJ,GAEH,GAGN,CACEmB,MAAQhE,GAAWA,EAAMiE,MAAQC,YAAcC,MAC/CC,YAjJiB,WAoJrB,CACEC,UAAWC"}
1
+ {"version":3,"file":"Dialog.mjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport ReactModal from 'react-modal'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { withTranslation } from 'hocs/withTranslation'\nimport type { InjectedTranslationProps } from 'hocs/withTranslation'\nimport { DialogComponent } from 'components/DialogComponent'\nimport { deepmerge } from 'shared/utils/misc'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport { SIZES, SIZES_FANCY } from './sizes'\nimport { POSITIONS } from './positions'\nimport * as Styled from './style'\nimport type { DialogProps, TranslationDialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'Dialog'\n\nconst TranslationDialogComponent = withTranslation<HTMLDivElement, TranslationDialogComponentProps>(\n forwardRef<HTMLDivElement, InjectedTranslationProps<HTMLDivElement, TranslationDialogComponentProps>>(\n (props, ref) => {\n const { positions = {}, translated, ...restProps } = props\n\n const dialogPositions = translated ? {} : deepmerge(POSITIONS, positions)\n\n return <Styled.PositionedDialogComponent {...restProps} positions={dialogPositions} ref={ref} />\n }\n )\n)\n\n/**\n *\n * Компонент для отображения контента поверх основного интерфейса.\n *\n * Поддерживаются все нативные атрибуты \\<div\\> элемента.\n */\nconst Dialog: React.ForwardRefExoticComponent<DialogProps> & { Component: typeof DialogComponent } = Object.assign(\n withMergedProps<DialogProps, HTMLDivElement>(\n (props) => {\n const {\n size = 's',\n position = 'center',\n role = 'dialog',\n open,\n preventScrollAfterClose,\n closeTimeoutMS,\n portalClassName,\n className,\n bodyOpenClassName,\n htmlOpenClassName,\n overlayClassName,\n shouldCloseOnOverlayClick,\n shouldCloseOnEsc,\n shouldReturnFocusAfterClose,\n parentSelector,\n overlayRef,\n contentRef,\n palette,\n overlayBlur,\n overlayDisabled,\n zIndex,\n scrollLock,\n onAfterOpen,\n onAfterClose,\n onRequestClose,\n ...dialogProps\n } = props\n\n const overlayElementDisabled = dialogProps.draggable || overlayDisabled\n\n useScrollLock(\n scrollLock || {\n locked: false,\n }\n )\n\n return (\n <ReactModal\n isOpen={open}\n ariaHideApp={false}\n preventScroll={preventScrollAfterClose}\n closeTimeoutMS={closeTimeoutMS}\n portalClassName={portalClassName}\n className={className}\n bodyOpenClassName={bodyOpenClassName}\n htmlOpenClassName={htmlOpenClassName}\n overlayClassName={overlayClassName}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEsc={shouldCloseOnEsc}\n shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}\n parentSelector={parentSelector}\n overlayRef={overlayRef}\n contentRef={contentRef}\n onAfterOpen={onAfterOpen}\n onAfterClose={onAfterClose}\n onRequestClose={onRequestClose}\n contentElement={(contentProps) => {\n const {\n ref,\n className: contentElementClassName,\n tabIndex,\n onKeyDown,\n onMouseDown,\n onMouseUp,\n onClick,\n } = contentProps\n\n return (\n <TranslationDialogComponent\n {...dialogProps}\n ref={ref}\n size={size}\n role={role}\n className={contentElementClassName}\n tabIndex={tabIndex}\n position={position}\n aria-modal={!dialogProps.draggable && !overlayDisabled}\n palette={{\n color: palette.color,\n backgroundColor: palette.backgroundColor,\n shadowColor: palette.shadowColor,\n }}\n zIndex={overlayElementDisabled ? zIndex : undefined}\n onKeyDown={(evt) => {\n if (dialogProps.onKeyDown) dialogProps.onKeyDown(evt)\n if (onKeyDown) onKeyDown(evt)\n }}\n onMouseDown={(evt) => {\n if (dialogProps.onMouseDown) dialogProps.onMouseDown(evt)\n if (onMouseDown) onMouseDown(evt)\n }}\n onMouseUp={(evt) => {\n if (dialogProps.onMouseUp) dialogProps.onMouseUp(evt)\n if (onMouseUp) onMouseUp(evt)\n }}\n onClick={(evt) => {\n if (dialogProps.onClick) dialogProps.onClick(evt)\n if (onClick) onClick(evt)\n }}\n />\n )\n }}\n overlayElement={(overlayProps, contentElement) => {\n const { ref, className: overlayElementClassName, onClick, onMouseDown } = overlayProps\n\n return overlayElementDisabled ? (\n contentElement\n ) : (\n <Styled.DialogOverlay\n ref={ref}\n className={overlayElementClassName}\n blur={overlayBlur}\n palette={{\n backgroundColor: palette.overlayBackgroundColor,\n }}\n zIndex={zIndex}\n onClick={onClick}\n onMouseDown={onMouseDown}\n >\n {contentElement}\n </Styled.DialogOverlay>\n )\n }}\n />\n )\n },\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Component: DialogComponent,\n }\n)\n\nexport { Dialog }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","TranslationDialogComponent","withTranslation","forwardRef","props","ref","positions","translated","restProps","dialogPositions","deepmerge","POSITIONS","_jsx","Styled","Dialog","Object","assign","withMergedProps","size","position","role","open","preventScrollAfterClose","closeTimeoutMS","portalClassName","className","bodyOpenClassName","htmlOpenClassName","overlayClassName","shouldCloseOnOverlayClick","shouldCloseOnEsc","shouldReturnFocusAfterClose","parentSelector","overlayRef","contentRef","palette","overlayBlur","overlayDisabled","zIndex","scrollLock","onAfterOpen","onAfterClose","onRequestClose","dialogProps","overlayElementDisabled","draggable","useScrollLock","locked","ReactModal","isOpen","ariaHideApp","preventScroll","contentElement","contentProps","contentElementClassName","tabIndex","onKeyDown","onMouseDown","onMouseUp","onClick","color","backgroundColor","shadowColor","undefined","evt","overlayElement","overlayProps","overlayElementClassName","blur","overlayBackgroundColor","children","sizes","fancy","SIZES_FANCY","SIZES","displayName","Component","DialogComponent"],"mappings":"giBAaMA,MAAAA,eAAiB,SAEvB,MAAMC,2BAA6BC,gBACjCC,YACE,CAACC,EAAOC,KACN,MAAMC,UAAEA,EAAY,CAAE,EAAAC,WAAEA,KAAeC,GAAcJ,EAErD,MAAMK,EAAkBF,EAAa,CAAA,EAAKG,UAAUC,UAAWL,GAE/D,OAAOM,IAACC,0BAAgC,IAAKL,EAAWF,UAAWG,EAAiBJ,IAAKA,GAAO,KAWhGS,MAAAA,OAA+FC,OAAOC,OAC1GC,iBACGb,IACC,MAAMc,KACJA,EAAO,IAAGC,SACVA,EAAW,SAAQC,KACnBA,EAAO,SAAQC,KACfA,EAAIC,wBACJA,EAAuBC,eACvBA,EAAcC,gBACdA,EAAeC,UACfA,EAASC,kBACTA,EAAiBC,kBACjBA,EAAiBC,iBACjBA,EAAgBC,0BAChBA,EAAyBC,iBACzBA,EAAgBC,4BAChBA,EAA2BC,eAC3BA,EAAcC,WACdA,EAAUC,WACVA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,gBACXA,EAAeC,OACfA,EAAMC,WACNA,EAAUC,YACVA,EAAWC,aACXA,EAAYC,eACZA,KACGC,GACDvC,EAEJ,MAAMwC,EAAyBD,EAAYE,WAAaR,EAQxD,OANAS,cACEP,GAAc,CACZQ,QAAQ,IAKVnC,IAACoC,WAAU,CACTC,OAAQ5B,EACR6B,aAAa,EACbC,cAAe7B,EACfC,eAAgBA,EAChBC,gBAAiBA,EACjBC,UAAWA,EACXC,kBAAmBA,EACnBC,kBAAmBA,EACnBC,iBAAkBA,EAClBC,0BAA2BA,EAC3BC,iBAAkBA,EAClBC,4BAA6BA,EAC7BC,eAAgBA,EAChBC,WAAYA,EACZC,WAAYA,EACZM,YAAaA,EACbC,aAAcA,EACdC,eAAgBA,EAChBU,eAAiBC,IACf,MAAMhD,IACJA,EACAoB,UAAW6B,EAAuBC,SAClCA,EAAQC,UACRA,EAASC,YACTA,EAAWC,UACXA,EAASC,QACTA,GACEN,EAEJ,OACEzC,IAACX,2BAA0B,IACrB0C,EACJtC,IAAKA,EACLa,KAAMA,EACNE,KAAMA,EACNK,UAAW6B,EACXC,SAAUA,EACVpC,SAAUA,EACV,cAAawB,EAAYE,YAAcR,EACvCF,QAAS,CACPyB,MAAOzB,EAAQyB,MACfC,gBAAiB1B,EAAQ0B,gBACzBC,YAAa3B,EAAQ2B,aAEvBxB,OAAQM,EAAyBN,OAASyB,EAC1CP,UAAYQ,IACNrB,EAAYa,WAAWb,EAAYa,UAAUQ,GAC7CR,GAAWA,EAAUQ,EAAI,EAE/BP,YAAcO,IACRrB,EAAYc,aAAad,EAAYc,YAAYO,GACjDP,GAAaA,EAAYO,EAAI,EAEnCN,UAAYM,IACNrB,EAAYe,WAAWf,EAAYe,UAAUM,GAC7CN,GAAWA,EAAUM,EAAI,EAE/BL,QAAUK,IACJrB,EAAYgB,SAAShB,EAAYgB,QAAQK,GACzCL,GAASA,EAAQK,EAAI,GAE3B,EAGNC,eAAgBA,CAACC,EAAcd,KAC7B,MAAM/C,IAAEA,EAAKoB,UAAW0C,EAAuBR,QAAEA,EAAOF,YAAEA,GAAgBS,EAE1E,OAAOtB,EACLQ,EAEAxC,IAACC,cAAoB,CACnBR,IAAKA,EACLoB,UAAW0C,EACXC,KAAMhC,EACND,QAAS,CACP0B,gBAAiB1B,EAAQkC,wBAE3B/B,OAAQA,EACRqB,QAASA,EACTF,YAAaA,EAAYa,SAExBlB,GAEJ,GAEH,GAGN,CACEmB,MAAQnE,GAAWA,EAAMoE,MAAQC,YAAcC,MAC/CC,YAxJiB,WA2JrB,CACEC,UAAWC"}
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardFormInputLabelProp=style.createShouldForwardProp((o=>!['primary','secondary','error','success','focus','disabled','onColored','inline','zIndex','overflow'].includes(o)));const shouldForwardContainerProp=style.createShouldForwardProp((o=>!['grow'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n ${hover.hover(`\n background-color: ${o.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-secondary']:tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled__default.default.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," "," ",""],(o=>{const e='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${e} solid transparent;\n z-index: ${o.zIndex??'auto'};\n overflow: ${o.overflow??'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${e};\n left: -${e};\n }\n\n ${hover.hover("\n opacity: 0;\n ",'&:hover [data-input-fading]::after')}\n `}),(o=>o.focus?`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `:`\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `),(o=>{let e=COLOR_SCHEMA.primary;return o.secondary&&(e=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(e=COLOR_SCHEMA.contrast),o.disabled?e.disabled:o.error?e.error:o.success?e.success:e.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Container=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardContainerProp}).withConfig({displayName:"FormInputLabel__Container",componentId:"ui__sc-1il4atw-2"})([""," "," ",""],(o=>`\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${o.grow??0};\n `),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Container=Container,exports.Dropdown=Dropdown,exports.Root=Root;
1
+ 'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardFormInputLabelProp=style.createShouldForwardProp((o=>!['primary','secondary','error','success','focus','disabled','onColored','inline','zIndex','overflow'].includes(o)));const shouldForwardContainerProp=style.createShouldForwardProp((o=>!['grow'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n ${hover.hover(`\n background-color: ${o.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-secondary']:tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled__default.default.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," "," ",""],(o=>{const e='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n line-height: normal;\n border: ${e} solid transparent;\n z-index: ${o.zIndex??'auto'};\n overflow: ${o.overflow??'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${e};\n left: -${e};\n }\n\n ${hover.hover("\n opacity: 0;\n ",'&:hover [data-input-fading]::after')}\n `}),(o=>o.focus?`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `:`\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `),(o=>{let e=COLOR_SCHEMA.primary;return o.secondary&&(e=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(e=COLOR_SCHEMA.contrast),o.disabled?e.disabled:o.error?e.error:o.success?e.success:e.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Container=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardContainerProp}).withConfig({displayName:"FormInputLabel__Container",componentId:"ui__sc-1il4atw-2"})([""," "," ",""],(o=>`\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${o.grow??0};\n `),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Container=Container,exports.Dropdown=Dropdown,exports.Root=Root;
2
2
  //# sourceMappingURL=style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'error',\n 'success',\n 'focus',\n 'disabled',\n 'onColored',\n 'inline',\n 'zIndex',\n 'overflow',\n ].includes(propKey)\n)\n\nconst shouldForwardContainerProp = createShouldForwardProp((propKey) => !['grow'].includes(propKey))\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n background-color: ${palette.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n overflow: ${props.overflow ?? 'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n ${hover(\n `\n opacity: 0;\n `,\n '&:hover [data-input-fading]::after'\n )}\n `\n }}\n\n ${(props) =>\n props.focus\n ? `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `\n : `\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `}\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<StyledContainerProps>({\n shouldForwardProp: shouldForwardContainerProp,\n})`\n ${(props) => `\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${props.grow ?? 0};\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","shouldForwardContainerProp","template","palette","color","backgroundColor","borderColor","hover","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Container","grow"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'error',\n 'success',\n 'focus',\n 'disabled',\n 'onColored',\n 'inline',\n 'zIndex',\n 'overflow',\n ].includes(propKey)\n)\n\nconst shouldForwardContainerProp = createShouldForwardProp((propKey) => !['grow'].includes(propKey))\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n background-color: ${palette.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n line-height: normal;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n overflow: ${props.overflow ?? 'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n ${hover(\n `\n opacity: 0;\n `,\n '&:hover [data-input-fading]::after'\n )}\n `\n }}\n\n ${(props) =>\n props.focus\n ? `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `\n : `\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `}\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<StyledContainerProps>({\n shouldForwardProp: shouldForwardContainerProp,\n})`\n ${(props) => `\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${props.grow ?? 0};\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","shouldForwardContainerProp","template","palette","color","backgroundColor","borderColor","hover","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Container","grow"],"mappings":"odASA,MAAMA,gCAAkCC,MAAuBA,yBAC5DC,IACE,CACC,UACA,YACA,QACA,UACA,QACA,WACA,YACA,SACA,SACA,YACAC,SAASD,KAGf,MAAME,2BAA6BH,MAAAA,yBAAyBC,IAAa,CAAC,QAAQC,SAASD,KAE3F,MAAMG,SAAYC,GAAmC,cAC1CA,EAAQC,+BACGD,EAAQE,qCACZF,EAAQG,mBACtBC,MAAKA,MAAC,2BACcJ,EAAQK,2EAGRL,EAAQE,uEAGnBF,EAAQE,2BAIrB,MAAMI,aAAe,CACnBC,SAAU,CACRC,SAAUC,OAAGA,IAAA,CAAA,GAAA,KACRC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,oBAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,qBACpCT,YAAaO,EAAMC,MAAMC,OAAOC,YAChCR,qBAAsBK,EAAMC,MAAMC,OAAO,wBACtCF,EAAMV,YAGfc,MAAOL,OAAGA,IAAA,CAAA,GAAA,KACLC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,sBACpCT,YAAaO,EAAMC,MAAMC,OAAO,sBAChCP,qBAAsBK,EAAMC,MAAMC,OAAO,yBACtCF,EAAMV,YAGfe,QAASN,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,wBACpCT,YAAaO,EAAMC,MAAMC,OAAO,wBAChCP,qBAAsBK,EAAMC,MAAMC,OAAO,2BACtCF,EAAMV,YAGfgB,QAASP,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,qBACpCT,YAAaO,EAAMC,MAAMC,OAAO,+BAChCP,qBAAsBK,EAAMO,MACxBP,EAAMC,MAAMC,OAAO,qBAClBM,mBAAAA,QAAUR,EAAMC,MAAMC,OAAO,sBAAsBO,OAAO,GAAGC,cAC/DV,EAAMV,aAIjBqB,UAAW,CACTb,SAAUC,OAAGA,IAAA,CAAA,GAAA,KACRC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,oBAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,qBACpCT,YAAaO,EAAMC,MAAMC,OAAOC,YAChCR,qBAAsBK,EAAMC,MAAMC,OAAO,wBACtCF,EAAMV,YAGfc,MAAOL,OAAGA,IAAA,CAAA,GAAA,KACLC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,sBACpCT,YAAaO,EAAMC,MAAMC,OAAO,sBAChCP,qBAAsBK,EAAMC,MAAMC,OAAO,yBACtCF,EAAMV,YAGfe,QAASN,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,wBACpCT,YAAaO,EAAMC,MAAMC,OAAO,wBAChCP,qBAAsBK,EAAMC,MAAMC,OAAO,2BACtCF,EAAMV,YAGfgB,QAASP,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,uBACpCT,YAAaO,EAAMC,MAAMC,OAAO,+BAChCP,qBAAsBK,EAAMO,MACxBP,EAAMC,MAAMC,OAAO,uBAClBM,mBAAAA,QAAUR,EAAMC,MAAMC,OAAO,wBAAwBO,OAAO,GAAGC,cACjEV,EAAMV,aAIjBsB,QAAS,CACPd,SAAUC,OAAGA,IAAA,CAAA,GAAA,KACRC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,oBAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,qBACpCT,YAAaO,EAAMC,MAAMC,OAAOC,YAChCR,qBAAsBK,EAAMC,MAAMC,OAAO,wBACtCF,EAAMV,YAGfc,MAAOL,OAAGA,IAAA,CAAA,GAAA,KACLC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,sBACpCT,YAAaO,EAAMC,MAAMC,OAAO,sBAChCP,qBAAsBK,EAAMC,MAAMC,OAAO,yBACtCF,EAAMV,YAGfe,QAASN,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,wBACpCT,YAAaO,EAAMC,MAAMC,OAAO,wBAChCP,qBAAsBK,EAAMC,MAAMC,OAAO,2BACtCF,EAAMV,YAGfgB,QAASP,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,MAAMC,OAAO,4BAC1BV,gBAAiBQ,EAAMC,MAAMC,OAAO,qBACpCT,YAAaO,EAAMC,MAAMC,OAAO,+BAChCP,qBAAsBK,EAAMO,MACxBP,EAAMC,MAAMC,OAAO,qBAClBM,mBAAAA,QAAUR,EAAMC,MAAMC,OAAO,sBAAsBO,OAAO,GAAGC,cAC/DV,EAAMV,oBAMNuB,SAAWC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,oBAAVJ,CAKvB,CAAA,qEAEM,MAAMK,KAAOL,gBAAAA,QAAOC,IAAIC,WAAsC,CACnEI,kBAAmBpC,kCACnBgC,WAAA,CAAAC,YAAA,uBAAAC,YAAA,oBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KACGd,IACD,MAAMqB,EAAc,MAEpB,MAAO,yGAIMrB,EAAMsB,OAAS,cAAgB,0BAChCtB,EAAMF,SAAW,cAAgB,oHAIjCuB,wCACCrB,EAAMuB,QAAU,4BACfvB,EAAMwB,UAAY,wJAKxBX,+BACMQ,sBACDA,wBAGT3B,MAAKA,MACL,oCAGA,6CAEH,IAGAM,GACDA,EAAMO,MACF,mCACwBP,EAAMC,MAAMC,OAAOuB,oBAAoBzB,EAAMC,MAAMC,OAAO,4KAOlF,+DAE0BF,EAAMC,MAAMC,OAAOuB,oBAAoBzB,EAAMC,MAAMC,OAAO,0MASvFF,IACD,IAAI0B,EAAS9B,aAAagB,QAK1B,OAHIZ,EAAMW,YAAWe,EAAS9B,aAAae,YACvCX,EAAMH,UAAYG,EAAM2B,aAAWD,EAAS9B,aAAaC,UAEzDG,EAAMF,SAAiB4B,EAAO5B,SAC9BE,EAAMI,MAAcsB,EAAOtB,MAC3BJ,EAAMK,QAAgBqB,EAAOrB,QAE1BqB,EAAOpB,OAAO,GAGrBsB,eAAAA,eACAC,iBAAAA,kBAGG,MAAMC,UAAYhB,gBAAAA,QAAOC,IAAIC,WAAiC,CACnEI,kBAAmBhC,6BACnB4B,WAAA,CAAAC,YAAA,4BAAAC,YAAA,oBAFuBJ,CAEvB,CAAA,GAAA,IAAA,IAAA,KACGd,GAAU,gJAMEA,EAAM+B,MAAQ,UAG3BH,eAAcA,eACdC,iBAAgBA"}
@@ -1,2 +1,2 @@
1
- import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardFormInputLabelProp=createShouldForwardProp((o=>!['primary','secondary','error','success','focus','disabled','onColored','inline','zIndex','overflow'].includes(o)));const shouldForwardContainerProp=createShouldForwardProp((o=>!['grow'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n ${hover(`\n background-color: ${o.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-secondary']:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," "," ",""],(o=>{const r='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${r} solid transparent;\n z-index: ${o.zIndex??'auto'};\n overflow: ${o.overflow??'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${r};\n left: -${r};\n }\n\n ${hover("\n opacity: 0;\n ",'&:hover [data-input-fading]::after')}\n `}),(o=>o.focus?`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `:`\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `),(o=>{let r=COLOR_SCHEMA.primary;return o.secondary&&(r=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(r=COLOR_SCHEMA.contrast),o.disabled?r.disabled:o.error?r.error:o.success?r.success:r.default}),responsiveSize,responsiveMargin);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardContainerProp}).withConfig({displayName:"FormInputLabel__Container",componentId:"ui__sc-1il4atw-2"})([""," "," ",""],(o=>`\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${o.grow??0};\n `),responsiveSize,responsiveMargin);export{Container,Dropdown,Root};
1
+ import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardFormInputLabelProp=createShouldForwardProp((o=>!['primary','secondary','error','success','focus','disabled','onColored','inline','zIndex','overflow'].includes(o)));const shouldForwardContainerProp=createShouldForwardProp((o=>!['grow'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n ${hover(`\n background-color: ${o.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-secondary']:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," "," ",""],(o=>{const r='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n line-height: normal;\n border: ${r} solid transparent;\n z-index: ${o.zIndex??'auto'};\n overflow: ${o.overflow??'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${r};\n left: -${r};\n }\n\n ${hover("\n opacity: 0;\n ",'&:hover [data-input-fading]::after')}\n `}),(o=>o.focus?`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `:`\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `),(o=>{let r=COLOR_SCHEMA.primary;return o.secondary&&(r=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(r=COLOR_SCHEMA.contrast),o.disabled?r.disabled:o.error?r.error:o.success?r.success:r.default}),responsiveSize,responsiveMargin);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardContainerProp}).withConfig({displayName:"FormInputLabel__Container",componentId:"ui__sc-1il4atw-2"})([""," "," ",""],(o=>`\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${o.grow??0};\n `),responsiveSize,responsiveMargin);export{Container,Dropdown,Root};
2
2
  //# sourceMappingURL=style.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'error',\n 'success',\n 'focus',\n 'disabled',\n 'onColored',\n 'inline',\n 'zIndex',\n 'overflow',\n ].includes(propKey)\n)\n\nconst shouldForwardContainerProp = createShouldForwardProp((propKey) => !['grow'].includes(propKey))\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n background-color: ${palette.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n overflow: ${props.overflow ?? 'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n ${hover(\n `\n opacity: 0;\n `,\n '&:hover [data-input-fading]::after'\n )}\n `\n }}\n\n ${(props) =>\n props.focus\n ? `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `\n : `\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `}\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<StyledContainerProps>({\n shouldForwardProp: shouldForwardContainerProp,\n})`\n ${(props) => `\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${props.grow ?? 0};\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","shouldForwardContainerProp","template","palette","color","backgroundColor","borderColor","hover","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Container","grow"],"mappings":"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"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'error',\n 'success',\n 'focus',\n 'disabled',\n 'onColored',\n 'inline',\n 'zIndex',\n 'overflow',\n ].includes(propKey)\n)\n\nconst shouldForwardContainerProp = createShouldForwardProp((propKey) => !['grow'].includes(propKey))\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n background-color: ${palette.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n line-height: normal;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n overflow: ${props.overflow ?? 'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n ${hover(\n `\n opacity: 0;\n `,\n '&:hover [data-input-fading]::after'\n )}\n `\n }}\n\n ${(props) =>\n props.focus\n ? `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `\n : `\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `}\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<StyledContainerProps>({\n shouldForwardProp: shouldForwardContainerProp,\n})`\n ${(props) => `\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${props.grow ?? 0};\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","shouldForwardContainerProp","template","palette","color","backgroundColor","borderColor","hover","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Container","grow"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- 'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var renderSlot=require('../../shared/utils/renderSlot.js');var sizes=require('./sizes.js');var style=require('./style.js');var layouts=require('./layouts.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');var index=require('../../icon-pack/src/icons/InfoCircle/index.js');var index$1=require('../../icon-pack/src/icons/Close/index.js');const createText=(e,s)=>typeof e=='string'||typeof e=='number'?jsxRuntime.jsx(Text.Text,{...s,children:e}):null;const Notification=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const{size:t="m",status:r="system",withIcon:o=!1,layout:n="horizontal",discardButton:i,icon:a,children:l,content:c,title:u,text:d,addon:p,sizeXXS:x,sizeXS:S,sizeS:j,sizeM:y,sizeL:z,sizeXL:m,layoutXXS:T,layoutXS:h,layoutS:I,layoutM:R,layoutL:X,layoutXL:b,...f}=e;const P={size:t,sizeXXS:x,sizeXS:S,sizeS:j,sizeM:y,sizeL:z,sizeXL:m};const k={layout:n,layoutXXS:T,layoutXS:h,layoutS:I,layoutM:R,layoutL:X,layoutXL:b};const w={...P,preset:'brand',icon:jsxRuntime.jsx(index.InfoCircle,{}),sizes:sizes.SIZES_ICON};const q={...P,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',weight:700,sizes:d?sizes.SIZES_TITLE:sizes.SIZES_TITLE_WITHOUT_TEXT};const L={...P,as:'p',appearance:'body',wordBreak:'break-word',color:'content-onmain-primary',sizes:sizes.SIZES_TEXT};const v={...P,preset:'brand',black:!0,sizes:sizes.SIZES_ACTION};const E={...P,preset:'brand',underline:!0,textProps:{appearance:'body',wordBreak:'break-word'}};const N={...P,icon:jsxRuntime.jsx(index$1.Close,{}),square:!0};const C={iconProps:w,titleProps:q,textProps:L,buttonProps:v,anchorProps:E,discardButtonProps:N};return jsxRuntime.jsx(style.Root,{...f,...P,status:r,ref:s,children:l?renderSlot.renderSlot({slot:l,props:C}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[o?jsxRuntime.jsx(style.Icon,{children:renderSlot.renderSlot({slot:a,props:w,fallback:jsxRuntime.jsx(Icon.Icon,{...w})})}):null,jsxRuntime.jsxs(style.Container,{...k,layouts:layouts.LAYOUTS_CONTAINER,children:[jsxRuntime.jsx(style.Content,{children:renderSlot.renderSlot({slot:c,props:{titleProps:q,textProps:L},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[renderSlot.renderSlot({slot:u,props:q,fallback:createText(u,q)}),renderSlot.renderSlot({slot:d,props:L,fallback:createText(d,L)})]})})}),p?jsxRuntime.jsx(style.Addon,{...k,layouts:layouts.LAYOUTS_ADDON,children:renderSlot.renderSlot({slot:p,props:{anchorProps:E,buttonProps:v}})}):null]}),i?jsxRuntime.jsx(style.DiscardButton,{children:renderSlot.renderSlot({slot:i,props:N})}):null]})})})),{displayName:'Notification',sizes:sizes.SIZES});exports.Notification=Notification;
1
+ 'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');var Anchor=require('../Anchor/Anchor.js');var IconButton=require('../IconButton/IconButton.js');var index=require('../../icon-pack/src/icons/Close/index.js');var index$1=require('../../icon-pack/src/icons/InfoCircle/index.js');var index$2=require('../../icon-pack/src/icons/CloseCirlce/index.js');var index$3=require('../../icon-pack/src/icons/CheckCircle/index.js');var index$4=require('../../icon-pack/src/icons/WarningTriangle/index.js');const Notification=withMergedProps.withMergedProps(React.forwardRef(((e,n)=>{const{size:s="m",status:i="system",iconProps:r={},discardButtonProps:t={},titleProps:o={},textProps:c={},actionButtonProps:a={},anchorProps:x={},title:u,text:l,hideIcon:j,sizeXXS:d,sizeXS:p,sizeS:m,sizeM:h,sizeL:R,sizeXL:C,...I}=e;const k={size:s,sizeXXS:d,sizeXS:p,sizeS:m,sizeM:h,sizeL:R,sizeXL:C};const v={system:jsxRuntime.jsx(index$1.InfoCircle,{}),info:jsxRuntime.jsx(index$1.InfoCircle,{}),error:jsxRuntime.jsx(index$2.CloseCirlce,{}),success:jsxRuntime.jsx(index$3.CheckCircle,{}),warning:jsxRuntime.jsx(index$4.WarningTriangle,{})};return jsxRuntime.jsxs(style.Root,{...I,...k,status:i,ref:n,children:[!j&&jsxRuntime.jsx(style.Spacer,{children:jsxRuntime.jsx(Icon.Icon,{preset:"brand",icon:r.name||r.icon?void 0:v[i],sizes:constants.SIZES_ICON,...k,...r})}),jsxRuntime.jsxs(style.Container,{children:[jsxRuntime.jsxs(style.Content,{children:[u?jsxRuntime.jsx(Text.Text,{as:"p",appearance:"body",weight:700,wordBreak:"break-word",color:"content-onmain-primary",...k,...o,children:u}):null,l?jsxRuntime.jsx(Text.Text,{as:"p",appearance:"body",wordBreak:"break-word",color:"content-onmain-primary",marginTop:u?'0.2em':void 0,sizes:constants.SIZES_TEXT,...k,...c,children:l}):null]}),a.onClick||x.href||x.to?jsxRuntime.jsxs(style.Controls,{children:[a.onClick?jsxRuntime.jsx(Button.Button,{preset:"brand",black:!0,sizes:constants.SIZES_ACTION,...k,...a}):null,x.href||x.to?jsxRuntime.jsx(Anchor.Anchor,{preset:"brand",underline:!0,palette:{color:'content-onmain-primary'},textProps:{appearance:'body',wordBreak:'break-word'},marginLeft:a.onClick?'0.6em':void 0,...k,...x}):null]}):null]}),t.onClick?jsxRuntime.jsx(style.Spacer,{children:jsxRuntime.jsx(IconButton.IconButton,{icon:jsxRuntime.jsx(index.Close,{}),square:!0,...k,...t})}):null]})})),{displayName:'Notification',sizes:constants.SIZES});exports.Notification=Notification;
2
2
  //# sourceMappingURL=Notification.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Notification.js","sources":["../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Close, InfoCircle } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport type { IconProps } from 'components/Icon'\nimport { Icon } from 'components/Icon'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ButtonProps } from 'components/Button'\nimport type { AnchorProps } from 'components/Anchor'\nimport type { TextProps } from 'components/Text'\nimport { Text } from 'components/Text'\nimport { renderSlot } from 'shared/utils/renderSlot'\nimport { SIZES, SIZES_ICON, SIZES_TEXT, SIZES_ACTION, SIZES_TITLE, SIZES_TITLE_WITHOUT_TEXT } from './sizes'\nimport * as Styled from './style'\nimport type { NotificationProps } from './types'\nimport { LAYOUTS_ADDON, LAYOUTS_CONTAINER } from './layouts'\n\nconst COMPONENT_NAME = 'Notification'\n\nconst createText = (content: unknown, props: TextProps) => {\n return typeof content === 'string' || typeof content === 'number' ? <Text {...props}>{content}</Text> : null\n}\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для отображения информационных сообщений, встроенных в интерфейс.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n */\nconst Notification: React.ForwardRefExoticComponent<NotificationProps> = withMergedProps<\n NotificationProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<NotificationProps>>((props, ref) => {\n const {\n size = 'm',\n status = 'system',\n withIcon = false,\n layout = 'horizontal',\n discardButton,\n icon,\n children,\n content,\n title,\n text,\n addon,\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 = {\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 iconProps: IconProps = {\n ...sizeProps,\n preset: 'brand',\n icon: <InfoCircle />,\n sizes: SIZES_ICON,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n weight: 700,\n sizes: text ? SIZES_TITLE : SIZES_TITLE_WITHOUT_TEXT,\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n wordBreak: 'break-word',\n color: 'content-onmain-primary',\n sizes: SIZES_TEXT,\n }\n\n const buttonProps: ButtonProps = {\n ...sizeProps,\n preset: 'brand',\n black: true,\n sizes: SIZES_ACTION,\n }\n\n const anchorProps: AnchorProps = {\n ...sizeProps,\n preset: 'brand',\n underline: true,\n textProps: {\n appearance: 'body',\n wordBreak: 'break-word',\n },\n }\n\n const discardButtonProps: IconButtonProps = {\n ...sizeProps,\n icon: <Close />,\n square: true,\n }\n\n const rootProps = { iconProps, titleProps, textProps, buttonProps, anchorProps, discardButtonProps }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} status={status} ref={ref}>\n {children ? (\n renderSlot({\n slot: children,\n props: rootProps,\n })\n ) : (\n <>\n {withIcon ? (\n <Styled.Icon>\n {renderSlot({\n slot: icon,\n props: iconProps,\n fallback: <Icon {...iconProps} />,\n })}\n </Styled.Icon>\n ) : null}\n\n <Styled.Container {...layoutProps} layouts={LAYOUTS_CONTAINER}>\n <Styled.Content>\n {renderSlot({\n slot: content,\n props: { titleProps, textProps },\n fallback: (\n <>\n {renderSlot({\n slot: title,\n props: titleProps,\n fallback: createText(title, titleProps),\n })}\n {renderSlot({\n slot: text,\n props: textProps,\n fallback: createText(text, textProps),\n })}\n </>\n ),\n })}\n </Styled.Content>\n\n {addon ? (\n <Styled.Addon {...layoutProps} layouts={LAYOUTS_ADDON}>\n {renderSlot({\n slot: addon,\n props: { anchorProps, buttonProps },\n })}\n </Styled.Addon>\n ) : null}\n </Styled.Container>\n\n {discardButton ? (\n <Styled.DiscardButton>\n {renderSlot({\n slot: discardButton,\n props: discardButtonProps,\n })}\n </Styled.DiscardButton>\n ) : null}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Notification }\n"],"names":["createText","content","props","_jsx","jsx","Text","children","Notification","withMergedProps","forwardRef","ref","size","status","withIcon","layout","discardButton","icon","title","text","addon","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","restProps","sizeProps","layoutProps","iconProps","preset","InfoCircle","sizes","SIZES_ICON","titleProps","as","appearance","color","wordBreak","weight","SIZES_TITLE","SIZES_TITLE_WITHOUT_TEXT","textProps","SIZES_TEXT","buttonProps","black","SIZES_ACTION","anchorProps","underline","discardButtonProps","Close","square","rootProps","Styled","renderSlot","slot","_jsxs","jsxs","_Fragment","fallback","Icon","layouts","LAYOUTS_CONTAINER","LAYOUTS_ADDON","displayName","SIZES"],"mappings":"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"}
1
+ {"version":3,"file":"Notification.js","sources":["../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { InfoCircle, CloseCirlce, CheckCircle, WarningTriangle, Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { IconButton } from 'components/IconButton'\nimport { Button } from 'components/Button'\nimport { Anchor } from 'components/Anchor'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_ICON, SIZES_TEXT, SIZES_ACTION } from './constants'\nimport * as Styled from './style'\nimport type { NotificationProps, NotificationStatus } from './types'\n\nconst COMPONENT_NAME = 'Notification'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/Notification/types.ts).\n */\nconst Notification: React.ForwardRefExoticComponent<NotificationProps> = withMergedProps<\n NotificationProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<NotificationProps>>((props, ref) => {\n const {\n size = 'm',\n status = 'system',\n iconProps = {},\n discardButtonProps = {},\n titleProps = {},\n textProps = {},\n actionButtonProps = {},\n anchorProps = {},\n title,\n text,\n hideIcon,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\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 statusIcons: Record<NotificationStatus, JSX.Element> = {\n system: <InfoCircle />,\n info: <InfoCircle />,\n error: <CloseCirlce />,\n success: <CheckCircle />,\n warning: <WarningTriangle />,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} status={status} ref={ref}>\n {!hideIcon && (\n <Styled.Spacer>\n <Icon\n preset='brand'\n icon={!iconProps.name && !iconProps.icon ? statusIcons[status] : undefined}\n sizes={SIZES_ICON}\n {...sizeProps}\n {...iconProps}\n />\n </Styled.Spacer>\n )}\n <Styled.Container>\n <Styled.Content>\n {title ? (\n <Text\n as='p'\n appearance='body'\n weight={700}\n wordBreak='break-word'\n color='content-onmain-primary'\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n ) : null}\n {text ? (\n <Text\n as='p'\n appearance='body'\n wordBreak='break-word'\n color='content-onmain-primary'\n marginTop={title ? '0.2em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...textProps}\n >\n {text}\n </Text>\n ) : null}\n </Styled.Content>\n {actionButtonProps.onClick || anchorProps.href || anchorProps.to ? (\n <Styled.Controls>\n {actionButtonProps.onClick ? (\n <Button preset='brand' black sizes={SIZES_ACTION} {...sizeProps} {...actionButtonProps} />\n ) : null}\n {anchorProps.href || anchorProps.to ? (\n <Anchor\n preset='brand'\n underline\n palette={{\n color: 'content-onmain-primary',\n }}\n textProps={{\n appearance: 'body',\n wordBreak: 'break-word',\n }}\n marginLeft={actionButtonProps.onClick ? '0.6em' : undefined}\n {...sizeProps}\n {...anchorProps}\n />\n ) : null}\n </Styled.Controls>\n ) : null}\n </Styled.Container>\n {discardButtonProps.onClick ? (\n <Styled.Spacer>\n <IconButton icon={<Close />} square {...sizeProps} {...discardButtonProps} />\n </Styled.Spacer>\n ) : null}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Notification }\n"],"names":["Notification","withMergedProps","forwardRef","props","ref","size","status","iconProps","discardButtonProps","titleProps","textProps","actionButtonProps","anchorProps","title","text","hideIcon","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","sizeProps","statusIcons","system","_jsx","InfoCircle","info","error","CloseCirlce","success","CheckCircle","warning","WarningTriangle","_jsxs","Styled","children","jsx","Icon","preset","icon","name","undefined","sizes","SIZES_ICON","jsxs","Text","as","appearance","weight","wordBreak","color","marginTop","SIZES_TEXT","onClick","href","to","Button","black","SIZES_ACTION","Anchor","underline","palette","marginLeft","IconButton","Close","square","displayName","SIZES"],"mappings":"owBAyBMA,MAAAA,aAAmEC,gBAAAA,gBAIvEC,MAAAA,YAA2D,CAACC,EAAOC,KACjE,MAAMC,KACJA,EAAO,IAAGC,OACVA,EAAS,SAAQC,UACjBA,EAAY,CAAE,EAAAC,mBACdA,EAAqB,CAAE,EAAAC,WACvBA,EAAa,CAAE,EAAAC,UACfA,EAAY,CAAE,EAAAC,kBACdA,EAAoB,CAAE,EAAAC,YACtBA,EAAc,CAAE,EAAAC,MAChBA,EAAKC,KACLA,EAAIC,SACJA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDnB,EAEJ,MAAMoB,EAAY,CAChBlB,OACAW,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMG,EAAuD,CAC3DC,OAAQC,WAAAA,IAACC,QAAUA,eACnBC,KAAMF,WAAAA,IAACC,QAAUA,eACjBE,MAAOH,WAAAA,IAACI,QAAWA,gBACnBC,QAASL,WAAAA,IAACM,QAAWA,gBACrBC,QAASP,WAAAA,IAACQ,QAAeA,gBAAE,KAG7B,OACEC,WAAAA,KAACC,MAAAA,KAAW,IAAKd,KAAeC,EAAWjB,OAAQA,EAAQF,IAAKA,EAAIiC,SAAA,EAChEtB,GACAW,WAAAA,IAACU,MAAAA,OAAa,CAAAC,SACZX,WAAAY,IAACC,UAAI,CACHC,OAAO,QACPC,KAAOlC,EAAUmC,MAASnC,EAAUkC,UAA6BE,EAAtBnB,EAAYlB,GACvDsC,MAAOC,UAAWA,cACdtB,KACAhB,MAIV4B,WAAAW,KAACV,gBAAgB,CAAAC,SACfF,CAAAA,WAAAW,KAACV,cAAc,CAAAC,SACZxB,CAAAA,EACCa,WAAAY,IAACS,UAAI,CACHC,GAAG,IACHC,WAAW,OACXC,OAAQ,IACRC,UAAU,aACVC,MAAM,4BACF7B,KACAd,EAAU4B,SAEbxB,IAED,KACHC,EACCY,WAAAA,IAACqB,KAAAA,KAAI,CACHC,GAAG,IACHC,WAAW,OACXE,UAAU,aACVC,MAAM,yBACNC,UAAWxC,EAAQ,aAAU8B,EAC7BC,MAAOU,UAAWA,cACd/B,KACAb,EAAS2B,SAEZvB,IAED,QAELH,EAAkB4C,SAAW3C,EAAY4C,MAAQ5C,EAAY6C,GAC5DtB,WAAAW,KAACV,eAAe,CAAAC,UACb1B,EAAkB4C,QACjB7B,WAAAA,IAACgC,OAAAA,OAAM,CAAClB,OAAO,QAAQmB,OAAK,EAACf,MAAOgB,UAAaA,gBAAKrC,KAAeZ,IACnE,KACHC,EAAY4C,MAAQ5C,EAAY6C,GAC/B/B,WAAAY,IAACuB,cAAM,CACLrB,OAAO,QACPsB,WAAS,EACTC,QAAS,CACPX,MAAO,0BAET1C,UAAW,CACTuC,WAAY,OACZE,UAAW,cAEba,WAAYrD,EAAkB4C,QAAU,aAAUZ,KAC9CpB,KACAX,IAEJ,QAEJ,QAELJ,EAAmB+C,QAClB7B,WAAAA,IAACU,MAAAA,OAAa,CAAAC,SACZX,WAAAY,IAAC2B,sBAAU,CAACxB,KAAMf,WAAAA,IAACwC,MAAKA,UAAKC,QAAM,KAAK5C,KAAef,MAEvD,OACQ,IAGlB,CACE4D,YApImB,eAqInBxB,MAAOyB,UAAAA"}
@@ -1,2 +1,2 @@
1
- import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{renderSlot}from'../../shared/utils/renderSlot.mjs';import{SIZES,SIZES_ICON,SIZES_TITLE,SIZES_TITLE_WITHOUT_TEXT,SIZES_TEXT,SIZES_ACTION}from'./sizes.mjs';import{Root,Icon,Container,Content,Addon,DiscardButton}from'./style.mjs';import{LAYOUTS_CONTAINER,LAYOUTS_ADDON}from'./layouts.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Icon as Icon$1}from'../Icon/Icon.mjs';import{Text}from'../Text/Text.mjs';import{InfoCircle}from'../../icon-pack/src/icons/InfoCircle/index.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const createText=(o,t)=>typeof o=='string'||typeof o=='number'?jsx(Text,{...t,children:o}):null;const Notification=withMergedProps(forwardRef(((o,t)=>{const{size:r="m",status:e="system",withIcon:s=!1,layout:n="horizontal",discardButton:i,icon:a,children:l,content:c,title:p,text:d,addon:S,sizeXXS:m,sizeXS:u,sizeS:I,sizeM:T,sizeL:x,sizeXL:f,layoutXXS:y,layoutXS:j,layoutS:E,layoutM:z,layoutL:h,layoutXL:X,..._}=o;const b={size:r,sizeXXS:m,sizeXS:u,sizeS:I,sizeM:T,sizeL:x,sizeXL:f};const C={layout:n,layoutXXS:y,layoutXS:j,layoutS:E,layoutM:z,layoutL:h,layoutXL:X};const L={...b,preset:'brand',icon:jsx(InfoCircle,{}),sizes:SIZES_ICON};const N={...b,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',weight:700,sizes:d?SIZES_TITLE:SIZES_TITLE_WITHOUT_TEXT};const O={...b,as:'p',appearance:'body',wordBreak:'break-word',color:'content-onmain-primary',sizes:SIZES_TEXT};const P={...b,preset:'brand',black:!0,sizes:SIZES_ACTION};const k={...b,preset:'brand',underline:!0,textProps:{appearance:'body',wordBreak:'break-word'}};const w={...b,icon:jsx(Close,{}),square:!0};const A={iconProps:L,titleProps:N,textProps:O,buttonProps:P,anchorProps:k,discardButtonProps:w};return jsx(Root,{..._,...b,status:e,ref:t,children:l?renderSlot({slot:l,props:A}):jsxs(Fragment,{children:[s?jsx(Icon,{children:renderSlot({slot:a,props:L,fallback:jsx(Icon$1,{...L})})}):null,jsxs(Container,{...C,layouts:LAYOUTS_CONTAINER,children:[jsx(Content,{children:renderSlot({slot:c,props:{titleProps:N,textProps:O},fallback:jsxs(Fragment,{children:[renderSlot({slot:p,props:N,fallback:createText(p,N)}),renderSlot({slot:d,props:O,fallback:createText(d,O)})]})})}),S?jsx(Addon,{...C,layouts:LAYOUTS_ADDON,children:renderSlot({slot:S,props:{anchorProps:k,buttonProps:P}})}):null]}),i?jsx(DiscardButton,{children:renderSlot({slot:i,props:w})}):null]})})})),{displayName:'Notification',sizes:SIZES});export{Notification};
1
+ import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_ICON,SIZES_TEXT,SIZES_ACTION}from'./constants.mjs';import{Root,Spacer,Container,Content,Controls}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';import{Anchor}from'../Anchor/Anchor.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';import{InfoCircle}from'../../icon-pack/src/icons/InfoCircle/index.mjs';import{CloseCirlce}from'../../icon-pack/src/icons/CloseCirlce/index.mjs';import{CheckCircle}from'../../icon-pack/src/icons/CheckCircle/index.mjs';import{WarningTriangle}from'../../icon-pack/src/icons/WarningTriangle/index.mjs';const Notification=withMergedProps(forwardRef(((o,r)=>{const{size:e="m",status:n="system",iconProps:i={},discardButtonProps:s={},titleProps:t={},textProps:c={},actionButtonProps:a={},anchorProps:m={},title:l,text:p,hideIcon:d,sizeXXS:x,sizeXS:j,sizeS:C,sizeM:f,sizeL:I,sizeXL:S,...h}=o;const u={size:e,sizeXXS:x,sizeXS:j,sizeS:C,sizeM:f,sizeL:I,sizeXL:S};const k={system:jsx(InfoCircle,{}),info:jsx(InfoCircle,{}),error:jsx(CloseCirlce,{}),success:jsx(CheckCircle,{}),warning:jsx(WarningTriangle,{})};return jsxs(Root,{...h,...u,status:n,ref:r,children:[!d&&jsx(Spacer,{children:jsx(Icon,{preset:"brand",icon:i.name||i.icon?void 0:k[n],sizes:SIZES_ICON,...u,...i})}),jsxs(Container,{children:[jsxs(Content,{children:[l?jsx(Text,{as:"p",appearance:"body",weight:700,wordBreak:"break-word",color:"content-onmain-primary",...u,...t,children:l}):null,p?jsx(Text,{as:"p",appearance:"body",wordBreak:"break-word",color:"content-onmain-primary",marginTop:l?'0.2em':void 0,sizes:SIZES_TEXT,...u,...c,children:p}):null]}),a.onClick||m.href||m.to?jsxs(Controls,{children:[a.onClick?jsx(Button,{preset:"brand",black:!0,sizes:SIZES_ACTION,...u,...a}):null,m.href||m.to?jsx(Anchor,{preset:"brand",underline:!0,palette:{color:'content-onmain-primary'},textProps:{appearance:'body',wordBreak:'break-word'},marginLeft:a.onClick?'0.6em':void 0,...u,...m}):null]}):null]}),s.onClick?jsx(Spacer,{children:jsx(IconButton,{icon:jsx(Close,{}),square:!0,...u,...s})}):null]})})),{displayName:'Notification',sizes:SIZES});export{Notification};
2
2
  //# sourceMappingURL=Notification.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Notification.mjs","sources":["../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Close, InfoCircle } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport type { IconProps } from 'components/Icon'\nimport { Icon } from 'components/Icon'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ButtonProps } from 'components/Button'\nimport type { AnchorProps } from 'components/Anchor'\nimport type { TextProps } from 'components/Text'\nimport { Text } from 'components/Text'\nimport { renderSlot } from 'shared/utils/renderSlot'\nimport { SIZES, SIZES_ICON, SIZES_TEXT, SIZES_ACTION, SIZES_TITLE, SIZES_TITLE_WITHOUT_TEXT } from './sizes'\nimport * as Styled from './style'\nimport type { NotificationProps } from './types'\nimport { LAYOUTS_ADDON, LAYOUTS_CONTAINER } from './layouts'\n\nconst COMPONENT_NAME = 'Notification'\n\nconst createText = (content: unknown, props: TextProps) => {\n return typeof content === 'string' || typeof content === 'number' ? <Text {...props}>{content}</Text> : null\n}\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для отображения информационных сообщений, встроенных в интерфейс.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n */\nconst Notification: React.ForwardRefExoticComponent<NotificationProps> = withMergedProps<\n NotificationProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<NotificationProps>>((props, ref) => {\n const {\n size = 'm',\n status = 'system',\n withIcon = false,\n layout = 'horizontal',\n discardButton,\n icon,\n children,\n content,\n title,\n text,\n addon,\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 = {\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 iconProps: IconProps = {\n ...sizeProps,\n preset: 'brand',\n icon: <InfoCircle />,\n sizes: SIZES_ICON,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n weight: 700,\n sizes: text ? SIZES_TITLE : SIZES_TITLE_WITHOUT_TEXT,\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n wordBreak: 'break-word',\n color: 'content-onmain-primary',\n sizes: SIZES_TEXT,\n }\n\n const buttonProps: ButtonProps = {\n ...sizeProps,\n preset: 'brand',\n black: true,\n sizes: SIZES_ACTION,\n }\n\n const anchorProps: AnchorProps = {\n ...sizeProps,\n preset: 'brand',\n underline: true,\n textProps: {\n appearance: 'body',\n wordBreak: 'break-word',\n },\n }\n\n const discardButtonProps: IconButtonProps = {\n ...sizeProps,\n icon: <Close />,\n square: true,\n }\n\n const rootProps = { iconProps, titleProps, textProps, buttonProps, anchorProps, discardButtonProps }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} status={status} ref={ref}>\n {children ? (\n renderSlot({\n slot: children,\n props: rootProps,\n })\n ) : (\n <>\n {withIcon ? (\n <Styled.Icon>\n {renderSlot({\n slot: icon,\n props: iconProps,\n fallback: <Icon {...iconProps} />,\n })}\n </Styled.Icon>\n ) : null}\n\n <Styled.Container {...layoutProps} layouts={LAYOUTS_CONTAINER}>\n <Styled.Content>\n {renderSlot({\n slot: content,\n props: { titleProps, textProps },\n fallback: (\n <>\n {renderSlot({\n slot: title,\n props: titleProps,\n fallback: createText(title, titleProps),\n })}\n {renderSlot({\n slot: text,\n props: textProps,\n fallback: createText(text, textProps),\n })}\n </>\n ),\n })}\n </Styled.Content>\n\n {addon ? (\n <Styled.Addon {...layoutProps} layouts={LAYOUTS_ADDON}>\n {renderSlot({\n slot: addon,\n props: { anchorProps, buttonProps },\n })}\n </Styled.Addon>\n ) : null}\n </Styled.Container>\n\n {discardButton ? (\n <Styled.DiscardButton>\n {renderSlot({\n slot: discardButton,\n props: discardButtonProps,\n })}\n </Styled.DiscardButton>\n ) : null}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Notification }\n"],"names":["createText","content","props","_jsx","Text","children","Notification","withMergedProps","forwardRef","ref","size","status","withIcon","layout","discardButton","icon","title","text","addon","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","restProps","sizeProps","layoutProps","iconProps","preset","InfoCircle","sizes","SIZES_ICON","titleProps","as","appearance","color","wordBreak","weight","SIZES_TITLE","SIZES_TITLE_WITHOUT_TEXT","textProps","SIZES_TEXT","buttonProps","black","SIZES_ACTION","anchorProps","underline","discardButtonProps","Close","square","rootProps","Styled","renderSlot","slot","_jsxs","_Fragment","fallback","Icon","layouts","LAYOUTS_CONTAINER","LAYOUTS_ADDON","displayName","SIZES"],"mappings":"ooBAmBA,MAAMA,WAAaA,CAACC,EAAkBC,WACtBD,GAAY,iBAAmBA,GAAY,SAAWE,IAACC,KAAI,IAAKF,EAAKG,SAAGJ,IAAkB,KAYpGK,MAAAA,aAAmEC,gBAIvEC,YAA2D,CAACN,EAAOO,KACjE,MAAMC,KACJA,EAAO,IAAGC,OACVA,EAAS,SAAQC,SACjBA,GAAW,EAAKC,OAChBA,EAAS,aAAYC,cACrBA,EAAaC,KACbA,EAAIV,SACJA,EAAQJ,QACRA,EAAOe,MACPA,EAAKC,KACLA,EAAIC,MACJA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,SACTA,EAAQC,QACRA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,SACPA,KACGC,GACD7B,EAEJ,MAAM8B,EAAY,CAChBtB,OACAS,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMS,EAAc,CAClBpB,SACAY,YACAC,WACAC,UACAC,UACAC,UACAC,YAGF,MAAMI,EAAuB,IACxBF,EACHG,OAAQ,QACRpB,KAAMZ,IAACiC,eACPC,MAAOC,YAGT,MAAMC,EAAwB,IACzBP,EACHQ,GAAI,IACJC,WAAY,OACZC,MAAO,yBACPC,UAAW,aACXC,OAAQ,IACRP,MAAOpB,EAAO4B,YAAcC,0BAG9B,MAAMC,EAAuB,IACxBf,EACHQ,GAAI,IACJC,WAAY,OACZE,UAAW,aACXD,MAAO,yBACPL,MAAOW,YAGT,MAAMC,EAA2B,IAC5BjB,EACHG,OAAQ,QACRe,OAAO,EACPb,MAAOc,cAGT,MAAMC,EAA2B,IAC5BpB,EACHG,OAAQ,QACRkB,WAAW,EACXN,UAAW,CACTN,WAAY,OACZE,UAAW,eAIf,MAAMW,EAAsC,IACvCtB,EACHjB,KAAMZ,IAACoD,UACPC,QAAQ,GAGV,MAAMC,EAAY,CAAEvB,YAAWK,aAAYQ,YAAWE,cAAaG,cAAaE,sBAEhF,OACEnD,IAACuD,KAAW,IAAK3B,KAAeC,EAAWrB,OAAQA,EAAQF,IAAKA,EAAIJ,SACjEA,EACCsD,WAAW,CACTC,KAAMvD,EACNH,MAAOuD,IAGTI,KAAAC,SAAA,CAAAzD,UACGO,EACCT,IAACuD,KAAW,CAAArD,SACTsD,WAAW,CACVC,KAAM7C,EACNb,MAAOgC,EACP6B,SAAU5D,IAAC6D,OAAI,IAAK9B,QAGtB,KAEJ2B,KAACH,UAAgB,IAAKzB,EAAagC,QAASC,kBAAkB7D,SAC5DF,CAAAA,IAACuD,QAAc,CAAArD,SACZsD,WAAW,CACVC,KAAM3D,EACNC,MAAO,CAAEqC,aAAYQ,aACrBgB,SACEF,KAAAC,SAAA,CAAAzD,SAAA,CACGsD,WAAW,CACVC,KAAM5C,EACNd,MAAOqC,EACPwB,SAAU/D,WAAWgB,EAAOuB,KAE7BoB,WAAW,CACVC,KAAM3C,EACNf,MAAO6C,EACPgB,SAAU/D,WAAWiB,EAAM8B,YAOpC7B,EACCf,IAACuD,MAAY,IAAKzB,EAAagC,QAASE,cAAc9D,SACnDsD,WAAW,CACVC,KAAM1C,EACNhB,MAAO,CAAEkD,cAAaH,mBAGxB,QAGLnC,EACCX,IAACuD,cAAoB,CAAArD,SAClBsD,WAAW,CACVC,KAAM9C,EACNZ,MAAOoD,MAGT,SAGI,IAGlB,CACEc,YAvLmB,eAwLnB/B,MAAOgC"}
1
+ {"version":3,"file":"Notification.mjs","sources":["../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { InfoCircle, CloseCirlce, CheckCircle, WarningTriangle, Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { IconButton } from 'components/IconButton'\nimport { Button } from 'components/Button'\nimport { Anchor } from 'components/Anchor'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_ICON, SIZES_TEXT, SIZES_ACTION } from './constants'\nimport * as Styled from './style'\nimport type { NotificationProps, NotificationStatus } from './types'\n\nconst COMPONENT_NAME = 'Notification'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/Notification/types.ts).\n */\nconst Notification: React.ForwardRefExoticComponent<NotificationProps> = withMergedProps<\n NotificationProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<NotificationProps>>((props, ref) => {\n const {\n size = 'm',\n status = 'system',\n iconProps = {},\n discardButtonProps = {},\n titleProps = {},\n textProps = {},\n actionButtonProps = {},\n anchorProps = {},\n title,\n text,\n hideIcon,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\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 statusIcons: Record<NotificationStatus, JSX.Element> = {\n system: <InfoCircle />,\n info: <InfoCircle />,\n error: <CloseCirlce />,\n success: <CheckCircle />,\n warning: <WarningTriangle />,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} status={status} ref={ref}>\n {!hideIcon && (\n <Styled.Spacer>\n <Icon\n preset='brand'\n icon={!iconProps.name && !iconProps.icon ? statusIcons[status] : undefined}\n sizes={SIZES_ICON}\n {...sizeProps}\n {...iconProps}\n />\n </Styled.Spacer>\n )}\n <Styled.Container>\n <Styled.Content>\n {title ? (\n <Text\n as='p'\n appearance='body'\n weight={700}\n wordBreak='break-word'\n color='content-onmain-primary'\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n ) : null}\n {text ? (\n <Text\n as='p'\n appearance='body'\n wordBreak='break-word'\n color='content-onmain-primary'\n marginTop={title ? '0.2em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...textProps}\n >\n {text}\n </Text>\n ) : null}\n </Styled.Content>\n {actionButtonProps.onClick || anchorProps.href || anchorProps.to ? (\n <Styled.Controls>\n {actionButtonProps.onClick ? (\n <Button preset='brand' black sizes={SIZES_ACTION} {...sizeProps} {...actionButtonProps} />\n ) : null}\n {anchorProps.href || anchorProps.to ? (\n <Anchor\n preset='brand'\n underline\n palette={{\n color: 'content-onmain-primary',\n }}\n textProps={{\n appearance: 'body',\n wordBreak: 'break-word',\n }}\n marginLeft={actionButtonProps.onClick ? '0.6em' : undefined}\n {...sizeProps}\n {...anchorProps}\n />\n ) : null}\n </Styled.Controls>\n ) : null}\n </Styled.Container>\n {discardButtonProps.onClick ? (\n <Styled.Spacer>\n <IconButton icon={<Close />} square {...sizeProps} {...discardButtonProps} />\n </Styled.Spacer>\n ) : null}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Notification }\n"],"names":["Notification","withMergedProps","forwardRef","props","ref","size","status","iconProps","discardButtonProps","titleProps","textProps","actionButtonProps","anchorProps","title","text","hideIcon","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","sizeProps","statusIcons","system","_jsx","InfoCircle","info","error","CloseCirlce","success","CheckCircle","warning","WarningTriangle","_jsxs","Styled","children","Icon","preset","icon","name","undefined","sizes","SIZES_ICON","Text","as","appearance","weight","wordBreak","color","marginTop","SIZES_TEXT","onClick","href","to","Button","black","SIZES_ACTION","Anchor","underline","palette","marginLeft","IconButton","Close","square","displayName","SIZES"],"mappings":"4zBAyBMA,MAAAA,aAAmEC,gBAIvEC,YAA2D,CAACC,EAAOC,KACjE,MAAMC,KACJA,EAAO,IAAGC,OACVA,EAAS,SAAQC,UACjBA,EAAY,CAAE,EAAAC,mBACdA,EAAqB,CAAE,EAAAC,WACvBA,EAAa,CAAE,EAAAC,UACfA,EAAY,CAAE,EAAAC,kBACdA,EAAoB,CAAE,EAAAC,YACtBA,EAAc,CAAE,EAAAC,MAChBA,EAAKC,KACLA,EAAIC,SACJA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDnB,EAEJ,MAAMoB,EAAY,CAChBlB,OACAW,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMG,EAAuD,CAC3DC,OAAQC,IAACC,eACTC,KAAMF,IAACC,eACPE,MAAOH,IAACI,gBACRC,QAASL,IAACM,gBACVC,QAASP,IAACQ,gBAAiB,KAG7B,OACEC,KAACC,KAAW,IAAKd,KAAeC,EAAWjB,OAAQA,EAAQF,IAAKA,EAAIiC,SAAA,EAChEtB,GACAW,IAACU,OAAa,CAAAC,SACZX,IAACY,KAAI,CACHC,OAAO,QACPC,KAAOjC,EAAUkC,MAASlC,EAAUiC,UAA6BE,EAAtBlB,EAAYlB,GACvDqC,MAAOC,cACHrB,KACAhB,MAIV4B,KAACC,UAAgB,CAAAC,SACfF,CAAAA,KAACC,QAAc,CAAAC,SACZxB,CAAAA,EACCa,IAACmB,KAAI,CACHC,GAAG,IACHC,WAAW,OACXC,OAAQ,IACRC,UAAU,aACVC,MAAM,4BACF3B,KACAd,EAAU4B,SAEbxB,IAED,KACHC,EACCY,IAACmB,KAAI,CACHC,GAAG,IACHC,WAAW,OACXE,UAAU,aACVC,MAAM,yBACNC,UAAWtC,EAAQ,aAAU6B,EAC7BC,MAAOS,cACH7B,KACAb,EAAS2B,SAEZvB,IAED,QAELH,EAAkB0C,SAAWzC,EAAY0C,MAAQ1C,EAAY2C,GAC5DpB,KAACC,SAAe,CAAAC,UACb1B,EAAkB0C,QACjB3B,IAAC8B,OAAM,CAACjB,OAAO,QAAQkB,OAAK,EAACd,MAAOe,gBAAkBnC,KAAeZ,IACnE,KACHC,EAAY0C,MAAQ1C,EAAY2C,GAC/B7B,IAACiC,OAAM,CACLpB,OAAO,QACPqB,WAAS,EACTC,QAAS,CACPX,MAAO,0BAETxC,UAAW,CACTqC,WAAY,OACZE,UAAW,cAEba,WAAYnD,EAAkB0C,QAAU,aAAUX,KAC9CnB,KACAX,IAEJ,QAEJ,QAELJ,EAAmB6C,QAClB3B,IAACU,OAAa,CAAAC,SACZX,IAACqC,WAAU,CAACvB,KAAMd,IAACsC,UAAUC,QAAM,KAAK1C,KAAef,MAEvD,OACQ,IAGlB,CACE0D,YApImB,eAqInBvB,MAAOwB"}
@@ -0,0 +1,2 @@
1
+ 'use strict';var sizes=require('../Button/sizes.js');require('../Button/Button.js');const SIZES_ACTION={l:sizes.SIZES.l,m:sizes.SIZES.s,s:sizes.SIZES.s};exports.SIZES={l:{fontSize:20,padding:'0.8em 1em',borderRadius:12},m:{fontSize:16,padding:'0.8em 1em',borderRadius:10},s:{fontSize:12,padding:'0.8em 1em',borderRadius:8}},exports.SIZES_ACTION=SIZES_ACTION,exports.SIZES_ICON={l:{fontSize:28},m:{fontSize:24},s:{fontSize:20}},exports.SIZES_TEXT={l:{fontSize:18},m:{fontSize:16},s:{fontSize:14}};
2
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","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_ACTION","l","SIZES_BUTTON","SIZES","m","s","fontSize","padding","borderRadius"],"mappings":"oFAkCO,MAAMA,aAAwD,CACnEC,EAAGC,MAAYC,MAACF,EAChBG,EAAGF,MAAYC,MAACE,EAChBA,EAAGH,MAAYC,MAACE,iBAjC4C,CAC5DJ,EAAG,CACDK,SAAU,GACVC,QAAS,YACTC,aAAc,IAEhBJ,EAAG,CACDE,SAAU,GACVC,QAAS,YACTC,aAAc,IAEhBH,EAAG,CACDC,SAAU,GACVC,QAAS,YACTC,aAAc,yDAIiD,CACjEP,EAAG,CAAEK,SAAU,IACfF,EAAG,CAAEE,SAAU,IACfD,EAAG,CAAEC,SAAU,wBAGkD,CACjEL,EAAG,CAAEK,SAAU,IACfF,EAAG,CAAEE,SAAU,IACfD,EAAG,CAAEC,SAAU"}