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

package/components/Notification/layouts.mjs

@@ -0,0 +1,2 @@
+const LAYOUTS_CONTAINER={vertical:{flexDirection:'column'},horizontal:{flexDirection:'row'}};const LAYOUTS_ADDON={vertical:{marginTop:'var(--gap-container)'},horizontal:{marginTop:0}};export{LAYOUTS_ADDON,LAYOUTS_CONTAINER};
+//# sourceMappingURL=layouts.mjs.map

package/components/Notification/layouts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layouts.mjs","sources":["../../../../src/components/Notification/layouts.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Layout } from './types'\n\nexport const LAYOUTS_CONTAINER: Record<Layout, CSSProperties> = {\n  vertical: {\n    flexDirection: 'column',\n  },\n  horizontal: {\n    flexDirection: 'row',\n  },\n}\n\nexport const LAYOUTS_ADDON: Record<Layout, CSSProperties> = {\n  vertical: {\n    marginTop: 'var(--gap-container)',\n  },\n  horizontal: {\n    marginTop: 0,\n  },\n}\n"],"names":["LAYOUTS_CONTAINER","vertical","flexDirection","horizontal","LAYOUTS_ADDON","marginTop"],"mappings":"AAGO,MAAMA,kBAAmD,CAC9DC,SAAU,CACRC,cAAe,UAEjBC,WAAY,CACVD,cAAe,QAIZ,MAAME,cAA+C,CAC1DH,SAAU,CACRI,UAAW,wBAEbF,WAAY,CACVE,UAAW"}

package/components/Notification/sizes.js

@@ -0,0 +1,2 @@
+'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:{padding:20,borderRadius:12,minHeight:68,'--gap':'12px','--gap-container':'11px'},m:{padding:16,borderRadius:10,minHeight:58,'--gap':'10px','--gap-container':'8px'},s:{padding:12,borderRadius:8,minHeight:44,'--gap':'8px','--gap-container':'6px'}},exports.SIZES_ACTION=SIZES_ACTION,exports.SIZES_ICON={l:{fontSize:28},m:{fontSize:24},s:{fontSize:20}},exports.SIZES_TEXT={l:{fontSize:18,marginTop:2},m:{fontSize:16,marginTop:3},s:{fontSize:14,marginTop:1}},exports.SIZES_TITLE={l:{fontSize:20,marginTop:1,marginBottom:5},m:{fontSize:20,marginTop:-1,marginBottom:2},s:{fontSize:16,marginTop:1,marginBottom:1}},exports.SIZES_TITLE_WITHOUT_TEXT={l:{fontSize:20,marginTop:1,marginBottom:0},m:{fontSize:20,marginTop:-1,marginBottom:0},s:{fontSize:16,marginTop:1,marginBottom:0}};
+//# sourceMappingURL=sizes.js.map

package/components/Notification/sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.js","sources":["../../../../src/components/Notification/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_BUTTON } from 'components/Button'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n  l: {\n    padding: 20,\n    borderRadius: 12,\n    minHeight: 68,\n    '--gap': '12px',\n    '--gap-container': '11px',\n  },\n  m: {\n    padding: 16,\n    borderRadius: 10,\n    minHeight: 58,\n    '--gap': '10px',\n    '--gap-container': '8px',\n  },\n  s: {\n    padding: 12,\n    borderRadius: 8,\n    minHeight: 44,\n    '--gap': '8px',\n    '--gap-container': '6px',\n  },\n}\n\nexport const SIZES_ICON: Record<Size, CSSProperties> = {\n  l: { fontSize: 28 },\n  m: { fontSize: 24 },\n  s: { fontSize: 20 },\n}\n\nexport const SIZES_TITLE: Record<Size, CSSProperties> = {\n  l: { fontSize: 20, marginTop: 1, marginBottom: 5 },\n  m: { fontSize: 20, marginTop: -1, marginBottom: 2 },\n  s: { fontSize: 16, marginTop: 1, marginBottom: 1 },\n}\n\nexport const SIZES_TITLE_WITHOUT_TEXT: Record<Size, CSSProperties> = {\n  l: { fontSize: 20, marginTop: 1, marginBottom: 0 },\n  m: { fontSize: 20, marginTop: -1, marginBottom: 0 },\n  s: { fontSize: 16, marginTop: 1, marginBottom: 0 },\n}\n\nexport const SIZES_TEXT: Record<Size, CSSProperties> = {\n  l: { fontSize: 18, marginTop: 2 },\n  m: { fontSize: 16, marginTop: 3 },\n  s: { fontSize: 14, marginTop: 1 },\n}\n\nexport const SIZES_ACTION: Record<Size, 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","padding","borderRadius","minHeight","fontSize","marginTop","marginBottom"],"mappings":"oFAoDO,MAAMA,aAA4C,CACvDC,EAAGC,MAAYC,MAACF,EAChBG,EAAGF,MAAYC,MAACE,EAChBA,EAAGH,MAAYC,MAACE,iBAnDgC,CAChDJ,EAAG,CACDK,QAAS,GACTC,aAAc,GACdC,UAAW,GACX,QAAS,OACT,kBAAmB,QAErBJ,EAAG,CACDE,QAAS,GACTC,aAAc,GACdC,UAAW,GACX,QAAS,OACT,kBAAmB,OAErBH,EAAG,CACDC,QAAS,GACTC,aAAc,EACdC,UAAW,GACX,QAAS,MACT,kBAAmB,6DAIgC,CACrDP,EAAG,CAAEQ,SAAU,IACfL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,wBAesC,CACrDR,EAAG,CAAEQ,SAAU,GAAIC,UAAW,GAC9BN,EAAG,CAAEK,SAAU,GAAIC,UAAW,GAC9BL,EAAG,CAAEI,SAAU,GAAIC,UAAW,wBAfwB,CACtDT,EAAG,CAAEQ,SAAU,GAAIC,UAAW,EAAGC,aAAc,GAC/CP,EAAG,CAAEK,SAAU,GAAIC,WAAY,EAAGC,aAAc,GAChDN,EAAG,CAAEI,SAAU,GAAIC,UAAW,EAAGC,aAAc,qCAGoB,CACnEV,EAAG,CAAEQ,SAAU,GAAIC,UAAW,EAAGC,aAAc,GAC/CP,EAAG,CAAEK,SAAU,GAAIC,WAAY,EAAGC,aAAc,GAChDN,EAAG,CAAEI,SAAU,GAAIC,UAAW,EAAGC,aAAc"}

