@skodaflow/web-library 8.0.1 → 8.2.0

package/materialui/tabs/Tab.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"tslib";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{forwardRef as t,useMemo as n}from"react";import{ButtonBase as s,Box as r}from"@mui/material";const l=t((t,l)=>{var o,{children:c,link:b=!1}=t,m=i(t,["children","link"]);const d=n(()=>({display:"inherit",alignItems:"inherit",justifyContent:"inherit",flexDirection:"inherit",gap:"inherit"}),[]);return e(s,Object.assign({ref:l,"aria-label":"navigation"},b&&{component:"a"},m,{tabIndex:(null===(o=m.className)||void 0===o?void 0:o.includes("Mui-disabled"))?-1:0,children:a(r,{className:"FlowTab-labelWrapper",sx:Object.assign(Object.assign({},d),{position:"relative"}),children:[e(r,{className:"FlowTab-label",sx:Object.assign(Object.assign({},d),{position:"absolute"}),children:c}),e(r,{className:"FlowTab-selectedLabel",sx:Object.assign(Object.assign({},d),{fontWeight:"700",opacity:"0",position:"relative"}),"aria-hidden":"true",children:c})]})}))});export{l as TabComponent};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{forwardRef as a,useMemo as t}from"react";import{ButtonBase as r,Box as l}from"@mui/material";const n=a(({children:a,link:n=!1,...o},s)=>{const c=t(()=>({display:"inherit",alignItems:"inherit",justifyContent:"inherit",flexDirection:"inherit",gap:"inherit"}),[]);return e(r,{ref:s,"aria-label":"navigation",...n&&{component:"a"},...o,tabIndex:o.className?.includes("Mui-disabled")?-1:0,children:i(l,{className:"FlowTab-labelWrapper",sx:{...c,position:"relative"},children:[e(l,{className:"FlowTab-label",sx:{...c,position:"absolute"},children:a}),e(l,{className:"FlowTab-selectedLabel",sx:{...c,fontWeight:"700",opacity:"0",position:"relative"},"aria-hidden":"true",children:a})]})})});export{n as TabComponent};
 //# sourceMappingURL=Tab.js.map

