@skodaflow/web-library 4.2.0 → 6.0.0

package/README.md

@@ -1,47 +1,61 @@
-# @skodaflow/web-library
-
-> Flow Web Library is the REACT implementation of the [Skoda Flow Design system](https://skoda-brand.com/hub/26).
->
-> Package contains [theme for @mui/material](https://mui.com/material-ui/customization/theming/) as well as completely custom components.
-> This should simplify development of Skoda Auto Web Applications.
-
-## Installation
-
-Library is located in public NPM repository.
-
-```bash
-# using npm
-npm i @skodaflow/web-library
-# using yarn
-yarn add @skodaflow/web-library
-```
-
-## Peer Dependencies
-
-Peer dependencies should be installed automatically. However if you need to install them manually you can run:
-
-```bash
-# using npm
-npm i @emotion/react @emotion/styled @mui/base @mui/material @mui/system react
-# using yarn
-yarn add @emotion/react @emotion/styled @mui/base @mui/material @mui/system react
-```
-
-## Using Theme
-
-Use theme provider in the root component of your application (eg. App.tsx).
-
-```tsx
-// use library provider
-import { SkodaThemeProvider } from '@skodaflow/web-library';
-...
-<SkodaThemeProvider>
-   <App/>
-</SkodaThemeProvider>
-```
-
-## Resources
-
-- [@mui/material](https://mui.com/material-ui/getting-started/overview/)
-- [Storybook](https://skodaflow-web.azurewebsites.net/)
-- [Flow Design System](https://skoda-brand.com/hub/26)
+# @skodaflow/web-library
+
+> Flow Web Library is the REACT implementation of the [Skoda Flow Design system](https://skoda-brand.com/hub/26).
+>
+> Package contains [theme for @mui/material](https://mui.com/material-ui/customization/theming/) as well as completely custom components.
+> This should simplify development of Skoda Auto Web Applications.
+
+## Installation
+
+Library is located in public NPM repository.
+
+```bash
+# using npm
+npm i @skodaflow/web-library
+# using yarn
+yarn add @skodaflow/web-library
+```
+
+## Peer Dependencies
+
+Peer dependencies should be installed automatically. However if you need to install them manually you can run:
+
+```bash
+# using npm
+npm i @emotion/react @emotion/styled @mui/base @mui/material @mui/system react
+# using yarn
+yarn add @emotion/react @emotion/styled @mui/base @mui/material @mui/system react
+```
+
+## Import CSS Files
+
+Optionally you can import provided CSS files.
+
+- globals.css - configures default styles
+- fonts.css - defines font faces for Skoda Next font
+- icons.css - defines Skoda Flow icons
+
+```tsx
+import '@skodaflow/web-library/theme/globals.css';
+import '@skodaflow/web-library/theme/fonts.css';
+import '@skodaflow/web-library/theme/icons.css';
+```
+
+## Using Theme
+
+Use theme provider in the root component of your application (eg. App.tsx).
+
+```tsx
+// use library provider
+import { SkodaThemeProvider } from '@skodaflow/web-library';
+...
+<SkodaThemeProvider>
+   <App/>
+</SkodaThemeProvider>
+```
+
+## Resources
+
+- [@mui/material](https://mui.com/material-ui/getting-started/overview/)
+- [Storybook](https://skodaflow-web.azurewebsites.net/)
+- [Flow Design System](https://skoda-brand.com/hub/26)

package/cjs/components/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import { SxProps, Theme } from '@mui/material';
 import { TransitionProps } from '@mui/material/transitions/transition';
-import React, { HTMLAttributes, JSXElementConstructor, ReactElement, ReactNode } from 'react';
+import { HTMLAttributes, JSXElementConstructor, ReactElement, ReactNode } from 'react';
 /**
  * @interface AccordionItem
  * @description The interface describing the object that has to be provided to the array property 'items' in Accordion component.
@@ -67,4 +67,4 @@ export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
      */
     allowMultipleExpand?: boolean;
 }
-export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;

package/cjs/components/accordion/accordion.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),i=require("react"),r=require("@emotion/styled"),n=require("@mui/material"),a=require("@mui/material/Accordion"),o=require("@mui/material/styles"),s=require("../../utils/utilities.js"),c=require("../controls/controls.js");function d(e){return e&&e.__esModule?e:{default:e}}var l=d(r),u=d(a);const p=i.forwardRef(((r,a)=>{var{items:o,onChange:d,disableAnimation:l,accordionContainerProps:u,accordionPanelMaxHeight:p,allowMultipleExpand:m}=r,h=e.__rest(r,["items","onChange","disableAnimation","accordionContainerProps","accordionPanelMaxHeight","allowMultipleExpand"]);const[g,b]=i.useState(!1),j=i.useRef(null);i.useEffect((()=>{if(m){const e={};for(let t=0;t<o.length;t++){const i=o[t].id||`panel${t}`;e[i]=!!o[t].isDefaultExpanded}b((()=>e))}else{let e;const t=o.find(((t,i)=>{if(t.isDefaultExpanded)return e=i,t}));t&&b(t.id||`panel${e}`)}}),[m,o]),i.useEffect((()=>{if(j&&j.current){const e=j.current.querySelector("button");e&&e.addEventListener("focusin",(e=>{e.preventDefault()}))}}),[j]);const v=i.useCallback((e=>(t,i)=>{d&&d(e,i),b(m?t=>Object.assign(Object.assign({},t),{[e]:i}):!!i&&e)}),[m,d]),y=i.useCallback((e=>"string"==typeof e?s.handleMaxChars(e,100):e),[]),M=i.useMemo((()=>l?{timeout:0}:h.TransitionProps),[l,h.TransitionProps]);return t.jsx(x,Object.assign({ref:a},u,{"data-testid":"Accordion",children:o.map(((e,r)=>{const a=e.id||`panel${r}`,o=m?!!g[a]:g===a,s="string"==typeof e.content;return i.createElement(f,Object.assign({},h,{id:a,key:a,className:a,TransitionProps:M,expanded:o,onChange:v(a),isContentTypeString:s,disableGutters:!0,accordionPanelMaxHeight:p,square:!0,"data-testid":"Accordion.item"}),t.jsxs(n.AccordionSummary,{className:"subheadline","aria-controls":`${a}d-content`,id:`${a}d-header`,expandIcon:t.jsx(c.Controller,{controlType:"plus",ref:j,"data-testid":"Accordion.btn"}),"data-testid":"Accordion.summary",children:[t.jsx("div",{className:"accordion-panel-title",children:e.title}),h.previewContent&&s&&!o&&t.jsx("div",{className:"accordion-panel-title--sneak-peak","data-testid":"Accordion.peek",children:y(e.content)})]}),t.jsx(n.AccordionDetails,{"data-testid":"Accordion.content",children:t.jsx("div",{className:"text",children:e.content})}))}))}))})),x=l.default.div((()=>({"& > .MuiDivider-root":{borderRadius:"6px"},"& .MuiPaper-root:first-of-type":{borderTopLeftRadius:"6px",borderTopRightRadius:"6px"},"& .MuiPaper-root:last-of-type":{borderBottomLeftRadius:"6px",borderBottomRightRadius:"6px"}}))),f=o.styled(u.default,{shouldForwardProp:e=>"previewContent"!==e&&"expandIcon"!==e&&"isContentTypeString"!==e&&"accordionPanelMaxHeight"!==e})((t=>{var i=e.__rest(t,["theme"]);let r={};return i.accordionPanelMaxHeight&&(r=Object.assign(Object.assign({},r),{"& .text":{maxHeight:i.accordionPanelMaxHeight,overflowY:"auto"}})),r}));exports.Accordion=p;
+"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),n=require("react"),i=require("@mui/material"),a=require("@mui/material/Accordion"),r=require("@mui/material/styles"),o=require("../../utils/utilities.js"),s=require("../icon/icon.js");function c(e){return e&&e.__esModule?e:{default:e}}require("../icon/icon.definitions.js");var d=c(a);const l=n.forwardRef(((a,r)=>{var{items:c,onChange:d,disableAnimation:l,accordionContainerProps:p,accordionPanelMaxHeight:x,allowMultipleExpand:m}=a,h=e.__rest(a,["items","onChange","disableAnimation","accordionContainerProps","accordionPanelMaxHeight","allowMultipleExpand"]);const[f,g]=n.useState(!1),j=n.useRef(null);n.useEffect((()=>{if(m){const e={};for(let t=0;t<c.length;t++){const n=c[t].id||`panel${t}`;e[n]=!!c[t].isDefaultExpanded}g((()=>e))}else{let e;const t=c.find(((t,n)=>{if(t.isDefaultExpanded)return e=n,t}));t&&g(t.id||`panel${e}`)}}),[m,c]),n.useEffect((()=>{if(j&&j.current){const e=j.current.querySelector("button");e&&e.addEventListener("focusin",(e=>{e.preventDefault()}))}}),[j]);const b=n.useCallback((e=>(t,n)=>{d&&d(e,n),g(m?t=>Object.assign(Object.assign({},t),{[e]:n}):!!n&&e)}),[m,d]),v=n.useCallback((e=>"string"==typeof e?o.handleMaxChars(e,100):e),[]),A=n.useMemo((()=>l?{timeout:0}:h.TransitionProps),[l,h.TransitionProps]);return t.jsx(i.Box,Object.assign({ref:r},p,{"data-testid":"Accordion",children:c.map(((e,a)=>{const r=e.id||`panel${a}`,o=m?!!f[r]:f===r,c="string"==typeof e.content;return n.createElement(u,Object.assign({},h,{id:r,key:r,className:r,TransitionProps:A,expanded:o,onChange:b(r),isContentTypeString:c,disableGutters:!0,accordionPanelMaxHeight:x,square:!0,"data-testid":"Accordion.item"}),t.jsxs(i.AccordionSummary,{className:"subheadline","aria-controls":`${r}d-content`,id:`${r}d-header`,expandIcon:t.jsx(i.IconButton,{ref:j,"data-testid":"Accordion.btn",sx:{color:e=>e.palette.text.primary},children:t.jsx(s.Icon,{color:"inherit",name:"chevron-down"})}),"data-testid":"Accordion.summary",children:[t.jsx("div",{className:"accordion-panel-title",children:e.title}),h.previewContent&&c&&!o&&t.jsx("div",{className:"accordion-panel-title--sneak-peak","data-testid":"Accordion.peek",children:v(e.content)})]}),t.jsx(i.AccordionDetails,{"data-testid":"Accordion.content",children:t.jsx("div",{className:"text",children:e.content})}))}))}))})),u=r.styled(d.default,{shouldForwardProp:e=>"previewContent"!==e&&"expandIcon"!==e&&"isContentTypeString"!==e&&"accordionPanelMaxHeight"!==e})((t=>{var n=e.__rest(t,["theme"]);let i={};return n.accordionPanelMaxHeight&&(i=Object.assign(Object.assign({},i),{"& .text":{maxHeight:n.accordionPanelMaxHeight,overflowY:"auto"}})),i}));exports.Accordion=l;
 //# sourceMappingURL=accordion.js.map

package/cjs/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport emotionStyled from '@emotion/styled';\nimport { AccordionDetails, AccordionSummary } from '@mui/material';\nimport MuiAccordion from '@mui/material/Accordion';\nimport { styled } from '@mui/material/styles';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';\nimport { handleMaxChars } from '../../utils/utilities';\nimport { Controller } from '../controls';\nexport const Accordion = forwardRef((_a, ref) => {\n    var { items, onChange, disableAnimation, accordionContainerProps, accordionPanelMaxHeight, allowMultipleExpand } = _a, props = __rest(_a, [\"items\", \"onChange\", \"disableAnimation\", \"accordionContainerProps\", \"accordionPanelMaxHeight\", \"allowMultipleExpand\"]);\n    const [expand, setExpanded] = useState(false);\n    const controlRef = useRef(null);\n    useEffect(() => {\n        if (!allowMultipleExpand) {\n            let id;\n            const firstDefaultExpandedItem = items.find((item, index) => {\n                if (item.isDefaultExpanded) {\n                    id = index;\n                    return item;\n                }\n                return undefined;\n            });\n            if (firstDefaultExpandedItem) {\n                setExpanded(firstDefaultExpandedItem.id || `panel${id}`);\n            }\n        }\n        else {\n            const expandItems = {};\n            for (let index = 0; index < items.length; index++) {\n                const itemId = items[index].id || `panel${index}`;\n                expandItems[itemId] = !!items[index].isDefaultExpanded;\n            }\n            setExpanded(() => expandItems);\n        }\n    }, [allowMultipleExpand, items]);\n    //disable black rounded circle on icon controller click\n    useEffect(() => {\n        if (controlRef && controlRef.current) {\n            const controlBtn = controlRef.current.querySelector('button');\n            if (controlBtn) {\n                controlBtn.addEventListener('focusin', (e) => {\n                    e.preventDefault();\n                });\n            }\n        }\n    }, [controlRef]);\n    const handleChange = useCallback((panel) => (_, isExpanded) => {\n        onChange && onChange(panel, isExpanded);\n        if (!allowMultipleExpand) {\n            setExpanded(isExpanded ? panel : false);\n        }\n        else {\n            setExpanded((curr) => {\n                return Object.assign(Object.assign({}, curr), { [panel]: isExpanded });\n            });\n        }\n    }, [allowMultipleExpand, onChange]);\n    const handlePreviewContent = useCallback((content) => {\n        if (typeof content === 'string')\n            return handleMaxChars(content, 100);\n        return content;\n    }, []);\n    const getTransitionProps = useMemo(() => {\n        if (disableAnimation)\n            return { timeout: 0 };\n        else\n            return props.TransitionProps;\n    }, [disableAnimation, props.TransitionProps]);\n    return (_jsx(StyledContainerDiv, Object.assign({ ref: ref }, accordionContainerProps, { \"data-testid\": \"Accordion\", children: items.map((item, index) => {\n            const panel = item.id || `panel${index}`;\n            const isExpanded = allowMultipleExpand ? !!expand[panel] : expand === panel;\n            const isContentTypeString = typeof item.content === 'string';\n            return (_createElement(AccordionStyled, Object.assign({}, props, { id: panel, key: panel, className: panel, TransitionProps: getTransitionProps, expanded: isExpanded, onChange: handleChange(panel), isContentTypeString: isContentTypeString, disableGutters: true, accordionPanelMaxHeight: accordionPanelMaxHeight, square: true, \"data-testid\": \"Accordion.item\" }),\n                _jsxs(AccordionSummary, { className: \"subheadline\", \"aria-controls\": `${panel}d-content`, id: `${panel}d-header`, expandIcon: _jsx(Controller, { controlType: 'plus', ref: controlRef, \"data-testid\": \"Accordion.btn\" }), \"data-testid\": \"Accordion.summary\", children: [_jsx(\"div\", { className: \"accordion-panel-title\", children: item.title }), props.previewContent && isContentTypeString && !isExpanded && (_jsx(\"div\", { className: \"accordion-panel-title--sneak-peak\", \"data-testid\": \"Accordion.peek\", children: handlePreviewContent(item.content) }))] }),\n                _jsx(AccordionDetails, { \"data-testid\": \"Accordion.content\", children: _jsx(\"div\", { className: \"text\", children: item.content }) })));\n        }) })));\n});\nconst StyledContainerDiv = emotionStyled.div(() => {\n    return {\n        '& > .MuiDivider-root': {\n            borderRadius: '6px',\n        },\n        '& .MuiPaper-root:first-of-type': {\n            borderTopLeftRadius: '6px',\n            borderTopRightRadius: '6px',\n        },\n        '& .MuiPaper-root:last-of-type': {\n            borderBottomLeftRadius: '6px',\n            borderBottomRightRadius: '6px',\n        },\n    };\n});\nconst AccordionStyled = styled(MuiAccordion, {\n    shouldForwardProp: (prop) => prop !== 'previewContent' &&\n        prop !== 'expandIcon' &&\n        prop !== 'isContentTypeString' &&\n        prop !== 'accordionPanelMaxHeight',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    let style = {};\n    if (args.accordionPanelMaxHeight) {\n        style = Object.assign(Object.assign({}, style), { '& .text': {\n                maxHeight: args.accordionPanelMaxHeight,\n                overflowY: 'auto',\n            } });\n    }\n    return style;\n});\n//# sourceMappingURL=accordion.js.map"],"names":["Accordion","forwardRef","_a","ref","items","onChange","disableAnimation","accordionContainerProps","accordionPanelMaxHeight","allowMultipleExpand","props","__rest","expand","setExpanded","useState","controlRef","useRef","useEffect","expandItems","index","length","itemId","id","isDefaultExpanded","firstDefaultExpandedItem","find","item","current","controlBtn","querySelector","addEventListener","e","preventDefault","handleChange","useCallback","panel","_","isExpanded","curr","Object","assign","handlePreviewContent","content","handleMaxChars","getTransitionProps","useMemo","timeout","TransitionProps","_jsx","StyledContainerDiv","children","map","isContentTypeString","_createElement","AccordionStyled","key","className","expanded","disableGutters","square","_jsxs","AccordionSummary","expandIcon","Controller","controlType","title","previewContent","jsx","AccordionDetails","emotionStyled","div","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","styled","MuiAccordion","shouldForwardProp","prop","args","style","maxHeight","overflowY"],"mappings":"qWAUY,MAACA,EAAYC,EAAUA,YAAC,CAACC,EAAIC,KACrC,IAAIC,MAAEA,EAAKC,SAAEA,EAAQC,iBAAEA,EAAgBC,wBAAEA,EAAuBC,wBAAEA,EAAuBC,oBAAEA,GAAwBP,EAAIQ,EAAQC,EAAAA,OAAOT,EAAI,CAAC,QAAS,WAAY,mBAAoB,0BAA2B,0BAA2B,wBAC1O,MAAOU,EAAQC,GAAeC,EAAQA,UAAC,GACjCC,EAAaC,SAAO,MAC1BC,EAAAA,WAAU,KACN,GAAKR,EAaA,CACD,MAAMS,EAAc,CAAA,EACpB,IAAK,IAAIC,EAAQ,EAAGA,EAAQf,EAAMgB,OAAQD,IAAS,CAC/C,MAAME,EAASjB,EAAMe,GAAOG,IAAM,QAAQH,IAC1CD,EAAYG,KAAYjB,EAAMe,GAAOI,iBACxC,CACDV,GAAY,IAAMK,GACrB,KApByB,CACtB,IAAII,EACJ,MAAME,EAA2BpB,EAAMqB,MAAK,CAACC,EAAMP,KAC/C,GAAIO,EAAKH,kBAEL,OADAD,EAAKH,EACEO,CAEK,IAEhBF,GACAX,EAAYW,EAAyBF,IAAM,QAAQA,IAE1D,CAQA,GACF,CAACb,EAAqBL,IAEzBa,EAAAA,WAAU,KACN,GAAIF,GAAcA,EAAWY,QAAS,CAClC,MAAMC,EAAab,EAAWY,QAAQE,cAAc,UAChDD,GACAA,EAAWE,iBAAiB,WAAYC,IACpCA,EAAEC,gBAAgB,GAG7B,IACF,CAACjB,IACJ,MAAMkB,EAAeC,EAAAA,aAAaC,GAAU,CAACC,EAAGC,KAC5ChC,GAAYA,EAAS8B,EAAOE,GAKxBxB,EAJCJ,EAIY6B,GACFC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIF,GAAO,CAAEH,CAACA,GAAQE,MAJjDA,GAAaF,EAM5B,GACF,CAAC1B,EAAqBJ,IACnBoC,EAAuBP,eAAaQ,GACf,iBAAZA,EACAC,EAAcA,eAACD,EAAS,KAC5BA,GACR,IACGE,EAAqBC,EAAAA,SAAQ,IAC3BvC,EACO,CAAEwC,QAAS,GAEXpC,EAAMqC,iBAClB,CAACzC,EAAkBI,EAAMqC,kBAC5B,OAAQC,EAAAA,IAAKC,EAAoBV,OAAOC,OAAO,CAAErC,IAAKA,GAAOI,EAAyB,CAAE,cAAe,YAAa2C,SAAU9C,EAAM+C,KAAI,CAACzB,EAAMP,KACvI,MAAMgB,EAAQT,EAAKJ,IAAM,QAAQH,IAC3BkB,EAAa5B,IAAwBG,EAAOuB,GAASvB,IAAWuB,EAChEiB,EAA8C,iBAAjB1B,EAAKgB,QACxC,OAAQW,EAAAA,cAAeC,EAAiBf,OAAOC,OAAO,CAAA,EAAI9B,EAAO,CAAEY,GAAIa,EAAOoB,IAAKpB,EAAOqB,UAAWrB,EAAOY,gBAAiBH,EAAoBa,SAAUpB,EAAYhC,SAAU4B,EAAaE,GAAQiB,oBAAqBA,EAAqBM,gBAAgB,EAAMlD,wBAAyBA,EAAyBmD,QAAQ,EAAM,cAAe,mBACjVC,EAAAA,KAAMC,EAAgBA,iBAAE,CAAEL,UAAW,cAAe,gBAAiB,GAAGrB,aAAkBb,GAAI,GAAGa,YAAiB2B,WAAYd,EAAAA,IAAKe,EAAAA,WAAY,CAAEC,YAAa,OAAQ7D,IAAKY,EAAY,cAAe,kBAAoB,cAAe,oBAAqBmC,SAAU,CAACF,EAAAA,IAAK,MAAO,CAAEQ,UAAW,wBAAyBN,SAAUxB,EAAKuC,QAAUvD,EAAMwD,gBAAkBd,IAAwBf,GAAeW,MAAK,MAAO,CAAEQ,UAAW,oCAAqC,cAAe,iBAAkBN,SAAUT,EAAqBf,EAAKgB,cACthBM,EAAImB,IAACC,EAAgBA,iBAAE,CAAE,cAAe,oBAAqBlB,SAAUF,EAAAA,IAAK,MAAO,CAAEQ,UAAW,OAAQN,SAAUxB,EAAKgB,YAAgB,MACvI,IAEVO,EAAqBoB,EAAAA,QAAcC,KAAI,KAClC,CACH,uBAAwB,CACpBC,aAAc,OAElB,iCAAkC,CAC9BC,oBAAqB,MACrBC,qBAAsB,OAE1B,gCAAiC,CAC7BC,uBAAwB,MACxBC,wBAAyB,WAI/BrB,EAAkBsB,EAAMA,OAACC,UAAc,CACzCC,kBAAoBC,GAAkB,mBAATA,GAChB,eAATA,GACS,wBAATA,GACS,4BAATA,GAJgBH,EAKpB1E,IACG,IAAiB8E,EAAOrE,EAAMA,OAACT,EAAI,CAAC,UACvC,IAAI+E,EAAQ,CAAA,EAOZ,OANID,EAAKxE,0BACLyE,EAAQ1C,OAAOC,OAAOD,OAAOC,OAAO,GAAIyC,GAAQ,CAAE,UAAW,CACrDC,UAAWF,EAAKxE,wBAChB2E,UAAW,WAGhBF,CAAK"}
+{"version":3,"file":"accordion.js","sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport { AccordionDetails, AccordionSummary, Box, IconButton } from '@mui/material';\nimport MuiAccordion from '@mui/material/Accordion';\nimport { styled } from '@mui/material/styles';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';\nimport { handleMaxChars } from '../../utils/utilities';\nimport { Icon } from '../icon';\nexport const Accordion = forwardRef((_a, ref) => {\n    var { items, onChange, disableAnimation, accordionContainerProps, accordionPanelMaxHeight, allowMultipleExpand } = _a, props = __rest(_a, [\"items\", \"onChange\", \"disableAnimation\", \"accordionContainerProps\", \"accordionPanelMaxHeight\", \"allowMultipleExpand\"]);\n    const [expand, setExpanded] = useState(false);\n    const controlRef = useRef(null);\n    useEffect(() => {\n        if (!allowMultipleExpand) {\n            let id;\n            const firstDefaultExpandedItem = items.find((item, index) => {\n                if (item.isDefaultExpanded) {\n                    id = index;\n                    return item;\n                }\n                return undefined;\n            });\n            if (firstDefaultExpandedItem) {\n                setExpanded(firstDefaultExpandedItem.id || `panel${id}`);\n            }\n        }\n        else {\n            const expandItems = {};\n            for (let index = 0; index < items.length; index++) {\n                const itemId = items[index].id || `panel${index}`;\n                expandItems[itemId] = !!items[index].isDefaultExpanded;\n            }\n            setExpanded(() => expandItems);\n        }\n    }, [allowMultipleExpand, items]);\n    //disable black rounded circle on icon controller click\n    useEffect(() => {\n        if (controlRef && controlRef.current) {\n            const controlBtn = controlRef.current.querySelector('button');\n            if (controlBtn) {\n                controlBtn.addEventListener('focusin', (e) => {\n                    e.preventDefault();\n                });\n            }\n        }\n    }, [controlRef]);\n    const handleChange = useCallback((panel) => (_, isExpanded) => {\n        onChange && onChange(panel, isExpanded);\n        if (!allowMultipleExpand) {\n            setExpanded(isExpanded ? panel : false);\n        }\n        else {\n            setExpanded((curr) => {\n                return Object.assign(Object.assign({}, curr), { [panel]: isExpanded });\n            });\n        }\n    }, [allowMultipleExpand, onChange]);\n    const handlePreviewContent = useCallback((content) => {\n        if (typeof content === 'string')\n            return handleMaxChars(content, 100);\n        return content;\n    }, []);\n    const getTransitionProps = useMemo(() => {\n        if (disableAnimation)\n            return { timeout: 0 };\n        else\n            return props.TransitionProps;\n    }, [disableAnimation, props.TransitionProps]);\n    return (_jsx(Box, Object.assign({ ref: ref }, accordionContainerProps, { \"data-testid\": \"Accordion\", children: items.map((item, index) => {\n            const panel = item.id || `panel${index}`;\n            const isExpanded = allowMultipleExpand ? !!expand[panel] : expand === panel;\n            const isContentTypeString = typeof item.content === 'string';\n            return (_createElement(AccordionStyled, Object.assign({}, props, { id: panel, key: panel, className: panel, TransitionProps: getTransitionProps, expanded: isExpanded, onChange: handleChange(panel), isContentTypeString: isContentTypeString, disableGutters: true, accordionPanelMaxHeight: accordionPanelMaxHeight, square: true, \"data-testid\": \"Accordion.item\" }),\n                _jsxs(AccordionSummary, { className: \"subheadline\", \"aria-controls\": `${panel}d-content`, id: `${panel}d-header`, expandIcon: _jsx(IconButton, { ref: controlRef, \"data-testid\": \"Accordion.btn\", sx: { color: (theme) => theme.palette.text.primary }, children: _jsx(Icon, { color: \"inherit\", name: \"chevron-down\" }) }), \"data-testid\": \"Accordion.summary\", children: [_jsx(\"div\", { className: \"accordion-panel-title\", children: item.title }), props.previewContent && isContentTypeString && !isExpanded && (_jsx(\"div\", { className: \"accordion-panel-title--sneak-peak\", \"data-testid\": \"Accordion.peek\", children: handlePreviewContent(item.content) }))] }),\n                _jsx(AccordionDetails, { \"data-testid\": \"Accordion.content\", children: _jsx(\"div\", { className: \"text\", children: item.content }) })));\n        }) })));\n});\nconst AccordionStyled = styled(MuiAccordion, {\n    shouldForwardProp: (prop) => prop !== 'previewContent' &&\n        prop !== 'expandIcon' &&\n        prop !== 'isContentTypeString' &&\n        prop !== 'accordionPanelMaxHeight',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    let style = {};\n    if (args.accordionPanelMaxHeight) {\n        style = Object.assign(Object.assign({}, style), { '& .text': {\n                maxHeight: args.accordionPanelMaxHeight,\n                overflowY: 'auto',\n            } });\n    }\n    return style;\n});\n//# sourceMappingURL=accordion.js.map"],"names":["Accordion","forwardRef","_a","ref","items","onChange","disableAnimation","accordionContainerProps","accordionPanelMaxHeight","allowMultipleExpand","props","__rest","expand","setExpanded","useState","controlRef","useRef","useEffect","expandItems","index","length","itemId","id","isDefaultExpanded","firstDefaultExpandedItem","find","item","current","controlBtn","querySelector","addEventListener","e","preventDefault","handleChange","useCallback","panel","_","isExpanded","curr","Object","assign","handlePreviewContent","content","handleMaxChars","getTransitionProps","useMemo","timeout","TransitionProps","_jsx","Box","children","map","isContentTypeString","_createElement","AccordionStyled","key","className","expanded","disableGutters","square","_jsxs","jsxs","AccordionSummary","expandIcon","IconButton","sx","color","theme","palette","text","primary","jsx","Icon","name","title","previewContent","AccordionDetails","styled","MuiAccordion","shouldForwardProp","prop","args","style","maxHeight","overflowY"],"mappings":"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"}

package/cjs/components/banner/banner.d.ts

@@ -1,57 +1,19 @@
-import React, { MouseEvent } from 'react';
-import { ButtonVariant } from '../common/type/ButtonVariant';
-export interface BannerProps {
+import React, { ReactNode } from 'react';
+export type BannerProps = {
     /**
-     * Variant of banner defines different look and style
+     * Defines which variant of Banner component should be rendered
+     * @default info
      */
-    variant: 'primary' | 'secondary' | 'tertiary';
+    variant?: 'error' | 'warning' | 'info';
     /**
-     * Icon name base on Icon component
+     * ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment
+     * @default undefined
      */
-    icon?: string;
+    buttons?: ReactNode;
     /**
-     * Icon Type if icon is normal or filled
+     * Content of Banner component
+     * @requires
      */
-    iconIsFilled?: boolean;
-    /**
-     * Text of banner
-     */
-    textContent?: string;
-    /**
-     * Dismiss Button label
-     */
-    buttonLabel?: string;
-    /**
-     * Dismiss Button variant
-     */
-    buttonVariant?: ButtonVariant;
-    /**
-     * Dismiss button callback
-     */
-    buttonCallback?: (ev: MouseEvent) => void;
-    /**
-     * Additional Button show/hide
-     */
-    additionalButton?: boolean;
-    /**
-     * Additional Button variant
-     */
-    additionalButtonVariant?: ButtonVariant;
-    /**
-     * Additional Button Label
-     */
-    additionalButtonLabel?: string;
-    /**
-     * Additional Button Callback
-     */
-    additionalButtonCallback?: (ev: MouseEvent) => void;
-    /**
-     * Additional Button Callback
-     */
-    analyticsCallback?: (ev: MouseEvent) => void;
-    /**
-     * Visibility control over whole banner
-     */
-    isVisible?: boolean;
-}
-export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
+    children: ReactNode;
+};
+export declare const Banner: React.FC<BannerProps>;

package/cjs/components/banner/banner.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),a=require("react/jsx-runtime"),n=require("react"),t=require("@emotion/styled"),o=require("../icon/icon.js"),r=require("../button/button.js"),i=require("../../design/skoda/palette.theme.js"),s=require("../../utils/enum.js");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(t);const c=n.forwardRef(((t,i)=>{var l=e.__rest(t,[]);const[d,c]=n.useState(!0);n.useEffect((()=>{(l.isVisible||!1===l.isVisible)&&c(l.isVisible)}),[l.isVisible]);const u=(e,a)=>{var n,t,o;"additional"===a?null===(n=l.additionalButtonCallback)||void 0===n||n.call(l,e):null===(t=l.buttonCallback)||void 0===t||t.call(l,e),null===(o=l.analyticsCallback)||void 0===o||o.call(l,e),c(!1)},f=l.iconIsFilled?" filled":"",m=l.buttonVariant,x=l.additionalButtonVariant;return a.jsx(a.Fragment,{children:d&&a.jsx(b,{className:l.variant,variant:l.variant,ref:i,"data-testid":"Banner",children:a.jsxs("div",{className:"bannerWrapper",children:[a.jsxs("div",{className:"bannerHeader",children:[l.icon&&a.jsx(o.Icon,{fontSize:"medium",className:`${l.icon} ${f}`,"data-testid":"Banner.icon"}),a.jsx("p",{className:"body","data-testid":"Banner.body",children:l.textContent})]}),a.jsxs("div",{className:"bannerBtnContainer",children:[l.additionalButton&&a.jsx(r.Button,{variant:x,compact:!0,label:l.additionalButtonLabel,onClick:e=>u(e,"additional"),"data-testid":"Banner.btn2"}),"secondary"===l.variant?a.jsx(r.Button,{variant:m,colourScheme:s.ColourSheme.LIGHT_MODE,compact:!0,label:l.additionalButtonLabel,onClick:e=>u(e,"main"),"data-testid":"Banner.btn1"}):a.jsx(r.Button,{variant:m,compact:!0,label:l.buttonLabel,onClick:e=>u(e,"main"),"data-testid":"Banner.btn1"})]})]})})})})),b=d.default.div((a=>{var{theme:n}=a;const t=e.__rest(a,["theme"]);let o={};switch(o=Object.assign(Object.assign({},o),{"& > .bannerWrapper":{boxSizing:"border-box",padding:"16px",display:"flex",flexDirection:"column",flexWrap:"nowrap",width:"100%",[n.breakpoints.up("md")]:{padding:"7px 16px",flexDirection:"row"},"& *":{boxSizing:"border-box"}},"& .bannerHeader":{display:"flex",alignItems:"flex-start",justifyContent:"flex-items",width:"100%",marginBottom:"16px",[n.breakpoints.up("md")]:{alignItems:"center",marginBottom:"0"},"& .MuiIcon-root":{color:i.flowColors.brand.tertiary,fontSize:"20px"}},"& .body":{margin:"0 0 0 8px",fontSize:"14px",fontWeight:"400",letterSpacing:"0.05px"},"& .bannerBtnContainer":{display:"flex",width:"100%",justifyContent:"flex-start",[n.breakpoints.up("md")]:{justifyContent:"flex-end"},"& > div + div":{marginLeft:"16px"}}}),t.variant){case"primary":o=Object.assign(Object.assign({},o),{backgroundColor:i.flowColors.brand.secondary,color:i.flowColors.onSurface.os900});case"secondary":o=Object.assign(Object.assign({},o),{backgroundColor:i.flowColors.brand.tertiary,color:i.flowColors.onSurface.os0,"& .bannerHeader .MuiIcon-root":{color:i.flowColors.brand.secondary}});case"tertiary":o=Object.assign(Object.assign({},o),{backgroundColor:i.flowColors.surface.secondary,color:i.flowColors.onSurface.os800,"& .bannerHeader .MuiIcon-root":{color:i.flowColors.brand.primary}})}return o}));exports.Banner=c;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material");require("@mui/material/styles"),require("../../design/skoda/palette.theme.js"),require("../../design/skoda/components/accordion/accordionSummary.theme.js"),require("../../design/skoda/components/autocomplete.theme.js"),require("../../design/skoda/components/backdrop.theme.js"),require("@skodaflow/web-tokens/src/tokens.json"),require("@mui/system"),require("../../design/skoda/theme.breakpoints.js"),require("../../design/skoda/theme.constants.js"),require("tslib"),require("@mui/x-date-pickers/internals"),require("../../design/skoda/components/divider.theme.js"),require("../../design/skoda/components/drawer.theme.js"),require("../accordion/accordion.js"),require("../backdrop/backdrop.js"),require("../button/button.js"),require("../cardContainer/cardContainer.js"),require("../cardMenu/cardMenu.js"),require("../checkbox/checkbox.js"),require("../chip/chipImage/chipImage.js"),require("../chip/regular/chip.js"),require("../chip/chipMultiselect/multiSelectChip.js"),require("../chip/chipDropdownChildren/chipDropdownChildren.js"),require("@mui/material/Container"),require("../controls/controls.js"),require("../divider/divider.js"),require("../drawer/drawer.js"),require("../flag/flag.js"),require("@mui/material/Grid");var a=require("../icon/icon.js");require("../icon/icon.definitions.js"),require("../indicator/indicator.js"),require("../label/label.js"),require("../labelCO2/labelCO2.js"),require("../labelFeature/labelFeature.js"),require("../labelPromotional/labelPromotional.js"),require("../labelStatus/labelStatus.js"),require("../menu/menu.js"),require("@mui/material/MenuItem"),require("@mui/material/MobileStepper"),require("../mobileStepper/mobileStepperButton.js"),require("../modal/modal.js"),require("../modal/modalTitle.js"),require("../numbering/numbering.js"),require("../pagination/pagination.js"),require("../progressBar/progressBar.js"),require("../radioButton/radioButton.js"),require("../selectInput/selectInput.js"),require("../slider/slider.js"),require("../snackbar/snackbar.js"),require("../stepper/stepper.js"),require("../tab/tab.js"),require("../tab/tabs.js"),require("../tab/secondaryNavigation/secondaryNavigationTabs.js"),require("../textArea/textArea.js"),require("../common/styled/textFieldStyled.js"),require("../helperTextContent/index.js"),require("lodash/noop"),require("../toggleSwitch/toggleSwitch.js"),require("../agGrid/agGrid.js"),require("../avatar/Avatar.js"),require("../iconButton/index.js"),require("../alert/AlertButton.js"),require("../../organisms/gallery/Gallery.js"),require("../../organisms/gallery/GalleryItem.js"),require("minimatch"),require("../../utils/enum.js"),require("../../design/skoda/components/form/slider.theme.js"),require("../../design/skoda/components/icon.theme.js"),require("../../design/skoda/components/mobileStepper.theme.js"),require("../../design/skoda/components/modal.theme.js"),require("../../design/skoda/components/pagination.theme.js"),require("../../design/skoda/components/snackbar.theme.js"),require("../../design/skoda/components/stepper/stepIcon/errorStepIcon.js"),require("../../design/skoda/components/stepper/stepIcon/qontoStepIcon.js"),require("../../design/skoda/components/tabs/tabs.theme.js"),require("../../design/skoda/components/tooltip.theme.js"),require("react-use"),require("../../organisms/cardOwnedVehicle/cardOwnedVehicle.js"),require("../../organisms/cardPhotoAdjustable/cardPhotoAdjustable.js"),require("../../organisms/cardPhotoFixed/cardPhotoFixed.js"),require("../../organisms/cardPromoVehicle/cardPromoVehicleComponent.js"),require("../../organisms/common/styled/cardStandardWrapperStyled.js"),require("../../organisms/cardTypeOnly/cardTypeOnly.js"),require("embla-carousel-react"),require("embla-carousel-class-names"),require("embla-carousel-autoplay"),require("../../organisms/carousel/styledComponents/styledCarouselHorizontal.js"),require("../../organisms/carousel/styledComponents/styledCarouselVertical.js"),require("../../organisms/heroImageCard/heroImageCard.js"),require("@googlemaps/react-wrapper"),require("@googlemaps/markerclusterer"),require("../../organisms/maps/utils/mapIcons.js"),require("../../organisms/maps/mapComponents/mapStyled.js"),require("../../organisms/shortcutLink/shortcutLink.js"),require("../../organisms/textCta/textCta.js"),require("../../organisms/tile/tile.js"),require("lodash/merge"),require("../../organisms/carousel2/galleryCarousel/galleryContext.js"),require("../../organisms/carousel2/galleryCarousel/galleryItemContext.js"),require("../../organisms/carousel2/heroCarousel/heroCarouselContext.js"),require("../../organisms/notification/Notification.js"),require("../../organisms/notification/NotificationCenter.js"),require("../../layout/Header/HeaderContext.js"),require("../../layout/Header/HeaderButton.js"),require("../../layout/Header/HeaderNavigationHero.js"),require("../../layout/Header/HeaderNavigationLink.js"),require("../../layout/Header/HeaderNavigationMenu.js"),require("../../layout/Header/PredefinedHeaderButtons.js"),require("../../layout/Header/HeaderOverheadItem.js"),require("../../layout/SideMenu/SideMenuItem.js"),require("@mui/material/Unstable_Grid2"),require("react-keyed-flatten-children"),require("../../layout/SecondaryNavigation/SecondaryNavigationCta.js"),require("../../layout/SecondaryNavigation/SecondaryNavigationItem.js"),require("../../production/Button/Button.js");exports.Banner=({children:s,variant:t="info",buttons:o})=>{const n=i.useTheme(),u=r.useMemo((()=>{switch(t){case"error":return n.palette.error.main;case"warning":return n.palette.warning.main;default:return n.palette.info.main}}),[t,n]),l=r.useMemo((()=>{switch(t){case"error":return i.lighten(n.palette.error.light,.9);case"warning":return i.lighten(n.palette.warning.light,.9);default:return i.lighten(n.palette.info.light,.9)}}),[t,n]);return e.jsxs(i.Stack,{direction:{md:"row",sm:"column"},spacing:0,sx:{borderLeft:"6px solid",alignItems:"flex-start",borderColor:u,backgroundColor:l},"data-testid":"Banner",children:[e.jsxs(i.Stack,{direction:"row",spacing:2,sx:{padding:{md:"12px 16px",sm:"16px",xs:"11px 16px"},flexGrow:1,alignItems:"center"},children:[e.jsx(i.Box,{component:a.Icon,className:"info"===t?"circle-information":"circle-exclamation",iconStyle:"filled",color:t,sx:{alignSelf:"flex-start",color:u,marginTop:{lg:"2px !important",md:"1px !important",sm:"-2px !important"}}}),e.jsx(i.Box,{children:"string"==typeof s?e.jsx(i.Typography,{children:s}):s})]}),o&&e.jsx(i.Stack,{direction:"row",spacing:1,useFlexGap:!0,sx:{padding:"8px 16px",textWrap:"nowrap",flexWrap:"wrap",alignSelf:"center",marginRight:"auto"},"data-testid":"Banner.buttons",children:o})]})};
 //# sourceMappingURL=banner.js.map

package/cjs/components/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../../../src/components/banner/banner.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useEffect, useState, forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { Icon } from '../../components/icon';\nimport { Button } from '../../components/button';\nimport { flowColors } from '../../design/skoda/palette.theme';\nimport { ColourSheme } from '../../utils/enum';\nexport const Banner = forwardRef((_a, ref) => {\n    var props = __rest(_a, []);\n    const [isBannerVisible, setIsBannerVisible] = useState(true);\n    useEffect(() => {\n        if (props.isVisible || props.isVisible === false) {\n            setIsBannerVisible(props.isVisible);\n        }\n    }, [props.isVisible]);\n    const onClickButtons = (ev, btnType) => {\n        var _a, _b, _c;\n        if (btnType === 'additional') {\n            (_a = props.additionalButtonCallback) === null || _a === void 0 ? void 0 : _a.call(props, ev);\n        }\n        else {\n            (_b = props.buttonCallback) === null || _b === void 0 ? void 0 : _b.call(props, ev);\n        }\n        (_c = props.analyticsCallback) === null || _c === void 0 ? void 0 : _c.call(props, ev);\n        setIsBannerVisible(false);\n    };\n    const isFilled = props.iconIsFilled ? ' filled' : '';\n    const buttonVariantMain = props.buttonVariant;\n    const buttonVariantAdditional = props.additionalButtonVariant;\n    return (_jsx(_Fragment, { children: isBannerVisible && (_jsx(BannerStyled, { className: props.variant, variant: props.variant, ref: ref, \"data-testid\": \"Banner\", children: _jsxs(\"div\", { className: \"bannerWrapper\", children: [_jsxs(\"div\", { className: \"bannerHeader\", children: [props.icon && (_jsx(Icon, { fontSize: \"medium\", className: `${props.icon} ${isFilled}`, \"data-testid\": \"Banner.icon\" })), _jsx(\"p\", { className: \"body\", \"data-testid\": \"Banner.body\", children: props.textContent })] }), _jsxs(\"div\", { className: \"bannerBtnContainer\", children: [props.additionalButton && (_jsx(Button, { variant: buttonVariantAdditional, compact: true, label: props.additionalButtonLabel, onClick: (ev) => onClickButtons(ev, 'additional'), \"data-testid\": \"Banner.btn2\" })), props.variant === 'secondary' ? (_jsx(Button, { variant: buttonVariantMain, colourScheme: ColourSheme.LIGHT_MODE, compact: true, label: props.additionalButtonLabel, onClick: (ev) => onClickButtons(ev, 'main'), \"data-testid\": \"Banner.btn1\" })) : (_jsx(Button, { variant: buttonVariantMain, compact: true, label: props.buttonLabel, onClick: (ev) => onClickButtons(ev, 'main'), \"data-testid\": \"Banner.btn1\" }))] })] }) })) }));\n});\nconst BannerStyled = styled.div((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const props = args;\n    let styles = {};\n    styles = Object.assign(Object.assign({}, styles), { '& > .bannerWrapper': {\n            boxSizing: 'border-box',\n            padding: '16px',\n            display: 'flex',\n            flexDirection: 'column',\n            flexWrap: 'nowrap',\n            width: '100%',\n            [theme.breakpoints.up('md')]: {\n                padding: '7px 16px',\n                flexDirection: 'row',\n            },\n            '& *': {\n                boxSizing: 'border-box',\n            },\n        }, '& .bannerHeader': {\n            display: 'flex',\n            alignItems: 'flex-start',\n            justifyContent: 'flex-items',\n            width: '100%',\n            marginBottom: '16px',\n            [theme.breakpoints.up('md')]: {\n                alignItems: 'center',\n                marginBottom: '0',\n            },\n            '& .MuiIcon-root': {\n                color: flowColors.brand.tertiary,\n                fontSize: '20px',\n            },\n        }, '& .body': {\n            margin: '0 0 0 8px',\n            fontSize: '14px',\n            fontWeight: '400',\n            letterSpacing: '0.05px',\n        }, '& .bannerBtnContainer': {\n            display: 'flex',\n            width: '100%',\n            justifyContent: 'flex-start',\n            [theme.breakpoints.up('md')]: {\n                justifyContent: 'flex-end',\n            },\n            '& > div + div': {\n                marginLeft: '16px',\n            },\n        } });\n    switch (props.variant) {\n        case 'primary':\n            styles = Object.assign(Object.assign({}, styles), { backgroundColor: flowColors.brand.secondary, color: flowColors.onSurface.os900 });\n        case 'secondary':\n            styles = Object.assign(Object.assign({}, styles), { backgroundColor: flowColors.brand.tertiary, color: flowColors.onSurface.os0, '& .bannerHeader .MuiIcon-root': {\n                    color: flowColors.brand.secondary,\n                } });\n        case 'tertiary':\n            styles = Object.assign(Object.assign({}, styles), { backgroundColor: flowColors.surface.secondary, color: flowColors.onSurface.os800, '& .bannerHeader .MuiIcon-root': {\n                    color: flowColors.brand.primary,\n                } });\n    }\n    return styles;\n});\n//# sourceMappingURL=banner.js.map"],"names":["Banner","forwardRef","_a","ref","props","__rest","isBannerVisible","setIsBannerVisible","useState","useEffect","isVisible","onClickButtons","ev","btnType","_b","_c","additionalButtonCallback","call","buttonCallback","analyticsCallback","isFilled","iconIsFilled","buttonVariantMain","buttonVariant","buttonVariantAdditional","additionalButtonVariant","_jsx","_Fragment","children","jsx","BannerStyled","className","variant","_jsxs","jsxs","icon","Icon","fontSize","textContent","additionalButton","Button","compact","label","additionalButtonLabel","onClick","colourScheme","ColourSheme","LIGHT_MODE","buttonLabel","styled","default","div","theme","styles","Object","assign","boxSizing","padding","display","flexDirection","flexWrap","width","breakpoints","up","alignItems","justifyContent","marginBottom","color","flowColors","brand","tertiary","margin","fontWeight","letterSpacing","marginLeft","backgroundColor","secondary","onSurface","os900","os0","surface","os800","primary"],"mappings":"iUAQY,MAACA,EAASC,EAAUA,YAAC,CAACC,EAAIC,KAClC,IAAIC,EAAQC,EAAAA,OAAOH,EAAI,IACvB,MAAOI,EAAiBC,GAAsBC,EAAQA,UAAC,GACvDC,EAAAA,WAAU,MACFL,EAAMM,YAAiC,IAApBN,EAAMM,YACzBH,EAAmBH,EAAMM,UAC5B,GACF,CAACN,EAAMM,YACV,MAAMC,EAAiB,CAACC,EAAIC,KACxB,IAAIX,EAAIY,EAAIC,EACI,eAAZF,EAC0C,QAAzCX,EAAKE,EAAMY,gCAA6C,IAAPd,GAAyBA,EAAGe,KAAKb,EAAOQ,GAG1D,QAA/BE,EAAKV,EAAMc,sBAAmC,IAAPJ,GAAyBA,EAAGG,KAAKb,EAAOQ,GAEjD,QAAlCG,EAAKX,EAAMe,yBAAsC,IAAPJ,GAAyBA,EAAGE,KAAKb,EAAOQ,GACnFL,GAAmB,EAAM,EAEvBa,EAAWhB,EAAMiB,aAAe,UAAY,GAC5CC,EAAoBlB,EAAMmB,cAC1BC,EAA0BpB,EAAMqB,wBACtC,OAAQC,EAAAA,IAAKC,EAAAA,SAAW,CAAEC,SAAUtB,GAAoBoB,EAAIG,IAACC,EAAc,CAAEC,UAAW3B,EAAM4B,QAASA,QAAS5B,EAAM4B,QAAS7B,IAAKA,EAAK,cAAe,SAAUyB,SAAUK,EAAAA,KAAM,MAAO,CAAEF,UAAW,gBAAiBH,SAAU,CAACK,EAAKC,KAAC,MAAO,CAAEH,UAAW,eAAgBH,SAAU,CAACxB,EAAM+B,MAAST,EAAAA,IAAKU,EAAAA,KAAM,CAAEC,SAAU,SAAUN,UAAW,GAAG3B,EAAM+B,QAAQf,IAAY,cAAe,gBAAmBM,EAAIG,IAAC,IAAK,CAAEE,UAAW,OAAQ,cAAe,cAAeH,SAAUxB,EAAMkC,iBAAoBL,EAAKC,KAAC,MAAO,CAAEH,UAAW,qBAAsBH,SAAU,CAACxB,EAAMmC,kBAAqBb,EAAIG,IAACW,EAAMA,OAAE,CAAER,QAASR,EAAyBiB,SAAS,EAAMC,MAAOtC,EAAMuC,sBAAuBC,QAAUhC,GAAOD,EAAeC,EAAI,cAAe,cAAe,gBAAqC,cAAlBR,EAAM4B,QAA2BN,EAAIG,IAACW,EAAMA,OAAE,CAAER,QAASV,EAAmBuB,aAAcC,EAAWA,YAACC,WAAYN,SAAS,EAAMC,MAAOtC,EAAMuC,sBAAuBC,QAAUhC,GAAOD,EAAeC,EAAI,QAAS,cAAe,gBAAqBc,EAAIG,IAACW,EAAMA,OAAE,CAAER,QAASV,EAAmBmB,SAAS,EAAMC,MAAOtC,EAAM4C,YAAaJ,QAAUhC,GAAOD,EAAeC,EAAI,QAAS,cAAe,yBAAkC,IAEvqCkB,EAAemB,EAAMC,QAACC,KAAKjD,IAC7B,IAAIkD,MAAEA,GAAUlD,EAChB,MAAME,EADqBC,EAAAA,OAAOH,EAAI,CAAC,UAEvC,IAAImD,EAAS,CAAA,EA6Cb,OA5CAA,EAASC,OAAOC,OAAOD,OAAOC,OAAO,GAAIF,GAAS,CAAE,qBAAsB,CAClEG,UAAW,aACXC,QAAS,OACTC,QAAS,OACTC,cAAe,SACfC,SAAU,SACVC,MAAO,OACP,CAACT,EAAMU,YAAYC,GAAG,OAAQ,CAC1BN,QAAS,WACTE,cAAe,OAEnB,MAAO,CACHH,UAAW,eAEhB,kBAAmB,CAClBE,QAAS,OACTM,WAAY,aACZC,eAAgB,aAChBJ,MAAO,OACPK,aAAc,OACd,CAACd,EAAMU,YAAYC,GAAG,OAAQ,CAC1BC,WAAY,SACZE,aAAc,KAElB,kBAAmB,CACfC,MAAOC,EAAAA,WAAWC,MAAMC,SACxBjC,SAAU,SAEf,UAAW,CACVkC,OAAQ,YACRlC,SAAU,OACVmC,WAAY,MACZC,cAAe,UAChB,wBAAyB,CACxBf,QAAS,OACTG,MAAO,OACPI,eAAgB,aAChB,CAACb,EAAMU,YAAYC,GAAG,OAAQ,CAC1BE,eAAgB,YAEpB,gBAAiB,CACbS,WAAY,WAGhBtE,EAAM4B,SACV,IAAK,UACDqB,EAASC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIF,GAAS,CAAEsB,gBAAiBP,EAAUA,WAACC,MAAMO,UAAWT,MAAOC,EAAAA,WAAWS,UAAUC,QACjI,IAAK,YACDzB,EAASC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIF,GAAS,CAAEsB,gBAAiBP,EAAUA,WAACC,MAAMC,SAAUH,MAAOC,EAAAA,WAAWS,UAAUE,IAAK,gCAAiC,CAC1JZ,MAAOC,EAAAA,WAAWC,MAAMO,aAEpC,IAAK,WACDvB,EAASC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIF,GAAS,CAAEsB,gBAAiBP,EAAUA,WAACY,QAAQJ,UAAWT,MAAOC,EAAAA,WAAWS,UAAUI,MAAO,gCAAiC,CAC/Jd,MAAOC,EAAAA,WAAWC,MAAMa,WAGxC,OAAO7B,CAAM"}
+{"version":3,"file":"banner.js","sources":["../../../../src/components/banner/banner.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '@/src';\nimport { Box, Stack, Typography, lighten, useTheme } from '@mui/material';\nimport { useMemo } from 'react';\nexport const Banner = ({ children, variant = 'info', buttons }) => {\n    const theme = useTheme();\n    const borderColor = useMemo(() => {\n        switch (variant) {\n            case 'error':\n                return theme.palette.error.main;\n            case 'warning':\n                return theme.palette.warning.main;\n            case 'info':\n            default:\n                return theme.palette.info.main;\n        }\n    }, [variant, theme]);\n    const backgroundColor = useMemo(() => {\n        switch (variant) {\n            case 'error':\n                return lighten(theme.palette.error.light, 0.9);\n            case 'warning':\n                return lighten(theme.palette.warning.light, 0.9);\n            case 'info':\n            default:\n                return lighten(theme.palette.info.light, 0.9);\n        }\n    }, [variant, theme]);\n    return (_jsxs(Stack, { direction: { md: 'row', sm: 'column' }, spacing: 0, sx: {\n            borderLeft: '6px solid',\n            alignItems: 'flex-start',\n            borderColor,\n            backgroundColor,\n        }, \"data-testid\": \"Banner\", children: [_jsxs(Stack, { direction: \"row\", spacing: 2, sx: { padding: { md: '12px 16px', sm: '16px', xs: '11px 16px' }, flexGrow: 1, alignItems: 'center' }, children: [_jsx(Box, { component: Icon, className: variant === 'info' ? 'circle-information' : 'circle-exclamation', iconStyle: \"filled\", color: variant, sx: {\n                            alignSelf: 'flex-start',\n                            color: borderColor,\n                            marginTop: { lg: '2px !important', md: '1px !important', sm: '-2px !important' },\n                        } }), _jsx(Box, { children: typeof children === 'string' ? _jsx(Typography, { children: children }) : children })] }), buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, useFlexGap: true, sx: { padding: '8px 16px', textWrap: 'nowrap', flexWrap: 'wrap', alignSelf: 'center', marginRight: 'auto' }, \"data-testid\": \"Banner.buttons\", children: buttons }))] }));\n};\n//# sourceMappingURL=banner.js.map"],"names":["children","variant","buttons","theme","useTheme","borderColor","useMemo","palette","error","main","warning","info","backgroundColor","lighten","light","_jsxs","Stack","direction","md","sm","spacing","sx","borderLeft","alignItems","jsxs","padding","xs","flexGrow","_jsx","Box","component","Icon","className","iconStyle","color","alignSelf","marginTop","lg","Typography","useFlexGap","textWrap","flexWrap","marginRight"],"mappings":"o2KAIsB,EAAGA,WAAUC,UAAU,OAAQC,cACjD,MAAMC,EAAQC,EAAAA,WACRC,EAAcC,EAAAA,SAAQ,KACxB,OAAQL,GACJ,IAAK,QACD,OAAOE,EAAMI,QAAQC,MAAMC,KAC/B,IAAK,UACD,OAAON,EAAMI,QAAQG,QAAQD,KAEjC,QACI,OAAON,EAAMI,QAAQI,KAAKF,KACjC,GACF,CAACR,EAASE,IACPS,EAAkBN,EAAAA,SAAQ,KAC5B,OAAQL,GACJ,IAAK,QACD,OAAOY,EAAAA,QAAQV,EAAMI,QAAQC,MAAMM,MAAO,IAC9C,IAAK,UACD,OAAOD,EAAAA,QAAQV,EAAMI,QAAQG,QAAQI,MAAO,IAEhD,QACI,OAAOD,EAAAA,QAAQV,EAAMI,QAAQI,KAAKG,MAAO,IAChD,GACF,CAACb,EAASE,IACb,OAAQY,OAAMC,EAAAA,MAAO,CAAEC,UAAW,CAAEC,GAAI,MAAOC,GAAI,UAAYC,QAAS,EAAGC,GAAI,CACvEC,WAAY,YACZC,WAAY,aACZlB,cACAO,mBACD,cAAe,SAAUZ,SAAU,CAACe,EAAKS,KAACR,QAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGC,GAAI,CAAEI,QAAS,CAAEP,GAAI,YAAaC,GAAI,OAAQO,GAAI,aAAeC,SAAU,EAAGJ,WAAY,UAAYvB,SAAU,CAAC4B,MAAKC,EAAAA,IAAK,CAAEC,UAAWC,EAAIA,KAAEC,UAAuB,SAAZ/B,EAAqB,qBAAuB,qBAAsBgC,UAAW,SAAUC,MAAOjC,EAASoB,GAAI,CACpUc,UAAW,aACXD,MAAO7B,EACP+B,UAAW,CAAEC,GAAI,iBAAkBnB,GAAI,iBAAkBC,GAAI,sBAC3DS,MAAKC,EAAAA,IAAK,CAAE7B,SAA8B,iBAAbA,EAAwB4B,MAAKU,EAAAA,WAAY,CAAEtC,SAAUA,IAAcA,OAAiBE,GAAY0B,MAAKZ,EAAAA,MAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGmB,YAAY,EAAMlB,GAAI,CAAEI,QAAS,WAAYe,SAAU,SAAUC,SAAU,OAAQN,UAAW,SAAUO,YAAa,QAAU,cAAe,iBAAkB1C,SAAUE,MAAiB"}

package/cjs/components/button/button.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import { IconNameProp } from '../icon';
 import { ColourSheme } from '../../utils/enum';
 /**
  * @type ButtonVariants
@@ -32,7 +33,7 @@ export interface ButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'co
     /**
      * Icon name. For example "heart".
      */
-    icon?: string;
+    icon?: IconNameProp;
     /**
      * Compact, minimalistic view of component
      */

package/cjs/components/button/button.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("tslib"),r=require("react/jsx-runtime"),e=require("react"),a=require("@mui/material/Button"),n=require("@mui/material/styles"),i=require("../icon/icon.js"),o=require("../common/styled/buttonFocusVisibleStyled.js"),s=require("../../utils/enum.js"),u=require("../../utils/utilities.js"),c=require("lodash/merge");function l(t){return t&&t.__esModule?t:{default:t}}var d,p=l(a),m=l(c);exports.ButtonVariants=void 0,(d=exports.ButtonVariants||(exports.ButtonVariants={})).PRIMARY="primary",d.SECONDARY="secondary",d.GHOST="ghost",d.TERTIARY="tertiary",d.NAVIGATION="navigation";const x=e.forwardRef(((a,n)=>{var c,{variant:l=exports.ButtonVariants.PRIMARY,colourScheme:d,direction:p="back",label:m,icon:x,compact:f,disabled:R}=a,h=t.__rest(a,["variant","colourScheme","direction","label","icon","compact","disabled"]);const[v,A]=e.useState(!1),T=e.useMemo((()=>I(l)),[l]),g=e.useMemo((()=>V(l)),[l]),b="navigation"===l,M=b&&"forward"===p,N=b&&"back"===p;return r.jsx(o.default,{focusVisible:v,isNavigationVariant:b,fullWidth:h.fullWidth,children:r.jsx(B,Object.assign({},h,{ref:n,variant:T,color:g,startIcon:x&&!b||N?r.jsx(i.Icon,{className:N?"arrow-left":x}):void 0,endIcon:M?r.jsx(i.Icon,{className:"arrow-right"}):void 0,disabled:R,size:f?"small":void 0,onFocusVisible:()=>A(!0),onBlur:t=>{A(!1),h.onBlur&&h.onBlur(t)},className:u.ternaryCondition(d,s.ColourSheme.LIGHT_MODE,"MuiButton-white",""),children:null!==(c=h.children)&&void 0!==c?c:m}))})})),B=n.styled(p.default)((r=>{const e=t.__rest(r,["theme"]),a="navigation"===e.variant,n={};return!e.children&&e.startIcon&&m.default(n,{width:44,padding:0,"& .MuiButton-startIcon":{margin:"-4px 0 0 0",fontSize:"16px",".MuiIcon-root":{paddingTop:3,"&::before":{marginLeft:1}}}}),a&&m.default(n,{"& .MuiButton-endIcon":{marginTop:"2px"},"& .MuiButton-startIcon":{marginTop:"2px"}}),n})),I=t=>{switch(t){case exports.ButtonVariants.PRIMARY:return"contained";case exports.ButtonVariants.GHOST:return"outlined";case exports.ButtonVariants.NAVIGATION:return"navigation";case exports.ButtonVariants.SECONDARY:return"contained";case exports.ButtonVariants.TERTIARY:return"text";default:return"contained"}},V=t=>{switch(t){case exports.ButtonVariants.PRIMARY:return"primary";case exports.ButtonVariants.GHOST:case exports.ButtonVariants.NAVIGATION:case exports.ButtonVariants.SECONDARY:case exports.ButtonVariants.TERTIARY:return"secondary";default:return"primary"}};exports.Button=x;
+"use strict";var t=require("tslib"),r=require("react/jsx-runtime"),e=require("react"),n=require("@mui/material/Button"),a=require("@mui/material/styles"),i=require("../icon/icon.js");require("../icon/icon.definitions.js");var o=require("../common/styled/buttonFocusVisibleStyled.js"),s=require("../../utils/enum.js"),u=require("../../utils/utilities.js"),c=require("lodash/merge");function l(t){return t&&t.__esModule?t:{default:t}}var d,p=l(n),m=l(c);exports.ButtonVariants=void 0,(d=exports.ButtonVariants||(exports.ButtonVariants={})).PRIMARY="primary",d.SECONDARY="secondary",d.GHOST="ghost",d.TERTIARY="tertiary",d.NAVIGATION="navigation";const x=e.forwardRef(((n,a)=>{var c,{variant:l=exports.ButtonVariants.PRIMARY,colourScheme:d,direction:p="back",label:m,icon:x,compact:f,disabled:v}=n,R=t.__rest(n,["variant","colourScheme","direction","label","icon","compact","disabled"]);const[h,A]=e.useState(!1),T=e.useMemo((()=>I(l)),[l]),g=e.useMemo((()=>V(l)),[l]),b="navigation"===l,M=b&&"forward"===p,S=b&&"back"===p;return r.jsx(o.default,{focusVisible:h,isNavigationVariant:b,fullWidth:R.fullWidth,children:r.jsx(B,Object.assign({},R,{ref:a,variant:T,color:g,startIcon:x&&!b||S?r.jsx(i.Icon,{name:S?"arrow-left":x}):void 0,endIcon:M?r.jsx(i.Icon,{name:"arrow-right"}):void 0,disabled:v,size:f?"small":void 0,onFocusVisible:()=>A(!0),onBlur:t=>{A(!1),R.onBlur&&R.onBlur(t)},className:u.ternaryCondition(d,s.ColourSheme.LIGHT_MODE,"MuiButton-white",""),children:null!==(c=R.children)&&void 0!==c?c:m}))})})),B=a.styled(p.default)((r=>{const e=t.__rest(r,["theme"]),n="navigation"===e.variant,a={};return!e.children&&e.startIcon&&m.default(a,{width:44,padding:0,"& .MuiButton-startIcon":{margin:"-4px 0 0 0",fontSize:"16px",".MuiIcon-root":{paddingTop:3,"&::before":{marginLeft:1}}}}),n&&m.default(a,{"& .MuiButton-endIcon":{marginTop:"2px"},"& .MuiButton-startIcon":{marginTop:"2px"}}),a})),I=t=>{switch(t){case exports.ButtonVariants.PRIMARY:return"contained";case exports.ButtonVariants.GHOST:return"outlined";case exports.ButtonVariants.NAVIGATION:return"navigation";case exports.ButtonVariants.SECONDARY:return"contained";case exports.ButtonVariants.TERTIARY:return"text";default:return"contained"}},V=t=>{switch(t){case exports.ButtonVariants.PRIMARY:return"primary";case exports.ButtonVariants.GHOST:case exports.ButtonVariants.NAVIGATION:case exports.ButtonVariants.SECONDARY:case exports.ButtonVariants.TERTIARY:return"secondary";default:return"primary"}};exports.Button=x;
 //# sourceMappingURL=button.js.map

package/cjs/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/button/button.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useMemo, useState } from 'react';\nimport MuiButton from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../icon';\nimport ButtonFocusVisibleStyled from '../common/styled/buttonFocusVisibleStyled';\nimport { ColourSheme } from '../../utils/enum';\nimport { ternaryCondition } from '../../utils/utilities';\nimport merge from 'lodash/merge';\n/**\n * @type ButtonVariants\n * @description The variants of the Button component.\n */\nexport var ButtonVariants;\n(function (ButtonVariants) {\n    ButtonVariants[\"PRIMARY\"] = \"primary\";\n    ButtonVariants[\"SECONDARY\"] = \"secondary\";\n    ButtonVariants[\"GHOST\"] = \"ghost\";\n    ButtonVariants[\"TERTIARY\"] = \"tertiary\";\n    ButtonVariants[\"NAVIGATION\"] = \"navigation\";\n})(ButtonVariants || (ButtonVariants = {}));\n/**\n * @description SkodaFlow Button component.\n * Properties are inherited from HTML Button element.\n * @param props ButtonProps\n * @returns React Functional Component\n * @deprecated Use Button component from '@mui/material' module instead.\n */\nexport const Button = forwardRef((_a, ref) => {\n    var _b;\n    var { variant = ButtonVariants.PRIMARY, colourScheme, direction = 'back', label, icon, compact, disabled } = _a, props = __rest(_a, [\"variant\", \"colourScheme\", \"direction\", \"label\", \"icon\", \"compact\", \"disabled\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const buttonVariantResolved = useMemo(() => getButtonVariant(variant), [variant]);\n    const buttonColor = useMemo(() => getButtonColor(variant), [variant]);\n    const onBlur = (e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    };\n    const isNavigationVariant = variant === 'navigation';\n    const isDirectionForward = isNavigationVariant && direction === 'forward';\n    const isDirectionBack = isNavigationVariant && direction === 'back';\n    return (_jsx(ButtonFocusVisibleStyled, { focusVisible: focusVisibled, isNavigationVariant: isNavigationVariant, fullWidth: props.fullWidth, children: _jsx(ButtonStyled, Object.assign({}, props, { ref: ref, variant: buttonVariantResolved, color: buttonColor, startIcon: (icon && !isNavigationVariant) || isDirectionBack ? (_jsx(Icon, { className: isDirectionBack ? 'arrow-left' : icon })) : undefined, endIcon: isDirectionForward ? _jsx(Icon, { className: \"arrow-right\" }) : undefined, disabled: disabled, size: compact ? 'small' : undefined, onFocusVisible: () => setFocusVisible(true), onBlur: onBlur, className: ternaryCondition(colourScheme, ColourSheme.LIGHT_MODE, 'MuiButton-white', ''), children: (_b = props.children) !== null && _b !== void 0 ? _b : label })) }));\n});\n/**\n * @description Button styling defintion based on props\n */\nconst ButtonStyled = styled(MuiButton)((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const props = args;\n    const isNavigationVariant = props.variant === 'navigation';\n    const styles = {};\n    if (!props.children && props.startIcon) {\n        merge(styles, {\n            width: 44,\n            padding: 0,\n            '& .MuiButton-startIcon': {\n                margin: '-4px 0 0 0',\n                fontSize: '16px',\n                '.MuiIcon-root': {\n                    paddingTop: 3,\n                    '&::before': {\n                        marginLeft: 1,\n                    },\n                },\n            },\n        });\n    }\n    if (isNavigationVariant) {\n        merge(styles, {\n            '& .MuiButton-endIcon': {\n                marginTop: '2px',\n            },\n            '& .MuiButton-startIcon': {\n                marginTop: '2px',\n            },\n        });\n    }\n    return styles;\n});\nconst getButtonVariant = (variant) => {\n    switch (variant) {\n        case ButtonVariants.PRIMARY:\n            return 'contained';\n        case ButtonVariants.GHOST:\n            return 'outlined';\n        case ButtonVariants.NAVIGATION:\n            return 'navigation';\n        case ButtonVariants.SECONDARY:\n            return 'contained';\n        case ButtonVariants.TERTIARY:\n            return 'text';\n        default:\n            return 'contained';\n    }\n};\nconst getButtonColor = (variant) => {\n    switch (variant) {\n        case ButtonVariants.PRIMARY:\n            return 'primary';\n        case ButtonVariants.GHOST:\n            return 'secondary';\n        case ButtonVariants.NAVIGATION:\n            return 'secondary';\n        case ButtonVariants.SECONDARY:\n            return 'secondary';\n        case ButtonVariants.TERTIARY:\n            return 'secondary';\n        default:\n            return 'primary';\n    }\n};\n//# sourceMappingURL=button.js.map"],"names":["ButtonVariants","Button","forwardRef","_a","ref","_b","variant","PRIMARY","colourScheme","direction","label","icon","compact","disabled","props","__rest","focusVisibled","setFocusVisible","useState","buttonVariantResolved","useMemo","getButtonVariant","buttonColor","getButtonColor","isNavigationVariant","isDirectionForward","isDirectionBack","_jsx","ButtonFocusVisibleStyled","focusVisible","fullWidth","children","jsx","ButtonStyled","Object","assign","color","startIcon","Icon","className","undefined","endIcon","size","onFocusVisible","onBlur","e","ternaryCondition","ColourSheme","LIGHT_MODE","styled","MuiButton","styles","merge","width","padding","margin","fontSize","paddingTop","marginLeft","marginTop","GHOST","NAVIGATION","SECONDARY","TERTIARY"],"mappings":"yYAeWA,gBADAA,QAAeA,oBAAA,GACfA,EAMRA,yBAAmBA,QAAAA,eAAiB,CAAE,IALb,QAAI,UAC5BA,EAA0B,UAAI,YAC9BA,EAAsB,MAAI,QAC1BA,EAAyB,SAAI,WAC7BA,EAA2B,WAAI,aASvB,MAACC,EAASC,EAAUA,YAAC,CAACC,EAAIC,KAClC,IAAIC,GACAC,QAAEA,EAAUN,uBAAeO,QAAOC,aAAEA,EAAYC,UAAEA,EAAY,OAAMC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,SAAEA,GAAaV,EAAIW,EAAQC,EAAMA,OAACZ,EAAI,CAAC,UAAW,eAAgB,YAAa,QAAS,OAAQ,UAAW,aACzM,MAAOa,EAAeC,GAAmBC,EAAQA,UAAC,GAC5CC,EAAwBC,EAAAA,SAAQ,IAAMC,EAAiBf,IAAU,CAACA,IAClEgB,EAAcF,EAAAA,SAAQ,IAAMG,EAAejB,IAAU,CAACA,IAMtDkB,EAAkC,eAAZlB,EACtBmB,EAAqBD,GAAqC,YAAdf,EAC5CiB,EAAkBF,GAAqC,SAAdf,EAC/C,OAAQkB,EAAAA,IAAKC,EAAAA,QAA0B,CAAEC,aAAcb,EAAeQ,oBAAqBA,EAAqBM,UAAWhB,EAAMgB,UAAWC,SAAUJ,EAAIK,IAACC,EAAcC,OAAOC,OAAO,CAAE,EAAErB,EAAO,CAAEV,IAAKA,EAAKE,QAASa,EAAuBiB,MAAOd,EAAae,UAAY1B,IAASa,GAAwBE,EAAmBC,EAAIK,IAACM,OAAM,CAAEC,UAAWb,EAAkB,aAAef,SAAW6B,EAAWC,QAAShB,EAAqBE,EAAAA,IAAKW,EAAAA,KAAM,CAAEC,UAAW,qBAAmBC,EAAW3B,SAAUA,EAAU6B,KAAM9B,EAAU,aAAU4B,EAAWG,eAAgB,IAAM1B,GAAgB,GAAO2B,OAR3jBC,IACZ5B,GAAgB,GACZH,EAAM8B,QACN9B,EAAM8B,OAAOC,EAAE,EAKokBN,UAAWO,EAAAA,iBAAiBtC,EAAcuC,EAAWA,YAACC,WAAY,kBAAmB,IAAKjB,SAAoC,QAAzB1B,EAAKS,EAAMiB,gBAA6B,IAAP1B,EAAgBA,EAAKK,MAAc,IAKlwBuB,EAAegB,EAAMA,OAACC,UAAPD,EAAmB9C,IAEpC,MAAMW,EADqBC,EAAMA,OAACZ,EAAI,CAAC,UAEjCqB,EAAwC,eAAlBV,EAAMR,QAC5B6C,EAAS,CAAA,EA2Bf,OA1BKrC,EAAMiB,UAAYjB,EAAMuB,WACzBe,EAAAA,QAAMD,EAAQ,CACVE,MAAO,GACPC,QAAS,EACT,yBAA0B,CACtBC,OAAQ,aACRC,SAAU,OACV,gBAAiB,CACbC,WAAY,EACZ,YAAa,CACTC,WAAY,OAM5BlC,GACA4B,EAAAA,QAAMD,EAAQ,CACV,uBAAwB,CACpBQ,UAAW,OAEf,yBAA0B,CACtBA,UAAW,SAIhBR,CAAM,IAEX9B,EAAoBf,IACtB,OAAQA,GACJ,KAAKN,QAAcA,eAACO,QAChB,MAAO,YACX,KAAKP,QAAcA,eAAC4D,MAChB,MAAO,WACX,KAAK5D,QAAcA,eAAC6D,WAChB,MAAO,aACX,KAAK7D,QAAcA,eAAC8D,UAChB,MAAO,YACX,KAAK9D,QAAcA,eAAC+D,SAChB,MAAO,OACX,QACI,MAAO,YACd,EAECxC,EAAkBjB,IACpB,OAAQA,GACJ,KAAKN,QAAcA,eAACO,QAChB,MAAO,UACX,KAAKP,QAAcA,eAAC4D,MAEpB,KAAK5D,QAAcA,eAAC6D,WAEpB,KAAK7D,QAAcA,eAAC8D,UAEpB,KAAK9D,QAAcA,eAAC+D,SAChB,MAAO,YACX,QACI,MAAO,UACd"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/button/button.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useMemo, useState } from 'react';\nimport MuiButton from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../icon';\nimport ButtonFocusVisibleStyled from '../common/styled/buttonFocusVisibleStyled';\nimport { ColourSheme } from '../../utils/enum';\nimport { ternaryCondition } from '../../utils/utilities';\nimport merge from 'lodash/merge';\n/**\n * @type ButtonVariants\n * @description The variants of the Button component.\n */\nexport var ButtonVariants;\n(function (ButtonVariants) {\n    ButtonVariants[\"PRIMARY\"] = \"primary\";\n    ButtonVariants[\"SECONDARY\"] = \"secondary\";\n    ButtonVariants[\"GHOST\"] = \"ghost\";\n    ButtonVariants[\"TERTIARY\"] = \"tertiary\";\n    ButtonVariants[\"NAVIGATION\"] = \"navigation\";\n})(ButtonVariants || (ButtonVariants = {}));\n/**\n * @description SkodaFlow Button component.\n * Properties are inherited from HTML Button element.\n * @param props ButtonProps\n * @returns React Functional Component\n * @deprecated Use Button component from '@mui/material' module instead.\n */\nexport const Button = forwardRef((_a, ref) => {\n    var _b;\n    var { variant = ButtonVariants.PRIMARY, colourScheme, direction = 'back', label, icon, compact, disabled } = _a, props = __rest(_a, [\"variant\", \"colourScheme\", \"direction\", \"label\", \"icon\", \"compact\", \"disabled\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const buttonVariantResolved = useMemo(() => getButtonVariant(variant), [variant]);\n    const buttonColor = useMemo(() => getButtonColor(variant), [variant]);\n    const onBlur = (e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    };\n    const isNavigationVariant = variant === 'navigation';\n    const isDirectionForward = isNavigationVariant && direction === 'forward';\n    const isDirectionBack = isNavigationVariant && direction === 'back';\n    return (_jsx(ButtonFocusVisibleStyled, { focusVisible: focusVisibled, isNavigationVariant: isNavigationVariant, fullWidth: props.fullWidth, children: _jsx(ButtonStyled, Object.assign({}, props, { ref: ref, variant: buttonVariantResolved, color: buttonColor, startIcon: (icon && !isNavigationVariant) || isDirectionBack ? (_jsx(Icon, { name: isDirectionBack ? 'arrow-left' : icon })) : undefined, endIcon: isDirectionForward ? _jsx(Icon, { name: \"arrow-right\" }) : undefined, disabled: disabled, size: compact ? 'small' : undefined, onFocusVisible: () => setFocusVisible(true), onBlur: onBlur, className: ternaryCondition(colourScheme, ColourSheme.LIGHT_MODE, 'MuiButton-white', ''), children: (_b = props.children) !== null && _b !== void 0 ? _b : label })) }));\n});\n/**\n * @description Button styling defintion based on props\n */\nconst ButtonStyled = styled(MuiButton)((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const props = args;\n    const isNavigationVariant = props.variant === 'navigation';\n    const styles = {};\n    if (!props.children && props.startIcon) {\n        merge(styles, {\n            width: 44,\n            padding: 0,\n            '& .MuiButton-startIcon': {\n                margin: '-4px 0 0 0',\n                fontSize: '16px',\n                '.MuiIcon-root': {\n                    paddingTop: 3,\n                    '&::before': {\n                        marginLeft: 1,\n                    },\n                },\n            },\n        });\n    }\n    if (isNavigationVariant) {\n        merge(styles, {\n            '& .MuiButton-endIcon': {\n                marginTop: '2px',\n            },\n            '& .MuiButton-startIcon': {\n                marginTop: '2px',\n            },\n        });\n    }\n    return styles;\n});\nconst getButtonVariant = (variant) => {\n    switch (variant) {\n        case ButtonVariants.PRIMARY:\n            return 'contained';\n        case ButtonVariants.GHOST:\n            return 'outlined';\n        case ButtonVariants.NAVIGATION:\n            return 'navigation';\n        case ButtonVariants.SECONDARY:\n            return 'contained';\n        case ButtonVariants.TERTIARY:\n            return 'text';\n        default:\n            return 'contained';\n    }\n};\nconst getButtonColor = (variant) => {\n    switch (variant) {\n        case ButtonVariants.PRIMARY:\n            return 'primary';\n        case ButtonVariants.GHOST:\n            return 'secondary';\n        case ButtonVariants.NAVIGATION:\n            return 'secondary';\n        case ButtonVariants.SECONDARY:\n            return 'secondary';\n        case ButtonVariants.TERTIARY:\n            return 'secondary';\n        default:\n            return 'primary';\n    }\n};\n//# sourceMappingURL=button.js.map"],"names":["ButtonVariants","Button","forwardRef","_a","ref","_b","variant","PRIMARY","colourScheme","direction","label","icon","compact","disabled","props","__rest","focusVisibled","setFocusVisible","useState","buttonVariantResolved","useMemo","getButtonVariant","buttonColor","getButtonColor","isNavigationVariant","isDirectionForward","isDirectionBack","_jsx","ButtonFocusVisibleStyled","focusVisible","fullWidth","children","jsx","ButtonStyled","Object","assign","color","startIcon","Icon","name","undefined","endIcon","size","onFocusVisible","onBlur","e","className","ternaryCondition","ColourSheme","LIGHT_MODE","styled","MuiButton","styles","merge","width","padding","margin","fontSize","paddingTop","marginLeft","marginTop","GHOST","NAVIGATION","SECONDARY","TERTIARY"],"mappings":"obAeWA,gBADAA,QAAeA,oBAAA,GACfA,EAMRA,yBAAmBA,QAAAA,eAAiB,CAAE,IALb,QAAI,UAC5BA,EAA0B,UAAI,YAC9BA,EAAsB,MAAI,QAC1BA,EAAyB,SAAI,WAC7BA,EAA2B,WAAI,aASvB,MAACC,EAASC,EAAUA,YAAC,CAACC,EAAIC,KAClC,IAAIC,GACAC,QAAEA,EAAUN,uBAAeO,QAAOC,aAAEA,EAAYC,UAAEA,EAAY,OAAMC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,SAAEA,GAAaV,EAAIW,EAAQC,EAAMA,OAACZ,EAAI,CAAC,UAAW,eAAgB,YAAa,QAAS,OAAQ,UAAW,aACzM,MAAOa,EAAeC,GAAmBC,EAAQA,UAAC,GAC5CC,EAAwBC,EAAAA,SAAQ,IAAMC,EAAiBf,IAAU,CAACA,IAClEgB,EAAcF,EAAAA,SAAQ,IAAMG,EAAejB,IAAU,CAACA,IAMtDkB,EAAkC,eAAZlB,EACtBmB,EAAqBD,GAAqC,YAAdf,EAC5CiB,EAAkBF,GAAqC,SAAdf,EAC/C,OAAQkB,EAAAA,IAAKC,EAAAA,QAA0B,CAAEC,aAAcb,EAAeQ,oBAAqBA,EAAqBM,UAAWhB,EAAMgB,UAAWC,SAAUJ,EAAIK,IAACC,EAAcC,OAAOC,OAAO,CAAE,EAAErB,EAAO,CAAEV,IAAKA,EAAKE,QAASa,EAAuBiB,MAAOd,EAAae,UAAY1B,IAASa,GAAwBE,EAAmBC,EAAIK,IAACM,OAAM,CAAEC,KAAMb,EAAkB,aAAef,SAAW6B,EAAWC,QAAShB,EAAqBE,EAAAA,IAAKW,EAAAA,KAAM,CAAEC,KAAM,qBAAmBC,EAAW3B,SAAUA,EAAU6B,KAAM9B,EAAU,aAAU4B,EAAWG,eAAgB,IAAM1B,GAAgB,GAAO2B,OARjjBC,IACZ5B,GAAgB,GACZH,EAAM8B,QACN9B,EAAM8B,OAAOC,EAAE,EAK0jBC,UAAWC,EAAAA,iBAAiBvC,EAAcwC,EAAWA,YAACC,WAAY,kBAAmB,IAAKlB,SAAoC,QAAzB1B,EAAKS,EAAMiB,gBAA6B,IAAP1B,EAAgBA,EAAKK,MAAc,IAKxvBuB,EAAeiB,EAAMA,OAACC,UAAPD,EAAmB/C,IAEpC,MAAMW,EADqBC,EAAMA,OAACZ,EAAI,CAAC,UAEjCqB,EAAwC,eAAlBV,EAAMR,QAC5B8C,EAAS,CAAA,EA2Bf,OA1BKtC,EAAMiB,UAAYjB,EAAMuB,WACzBgB,EAAAA,QAAMD,EAAQ,CACVE,MAAO,GACPC,QAAS,EACT,yBAA0B,CACtBC,OAAQ,aACRC,SAAU,OACV,gBAAiB,CACbC,WAAY,EACZ,YAAa,CACTC,WAAY,OAM5BnC,GACA6B,EAAAA,QAAMD,EAAQ,CACV,uBAAwB,CACpBQ,UAAW,OAEf,yBAA0B,CACtBA,UAAW,SAIhBR,CAAM,IAEX/B,EAAoBf,IACtB,OAAQA,GACJ,KAAKN,QAAcA,eAACO,QAChB,MAAO,YACX,KAAKP,QAAcA,eAAC6D,MAChB,MAAO,WACX,KAAK7D,QAAcA,eAAC8D,WAChB,MAAO,aACX,KAAK9D,QAAcA,eAAC+D,UAChB,MAAO,YACX,KAAK/D,QAAcA,eAACgE,SAChB,MAAO,OACX,QACI,MAAO,YACd,EAECzC,EAAkBjB,IACpB,OAAQA,GACJ,KAAKN,QAAcA,eAACO,QAChB,MAAO,UACX,KAAKP,QAAcA,eAAC6D,MAEpB,KAAK7D,QAAcA,eAAC8D,WAEpB,KAAK9D,QAAcA,eAAC+D,UAEpB,KAAK/D,QAAcA,eAACgE,SAChB,MAAO,YACX,QACI,MAAO,UACd"}

package/cjs/components/card/Card.d.ts

@@ -0,0 +1,92 @@
+import { SxProps, Theme } from '@mui/material';
+import { FC, ReactNode, MouseEvent } from 'react';
+export type BasicCardProps = {
+    /**
+     * Defines which color should the card be
+     * @default white
+     */
+    color: 'white' | 'grey' | 'clear';
+    /**
+     * Content of a Card
+     * @requires
+     */
+    children: ReactNode;
+    /**
+     * Specifies how the Card is sized
+     * content - Card will adjust its width based on width of its content
+     * parent - Card will occupy available space based on its parent
+     * @default content
+     */
+    cardSizing?: 'content' | 'parent';
+    /**
+     * Specifies that card works like a checkbox
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Specifies that card have flipping detail
+     * @default false
+     */
+    flipping?: boolean;
+    /**
+     * Specifies that card behaves as a link
+     * @default false
+     */
+    link?: boolean;
+    /**
+     * Renders Card disabled
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type SelectableCardProps = {
+    selectable: true;
+    /**
+     * Callback that is called when user click on selectable card
+     * @param isSelected
+     * @param event
+     * @returns void
+     * @default undefined
+     */
+    handleSelection?: (isSelected: boolean, event: any) => void;
+    /**
+     * Defines if selectable card is currently selected
+     * @required
+     */
+    isSelected: boolean;
+};
+export type FlippingCardProps = {
+    flipping: true;
+    /**
+     * Specifies if detail should be flipped on card hover
+     * @default true
+     */
+    flipOnHover?: boolean;
+    /**
+     * Specifies if detail should be flipped
+     * @default false
+     */
+    isFlipped?: boolean;
+    /**
+     * Content of the Card when it is flipped
+     */
+    flippingContent: ReactNode;
+};
+export type LinkCardProps = {
+    link: true;
+    /**
+     * Anchor link
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * On click handler
+     * @param e Click Event
+     * @returns void
+     */
+    onClick?: (e: MouseEvent) => void;
+};
+export type CardComponentProps = (SelectableCardProps | FlippingCardProps | LinkCardProps) & BasicCardProps;
+export declare const Card: FC<CardComponentProps>;
+export declare const CardDisabledOverlay: () => import("react/jsx-runtime").JSX.Element;
+export declare const useCardSxProps: (color: CardComponentProps['color'], cardSizing: CardComponentProps['cardSizing'], isDisabled?: boolean, isActive?: boolean, canInteract?: boolean) => SxProps<Theme>;

package/cjs/components/card/Card.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("tslib"),e=require("react/jsx-runtime"),a=require("@mui/material"),t=require("react"),i=require("./SelectableCard.js"),c=require("./FlippingCard.js"),o=require("./SimpleCard.js"),s=require("./LinkCard.js");exports.Card=a=>{var{color:t="white",cardSizing:n="content"}=a,d=r.__rest(a,["color","cardSizing"]);const b=Object.assign({color:t,cardSizing:n},d);return function(r){return!0===r.selectable}(b)?e.jsx(i.SelectableCard,Object.assign({},b)):function(r){return!0===r.flipping}(b)?e.jsx(c.FlippingCard,Object.assign({},b)):function(r){return!0===r.link}(b)?e.jsx(s.LinkCard,Object.assign({},b)):e.jsx(o.SimpleCard,Object.assign({},b))},exports.CardDisabledOverlay=()=>e.jsx(a.Box,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,background:r=>a.alpha(r.palette.surface.secondary,.8),zIndex:8}}),exports.useCardSxProps=(r,e,a,i,c)=>t.useMemo((()=>{let t={position:"relative",overflow:"hidden",padding:2,borderRadius:"8px",border:"1px solid",display:"content"===e?"inline-block":"block",height:"content"===e?void 0:"100%",transition:"border-color 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",background:"var(--card-background)",borderColor:i?"var(--card-active-border)":"var(--card-inactive-border)","--card-active-border":r=>r.palette.primary.main,"--card-active-hover-border":r=>r.palette.primary.light};return c&&(t=Object.assign(Object.assign({},t),{cursor:"pointer","&:hover":{borderColor:i?"var(--card-active-hover-border)":"var(--card-inactive-hover-border)"}})),a&&(t=Object.assign(Object.assign({},t),{cursor:"not-allowed"})),"white"===r&&(t=Object.assign(Object.assign({},t),{"--card-background":r=>r.palette.surface.tertiary,"--card-inactive-border":r=>r.palette.surface.secondary,"--card-inactive-hover-border":r=>r.palette.surface.primary})),"grey"===r&&(t=Object.assign(Object.assign({},t),{"--card-background":r=>r.palette.surface.primary,"--card-inactive-border":r=>r.palette.surface.secondary,"--card-inactive-hover-border":r=>r.palette.surface.primary})),"clear"===r&&(t=Object.assign(Object.assign({},t),{"--card-background":"transparent","--card-inactive-border":r=>r.palette.onSurface.os200,"--card-inactive-hover-border":r=>r.palette.surface.secondary,borderStyle:"dashed"})),t}),[r,i,c,e,a]);
+//# sourceMappingURL=Card.js.map

package/cjs/components/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Box, alpha } from '@mui/material';\nimport { useMemo } from 'react';\nimport { SelectableCard } from './SelectableCard';\nimport { FlippingCard } from './FlippingCard';\nimport { SimpleCard } from './SimpleCard';\nimport { LinkCard } from './LinkCard';\nfunction isFlippingCard(props) {\n    return props.flipping === true;\n}\nfunction isSelectableCard(props) {\n    return props.selectable === true;\n}\nfunction isLinkCard(props) {\n    return props.link === true;\n}\nexport const Card = (_a) => {\n    var { color = 'white', cardSizing = 'content' } = _a, rest = __rest(_a, [\"color\", \"cardSizing\"]);\n    const props = Object.assign({ color,\n        cardSizing }, rest);\n    if (isSelectableCard(props)) {\n        return _jsx(SelectableCard, Object.assign({}, props));\n    }\n    if (isFlippingCard(props)) {\n        return _jsx(FlippingCard, Object.assign({}, props));\n    }\n    if (isLinkCard(props)) {\n        return _jsx(LinkCard, Object.assign({}, props));\n    }\n    return _jsx(SimpleCard, Object.assign({}, props));\n};\nexport const CardDisabledOverlay = () => (_jsx(Box, { sx: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: (theme) => alpha(theme.palette.surface.secondary, 0.8),\n        zIndex: 8,\n    } }));\nexport const useCardSxProps = (color, cardSizing, isDisabled, isActive, canInteract) => useMemo(() => {\n    let sxProps = {\n        position: 'relative',\n        overflow: 'hidden',\n        padding: 2,\n        borderRadius: '8px',\n        border: '1px solid',\n        display: cardSizing === 'content' ? 'inline-block' : 'block',\n        height: cardSizing === 'content' ? undefined : '100%',\n        transition: 'border-color 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n        background: 'var(--card-background)',\n        borderColor: isActive ? 'var(--card-active-border)' : 'var(--card-inactive-border)',\n        '--card-active-border': (theme) => theme.palette.primary.main,\n        '--card-active-hover-border': (theme) => theme.palette.primary.light,\n    };\n    if (canInteract) {\n        sxProps = Object.assign(Object.assign({}, sxProps), { cursor: 'pointer', '&:hover': {\n                borderColor: isActive ? 'var(--card-active-hover-border)' : 'var(--card-inactive-hover-border)',\n            } });\n    }\n    if (isDisabled) {\n        sxProps = Object.assign(Object.assign({}, sxProps), { cursor: 'not-allowed' });\n    }\n    if (color === 'white') {\n        sxProps = Object.assign(Object.assign({}, sxProps), { '--card-background': (theme) => theme.palette.surface.tertiary, '--card-inactive-border': (theme) => theme.palette.surface.secondary, '--card-inactive-hover-border': (theme) => theme.palette.surface.primary });\n    }\n    if (color === 'grey') {\n        sxProps = Object.assign(Object.assign({}, sxProps), { '--card-background': (theme) => theme.palette.surface.primary, '--card-inactive-border': (theme) => theme.palette.surface.secondary, '--card-inactive-hover-border': (theme) => theme.palette.surface.primary });\n    }\n    if (color === 'clear') {\n        sxProps = Object.assign(Object.assign({}, sxProps), { '--card-background': 'transparent', '--card-inactive-border': (theme) => theme.palette.onSurface.os200, '--card-inactive-hover-border': (theme) => theme.palette.surface.secondary, borderStyle: 'dashed' });\n    }\n    return sxProps;\n}, [color, isActive, canInteract, cardSizing, isDisabled]);\n//# sourceMappingURL=Card.js.map"],"names":["_a","color","cardSizing","rest","__rest","props","Object","assign","selectable","isSelectableCard","_jsx","SelectableCard","flipping","isFlippingCard","FlippingCard","link","isLinkCard","LinkCard","SimpleCard","Box","sx","position","top","left","right","bottom","background","theme","alpha","palette","surface","secondary","zIndex","isDisabled","isActive","canInteract","useMemo","sxProps","overflow","padding","borderRadius","border","display","height","undefined","transition","borderColor","primary","main","light","cursor","tertiary","onSurface","os200","borderStyle"],"mappings":"sPAiBqBA,IACjB,IAAIC,MAAEA,EAAQ,QAAOC,WAAEA,EAAa,WAAcF,EAAIG,EAAOC,EAAMA,OAACJ,EAAI,CAAC,QAAS,eAClF,MAAMK,EAAQC,OAAOC,OAAO,CAAEN,QAC1BC,cAAcC,GAClB,OAVJ,SAA0BE,GACtB,OAA4B,IAArBA,EAAMG,UACjB,CAQQC,CAAiBJ,GACVK,EAAAA,IAAKC,EAAAA,eAAgBL,OAAOC,OAAO,CAAE,EAAEF,IAdtD,SAAwBA,GACpB,OAA0B,IAAnBA,EAAMO,QACjB,CAcQC,CAAeR,GACRK,EAAAA,IAAKI,EAAAA,aAAcR,OAAOC,OAAO,CAAE,EAAEF,IAXpD,SAAoBA,GAChB,OAAsB,IAAfA,EAAMU,IACjB,CAWQC,CAAWX,GACJK,EAAAA,IAAKO,EAAAA,SAAUX,OAAOC,OAAO,CAAE,EAAEF,IAErCK,EAAAA,IAAKQ,EAAAA,WAAYZ,OAAOC,OAAO,CAAE,EAAEF,GAAO,8BAElB,IAAOK,EAAAA,IAAKS,EAAGA,IAAE,CAAEC,GAAI,CAClDC,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,WAAaC,GAAUC,QAAMD,EAAME,QAAQC,QAAQC,UAAW,IAC9DC,OAAQ,4BAEc,CAAC/B,EAAOC,EAAY+B,EAAYC,EAAUC,IAAgBC,EAAAA,SAAQ,KAC5F,IAAIC,EAAU,CACVhB,SAAU,WACViB,SAAU,SACVC,QAAS,EACTC,aAAc,MACdC,OAAQ,YACRC,QAAwB,YAAfxC,EAA2B,eAAiB,QACrDyC,OAAuB,YAAfzC,OAA2B0C,EAAY,OAC/CC,WAAY,sDACZnB,WAAY,yBACZoB,YAAaZ,EAAW,4BAA8B,8BACtD,uBAAyBP,GAAUA,EAAME,QAAQkB,QAAQC,KACzD,6BAA+BrB,GAAUA,EAAME,QAAQkB,QAAQE,OAmBnE,OAjBId,IACAE,EAAU/B,OAAOC,OAAOD,OAAOC,OAAO,GAAI8B,GAAU,CAAEa,OAAQ,UAAW,UAAW,CAC5EJ,YAAaZ,EAAW,kCAAoC,wCAGpED,IACAI,EAAU/B,OAAOC,OAAOD,OAAOC,OAAO,GAAI8B,GAAU,CAAEa,OAAQ,iBAEpD,UAAVjD,IACAoC,EAAU/B,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAI8B,GAAU,CAAE,oBAAsBV,GAAUA,EAAME,QAAQC,QAAQqB,SAAU,yBAA2BxB,GAAUA,EAAME,QAAQC,QAAQC,UAAW,+BAAiCJ,GAAUA,EAAME,QAAQC,QAAQiB,WAEnP,SAAV9C,IACAoC,EAAU/B,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAI8B,GAAU,CAAE,oBAAsBV,GAAUA,EAAME,QAAQC,QAAQiB,QAAS,yBAA2BpB,GAAUA,EAAME,QAAQC,QAAQC,UAAW,+BAAiCJ,GAAUA,EAAME,QAAQC,QAAQiB,WAElP,UAAV9C,IACAoC,EAAU/B,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAI8B,GAAU,CAAE,oBAAqB,cAAe,yBAA2BV,GAAUA,EAAME,QAAQuB,UAAUC,MAAO,+BAAiC1B,GAAUA,EAAME,QAAQC,QAAQC,UAAWuB,YAAa,YAEpPjB,CAAO,GACf,CAACpC,EAAOiC,EAAUC,EAAajC,EAAY+B"}

package/cjs/components/card/FlippingCard.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BasicCardProps, FlippingCardProps } from './Card';
+export declare const FlippingCard: FC<FlippingCardProps & BasicCardProps>;

package/cjs/components/card/FlippingCard.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("tslib"),i=require("react/jsx-runtime"),r=require("react"),s=require("./Card.js"),l=require("@mui/material");require("../../utils/enum.js");var d=require("../../utils/useClosure/useClosure.js");exports.FlippingCard=u=>{var{flipOnHover:a=!0}=u,n=e.__rest(u,["flipOnHover"]);const t=s.useCardSxProps(n.color,n.cardSizing,n.disabled),{isOpen:o,setOpen:p}=d.useClosure(n.isFlipped),c=r.useRef(null);r.useEffect((()=>{p(n.isFlipped)}),[n.isFlipped,p]);const b=r.useCallback((()=>{a&&!n.disabled&&p(!0)}),[a,p,n.disabled]),x=r.useCallback((()=>{!a||n.isFlipped||n.disabled||p(!1)}),[a,n.isFlipped,n.disabled,p]);return i.jsxs(l.Box,{sx:t,ref:c,onMouseEnter:b,onMouseLeave:x,children:[n.disabled&&i.jsx(s.CardDisabledOverlay,{}),n.children,i.jsx(l.Slide,{in:o,direction:"up",container:c.current,children:i.jsx(l.Box,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,padding:2,background:e=>e.palette.surface.secondary},children:n.flippingContent})})]})};
+//# sourceMappingURL=FlippingCard.js.map

package/cjs/components/card/FlippingCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlippingCard.js","sources":["../../../../src/components/card/FlippingCard.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useRef } from 'react';\nimport { CardDisabledOverlay, useCardSxProps } from './Card';\nimport { Box, Slide } from '@mui/material';\nimport { useClosure } from '@/src/utils';\nexport const FlippingCard = (_a) => {\n    var { flipOnHover = true } = _a, props = __rest(_a, [\"flipOnHover\"]);\n    const sxProps = useCardSxProps(props.color, props.cardSizing, props.disabled);\n    const { isOpen: isFlipped, setOpen: setIsFlipped } = useClosure(props.isFlipped);\n    const containerRef = useRef(null);\n    useEffect(() => {\n        setIsFlipped(props.isFlipped);\n    }, [props.isFlipped, setIsFlipped]);\n    const handleMouseEnter = useCallback(() => {\n        if (flipOnHover && !props.disabled) {\n            setIsFlipped(true);\n        }\n    }, [flipOnHover, setIsFlipped, props.disabled]);\n    const handleMouseLeave = useCallback(() => {\n        if (flipOnHover && !props.isFlipped && !props.disabled) {\n            setIsFlipped(false);\n        }\n    }, [flipOnHover, props.isFlipped, props.disabled, setIsFlipped]);\n    return (_jsxs(Box, { sx: sxProps, ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [props.disabled && _jsx(CardDisabledOverlay, {}), props.children, _jsx(Slide, { in: isFlipped, direction: \"up\", container: containerRef.current, children: _jsx(Box, { sx: {\n                        position: 'absolute',\n                        top: 0,\n                        left: 0,\n                        right: 0,\n                        bottom: 0,\n                        padding: 2,\n                        background: (theme) => theme.palette.surface.secondary,\n                    }, children: props.flippingContent }) })] }));\n};\n//# sourceMappingURL=FlippingCard.js.map"],"names":["_a","flipOnHover","props","__rest","sxProps","useCardSxProps","color","cardSizing","disabled","isOpen","isFlipped","setOpen","setIsFlipped","useClosure","containerRef","useRef","useEffect","handleMouseEnter","useCallback","handleMouseLeave","_jsxs","Box","sx","ref","onMouseEnter","onMouseLeave","children","_jsx","CardDisabledOverlay","jsx","Slide","in","direction","container","current","position","top","left","right","bottom","padding","background","theme","palette","surface","secondary","flippingContent"],"mappings":"kPAM6BA,IACzB,IAAIC,YAAEA,GAAc,GAASD,EAAIE,EAAQC,EAAAA,OAAOH,EAAI,CAAC,gBACrD,MAAMI,EAAUC,EAAcA,eAACH,EAAMI,MAAOJ,EAAMK,WAAYL,EAAMM,WAC5DC,OAAQC,EAAWC,QAASC,GAAiBC,EAAUA,WAACX,EAAMQ,WAChEI,EAAeC,SAAO,MAC5BC,EAAAA,WAAU,KACNJ,EAAaV,EAAMQ,UAAU,GAC9B,CAACR,EAAMQ,UAAWE,IACrB,MAAMK,EAAmBC,EAAAA,aAAY,KAC7BjB,IAAgBC,EAAMM,UACtBI,GAAa,EAChB,GACF,CAACX,EAAaW,EAAcV,EAAMM,WAC/BW,EAAmBD,EAAAA,aAAY,MAC7BjB,GAAgBC,EAAMQ,WAAcR,EAAMM,UAC1CI,GAAa,EAChB,GACF,CAACX,EAAaC,EAAMQ,UAAWR,EAAMM,SAAUI,IAClD,OAAQQ,EAAAA,KAAMC,EAAAA,IAAK,CAAEC,GAAIlB,EAASmB,IAAKT,EAAcU,aAAcP,EAAkBQ,aAAcN,EAAkBO,SAAU,CAACxB,EAAMM,UAAYmB,EAAAA,IAAKC,EAAmBA,oBAAE,CAAE,GAAG1B,EAAMwB,SAAUC,EAAIE,IAACC,EAAKA,MAAE,CAAEC,GAAIrB,EAAWsB,UAAW,KAAMC,UAAWnB,EAAaoB,QAASR,SAAUC,EAAAA,IAAKN,EAAAA,IAAK,CAAEC,GAAI,CACtRa,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,QAAS,EACTC,WAAaC,GAAUA,EAAMC,QAAQC,QAAQC,WAC9CnB,SAAUxB,EAAM4C,sBAA2B"}

package/cjs/components/card/LinkCard.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BasicCardProps, LinkCardProps } from './Card';
+export declare const LinkCard: FC<LinkCardProps & BasicCardProps>;