package/components/Notification/sizes.mjs

@@ -0,0 +1,2 @@
+import{SIZES as SIZES$1}from'../Button/sizes.mjs';import'../Button/Button.mjs';const SIZES={l:{padding:20,borderRadius:12,minHeight:68,'--gap':'12px','--gap-container':'11px'},m:{padding:16,borderRadius:10,minHeight:58,'--gap':'10px','--gap-container':'8px'},s:{padding:12,borderRadius:8,minHeight:44,'--gap':'8px','--gap-container':'6px'}};const SIZES_ICON={l:{fontSize:28},m:{fontSize:24},s:{fontSize:20}};const SIZES_TITLE={l:{fontSize:20,marginTop:1,marginBottom:5},m:{fontSize:20,marginTop:-1,marginBottom:2},s:{fontSize:16,marginTop:1,marginBottom:1}};const SIZES_TITLE_WITHOUT_TEXT={l:{fontSize:20,marginTop:1,marginBottom:0},m:{fontSize:20,marginTop:-1,marginBottom:0},s:{fontSize:16,marginTop:1,marginBottom:0}};const SIZES_TEXT={l:{fontSize:18,marginTop:2},m:{fontSize:16,marginTop:3},s:{fontSize:14,marginTop:1}};const SIZES_ACTION={l:SIZES$1.l,m:SIZES$1.s,s:SIZES$1.s};export{SIZES,SIZES_ACTION,SIZES_ICON,SIZES_TEXT,SIZES_TITLE,SIZES_TITLE_WITHOUT_TEXT};
+//# sourceMappingURL=sizes.mjs.map

package/components/Notification/sizes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.mjs","sources":["../../../../src/components/Notification/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_BUTTON } from 'components/Button'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n  l: {\n    padding: 20,\n    borderRadius: 12,\n    minHeight: 68,\n    '--gap': '12px',\n    '--gap-container': '11px',\n  },\n  m: {\n    padding: 16,\n    borderRadius: 10,\n    minHeight: 58,\n    '--gap': '10px',\n    '--gap-container': '8px',\n  },\n  s: {\n    padding: 12,\n    borderRadius: 8,\n    minHeight: 44,\n    '--gap': '8px',\n    '--gap-container': '6px',\n  },\n}\n\nexport const SIZES_ICON: Record<Size, CSSProperties> = {\n  l: { fontSize: 28 },\n  m: { fontSize: 24 },\n  s: { fontSize: 20 },\n}\n\nexport const SIZES_TITLE: Record<Size, CSSProperties> = {\n  l: { fontSize: 20, marginTop: 1, marginBottom: 5 },\n  m: { fontSize: 20, marginTop: -1, marginBottom: 2 },\n  s: { fontSize: 16, marginTop: 1, marginBottom: 1 },\n}\n\nexport const SIZES_TITLE_WITHOUT_TEXT: Record<Size, CSSProperties> = {\n  l: { fontSize: 20, marginTop: 1, marginBottom: 0 },\n  m: { fontSize: 20, marginTop: -1, marginBottom: 0 },\n  s: { fontSize: 16, marginTop: 1, marginBottom: 0 },\n}\n\nexport const SIZES_TEXT: Record<Size, CSSProperties> = {\n  l: { fontSize: 18, marginTop: 2 },\n  m: { fontSize: 16, marginTop: 3 },\n  s: { fontSize: 14, marginTop: 1 },\n}\n\nexport const SIZES_ACTION: Record<Size, CSSProperties> = {\n  l: SIZES_BUTTON.l,\n  m: SIZES_BUTTON.s,\n  s: SIZES_BUTTON.s,\n}\n"],"names":["SIZES","l","padding","borderRadius","minHeight","m","s","SIZES_ICON","fontSize","SIZES_TITLE","marginTop","marginBottom","SIZES_TITLE_WITHOUT_TEXT","SIZES_TEXT","SIZES_ACTION","SIZES_BUTTON"],"mappings":"+EAIO,MAAMA,MAAqC,CAChDC,EAAG,CACDC,QAAS,GACTC,aAAc,GACdC,UAAW,GACX,QAAS,OACT,kBAAmB,QAErBC,EAAG,CACDH,QAAS,GACTC,aAAc,GACdC,UAAW,GACX,QAAS,OACT,kBAAmB,OAErBE,EAAG,CACDJ,QAAS,GACTC,aAAc,EACdC,UAAW,GACX,QAAS,MACT,kBAAmB,QAIhB,MAAMG,WAA0C,CACrDN,EAAG,CAAEO,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,EAAG,CAAEE,SAAU,KAGV,MAAMC,YAA2C,CACtDR,EAAG,CAAEO,SAAU,GAAIE,UAAW,EAAGC,aAAc,GAC/CN,EAAG,CAAEG,SAAU,GAAIE,WAAY,EAAGC,aAAc,GAChDL,EAAG,CAAEE,SAAU,GAAIE,UAAW,EAAGC,aAAc,IAG1C,MAAMC,yBAAwD,CACnEX,EAAG,CAAEO,SAAU,GAAIE,UAAW,EAAGC,aAAc,GAC/CN,EAAG,CAAEG,SAAU,GAAIE,WAAY,EAAGC,aAAc,GAChDL,EAAG,CAAEE,SAAU,GAAIE,UAAW,EAAGC,aAAc,IAG1C,MAAME,WAA0C,CACrDZ,EAAG,CAAEO,SAAU,GAAIE,UAAW,GAC9BL,EAAG,CAAEG,SAAU,GAAIE,UAAW,GAC9BJ,EAAG,CAAEE,SAAU,GAAIE,UAAW,IAGzB,MAAMI,aAA4C,CACvDb,EAAGc,QAAad,EAChBI,EAAGU,QAAaT,EAChBA,EAAGS,QAAaT"}