package/materialui/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/materialui/tabs/Tab.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { Box, ButtonBase, ButtonBaseProps } from '@mui/material';\n\n/**\n * Component used to render Tab, contains duplication of label to change font-weight without changing width\n */\nexport const TabComponent: React.FC<ButtonBaseProps & { link?: boolean }> = forwardRef(\n  ({ children, link = false, ...rest }, ref) => {\n    // shared style between label and selectedLabel\n    const sharedLabelSx = useMemo(\n      () => ({\n        display: 'inherit',\n        alignItems: 'inherit',\n        justifyContent: 'inherit',\n        flexDirection: 'inherit',\n        gap: 'inherit',\n      }),\n      [],\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        aria-label=\"navigation\"\n        {...(link && { component: 'a' })}\n        {...rest}\n        tabIndex={rest.className?.includes('Mui-disabled') ? -1 : 0}\n      >\n        <Box className=\"FlowTab-labelWrapper\" sx={{ ...sharedLabelSx, position: 'relative' }}>\n          <Box\n            className=\"FlowTab-label\"\n            sx={{\n              ...sharedLabelSx,\n              position: 'absolute',\n              // expands from center, can be changed to expand from left/right with left: 0;\n            }}\n          >\n            {children}\n          </Box>\n          <Box\n            className=\"FlowTab-selectedLabel\"\n            sx={{\n              ...sharedLabelSx,\n              fontWeight: '700',\n              // hidden by default, appears once Tab is selected (tab.theme)\n              opacity: '0',\n              position: 'relative',\n            }}\n            aria-hidden=\"true\"\n          >\n            {children}\n          </Box>\n        </Box>\n      </ButtonBase>\n    );\n  },\n);\n"],"names":["TabComponent","forwardRef","_a","ref","children","link","rest","__rest","sharedLabelSx","useMemo","display","alignItems","justifyContent","flexDirection","gap","_jsx","ButtonBase","component","tabIndex","_b","className","includes","_jsxs","Box","sx","Object","assign","position","fontWeight","opacity"],"mappings":"qLAMO,MAAMA,EAA+DC,EAC1E,CAACC,EAAqCC,YAArCC,SAAEA,EAAQC,KAAEA,GAAO,KAAUC,EAAIC,EAAAL,EAAjC,CAAA,WAAA,SAEC,MAAMM,EAAgBC,EACpB,KAAA,CACEC,QAAS,UACTC,WAAY,UACZC,eAAgB,UAChBC,cAAe,UACfC,IAAK,YAEP,IAGF,OACEC,EAACC,iBACCb,IAAKA,EAAG,aACG,cACNE,GAAQ,CAAEY,UAAW,KACtBX,GACJY,UAAwB,QAAdC,EAAAb,EAAKc,iBAAS,IAAAD,OAAA,EAAAA,EAAEE,SAAS,oBAAuB,EAACjB,SAE3DkB,EAACC,EAAG,CAACH,UAAU,uBAAuBI,GAAEC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAOlB,GAAa,CAAEmB,SAAU,aAAUvB,SAAA,CAChFW,EAACQ,EAAG,CACFH,UAAU,gBACVI,GAAEC,OAAAC,OAAAD,OAAAC,OAAA,GACGlB,GAAa,CAChBmB,SAAU,aAAUvB,SAIrBA,IAEHW,EAACQ,EAAG,CACFH,UAAU,wBACVI,GAAEC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGlB,GAAa,CAChBoB,WAAY,MAEZC,QAAS,IACTF,SAAU,aAAU,cAEV,OAAMvB,SAEjBA"}
+{"version":3,"file":"Tab.js","sources":["../../../src/materialui/tabs/Tab.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { Box, ButtonBase, ButtonBaseProps } from '@mui/material';\n\n/**\n * Component used to render Tab, contains duplication of label to change font-weight without changing width\n */\nexport const TabComponent: React.FC<ButtonBaseProps & { link?: boolean }> = forwardRef(\n  ({ children, link = false, ...rest }, ref) => {\n    // shared style between label and selectedLabel\n    const sharedLabelSx = useMemo(\n      () => ({\n        display: 'inherit',\n        alignItems: 'inherit',\n        justifyContent: 'inherit',\n        flexDirection: 'inherit',\n        gap: 'inherit',\n      }),\n      [],\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        aria-label=\"navigation\"\n        {...(link && { component: 'a' })}\n        {...rest}\n        tabIndex={rest.className?.includes('Mui-disabled') ? -1 : 0}\n      >\n        <Box className=\"FlowTab-labelWrapper\" sx={{ ...sharedLabelSx, position: 'relative' }}>\n          <Box\n            className=\"FlowTab-label\"\n            sx={{\n              ...sharedLabelSx,\n              position: 'absolute',\n              // expands from center, can be changed to expand from left/right with left: 0;\n            }}\n          >\n            {children}\n          </Box>\n          <Box\n            className=\"FlowTab-selectedLabel\"\n            sx={{\n              ...sharedLabelSx,\n              fontWeight: '700',\n              // hidden by default, appears once Tab is selected (tab.theme)\n              opacity: '0',\n              position: 'relative',\n            }}\n            aria-hidden=\"true\"\n          >\n            {children}\n          </Box>\n        </Box>\n      </ButtonBase>\n    );\n  },\n);\n"],"names":["TabComponent","forwardRef","children","link","rest","ref","sharedLabelSx","useMemo","display","alignItems","justifyContent","flexDirection","gap","_jsx","ButtonBase","component","tabIndex","className","includes","_jsxs","Box","sx","position","fontWeight","opacity"],"mappings":"4JAMaA,EAA+DC,EAC1E,EAAGC,WAAUC,QAAO,KAAUC,GAAQC,KAEpC,MAAMC,EAAgBC,EACpB,KAAA,CACEC,QAAS,UACTC,WAAY,UACZC,eAAgB,UAChBC,cAAe,UACfC,IAAK,YAEP,IAGF,OACEC,EAACC,EAAU,CACTT,IAAKA,EAAG,aACG,gBACNF,GAAQ,CAAEY,UAAW,QACtBX,EACJY,SAAUZ,EAAKa,WAAWC,SAAS,iBAAkB,EAAK,EAAChB,SAE3DiB,EAACC,EAAG,CAACH,UAAU,uBAAuBI,GAAI,IAAKf,EAAegB,SAAU,YAAYpB,SAAA,CAClFW,EAACO,EAAG,CACFH,UAAU,gBACVI,GAAI,IACCf,EACHgB,SAAU,YAEXpB,SAEAA,IAEHW,EAACO,EAAG,CACFH,UAAU,wBACVI,GAAI,IACCf,EACHiB,WAAY,MAEZC,QAAS,IACTF,SAAU,YACX,cACW,OAAMpB,SAEjBA"}

package/materialui/tabs/TabPanel.d.ts

@@ -9,8 +9,13 @@ export interface TabPanelProps extends BoxProps<ElementType> {
      *  index of the tab panel, when equals to value, content is shown
      */
     index?: number | string;
+    /**
+     * always keep the children in the DOM.
+     * @default false
+     */
+    keepMounted?: boolean;
 }
 /**
  * Show or hide content based on the provided value and index
  */
-export declare function TabPanel({ children, value, index, ...rest }: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanel({ children, sx, value, index, keepMounted, ...rest }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/materialui/tabs/TabPanel.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as r}from"react/jsx-runtime";import{Box as i}from"@mui/material";function a(a){var{children:t,value:n,index:l}=a,d=e(a,["children","value","index"]);return r(i,Object.assign({role:"tabpanel","data-testid":`TabPanel-${l}`,"aria-hidden":n!==l},d,{children:n===l&&t}))}export{a as TabPanel};
+import{jsx as e}from"react/jsx-runtime";import{Box as r}from"@mui/material";function a({children:a,sx:i,value:n,index:t,keepMounted:d=!1,...o}){return e(r,{role:"tabpanel","data-testid":`TabPanel-${t}`,"aria-hidden":n!==t,sx:{...i,...n!==t&&{display:"none"}},...o,children:(d||n===t)&&a})}export{a as TabPanel};
 //# sourceMappingURL=TabPanel.js.map

package/materialui/tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../src/materialui/tabs/TabPanel.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface TabPanelProps extends BoxProps<ElementType> {\n  /**\n   *  currently selected tab\n   */\n  value?: number | string;\n  /**\n   *  index of the tab panel, when equals to value, content is shown\n   */\n  index?: number | string;\n}\n\n/**\n * Show or hide content based on the provided value and index\n */\nexport function TabPanel({ children, value, index, ...rest }: TabPanelProps) {\n  return (\n    <Box role=\"tabpanel\" data-testid={`TabPanel-${index}`} aria-hidden={value !== index} {...rest}>\n      {value === index && children}\n    </Box>\n  );\n}\n"],"names":["TabPanel","_a","children","value","index","rest","__rest","_jsx","Box","Object","assign","role"],"mappings":"2GAiBM,SAAUA,EAASC,OAAAC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,KAAUC,EAAIC,EAAAL,EAAjC,CAAA,WAAA,QAAA,UACvB,OACEM,EAACC,EAAGC,OAAAC,OAAA,CAACC,KAAK,WAAU,cAAc,YAAYP,IAAO,cAAeD,IAAUC,GAAWC,EAAI,CAAAH,SAC1FC,IAAUC,GAASF,IAG1B"}
+{"version":3,"file":"TabPanel.js","sources":["../../../src/materialui/tabs/TabPanel.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface TabPanelProps extends BoxProps<ElementType> {\n  /**\n   *  currently selected tab\n   */\n  value?: number | string;\n  /**\n   *  index of the tab panel, when equals to value, content is shown\n   */\n  index?: number | string;\n  /**\n   * always keep the children in the DOM.\n   * @default false\n   */\n  keepMounted?: boolean;\n}\n\n/**\n * Show or hide content based on the provided value and index\n */\nexport function TabPanel({ children, sx, value, index, keepMounted = false, ...rest }: TabPanelProps) {\n  return (\n    <Box\n      role=\"tabpanel\"\n      data-testid={`TabPanel-${index}`}\n      aria-hidden={value !== index}\n      sx={{\n        ...sx,\n        ...(value !== index && { display: 'none' }),\n      }}\n      {...rest}\n    >\n      {(keepMounted || value === index) && children}\n    </Box>\n  );\n}\n"],"names":["TabPanel","children","sx","value","index","keepMounted","rest","_jsx","Box","role","display"],"mappings":"qFAsBgBA,GAASC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,MAAEA,EAAKC,YAAEA,GAAc,KAAUC,IAC7E,OACEC,EAACC,EAAG,CACFC,KAAK,WAAU,cACF,YAAYL,IAAO,cACnBD,IAAUC,EACvBF,GAAI,IACCA,KACCC,IAAUC,GAAS,CAAEM,QAAS,YAEhCJ,EAAIL,UAENI,GAAeF,IAAUC,IAAUH,GAG3C"}

package/materialui/tabs/TabsScrollButton.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsx as t}from"react/jsx-runtime";import{IconButton as r}from"@mui/material";import{ChevronLeftIcon as e}from"../../components/icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as s}from"../../components/icon/stroke/ChevronRightIcon.js";const i=i=>{var{direction:l,slots:n,slotProps:m,ownerState:c}=i,a=o(i,["direction","slots","slotProps","ownerState"]);return t(r,Object.assign({"aria-label":"left"===l?"Scroll left":"Scroll right","data-testid":`TabsScrollButton-${l}`,size:"small",sx:{m:"4px"}},a,{children:t("left"===l?e:s,{})}))};export{i as TabsScrollButton};
+import{jsx as o}from"react/jsx-runtime";import{IconButton as t}from"@mui/material";import{ChevronLeftIcon as r}from"../../components/icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as e}from"../../components/icon/stroke/ChevronRightIcon.js";const i=({direction:i,slots:l,slotProps:s,ownerState:n,...m})=>o(t,{"aria-label":"left"===i?"Scroll left":"Scroll right","data-testid":`TabsScrollButton-${i}`,size:"small",sx:{m:"4px"},...m,children:o("left"===i?r:e,{})});export{i as TabsScrollButton};
 //# sourceMappingURL=TabsScrollButton.js.map

package/materialui/tabs/TabsScrollButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsScrollButton.js","sources":["../../../src/materialui/tabs/TabsScrollButton.tsx"],"sourcesContent":["import { IconButton } from '@mui/material';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\n\n/**\n * This component renders a scroll button that changes based on the scroll direction\n */\nexport const TabsScrollButton = ({ direction, slots, slotProps, ownerState, ...rest }) => {\n  return (\n    <IconButton\n      aria-label={direction === 'left' ? 'Scroll left' : 'Scroll right'}\n      data-testid={`TabsScrollButton-${direction}`}\n      size=\"small\"\n      sx={{ m: '4px' }}\n      {...rest}\n    >\n      {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n    </IconButton>\n  );\n};\n"],"names":["TabsScrollButton","_a","direction","slots","slotProps","ownerState","rest","__rest","_jsx","IconButton","Object","assign","size","sx","m","children","ChevronLeftIcon","ChevronRightIcon"],"mappings":"wRAOO,MAAMA,EAAoBC,IAAA,IAAAC,UAAEA,EAASC,MAAEA,EAAKC,UAAEA,EAASC,WAAEA,GAAUJ,EAAKK,EAAIC,EAAAN,EAAlD,CAAA,YAAA,QAAA,YAAA,eAC/B,OACEO,EAACC,EAAUC,OAAAC,OAAA,CAAA,aACiB,SAAdT,EAAuB,cAAgB,eAAc,cACpD,oBAAoBA,IACjCU,KAAK,QACLC,GAAI,CAAEC,EAAG,QACLR,EAAI,CAAAS,SAEgBP,EAAT,SAAdN,EAAwBc,EAAsBC,EAAP,CAAA"}
+{"version":3,"file":"TabsScrollButton.js","sources":["../../../src/materialui/tabs/TabsScrollButton.tsx"],"sourcesContent":["import { IconButton } from '@mui/material';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\n\n/**\n * This component renders a scroll button that changes based on the scroll direction\n */\nexport const TabsScrollButton = ({ direction, slots, slotProps, ownerState, ...rest }) => {\n  return (\n    <IconButton\n      aria-label={direction === 'left' ? 'Scroll left' : 'Scroll right'}\n      data-testid={`TabsScrollButton-${direction}`}\n      size=\"small\"\n      sx={{ m: '4px' }}\n      {...rest}\n    >\n      {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n    </IconButton>\n  );\n};\n"],"names":["TabsScrollButton","direction","slots","slotProps","ownerState","rest","_jsx","IconButton","size","sx","m","children","ChevronLeftIcon","ChevronRightIcon"],"mappings":"yPAOO,MAAMA,EAAmB,EAAGC,YAAWC,QAAOC,YAAWC,gBAAeC,KAE3EC,EAACC,EAAU,CAAA,aACiB,SAAdN,EAAuB,cAAgB,eAAc,cACpD,oBAAoBA,IACjCO,KAAK,QACLC,GAAI,CAAEC,EAAG,UACLL,EAAIM,SAEgBL,EAAT,SAAdL,EAAwBW,EAAsBC,EAAP,CAAA"}

package/materialui/tabs/tab.theme.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{TabComponent as t}from"./Tab.js";import{getFocusRingStyle as o}from"../../components/focusring/focusring.js";const i={defaultProps:{disableRipple:!0,iconPosition:"start",component:t,LinkComponent:o=>e(t,Object.assign({link:!0},o))},styleOverrides:{root:({theme:e,ownerState:t})=>Object.assign(Object.assign(Object.assign(Object.assign({position:"relative",overflow:"visible",padding:"8px 8px",minHeight:"0",minWidth:"0",gap:"8px",margin:"2px 2px 10px",borderRadius:"4px",fontSize:"20px",textTransform:"none",fontWeight:"400",color:e.palette.text.primary,"&:hover, &.Mui-focusVisible":{"& .FlowTab-label":{display:"none"},"& .FlowTab-selectedLabel":{opacity:"1"}}},t.icon&&Object.assign(Object.assign({},"start"===t.iconPosition&&{"& .FlowTab-label":{left:"0"}}),"end"===t.iconPosition&&{"& .FlowTab-label":{right:"0"}})),{"&.Mui-selected":{color:e.palette.text.primary,fontWeight:"700","& .FlowTab-label":{display:"none"},"& .FlowTab-selectedLabel":{opacity:"1"}},"&.Mui-disabled":{color:e.palette.disabled.tertiary}}),o(e,!1,"2px")),{[e.breakpoints.down("md")]:{fontSize:"16px",marginBottom:"10px"}})}};export{i as flowTab};
+import{jsx as o}from"react/jsx-runtime";import{TabComponent as e}from"./Tab.js";import{getFocusRingStyle as t}from"../../components/focusring/focusring.js";const i={defaultProps:{disableRipple:!0,iconPosition:"start",component:e,LinkComponent:t=>o(e,{link:!0,...t})},styleOverrides:{root:({theme:o,ownerState:e})=>({position:"relative",overflow:"visible",padding:"8px 8px",minHeight:"0",minWidth:"0",gap:"8px",margin:"2px 2px 10px",borderRadius:"4px",fontSize:"20px",textTransform:"none",fontWeight:"400",color:o.palette.text.primary,"&:hover, &.Mui-focusVisible":{"& .FlowTab-label":{display:"none"},"& .FlowTab-selectedLabel":{opacity:"1"}},...e.icon&&{..."start"===e.iconPosition&&{"& .FlowTab-label":{left:"0"}},..."end"===e.iconPosition&&{"& .FlowTab-label":{right:"0"}}},"&.Mui-selected":{color:o.palette.text.primary,fontWeight:"700","& .FlowTab-label":{display:"none"},"& .FlowTab-selectedLabel":{opacity:"1"}},"&.Mui-disabled":{color:o.palette.disabled.tertiary},...t(o,!1,"2px"),[o.breakpoints.down("md")]:{fontSize:"16px",marginBottom:"10px"}})}};export{i as flowTab};
 //# sourceMappingURL=tab.theme.js.map

package/materialui/tabs/tab.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.theme.js","sources":["../../../src/materialui/tabs/tab.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { TabComponent } from './Tab';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport const flowTab: Components<Theme>['MuiTab'] = {\n  defaultProps: {\n    disableRipple: true,\n    iconPosition: 'start',\n    // duplicate labels so we can change font-weight without increasing width\n    component: TabComponent,\n    LinkComponent: (props) => <TabComponent link {...props} />,\n  },\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      position: 'relative',\n      overflow: 'visible',\n      // proportions\n      padding: '8px 8px',\n      minHeight: '0',\n      minWidth: '0',\n      // space between label and icon\n      gap: '8px',\n      // make sure there is space for focused boxShadow\n      margin: '2px 2px 10px',\n      // style\n      borderRadius: '4px',\n      // custom font style according to design\n      fontSize: '20px',\n      textTransform: 'none',\n      fontWeight: '400',\n      // colors and effects\n      color: theme.palette.text.primary,\n      '&:hover, &.Mui-focusVisible': {\n        // hide regular label\n        '& .FlowTab-label': {\n          display: 'none',\n        },\n        // show selected label with bolder font\n        '& .FlowTab-selectedLabel': {\n          opacity: '1',\n        },\n      },\n      // icon in tab\n      ...(ownerState.icon && {\n        // prevent icon from jumping between switching font weights\n        ...(ownerState.iconPosition === 'start' && {\n          // expand from left\n          '& .FlowTab-label': {\n            left: '0',\n          },\n        }),\n        ...(ownerState.iconPosition === 'end' && {\n          // expand from right\n          '& .FlowTab-label': {\n            right: '0',\n          },\n        }),\n      }),\n      // active\n      '&.Mui-selected': {\n        color: theme.palette.text.primary,\n        fontWeight: '700',\n        // hide regular label\n        '& .FlowTab-label': {\n          display: 'none',\n        },\n        // show selected label with bolder font\n        '& .FlowTab-selectedLabel': {\n          opacity: '1',\n        },\n      },\n      // disabled\n      '&.Mui-disabled': {\n        color: theme.palette.disabled.tertiary,\n      },\n      // focused style\n      ...getFocusRingStyle(theme, false, '2px'),\n      // responsive\n      [theme.breakpoints.down('md')]: {\n        fontSize: '16px',\n        marginBottom: '10px',\n      },\n    }),\n  },\n};\n"],"names":["flowTab","defaultProps","disableRipple","iconPosition","component","TabComponent","LinkComponent","props","_jsx","Object","assign","link","styleOverrides","root","theme","ownerState","position","overflow","padding","minHeight","minWidth","gap","margin","borderRadius","fontSize","textTransform","fontWeight","color","palette","text","primary","display","opacity","icon","left","right","disabled","tertiary","getFocusRingStyle","breakpoints","down","marginBottom"],"mappings":"4JAIO,MAAMA,EAAuC,CAClDC,aAAc,CACZC,eAAe,EACfC,aAAc,QAEdC,UAAWC,EACXC,cAAgBC,GAAUC,EAACH,EAAYI,OAAAC,OAAA,CAACC,MAAI,GAAKJ,KAEnDK,eAAgB,CACdC,KAAM,EAAGC,QAAOC,yEACdC,SAAU,WACVC,SAAU,UAEVC,QAAS,UACTC,UAAW,IACXC,SAAU,IAEVC,IAAK,MAELC,OAAQ,eAERC,aAAc,MAEdC,SAAU,OACVC,cAAe,OACfC,WAAY,MAEZC,MAAOb,EAAMc,QAAQC,KAAKC,QAC1B,8BAA+B,CAE7B,mBAAoB,CAClBC,QAAS,QAGX,2BAA4B,CAC1BC,QAAS,OAITjB,EAAWkB,MAAIxB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAEe,UAA5BK,EAAWZ,cAA4B,CAEzC,mBAAoB,CAClB+B,KAAM,OAGsB,QAA5BnB,EAAWZ,cAA0B,CAEvC,mBAAoB,CAClBgC,MAAO,QAGX,CAEF,iBAAkB,CAChBR,MAAOb,EAAMc,QAAQC,KAAKC,QAC1BJ,WAAY,MAEZ,mBAAoB,CAClBK,QAAS,QAGX,2BAA4B,CAC1BC,QAAS,MAIb,iBAAkB,CAChBL,MAAOb,EAAMc,QAAQQ,SAASC,YAG7BC,EAAkBxB,GAAO,EAAO,QAAM,CAEzC,CAACA,EAAMyB,YAAYC,KAAK,OAAQ,CAC9BhB,SAAU,OACViB,aAAc"}
+{"version":3,"file":"tab.theme.js","sources":["../../../src/materialui/tabs/tab.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { TabComponent } from './Tab';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport const flowTab: Components<Theme>['MuiTab'] = {\n  defaultProps: {\n    disableRipple: true,\n    iconPosition: 'start',\n    // duplicate labels so we can change font-weight without increasing width\n    component: TabComponent,\n    LinkComponent: (props) => <TabComponent link {...props} />,\n  },\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      position: 'relative',\n      overflow: 'visible',\n      // proportions\n      padding: '8px 8px',\n      minHeight: '0',\n      minWidth: '0',\n      // space between label and icon\n      gap: '8px',\n      // make sure there is space for focused boxShadow\n      margin: '2px 2px 10px',\n      // style\n      borderRadius: '4px',\n      // custom font style according to design\n      fontSize: '20px',\n      textTransform: 'none',\n      fontWeight: '400',\n      // colors and effects\n      color: theme.palette.text.primary,\n      '&:hover, &.Mui-focusVisible': {\n        // hide regular label\n        '& .FlowTab-label': {\n          display: 'none',\n        },\n        // show selected label with bolder font\n        '& .FlowTab-selectedLabel': {\n          opacity: '1',\n        },\n      },\n      // icon in tab\n      ...(ownerState.icon && {\n        // prevent icon from jumping between switching font weights\n        ...(ownerState.iconPosition === 'start' && {\n          // expand from left\n          '& .FlowTab-label': {\n            left: '0',\n          },\n        }),\n        ...(ownerState.iconPosition === 'end' && {\n          // expand from right\n          '& .FlowTab-label': {\n            right: '0',\n          },\n        }),\n      }),\n      // active\n      '&.Mui-selected': {\n        color: theme.palette.text.primary,\n        fontWeight: '700',\n        // hide regular label\n        '& .FlowTab-label': {\n          display: 'none',\n        },\n        // show selected label with bolder font\n        '& .FlowTab-selectedLabel': {\n          opacity: '1',\n        },\n      },\n      // disabled\n      '&.Mui-disabled': {\n        color: theme.palette.disabled.tertiary,\n      },\n      // focused style\n      ...getFocusRingStyle(theme, false, '2px'),\n      // responsive\n      [theme.breakpoints.down('md')]: {\n        fontSize: '16px',\n        marginBottom: '10px',\n      },\n    }),\n  },\n};\n"],"names":["flowTab","defaultProps","disableRipple","iconPosition","component","TabComponent","LinkComponent","props","_jsx","link","styleOverrides","root","theme","ownerState","position","overflow","padding","minHeight","minWidth","gap","margin","borderRadius","fontSize","textTransform","fontWeight","color","palette","text","primary","display","opacity","icon","left","right","disabled","tertiary","getFocusRingStyle","breakpoints","down","marginBottom"],"mappings":"4JAIO,MAAMA,EAAuC,CAClDC,aAAc,CACZC,eAAe,EACfC,aAAc,QAEdC,UAAWC,EACXC,cAAgBC,GAAUC,EAACH,EAAY,CAACI,MAAI,KAAKF,KAEnDG,eAAgB,CACdC,KAAM,EAAGC,QAAOC,iBAAY,CAC1BC,SAAU,WACVC,SAAU,UAEVC,QAAS,UACTC,UAAW,IACXC,SAAU,IAEVC,IAAK,MAELC,OAAQ,eAERC,aAAc,MAEdC,SAAU,OACVC,cAAe,OACfC,WAAY,MAEZC,MAAOb,EAAMc,QAAQC,KAAKC,QAC1B,8BAA+B,CAE7B,mBAAoB,CAClBC,QAAS,QAGX,2BAA4B,CAC1BC,QAAS,SAITjB,EAAWkB,MAAQ,IAEW,UAA5BlB,EAAWV,cAA4B,CAEzC,mBAAoB,CAClB6B,KAAM,SAGsB,QAA5BnB,EAAWV,cAA0B,CAEvC,mBAAoB,CAClB8B,MAAO,OAKb,iBAAkB,CAChBR,MAAOb,EAAMc,QAAQC,KAAKC,QAC1BJ,WAAY,MAEZ,mBAAoB,CAClBK,QAAS,QAGX,2BAA4B,CAC1BC,QAAS,MAIb,iBAAkB,CAChBL,MAAOb,EAAMc,QAAQQ,SAASC,aAG7BC,EAAkBxB,GAAO,EAAO,OAEnC,CAACA,EAAMyB,YAAYC,KAAK,OAAQ,CAC9BhB,SAAU,OACViB,aAAc"}

package/materialui/tabs/tabs.theme.js

@@ -1,2 +1,2 @@
-import{TabsScrollButton as e}from"./TabsScrollButton.js";import{updateFocusRingStyle as t}from"../../components/focusring/focusring.js";import{getInteractiveStyle as r}from"../button/interactive.js";const o={defaultProps:{template:"underlined",scrollButtons:"auto",allowScrollButtonsMobile:!0,visibleScrollbar:!1,variant:"scrollable",slots:{scrollButtons:e}},styleOverrides:{root:({ownerState:e})=>Object.assign(Object.assign(Object.assign({minHeight:"0",alignItems:"center",gap:"0"},e.fullWidth||"fullWidth"===e.variant?{"& .MuiTab-root":{flexGrow:"1"}}:{}),e.centered?{justifyContent:"center"}:{}),{'&:not(:has(.MuiTab-root[aria-selected="true"]))':{"& .MuiTabs-indicator":{opacity:"0"}}}),flexContainer:({theme:e})=>({gap:"16px",[e.breakpoints.up("md")]:{gap:"28px"}}),indicator:({theme:e,ownerState:t})=>Object.assign(Object.assign({maxWidth:"none",background:"transparent",display:"block",height:"3px",color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary},"secondary"===t.indicatorColor&&{color:e.palette.text.primary}),{"&:before":{display:"block",content:'""',position:"absolute",left:"8px",right:"8px",top:"0",bottom:"0",backgroundColor:"currentColor"}}),scroller:({ownerState:e})=>({flexGrow:e.fullWidth||"fullWidth"===e.variant?"1":"0","&::-webkit-scrollbar:horizontal":{height:"24px"},"&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal":{borderWidth:"10px"}}),scrollButtons:({theme:e})=>({color:e.palette.text.primary,"&.Mui-disabled":{opacity:"1",color:e.palette.disabled.primary}})},variants:[{props:{template:"underlined"},style:({theme:e})=>({marginLeft:"-6px",marginRight:"-6px",maxWidth:"none","& .MuiTabs-scroller":{"&::-webkit-scrollbar:horizontal":{height:"16px"},"&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal":{borderWidth:"6px"}},"& .MuiTabs-flexContainer":{padding:"6px",gap:"0"},"& .MuiTabs-indicator":{bottom:"6px","&:before":{inset:"0"}},"& .MuiTab-root":Object.assign(Object.assign({margin:"0",padding:"12px 24px",[e.breakpoints.down("md")]:{paddingTop:"10px",paddingBottom:"10px"},borderRadius:"0",color:"dark"===e.palette.mode?e.palette.onSurface.os300:e.palette.onSurface.os700},e.typography.subheadline),{[e.breakpoints.up("xs")]:{fontWeight:"300"},"&:after":{content:'""',position:"absolute",left:"0",right:"0",bottom:"0",height:"1px",backgroundColor:e.palette.onSurface.os500},"&:hover, &.Mui-focusVisible":{"&:after":{height:"2px"}},"&.Mui-selected":{color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary,backgroundColor:"dark"===e.palette.mode?e.palette.surface.primary:e.palette.transparent.primary},"&.Mui-disabled":{color:e.palette.disabled.tertiary},"&.Mui-focusVisible":{zIndex:"10",boxShadow:`0 0 0 2px ${e.palette.background.primary}`,"&:before":{inset:"-2px",borderRadius:"4px"}}})})},{props:{template:"buttons"},style:({theme:e})=>({"& .MuiTabs-flexContainer":{gap:"8px"},"& .MuiTabs-indicator":{display:"none"},"& .MuiTab-root":Object.assign(Object.assign(Object.assign({border:"1px solid transparent",padding:"6px 16px",borderRadius:"555px",transition:"all 0.3s ease-out",fontSize:"14px",fontWeight:"700",marginBottom:"2px"},t("0px",!1)),r({backgroundColor:"transparent",color:e.palette.onSurface.os500},{backgroundColor:e.palette.surface.primary,color:e.palette.text.primary})),{"&.Mui-selected":Object.assign({},r({backgroundColor:e.palette.brand.quarternary,color:e.palette.text.primary,borderColor:e.palette.brand.primary},{backgroundColor:e.palette.brand.quarternary,color:e.palette.brand.primary,borderColor:e.palette.brand.primary})),[e.breakpoints.down("md")]:{"&, &.Mui-selected, & .FlowTab-selectedLabel":{fontWeight:"400"}}})})},{props:{template:"navigation"},style:({theme:e})=>({"& .MuiTabs-flexContainer":{gap:"4px"},paddingTop:"11px",[e.breakpoints.down("xl")]:{paddingTop:"13px"},[e.breakpoints.down("lg")]:{paddingTop:"8px"},"& .MuiTab-root":Object.assign({marginBottom:"11px",[e.breakpoints.down("xl")]:{marginBottom:"13px"},[e.breakpoints.down("lg")]:{marginBottom:"8px"}},e.typography.list)})},{props:{template:"segmented"},style:({theme:e})=>({color:"dark"===e.palette.mode?e.palette.surface.primary:e.palette.transparent.secondary,"& .MuiTabs-scroller":{backgroundColor:"currentColor",borderRadius:"555px"},"& .MuiTabs-flexContainer":{gap:"8px"},"& .MuiTabs-indicator":{color:"dark"===e.palette.mode?e.palette.surface.secondary:e.palette.common.white,height:"100%",zIndex:"10",borderRadius:"555px",overflow:"hidden","&:before":{inset:"0",borderRadius:"inherit",border:`2px solid ${"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.text.primary}`}},"& .MuiTab-root":Object.assign(Object.assign({margin:"0",padding:"6px 16px",[e.breakpoints.up("md")]:{padding:"8px 16px"},borderRadius:"555px",transition:"all 0.3s ease-out",gap:"10px",zIndex:"20","& .MuiSvgIcon-root":{fontSize:"20px",marginTop:"4px",marginBottom:"4px"}},e.typography.subheadline),{color:e.palette.text.primary,[e.breakpoints.up("xs")]:{"&, &.Mui-selected, & .FlowTab-selectedLabel":{fontWeight:"400"}},"&:hover, &.Mui-focusVisible":{backgroundColor:e.palette.surface.primary},"&.Mui-selected":{color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.text.primary,"&:hover, &.Mui-focusVisible":{backgroundColor:"transparent"}},"&.Mui-disabled":{color:e.palette.disabled.tertiary}})})}]};export{o as flowTabs};
+import{TabsScrollButton as e}from"./TabsScrollButton.js";import{updateFocusRingStyle as t}from"../../components/focusring/focusring.js";import{getInteractiveStyle as r}from"../button/interactive.js";import{getTypography as o}from"../typography/typography.theme.js";const a={defaultProps:{template:"underlined",scrollButtons:"auto",allowScrollButtonsMobile:!0,visibleScrollbar:!1,variant:"scrollable",slots:{scrollButtons:e}},styleOverrides:{root:({theme:e,ownerState:t})=>({minHeight:"0",alignItems:"center",gap:"0",...t.fullWidth||"fullWidth"===t.variant?{"& .MuiTab-root":{flexGrow:"1"}}:{},...t.centered?{justifyContent:"center"}:{},'&:not(:has(.MuiTab-root[aria-selected="true"]))':{"& .MuiTabs-indicator":{opacity:"0"}},"& .MuiTabs-list, & .MuiTabs-flexContainer":{gap:"16px",[e.breakpoints.up("md")]:{gap:"28px"}}}),indicator:({theme:e,ownerState:t})=>({maxWidth:"none",background:"transparent",display:"block",height:"3px",color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary,..."secondary"===t.indicatorColor&&{color:e.palette.text.primary},"&:before":{display:"block",content:'""',position:"absolute",left:"8px",right:"8px",top:"0",bottom:"0",backgroundColor:"currentColor"}}),scroller:({ownerState:e})=>({flexGrow:e.fullWidth||"fullWidth"===e.variant?"1":"0","&::-webkit-scrollbar:horizontal":{height:"24px"},"&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal":{borderWidth:"10px"}}),scrollButtons:({theme:e})=>({color:e.palette.text.primary,"&.Mui-disabled":{opacity:"1",color:e.palette.disabled.primary}})},variants:[{props:{template:"underlined"},style:({theme:e})=>({marginLeft:"-6px",marginRight:"-6px",maxWidth:"none","& .MuiTabs-scroller":{"&::-webkit-scrollbar:horizontal":{height:"16px"},"&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal":{borderWidth:"6px"}},"& .MuiTabs-list, & .MuiTabs-flexContainer":{padding:"6px",gap:"0"},"& .MuiTabs-indicator":{bottom:"6px","&:before":{inset:"0"}},"& .MuiTab-root":{margin:"0",padding:"12px 24px",[e.breakpoints.down("md")]:{paddingTop:"10px",paddingBottom:"10px"},borderRadius:"0",color:"dark"===e.palette.mode?e.palette.onSurface.os300:e.palette.onSurface.os700,...e.typography.subheadline,[e.breakpoints.up("xs")]:{fontWeight:"300"},"&:after":{content:'""',position:"absolute",left:"0",right:"0",bottom:"0",height:"1px",backgroundColor:e.palette.onSurface.os500},"&:hover, &.Mui-focusVisible":{"&:after":{height:"2px"}},"&.Mui-selected":{color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary,backgroundColor:"dark"===e.palette.mode?e.palette.surface.primary:e.palette.transparent.primary},"&.Mui-disabled":{color:e.palette.disabled.tertiary},"&.Mui-focusVisible":{zIndex:"10",boxShadow:`0 0 0 2px ${e.palette.background.primary}`,"&:before":{inset:"-2px",borderRadius:"4px"}}}})},{props:{template:"buttons"},style:({theme:e})=>({"& .MuiTabs-list, & .MuiTabs-flexContainer":{gap:"8px"},"& .MuiTabs-indicator":{display:"none"},"& .MuiTab-root":{border:"1px solid transparent",padding:"6px 16px",borderRadius:"1000px",transition:"all 0.3s ease-out",fontSize:"14px",fontWeight:"700",marginBottom:"2px",...t("0px",!1),...r({backgroundColor:"transparent",color:e.palette.onSurface.os500},{backgroundColor:e.palette.surface.primary,color:e.palette.text.primary}),"&.Mui-selected":{...r({backgroundColor:e.palette.brand.quarternary,color:e.palette.text.primary,borderColor:e.palette.brand.primary},{backgroundColor:e.palette.brand.quarternary,color:e.palette.brand.primary,borderColor:e.palette.brand.primary})},[e.breakpoints.down("md")]:{"&, &.Mui-selected, & .FlowTab-selectedLabel":{fontWeight:"400"}}}})},{props:{template:"navigation"},style:({theme:e})=>({"& .MuiTabs-list, & .MuiTabs-flexContainer":{gap:"4px"},paddingTop:"11px",[e.breakpoints.down("xl")]:{paddingTop:"13px"},[e.breakpoints.down("lg")]:{paddingTop:"8px"},"& .MuiTab-root":{marginBottom:"11px",[e.breakpoints.down("xl")]:{marginBottom:"13px"},[e.breakpoints.down("lg")]:{marginBottom:"8px"},...e.typography.list}})},{props:{template:"segmented"},style:({theme:e})=>({color:"dark"===e.palette.mode?e.palette.surface.primary:e.palette.transparent.secondary,"& .MuiTabs-scroller":{backgroundColor:"currentColor",borderRadius:"1000px"},"& .MuiTabs-list, & .MuiTabs-flexContainer":{gap:"8px"},"& .MuiTabs-indicator":{color:"dark"===e.palette.mode?e.palette.surface.secondary:e.palette.common.white,height:"100%",zIndex:"10",borderRadius:"1000px",overflow:"hidden","&:before":{inset:"0",borderRadius:"inherit",border:`2px solid ${"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.text.primary}`}},"& .MuiTab-root":{margin:"0",borderRadius:"1000px",transition:"all 0.3s ease-out",padding:"6px 16px",gap:"10px",zIndex:"20","& .MuiSvgIcon-root":{fontSize:"20px",marginTop:"4px",marginBottom:"4px"},color:e.palette.text.primary,...o("subheadline","rtl"===e.direction,"small"),[e.breakpoints.up("md")]:{...o("subheadline","rtl"===e.direction,"large"),padding:"8px 16px"},[e.breakpoints.up("xs")]:{"&, &.Mui-selected, & .FlowTab-selectedLabel":{fontWeight:"400"}},"&:hover, &.Mui-focusVisible":{backgroundColor:e.palette.surface.primary},"&.Mui-selected":{color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.text.primary,"&:hover, &.Mui-focusVisible":{backgroundColor:"transparent"}},"&.Mui-disabled":{color:e.palette.disabled.tertiary}}})}]};export{a as flowTabs};
 //# sourceMappingURL=tabs.theme.js.map

package/materialui/tabs/tabs.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.theme.js","sources":["../../../src/materialui/tabs/tabs.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { TabsScrollButton } from './TabsScrollButton';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport const flowTabs: Components<Theme>['MuiTabs'] = {\n  defaultProps: {\n    template: 'underlined',\n    // for the A11y reflow-4x-zoom-scroll show scrollButtons instead of scrollbar\n    scrollButtons: 'auto',\n    allowScrollButtonsMobile: true,\n    visibleScrollbar: false,\n    variant: 'scrollable',\n    slots: {\n      scrollButtons: TabsScrollButton,\n    },\n  },\n  styleOverrides: {\n    root: ({ ownerState }) => ({\n      minHeight: '0',\n      alignItems: 'center',\n      // space between tabs and scroll buttons (FlowScrollButton already contains 4px)\n      gap: '0',\n      ...(ownerState.fullWidth || ownerState.variant === 'fullWidth'\n        ? {\n            '& .MuiTab-root': {\n              flexGrow: '1',\n            },\n          }\n        : {}),\n      // @mui omits centered property with variant scrollable,\n      //  therefore code bellow has no effect. In docs, we recommend utilizing sx property.\n      ...(ownerState.centered ? { justifyContent: 'center' } : {}),\n      // check if we don't have any tab selected\n      '&:not(:has(.MuiTab-root[aria-selected=\"true\"]))': {\n        // hide indicator\n        '& .MuiTabs-indicator': {\n          opacity: '0',\n        },\n      },\n    }),\n    flexContainer: ({ theme }) => ({\n      gap: '16px',\n      [theme.breakpoints.up('md')]: {\n        gap: '28px',\n      },\n    }),\n    indicator: ({ theme, ownerState }) => ({\n      maxWidth: 'none',\n      background: 'transparent',\n      display: 'block',\n      height: '3px',\n      color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n      ...(ownerState.indicatorColor === 'secondary' && {\n        color: theme.palette.text.primary,\n      }),\n      // actual indicator line\n      '&:before': {\n        display: 'block',\n        content: '\"\"',\n        position: 'absolute',\n        left: '8px',\n        right: '8px',\n        top: '0',\n        bottom: '0',\n        backgroundColor: 'currentColor',\n      },\n    }),\n    scroller: ({ ownerState }) => ({\n      flexGrow: ownerState.fullWidth || ownerState.variant === 'fullWidth' ? '1' : '0',\n      // restyle horizontal scrollbar\n      '&::-webkit-scrollbar:horizontal': {\n        height: '24px',\n      },\n      '&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal': {\n        borderWidth: '10px',\n      },\n    }),\n    scrollButtons: ({ theme }) => ({\n      color: theme.palette.text.primary,\n      // do not hide disabled scroll buttons\n      '&.Mui-disabled': {\n        opacity: '1',\n        color: theme.palette.disabled.primary,\n      },\n    }),\n  },\n  variants: [\n    {\n      props: { template: 'underlined' },\n      style: ({ theme }) => ({\n        // align with rest of the page, due to extra space\n        marginLeft: '-6px',\n        marginRight: '-6px',\n        maxWidth: 'none',\n        // scroll container\n        '& .MuiTabs-scroller': {\n          '&::-webkit-scrollbar:horizontal': {\n            height: '16px',\n          },\n          '&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal': {\n            borderWidth: '6px',\n          },\n        },\n        // container\n        '& .MuiTabs-flexContainer': {\n          // extra space for the focus indicator\n          padding: '6px',\n          // remove gap between tabs\n          gap: '0',\n        },\n        // indicator line\n        '& .MuiTabs-indicator': {\n          // move directly into tab border\n          bottom: '6px',\n          '&:before': {\n            // make full-width\n            inset: '0',\n          },\n        },\n        // Tabs itself\n        '& .MuiTab-root': {\n          // remove space around tab in favor of padding\n          margin: '0',\n          // increase spacing\n          padding: '12px 24px',\n          // responsive\n          [theme.breakpoints.down('md')]: {\n            paddingTop: '10px',\n            paddingBottom: '10px',\n          },\n          // style adjust\n          borderRadius: '0',\n          color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os300 : theme.palette.onSurface.os700,\n          // font\n          ...theme.typography.subheadline,\n          [theme.breakpoints.up('xs')]: {\n            fontWeight: '300',\n          },\n          // bottom border\n          '&:after': {\n            content: '\"\"',\n            position: 'absolute',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            height: '1px',\n            backgroundColor: theme.palette.onSurface.os500,\n          },\n          // hover effect\n          '&:hover, &.Mui-focusVisible': {\n            // increase size of the border\n            '&:after': {\n              height: '2px',\n            },\n          },\n          // active\n          '&.Mui-selected': {\n            color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n            backgroundColor:\n              theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.primary,\n          },\n          // disabled\n          '&.Mui-disabled': {\n            color: theme.palette.disabled.tertiary,\n          },\n          // focused style\n          '&.Mui-focusVisible': {\n            // higher z-index than others\n            zIndex: '10',\n            // extra white border\n            boxShadow: `0 0 0 2px ${theme.palette.background.primary}`,\n            '&:before': {\n              // move outside\n              inset: '-2px',\n              // add extra border radius\n              borderRadius: '4px',\n            },\n          },\n        },\n      }),\n    },\n    {\n      props: { template: 'buttons' },\n      style: ({ theme }) => ({\n        // container\n        '& .MuiTabs-flexContainer': {\n          // reduce gap between tabs\n          gap: '8px',\n        },\n        // hide bottom line\n        '& .MuiTabs-indicator': {\n          display: 'none',\n        },\n        // restyle tabs to buttons\n        '& .MuiTab-root': {\n          border: '1px solid transparent',\n          padding: '6px 16px',\n          borderRadius: '555px',\n          transition: 'all 0.3s ease-out',\n          fontSize: '14px',\n          fontWeight: '700',\n          marginBottom: '2px',\n          ...updateFocusRingStyle('0px', false),\n          ...getInteractiveStyle(\n            {\n              backgroundColor: 'transparent',\n              color: theme.palette.onSurface.os500,\n            },\n            {\n              backgroundColor: theme.palette.surface.primary,\n              color: theme.palette.text.primary,\n            },\n          ),\n          '&.Mui-selected': {\n            ...getInteractiveStyle(\n              {\n                backgroundColor: theme.palette.brand.quarternary,\n                color: theme.palette.text.primary,\n                borderColor: theme.palette.brand.primary,\n              },\n              {\n                backgroundColor: theme.palette.brand.quarternary,\n                color: theme.palette.brand.primary,\n                borderColor: theme.palette.brand.primary,\n              },\n            ),\n          },\n          // responsive\n          [theme.breakpoints.down('md')]: {\n            '&, &.Mui-selected, & .FlowTab-selectedLabel': {\n              fontWeight: '400',\n            },\n          },\n        },\n      }),\n    },\n    {\n      // variant used in the SecondaryNavigation\n      props: { template: 'navigation' },\n      style: ({ theme }) => ({\n        // container\n        '& .MuiTabs-flexContainer': {\n          // reduce gap between tabs\n          gap: '4px',\n        },\n        // manual align\n        paddingTop: '11px',\n        [theme.breakpoints.down('xl')]: {\n          paddingTop: '13px',\n        },\n        [theme.breakpoints.down('lg')]: {\n          paddingTop: '8px',\n        },\n        // restyle tabs typography\n        '& .MuiTab-root': {\n          marginBottom: '11px',\n          [theme.breakpoints.down('xl')]: {\n            marginBottom: '13px',\n          },\n          [theme.breakpoints.down('lg')]: {\n            marginBottom: '8px',\n          },\n          ...theme.typography.list,\n        },\n      }),\n    },\n    {\n      props: { template: 'segmented' },\n      style: ({ theme }) => ({\n        // used for background\n        color: theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.secondary,\n        // container\n        '& .MuiTabs-scroller': {\n          backgroundColor: 'currentColor',\n          borderRadius: '555px',\n        },\n        '& .MuiTabs-flexContainer': {\n          // reduce gap between tabs\n          gap: '8px',\n        },\n        // restyle indicator to white bordered travelling background\n        '& .MuiTabs-indicator': {\n          color: theme.palette.mode === 'dark' ? theme.palette.surface.secondary : theme.palette.common.white,\n          // proportion\n          height: '100%',\n          // z-index bellow <Tab />\n          zIndex: '10',\n          borderRadius: '555px',\n          // make sure border from :before is not visible when no tab is selected\n          overflow: 'hidden',\n          '&:before': {\n            inset: '0',\n            borderRadius: 'inherit',\n            border: `2px solid ${theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.text.primary}`,\n          },\n        },\n        // restyle tabs\n        '& .MuiTab-root': {\n          margin: '0',\n          padding: '6px 16px',\n          [theme.breakpoints.up('md')]: {\n            padding: '8px 16px',\n          },\n          borderRadius: '555px',\n          transition: 'all 0.3s ease-out',\n          // space between icon and text\n          gap: '10px',\n          // z-index above indicator\n          zIndex: '20',\n          // icon inside\n          '& .MuiSvgIcon-root': {\n            fontSize: '20px',\n            marginTop: '4px',\n            marginBottom: '4px',\n          },\n          // change typography\n          ...theme.typography.subheadline,\n          color: theme.palette.text.primary,\n          [theme.breakpoints.up('xs')]: {\n            '&, &.Mui-selected, & .FlowTab-selectedLabel': {\n              fontWeight: '400',\n            },\n          },\n          // hover and focus\n          '&:hover, &.Mui-focusVisible': {\n            backgroundColor: theme.palette.surface.primary,\n          },\n          // active\n          '&.Mui-selected': {\n            color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.text.primary,\n            '&:hover, &.Mui-focusVisible': {\n              backgroundColor: 'transparent',\n            },\n          },\n          // disabled\n          '&.Mui-disabled': {\n            color: theme.palette.disabled.tertiary,\n          },\n        },\n      }),\n    },\n  ],\n};\n"],"names":["flowTabs","defaultProps","template","scrollButtons","allowScrollButtonsMobile","visibleScrollbar","variant","slots","TabsScrollButton","styleOverrides","root","ownerState","Object","assign","minHeight","alignItems","gap","fullWidth","flexGrow","centered","justifyContent","opacity","flexContainer","theme","breakpoints","up","indicator","maxWidth","background","display","height","color","palette","mode","brand","secondary","primary","indicatorColor","text","content","position","left","right","top","bottom","backgroundColor","scroller","borderWidth","disabled","variants","props","style","marginLeft","marginRight","padding","inset","margin","down","paddingTop","paddingBottom","borderRadius","onSurface","os300","os700","typography","subheadline","fontWeight","os500","surface","transparent","tertiary","zIndex","boxShadow","border","transition","fontSize","marginBottom","updateFocusRingStyle","getInteractiveStyle","quarternary","borderColor","list","common","white","overflow","marginTop"],"mappings":"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"}
+{"version":3,"file":"tabs.theme.js","sources":["../../../src/materialui/tabs/tabs.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { TabsScrollButton } from './TabsScrollButton';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { getTypography } from '@/src/materialui/typography/typography.theme';\n\nexport const flowTabs: Components<Theme>['MuiTabs'] = {\n  defaultProps: {\n    template: 'underlined',\n    // for the A11y reflow-4x-zoom-scroll show scrollButtons instead of scrollbar\n    scrollButtons: 'auto',\n    allowScrollButtonsMobile: true,\n    visibleScrollbar: false,\n    variant: 'scrollable',\n    slots: {\n      scrollButtons: TabsScrollButton,\n    },\n  },\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      minHeight: '0',\n      alignItems: 'center',\n      // space between tabs and scroll buttons (FlowScrollButton already contains 4px)\n      gap: '0',\n      ...(ownerState.fullWidth || ownerState.variant === 'fullWidth'\n        ? {\n            '& .MuiTab-root': {\n              flexGrow: '1',\n            },\n          }\n        : {}),\n      // @mui omits centered property with variant scrollable,\n      //  therefore code bellow has no effect. In docs, we recommend utilizing sx property.\n      ...(ownerState.centered ? { justifyContent: 'center' } : {}),\n      // check if we don't have any tab selected\n      '&:not(:has(.MuiTab-root[aria-selected=\"true\"]))': {\n        // hide indicator\n        '& .MuiTabs-indicator': {\n          opacity: '0',\n        },\n      },\n      // container\n      // note: once we stop supporting @mui v7, can be moved directly under list: {}\n      '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n        gap: '16px',\n        [theme.breakpoints.up('md')]: {\n          gap: '28px',\n        },\n      },\n    }),\n    indicator: ({ theme, ownerState }) => ({\n      maxWidth: 'none',\n      background: 'transparent',\n      display: 'block',\n      height: '3px',\n      color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n      ...(ownerState.indicatorColor === 'secondary' && {\n        color: theme.palette.text.primary,\n      }),\n      // actual indicator line\n      '&:before': {\n        display: 'block',\n        content: '\"\"',\n        position: 'absolute',\n        left: '8px',\n        right: '8px',\n        top: '0',\n        bottom: '0',\n        backgroundColor: 'currentColor',\n      },\n    }),\n    scroller: ({ ownerState }) => ({\n      flexGrow: ownerState.fullWidth || ownerState.variant === 'fullWidth' ? '1' : '0',\n      // restyle horizontal scrollbar\n      '&::-webkit-scrollbar:horizontal': {\n        height: '24px',\n      },\n      '&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal': {\n        borderWidth: '10px',\n      },\n    }),\n    scrollButtons: ({ theme }) => ({\n      color: theme.palette.text.primary,\n      // do not hide disabled scroll buttons\n      '&.Mui-disabled': {\n        opacity: '1',\n        color: theme.palette.disabled.primary,\n      },\n    }),\n  },\n  variants: [\n    {\n      props: { template: 'underlined' },\n      style: ({ theme }) => ({\n        // align with rest of the page, due to extra space\n        marginLeft: '-6px',\n        marginRight: '-6px',\n        maxWidth: 'none',\n        // scroll container\n        '& .MuiTabs-scroller': {\n          '&::-webkit-scrollbar:horizontal': {\n            height: '16px',\n          },\n          '&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal': {\n            borderWidth: '6px',\n          },\n        },\n        // container\n        '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n          // extra space for the focus indicator\n          padding: '6px',\n          // remove gap between tabs\n          gap: '0',\n        },\n        // indicator line\n        '& .MuiTabs-indicator': {\n          // move directly into tab border\n          bottom: '6px',\n          '&:before': {\n            // make full-width\n            inset: '0',\n          },\n        },\n        // Tabs itself\n        '& .MuiTab-root': {\n          // remove space around tab in favor of padding\n          margin: '0',\n          // increase spacing\n          padding: '12px 24px',\n          // responsive\n          [theme.breakpoints.down('md')]: {\n            paddingTop: '10px',\n            paddingBottom: '10px',\n          },\n          // style adjust\n          borderRadius: '0',\n          color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os300 : theme.palette.onSurface.os700,\n          // font\n          ...theme.typography.subheadline,\n          [theme.breakpoints.up('xs')]: {\n            fontWeight: '300',\n          },\n          // bottom border\n          '&:after': {\n            content: '\"\"',\n            position: 'absolute',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            height: '1px',\n            backgroundColor: theme.palette.onSurface.os500,\n          },\n          // hover effect\n          '&:hover, &.Mui-focusVisible': {\n            // increase size of the border\n            '&:after': {\n              height: '2px',\n            },\n          },\n          // active\n          '&.Mui-selected': {\n            color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n            backgroundColor:\n              theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.primary,\n          },\n          // disabled\n          '&.Mui-disabled': {\n            color: theme.palette.disabled.tertiary,\n          },\n          // focused style\n          '&.Mui-focusVisible': {\n            // higher z-index than others\n            zIndex: '10',\n            // extra white border\n            boxShadow: `0 0 0 2px ${theme.palette.background.primary}`,\n            '&:before': {\n              // move outside\n              inset: '-2px',\n              // add extra border radius\n              borderRadius: '4px',\n            },\n          },\n        },\n      }),\n    },\n    {\n      props: { template: 'buttons' },\n      style: ({ theme }) => ({\n        // container\n        '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n          // reduce gap between tabs\n          gap: '8px',\n        },\n        // hide bottom line\n        '& .MuiTabs-indicator': {\n          display: 'none',\n        },\n        // restyle tabs to buttons\n        '& .MuiTab-root': {\n          border: '1px solid transparent',\n          padding: '6px 16px',\n          borderRadius: '1000px',\n          transition: 'all 0.3s ease-out',\n          fontSize: '14px',\n          fontWeight: '700',\n          marginBottom: '2px',\n          ...updateFocusRingStyle('0px', false),\n          ...getInteractiveStyle(\n            {\n              backgroundColor: 'transparent',\n              color: theme.palette.onSurface.os500,\n            },\n            {\n              backgroundColor: theme.palette.surface.primary,\n              color: theme.palette.text.primary,\n            },\n          ),\n          '&.Mui-selected': {\n            ...getInteractiveStyle(\n              {\n                backgroundColor: theme.palette.brand.quarternary,\n                color: theme.palette.text.primary,\n                borderColor: theme.palette.brand.primary,\n              },\n              {\n                backgroundColor: theme.palette.brand.quarternary,\n                color: theme.palette.brand.primary,\n                borderColor: theme.palette.brand.primary,\n              },\n            ),\n          },\n          // responsive\n          [theme.breakpoints.down('md')]: {\n            '&, &.Mui-selected, & .FlowTab-selectedLabel': {\n              fontWeight: '400',\n            },\n          },\n        },\n      }),\n    },\n    {\n      // variant used in the SecondaryNavigation\n      props: { template: 'navigation' },\n      style: ({ theme }) => ({\n        // container\n        '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n          // reduce gap between tabs\n          gap: '4px',\n        },\n        // manual align\n        paddingTop: '11px',\n        [theme.breakpoints.down('xl')]: {\n          paddingTop: '13px',\n        },\n        [theme.breakpoints.down('lg')]: {\n          paddingTop: '8px',\n        },\n        // restyle tabs typography\n        '& .MuiTab-root': {\n          marginBottom: '11px',\n          [theme.breakpoints.down('xl')]: {\n            marginBottom: '13px',\n          },\n          [theme.breakpoints.down('lg')]: {\n            marginBottom: '8px',\n          },\n          ...theme.typography.list,\n        },\n      }),\n    },\n    {\n      props: { template: 'segmented' },\n      style: ({ theme }) => ({\n        // used for background\n        color: theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.secondary,\n        // container\n        '& .MuiTabs-scroller': {\n          backgroundColor: 'currentColor',\n          borderRadius: '1000px',\n        },\n        '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n          // reduce gap between tabs\n          gap: '8px',\n        },\n        // restyle indicator to white bordered travelling background\n        '& .MuiTabs-indicator': {\n          color: theme.palette.mode === 'dark' ? theme.palette.surface.secondary : theme.palette.common.white,\n          // proportion\n          height: '100%',\n          // z-index bellow <Tab />\n          zIndex: '10',\n          borderRadius: '1000px',\n          // make sure border from :before is not visible when no tab is selected\n          overflow: 'hidden',\n          '&:before': {\n            inset: '0',\n            borderRadius: 'inherit',\n            border: `2px solid ${theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.text.primary}`,\n          },\n        },\n        // restyle tabs\n        '& .MuiTab-root': {\n          margin: '0',\n          borderRadius: '1000px',\n          transition: 'all 0.3s ease-out',\n          // proportions\n          padding: '6px 16px',\n          // space between icon and text\n          gap: '10px',\n          // z-index above indicator\n          zIndex: '20',\n          // icon inside\n          '& .MuiSvgIcon-root': {\n            fontSize: '20px',\n            marginTop: '4px',\n            marginBottom: '4px',\n          },\n          // change typography\n          color: theme.palette.text.primary,\n          ...getTypography('subheadline', theme.direction === 'rtl', 'small'),\n          [theme.breakpoints.up('md')]: {\n            ...getTypography('subheadline', theme.direction === 'rtl', 'large'),\n            // update proportions\n            padding: '8px 16px',\n          },\n          [theme.breakpoints.up('xs')]: {\n            '&, &.Mui-selected, & .FlowTab-selectedLabel': {\n              fontWeight: '400',\n            },\n          },\n          // hover and focus\n          '&:hover, &.Mui-focusVisible': {\n            backgroundColor: theme.palette.surface.primary,\n          },\n          // active\n          '&.Mui-selected': {\n            color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.text.primary,\n            '&:hover, &.Mui-focusVisible': {\n              backgroundColor: 'transparent',\n            },\n          },\n          // disabled\n          '&.Mui-disabled': {\n            color: theme.palette.disabled.tertiary,\n          },\n        },\n      }),\n    },\n  ],\n};\n"],"names":["flowTabs","defaultProps","template","scrollButtons","allowScrollButtonsMobile","visibleScrollbar","variant","slots","TabsScrollButton","styleOverrides","root","theme","ownerState","minHeight","alignItems","gap","fullWidth","flexGrow","centered","justifyContent","opacity","breakpoints","up","indicator","maxWidth","background","display","height","color","palette","mode","brand","secondary","primary","indicatorColor","text","content","position","left","right","top","bottom","backgroundColor","scroller","borderWidth","disabled","variants","props","style","marginLeft","marginRight","padding","inset","margin","down","paddingTop","paddingBottom","borderRadius","onSurface","os300","os700","typography","subheadline","fontWeight","os500","surface","transparent","tertiary","zIndex","boxShadow","border","transition","fontSize","marginBottom","updateFocusRingStyle","getInteractiveStyle","quarternary","borderColor","list","common","white","overflow","marginTop","getTypography","direction"],"mappings":"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"}

package/materialui/textfield/FormControl.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsx as n}from"react/jsx-runtime";import{forwardRef as l,useRef as e,useImperativeHandle as r,useState as i}from"react";import{Box as t}from"@mui/material";const u=l((l,u)=>{var{onFocus:c,onBlur:a,onPointerDown:s,className:d}=l,v=o(l,["onFocus","onBlur","onPointerDown","className"]);const m=e(null);r(u,()=>m.current);const w=e(null),[D,P]=i(!1);return n(t,Object.assign({ref:m,onPointerDown:o=>{w.current="onPointerDown",null==s||s(o)},onFocus:o=>{["onFocus","onPointerDown"].includes(w.current)||P(!0),w.current="onFocus",null==c||c(o)},onBlur:o=>{var n,l,e,r,i,t,u,c;"onPointerDown"===w.current||(null===(l=null===(n=null==m?void 0:m.current)||void 0===n?void 0:n.matches)||void 0===l?void 0:l.call(n,':has(.MuiSelect-select[aria-expanded="true"])'))||(null===(r=null===(e=null==o?void 0:o.relatedTarget)||void 0===e?void 0:e.matches)||void 0===r?void 0:r.call(e,".MuiSelect-select"))||(null===(t=null===(i=null==o?void 0:o.relatedTarget)||void 0===i?void 0:i.matches)||void 0===t?void 0:t.call(i,'[class^="MuiPickers"]'))||(null===(c=null===(u=null==o?void 0:o.relatedTarget)||void 0===u?void 0:u.matches)||void 0===c?void 0:c.call(u,".MuiMultiSectionDigitalClockSection-item"))?w.current="onPointerDown":(P(!1),w.current="onBlur"),null==a||a(o)},className:[d,D?"":"Flow-NoFocusRing"].filter(Boolean).join(" ")},v))});export{u as FormControl};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useImperativeHandle as n,useState as t}from"react";import{Box as c}from"@mui/material";const i=r(({onFocus:r,onBlur:i,onPointerDown:u,className:a,...l},s)=>{const m=o(null);n(s,()=>m.current);const w=o(null),[D,P]=t(!1);return e(c,{ref:m,onPointerDown:e=>{w.current="onPointerDown",u?.(e)},onFocus:e=>{["onFocus","onPointerDown"].includes(w.current)||P(!0),w.current="onFocus",r?.(e)},onBlur:e=>{"onPointerDown"===w.current||m?.current?.matches?.(':has(.MuiSelect-select[aria-expanded="true"])')||e?.relatedTarget?.matches?.(".MuiSelect-select")||e?.relatedTarget?.matches?.('[class^="MuiPickers"]')||e?.relatedTarget?.matches?.(".MuiMultiSectionDigitalClockSection-item")?w.current="onPointerDown":(P(!1),w.current="onBlur"),i?.(e)},className:[a,D?"":"Flow-NoFocusRing"].filter(Boolean).join(" "),...l})});export{i as FormControl};
 //# sourceMappingURL=FormControl.js.map

package/materialui/textfield/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../src/materialui/textfield/FormControl.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, useRef, useImperativeHandle } from 'react';\nimport { Box, FormControlProps } from '@mui/material';\n\n/**\n * Custom extension of FormControl component to show FocusRing only with Tab focus\n */\nexport const FormControl: FC<FormControlProps> = forwardRef(\n  ({ onFocus, onBlur, onPointerDown, className, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLDivElement>(null);\n    useImperativeHandle(forwardedRef, () => ref.current);\n    // detect events to skip focus ring\n    const previousEvent = useRef<string | null>(null);\n    // append style with focus ring\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    return (\n      <Box\n        ref={ref}\n        onPointerDown={(e) => {\n          previousEvent.current = 'onPointerDown';\n          onPointerDown?.(e);\n        }}\n        onFocus={(e) => {\n          if (!['onFocus', 'onPointerDown'].includes(previousEvent.current)) {\n            // if not clicked or repeated event, we will show focus ring (force rerender to update class)\n            setFocusVisible(true);\n          }\n          previousEvent.current = 'onFocus';\n          onFocus?.(e);\n        }}\n        onBlur={(e) => {\n          // perform cleanup\n          if (\n            // skip cleanup as onPointerDown might happen after onFocus\n            previousEvent.current !== 'onPointerDown' &&\n            // focus is not in opened select\n            !ref?.current?.matches?.(':has(.MuiSelect-select[aria-expanded=\"true\"])') &&\n            // blur does not come from the opened select and now goes into select\n            !e?.relatedTarget?.matches?.('.MuiSelect-select') &&\n            // blur does not come from datepicker\n            !e?.relatedTarget?.matches?.('[class^=\"MuiPickers\"]') &&\n            // blur does not come form timepicker\n            !e?.relatedTarget?.matches?.('.MuiMultiSectionDigitalClockSection-item')\n          ) {\n            // cleanup with blur\n            setFocusVisible(false);\n            previousEvent.current = 'onBlur';\n          } else {\n            // act with skip that click just happened\n            previousEvent.current = 'onPointerDown';\n          }\n          onBlur?.(e);\n        }}\n        className={[\n          className,\n          // we are utilizing class to support <FormControl component='div' /> fallback to always show focus ring\n          focusVisible ? '' : 'Flow-NoFocusRing',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["FormControl","forwardRef","_a","forwardedRef","onFocus","onBlur","onPointerDown","className","rest","__rest","ref","useRef","useImperativeHandle","current","previousEvent","focusVisible","setFocusVisible","useState","_jsx","Box","Object","assign","e","includes","_b","matches","call","_d","_c","relatedTarget","_f","_e","_h","_g","filter","Boolean","join"],"mappings":"iMAMO,MAAMA,EAAoCC,EAC/C,CAACC,EAAwDC,KAAxD,IAAAC,QAAEA,EAAOC,OAAEA,EAAMC,cAAEA,EAAaC,UAAEA,GAASL,EAAKM,EAAIC,EAAAP,EAApD,CAAA,UAAA,SAAA,gBAAA,cACC,MAAMQ,EAAMC,EAAuB,MACnCC,EAAoBT,EAAc,IAAMO,EAAIG,SAE5C,MAAMC,EAAgBH,EAAsB,OAErCI,EAAcC,GAAmBC,GAAkB,GAE1D,OACEC,EAACC,EAAGC,OAAAC,OAAA,CACFX,IAAKA,EACLJ,cAAgBgB,IACdR,EAAcD,QAAU,gBACxBP,SAAAA,EAAgBgB,IAElBlB,QAAUkB,IACH,CAAC,UAAW,iBAAiBC,SAAST,EAAcD,UAEvDG,GAAgB,GAElBF,EAAcD,QAAU,UACxBT,SAAAA,EAAUkB,IAEZjB,OAASiB,wBAIqB,kBAA1BR,EAAcD,UAEQ,QAArBW,EAAY,QAAZtB,EAAAQ,aAAG,EAAHA,EAAKG,eAAO,IAAAX,OAAA,EAAAA,EAAEuB,eAAO,IAAAD,OAAA,EAAAA,EAAAE,KAAAxB,EAAG,oDAEC,QAAzByB,EAAgB,QAAhBC,EAAAN,aAAC,EAADA,EAAGO,qBAAa,IAAAD,OAAA,EAAAA,EAAEH,eAAO,IAAAE,OAAA,EAAAA,EAAAD,KAAAE,EAAG,wBAEH,QAAzBE,EAAgB,QAAhBC,EAAAT,aAAC,EAADA,EAAGO,qBAAa,IAAAE,OAAA,EAAAA,EAAEN,eAAO,IAAAK,OAAA,EAAAA,EAAAJ,KAAAK,EAAG,4BAEH,QAAzBC,UAAAC,EAAAX,aAAC,EAADA,EAAGO,oCAAeJ,eAAO,IAAAO,OAAA,EAAAA,EAAAN,KAAAO,EAAG,6CAO7BnB,EAAcD,QAAU,iBAJxBG,GAAgB,GAChBF,EAAcD,QAAU,UAK1BR,SAAAA,EAASiB,IAEXf,UAAW,CACTA,EAEAQ,EAAe,GAAK,oBAEnBmB,OAAOC,SACPC,KAAK,MACJ5B"}
+{"version":3,"file":"FormControl.js","sources":["../../../src/materialui/textfield/FormControl.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, useRef, useImperativeHandle } from 'react';\nimport { Box, FormControlProps } from '@mui/material';\n\n/**\n * Custom extension of FormControl component to show FocusRing only with Tab focus\n */\nexport const FormControl: FC<FormControlProps> = forwardRef(\n  ({ onFocus, onBlur, onPointerDown, className, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLDivElement>(null);\n    useImperativeHandle(forwardedRef, () => ref.current);\n    // detect events to skip focus ring\n    const previousEvent = useRef<string | null>(null);\n    // append style with focus ring\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    return (\n      <Box\n        ref={ref}\n        onPointerDown={(e) => {\n          previousEvent.current = 'onPointerDown';\n          onPointerDown?.(e);\n        }}\n        onFocus={(e) => {\n          if (!['onFocus', 'onPointerDown'].includes(previousEvent.current)) {\n            // if not clicked or repeated event, we will show focus ring (force rerender to update class)\n            setFocusVisible(true);\n          }\n          previousEvent.current = 'onFocus';\n          onFocus?.(e);\n        }}\n        onBlur={(e) => {\n          // perform cleanup\n          if (\n            // skip cleanup as onPointerDown might happen after onFocus\n            previousEvent.current !== 'onPointerDown' &&\n            // focus is not in opened select\n            !ref?.current?.matches?.(':has(.MuiSelect-select[aria-expanded=\"true\"])') &&\n            // blur does not come from the opened select and now goes into select\n            !e?.relatedTarget?.matches?.('.MuiSelect-select') &&\n            // blur does not come from datepicker\n            !e?.relatedTarget?.matches?.('[class^=\"MuiPickers\"]') &&\n            // blur does not come form timepicker\n            !e?.relatedTarget?.matches?.('.MuiMultiSectionDigitalClockSection-item')\n          ) {\n            // cleanup with blur\n            setFocusVisible(false);\n            previousEvent.current = 'onBlur';\n          } else {\n            // act with skip that click just happened\n            previousEvent.current = 'onPointerDown';\n          }\n          onBlur?.(e);\n        }}\n        className={[\n          className,\n          // we are utilizing class to support <FormControl component='div' /> fallback to always show focus ring\n          focusVisible ? '' : 'Flow-NoFocusRing',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["FormControl","forwardRef","onFocus","onBlur","onPointerDown","className","rest","forwardedRef","ref","useRef","useImperativeHandle","current","previousEvent","focusVisible","setFocusVisible","useState","_jsx","Box","e","includes","matches","relatedTarget","filter","Boolean","join"],"mappings":"wKAMaA,EAAoCC,EAC/C,EAAGC,UAASC,SAAQC,gBAAeC,eAAcC,GAAQC,KACvD,MAAMC,EAAMC,EAAuB,MACnCC,EAAoBH,EAAc,IAAMC,EAAIG,SAE5C,MAAMC,EAAgBH,EAAsB,OAErCI,EAAcC,GAAmBC,GAAkB,GAE1D,OACEC,EAACC,EAAG,CACFT,IAAKA,EACLJ,cAAgBc,IACdN,EAAcD,QAAU,gBACxBP,IAAgBc,IAElBhB,QAAUgB,IACH,CAAC,UAAW,iBAAiBC,SAASP,EAAcD,UAEvDG,GAAgB,GAElBF,EAAcD,QAAU,UACxBT,IAAUgB,IAEZf,OAASe,IAIqB,kBAA1BN,EAAcD,SAEbH,GAAKG,SAASS,UAAU,kDAExBF,GAAGG,eAAeD,UAAU,sBAE5BF,GAAGG,eAAeD,UAAU,0BAE5BF,GAAGG,eAAeD,UAAU,4CAO7BR,EAAcD,QAAU,iBAJxBG,GAAgB,GAChBF,EAAcD,QAAU,UAK1BR,IAASe,IAEXb,UAAW,CACTA,EAEAQ,EAAe,GAAK,oBAEnBS,OAAOC,SACPC,KAAK,QACJlB"}

package/materialui/textfield/FormHelperText.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as t,jsxs as r}from"react/jsx-runtime";import{forwardRef as l,useRef as o,useImperativeHandle as n,useState as i}from"react";import{Tooltip as s,Box as a,ButtonBase as c}from"@mui/material";import{WarningFilledIcon as d}from"../../components/icon/filled/WarningFilledIcon.js";import{useElementScrollable as m}from"../../utils/useElementScrollable/useElementScrollable.js";import{getFocusRingStyle as u}from"../../components/focusring/focusring.js";const p=l((l,p)=>{var x,f,b,{children:v,sx:g,className:h,truncate:w}=l,j=e(l,["children","sx","className","truncate"]);const O=o(null);n(p,()=>O.current);const[,F]=i(0),{isScrollable:S,elementRef:y}=m("x",e=>F((null==e?void 0:e.offsetWidth)||0)),N=(null==h?void 0:h.includes("Mui-error"))&&!1!==w&&(S||!!(null===(x=null==O?void 0:O.current)||void 0===x?void 0:x.querySelector(".Flow-scrollable")));return t(s,Object.assign({title:v,placement:"bottom-start",slotProps:{tooltip:{sx:{maxWidth:(null===(b=null===(f=null==O?void 0:O.current)||void 0===f?void 0:f.getBoundingClientRect())||void 0===b?void 0:b.width)?O.current.getBoundingClientRect().width-24+"px":"398px","& .FlowHelperTextContent-textRight":{display:"none"}}},arrow:{sx:{transform:"none !important",left:"17px !important"}}}},!N&&{open:!1},{children:r(a,Object.assign({component:"p",className:h,sx:g},(null==h?void 0:h.includes("Mui-error"))&&{role:"alert",sx:Object.assign({"&&":Object.assign({display:"flex",alignItems:"flex-start",justifyContent:"flex-start"},!1!==w&&{overflow:"visible"})},g)},{ref:O},j,{children:[(null==h?void 0:h.includes("Mui-error"))&&t(c,Object.assign({sx:e=>Object.assign({cursor:"default",borderRadius:"1px",ml:"2px",mr:"4px"},u(e,!0,"0px")),"aria-label":"Error",className:"FlowHelperText-error-button-active"},!N&&{tabIndex:-1,className:"FlowHelperText-error-button"},{children:t(d,{sx:{fontSize:"17px"}})})),t(a,{sx:{display:"block",overflow:!1!==w?"hidden":"inherit",textOverflow:"inherit",whiteSpace:"inherit",flexGrow:"1"},component:"span","data-testid":"FormHelperText-content",ref:y,children:v})]}))}),N?"long-error-message":"disabled-tooltip")});export{p as FormHelperText};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useRef as o,useImperativeHandle as l,useState as n}from"react";import{Tooltip as i,Box as s,ButtonBase as a}from"@mui/material";import{sxOverride as c}from"../../utils/sxOverride/sxOverride.js";import{WarningFilledIcon as m}from"../../components/icon/filled/WarningFilledIcon.js";import{useElementScrollable as p}from"../../utils/useElementScrollable/useElementScrollable.js";import{getFocusRingStyle as x}from"../../components/focusring/focusring.js";const d=t(({children:t,sx:d,className:u,truncate:f,...h},b)=>{const w=o(null);l(b,()=>w.current);const[,g]=n(0),{isScrollable:v,elementRef:j}=p("x",e=>g(e?.offsetWidth||0)),F=u?.includes("Mui-error")&&!1!==f&&(v||!!w?.current?.querySelector(".Flow-scrollable"));return e(i,{title:t,placement:"bottom-start",slotProps:{tooltip:{sx:{maxWidth:w?.current?.getBoundingClientRect()?.width?w.current.getBoundingClientRect().width-24+"px":"398px","& .FlowHelperTextContent-textRight":{display:"none"}}},arrow:{sx:{transform:"none !important",left:"17px !important"}}},...!F&&{open:!1},children:r(s,{component:"p",className:u,sx:d,...u?.includes("Mui-error")&&{role:"alert",sx:c({"&&":{display:"flex",alignItems:"flex-start",justifyContent:"flex-start",...!1!==f&&{overflow:"visible"}}},d)},ref:w,...h,children:[u?.includes("Mui-error")&&e(a,{sx:e=>({cursor:"default",borderRadius:"1px",ml:"2px",mr:"4px",...x(e,!0,"0px")}),"aria-label":"Error",className:"FlowHelperText-error-button-active",...!F&&{tabIndex:-1,className:"FlowHelperText-error-button"},children:e(m,{sx:{fontSize:"17px"}})}),e(s,{sx:{display:"block",overflow:!1!==f?"hidden":"inherit",textOverflow:"inherit",whiteSpace:"inherit",flexGrow:"1"},component:"span","data-testid":"FormHelperText-content",ref:j,children:t})]})},F?"long-error-message":"disabled-tooltip")});export{d as FormHelperText};
 //# sourceMappingURL=FormHelperText.js.map

package/materialui/textfield/FormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","sources":["../../../src/materialui/textfield/FormHelperText.tsx"],"sourcesContent":["import React, { FC, forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport { Box, FormHelperTextProps, Tooltip, ButtonBase } from '@mui/material';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingStyle } from '@/src/components/focusring';\n\n/**\n * Custom extension of FormHelperText component to add interactive error icon\n */\nexport const FormHelperText: FC<FormHelperTextProps> = forwardRef(\n  ({ children, sx, className, truncate, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLParagraphElement>(null);\n    useImperativeHandle(forwardedRef, () => ref.current);\n    // changing width triggers re-render and updates max-width of tooltip that uses parent\n    const [, setWidth] = useState(0);\n    const { isScrollable, elementRef } = useElementScrollable('x', (el) => setWidth(el?.offsetWidth || 0));\n    const tooltipActive =\n      // contains error\n      className?.includes('Mui-error') &&\n      // we are truncating\n      truncate !== false &&\n      // HelperText or HelperTextContent scrollable\n      (isScrollable || !!ref?.current?.querySelector('.Flow-scrollable'));\n\n    return (\n      <Tooltip\n        title={children}\n        placement=\"bottom-start\"\n        slotProps={{\n          tooltip: {\n            sx: {\n              // match size of helper text\n              maxWidth: ref?.current?.getBoundingClientRect()?.width\n                ? `${ref.current.getBoundingClientRect().width - 24}px`\n                : '398px',\n              // hide right side of HelperTextContent\n              '& .FlowHelperTextContent-textRight': {\n                display: 'none',\n              },\n            },\n          },\n          arrow: {\n            sx: {\n              // remove default transform\n              transform: 'none !important',\n              // align with icon\n              left: '17px !important',\n            },\n          },\n        }}\n        key={tooltipActive ? 'long-error-message' : 'disabled-tooltip'}\n        {...(!tooltipActive && {\n          open: false,\n        })}\n      >\n        <Box\n          component=\"p\"\n          className={className}\n          sx={sx}\n          {...(className?.includes('Mui-error') && {\n            role: 'alert',\n            sx: {\n              '&&': {\n                display: 'flex',\n                alignItems: 'flex-start',\n                justifyContent: 'flex-start',\n                ...(truncate !== false && {\n                  // make sure interactive FocusRing from error is visible\n                  overflow: 'visible',\n                }),\n              },\n              ...sx,\n            },\n          })}\n          ref={ref}\n          {...rest}\n        >\n          {className?.includes('Mui-error') && (\n            <ButtonBase\n              sx={(theme) => ({\n                cursor: 'default',\n                borderRadius: '1px',\n                ml: '2px',\n                mr: '4px',\n                ...getFocusRingStyle(theme, true, '0px'),\n              })}\n              aria-label=\"Error\"\n              className=\"FlowHelperText-error-button-active\"\n              {...(!tooltipActive && { tabIndex: -1, className: 'FlowHelperText-error-button' })}\n            >\n              <WarningFilledIcon sx={{ fontSize: '17px' }} />\n            </ButtonBase>\n          )}\n          <Box\n            sx={{\n              display: 'block',\n              overflow: truncate !== false ? 'hidden' : 'inherit',\n              textOverflow: 'inherit',\n              whiteSpace: 'inherit',\n              flexGrow: '1',\n            }}\n            component=\"span\"\n            data-testid=\"FormHelperText-content\"\n            ref={elementRef}\n          >\n            {children}\n          </Box>\n        </Box>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["FormHelperText","forwardRef","_a","forwardedRef","children","sx","className","truncate","rest","__rest","ref","useRef","useImperativeHandle","current","setWidth","useState","isScrollable","elementRef","useElementScrollable","el","offsetWidth","tooltipActive","includes","_b","querySelector","_jsx","Tooltip","Object","assign","title","placement","slotProps","tooltip","maxWidth","_d","_c","getBoundingClientRect","width","display","arrow","transform","left","open","_jsxs","Box","component","role","alignItems","justifyContent","overflow","ButtonBase","theme","cursor","borderRadius","ml","mr","getFocusRingStyle","tabIndex","WarningFilledIcon","fontSize","textOverflow","whiteSpace","flexGrow"],"mappings":"0eASO,MAAMA,EAA0CC,EACrD,CAACC,EAAgDC,gBAAhDC,SAAEA,EAAQC,GAAEA,EAAEC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAIC,EAAAP,EAA5C,CAAA,WAAA,KAAA,YAAA,aACC,MAAMQ,EAAMC,EAA6B,MACzCC,EAAoBT,EAAc,IAAMO,EAAIG,SAE5C,OAASC,GAAYC,EAAS,IACxBC,aAAEA,EAAYC,WAAEA,GAAeC,EAAqB,IAAMC,GAAOL,GAASK,aAAE,EAAFA,EAAIC,cAAe,IAC7FC,GAEJf,aAAS,EAATA,EAAWgB,SAAS,gBAEP,IAAbf,IAECS,cAAkBO,EAAAb,aAAG,EAAHA,EAAKG,8BAASW,cAAc,sBAEjD,OACEC,EAACC,EAAOC,OAAAC,OAAA,CACNC,MAAOzB,EACP0B,UAAU,eACVC,UAAW,CACTC,QAAS,CACP3B,GAAI,CAEF4B,kBAAUC,EAAY,QAAZC,EAAAzB,aAAG,EAAHA,EAAKG,eAAO,IAAAsB,OAAA,EAAAA,EAAEC,8CAAyBC,OAC1C3B,EAAIG,QAAQuB,wBAAwBC,MAAQ,GAA/C,KACA,QAEJ,qCAAsC,CACpCC,QAAS,UAIfC,MAAO,CACLlC,GAAI,CAEFmC,UAAW,kBAEXC,KAAM,uBAKNpB,GAAiB,CACrBqB,MAAM,GACN,CAAAtC,SAEFuC,EAACC,EAAGjB,OAAAC,OAAA,CACFiB,UAAU,IACVvC,UAAWA,EACXD,GAAIA,IACCC,aAAS,EAATA,EAAWgB,SAAS,eAAgB,CACvCwB,KAAM,QACNzC,kBACE,KAAIsB,OAAAC,OAAA,CACFU,QAAS,OACTS,WAAY,aACZC,eAAgB,eACC,IAAbzC,GAAsB,CAExB0C,SAAU,aAGX5C,IAEL,CACFK,IAAKA,GACDF,EAAI,CAAAJ,SAAA,EAEPE,aAAS,EAATA,EAAWgB,SAAS,eACnBG,EAACyB,EAAUvB,OAAAC,OAAA,CACTvB,GAAK8C,GAAUxB,OAAAC,OAAA,CACbwB,OAAQ,UACRC,aAAc,MACdC,GAAI,MACJC,GAAI,OACDC,EAAkBL,GAAO,EAAM,QAClC,aACS,QACX7C,UAAU,uCACJe,GAAiB,CAAEoC,UAAU,EAAInD,UAAW,+BAAgC,CAAAF,SAElFqB,EAACiC,EAAiB,CAACrD,GAAI,CAAEsD,SAAU,aAGvClC,EAACmB,EAAG,CACFvC,GAAI,CACFiC,QAAS,QACTW,UAAuB,IAAb1C,EAAqB,SAAW,UAC1CqD,aAAc,UACdC,WAAY,UACZC,SAAU,KAEZjB,UAAU,OAAM,cACJ,yBACZnC,IAAKO,EAAUb,SAEdA,UAvDAiB,EAAgB,qBAAuB"}
+{"version":3,"file":"FormHelperText.js","sources":["../../../src/materialui/textfield/FormHelperText.tsx"],"sourcesContent":["import React, { FC, forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport { Box, FormHelperTextProps, Tooltip, ButtonBase } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingStyle } from '@/src/components/focusring';\n\n/**\n * Custom extension of FormHelperText component to add interactive error icon\n */\nexport const FormHelperText: FC<FormHelperTextProps> = forwardRef(\n  ({ children, sx, className, truncate, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLParagraphElement>(null);\n    useImperativeHandle(forwardedRef, () => ref.current);\n    // changing width triggers re-render and updates max-width of tooltip that uses parent\n    const [, setWidth] = useState(0);\n    const { isScrollable, elementRef } = useElementScrollable('x', (el) => setWidth(el?.offsetWidth || 0));\n    const tooltipActive =\n      // contains error\n      className?.includes('Mui-error') &&\n      // we are truncating\n      truncate !== false &&\n      // HelperText or HelperTextContent scrollable\n      (isScrollable || !!ref?.current?.querySelector('.Flow-scrollable'));\n\n    return (\n      <Tooltip\n        title={children}\n        placement=\"bottom-start\"\n        slotProps={{\n          tooltip: {\n            sx: {\n              // match size of helper text\n              maxWidth: ref?.current?.getBoundingClientRect()?.width\n                ? `${ref.current.getBoundingClientRect().width - 24}px`\n                : '398px',\n              // hide right side of HelperTextContent\n              '& .FlowHelperTextContent-textRight': {\n                display: 'none',\n              },\n            },\n          },\n          arrow: {\n            sx: {\n              // remove default transform\n              transform: 'none !important',\n              // align with icon\n              left: '17px !important',\n            },\n          },\n        }}\n        key={tooltipActive ? 'long-error-message' : 'disabled-tooltip'}\n        {...(!tooltipActive && {\n          open: false,\n        })}\n      >\n        <Box\n          component=\"p\"\n          className={className}\n          sx={sx}\n          {...(className?.includes('Mui-error') && {\n            role: 'alert',\n            sx: sxOverride(\n              {\n                '&&': {\n                  display: 'flex',\n                  alignItems: 'flex-start',\n                  justifyContent: 'flex-start',\n                  ...(truncate !== false && {\n                    // make sure interactive FocusRing from error is visible\n                    overflow: 'visible',\n                  }),\n                },\n              },\n              sx,\n            ),\n          })}\n          ref={ref}\n          {...rest}\n        >\n          {className?.includes('Mui-error') && (\n            <ButtonBase\n              sx={(theme) => ({\n                cursor: 'default',\n                borderRadius: '1px',\n                ml: '2px',\n                mr: '4px',\n                ...getFocusRingStyle(theme, true, '0px'),\n              })}\n              aria-label=\"Error\"\n              className=\"FlowHelperText-error-button-active\"\n              {...(!tooltipActive && { tabIndex: -1, className: 'FlowHelperText-error-button' })}\n            >\n              <WarningFilledIcon sx={{ fontSize: '17px' }} />\n            </ButtonBase>\n          )}\n          <Box\n            sx={{\n              display: 'block',\n              overflow: truncate !== false ? 'hidden' : 'inherit',\n              textOverflow: 'inherit',\n              whiteSpace: 'inherit',\n              flexGrow: '1',\n            }}\n            component=\"span\"\n            data-testid=\"FormHelperText-content\"\n            ref={elementRef}\n          >\n            {children}\n          </Box>\n        </Box>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["FormHelperText","forwardRef","children","sx","className","truncate","rest","forwardedRef","ref","useRef","useImperativeHandle","current","setWidth","useState","isScrollable","elementRef","useElementScrollable","el","offsetWidth","tooltipActive","includes","querySelector","_jsx","Tooltip","title","placement","slotProps","tooltip","maxWidth","getBoundingClientRect","width","display","arrow","transform","left","open","_jsxs","Box","component","role","sxOverride","alignItems","justifyContent","overflow","ButtonBase","theme","cursor","borderRadius","ml","mr","getFocusRingStyle","tabIndex","WarningFilledIcon","fontSize","textOverflow","whiteSpace","flexGrow"],"mappings":"mhBAUaA,EAA0CC,EACrD,EAAGC,WAAUC,KAAIC,YAAWC,cAAaC,GAAQC,KAC/C,MAAMC,EAAMC,EAA6B,MACzCC,EAAoBH,EAAc,IAAMC,EAAIG,SAE5C,OAASC,GAAYC,EAAS,IACxBC,aAAEA,EAAYC,WAAEA,GAAeC,EAAqB,IAAMC,GAAOL,EAASK,GAAIC,aAAe,IAC7FC,EAEJf,GAAWgB,SAAS,eAEP,IAAbf,IAECS,KAAkBN,GAAKG,SAASU,cAAc,qBAEjD,OACEC,EAACC,EAAO,CACNC,MAAOtB,EACPuB,UAAU,eACVC,UAAW,CACTC,QAAS,CACPxB,GAAI,CAEFyB,SAAUpB,GAAKG,SAASkB,yBAAyBC,MAC1CtB,EAAIG,QAAQkB,wBAAwBC,MAAQ,GAA/C,KACA,QAEJ,qCAAsC,CACpCC,QAAS,UAIfC,MAAO,CACL7B,GAAI,CAEF8B,UAAW,kBAEXC,KAAM,yBAKNf,GAAiB,CACrBgB,MAAM,GACNjC,SAEFkC,EAACC,EAAG,CACFC,UAAU,IACVlC,UAAWA,EACXD,GAAIA,KACCC,GAAWgB,SAAS,cAAgB,CACvCmB,KAAM,QACNpC,GAAIqC,EACF,CACE,KAAM,CACJT,QAAS,OACTU,WAAY,aACZC,eAAgB,iBACC,IAAbrC,GAAsB,CAExBsC,SAAU,aAIhBxC,IAGJK,IAAKA,KACDF,EAAIJ,SAAA,CAEPE,GAAWgB,SAAS,cACnBE,EAACsB,EAAU,CACTzC,GAAK0C,IAAK,CACRC,OAAQ,UACRC,aAAc,MACdC,GAAI,MACJC,GAAI,SACDC,EAAkBL,GAAO,EAAM,sBAEzB,QACXzC,UAAU,yCACJe,GAAiB,CAAEgC,UAAU,EAAI/C,UAAW,wCAElDkB,EAAC8B,GAAkBjD,GAAI,CAAEkD,SAAU,YAGvC/B,EAACe,EAAG,CACFlC,GAAI,CACF4B,QAAS,QACTY,UAAuB,IAAbtC,EAAqB,SAAW,UAC1CiD,aAAc,UACdC,WAAY,UACZC,SAAU,KAEZlB,UAAU,OAAM,cACJ,yBACZ9B,IAAKO,EAAUb,SAEdA,QAzDAiB,EAAgB,qBAAuB"}

package/materialui/textfield/HelperTextContent.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as t,jsx as l}from"react/jsx-runtime";import{forwardRef as s}from"react";import{Box as a}from"@mui/material";import{useElementScrollable as n}from"../../utils/useElementScrollable/useElementScrollable.js";const r=s((s,r)=>{var{children:i,sx:o,className:c,textLeft:x,textLeftProps:m,textRight:p,textRightProps:h,value:f,maxLength:g}=s,b=e(s,["children","sx","className","textLeft","textLeftProps","textRight","textRightProps","value","maxLength"]);const u=m||{},{sx:w,className:j}=u,d=e(u,["sx","className"]),v=h||{},{sx:N,className:O}=v,L=e(v,["sx","className"]),{isScrollable:C,elementRef:R}=n("x");return t(a,Object.assign({sx:Object.assign({display:"flex",gap:"12px",justifyContent:"space-between",alignItems:"flex-start",overflow:"inherit",whiteSpace:"inherit",textOverflow:"inherit"},o),component:"span",className:["FlowHelperTextContent-root",c].filter(Boolean).join(" "),ref:r},b,{children:[i,(x||p||!!g)&&l(a,Object.assign({sx:Object.assign({overflow:"inherit",whiteSpace:"inherit",textOverflow:"inherit"},w),component:"span",className:["FlowHelperTextContent-textLeft",j,C?"Flow-scrollable":null].filter(Boolean).join(", "),ref:R},d,{children:x})),(p||!!g)&&l(a,Object.assign({sx:Object.assign({whiteSpace:"nowrap"},N),component:"span",className:["FlowHelperTextContent-textRight",O].filter(Boolean).join(" ")},"string"==typeof p&&p.includes("/")&&{"aria-label":`Characters entered ${p}`},g&&{"aria-label":`Characters entered ${(null==f?void 0:f.length)||0} / ${g}`},L,{children:p||`${(null==f?void 0:f.length)||0} / ${g}`}))]}))});export{r as HelperTextContent};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as l}from"@mui/material";import{sxOverride as o}from"../../utils/sxOverride/sxOverride.js";import{useElementScrollable as n}from"../../utils/useElementScrollable/useElementScrollable.js";const i=r(({children:r,sx:i,className:a,textLeft:s,textLeftProps:c,textRight:m,textRightProps:p,value:x,maxLength:f,...h},w)=>{const{sx:u,className:d,...g}=c||{},{sx:b,className:j,...v}=p||{},{isScrollable:C,elementRef:N}=n("x");return e(l,{sx:o({display:"flex",gap:"12px",justifyContent:"space-between",alignItems:"flex-start",overflow:"inherit",whiteSpace:"inherit",textOverflow:"inherit"},i),component:"span",className:["FlowHelperTextContent-root",a].filter(Boolean).join(" "),ref:w,...h,children:[r,(s||m||!!f)&&t(l,{sx:o({overflow:"inherit",whiteSpace:"inherit",textOverflow:"inherit"},u),component:"span",className:["FlowHelperTextContent-textLeft",d,C?"Flow-scrollable":null].filter(Boolean).join(", "),ref:N,...g,children:s}),(m||!!f)&&t(l,{sx:o({whiteSpace:"nowrap"},b),component:"span",className:["FlowHelperTextContent-textRight",j].filter(Boolean).join(" "),..."string"==typeof m&&m.includes("/")&&{"aria-label":`Characters entered ${m}`},...f&&{"aria-label":`Characters entered ${x?.length||0} / ${f}`},...v,children:m||`${x?.length||0} / ${f}`})]})});export{i as HelperTextContent};
 //# sourceMappingURL=HelperTextContent.js.map

package/materialui/textfield/HelperTextContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelperTextContent.js","sources":["../../../src/materialui/textfield/HelperTextContent.tsx"],"sourcesContent":["import React, { ReactNode, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\n\nexport interface HelperTextContentProps extends BoxProps<ElementType> {\n  /**\n   * Text on the left side\n   */\n  textLeft?: ReactNode;\n  /**\n   * Properties applied to text on the left side\n   */\n  textLeftProps?: BoxProps<ElementType>;\n  /**\n   * Text on the right side, expected to be characters count, e.g. '0 / 100'\n   * It is recommended to also provide aria-label.\n   */\n  textRight?: ReactNode;\n  /**\n   * Properties applied to text on the right side\n   */\n  textRightProps?: BoxProps<ElementType>;\n  /**\n   * Input value\n   */\n  value?: string;\n  /**\n   * Input maxLength\n   */\n  maxLength?: number;\n}\n\n/**\n * Advanced content for the Field's HelperText\n *\n *  <TextField helperText={<HelperTextContent textLeft='Helper text' textRight='0/100' />}>\n */\nexport const HelperTextContent: React.FC<HelperTextContentProps> = forwardRef(\n  ({ children, sx, className, textLeft, textLeftProps, textRight, textRightProps, value, maxLength, ...rest }, ref) => {\n    const { sx: textLeftSx, className: textLeftClassName, ...restTextLeft } = textLeftProps || {};\n    const { sx: textRightSx, className: textRightClassName, ...restTextRight } = textRightProps || {};\n    const { isScrollable, elementRef } = useElementScrollable('x');\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          gap: '12px',\n          justifyContent: 'space-between',\n          alignItems: 'flex-start',\n          // inherit truncate text from helperText to pass it down\n          overflow: 'inherit',\n          whiteSpace: 'inherit',\n          textOverflow: 'inherit',\n          ...sx,\n        }}\n        component=\"span\"\n        className={['FlowHelperTextContent-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n        {(textLeft || textRight || !!maxLength) && (\n          <Box\n            sx={{\n              // truncate text as helperText\n              overflow: 'inherit',\n              whiteSpace: 'inherit',\n              textOverflow: 'inherit',\n              ...textLeftSx,\n            }}\n            component=\"span\"\n            className={['FlowHelperTextContent-textLeft', textLeftClassName, isScrollable ? 'Flow-scrollable' : null]\n              .filter(Boolean)\n              .join(', ')}\n            ref={elementRef}\n            {...restTextLeft}\n          >\n            {textLeft}\n          </Box>\n        )}\n        {(textRight || !!maxLength) && (\n          <Box\n            sx={{\n              whiteSpace: 'nowrap',\n              ...textRightSx,\n            }}\n            component=\"span\"\n            className={['FlowHelperTextContent-textRight', textRightClassName].filter(Boolean).join(' ')}\n            {...(typeof textRight === 'string' &&\n              textRight.includes('/') && {\n                ['aria-label']: `Characters entered ${textRight}`,\n              })}\n            {...(maxLength && {\n              ['aria-label']: `Characters entered ${value?.length || 0} / ${maxLength}`,\n            })}\n            {...restTextRight}\n          >\n            {textRight || `${value?.length || 0} / ${maxLength}`}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["HelperTextContent","forwardRef","_a","ref","children","sx","className","textLeft","textLeftProps","textRight","textRightProps","value","maxLength","rest","__rest","_b","textLeftSx","textLeftClassName","restTextLeft","_c","textRightSx","textRightClassName","restTextRight","isScrollable","elementRef","useElementScrollable","_jsxs","Box","Object","assign","display","gap","justifyContent","alignItems","overflow","whiteSpace","textOverflow","component","filter","Boolean","join","_jsx","includes","length"],"mappings":"wPAqCO,MAAMA,EAAsDC,EACjE,CAACC,EAA4GC,SAA5GC,SAAEA,EAAQC,GAAEA,EAAEC,UAAEA,EAASC,SAAEA,EAAQC,cAAEA,EAAaC,UAAEA,EAASC,eAAEA,EAAcC,MAAEA,EAAKC,UAAEA,KAAcC,EAAIC,EAAAZ,EAAxG,CAAA,WAAA,KAAA,YAAA,WAAA,gBAAA,YAAA,iBAAA,QAAA,cACC,MAAMa,EAAoEP,GAAiB,CAAA,GAAnFH,GAAIW,EAAYV,UAAWW,GAAiBF,EAAKG,EAAYJ,EAAAC,EAA/D,CAAA,KAAA,cACAI,EAAuET,GAAkB,CAAA,GAAvFL,GAAIe,EAAad,UAAWe,GAAkBF,EAAKG,EAAaR,EAAAK,EAAlE,CAAA,KAAA,eACAI,aAAEA,EAAYC,WAAEA,GAAeC,EAAqB,KAE1D,OACEC,EAACC,EAAGC,OAAAC,OAAA,CACFxB,GAAEuB,OAAAC,OAAA,CACAC,QAAS,OACTC,IAAK,OACLC,eAAgB,gBAChBC,WAAY,aAEZC,SAAU,UACVC,WAAY,UACZC,aAAc,WACX/B,GAELgC,UAAU,OACV/B,UAAW,CAAC,6BAA8BA,GAAWgC,OAAOC,SAASC,KAAK,KAC1ErC,IAAKA,GACDU,EAAI,CAAAT,SAAA,CAEPA,GACCG,GAAYE,KAAeG,IAC3B6B,EAACd,EAAGC,OAAAC,OAAA,CACFxB,GAAEuB,OAAAC,OAAA,CAEAK,SAAU,UACVC,WAAY,UACZC,aAAc,WACXpB,GAELqB,UAAU,OACV/B,UAAW,CAAC,iCAAkCW,EAAmBM,EAAe,kBAAoB,MACjGe,OAAOC,SACPC,KAAK,MACRrC,IAAKqB,GACDN,EAAY,CAAAd,SAEfG,MAGHE,KAAeG,IACf6B,EAACd,EAAGC,OAAAC,OAAA,CACFxB,GAAEuB,OAAAC,OAAA,CACAM,WAAY,UACTf,GAELiB,UAAU,OACV/B,UAAW,CAAC,kCAAmCe,GAAoBiB,OAAOC,SAASC,KAAK,MAC9D,iBAAd/B,GACVA,EAAUiC,SAAS,MAAQ,CACzB,aAAgB,sBAAsBjC,KAErCG,GAAa,CAChB,aAAgB,uBAAsBD,aAAK,EAALA,EAAOgC,SAAU,OAAO/B,KAE5DU,EAAa,CAAAlB,SAEhBK,GAAa,IAAGE,aAAK,EAALA,EAAOgC,SAAU,OAAO/B"}
+{"version":3,"file":"HelperTextContent.js","sources":["../../../src/materialui/textfield/HelperTextContent.tsx"],"sourcesContent":["import React, { ReactNode, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\n\nexport interface HelperTextContentProps extends BoxProps<ElementType> {\n  /**\n   * Text on the left side\n   */\n  textLeft?: ReactNode;\n  /**\n   * Properties applied to text on the left side\n   */\n  textLeftProps?: BoxProps<ElementType>;\n  /**\n   * Text on the right side, expected to be characters count, e.g. '0 / 100'\n   * It is recommended to also provide aria-label.\n   */\n  textRight?: ReactNode;\n  /**\n   * Properties applied to text on the right side\n   */\n  textRightProps?: BoxProps<ElementType>;\n  /**\n   * Input value\n   */\n  value?: string;\n  /**\n   * Input maxLength\n   */\n  maxLength?: number;\n}\n\n/**\n * Advanced content for the Field's HelperText\n *\n *  <TextField helperText={<HelperTextContent textLeft='Helper text' textRight='0/100' />}>\n */\nexport const HelperTextContent: React.FC<HelperTextContentProps> = forwardRef(\n  ({ children, sx, className, textLeft, textLeftProps, textRight, textRightProps, value, maxLength, ...rest }, ref) => {\n    const { sx: textLeftSx, className: textLeftClassName, ...restTextLeft } = textLeftProps || {};\n    const { sx: textRightSx, className: textRightClassName, ...restTextRight } = textRightProps || {};\n    const { isScrollable, elementRef } = useElementScrollable('x');\n\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            display: 'flex',\n            gap: '12px',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            // inherit truncate text from helperText to pass it down\n            overflow: 'inherit',\n            whiteSpace: 'inherit',\n            textOverflow: 'inherit',\n          },\n          sx,\n        )}\n        component=\"span\"\n        className={['FlowHelperTextContent-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n        {(textLeft || textRight || !!maxLength) && (\n          <Box\n            sx={sxOverride(\n              {\n                // truncate text as helperText\n                overflow: 'inherit',\n                whiteSpace: 'inherit',\n                textOverflow: 'inherit',\n              },\n              textLeftSx,\n            )}\n            component=\"span\"\n            className={['FlowHelperTextContent-textLeft', textLeftClassName, isScrollable ? 'Flow-scrollable' : null]\n              .filter(Boolean)\n              .join(', ')}\n            ref={elementRef}\n            {...restTextLeft}\n          >\n            {textLeft}\n          </Box>\n        )}\n        {(textRight || !!maxLength) && (\n          <Box\n            sx={sxOverride({ whiteSpace: 'nowrap' }, textRightSx)}\n            component=\"span\"\n            className={['FlowHelperTextContent-textRight', textRightClassName].filter(Boolean).join(' ')}\n            {...(typeof textRight === 'string' &&\n              textRight.includes('/') && {\n                ['aria-label']: `Characters entered ${textRight}`,\n              })}\n            {...(maxLength && {\n              ['aria-label']: `Characters entered ${value?.length || 0} / ${maxLength}`,\n            })}\n            {...restTextRight}\n          >\n            {textRight || `${value?.length || 0} / ${maxLength}`}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["HelperTextContent","forwardRef","children","sx","className","textLeft","textLeftProps","textRight","textRightProps","value","maxLength","rest","ref","textLeftSx","textLeftClassName","restTextLeft","textRightSx","textRightClassName","restTextRight","isScrollable","elementRef","useElementScrollable","_jsxs","Box","sxOverride","display","gap","justifyContent","alignItems","overflow","whiteSpace","textOverflow","component","filter","Boolean","join","_jsx","includes","length"],"mappings":"2RAsCO,MAAMA,EAAsDC,EACjE,EAAGC,WAAUC,KAAIC,YAAWC,WAAUC,gBAAeC,YAAWC,iBAAgBC,QAAOC,eAAcC,GAAQC,KAC3G,MAAQT,GAAIU,EAAYT,UAAWU,KAAsBC,GAAiBT,GAAiB,CAAA,GACnFH,GAAIa,EAAaZ,UAAWa,KAAuBC,GAAkBV,GAAkB,CAAA,GACzFW,aAAEA,EAAYC,WAAEA,GAAeC,EAAqB,KAE1D,OACEC,EAACC,GACCpB,GAAIqB,EACF,CACEC,QAAS,OACTC,IAAK,OACLC,eAAgB,gBAChBC,WAAY,aAEZC,SAAU,UACVC,WAAY,UACZC,aAAc,WAEhB5B,GAEF6B,UAAU,OACV5B,UAAW,CAAC,6BAA8BA,GAAW6B,OAAOC,SAASC,KAAK,KAC1EvB,IAAKA,KACDD,EAAIT,SAAA,CAEPA,GACCG,GAAYE,KAAeG,IAC3B0B,EAACb,EAAG,CACFpB,GAAIqB,EACF,CAEEK,SAAU,UACVC,WAAY,UACZC,aAAc,WAEhBlB,GAEFmB,UAAU,OACV5B,UAAW,CAAC,iCAAkCU,EAAmBK,EAAe,kBAAoB,MACjGc,OAAOC,SACPC,KAAK,MACRvB,IAAKQ,KACDL,EAAYb,SAEfG,KAGHE,KAAeG,IACf0B,EAACb,EAAG,CACFpB,GAAIqB,EAAW,CAAEM,WAAY,UAAYd,GACzCgB,UAAU,OACV5B,UAAW,CAAC,kCAAmCa,GAAoBgB,OAAOC,SAASC,KAAK,QAC9D,iBAAd5B,GACVA,EAAU8B,SAAS,MAAQ,CACzB,aAAgB,sBAAsB9B,QAErCG,GAAa,CAChB,aAAgB,sBAAsBD,GAAO6B,QAAU,OAAO5B,QAE5DQ,EAAahB,SAEhBK,GAAa,GAAGE,GAAO6B,QAAU,OAAO5B"}

package/materialui/textfield/filledInput.theme.js

@@ -1,2 +1,2 @@
-const o={defaultProps:{},styleOverrides:{root:({theme:o})=>({"&, &:hover, &.Mui-disabled, &.Mui-focused":{color:"inherit",transition:"inherit",backgroundColor:"dark"===o.palette.mode?o.palette.surface.primary:o.palette.transparent.primary,"&:before":{transition:"inherit",borderBottomStyle:"solid",borderColor:"currentColor"},"&:after":{borderColor:"currentColor",transition:"none"}},"&.Mui-error:not(.Mui-disabled)":{"&:before, &:after":{color:o.palette.error.main}}}),input:({ownerState:o})=>Object.assign(Object.assign(Object.assign({paddingTop:"24px",paddingBottom:"8px"},o.hiddenLabel&&{paddingTop:"18px",paddingBottom:"14px"}),"small"===o.size&&Object.assign({paddingTop:"22px",paddingBottom:"4px"},o.hiddenLabel&&{paddingTop:"14px",paddingBottom:"12px"})),o.multiline&&{paddingTop:"0",paddingBottom:"0"}),multiline:({ownerState:o})=>Object.assign(Object.assign({paddingTop:"24px",paddingBottom:"8px"},o.hiddenLabel&&{paddingTop:"18px",paddingBottom:"14px"}),"small"===o.size&&Object.assign({paddingTop:"22px",paddingBottom:"4px"},o.hiddenLabel&&{paddingTop:"14px",paddingBottom:"12px"}))}};export{o as flowFilledInput};
+const o={defaultProps:{},styleOverrides:{root:({ownerState:o,theme:r})=>({borderTopLeftRadius:"4px",borderTopRightRadius:"4px","&:not(.Mui-disabled):not(.Mui-readOnly):hover":{"&:after":{transform:"scaleX(1) translateX(0)"}},"&, &:hover, &.Mui-disabled, &.Mui-focused":{color:"inherit",transition:"inherit",backgroundColor:"dark"===r.palette.mode?r.palette.surface.primary:r.palette.transparent.primary,..."secondary"===o.color&&{backgroundColor:"transparent"},"&:before":{transition:"inherit",borderBottomStyle:"solid",borderColor:"currentColor"},"&:after":{borderColor:"currentColor",transition:"none"}},"&.Mui-error:not(.Mui-disabled)":{"&:before, &:after":{color:r.palette.error.main}},"&.Mui-readOnly":{borderBottomLeftRadius:"4px",borderBottomRightRadius:"4px",..."secondary"===o.color?{backgroundColor:"dark"===r.palette.mode?r.palette.surface.primary:r.palette.transparent.primary,"&:before, &:after":{display:"none"}}:{backgroundColor:"transparent","&:after":{display:"none"}}}}),input:({ownerState:o})=>({paddingTop:"24px",paddingBottom:"8px",...o.hiddenLabel&&{paddingTop:"18px",paddingBottom:"14px"},..."small"===o.size&&{paddingTop:"22px",paddingBottom:"4px",...o.hiddenLabel&&{paddingTop:"14px",paddingBottom:"12px"}},...o.multiline&&{paddingTop:"0",paddingBottom:"0"}}),multiline:({ownerState:o})=>({paddingTop:"24px",paddingBottom:"8px",...o.hiddenLabel&&{paddingTop:"18px",paddingBottom:"14px"},..."small"===o.size&&{paddingTop:"22px",paddingBottom:"4px",...o.hiddenLabel&&{paddingTop:"14px",paddingBottom:"12px"}}})}};export{o as flowFilledInput};
 //# sourceMappingURL=filledInput.theme.js.map

package/materialui/textfield/filledInput.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"filledInput.theme.js","sources":["../../../src/materialui/textfield/filledInput.theme.ts"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\n\nexport const flowFilledInput: Components<Theme>['MuiFilledInput'] = {\n  defaultProps: {},\n  styleOverrides: {\n    root: ({ theme }) => ({\n      '&, &:hover, &.Mui-disabled, &.Mui-focused': {\n        color: 'inherit',\n        transition: 'inherit',\n        backgroundColor:\n          theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.primary,\n        // underline\n        '&:before': {\n          transition: 'inherit',\n          borderBottomStyle: 'solid',\n          borderColor: 'currentColor',\n        },\n        // active underline\n        '&:after': {\n          borderColor: 'currentColor',\n          // remove animated transition of appearing border\n          transition: 'none',\n        },\n      },\n      '&.Mui-error:not(.Mui-disabled)': {\n        '&:before, &:after': {\n          color: theme.palette.error.main,\n        },\n      },\n    }),\n    input: ({ ownerState }) => ({\n      paddingTop: '24px',\n      paddingBottom: '8px',\n      ...(ownerState.hiddenLabel && {\n        paddingTop: '18px',\n        paddingBottom: '14px',\n      }),\n      ...(ownerState.size === 'small' && {\n        paddingTop: '22px',\n        paddingBottom: '4px',\n        ...(ownerState.hiddenLabel && {\n          paddingTop: '14px',\n          paddingBottom: '12px',\n        }),\n      }),\n      ...(ownerState.multiline && {\n        paddingTop: '0',\n        paddingBottom: '0',\n      }),\n    }),\n    multiline: ({ ownerState }) => ({\n      paddingTop: '24px',\n      paddingBottom: '8px',\n      ...(ownerState.hiddenLabel && {\n        paddingTop: '18px',\n        paddingBottom: '14px',\n      }),\n      ...(ownerState.size === 'small' && {\n        paddingTop: '22px',\n        paddingBottom: '4px',\n        ...(ownerState.hiddenLabel && {\n          paddingTop: '14px',\n          paddingBottom: '12px',\n        }),\n      }),\n    }),\n  },\n};\n"],"names":["flowFilledInput","defaultProps","styleOverrides","root","theme","color","transition","backgroundColor","palette","mode","surface","primary","transparent","borderBottomStyle","borderColor","error","main","input","ownerState","Object","assign","paddingTop","paddingBottom","hiddenLabel","size","multiline"],"mappings":"AAEO,MAAMA,EAAuD,CAClEC,aAAc,CAAA,EACdC,eAAgB,CACdC,KAAM,EAAGC,YAAO,CACd,4CAA6C,CAC3CC,MAAO,UACPC,WAAY,UACZC,gBACyB,SAAvBH,EAAMI,QAAQC,KAAkBL,EAAMI,QAAQE,QAAQC,QAAUP,EAAMI,QAAQI,YAAYD,QAE5F,WAAY,CACVL,WAAY,UACZO,kBAAmB,QACnBC,YAAa,gBAGf,UAAW,CACTA,YAAa,eAEbR,WAAY,SAGhB,iCAAkC,CAChC,oBAAqB,CACnBD,MAAOD,EAAMI,QAAQO,MAAMC,SAIjCC,MAAO,EAAGC,gBAAiBC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACzBC,WAAY,OACZC,cAAe,OACXJ,EAAWK,aAAe,CAC5BF,WAAY,OACZC,cAAe,SAEO,UAApBJ,EAAWM,qBACbH,WAAY,OACZC,cAAe,OACXJ,EAAWK,aAAe,CAC5BF,WAAY,OACZC,cAAe,UAGfJ,EAAWO,WAAa,CAC1BJ,WAAY,IACZC,cAAe,MAGnBG,UAAW,EAAGP,gBAAiBC,OAAAC,OAAAD,OAAAC,OAAA,CAC7BC,WAAY,OACZC,cAAe,OACXJ,EAAWK,aAAe,CAC5BF,WAAY,OACZC,cAAe,SAEO,UAApBJ,EAAWM,qBACbH,WAAY,OACZC,cAAe,OACXJ,EAAWK,aAAe,CAC5BF,WAAY,OACZC,cAAe"}
+{"version":3,"file":"filledInput.theme.js","sources":["../../../src/materialui/textfield/filledInput.theme.ts"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\n\nexport const flowFilledInput: Components<Theme>['MuiFilledInput'] = {\n  defaultProps: {},\n  styleOverrides: {\n    root: ({ ownerState, theme }) => ({\n      borderTopLeftRadius: '4px',\n      borderTopRightRadius: '4px',\n      '&:not(.Mui-disabled):not(.Mui-readOnly):hover': {\n        // active underline\n        '&:after': {\n          transform: 'scaleX(1) translateX(0)',\n        },\n      },\n      '&, &:hover, &.Mui-disabled, &.Mui-focused': {\n        color: 'inherit',\n        transition: 'inherit',\n        backgroundColor:\n          theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.primary,\n        // backgroundOff variant\n        ...(ownerState.color === 'secondary' && {\n          backgroundColor: 'transparent',\n        }),\n        // underline\n        '&:before': {\n          transition: 'inherit',\n          borderBottomStyle: 'solid',\n          borderColor: 'currentColor',\n        },\n        // active underline\n        '&:after': {\n          borderColor: 'currentColor',\n          // remove animated transition of appearing border\n          transition: 'none',\n        },\n      },\n      '&.Mui-error:not(.Mui-disabled)': {\n        '&:before, &:after': {\n          color: theme.palette.error.main,\n        },\n      },\n      // read-only mode\n      '&.Mui-readOnly': {\n        borderBottomLeftRadius: '4px',\n        borderBottomRightRadius: '4px',\n        // backgroundOff variant\n        ...(ownerState.color === 'secondary'\n          ? {\n              backgroundColor:\n                theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.primary,\n              // no active borders at all\n              '&:before, &:after': {\n                display: 'none',\n              },\n            }\n          : {\n              backgroundColor: 'transparent',\n              // no active underline\n              '&:after': {\n                display: 'none',\n              },\n            }),\n      },\n    }),\n    input: ({ ownerState }) => ({\n      paddingTop: '24px',\n      paddingBottom: '8px',\n      ...(ownerState.hiddenLabel && {\n        paddingTop: '18px',\n        paddingBottom: '14px',\n      }),\n      ...(ownerState.size === 'small' && {\n        paddingTop: '22px',\n        paddingBottom: '4px',\n        ...(ownerState.hiddenLabel && {\n          paddingTop: '14px',\n          paddingBottom: '12px',\n        }),\n      }),\n      ...(ownerState.multiline && {\n        paddingTop: '0',\n        paddingBottom: '0',\n      }),\n    }),\n    multiline: ({ ownerState }) => ({\n      paddingTop: '24px',\n      paddingBottom: '8px',\n      ...(ownerState.hiddenLabel && {\n        paddingTop: '18px',\n        paddingBottom: '14px',\n      }),\n      ...(ownerState.size === 'small' && {\n        paddingTop: '22px',\n        paddingBottom: '4px',\n        ...(ownerState.hiddenLabel && {\n          paddingTop: '14px',\n          paddingBottom: '12px',\n        }),\n      }),\n    }),\n  },\n};\n"],"names":["flowFilledInput","defaultProps","styleOverrides","root","ownerState","theme","borderTopLeftRadius","borderTopRightRadius","transform","color","transition","backgroundColor","palette","mode","surface","primary","transparent","borderBottomStyle","borderColor","error","main","borderBottomLeftRadius","borderBottomRightRadius","display","input","paddingTop","paddingBottom","hiddenLabel","size","multiline"],"mappings":"AAEO,MAAMA,EAAuD,CAClEC,aAAc,CAAA,EACdC,eAAgB,CACdC,KAAM,EAAGC,aAAYC,YAAO,CAC1BC,oBAAqB,MACrBC,qBAAsB,MACtB,gDAAiD,CAE/C,UAAW,CACTC,UAAW,4BAGf,4CAA6C,CAC3CC,MAAO,UACPC,WAAY,UACZC,gBACyB,SAAvBN,EAAMO,QAAQC,KAAkBR,EAAMO,QAAQE,QAAQC,QAAUV,EAAMO,QAAQI,YAAYD,WAEnE,cAArBX,EAAWK,OAAyB,CACtCE,gBAAiB,eAGnB,WAAY,CACVD,WAAY,UACZO,kBAAmB,QACnBC,YAAa,gBAGf,UAAW,CACTA,YAAa,eAEbR,WAAY,SAGhB,iCAAkC,CAChC,oBAAqB,CACnBD,MAAOJ,EAAMO,QAAQO,MAAMC,OAI/B,iBAAkB,CAChBC,uBAAwB,MACxBC,wBAAyB,SAEA,cAArBlB,EAAWK,MACX,CACEE,gBACyB,SAAvBN,EAAMO,QAAQC,KAAkBR,EAAMO,QAAQE,QAAQC,QAAUV,EAAMO,QAAQI,YAAYD,QAE5F,oBAAqB,CACnBQ,QAAS,SAGb,CACEZ,gBAAiB,cAEjB,UAAW,CACTY,QAAS,YAKrBC,MAAO,EAAGpB,iBAAY,CACpBqB,WAAY,OACZC,cAAe,SACXtB,EAAWuB,aAAe,CAC5BF,WAAY,OACZC,cAAe,WAEO,UAApBtB,EAAWwB,MAAoB,CACjCH,WAAY,OACZC,cAAe,SACXtB,EAAWuB,aAAe,CAC5BF,WAAY,OACZC,cAAe,YAGftB,EAAWyB,WAAa,CAC1BJ,WAAY,IACZC,cAAe,OAGnBG,UAAW,EAAGzB,iBAAY,CACxBqB,WAAY,OACZC,cAAe,SACXtB,EAAWuB,aAAe,CAC5BF,WAAY,OACZC,cAAe,WAEO,UAApBtB,EAAWwB,MAAoB,CACjCH,WAAY,OACZC,cAAe,SACXtB,EAAWuB,aAAe,CAC5BF,WAAY,OACZC,cAAe"}

package/materialui/textfield/formControl.theme.js

@@ -1,2 +1,2 @@
-import{getFocusRingStyle as o}from"../../components/focusring/focusring.js";import{FormControl as e}from"./FormControl.js";const t={defaultProps:{variant:"filled",component:e},styleOverrides:{root:({theme:e,ownerState:t})=>Object.assign(Object.assign({color:"dark"===e.palette.mode?e.palette.onSurface.os200:e.palette.onSurface.os600,transition:e.transitions.create(["color","transform"],{duration:e.transitions.duration.shorter,easing:e.transitions.easing.easeOut}),marginBottom:"24px","&:hover, &:has(.Mui-focused)":{color:e.palette.text.primary},"&:has(.Mui-error)":{"&:not(:has(.Mui-disabled)), &:has(.Mui-focused)":{"& .MuiInputLabel-root":{color:e.palette.error.main}}},"&:has(.Mui-disabled)":{color:e.palette.disabled.tertiary},borderRadius:"4px"},o(e,!1,0,"&:not(.Flow-NoFocusRing):has(.Mui-focused)")),{"&:has(.MuiFormHelperText-root)":{"&:has(.Mui-focused)":{"&:not(:has(.FlowHelperText-error-button-active))":{"&&:before":{bottom:"-26px"}}}},"&:has(.MuiInputLabel-root)":{"&:has(.MuiOutlinedInput-root.Mui-focused)":{"&&:before":{top:"-8px"}}},'&:has(.MuiSelect-select[aria-expanded="true"])':{"&&:before":{boxShadow:"none"}},"&:has(.MuiFormGroup-root), &:has(.MuiRadioGroup-root)":Object.assign({borderRadius:"0",marginBottom:"0","&&:before":{content:"none"}},t.error&&{borderLeft:`6px solid ${e.palette.error.main}`,paddingLeft:"16px"})})}};export{t as flowFormControl};
+import{getFocusRingStyle as o}from"../../components/focusring/focusring.js";import{FormControl as e}from"./FormControl.js";const r={defaultProps:{variant:"filled",component:e},styleOverrides:{root:({theme:e,ownerState:r})=>({color:"dark"===e.palette.mode?e.palette.onSurface.os200:e.palette.onSurface.os600,transition:e.transitions.create(["color","transform"],{duration:e.transitions.duration.shorter,easing:e.transitions.easing.easeOut}),marginBottom:"24px","&:hover, &:has(.Mui-focused)":{color:e.palette.text.primary},"&:has(.Mui-error)":{"&:not(:has(.Mui-disabled)), &:has(.Mui-focused)":{"& .MuiInputLabel-root":{color:e.palette.error.main}}},"&:has(.Mui-disabled)":{color:e.palette.disabled.tertiary},borderRadius:"4px",...o(e,!1,0,"&:not(.Flow-NoFocusRing):has(.Mui-focused)"),"&:has(.MuiFormHelperText-root)":{"&:has(.Mui-focused)":{"&:not(:has(.FlowHelperText-error-button-active))":{"&&:before":{bottom:"-26px"}}}},"&:has(.MuiInputLabel-root)":{"&:has(.MuiOutlinedInput-root.Mui-focused)":{"&&:before":{top:"-8px"}}},'&:has(.MuiSelect-select[aria-expanded="true"])':{"&&:before":{boxShadow:"none"}},"&:has(.MuiFormGroup-root), &:has(.MuiRadioGroup-root)":{borderRadius:"0",marginBottom:"0","&&:before":{content:"none"},...r.error&&{borderLeft:`6px solid ${e.palette.error.main}`,paddingLeft:"16px"}}})}};export{r as flowFormControl};
 //# sourceMappingURL=formControl.theme.js.map

package/materialui/textfield/formControl.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"formControl.theme.js","sources":["../../../src/materialui/textfield/formControl.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { FormControl } from './FormControl';\n\nexport const flowFormControl: Components<Theme>['MuiFormControl'] = {\n  defaultProps: {\n    variant: 'filled',\n    component: FormControl,\n  },\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os200 : theme.palette.onSurface.os600,\n      // match original transition with inputLabel\n      transition: theme.transitions.create(['color', 'transform'], {\n        duration: theme.transitions.duration.shorter,\n        easing: theme.transitions.easing.easeOut,\n      }),\n      // space for helperText (height + top margin + bottom margin)\n      marginBottom: `${16 + 4 + 4}px`,\n      '&:hover, &:has(.Mui-focused)': {\n        color: theme.palette.text.primary,\n      },\n      '&:has(.Mui-error)': {\n        '&:not(:has(.Mui-disabled)), &:has(.Mui-focused)': {\n          '& .MuiInputLabel-root': {\n            color: theme.palette.error.main,\n          },\n        },\n      },\n      '&:has(.Mui-disabled)': {\n        color: theme.palette.disabled.tertiary,\n      },\n      borderRadius: '4px',\n      // focus ring, appears with focused input\n      ...getFocusRingStyle(theme, false, 0, '&:not(.Flow-NoFocusRing):has(.Mui-focused)'),\n      // contains helper text\n      '&:has(.MuiFormHelperText-root)': {\n        // focused input\n        '&:has(.Mui-focused)': {\n          // does not have interactive error\n          '&:not(:has(.FlowHelperText-error-button-active))': {\n            // focus ring\n            '&&:before': {\n              // increase space (original size, helper text size + margin)\n              bottom: `-${2 + 16 + 4 + 4}px`,\n            },\n          },\n        },\n      },\n      // contains label\n      '&:has(.MuiInputLabel-root)': {\n        // focused OutlinedInput\n        '&:has(.MuiOutlinedInput-root.Mui-focused)': {\n          // focus ring\n          '&&:before': {\n            top: '-8px',\n          },\n        },\n      },\n      // select with open menu\n      '&:has(.MuiSelect-select[aria-expanded=\"true\"])': {\n        // hide focus ring to keep just one in menu\n        '&&:before': {\n          boxShadow: 'none',\n        },\n      },\n      // Checkboxes, Switches or Radio groups\n      '&:has(.MuiFormGroup-root), &:has(.MuiRadioGroup-root)': {\n        borderRadius: '0',\n        marginBottom: '0',\n        // remove focus effect\n        '&&:before': {\n          content: 'none',\n        },\n        // error\n        ...(ownerState.error && {\n          // similar style to banner\n          borderLeft: `6px solid ${theme.palette.error.main}`,\n          paddingLeft: '16px',\n        }),\n      },\n    }),\n  },\n};\n"],"names":["flowFormControl","defaultProps","variant","component","FormControl","styleOverrides","root","theme","ownerState","color","palette","mode","onSurface","os200","os600","transition","transitions","create","duration","shorter","easing","easeOut","marginBottom","text","primary","error","main","disabled","tertiary","borderRadius","getFocusRingStyle","bottom","top","boxShadow","content","borderLeft","paddingLeft"],"mappings":"2HAIO,MAAMA,EAAuD,CAClEC,aAAc,CACZC,QAAS,SACTC,UAAWC,GAEbC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,6CACdC,MAA8B,SAAvBF,EAAMG,QAAQC,KAAkBJ,EAAMG,QAAQE,UAAUC,MAAQN,EAAMG,QAAQE,UAAUE,MAE/FC,WAAYR,EAAMS,YAAYC,OAAO,CAAC,QAAS,aAAc,CAC3DC,SAAUX,EAAMS,YAAYE,SAASC,QACrCC,OAAQb,EAAMS,YAAYI,OAAOC,UAGnCC,aAAc,OACd,+BAAgC,CAC9Bb,MAAOF,EAAMG,QAAQa,KAAKC,SAE5B,oBAAqB,CACnB,kDAAmD,CACjD,wBAAyB,CACvBf,MAAOF,EAAMG,QAAQe,MAAMC,QAIjC,uBAAwB,CACtBjB,MAAOF,EAAMG,QAAQiB,SAASC,UAEhCC,aAAc,OAEXC,EAAkBvB,GAAO,EAAO,EAAG,+CAA6C,CAEnF,iCAAkC,CAEhC,sBAAuB,CAErB,mDAAoD,CAElD,YAAa,CAEXwB,OAAQ,YAMhB,6BAA8B,CAE5B,4CAA6C,CAE3C,YAAa,CACXC,IAAK,UAKX,iDAAkD,CAEhD,YAAa,CACXC,UAAW,SAIf,uEACEJ,aAAc,IACdP,aAAc,IAEd,YAAa,CACXY,QAAS,SAGP1B,EAAWiB,OAAS,CAEtBU,WAAY,aAAa5B,EAAMG,QAAQe,MAAMC,OAC7CU,YAAa"}
+{"version":3,"file":"formControl.theme.js","sources":["../../../src/materialui/textfield/formControl.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { FormControl } from './FormControl';\n\nexport const flowFormControl: Components<Theme>['MuiFormControl'] = {\n  defaultProps: {\n    variant: 'filled',\n    component: FormControl,\n  },\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os200 : theme.palette.onSurface.os600,\n      // match original transition with inputLabel\n      transition: theme.transitions.create(['color', 'transform'], {\n        duration: theme.transitions.duration.shorter,\n        easing: theme.transitions.easing.easeOut,\n      }),\n      // space for helperText (height + top margin + bottom margin)\n      marginBottom: `${16 + 4 + 4}px`,\n      '&:hover, &:has(.Mui-focused)': {\n        color: theme.palette.text.primary,\n      },\n      '&:has(.Mui-error)': {\n        '&:not(:has(.Mui-disabled)), &:has(.Mui-focused)': {\n          '& .MuiInputLabel-root': {\n            color: theme.palette.error.main,\n          },\n        },\n      },\n      '&:has(.Mui-disabled)': {\n        color: theme.palette.disabled.tertiary,\n      },\n      borderRadius: '4px',\n      // focus ring, appears with focused input\n      ...getFocusRingStyle(theme, false, 0, '&:not(.Flow-NoFocusRing):has(.Mui-focused)'),\n      // contains helper text\n      '&:has(.MuiFormHelperText-root)': {\n        // focused input\n        '&:has(.Mui-focused)': {\n          // does not have interactive error\n          '&:not(:has(.FlowHelperText-error-button-active))': {\n            // focus ring\n            '&&:before': {\n              // increase space (original size, helper text size + margin)\n              bottom: `-${2 + 16 + 4 + 4}px`,\n            },\n          },\n        },\n      },\n      // contains label\n      '&:has(.MuiInputLabel-root)': {\n        // focused OutlinedInput\n        '&:has(.MuiOutlinedInput-root.Mui-focused)': {\n          // focus ring\n          '&&:before': {\n            top: '-8px',\n          },\n        },\n      },\n      // select with open menu\n      '&:has(.MuiSelect-select[aria-expanded=\"true\"])': {\n        // hide focus ring to keep just one in menu\n        '&&:before': {\n          boxShadow: 'none',\n        },\n      },\n      // Checkboxes, Switches or Radio groups\n      '&:has(.MuiFormGroup-root), &:has(.MuiRadioGroup-root)': {\n        borderRadius: '0',\n        marginBottom: '0',\n        // remove focus effect\n        '&&:before': {\n          content: 'none',\n        },\n        // error\n        ...(ownerState.error && {\n          // similar style to banner\n          borderLeft: `6px solid ${theme.palette.error.main}`,\n          paddingLeft: '16px',\n        }),\n      },\n    }),\n  },\n};\n"],"names":["flowFormControl","defaultProps","variant","component","FormControl","styleOverrides","root","theme","ownerState","color","palette","mode","onSurface","os200","os600","transition","transitions","create","duration","shorter","easing","easeOut","marginBottom","text","primary","error","main","disabled","tertiary","borderRadius","getFocusRingStyle","bottom","top","boxShadow","content","borderLeft","paddingLeft"],"mappings":"2HAIO,MAAMA,EAAuD,CAClEC,aAAc,CACZC,QAAS,SACTC,UAAWC,GAEbC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,iBAAY,CAC1BC,MAA8B,SAAvBF,EAAMG,QAAQC,KAAkBJ,EAAMG,QAAQE,UAAUC,MAAQN,EAAMG,QAAQE,UAAUE,MAE/FC,WAAYR,EAAMS,YAAYC,OAAO,CAAC,QAAS,aAAc,CAC3DC,SAAUX,EAAMS,YAAYE,SAASC,QACrCC,OAAQb,EAAMS,YAAYI,OAAOC,UAGnCC,aAAc,OACd,+BAAgC,CAC9Bb,MAAOF,EAAMG,QAAQa,KAAKC,SAE5B,oBAAqB,CACnB,kDAAmD,CACjD,wBAAyB,CACvBf,MAAOF,EAAMG,QAAQe,MAAMC,QAIjC,uBAAwB,CACtBjB,MAAOF,EAAMG,QAAQiB,SAASC,UAEhCC,aAAc,SAEXC,EAAkBvB,GAAO,EAAO,EAAG,8CAEtC,iCAAkC,CAEhC,sBAAuB,CAErB,mDAAoD,CAElD,YAAa,CAEXwB,OAAQ,YAMhB,6BAA8B,CAE5B,4CAA6C,CAE3C,YAAa,CACXC,IAAK,UAKX,iDAAkD,CAEhD,YAAa,CACXC,UAAW,SAIf,wDAAyD,CACvDJ,aAAc,IACdP,aAAc,IAEd,YAAa,CACXY,QAAS,WAGP1B,EAAWiB,OAAS,CAEtBU,WAAY,aAAa5B,EAAMG,QAAQe,MAAMC,OAC7CU,YAAa"}

package/materialui/textfield/formHelperText.theme.js

@@ -1,2 +1,2 @@
-import{FormHelperText as t}from"./FormHelperText.js";const e={defaultProps:{component:t},styleOverrides:{root:({ownerState:t,theme:e})=>Object.assign({display:"block",width:"100%",margin:"4px 0",paddingLeft:"12px",paddingRight:"12px",color:"dark"===e.palette.mode?e.palette.onSurface.os200:e.palette.onSurface.os600,transition:"inherit","&.Mui-disabled":{color:e.palette.disabled.tertiary},[e.breakpoints.up("xs")]:{fontSize:"12px",fontWeight:"400",letterSpacing:"0",lineHeight:"16px"}},!1!==t.truncate?{position:"absolute",top:"100%",left:"0",right:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",height:"16px"}:{position:"static",minHeight:"16px",marginBottom:"-24px"})}};export{e as flowFormHelperText};
+import{FormHelperText as t}from"./FormHelperText.js";const e={defaultProps:{component:t},styleOverrides:{root:({ownerState:t,theme:e})=>({display:"block",width:"100%",margin:"4px 0",paddingLeft:"12px",paddingRight:"12px",color:"dark"===e.palette.mode?e.palette.onSurface.os200:e.palette.onSurface.os600,transition:"inherit","&.Mui-disabled":{color:e.palette.disabled.tertiary},[e.breakpoints.up("xs")]:{fontSize:"12px",fontWeight:"400",letterSpacing:"0",lineHeight:"16px"},...!1!==t.truncate?{position:"absolute",top:"100%",left:"0",right:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",height:"16px"}:{position:"static",minHeight:"16px",marginBottom:"-24px"}})}};export{e as flowFormHelperText};
 //# sourceMappingURL=formHelperText.theme.js.map

package/materialui/textfield/formHelperText.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"formHelperText.theme.js","sources":["../../../src/materialui/textfield/formHelperText.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { FormHelperText } from './FormHelperText';\n\nexport const flowFormHelperText: Components<Theme>['MuiFormHelperText'] = {\n  defaultProps: {\n    component: FormHelperText,\n  },\n  styleOverrides: {\n    root: ({ ownerState, theme }) => ({\n      display: 'block',\n      width: '100%',\n      margin: '4px 0',\n      paddingLeft: '12px',\n      paddingRight: '12px',\n      color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os200 : theme.palette.onSurface.os600,\n      transition: 'inherit',\n      '&.Mui-disabled': {\n        color: theme.palette.disabled.tertiary,\n      },\n      [theme.breakpoints.up('xs')]: {\n        // custom font\n        fontSize: '12px',\n        fontWeight: '400',\n        letterSpacing: '0',\n        lineHeight: '16px',\n      },\n      ...(ownerState.truncate !== false\n        ? {\n            position: 'absolute',\n            top: '100%',\n            left: '0',\n            right: '0',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n            // match bottom padding from FormControl\n            height: '16px',\n          }\n        : {\n            position: 'static',\n            minHeight: '16px',\n            // remove fake space from TextField due to static position (height + top margin + bottom margin)\n            marginBottom: `-${16 + 4 + 4}px`,\n          }),\n    }),\n  },\n};\n"],"names":["flowFormHelperText","defaultProps","component","FormHelperText","styleOverrides","root","ownerState","theme","Object","assign","display","width","margin","paddingLeft","paddingRight","color","palette","mode","onSurface","os200","os600","transition","disabled","tertiary","breakpoints","up","fontSize","fontWeight","letterSpacing","lineHeight","truncate","position","top","left","right","overflow","textOverflow","whiteSpace","height","minHeight","marginBottom"],"mappings":"qDAGO,MAAMA,EAA6D,CACxEC,aAAc,CACZC,UAAWC,GAEbC,eAAgB,CACdC,KAAM,EAAGC,aAAYC,WAAYC,OAAAC,OAAA,CAC/BC,QAAS,QACTC,MAAO,OACPC,OAAQ,QACRC,YAAa,OACbC,aAAc,OACdC,MAA8B,SAAvBR,EAAMS,QAAQC,KAAkBV,EAAMS,QAAQE,UAAUC,MAAQZ,EAAMS,QAAQE,UAAUE,MAC/FC,WAAY,UACZ,iBAAkB,CAChBN,MAAOR,EAAMS,QAAQM,SAASC,UAEhC,CAAChB,EAAMiB,YAAYC,GAAG,OAAQ,CAE5BC,SAAU,OACVC,WAAY,MACZC,cAAe,IACfC,WAAY,UAEc,IAAxBvB,EAAWwB,SACX,CACEC,SAAU,WACVC,IAAK,OACLC,KAAM,IACNC,MAAO,IACPC,SAAU,SACVC,aAAc,WACdC,WAAY,SAEZC,OAAQ,QAEV,CACEP,SAAU,SACVQ,UAAW,OAEXC,aAAc"}
+{"version":3,"file":"formHelperText.theme.js","sources":["../../../src/materialui/textfield/formHelperText.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { FormHelperText } from './FormHelperText';\n\nexport const flowFormHelperText: Components<Theme>['MuiFormHelperText'] = {\n  defaultProps: {\n    component: FormHelperText,\n  },\n  styleOverrides: {\n    root: ({ ownerState, theme }) => ({\n      display: 'block',\n      width: '100%',\n      margin: '4px 0',\n      paddingLeft: '12px',\n      paddingRight: '12px',\n      color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os200 : theme.palette.onSurface.os600,\n      transition: 'inherit',\n      '&.Mui-disabled': {\n        color: theme.palette.disabled.tertiary,\n      },\n      [theme.breakpoints.up('xs')]: {\n        // custom font\n        fontSize: '12px',\n        fontWeight: '400',\n        letterSpacing: '0',\n        lineHeight: '16px',\n      },\n      ...(ownerState.truncate !== false\n        ? {\n            position: 'absolute',\n            top: '100%',\n            left: '0',\n            right: '0',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n            // match bottom padding from FormControl\n            height: '16px',\n          }\n        : {\n            position: 'static',\n            minHeight: '16px',\n            // remove fake space from TextField due to static position (height + top margin + bottom margin)\n            marginBottom: `-${16 + 4 + 4}px`,\n          }),\n    }),\n  },\n};\n"],"names":["flowFormHelperText","defaultProps","component","FormHelperText","styleOverrides","root","ownerState","theme","display","width","margin","paddingLeft","paddingRight","color","palette","mode","onSurface","os200","os600","transition","disabled","tertiary","breakpoints","up","fontSize","fontWeight","letterSpacing","lineHeight","truncate","position","top","left","right","overflow","textOverflow","whiteSpace","height","minHeight","marginBottom"],"mappings":"qDAGO,MAAMA,EAA6D,CACxEC,aAAc,CACZC,UAAWC,GAEbC,eAAgB,CACdC,KAAM,EAAGC,aAAYC,YAAO,CAC1BC,QAAS,QACTC,MAAO,OACPC,OAAQ,QACRC,YAAa,OACbC,aAAc,OACdC,MAA8B,SAAvBN,EAAMO,QAAQC,KAAkBR,EAAMO,QAAQE,UAAUC,MAAQV,EAAMO,QAAQE,UAAUE,MAC/FC,WAAY,UACZ,iBAAkB,CAChBN,MAAON,EAAMO,QAAQM,SAASC,UAEhC,CAACd,EAAMe,YAAYC,GAAG,OAAQ,CAE5BC,SAAU,OACVC,WAAY,MACZC,cAAe,IACfC,WAAY,YAEc,IAAxBrB,EAAWsB,SACX,CACEC,SAAU,WACVC,IAAK,OACLC,KAAM,IACNC,MAAO,IACPC,SAAU,SACVC,aAAc,WACdC,WAAY,SAEZC,OAAQ,QAEV,CACEP,SAAU,SACVQ,UAAW,OAEXC,aAAc"}

package/materialui/textfield/formLabel.theme.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as i,jsx as r}from"react/jsx-runtime";import{Box as o}from"@mui/material";const t={defaultProps:{component:t=>{var{children:n,className:a}=t,s=e(t,["children","className"]);return i(o,Object.assign({component:"label",className:a},s,{children:[n,(null==a?void 0:a.includes("Mui-required"))&&r(o,{component:"span",sx:{position:"absolute",width:"1px",height:"1px",margin:"-1px",clip:"rect(0 0 0 0)",overflow:"hidden",padding:"0",border:"none",whiteSpace:"nowrap"},children:" (required)"})]}))}},styleOverrides:{root:({theme:e})=>({"&, &.Mui-disabled, &.Mui-focused, &.Mui-error":{transition:"inherit",color:"inherit"},[e.breakpoints.up("xs")]:{fontWeight:"400"},"&:not(.MuiInputLabel-root)":Object.assign(Object.assign({},e.typography.subheadline),{paddingBottom:"16px","& + [role=alert]":{marginTop:"-8px"},"&, &.Mui-disabled, &.Mui-focused":{color:e.palette.text.primary}})}),asterisk:{"&, &.Mui-disabled, &.Mui-focused, &.Mui-error":{transition:"inherit",color:"inherit"}}}};export{t as flowFormLabel};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{Box as r}from"@mui/material";const o={defaultProps:{component:({children:o,className:t,...n})=>e(r,{component:"label",className:t,...n,children:[o,t?.includes("Mui-required")&&i(r,{component:"span",sx:{position:"absolute",width:"1px",height:"1px",margin:"-1px",clip:"rect(0 0 0 0)",overflow:"hidden",padding:"0",border:"none",whiteSpace:"nowrap"},children:" (required)"})]})},styleOverrides:{root:({theme:e})=>({"&, &.Mui-disabled, &.Mui-focused, &.Mui-error":{transition:"inherit",color:"inherit"},[e.breakpoints.up("xs")]:{fontWeight:"400"},"&:not(.MuiInputLabel-root)":{...e.typography.subheadline,paddingBottom:"16px","& + [role=alert]":{marginTop:"-8px"},"&, &.Mui-disabled, &.Mui-focused":{color:e.palette.text.primary}}}),asterisk:{"&, &.Mui-disabled, &.Mui-focused, &.Mui-error":{transition:"inherit",color:"inherit"}}}};export{o as flowFormLabel};
 //# sourceMappingURL=formLabel.theme.js.map

package/materialui/textfield/formLabel.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"formLabel.theme.js","sources":["../../../src/materialui/textfield/formLabel.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { Box } from '@mui/material';\n\nexport const flowFormLabel: Components<Theme>['MuiFormLabel'] = {\n  defaultProps: {\n    // add a required text for the screen readers\n    component: ({ children, className, ...rest }) => (\n      <Box component=\"label\" className={className} {...rest}>\n        {children}\n        {className?.includes('Mui-required') && (\n          <Box\n            component=\"span\"\n            sx={{\n              position: 'absolute',\n              width: '1px',\n              height: '1px',\n              margin: '-1px',\n              clip: 'rect(0 0 0 0)',\n              overflow: 'hidden',\n              padding: '0',\n              border: 'none',\n              whiteSpace: 'nowrap',\n            }}\n          >{` (required)`}</Box>\n        )}\n      </Box>\n    ),\n  },\n  styleOverrides: {\n    root: ({ theme }) => ({\n      // recolor each variant\n      '&, &.Mui-disabled, &.Mui-focused, &.Mui-error': {\n        transition: 'inherit',\n        color: 'inherit',\n      },\n      [theme.breakpoints.up('xs')]: {\n        fontWeight: '400',\n      },\n      // target just labels for the group of toggles (switch, radio, checkbox)\n      '&:not(.MuiInputLabel-root)': {\n        // change body1 typography to subheadline\n        ...theme.typography.subheadline,\n        // space between inputs and label\n        paddingBottom: '16px',\n        // detect FormMessage\n        '& + [role=alert]': {\n          // reduce space between Label and message\n          marginTop: '-8px',\n        },\n        // recolor each variant\n        '&, &.Mui-disabled, &.Mui-focused': {\n          color: theme.palette.text.primary,\n        },\n      },\n    }),\n    asterisk: {\n      // recolor each variant\n      '&, &.Mui-disabled, &.Mui-focused, &.Mui-error': {\n        transition: 'inherit',\n        color: 'inherit',\n      },\n    },\n  },\n};\n"],"names":["flowFormLabel","defaultProps","component","_a","children","className","rest","__rest","_jsxs","Box","Object","assign","includes","_jsx","sx","position","width","height","margin","clip","overflow","padding","border","whiteSpace","styleOverrides","root","theme","transition","color","breakpoints","up","fontWeight","typography","subheadline","paddingBottom","marginTop","palette","text","primary","asterisk"],"mappings":"qHAGO,MAAMA,EAAmD,CAC9DC,aAAc,CAEZC,UAAYC,QAAAC,SAAEA,EAAQC,UAAEA,GAASF,EAAKG,EAAIC,EAAAJ,EAA9B,0BAAqC,OAC/CK,EAACC,EAAGC,OAAAC,OAAA,CAACT,UAAU,QAAQG,UAAWA,GAAeC,EAAI,CAAAF,SAAA,CAClDA,GACAC,eAAAA,EAAWO,SAAS,kBACnBC,EAACJ,EAAG,CACFP,UAAU,OACVY,GAAI,CACFC,SAAU,WACVC,MAAO,MACPC,OAAQ,MACRC,OAAQ,OACRC,KAAM,gBACNC,SAAU,SACVC,QAAS,IACTC,OAAQ,OACRC,WAAY,UACbnB,SACD,sBAKVoB,eAAgB,CACdC,KAAM,EAAGC,YAAO,CAEd,gDAAiD,CAC/CC,WAAY,UACZC,MAAO,WAET,CAACF,EAAMG,YAAYC,GAAG,OAAQ,CAC5BC,WAAY,OAGd,6BAA4BrB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAEvBe,EAAMM,WAAWC,aAAW,CAE/BC,cAAe,OAEf,mBAAoB,CAElBC,UAAW,QAGb,mCAAoC,CAClCP,MAAOF,EAAMU,QAAQC,KAAKC,aAIhCC,SAAU,CAER,gDAAiD,CAC/CZ,WAAY,UACZC,MAAO"}
+{"version":3,"file":"formLabel.theme.js","sources":["../../../src/materialui/textfield/formLabel.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { Box } from '@mui/material';\n\nexport const flowFormLabel: Components<Theme>['MuiFormLabel'] = {\n  defaultProps: {\n    // add a required text for the screen readers\n    component: ({ children, className, ...rest }) => (\n      <Box component=\"label\" className={className} {...rest}>\n        {children}\n        {className?.includes('Mui-required') && (\n          <Box\n            component=\"span\"\n            sx={{\n              position: 'absolute',\n              width: '1px',\n              height: '1px',\n              margin: '-1px',\n              clip: 'rect(0 0 0 0)',\n              overflow: 'hidden',\n              padding: '0',\n              border: 'none',\n              whiteSpace: 'nowrap',\n            }}\n          >{` (required)`}</Box>\n        )}\n      </Box>\n    ),\n  },\n  styleOverrides: {\n    root: ({ theme }) => ({\n      // recolor each variant\n      '&, &.Mui-disabled, &.Mui-focused, &.Mui-error': {\n        transition: 'inherit',\n        color: 'inherit',\n      },\n      [theme.breakpoints.up('xs')]: {\n        fontWeight: '400',\n      },\n      // target just labels for the group of toggles (switch, radio, checkbox)\n      '&:not(.MuiInputLabel-root)': {\n        // change body1 typography to subheadline\n        ...theme.typography.subheadline,\n        // space between inputs and label\n        paddingBottom: '16px',\n        // detect FormMessage\n        '& + [role=alert]': {\n          // reduce space between Label and message\n          marginTop: '-8px',\n        },\n        // recolor each variant\n        '&, &.Mui-disabled, &.Mui-focused': {\n          color: theme.palette.text.primary,\n        },\n      },\n    }),\n    asterisk: {\n      // recolor each variant\n      '&, &.Mui-disabled, &.Mui-focused, &.Mui-error': {\n        transition: 'inherit',\n        color: 'inherit',\n      },\n    },\n  },\n};\n"],"names":["flowFormLabel","defaultProps","component","children","className","rest","_jsxs","Box","includes","_jsx","sx","position","width","height","margin","clip","overflow","padding","border","whiteSpace","styleOverrides","root","theme","transition","color","breakpoints","up","fontWeight","typography","subheadline","paddingBottom","marginTop","palette","text","primary","asterisk"],"mappings":"sFAGO,MAAMA,EAAmD,CAC9DC,aAAc,CAEZC,UAAW,EAAGC,WAAUC,eAAcC,KACpCC,EAACC,GAAIL,UAAU,QAAQE,UAAWA,KAAeC,EAAIF,SAAA,CAClDA,EACAC,GAAWI,SAAS,iBACnBC,EAACF,EAAG,CACFL,UAAU,OACVQ,GAAI,CACFC,SAAU,WACVC,MAAO,MACPC,OAAQ,MACRC,OAAQ,OACRC,KAAM,gBACNC,SAAU,SACVC,QAAS,IACTC,OAAQ,OACRC,WAAY,UACbhB,SACD,oBAKViB,eAAgB,CACdC,KAAM,EAAGC,YAAO,CAEd,gDAAiD,CAC/CC,WAAY,UACZC,MAAO,WAET,CAACF,EAAMG,YAAYC,GAAG,OAAQ,CAC5BC,WAAY,OAGd,6BAA8B,IAEzBL,EAAMM,WAAWC,YAEpBC,cAAe,OAEf,mBAAoB,CAElBC,UAAW,QAGb,mCAAoC,CAClCP,MAAOF,EAAMU,QAAQC,KAAKC,YAIhCC,SAAU,CAER,gDAAiD,CAC/CZ,WAAY,UACZC,MAAO"}