package/components/Notification/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const shouldForwardNotificationProp=style.createShouldForwardProp((e=>!['status','contentDirectionColumn'].includes(e)));const template=e=>`\n  color: ${e.color};\n  background-color: ${e.backgroundColor};\n`;const COLOR_SCHEMA={system:styled.css(["",""],(e=>template({color:e.theme.colors['content-onmain-primary'],backgroundColor:e.theme.colors['bg-onmain-secondary'],...e.palette}))),info:styled.css(["",""],(e=>template({color:e.theme.colors['alert-info'],backgroundColor:e.theme.colors['alert-bg-info-100'],...e.palette}))),success:styled.css(["",""],(e=>template({color:e.theme.colors['alert-success'],backgroundColor:e.theme.colors['alert-bg-success-100'],...e.palette}))),error:styled.css(["",""],(e=>template({color:e.theme.colors['alert-error'],backgroundColor:e.theme.colors['alert-bg-error-100'],...e.palette}))),warning:styled.css(["",""],(e=>template({color:e.theme.colors['alert-warning'],backgroundColor:e.theme.colors['alert-bg-warning-100'],...e.palette})))};const Container=styled__default.default.div.withConfig({displayName:"Notification__Container",componentId:"ui__sc-19hb9p3-0"})(["box-sizing:border-box;display:flex;flex-grow:1;"]);const Controls=styled__default.default.div.withConfig({displayName:"Notification__Controls",componentId:"ui__sc-19hb9p3-1"})(["box-sizing:border-box;display:flex;align-items:center;margin:0.2em 0.6em 0.2em 0;& > *{flex-shrink:1;}"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardNotificationProp}).withConfig({displayName:"Notification__Root",componentId:"ui__sc-19hb9p3-2"})(["box-sizing:border-box;display:flex;min-width:min-content;"," "," "," ",""],(e=>COLOR_SCHEMA[e.status]),(e=>`\n    ${Container} {\n      flex-direction: ${e.contentDirectionColumn?'column':'row'};\n      flex-wrap: ${e.contentDirectionColumn?'nowrap':'wrap'};\n    }\n    ${Controls} {\n      justify-content: ${e.contentDirectionColumn?'flex-start':'flex-end'};\n    }\n  `),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Spacer=styled__default.default.div.withConfig({displayName:"Notification__Spacer",componentId:"ui__sc-19hb9p3-3"})(["box-sizing:border-box;display:flex;flex-shrink:0;margin:0.1em 0;&:first-child{margin-right:0.6em;}"]);const Content=styled__default.default.div.withConfig({displayName:"Notification__Content",componentId:"ui__sc-19hb9p3-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;flex-basis:60%;flex-grow:1;margin:0.2em 0.6em 0.2em 0;"]);exports.Container=Container,exports.Content=Content,exports.Controls=Controls,exports.Root=Root,exports.Spacer=Spacer;
+'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var responsiveLayout=require('../../mixins/responsive-layout.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardNotificationProp=style.createShouldForwardProp((o=>!['status'].includes(o)));const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n`;const COLOR_SCHEMA={system:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],...o.palette}))),info:styled.css(["",""],(o=>template({color:o.theme.colors['alert-info'],backgroundColor:o.theme.colors['alert-bg-info-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],...o.palette}))),warning:styled.css(["",""],(o=>template({color:o.theme.colors['alert-warning'],backgroundColor:o.theme.colors['alert-bg-warning-100'],...o.palette})))};const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardNotificationProp}).withConfig({displayName:"Notification__Root",componentId:"ui__sc-19hb9p3-0"})(["box-sizing:border-box;display:flex;min-width:min-content;& > *:not(:last-child){margin-right:var(--gap);}"," "," ",""],(o=>COLOR_SCHEMA[o.status]),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Container=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"Notification__Container",componentId:"ui__sc-19hb9p3-1"})(["box-sizing:border-box;display:flex;align-items:flex-start;flex-grow:1;& > *:not(:last-child){margin-right:var(--gap-container);}",""],responsiveLayout.responsiveLayout);const Icon=styled__default.default.div.withConfig({displayName:"Notification__Icon",componentId:"ui__sc-19hb9p3-2"})(["box-sizing:border-box;display:flex;flex-shrink:0;height:fit-content;"]);const DiscardButton=styled__default.default.div.withConfig({displayName:"Notification__DiscardButton",componentId:"ui__sc-19hb9p3-3"})(["box-sizing:border-box;display:flex;flex-shrink:0;height:fit-content;"]);const Content=styled__default.default.div.withConfig({displayName:"Notification__Content",componentId:"ui__sc-19hb9p3-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;flex-basis:58%;flex-grow:1;width:100%;height:fit-content;"]);const Addon=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"Notification__Addon",componentId:"ui__sc-19hb9p3-5"})(["box-sizing:border-box;display:flex;align-items:flex-start;height:100%;",""],responsiveLayout.responsiveLayout);exports.Addon=Addon,exports.Container=Container,exports.Content=Content,exports.DiscardButton=DiscardButton,exports.Icon=Icon,exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/Notification/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Notification/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { FlattenInterpolation, ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledNotificationProps, NotificationPalette, NotificationStatus } from './types'\n\nconst shouldForwardNotificationProp = createShouldForwardProp(\n  (propKey) => !['status', 'contentDirectionColumn'].includes(propKey)\n)\n\nconst template = (palette: NotificationPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n`\n\nconst COLOR_SCHEMA: Record<\n  NotificationStatus,\n  FlattenInterpolation<ThemedStyledProps<StyledNotificationProps, DefaultTheme>>\n> = {\n  system: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-onmain-primary'],\n        backgroundColor: props.theme.colors['bg-onmain-secondary'],\n        ...props.palette,\n      })}\n  `,\n  info: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-info'],\n        backgroundColor: props.theme.colors['alert-bg-info-100'],\n        ...props.palette,\n      })}\n  `,\n  success: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-success'],\n        backgroundColor: props.theme.colors['alert-bg-success-100'],\n        ...props.palette,\n      })}\n  `,\n  error: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-error'],\n        backgroundColor: props.theme.colors['alert-bg-error-100'],\n        ...props.palette,\n      })}\n  `,\n  warning: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-warning'],\n        backgroundColor: props.theme.colors['alert-bg-warning-100'],\n        ...props.palette,\n      })}\n  `,\n}\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n`\n\nexport const Controls = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin: 0.2em 0.6em 0.2em 0;\n\n  & > * {\n    flex-shrink: 1;\n  }\n`\n\nexport const Root = styled.div.withConfig<StyledNotificationProps>({\n  shouldForwardProp: shouldForwardNotificationProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  min-width: min-content;\n\n  ${(props) => COLOR_SCHEMA[props.status]}\n\n  ${(props) => `\n    ${Container} {\n      flex-direction: ${props.contentDirectionColumn ? 'column' : 'row'};\n      flex-wrap: ${props.contentDirectionColumn ? 'nowrap' : 'wrap'};\n    }\n    ${Controls} {\n      justify-content: ${props.contentDirectionColumn ? 'flex-start' : 'flex-end'};\n    }\n  `}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Spacer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  margin: 0.1em 0;\n  &:first-child {\n    margin-right: 0.6em;\n  }\n`\n\nexport const Content = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-basis: 60%;\n  flex-grow: 1;\n  margin: 0.2em 0.6em 0.2em 0;\n`\n"],"names":["shouldForwardNotificationProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","COLOR_SCHEMA","system","css","props","theme","colors","info","success","error","warning","Container","styled","div","withConfig","displayName","componentId","Controls","Root","shouldForwardProp","status","contentDirectionColumn","responsiveSize","responsiveMargin","Spacer","Content"],"mappings":"mVAOA,MAAMA,8BAAgCC,MAAAA,yBACnCC,IAAa,CAAC,SAAU,0BAA0BC,SAASD,KAG9D,MAAME,SAAYC,GAAiC,cACxCA,EAAQC,+BACGD,EAAQE,qBAG9B,MAAMC,aAGF,CACFC,OAAQC,OAAGA,IAAA,CAAA,GAAA,KACNC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,0BAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,0BACjCF,EAAMN,YAGfS,KAAMJ,OAAGA,IAAA,CAAA,GAAA,KACJC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,cAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,wBACjCF,EAAMN,YAGfU,QAASL,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,iBAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,2BACjCF,EAAMN,YAGfW,MAAON,OAAGA,IAAA,CAAA,GAAA,KACLC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,eAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,yBACjCF,EAAMN,YAGfY,QAASP,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,iBAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,2BACjCF,EAAMN,mBAKJa,UAAYC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,0BAAAC,YAAA,oBAAVJ,CAIxB,CAAA,0DAEYK,SAAWL,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,oBAAVJ,CASvB,CAAA,2GAEM,MAAMM,KAAON,gBAAAA,QAAOC,IAAIC,WAAoC,CACjEK,kBAAmB1B,gCACnBqB,WAAA,CAAAC,YAAA,qBAAAC,YAAA,oBAFkBJ,CAOfR,CAAAA,4DAAAA,IAAAA,IAAAA,IAAAA,KAAAA,GAAUH,aAAaG,EAAMgB,UAE7BhB,GAAU,SACTO,sCACkBP,EAAMiB,uBAAyB,SAAW,4BAC/CjB,EAAMiB,uBAAyB,SAAW,uBAEvDJ,sCACmBb,EAAMiB,uBAAyB,aAAe,0BAInEC,eAAcA,eACdC,yCAGSC,OAASZ,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,uBAAAC,YAAA,oBAAVJ,CAQrB,CAAA,6GAEYa,QAAUb,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,oBAAVJ,CAQtB,CAAA"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Notification/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { FlattenInterpolation, ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport type { StyledNotificationProps, NotificationPalette, NotificationStatus, Layout } from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardNotificationProp = createShouldForwardProp((propKey) => !['status'].includes(propKey))\n\nconst template = (palette: NotificationPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n`\n\nconst COLOR_SCHEMA: Record<\n  NotificationStatus,\n  FlattenInterpolation<ThemedStyledProps<StyledNotificationProps, DefaultTheme>>\n> = {\n  system: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-onmain-primary'],\n        backgroundColor: props.theme.colors['bg-onmain-secondary'],\n        ...props.palette,\n      })}\n  `,\n  info: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-info'],\n        backgroundColor: props.theme.colors['alert-bg-info-100'],\n        ...props.palette,\n      })}\n  `,\n  success: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-success'],\n        backgroundColor: props.theme.colors['alert-bg-success-100'],\n        ...props.palette,\n      })}\n  `,\n  error: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-error'],\n        backgroundColor: props.theme.colors['alert-bg-error-100'],\n        ...props.palette,\n      })}\n  `,\n  warning: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-warning'],\n        backgroundColor: props.theme.colors['alert-bg-warning-100'],\n        ...props.palette,\n      })}\n  `,\n}\n\nexport const Root = styled.div.withConfig<StyledNotificationProps>({\n  shouldForwardProp: shouldForwardNotificationProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  min-width: min-content;\n\n  & > *:not(:last-child) {\n    margin-right: var(--gap);\n  }\n\n  ${(props) => COLOR_SCHEMA[props.status]}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  flex-grow: 1;\n\n  & > *:not(:last-child) {\n    margin-right: var(--gap-container);\n  }\n\n  ${responsiveLayout}\n`\n\nexport const Icon = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  height: fit-content;\n`\n\nexport const DiscardButton = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  height: fit-content;\n`\n\nexport const Content = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-basis: 58%;\n  flex-grow: 1;\n  width: 100%;\n  height: fit-content;\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  height: 100%;\n\n  ${responsiveLayout}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardNotificationProp","createShouldForwardProp","template","palette","color","backgroundColor","COLOR_SCHEMA","system","css","props","theme","colors","info","success","error","warning","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","status","responsiveSize","responsiveMargin","Container","responsiveLayout","Icon","DiscardButton","Content","Addon"],"mappings":"qZASA,MAAMA,kBAAqBC,IACxB,CAAC,SAAU,YAAa,WAAY,UAAW,UAAW,UAAW,WAAY,WAAWC,SAASD,GAExG,MAAME,8BAAgCC,MAAAA,yBAAyBH,IAAa,CAAC,UAAUC,SAASD,KAEhG,MAAMI,SAAYC,GAAiC,cACxCA,EAAQC,+BACGD,EAAQE,qBAG9B,MAAMC,aAGF,CACFC,OAAQC,OAAGA,IAAA,CAAA,GAAA,KACNC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,0BAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,0BACjCF,EAAMN,YAGfS,KAAMJ,OAAGA,IAAA,CAAA,GAAA,KACJC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,cAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,wBACjCF,EAAMN,YAGfU,QAASL,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,iBAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,2BACjCF,EAAMN,YAGfW,MAAON,OAAGA,IAAA,CAAA,GAAA,KACLC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,eAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,yBACjCF,EAAMN,YAGfY,QAASP,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,iBAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,2BACjCF,EAAMN,aAKV,MAAMa,KAAOC,gBAAAA,QAAOC,IAAIC,WAAoC,CACjEC,kBAAmBpB,gCACnBmB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,oBAFkBL,CAElB,CAAA,4GAAA,IAAA,IAAA,KASGR,GAAUH,aAAaG,EAAMc,SAE9BC,eAAAA,eACAC,iBAAAA,kBAGG,MAAMC,UAAYT,gBAAAA,QAAOC,IAAIC,WAAuD,CACzFC,kBAAmBvB,oBACnBsB,WAAA,CAAAE,YAAA,0BAAAC,YAAA,oBAFuBL,CAEvB,CAAA,mIAAA,IAUEU,iBAAAA,wBAGSC,KAAOX,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,qBAAAC,YAAA,oBAAVL,CAKnB,CAAA,+EAEYY,cAAgBZ,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,8BAAAC,YAAA,oBAAVL,CAK5B,CAAA,+EAEYa,QAAUb,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,wBAAAC,YAAA,oBAAVL,CAStB,CAAA,8IAEM,MAAMc,MAAQd,gBAAAA,QAAOC,IAAIC,WAAuD,CACrFC,kBAAmBvB,oBACnBsB,WAAA,CAAAE,YAAA,sBAAAC,YAAA,oBAFmBL,CAEnB,CAAA,yEAAA,IAMEU,iBAAgBA"}

package/components/Notification/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';const shouldForwardNotificationProp=createShouldForwardProp((o=>!['status','contentDirectionColumn'].includes(o)));const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n`;const COLOR_SCHEMA={system:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],...o.palette}))),info:css(["",""],(o=>template({color:o.theme.colors['alert-info'],backgroundColor:o.theme.colors['alert-bg-info-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],...o.palette}))),warning:css(["",""],(o=>template({color:o.theme.colors['alert-warning'],backgroundColor:o.theme.colors['alert-bg-warning-100'],...o.palette})))};const Container=styled.div.withConfig({displayName:"Notification__Container",componentId:"ui__sc-19hb9p3-0"})(["box-sizing:border-box;display:flex;flex-grow:1;"]);const Controls=styled.div.withConfig({displayName:"Notification__Controls",componentId:"ui__sc-19hb9p3-1"})(["box-sizing:border-box;display:flex;align-items:center;margin:0.2em 0.6em 0.2em 0;& > *{flex-shrink:1;}"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardNotificationProp}).withConfig({displayName:"Notification__Root",componentId:"ui__sc-19hb9p3-2"})(["box-sizing:border-box;display:flex;min-width:min-content;"," "," "," ",""],(o=>COLOR_SCHEMA[o.status]),(o=>`\n    ${Container} {\n      flex-direction: ${o.contentDirectionColumn?'column':'row'};\n      flex-wrap: ${o.contentDirectionColumn?'nowrap':'wrap'};\n    }\n    ${Controls} {\n      justify-content: ${o.contentDirectionColumn?'flex-start':'flex-end'};\n    }\n  `),responsiveSize,responsiveMargin);const Spacer=styled.div.withConfig({displayName:"Notification__Spacer",componentId:"ui__sc-19hb9p3-3"})(["box-sizing:border-box;display:flex;flex-shrink:0;margin:0.1em 0;&:first-child{margin-right:0.6em;}"]);const Content=styled.div.withConfig({displayName:"Notification__Content",componentId:"ui__sc-19hb9p3-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;flex-basis:60%;flex-grow:1;margin:0.2em 0.6em 0.2em 0;"]);export{Container,Content,Controls,Root,Spacer};
+import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{responsiveLayout}from'../../mixins/responsive-layout.mjs';const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardNotificationProp=createShouldForwardProp((o=>!['status'].includes(o)));const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n`;const COLOR_SCHEMA={system:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],...o.palette}))),info:css(["",""],(o=>template({color:o.theme.colors['alert-info'],backgroundColor:o.theme.colors['alert-bg-info-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['alert-success'],backgroundColor:o.theme.colors['alert-bg-success-100'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['alert-error'],backgroundColor:o.theme.colors['alert-bg-error-100'],...o.palette}))),warning:css(["",""],(o=>template({color:o.theme.colors['alert-warning'],backgroundColor:o.theme.colors['alert-bg-warning-100'],...o.palette})))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardNotificationProp}).withConfig({displayName:"Notification__Root",componentId:"ui__sc-19hb9p3-0"})(["box-sizing:border-box;display:flex;min-width:min-content;& > *:not(:last-child){margin-right:var(--gap);}"," "," ",""],(o=>COLOR_SCHEMA[o.status]),responsiveSize,responsiveMargin);const Container=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"Notification__Container",componentId:"ui__sc-19hb9p3-1"})(["box-sizing:border-box;display:flex;align-items:flex-start;flex-grow:1;& > *:not(:last-child){margin-right:var(--gap-container);}",""],responsiveLayout);const Icon=styled.div.withConfig({displayName:"Notification__Icon",componentId:"ui__sc-19hb9p3-2"})(["box-sizing:border-box;display:flex;flex-shrink:0;height:fit-content;"]);const DiscardButton=styled.div.withConfig({displayName:"Notification__DiscardButton",componentId:"ui__sc-19hb9p3-3"})(["box-sizing:border-box;display:flex;flex-shrink:0;height:fit-content;"]);const Content=styled.div.withConfig({displayName:"Notification__Content",componentId:"ui__sc-19hb9p3-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;flex-basis:58%;flex-grow:1;width:100%;height:fit-content;"]);const Addon=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"Notification__Addon",componentId:"ui__sc-19hb9p3-5"})(["box-sizing:border-box;display:flex;align-items:flex-start;height:100%;",""],responsiveLayout);export{Addon,Container,Content,DiscardButton,Icon,Root};
 //# sourceMappingURL=style.mjs.map

package/components/Notification/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/Notification/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { FlattenInterpolation, ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledNotificationProps, NotificationPalette, NotificationStatus } from './types'\n\nconst shouldForwardNotificationProp = createShouldForwardProp(\n  (propKey) => !['status', 'contentDirectionColumn'].includes(propKey)\n)\n\nconst template = (palette: NotificationPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n`\n\nconst COLOR_SCHEMA: Record<\n  NotificationStatus,\n  FlattenInterpolation<ThemedStyledProps<StyledNotificationProps, DefaultTheme>>\n> = {\n  system: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-onmain-primary'],\n        backgroundColor: props.theme.colors['bg-onmain-secondary'],\n        ...props.palette,\n      })}\n  `,\n  info: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-info'],\n        backgroundColor: props.theme.colors['alert-bg-info-100'],\n        ...props.palette,\n      })}\n  `,\n  success: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-success'],\n        backgroundColor: props.theme.colors['alert-bg-success-100'],\n        ...props.palette,\n      })}\n  `,\n  error: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-error'],\n        backgroundColor: props.theme.colors['alert-bg-error-100'],\n        ...props.palette,\n      })}\n  `,\n  warning: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-warning'],\n        backgroundColor: props.theme.colors['alert-bg-warning-100'],\n        ...props.palette,\n      })}\n  `,\n}\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n`\n\nexport const Controls = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin: 0.2em 0.6em 0.2em 0;\n\n  & > * {\n    flex-shrink: 1;\n  }\n`\n\nexport const Root = styled.div.withConfig<StyledNotificationProps>({\n  shouldForwardProp: shouldForwardNotificationProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  min-width: min-content;\n\n  ${(props) => COLOR_SCHEMA[props.status]}\n\n  ${(props) => `\n    ${Container} {\n      flex-direction: ${props.contentDirectionColumn ? 'column' : 'row'};\n      flex-wrap: ${props.contentDirectionColumn ? 'nowrap' : 'wrap'};\n    }\n    ${Controls} {\n      justify-content: ${props.contentDirectionColumn ? 'flex-start' : 'flex-end'};\n    }\n  `}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Spacer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  margin: 0.1em 0;\n  &:first-child {\n    margin-right: 0.6em;\n  }\n`\n\nexport const Content = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-basis: 60%;\n  flex-grow: 1;\n  margin: 0.2em 0.6em 0.2em 0;\n`\n"],"names":["shouldForwardNotificationProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","COLOR_SCHEMA","system","css","props","theme","colors","info","success","error","warning","Container","styled","div","withConfig","displayName","componentId","Controls","Root","shouldForwardProp","status","contentDirectionColumn","responsiveSize","responsiveMargin","Spacer","Content"],"mappings":"2OAOA,MAAMA,8BAAgCC,yBACnCC,IAAa,CAAC,SAAU,0BAA0BC,SAASD,KAG9D,MAAME,SAAYC,GAAiC,cACxCA,EAAQC,+BACGD,EAAQE,qBAG9B,MAAMC,aAGF,CACFC,OAAQC,IAAG,CAAA,GAAA,KACNC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,0BAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,0BACjCF,EAAMN,YAGfS,KAAMJ,IAAG,CAAA,GAAA,KACJC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,cAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,wBACjCF,EAAMN,YAGfU,QAASL,IAAG,CAAA,GAAA,KACPC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,iBAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,2BACjCF,EAAMN,YAGfW,MAAON,IAAG,CAAA,GAAA,KACLC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,eAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,yBACjCF,EAAMN,YAGfY,QAASP,IAAG,CAAA,GAAA,KACPC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,iBAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,2BACjCF,EAAMN,mBAKJa,UAAYC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,0BAAAC,YAAA,oBAAVJ,CAIxB,CAAA,0DAEYK,SAAWL,OAAOC,IAAGC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,oBAAVJ,CASvB,CAAA,2GAEM,MAAMM,KAAON,OAAOC,IAAIC,WAAoC,CACjEK,kBAAmB1B,gCACnBqB,WAAA,CAAAC,YAAA,qBAAAC,YAAA,oBAFkBJ,CAOfR,CAAAA,4DAAAA,IAAAA,IAAAA,IAAAA,KAAAA,GAAUH,aAAaG,EAAMgB,UAE7BhB,GAAU,SACTO,sCACkBP,EAAMiB,uBAAyB,SAAW,4BAC/CjB,EAAMiB,uBAAyB,SAAW,uBAEvDJ,sCACmBb,EAAMiB,uBAAyB,aAAe,0BAInEC,eACAC,wBAGSC,OAASZ,OAAOC,IAAGC,WAAA,CAAAC,YAAA,uBAAAC,YAAA,oBAAVJ,CAQrB,CAAA,6GAEYa,QAAUb,OAAOC,IAAGC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,oBAAVJ,CAQtB,CAAA"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Notification/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { FlattenInterpolation, ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport type { StyledNotificationProps, NotificationPalette, NotificationStatus, Layout } from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardNotificationProp = createShouldForwardProp((propKey) => !['status'].includes(propKey))\n\nconst template = (palette: NotificationPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n`\n\nconst COLOR_SCHEMA: Record<\n  NotificationStatus,\n  FlattenInterpolation<ThemedStyledProps<StyledNotificationProps, DefaultTheme>>\n> = {\n  system: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-onmain-primary'],\n        backgroundColor: props.theme.colors['bg-onmain-secondary'],\n        ...props.palette,\n      })}\n  `,\n  info: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-info'],\n        backgroundColor: props.theme.colors['alert-bg-info-100'],\n        ...props.palette,\n      })}\n  `,\n  success: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-success'],\n        backgroundColor: props.theme.colors['alert-bg-success-100'],\n        ...props.palette,\n      })}\n  `,\n  error: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-error'],\n        backgroundColor: props.theme.colors['alert-bg-error-100'],\n        ...props.palette,\n      })}\n  `,\n  warning: css<StyledNotificationProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['alert-warning'],\n        backgroundColor: props.theme.colors['alert-bg-warning-100'],\n        ...props.palette,\n      })}\n  `,\n}\n\nexport const Root = styled.div.withConfig<StyledNotificationProps>({\n  shouldForwardProp: shouldForwardNotificationProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  min-width: min-content;\n\n  & > *:not(:last-child) {\n    margin-right: var(--gap);\n  }\n\n  ${(props) => COLOR_SCHEMA[props.status]}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  flex-grow: 1;\n\n  & > *:not(:last-child) {\n    margin-right: var(--gap-container);\n  }\n\n  ${responsiveLayout}\n`\n\nexport const Icon = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  height: fit-content;\n`\n\nexport const DiscardButton = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  height: fit-content;\n`\n\nexport const Content = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-basis: 58%;\n  flex-grow: 1;\n  width: 100%;\n  height: fit-content;\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  height: 100%;\n\n  ${responsiveLayout}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardNotificationProp","createShouldForwardProp","template","palette","color","backgroundColor","COLOR_SCHEMA","system","css","props","theme","colors","info","success","error","warning","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","status","responsiveSize","responsiveMargin","Container","responsiveLayout","Icon","DiscardButton","Content","Addon"],"mappings":"4SASA,MAAMA,kBAAqBC,IACxB,CAAC,SAAU,YAAa,WAAY,UAAW,UAAW,UAAW,WAAY,WAAWC,SAASD,GAExG,MAAME,8BAAgCC,yBAAyBH,IAAa,CAAC,UAAUC,SAASD,KAEhG,MAAMI,SAAYC,GAAiC,cACxCA,EAAQC,+BACGD,EAAQE,qBAG9B,MAAMC,aAGF,CACFC,OAAQC,IAAG,CAAA,GAAA,KACNC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,0BAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,0BACjCF,EAAMN,YAGfS,KAAMJ,IAAG,CAAA,GAAA,KACJC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,cAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,wBACjCF,EAAMN,YAGfU,QAASL,IAAG,CAAA,GAAA,KACPC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,iBAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,2BACjCF,EAAMN,YAGfW,MAAON,IAAG,CAAA,GAAA,KACLC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,eAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,yBACjCF,EAAMN,YAGfY,QAASP,IAAG,CAAA,GAAA,KACPC,GACDP,SAAS,CACPE,MAAOK,EAAMC,MAAMC,OAAO,iBAC1BN,gBAAiBI,EAAMC,MAAMC,OAAO,2BACjCF,EAAMN,aAKV,MAAMa,KAAOC,OAAOC,IAAIC,WAAoC,CACjEC,kBAAmBpB,gCACnBmB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,oBAFkBL,CAElB,CAAA,4GAAA,IAAA,IAAA,KASGR,GAAUH,aAAaG,EAAMc,SAE9BC,eACAC,kBAGG,MAAMC,UAAYT,OAAOC,IAAIC,WAAuD,CACzFC,kBAAmBvB,oBACnBsB,WAAA,CAAAE,YAAA,0BAAAC,YAAA,oBAFuBL,CAEvB,CAAA,mIAAA,IAUEU,wBAGSC,KAAOX,OAAOC,IAAGC,WAAA,CAAAE,YAAA,qBAAAC,YAAA,oBAAVL,CAKnB,CAAA,+EAEYY,cAAgBZ,OAAOC,IAAGC,WAAA,CAAAE,YAAA,8BAAAC,YAAA,oBAAVL,CAK5B,CAAA,+EAEYa,QAAUb,OAAOC,IAAGC,WAAA,CAAAE,YAAA,wBAAAC,YAAA,oBAAVL,CAStB,CAAA,8IAEM,MAAMc,MAAQd,OAAOC,IAAIC,WAAuD,CACrFC,kBAAmBvB,oBACnBsB,WAAA,CAAAE,YAAA,sBAAAC,YAAA,oBAFmBL,CAEnB,CAAA,yEAAA,IAMEU"}