@skodaflow/web-library 7.16.1 → 8.0.1

package/materialui/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from '@mui/material';
+export type { RadioProps, RadioGroupProps } from '@mui/material';

package/materialui/slider/SliderContainer.js

@@ -0,0 +1,2 @@
+import{__rest as t}from"tslib";import{jsx as i}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as o}from"@mui/material";import{flowThumbWidth as e}from"./slider.theme.js";const a=r((r,a)=>{var{orientation:m,thumbSize:p=e,sx:s}=r,d=t(r,["orientation","thumbSize","sx"]);return i(o,Object.assign({ref:a,sx:Object.assign(Object.assign({},"vertical"===m?{py:p/2+"px","& .MuiSlider-rail":{height:"auto",top:`-${p/2}px`,bottom:`-${p/2}px`},"& .MuiSlider-track":{marginBottom:`-${p/2}px`,borderTopLeftRadius:"0",borderTopRightRadius:"0"}}:{px:p/2+"px","& .MuiSlider-rail":{width:"auto",left:`-${p/2}px`,right:`-${p/2}px`,maxWidth:"none"},"& .MuiSlider-track":{marginLeft:`-${p/2}px`,borderTopRightRadius:"0",borderBottomRightRadius:"0"}}),s)},d))});export{a as SliderContainer};
+//# sourceMappingURL=SliderContainer.js.map

package/materialui/slider/SliderContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderContainer.js","sources":["../../../src/materialui/slider/SliderContainer.tsx"],"sourcesContent":["import React, { forwardRef, ElementType } from 'react';\nimport { Box, BoxProps, SliderProps } from '@mui/material';\nimport { flowThumbWidth } from './slider.theme';\n\nexport interface SliderContainer extends BoxProps<ElementType> {\n  /**\n   * Slider orientation\n   */\n  orientation?: SliderProps['orientation'];\n  /**\n   * Size of the slider thumb\n   */\n  thumbSize?: number;\n}\n\n/**\n * Simple wrapper of <Slider /> that ensures that thumb does not overflow outside the container\n */\nexport const SliderContainer: React.FC<SliderContainer> = forwardRef(\n  ({ orientation, thumbSize = flowThumbWidth, sx, ...rest }, ref) => {\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          ...(orientation === 'vertical'\n            ? {\n                py: `${thumbSize / 2}px`,\n                // increase the size of rail by size of thumb\n                '& .MuiSlider-rail': {\n                  height: 'auto',\n                  top: `-${thumbSize / 2}px`,\n                  bottom: `-${thumbSize / 2}px`,\n                },\n                // move track into increased rail size\n                '& .MuiSlider-track': {\n                  marginBottom: `-${thumbSize / 2}px`,\n                  borderTopLeftRadius: '0',\n                  borderTopRightRadius: '0',\n                },\n              }\n            : {\n                px: `${thumbSize / 2}px`,\n                // increase the size of rail by size of thumb\n                '& .MuiSlider-rail': {\n                  width: 'auto',\n                  left: `-${thumbSize / 2}px`,\n                  right: `-${thumbSize / 2}px`,\n                  maxWidth: 'none',\n                },\n                // move track into increased rail size\n                '& .MuiSlider-track': {\n                  marginLeft: `-${thumbSize / 2}px`,\n                  borderTopRightRadius: '0',\n                  borderBottomRightRadius: '0',\n                },\n              }),\n          ...sx,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["SliderContainer","forwardRef","_a","ref","orientation","thumbSize","flowThumbWidth","sx","rest","__rest","_jsx","Box","Object","assign","py","height","top","bottom","marginBottom","borderTopLeftRadius","borderTopRightRadius","px","width","left","right","maxWidth","marginLeft","borderBottomRightRadius"],"mappings":"iMAkBO,MAAMA,EAA6CC,EACxD,CAACC,EAA0DC,KAA1D,IAAAC,YAAEA,EAAWC,UAAEA,EAAYC,EAAcC,GAAEA,GAAEL,EAAKM,EAAIC,EAAAP,EAAtD,CAAA,cAAA,YAAA,OACC,OACEQ,EAACC,EAAGC,OAAAC,OAAA,CACFV,IAAKA,EACLI,GAAEK,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACoB,aAAhBT,EACA,CACEU,GAAOT,EAAY,EAAf,KAEJ,oBAAqB,CACnBU,OAAQ,OACRC,IAAK,IAAIX,EAAY,MACrBY,OAAQ,IAAIZ,EAAY,OAG1B,qBAAsB,CACpBa,aAAc,IAAIb,EAAY,MAC9Bc,oBAAqB,IACrBC,qBAAsB,MAG1B,CACEC,GAAOhB,EAAY,EAAf,KAEJ,oBAAqB,CACnBiB,MAAO,OACPC,KAAM,IAAIlB,EAAY,MACtBmB,MAAO,IAAInB,EAAY,MACvBoB,SAAU,QAGZ,qBAAsB,CACpBC,WAAY,IAAIrB,EAAY,MAC5Be,qBAAsB,IACtBO,wBAAyB,OAG9BpB,IAEDC"}

package/materialui/slider/SliderValues.d.ts

@@ -0,0 +1,86 @@
+import React, { ElementType, ReactNode } from 'react';
+import { BoxProps, SliderProps, TypographyProps, FilledInputProps } from '@mui/material';
+export interface SliderValuesProps extends BoxProps<ElementType> {
+    /**
+     * The value of the slider
+     */
+    value: SliderProps['value'] | false;
+    /**
+     * Properties applied to value wrapper
+     */
+    valueProps?: TypographyProps<ElementType>;
+    /**
+     * Label show above value
+     */
+    label?: ReactNode;
+    /**
+     * Properties applied to label wrapper
+     */
+    labelProps?: TypographyProps<ElementType>;
+    /**
+     * The format function the value label's value
+     */
+    valueLabelFormat?: SliderProps['valueLabelFormat'];
+    /**
+     * Provide this function to allow changing the slider value with inputs
+     */
+    setValue?: (newValue: unknown) => void;
+    /**
+     * Disable editing
+     */
+    disabled?: boolean;
+    /**
+     * The minimum allowed value of the slider
+     */
+    min?: SliderProps['min'];
+    /**
+     * Text shown above min selected value
+     */
+    minLabel?: ReactNode;
+    /**
+     * Properties applied to label wrapper
+     */
+    minLabelProps?: TypographyProps<ElementType>;
+    /**
+     * The maximum allowed value of the slider
+     */
+    max?: SliderProps['max'];
+    /**
+     * Text shown above max selected value
+     */
+    maxLabel?: ReactNode;
+    /**
+     * Properties applied to label wrapper
+     */
+    maxLabelProps?: TypographyProps<ElementType>;
+    /**
+     * The granularity with which the slider can step through values
+     */
+    step?: SliderProps['step'];
+    /**
+     * Properties applied to the root wrapper of each SliderValue
+     */
+    sliderValueProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to SliderValue input field
+     */
+    inputProps?: FilledInputProps;
+}
+/**
+ * Wrapper that render one or two SliderValue components based on the Slider type
+ */
+export declare const SliderValues: React.FC<SliderValuesProps>;
+export interface SliderValueProps extends Omit<SliderValuesProps, 'value' | 'minLabel' | 'minLabelProps' | 'maxLabel' | 'maxLabelProps'> {
+    /**
+     * The single value of the slider
+     */
+    value: number | false;
+    /**
+     * The single setValue for the slider value
+     */
+    setValue?: (newValue: number) => void;
+}
+/**
+ * Display single value of slider, allows editing with input
+ */
+export declare const SliderValue: React.FC<SliderValueProps>;

package/materialui/slider/SliderValues.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"tslib";import{jsxs as a,jsx as s,Fragment as l}from"react/jsx-runtime";import{forwardRef as r,useState as o,useCallback as i}from"react";import{Box as n,Typography as t,FilledInput as p}from"@mui/material";import{flowSlider as u}from"./slider.theme.js";import{getFocusRingStyle as b}from"../../components/focusring/focusring.js";const c=r((r,o)=>{var{sx:i,children:t,value:p,valueProps:b,label:c,labelProps:m,valueLabelFormat:x,setValue:g,disabled:v,min:f=u.defaultProps.min,minLabel:P,minLabelProps:j,max:O=u.defaultProps.max,maxLabel:h,maxLabelProps:y,step:L=u.defaultProps.step,sliderValueProps:S,inputProps:k}=r,V=e(r,["sx","children","value","valueProps","label","labelProps","valueLabelFormat","setValue","disabled","min","minLabel","minLabelProps","max","maxLabel","maxLabelProps","step","sliderValueProps","inputProps"]);const F=Object.assign({disabled:v,min:f,max:O,step:L,valueLabelFormat:x,valueProps:b,inputProps:k},S);return a(n,Object.assign({ref:o,sx:Object.assign({display:"flex",alignItems:"flex-end",justifyContent:"space-between",gap:1},i)},V,{children:[Array.isArray(p)||!1===p&&(P||c)&&h?a(l,{children:[s(d,Object.assign({value:!1!==p&&p[0],setValue:g?e=>g([e,p[1]]):void 0,label:P||c,labelProps:j||m},F,{max:p[1]})),s(d,Object.assign({value:!1!==p&&p[1],setValue:g?e=>g([p[0],e]):void 0,label:h,labelProps:y},F,{min:p[0],sx:Object.assign({textAlign:"right"},null==F?void 0:F.sx)}))]}):s(d,Object.assign({value:p,setValue:g,label:c,labelProps:m},F)),t]}))}),d=r((l,r)=>{var{value:u,valueProps:c,label:d,labelProps:m,valueLabelFormat:x,setValue:g,min:v,max:f,step:P,inputProps:j,disabled:O,sx:h}=l,y=e(l,["value","valueProps","label","labelProps","valueLabelFormat","setValue","min","max","step","inputProps","disabled","sx"]);const L=null!=m?m:{},{sx:S}=L,k=e(L,["sx"]),V=null!=c?c:{},{sx:F}=V,C=e(V,["sx"]),w=null!=j?j:{},{sx:A}=w,I=e(w,["sx"]),[z,B]=o(!1),M=i(e=>{const a=+(e||0);g(a<v?v:a>f?f:a)},[v,f,g]),R=x?x(u):u;return a(n,Object.assign({ref:r,sx:Object.assign(Object.assign({minWidth:"82px"},(!d||!1===u)&&{pt:.5}),h),onClick:g&&!O?()=>B(!0):void 0},y,{children:[d&&s(t,Object.assign({},!1===u&&{variant:"disclaimer1"},{sx:Object.assign(Object.assign({display:"block"},!1===u?{color:e=>"dark"===e.palette.mode?"onSurface.os200":"onSurface.os700"}:{color:e=>"dark"===e.palette.mode?"onSurface.os300":"onSurface.os600",fontSize:{xs:"12px"},lineHeight:{xs:"12px"},fontWeight:{xs:"400"},py:.5,px:1}),S)},k,{children:d})),z&&!O?s(p,Object.assign({autoFocus:!0,onBlur:()=>B(!1),value:u,onChange:e=>M(e.target.value),onKeyUp:()=>{},inputProps:{type:"number",step:P,min:v,"aria-valuemin":v,max:f,"aria-valuemax":f,"aria-valuenow":R},disableUnderline:!0,sx:e=>{var a;return Object.assign(Object.assign(Object.assign({display:"block",borderRadius:"4px",py:"1px",px:1,border:1,borderColor:"onSurface.os500","&&, &:hover":{backgroundColor:"background.primary"},"& .MuiInputBase-input":Object.assign({fieldSizing:"content",textAlign:"inherit",p:0},e.typography[null!==(a=null==C?void 0:C.variant)&&void 0!==a?a:"disclaimer1"])},b(e,!1,1,"&.Mui-focused")),{"&&:before":{border:"none"}}),A)}},I)):!1!==u&&s(t,Object.assign({variant:"disclaimer1",sx:Object.assign(Object.assign({display:"block",px:1,whiteSpace:"nowrap",color:e=>"dark"===e.palette.mode?"onSurface.os200":"onSurface.os700"},g&&{px:1,py:"1px",border:1,borderColor:"onSurface.os500",borderRadius:"4px"}),F)},g&&{tabIndex:0,onFocus:()=>B(!0)},C,{children:R}))]}))});export{d as SliderValue,c as SliderValues};
+//# sourceMappingURL=SliderValues.js.map

package/materialui/slider/SliderValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderValues.js","sources":["../../../src/materialui/slider/SliderValues.tsx"],"sourcesContent":["import React, { forwardRef, ElementType, ReactNode, useState, useCallback } from 'react';\nimport { Box, BoxProps, SliderProps, Typography, TypographyProps, FilledInput, FilledInputProps } from '@mui/material';\nimport { flowSlider } from '@/src/materialui/slider/slider.theme';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface SliderValuesProps extends BoxProps<ElementType> {\n  /**\n   * The value of the slider\n   */\n  value: SliderProps['value'] | false;\n  /**\n   * Properties applied to value wrapper\n   */\n  valueProps?: TypographyProps<ElementType>;\n  /**\n   * Label show above value\n   */\n  label?: ReactNode;\n  /**\n   * Properties applied to label wrapper\n   */\n  labelProps?: TypographyProps<ElementType>;\n  /**\n   * The format function the value label's value\n   */\n  valueLabelFormat?: SliderProps['valueLabelFormat'];\n  /**\n   * Provide this function to allow changing the slider value with inputs\n   */\n  setValue?: (newValue: unknown) => void;\n  /**\n   * Disable editing\n   */\n  disabled?: boolean;\n  /**\n   * The minimum allowed value of the slider\n   */\n  min?: SliderProps['min'];\n  /**\n   * Text shown above min selected value\n   */\n  minLabel?: ReactNode;\n  /**\n   * Properties applied to label wrapper\n   */\n  minLabelProps?: TypographyProps<ElementType>;\n  /**\n   * The maximum allowed value of the slider\n   */\n  max?: SliderProps['max'];\n  /**\n   * Text shown above max selected value\n   */\n  maxLabel?: ReactNode;\n  /**\n   * Properties applied to label wrapper\n   */\n  maxLabelProps?: TypographyProps<ElementType>;\n  /**\n   * The granularity with which the slider can step through values\n   */\n  step?: SliderProps['step'];\n  /**\n   * Properties applied to the root wrapper of each SliderValue\n   */\n  sliderValueProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to SliderValue input field\n   */\n  inputProps?: FilledInputProps;\n}\n\n/**\n * Wrapper that render one or two SliderValue components based on the Slider type\n */\nexport const SliderValues: React.FC<SliderValuesProps> = forwardRef(\n  (\n    {\n      sx,\n      children,\n      value,\n      valueProps,\n      label,\n      labelProps,\n      valueLabelFormat,\n      setValue,\n      disabled,\n      min = flowSlider.defaultProps.min,\n      minLabel,\n      minLabelProps,\n      max = flowSlider.defaultProps.max,\n      maxLabel,\n      maxLabelProps,\n      step = flowSlider.defaultProps.step,\n      sliderValueProps: rawSliderValueProps,\n      inputProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const sliderValueProps = {\n      disabled,\n      min,\n      max,\n      step,\n      valueLabelFormat,\n      valueProps,\n      inputProps,\n      ...rawSliderValueProps,\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          alignItems: 'flex-end',\n          justifyContent: 'space-between',\n          gap: 1,\n          ...sx,\n        }}\n        {...rest}\n      >\n        {Array.isArray(value) || (value === false && (minLabel || label) && maxLabel) ? (\n          <>\n            <SliderValue\n              value={value !== false && value[0]}\n              setValue={setValue ? (newValue) => setValue([newValue, value[1]]) : undefined}\n              label={minLabel || label}\n              labelProps={minLabelProps || labelProps}\n              {...sliderValueProps}\n              max={value[1]}\n            />\n            <SliderValue\n              value={value !== false && value[1]}\n              setValue={setValue ? (newValue) => setValue([value[0], newValue]) : undefined}\n              label={maxLabel}\n              labelProps={maxLabelProps}\n              {...sliderValueProps}\n              min={value[0]}\n              sx={{ textAlign: 'right', ...sliderValueProps?.sx }}\n            />\n          </>\n        ) : (\n          <SliderValue value={value} setValue={setValue} label={label} labelProps={labelProps} {...sliderValueProps} />\n        )}\n        {children}\n      </Box>\n    );\n  },\n);\n\nexport interface SliderValueProps\n  extends Omit<SliderValuesProps, 'value' | 'minLabel' | 'minLabelProps' | 'maxLabel' | 'maxLabelProps'> {\n  /**\n   * The single value of the slider\n   */\n  value: number | false;\n  /**\n   * The single setValue for the slider value\n   */\n  setValue?: (newValue: number) => void;\n}\n\n/**\n * Display single value of slider, allows editing with input\n */\nexport const SliderValue: React.FC<SliderValueProps> = forwardRef(\n  (\n    {\n      value,\n      valueProps,\n      label,\n      labelProps,\n      valueLabelFormat,\n      setValue,\n      min,\n      max,\n      step,\n      inputProps,\n      disabled,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: labelSx, ...restLabel } = labelProps ?? {};\n    const { sx: valueSx, ...restValue } = valueProps ?? {};\n    const { sx: inputSx, ...restInput } = inputProps ?? {};\n    const [editing, setEditing] = useState(false);\n    const editValue = useCallback(\n      (inputValue: string) => {\n        const newValue = +(inputValue || 0);\n        if (newValue < min) {\n          setValue(min);\n        } else if (newValue > max) {\n          setValue(max);\n        } else {\n          setValue(newValue);\n        }\n      },\n      [min, max, setValue],\n    );\n    const formattedValue = valueLabelFormat ? valueLabelFormat(value) : value;\n\n    return (\n      <Box\n        ref={ref}\n        sx={{ minWidth: '82px', ...((!label || value === false) && { pt: 0.5 }), ...sx }}\n        onClick={setValue && !disabled ? () => setEditing(true) : undefined}\n        {...rest}\n      >\n        {label && (\n          <Typography\n            {...(value === false && {\n              variant: 'disclaimer1',\n            })}\n            sx={{\n              display: 'block',\n              ...(value === false\n                ? {\n                    color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os700'),\n                  }\n                : {\n                    // os600 instead of Figma's os500 to pass A11y contrast\n                    color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os600'),\n                    fontSize: { xs: '12px' },\n                    lineHeight: { xs: '12px' },\n                    fontWeight: { xs: '400' },\n                    py: 0.5,\n                    px: 1,\n                  }),\n              ...labelSx,\n            }}\n            {...restLabel}\n          >\n            {label}\n          </Typography>\n        )}\n        {editing && !disabled ? (\n          <FilledInput\n            autoFocus\n            onBlur={() => setEditing(false)}\n            value={value}\n            onChange={(e) => editValue(e.target.value)}\n            onKeyUp={() => {}}\n            inputProps={{\n              type: 'number',\n              step: step,\n              min: min,\n              ['aria-valuemin']: min,\n              max: max,\n              ['aria-valuemax']: max,\n              ['aria-valuenow']: formattedValue,\n            }}\n            disableUnderline\n            sx={(theme) => ({\n              display: 'block',\n              borderRadius: '4px',\n              py: '1px', // pixel perfect matching design\n              px: 1,\n              border: 1,\n              borderColor: 'onSurface.os500',\n              '&&, &:hover': {\n                backgroundColor: 'background.primary',\n              },\n              // input itself\n              '& .MuiInputBase-input': {\n                fieldSizing: 'content',\n                textAlign: 'inherit',\n                p: 0,\n                // matching typography style with value\n                ...theme.typography[restValue?.variant ?? 'disclaimer1'],\n              },\n              ...getFocusRingStyle(theme, false, 1, '&.Mui-focused'),\n              '&&:before': {\n                border: 'none',\n              },\n              ...inputSx,\n            })}\n            {...restInput}\n          />\n        ) : (\n          value !== false && (\n            <Typography\n              variant=\"disclaimer1\"\n              sx={{\n                display: 'block',\n                px: 1,\n                whiteSpace: 'nowrap',\n                color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os700'),\n                // editable\n                ...(setValue && {\n                  px: 1,\n                  py: '1px',\n                  border: 1,\n                  borderColor: 'onSurface.os500',\n                  borderRadius: '4px',\n                }),\n                ...valueSx,\n              }}\n              {...(setValue && {\n                // allow focus with keyboard navigation\n                tabIndex: 0,\n                onFocus: () => setEditing(true),\n              })}\n              {...restValue}\n            >\n              {formattedValue}\n            </Typography>\n          )\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["SliderValues","forwardRef","_a","ref","sx","children","value","valueProps","label","labelProps","valueLabelFormat","setValue","disabled","min","flowSlider","defaultProps","minLabel","minLabelProps","max","maxLabel","maxLabelProps","step","sliderValueProps","rawSliderValueProps","inputProps","rest","__rest","_jsxs","Box","Object","assign","display","alignItems","justifyContent","gap","Array","isArray","_jsx","SliderValue","newValue","undefined","textAlign","_b","labelSx","restLabel","_c","valueSx","restValue","_d","inputSx","restInput","editing","setEditing","useState","editValue","useCallback","inputValue","formattedValue","minWidth","pt","onClick","Typography","variant","color","theme","palette","mode","fontSize","xs","lineHeight","fontWeight","py","px","FilledInput","autoFocus","onBlur","onChange","e","target","onKeyUp","type","disableUnderline","borderRadius","border","borderColor","backgroundColor","fieldSizing","p","typography","getFocusRingStyle","whiteSpace","tabIndex","onFocus"],"mappings":"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"}

package/materialui/slider/index.d.ts

@@ -1,3 +1,5 @@
+export { Slider } from '@mui/material';
+export type { SliderProps } from '@mui/material';
 export * from './getSliderMarks';
-export * from './sliderValues';
-export * from './sliderContainer';
+export * from './SliderValues';
+export * from './SliderContainer';

package/materialui/slider/slider.theme.js

@@ -1,2 +1,2 @@
-import{getFocusRingStyle as e}from"../../components/focusring/focusring.js";const t=40,a=20,o={defaultProps:{min:0,max:100,step:1,valueLabelDisplay:"auto",marks:!1},styleOverrides:{root:({theme:e,ownerState:t})=>Object.assign(Object.assign({display:"block",borderRadius:"0"},"vertical"===t.orientation?{width:"6px",height:"320px"}:{height:"6px"}),{"&.Mui-disabled":{"& .MuiSlider-rail":{color:e.palette.disabled.primary},"& .MuiSlider-track":{color:e.palette.disabled.tertiary},"& .MuiSlider-mark":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0,"&.MuiSlider-markActive":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0}},"& .MuiSlider-thumb":{borderColor:e.palette.disabled.tertiary}}}),rail:({theme:e})=>({borderRadius:"6px",opacity:"1",color:e.palette.onSurface.os500,transform:"translate3d(0px, -50%, 0px)"}),track:({theme:e})=>({borderRadius:"6px",border:"none",color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary,transform:"translate3d(0px, -50%, 0px)"}),mark:({theme:e})=>({height:"4px",width:"4px",borderRadius:"4px",opacity:"1",backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0,"&.MuiSlider-markActive":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0}}),thumb:({theme:t,ownerState:a})=>Object.assign(Object.assign(Object.assign(Object.assign({},"vertical"===a.orientation?{width:"20px",height:"40px"}:{width:"40px",height:"20px"}),{borderRadius:"20px",backgroundColor:t.palette.onSurface.os0,border:`1px solid ${t.palette.onSurface.os900}`}),e(t,!0,1)),{transition:"box-shadow 0.3s ease-out","&, &:hover, &.Mui-active":{boxShadow:"none"},"&.Mui-focusVisible":{boxShadow:`0 0 0 2px ${t.palette.background.primary}`,"&.Mui-active":{boxShadow:"none",outline:`0px solid ${t.palette.background.primary}`,"&:before":{boxShadow:"none"}}}}),valueLabel:({theme:e})=>({maxWidth:"none",top:"-12px",backgroundColor:e.palette.text.primary,color:e.palette.background.primary,borderRadius:"2px",padding:"8px 12px",[e.breakpoints.up("xs")]:{fontSize:"12px",lineHeight:"16px",fontWeight:"400"}})}};export{o as flowSlider,a as flowThumbHeight,t as flowThumbWidth};
+import{getFocusRingStyle as e}from"../../components/focusring/focusring.js";const t=40,a=20,o={defaultProps:{min:0,max:100,step:1,valueLabelDisplay:"auto",marks:!1},styleOverrides:{root:({theme:e,ownerState:t})=>Object.assign(Object.assign({display:"block",borderRadius:"0",padding:"13px 0"},"vertical"===t.orientation?{width:"6px",height:"320px"}:{height:"6px"}),{"&.Mui-disabled":{"& .MuiSlider-rail":{color:e.palette.disabled.primary},"& .MuiSlider-track":{color:e.palette.disabled.tertiary},"& .MuiSlider-mark":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0,"&.MuiSlider-markActive":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0}},"& .MuiSlider-thumb":{borderColor:e.palette.disabled.tertiary}}}),rail:({theme:e})=>({borderRadius:"6px",opacity:"1",color:e.palette.onSurface.os500,transform:"translate3d(0px, -50%, 0px)"}),track:({theme:e})=>({borderRadius:"6px",border:"none",color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary,transform:"translate3d(0px, -50%, 0px)"}),mark:({theme:e})=>({height:"4px",width:"4px",borderRadius:"4px",opacity:"1",backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0,"&.MuiSlider-markActive":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0}}),thumb:({theme:t,ownerState:a})=>Object.assign(Object.assign(Object.assign(Object.assign({},"vertical"===a.orientation?{width:"20px",height:"40px"}:{width:"40px",height:"20px"}),{borderRadius:"20px",backgroundColor:t.palette.onSurface.os0,border:`1px solid ${t.palette.onSurface.os900}`,"&:after":{width:"40px",height:"40px",borderRadius:"1000px"}}),e(t,!0,1)),{transition:"box-shadow 0.3s ease-out","&, &:hover, &.Mui-active":{boxShadow:"none"},"&.Mui-focusVisible":{boxShadow:`0 0 0 2px ${t.palette.background.primary}`,"&.Mui-active":{boxShadow:"none",outline:`0px solid ${t.palette.background.primary}`,"&:before":{boxShadow:"none"}}}}),valueLabel:({theme:e})=>({maxWidth:"none",top:"-12px",backgroundColor:e.palette.text.primary,color:e.palette.background.primary,borderRadius:"2px",padding:"8px 12px",[e.breakpoints.up("xs")]:{fontSize:"12px",lineHeight:"16px",fontWeight:"400"}})}};export{o as flowSlider,a as flowThumbHeight,t as flowThumbWidth};
 //# sourceMappingURL=slider.theme.js.map

package/materialui/slider/slider.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.theme.js","sources":["../../../src/materialui/slider/slider.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\n// make sure the value can be divided by 2\nexport const flowThumbWidth = 40;\nexport const flowThumbHeight = 20;\n\nexport const flowSlider: Components<Theme>['MuiSlider'] = {\n  defaultProps: {\n    // value properties\n    min: 0,\n    max: 100,\n    step: 1,\n    // display label with hover\n    valueLabelDisplay: 'auto',\n    // disable auto-generated marks, it is recommended to use ./getSliderMarks.ts function\n    marks: false,\n  },\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      display: 'block',\n      borderRadius: '0',\n      ...(ownerState.orientation === 'vertical'\n        ? {\n            width: '6px',\n            height: '320px',\n          }\n        : {\n            height: '6px',\n          }),\n      // disabled state\n      '&.Mui-disabled': {\n        '& .MuiSlider-rail': {\n          color: theme.palette.disabled.primary,\n        },\n        '& .MuiSlider-track': {\n          color: theme.palette.disabled.tertiary,\n        },\n        '& .MuiSlider-mark': {\n          backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n          '&.MuiSlider-markActive': {\n            backgroundColor:\n              theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n          },\n        },\n        '& .MuiSlider-thumb': {\n          borderColor: theme.palette.disabled.tertiary,\n        },\n      },\n    }),\n    // whole rail bellow the thumb\n    rail: ({ theme }) => ({\n      borderRadius: '6px',\n      opacity: '1',\n      color: theme.palette.onSurface.os500,\n      // add translate3d, in addition to translateY(-50%), to prevent overflowing borderRadius\n      transform: 'translate3d(0px, -50%, 0px)',\n    }),\n    // track marking selected segment\n    track: ({ theme }) => ({\n      borderRadius: '6px',\n      border: 'none',\n      color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n      // add translate3d, in addition to translateY(-50%), to prevent overflowing borderRadius\n      transform: 'translate3d(0px, -50%, 0px)',\n    }),\n    // dot on the rail and track\n    mark: ({ theme }) => ({\n      height: '4px',\n      width: '4px',\n      borderRadius: '4px',\n      opacity: '1',\n      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n      '&.MuiSlider-markActive': {\n        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n      },\n    }),\n    // pointer\n    thumb: ({ theme, ownerState }) => ({\n      ...(ownerState.orientation === 'vertical'\n        ? {\n            width: `${flowThumbHeight}px`,\n            height: `${flowThumbWidth}px`,\n          }\n        : {\n            width: `${flowThumbWidth}px`,\n            height: `${flowThumbHeight}px`,\n          }),\n      borderRadius: `${flowThumbHeight}px`,\n      backgroundColor: theme.palette.onSurface.os0,\n      border: `1px solid ${theme.palette.onSurface.os900}`,\n      // focus style\n      ...getFocusRingStyle(theme, true, 1),\n      // extra shadow around\n      transition: 'box-shadow 0.3s ease-out',\n      '&, &:hover, &.Mui-active': {\n        boxShadow: `none`,\n      },\n      '&.Mui-focusVisible': {\n        // extra white border\n        boxShadow: `0 0 0 2px ${theme.palette.background.primary}`,\n        // hide focus during dragging\n        '&.Mui-active': {\n          boxShadow: 'none',\n          outline: `0px solid ${theme.palette.background.primary}`,\n          '&:before': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    }),\n    // label above thumb\n    valueLabel: ({ theme }) => ({\n      maxWidth: 'none',\n      // increase space between thumb and tooltip\n      top: '-12px',\n      // style box\n      backgroundColor: theme.palette.text.primary,\n      color: theme.palette.background.primary,\n      borderRadius: '2px',\n      padding: '8px 12px',\n      // custom font-size\n      [theme.breakpoints.up('xs')]: {\n        fontSize: '12px',\n        lineHeight: '16px',\n        fontWeight: '400',\n      },\n    }),\n  },\n};\n"],"names":["flowThumbWidth","flowThumbHeight","flowSlider","defaultProps","min","max","step","valueLabelDisplay","marks","styleOverrides","root","theme","ownerState","Object","assign","display","borderRadius","orientation","width","height","color","palette","disabled","primary","tertiary","backgroundColor","mode","onSurface","os900","os0","borderColor","rail","opacity","os500","transform","track","border","brand","secondary","mark","thumb","getFocusRingStyle","transition","boxShadow","background","outline","valueLabel","maxWidth","top","text","padding","breakpoints","up","fontSize","lineHeight","fontWeight"],"mappings":"4EAKO,MAAMA,EAAiB,GACjBC,EAAkB,GAElBC,EAA6C,CACxDC,aAAc,CAEZC,IAAK,EACLC,IAAK,IACLC,KAAM,EAENC,kBAAmB,OAEnBC,OAAO,GAETC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,gBAAiBC,OAAAC,OAAAD,OAAAC,OAAA,CAC/BC,QAAS,QACTC,aAAc,KACiB,aAA3BJ,EAAWK,YACX,CACEC,MAAO,MACPC,OAAQ,SAEV,CACEA,OAAQ,QACR,CAEN,iBAAkB,CAChB,oBAAqB,CACnBC,MAAOT,EAAMU,QAAQC,SAASC,SAEhC,qBAAsB,CACpBH,MAAOT,EAAMU,QAAQC,SAASE,UAEhC,oBAAqB,CACnBC,gBAAwC,SAAvBd,EAAMU,QAAQK,KAAkBf,EAAMU,QAAQM,UAAUC,MAAQjB,EAAMU,QAAQM,UAAUE,IACzG,yBAA0B,CACxBJ,gBACyB,SAAvBd,EAAMU,QAAQK,KAAkBf,EAAMU,QAAQM,UAAUC,MAAQjB,EAAMU,QAAQM,UAAUE,MAG9F,qBAAsB,CACpBC,YAAanB,EAAMU,QAAQC,SAASE,aAK1CO,KAAM,EAAGpB,YAAO,CACdK,aAAc,MACdgB,QAAS,IACTZ,MAAOT,EAAMU,QAAQM,UAAUM,MAE/BC,UAAW,gCAGbC,MAAO,EAAGxB,YAAO,CACfK,aAAc,MACdoB,OAAQ,OACRhB,MAA8B,SAAvBT,EAAMU,QAAQK,KAAkBf,EAAMU,QAAQgB,MAAMC,UAAY3B,EAAMU,QAAQgB,MAAMd,QAE3FW,UAAW,gCAGbK,KAAM,EAAG5B,YAAO,CACdQ,OAAQ,MACRD,MAAO,MACPF,aAAc,MACdgB,QAAS,IACTP,gBAAwC,SAAvBd,EAAMU,QAAQK,KAAkBf,EAAMU,QAAQM,UAAUC,MAAQjB,EAAMU,QAAQM,UAAUE,IACzG,yBAA0B,CACxBJ,gBAAwC,SAAvBd,EAAMU,QAAQK,KAAkBf,EAAMU,QAAQM,UAAUC,MAAQjB,EAAMU,QAAQM,UAAUE,OAI7GW,MAAO,EAAG7B,QAAOC,2EACgB,aAA3BA,EAAWK,YACX,CACEC,MAAO,OACPC,OAAQ,QAEV,CACED,MAAO,OACPC,OAAQ,UAEdH,aAAc,OACdS,gBAAiBd,EAAMU,QAAQM,UAAUE,IACzCO,OAAQ,aAAazB,EAAMU,QAAQM,UAAUC,UAE1Ca,EAAkB9B,GAAO,EAAM,IAAE,CAEpC+B,WAAY,2BACZ,2BAA4B,CAC1BC,UAAW,QAEb,qBAAsB,CAEpBA,UAAW,aAAahC,EAAMU,QAAQuB,WAAWrB,UAEjD,eAAgB,CACdoB,UAAW,OACXE,QAAS,aAAalC,EAAMU,QAAQuB,WAAWrB,UAC/C,WAAY,CACVoB,UAAW,YAMnBG,WAAY,EAAGnC,YAAO,CACpBoC,SAAU,OAEVC,IAAK,QAELvB,gBAAiBd,EAAMU,QAAQ4B,KAAK1B,QACpCH,MAAOT,EAAMU,QAAQuB,WAAWrB,QAChCP,aAAc,MACdkC,QAAS,WAET,CAACvC,EAAMwC,YAAYC,GAAG,OAAQ,CAC5BC,SAAU,OACVC,WAAY,OACZC,WAAY"}
+{"version":3,"file":"slider.theme.js","sources":["../../../src/materialui/slider/slider.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\n// make sure the value can be divided by 2\nexport const flowThumbWidth = 40;\nexport const flowThumbHeight = 20;\n\nexport const flowSlider: Components<Theme>['MuiSlider'] = {\n  defaultProps: {\n    // value properties\n    min: 0,\n    max: 100,\n    step: 1,\n    // display label with hover\n    valueLabelDisplay: 'auto',\n    // disable auto-generated marks, it is recommended to use ./getSliderMarks.ts function\n    marks: false,\n  },\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      display: 'block',\n      borderRadius: '0',\n      // 32px height\n      padding: '13px 0',\n      ...(ownerState.orientation === 'vertical'\n        ? {\n            width: '6px',\n            height: '320px',\n          }\n        : {\n            height: '6px',\n          }),\n      // disabled state\n      '&.Mui-disabled': {\n        '& .MuiSlider-rail': {\n          color: theme.palette.disabled.primary,\n        },\n        '& .MuiSlider-track': {\n          color: theme.palette.disabled.tertiary,\n        },\n        '& .MuiSlider-mark': {\n          backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n          '&.MuiSlider-markActive': {\n            backgroundColor:\n              theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n          },\n        },\n        '& .MuiSlider-thumb': {\n          borderColor: theme.palette.disabled.tertiary,\n        },\n      },\n    }),\n    // whole rail bellow the thumb\n    rail: ({ theme }) => ({\n      borderRadius: '6px',\n      opacity: '1',\n      color: theme.palette.onSurface.os500,\n      // add translate3d, in addition to translateY(-50%), to prevent overflowing borderRadius\n      transform: 'translate3d(0px, -50%, 0px)',\n    }),\n    // track marking selected segment\n    track: ({ theme }) => ({\n      borderRadius: '6px',\n      border: 'none',\n      color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n      // add translate3d, in addition to translateY(-50%), to prevent overflowing borderRadius\n      transform: 'translate3d(0px, -50%, 0px)',\n    }),\n    // dot on the rail and track\n    mark: ({ theme }) => ({\n      height: '4px',\n      width: '4px',\n      borderRadius: '4px',\n      opacity: '1',\n      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n      '&.MuiSlider-markActive': {\n        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n      },\n    }),\n    // pointer\n    thumb: ({ theme, ownerState }) => ({\n      ...(ownerState.orientation === 'vertical'\n        ? {\n            width: `${flowThumbHeight}px`,\n            height: `${flowThumbWidth}px`,\n          }\n        : {\n            width: `${flowThumbWidth}px`,\n            height: `${flowThumbHeight}px`,\n          }),\n      borderRadius: `${flowThumbHeight}px`,\n      backgroundColor: theme.palette.onSurface.os0,\n      border: `1px solid ${theme.palette.onSurface.os900}`,\n      // hitbox target\n      '&:after': {\n        width: `${flowThumbWidth}px`,\n        height: `${flowThumbWidth}px`,\n        borderRadius: '1000px',\n      },\n      // focus style\n      ...getFocusRingStyle(theme, true, 1),\n      // extra shadow around\n      transition: 'box-shadow 0.3s ease-out',\n      '&, &:hover, &.Mui-active': {\n        boxShadow: `none`,\n      },\n      '&.Mui-focusVisible': {\n        // extra white border\n        boxShadow: `0 0 0 2px ${theme.palette.background.primary}`,\n        // hide focus during dragging\n        '&.Mui-active': {\n          boxShadow: 'none',\n          outline: `0px solid ${theme.palette.background.primary}`,\n          '&:before': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    }),\n    // label above thumb\n    valueLabel: ({ theme }) => ({\n      maxWidth: 'none',\n      // increase space between thumb and tooltip\n      top: '-12px',\n      // style box\n      backgroundColor: theme.palette.text.primary,\n      color: theme.palette.background.primary,\n      borderRadius: '2px',\n      padding: '8px 12px',\n      // custom font-size\n      [theme.breakpoints.up('xs')]: {\n        fontSize: '12px',\n        lineHeight: '16px',\n        fontWeight: '400',\n      },\n    }),\n  },\n};\n"],"names":["flowThumbWidth","flowThumbHeight","flowSlider","defaultProps","min","max","step","valueLabelDisplay","marks","styleOverrides","root","theme","ownerState","display","borderRadius","padding","orientation","width","height","color","palette","disabled","primary","tertiary","backgroundColor","mode","onSurface","os900","os0","borderColor","rail","opacity","os500","transform","track","border","brand","secondary","mark","thumb","getFocusRingStyle","transition","boxShadow","background","outline","valueLabel","maxWidth","top","text","breakpoints","up","fontSize","lineHeight","fontWeight"],"mappings":"4EAKO,MAAMA,EAAiB,GACjBC,EAAkB,GAElBC,EAA6C,CACxDC,aAAc,CAEZC,IAAK,EACLC,IAAK,IACLC,KAAM,EAENC,kBAAmB,OAEnBC,OAAO,GAETC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,6CACdC,QAAS,QACTC,aAAc,IAEdC,QAAS,UACsB,aAA3BH,EAAWI,YACX,CACEC,MAAO,MACPC,OAAQ,SAEV,CACEA,OAAQ,QACR,CAEN,iBAAkB,CAChB,oBAAqB,CACnBC,MAAOR,EAAMS,QAAQC,SAASC,SAEhC,qBAAsB,CACpBH,MAAOR,EAAMS,QAAQC,SAASE,UAEhC,oBAAqB,CACnBC,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,IACzG,yBAA0B,CACxBJ,gBACyB,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,MAG9F,qBAAsB,CACpBC,YAAalB,EAAMS,QAAQC,SAASE,aAK1CO,KAAM,EAAGnB,YAAO,CACdG,aAAc,MACdiB,QAAS,IACTZ,MAAOR,EAAMS,QAAQM,UAAUM,MAE/BC,UAAW,gCAGbC,MAAO,EAAGvB,YAAO,CACfG,aAAc,MACdqB,OAAQ,OACRhB,MAA8B,SAAvBR,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQgB,MAAMC,UAAY1B,EAAMS,QAAQgB,MAAMd,QAE3FW,UAAW,gCAGbK,KAAM,EAAG3B,YAAO,CACdO,OAAQ,MACRD,MAAO,MACPH,aAAc,MACdiB,QAAS,IACTP,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,IACzG,yBAA0B,CACxBJ,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,OAI7GW,MAAO,EAAG5B,QAAOC,2EACgB,aAA3BA,EAAWI,YACX,CACEC,MAAO,OACPC,OAAQ,QAEV,CACED,MAAO,OACPC,OAAQ,SACR,CACNJ,aAAc,OACdU,gBAAiBb,EAAMS,QAAQM,UAAUE,IACzCO,OAAQ,aAAaxB,EAAMS,QAAQM,UAAUC,QAE7C,UAAW,CACTV,MAAO,OACPC,OAAQ,OACRJ,aAAc,YAGb0B,EAAkB7B,GAAO,EAAM,IAAE,CAEpC8B,WAAY,2BACZ,2BAA4B,CAC1BC,UAAW,QAEb,qBAAsB,CAEpBA,UAAW,aAAa/B,EAAMS,QAAQuB,WAAWrB,UAEjD,eAAgB,CACdoB,UAAW,OACXE,QAAS,aAAajC,EAAMS,QAAQuB,WAAWrB,UAC/C,WAAY,CACVoB,UAAW,YAMnBG,WAAY,EAAGlC,YAAO,CACpBmC,SAAU,OAEVC,IAAK,QAELvB,gBAAiBb,EAAMS,QAAQ4B,KAAK1B,QACpCH,MAAOR,EAAMS,QAAQuB,WAAWrB,QAChCR,aAAc,MACdC,QAAS,WAET,CAACJ,EAAMsC,YAAYC,GAAG,OAAQ,CAC5BC,SAAU,OACVC,WAAY,OACZC,WAAY"}

package/materialui/snackbar/index.d.ts

@@ -0,0 +1,2 @@
+export { Snackbar, SnackbarContent } from '@mui/material';
+export type { SnackbarProps, SnackbarContentProps } from '@mui/material';

package/materialui/snackbar/snackbarContent.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbarContent.theme.js","sources":["../../../src/materialui/snackbar/snackbarContent.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { flowAlert } from '../alert/alert.theme';\nimport { ComponentsOverrides } from '@mui/material/styles/overrides';\n\nexport const flowSnackbarContent: Components<Theme>['MuiSnackbarContent'] = {\n  styleOverrides: {\n    root: flowAlert.styleOverrides.root,\n    message: flowAlert.styleOverrides.message,\n    action: flowAlert.styleOverrides.action,\n    // ignore missing properties of snackbar that are in the flowAlert\n  } as ComponentsOverrides<Theme>['MuiSnackbarContent'],\n};\n"],"names":["flowSnackbarContent","styleOverrides","root","flowAlert","message","action"],"mappings":"oDAKO,MAAMA,EAA+D,CAC1EC,eAAgB,CACdC,KAAMC,EAAUF,eAAeC,KAC/BE,QAASD,EAAUF,eAAeG,QAClCC,OAAQF,EAAUF,eAAeI"}
+{"version":3,"file":"snackbarContent.theme.js","sources":["../../../src/materialui/snackbar/snackbarContent.theme.ts"],"sourcesContent":["import { Components, ComponentsOverrides } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { flowAlert } from '../alert/alert.theme';\n\nexport const flowSnackbarContent: Components<Theme>['MuiSnackbarContent'] = {\n  styleOverrides: {\n    root: flowAlert.styleOverrides.root,\n    message: flowAlert.styleOverrides.message,\n    action: flowAlert.styleOverrides.action,\n    // ignore missing properties of snackbar that are in the flowAlert\n  } as ComponentsOverrides<Theme>['MuiSnackbarContent'],\n};\n"],"names":["flowSnackbarContent","styleOverrides","root","flowAlert","message","action"],"mappings":"oDAIO,MAAMA,EAA+D,CAC1EC,eAAgB,CACdC,KAAMC,EAAUF,eAAeC,KAC/BE,QAASD,EAAUF,eAAeG,QAClCC,OAAQF,EAAUF,eAAeI"}

package/materialui/stack/index.d.ts

@@ -0,0 +1,2 @@
+export { Stack } from '@mui/material';
+export type { StackProps } from '@mui/material';

package/materialui/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { Stepper, StepLabel, Step, StepButton, StepConnector, StepContent, StepIcon } from '@mui/material';
+export type { StepperProps, StepLabelProps, StepProps, StepButtonProps, StepConnectorProps, StepContentProps, StepIconProps, } from '@mui/material';

package/materialui/svgIcon/svgIcon.theme.d.ts

@@ -1,3 +1,3 @@
-import { Components } from '@mui/material/styles/components';
+import { Components } from '@mui/material/styles';
 import { Theme } from '@mui/material';
 export declare const flowSvgIcon: Components<Theme>['MuiSvgIcon'];

package/materialui/svgIcon/svgIcon.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"svgIcon.theme.js","sources":["../../../src/materialui/svgIcon/svgIcon.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles/components';\nimport { Theme } from '@mui/material';\n\nexport const flowSvgIcon: Components<Theme>['MuiSvgIcon'] = {\n  styleOverrides: {\n    root: {\n      overflow: 'visible',\n      flexShrink: '0',\n    },\n    colorAction: ({ theme }) => ({\n      color: theme.palette.onSurface.os900,\n    }),\n    colorDisabled: ({ theme }) => ({\n      color: theme.palette.disabled.primary,\n    }),\n    colorPrimary: ({ theme }) => ({\n      color: theme.palette.brand.primary,\n    }),\n    colorSecondary: ({ theme }) => ({\n      color: theme.palette.brand.secondary,\n    }),\n    colorError: ({ theme }) => ({\n      color: theme.palette.error.main,\n    }),\n  },\n  variants: [\n    {\n      // custom size\n      props: { fontSize: 'extraSmall' },\n      style: {\n        fontSize: '16px',\n      },\n    },\n    {\n      // custom size\n      props: { fontSize: 'extraLarge' },\n      style: {\n        fontSize: '40px',\n      },\n    },\n    // sizes from @mui, changed from rem to px\n    {\n      props: { fontSize: 'small' },\n      style: { fontSize: '20px' },\n    },\n    {\n      props: { fontSize: 'medium' },\n      style: { fontSize: '24px' },\n    },\n    {\n      props: { fontSize: 'large' },\n      style: { fontSize: '35px' },\n    },\n    // custom colors types\n    {\n      props: { color: 'info' },\n      style: ({ theme }) => ({\n        color: theme.palette.info['main'],\n      }),\n    },\n    {\n      props: { color: 'success' },\n      style: ({ theme }) => ({\n        color: theme.palette.success['main'],\n      }),\n    },\n    {\n      props: { color: 'warning' },\n      style: ({ theme }) => ({\n        color: theme.palette.warning['main'],\n      }),\n    },\n  ],\n};\n"],"names":["flowSvgIcon","styleOverrides","root","overflow","flexShrink","colorAction","theme","color","palette","onSurface","os900","colorDisabled","disabled","primary","colorPrimary","brand","colorSecondary","secondary","colorError","error","main","variants","props","fontSize","style","info","success","warning"],"mappings":"AAGO,MAAMA,EAA+C,CAC1DC,eAAgB,CACdC,KAAM,CACJC,SAAU,UACVC,WAAY,KAEdC,YAAa,EAAGC,YAAO,CACrBC,MAAOD,EAAME,QAAQC,UAAUC,QAEjCC,cAAe,EAAGL,YAAO,CACvBC,MAAOD,EAAME,QAAQI,SAASC,UAEhCC,aAAc,EAAGR,YAAO,CACtBC,MAAOD,EAAME,QAAQO,MAAMF,UAE7BG,eAAgB,EAAGV,YAAO,CACxBC,MAAOD,EAAME,QAAQO,MAAME,YAE7BC,WAAY,EAAGZ,YAAO,CACpBC,MAAOD,EAAME,QAAQW,MAAMC,QAG/BC,SAAU,CACR,CAEEC,MAAO,CAAEC,SAAU,cACnBC,MAAO,CACLD,SAAU,SAGd,CAEED,MAAO,CAAEC,SAAU,cACnBC,MAAO,CACLD,SAAU,SAId,CACED,MAAO,CAAEC,SAAU,SACnBC,MAAO,CAAED,SAAU,SAErB,CACED,MAAO,CAAEC,SAAU,UACnBC,MAAO,CAAED,SAAU,SAErB,CACED,MAAO,CAAEC,SAAU,SACnBC,MAAO,CAAED,SAAU,SAGrB,CACED,MAAO,CAAEf,MAAO,QAChBiB,MAAO,EAAGlB,YAAO,CACfC,MAAOD,EAAME,QAAQiB,KAAW,QAGpC,CACEH,MAAO,CAAEf,MAAO,WAChBiB,MAAO,EAAGlB,YAAO,CACfC,MAAOD,EAAME,QAAQkB,QAAc,QAGvC,CACEJ,MAAO,CAAEf,MAAO,WAChBiB,MAAO,EAAGlB,YAAO,CACfC,MAAOD,EAAME,QAAQmB,QAAc"}
+{"version":3,"file":"svgIcon.theme.js","sources":["../../../src/materialui/svgIcon/svgIcon.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\n\nexport const flowSvgIcon: Components<Theme>['MuiSvgIcon'] = {\n  styleOverrides: {\n    root: {\n      overflow: 'visible',\n      flexShrink: '0',\n    },\n    colorAction: ({ theme }) => ({\n      color: theme.palette.onSurface.os900,\n    }),\n    colorDisabled: ({ theme }) => ({\n      color: theme.palette.disabled.primary,\n    }),\n    colorPrimary: ({ theme }) => ({\n      color: theme.palette.brand.primary,\n    }),\n    colorSecondary: ({ theme }) => ({\n      color: theme.palette.brand.secondary,\n    }),\n    colorError: ({ theme }) => ({\n      color: theme.palette.error.main,\n    }),\n  },\n  variants: [\n    {\n      // custom size\n      props: { fontSize: 'extraSmall' },\n      style: {\n        fontSize: '16px',\n      },\n    },\n    {\n      // custom size\n      props: { fontSize: 'extraLarge' },\n      style: {\n        fontSize: '40px',\n      },\n    },\n    // sizes from @mui, changed from rem to px\n    {\n      props: { fontSize: 'small' },\n      style: { fontSize: '20px' },\n    },\n    {\n      props: { fontSize: 'medium' },\n      style: { fontSize: '24px' },\n    },\n    {\n      props: { fontSize: 'large' },\n      style: { fontSize: '35px' },\n    },\n    // custom colors types\n    {\n      props: { color: 'info' },\n      style: ({ theme }) => ({\n        color: theme.palette.info['main'],\n      }),\n    },\n    {\n      props: { color: 'success' },\n      style: ({ theme }) => ({\n        color: theme.palette.success['main'],\n      }),\n    },\n    {\n      props: { color: 'warning' },\n      style: ({ theme }) => ({\n        color: theme.palette.warning['main'],\n      }),\n    },\n  ],\n};\n"],"names":["flowSvgIcon","styleOverrides","root","overflow","flexShrink","colorAction","theme","color","palette","onSurface","os900","colorDisabled","disabled","primary","colorPrimary","brand","colorSecondary","secondary","colorError","error","main","variants","props","fontSize","style","info","success","warning"],"mappings":"AAGO,MAAMA,EAA+C,CAC1DC,eAAgB,CACdC,KAAM,CACJC,SAAU,UACVC,WAAY,KAEdC,YAAa,EAAGC,YAAO,CACrBC,MAAOD,EAAME,QAAQC,UAAUC,QAEjCC,cAAe,EAAGL,YAAO,CACvBC,MAAOD,EAAME,QAAQI,SAASC,UAEhCC,aAAc,EAAGR,YAAO,CACtBC,MAAOD,EAAME,QAAQO,MAAMF,UAE7BG,eAAgB,EAAGV,YAAO,CACxBC,MAAOD,EAAME,QAAQO,MAAME,YAE7BC,WAAY,EAAGZ,YAAO,CACpBC,MAAOD,EAAME,QAAQW,MAAMC,QAG/BC,SAAU,CACR,CAEEC,MAAO,CAAEC,SAAU,cACnBC,MAAO,CACLD,SAAU,SAGd,CAEED,MAAO,CAAEC,SAAU,cACnBC,MAAO,CACLD,SAAU,SAId,CACED,MAAO,CAAEC,SAAU,SACnBC,MAAO,CAAED,SAAU,SAErB,CACED,MAAO,CAAEC,SAAU,UACnBC,MAAO,CAAED,SAAU,SAErB,CACED,MAAO,CAAEC,SAAU,SACnBC,MAAO,CAAED,SAAU,SAGrB,CACED,MAAO,CAAEf,MAAO,QAChBiB,MAAO,EAAGlB,YAAO,CACfC,MAAOD,EAAME,QAAQiB,KAAW,QAGpC,CACEH,MAAO,CAAEf,MAAO,WAChBiB,MAAO,EAAGlB,YAAO,CACfC,MAAOD,EAAME,QAAQkB,QAAc,QAGvC,CACEJ,MAAO,CAAEf,MAAO,WAChBiB,MAAO,EAAGlB,YAAO,CACfC,MAAOD,EAAME,QAAQmB,QAAc"}

package/materialui/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from '@mui/material';
+export type { SwitchProps } from '@mui/material';

package/materialui/switch/switch.theme.d.ts

@@ -1,3 +1,3 @@
 import { Theme } from '@mui/material';
-import { Components } from '@mui/material/styles/components';
+import { Components } from '@mui/material/styles';
 export declare const flowSwitch: Components<Theme>['MuiSwitch'];

package/materialui/switch/switch.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.theme.js","sources":["../../../src/materialui/switch/switch.theme.ts"],"sourcesContent":["import { Theme } from '@mui/material';\nimport { Components } from '@mui/material/styles/components';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport const flowSwitch: Components<Theme>['MuiSwitch'] = {\n  defaultProps: {\n    disableRipple: true,\n    disableFocusRipple: true,\n    disableTouchRipple: true,\n  },\n  styleOverrides: {\n    root: ({ theme }) => ({\n      input: {\n        maxWidth: 'none',\n      },\n      borderRadius: '1000px',\n      '& .MuiSwitch-track': {\n        borderRadius: '1000px',\n      },\n      '.Mui-disabled': {\n        '.MuiSwitch-thumb': {\n          backgroundColor: theme.palette.disabled.tertiary,\n        },\n      },\n      position: 'relative',\n      overflow: 'visible',\n      ...getFocusRingStyle(theme, false, 0, ':has(.Mui-focusVisible)'),\n    }),\n    thumb: ({ theme }) => ({\n      boxShadow: 'none',\n      transition: '0.2s',\n      color: theme.palette.onSurface.os0,\n      borderRadius: '1000px',\n      flexShrink: '0',\n      maxWidth: 'none',\n    }),\n    track: ({ theme }) => ({\n      boxSizing: 'border-box',\n      opacity: '1',\n      backgroundColor: theme.palette.onSurface.os500,\n    }),\n    switchBase: ({ theme }) => ({\n      transition: '0.2s',\n      '&.Mui-checked': {\n        '& + .MuiSwitch-track': {\n          opacity: '1',\n          ...(theme.palette.mode === 'dark' && {\n            background: theme.palette.brand.secondary,\n          }),\n        },\n        ...(theme.palette.mode === 'dark' && {\n          '& .MuiSwitch-thumb': {\n            background: theme.palette.brand.tertiary,\n          },\n        }),\n      },\n      '&.Mui-disabled': {\n        '& + .MuiSwitch-track': {\n          backgroundColor: theme.palette.disabled.primary,\n          opacity: '1',\n        },\n      },\n    }),\n    sizeMedium: {\n      width: '52px',\n      height: '24px',\n      borderRadius: '1000px',\n      padding: '0',\n      '& .MuiSwitch-thumb': {\n        width: '18px',\n        height: '18px',\n      },\n      '& .MuiSwitch-switchBase': {\n        width: '24px',\n        padding: '3px',\n        '&.Mui-checked': {\n          transform: 'translateX(28px)',\n        },\n      },\n      '&:active:not(.Mui-disabled)': {\n        '.MuiSwitch-thumb': {\n          width: '28px',\n          transform: 'translateX(5px)',\n        },\n        '& .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb': {\n          transform: 'translateX(-5px)',\n        },\n      },\n    },\n    sizeSmall: {\n      width: '34px',\n      height: '16px',\n      borderRadius: '1000px',\n      padding: '0',\n      '& .MuiSwitch-thumb': {\n        width: '12px',\n        height: '12px',\n      },\n      '& .MuiSwitch-switchBase': {\n        width: '16px',\n        padding: '2px',\n        '&.Mui-checked': {\n          transform: 'translateX(18px)',\n        },\n      },\n      '&:active:not(.Mui-disabled)': {\n        '& .MuiSwitch-thumb': {\n          width: '18px',\n          transform: 'translateX(3px)',\n        },\n        '& .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb': {\n          transform: 'translateX(-3px)',\n        },\n      },\n    },\n  },\n};\n"],"names":["flowSwitch","defaultProps","disableRipple","disableFocusRipple","disableTouchRipple","styleOverrides","root","theme","Object","assign","input","maxWidth","borderRadius","backgroundColor","palette","disabled","tertiary","position","overflow","getFocusRingStyle","thumb","boxShadow","transition","color","onSurface","os0","flexShrink","track","boxSizing","opacity","os500","switchBase","mode","background","brand","secondary","primary","sizeMedium","width","height","padding","transform","sizeSmall"],"mappings":"4EAIO,MAAMA,EAA6C,CACxDC,aAAc,CACZC,eAAe,EACfC,oBAAoB,EACpBC,oBAAoB,GAEtBC,eAAgB,CACdC,KAAM,EAAGC,WAAYC,OAAAC,OAAA,CACnBC,MAAO,CACLC,SAAU,QAEZC,aAAc,SACd,qBAAsB,CACpBA,aAAc,UAEhB,gBAAiB,CACf,mBAAoB,CAClBC,gBAAiBN,EAAMO,QAAQC,SAASC,WAG5CC,SAAU,WACVC,SAAU,WACPC,EAAkBZ,GAAO,EAAO,EAAG,4BAExCa,MAAO,EAAGb,YAAO,CACfc,UAAW,OACXC,WAAY,OACZC,MAAOhB,EAAMO,QAAQU,UAAUC,IAC/Bb,aAAc,SACdc,WAAY,IACZf,SAAU,SAEZgB,MAAO,EAAGpB,YAAO,CACfqB,UAAW,aACXC,QAAS,IACThB,gBAAiBN,EAAMO,QAAQU,UAAUM,QAE3CC,WAAY,EAAGxB,YAAO,CACpBe,WAAY,OACZ,gBAAed,OAAAC,OAAA,CACb,uBAAsBD,OAAAC,OAAA,CACpBoB,QAAS,KACkB,SAAvBtB,EAAMO,QAAQkB,MAAmB,CACnCC,WAAY1B,EAAMO,QAAQoB,MAAMC,aAGT,SAAvB5B,EAAMO,QAAQkB,MAAmB,CACnC,qBAAsB,CACpBC,WAAY1B,EAAMO,QAAQoB,MAAMlB,YAItC,iBAAkB,CAChB,uBAAwB,CACtBH,gBAAiBN,EAAMO,QAAQC,SAASqB,QACxCP,QAAS,QAIfQ,WAAY,CACVC,MAAO,OACPC,OAAQ,OACR3B,aAAc,SACd4B,QAAS,IACT,qBAAsB,CACpBF,MAAO,OACPC,OAAQ,QAEV,0BAA2B,CACzBD,MAAO,OACPE,QAAS,MACT,gBAAiB,CACfC,UAAW,qBAGf,8BAA+B,CAC7B,mBAAoB,CAClBH,MAAO,OACPG,UAAW,mBAEb,uDAAwD,CACtDA,UAAW,sBAIjBC,UAAW,CACTJ,MAAO,OACPC,OAAQ,OACR3B,aAAc,SACd4B,QAAS,IACT,qBAAsB,CACpBF,MAAO,OACPC,OAAQ,QAEV,0BAA2B,CACzBD,MAAO,OACPE,QAAS,MACT,gBAAiB,CACfC,UAAW,qBAGf,8BAA+B,CAC7B,qBAAsB,CACpBH,MAAO,OACPG,UAAW,mBAEb,uDAAwD,CACtDA,UAAW"}
+{"version":3,"file":"switch.theme.js","sources":["../../../src/materialui/switch/switch.theme.ts"],"sourcesContent":["import { Theme } from '@mui/material';\nimport { Components } from '@mui/material/styles';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport const flowSwitch: Components<Theme>['MuiSwitch'] = {\n  defaultProps: {\n    disableRipple: true,\n    disableFocusRipple: true,\n    disableTouchRipple: true,\n  },\n  styleOverrides: {\n    root: ({ theme }) => ({\n      input: {\n        maxWidth: 'none',\n      },\n      borderRadius: '1000px',\n      '& .MuiSwitch-track': {\n        borderRadius: '1000px',\n      },\n      '.Mui-disabled': {\n        '.MuiSwitch-thumb': {\n          backgroundColor: theme.palette.disabled.tertiary,\n        },\n      },\n      position: 'relative',\n      overflow: 'visible',\n      ...getFocusRingStyle(theme, false, 0, ':has(.Mui-focusVisible)'),\n    }),\n    thumb: ({ theme }) => ({\n      boxShadow: 'none',\n      transition: '0.2s',\n      color: theme.palette.onSurface.os0,\n      borderRadius: '1000px',\n      flexShrink: '0',\n      maxWidth: 'none',\n    }),\n    track: ({ theme }) => ({\n      boxSizing: 'border-box',\n      opacity: '1',\n      backgroundColor: theme.palette.onSurface.os500,\n    }),\n    switchBase: ({ theme }) => ({\n      transition: '0.2s',\n      '&.Mui-checked': {\n        '& + .MuiSwitch-track': {\n          opacity: '1',\n          ...(theme.palette.mode === 'dark' && {\n            background: theme.palette.brand.secondary,\n          }),\n        },\n        ...(theme.palette.mode === 'dark' && {\n          '& .MuiSwitch-thumb': {\n            background: theme.palette.brand.tertiary,\n          },\n        }),\n      },\n      '&.Mui-disabled': {\n        '& + .MuiSwitch-track': {\n          backgroundColor: theme.palette.disabled.primary,\n          opacity: '1',\n        },\n      },\n    }),\n    sizeMedium: {\n      width: '52px',\n      height: '24px',\n      borderRadius: '1000px',\n      padding: '0',\n      '& .MuiSwitch-thumb': {\n        width: '18px',\n        height: '18px',\n      },\n      '& .MuiSwitch-switchBase': {\n        width: '24px',\n        padding: '3px',\n        '&.Mui-checked': {\n          transform: 'translateX(28px)',\n        },\n      },\n      '&:active:not(.Mui-disabled)': {\n        '.MuiSwitch-thumb': {\n          width: '28px',\n          transform: 'translateX(5px)',\n        },\n        '& .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb': {\n          transform: 'translateX(-5px)',\n        },\n      },\n    },\n    sizeSmall: {\n      width: '34px',\n      height: '16px',\n      borderRadius: '1000px',\n      padding: '0',\n      '& .MuiSwitch-thumb': {\n        width: '12px',\n        height: '12px',\n      },\n      '& .MuiSwitch-switchBase': {\n        width: '16px',\n        padding: '2px',\n        '&.Mui-checked': {\n          transform: 'translateX(18px)',\n        },\n      },\n      '&:active:not(.Mui-disabled)': {\n        '& .MuiSwitch-thumb': {\n          width: '18px',\n          transform: 'translateX(3px)',\n        },\n        '& .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb': {\n          transform: 'translateX(-3px)',\n        },\n      },\n    },\n  },\n};\n"],"names":["flowSwitch","defaultProps","disableRipple","disableFocusRipple","disableTouchRipple","styleOverrides","root","theme","Object","assign","input","maxWidth","borderRadius","backgroundColor","palette","disabled","tertiary","position","overflow","getFocusRingStyle","thumb","boxShadow","transition","color","onSurface","os0","flexShrink","track","boxSizing","opacity","os500","switchBase","mode","background","brand","secondary","primary","sizeMedium","width","height","padding","transform","sizeSmall"],"mappings":"4EAIO,MAAMA,EAA6C,CACxDC,aAAc,CACZC,eAAe,EACfC,oBAAoB,EACpBC,oBAAoB,GAEtBC,eAAgB,CACdC,KAAM,EAAGC,WAAYC,OAAAC,OAAA,CACnBC,MAAO,CACLC,SAAU,QAEZC,aAAc,SACd,qBAAsB,CACpBA,aAAc,UAEhB,gBAAiB,CACf,mBAAoB,CAClBC,gBAAiBN,EAAMO,QAAQC,SAASC,WAG5CC,SAAU,WACVC,SAAU,WACPC,EAAkBZ,GAAO,EAAO,EAAG,4BAExCa,MAAO,EAAGb,YAAO,CACfc,UAAW,OACXC,WAAY,OACZC,MAAOhB,EAAMO,QAAQU,UAAUC,IAC/Bb,aAAc,SACdc,WAAY,IACZf,SAAU,SAEZgB,MAAO,EAAGpB,YAAO,CACfqB,UAAW,aACXC,QAAS,IACThB,gBAAiBN,EAAMO,QAAQU,UAAUM,QAE3CC,WAAY,EAAGxB,YAAO,CACpBe,WAAY,OACZ,gBAAed,OAAAC,OAAA,CACb,uBAAsBD,OAAAC,OAAA,CACpBoB,QAAS,KACkB,SAAvBtB,EAAMO,QAAQkB,MAAmB,CACnCC,WAAY1B,EAAMO,QAAQoB,MAAMC,aAGT,SAAvB5B,EAAMO,QAAQkB,MAAmB,CACnC,qBAAsB,CACpBC,WAAY1B,EAAMO,QAAQoB,MAAMlB,YAItC,iBAAkB,CAChB,uBAAwB,CACtBH,gBAAiBN,EAAMO,QAAQC,SAASqB,QACxCP,QAAS,QAIfQ,WAAY,CACVC,MAAO,OACPC,OAAQ,OACR3B,aAAc,SACd4B,QAAS,IACT,qBAAsB,CACpBF,MAAO,OACPC,OAAQ,QAEV,0BAA2B,CACzBD,MAAO,OACPE,QAAS,MACT,gBAAiB,CACfC,UAAW,qBAGf,8BAA+B,CAC7B,mBAAoB,CAClBH,MAAO,OACPG,UAAW,mBAEb,uDAAwD,CACtDA,UAAW,sBAIjBC,UAAW,CACTJ,MAAO,OACPC,OAAQ,OACR3B,aAAc,SACd4B,QAAS,IACT,qBAAsB,CACpBF,MAAO,OACPC,OAAQ,QAEV,0BAA2B,CACzBD,MAAO,OACPE,QAAS,MACT,gBAAiB,CACfC,UAAW,qBAGf,8BAA+B,CAC7B,qBAAsB,CACpBH,MAAO,OACPG,UAAW,mBAEb,uDAAwD,CACtDA,UAAW"}

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:n,slots:l,slotProps:m,ownerState:c}=i,a=o(i,["direction","slots","slotProps","ownerState"]);return t(r,Object.assign({"aria-label":"left"===n?"Scroll left":"Scroll right",size:"small",sx:{m:"4px"}},a,{children:t("left"===n?e:s,{})}))};export{i as TabsScrollButton};
+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};
 //# 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      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","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,eACnDU,KAAK,QACLC,GAAI,CAAEC,EAAG,QACLR,YAEoBE,EAAT,SAAdN,EAAwBa,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","_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"}

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 o}from"../button/interactive.js";const r={defaultProps:{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)),o({backgroundColor:"transparent",color:e.palette.onSurface.os500},{backgroundColor:e.palette.surface.primary,color:e.palette.text.primary})),{"&.Mui-selected":Object.assign({},o({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{r 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";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};
 //# 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    // 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","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","template","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';\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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"}

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 r,useRef as e,useImperativeHandle as l,useState as t}from"react";import{Box as u}from"@mui/material";const i=r((r,i)=>{var{onFocus:c,onBlur:a,onPointerDown:s,className:m}=r,d=o(r,["onFocus","onBlur","onPointerDown","className"]);const v=e(null);l(i,()=>v.current);const w=e(null),[D,P]=t(!1);return n(u,Object.assign({ref:v,onPointerDown:o=>{w.current="onPointerDown",null==s||s(o)},onFocus:o=>{"onPointerDown"!==w.current&&P(!0),w.current="onFocus",null==c||c(o)},onBlur:o=>{var n,r,e,l;"onPointerDown"===w.current||(null===(r=null===(n=null==v?void 0:v.current)||void 0===n?void 0:n.matches)||void 0===r?void 0:r.call(n,':has(.MuiSelect-select[aria-expanded="true"])'))||(null===(l=null===(e=null==o?void 0:o.relatedTarget)||void 0===e?void 0:e.matches)||void 0===l?void 0:l.call(e,".MuiSelect-select"))?w.current="onPointerDown":(P(!1),w.current="onBlur"),null==a||a(o)},className:[m,D?"":"Flow-NoFocusRing"].filter(Boolean).join(" ")},d))});export{i as FormControl};
+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};
 //# 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 (previousEvent.current !== 'onPointerDown') {\n            // if not clicked, 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          ) {\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","_b","matches","call","_d","_c","relatedTarget","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,IACsB,kBAA1BR,EAAcD,SAEhBG,GAAgB,GAElBF,EAAcD,QAAU,UACxBT,SAAAA,EAAUkB,IAEZjB,OAASiB,gBAIqB,kBAA1BR,EAAcD,UAEQ,QAArBU,EAAY,QAAZrB,EAAAQ,aAAG,EAAHA,EAAKG,eAAO,IAAAX,OAAA,EAAAA,EAAEsB,eAAO,IAAAD,OAAA,EAAAA,EAAAE,KAAAvB,EAAG,oDAEC,QAAzBwB,UAAAC,EAAAL,aAAC,EAADA,EAAGM,oCAAeJ,eAAO,IAAAE,OAAA,EAAAA,EAAAD,KAAAE,EAAG,sBAO7Bb,EAAcD,QAAU,iBAJxBG,GAAgB,GAChBF,EAAcD,QAAU,UAK1BR,SAAAA,EAASiB,IAEXf,UAAW,CACTA,EAEAQ,EAAe,GAAK,oBAEnBc,OAAOC,SACPC,KAAK,MACJvB"}
+{"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"}

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 i,useState as n}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);i(p,()=>O.current);const[,S]=n(0),{isScrollable:y,elementRef:F}=m("x",e=>S((null==e?void 0:e.offsetWidth)||0)),N=(null==h?void 0:h.includes("Mui-error"))&&!1!==w&&(y||!!(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",ref:F,children:v})]}))}),N?"long-error-message":"disabled-tooltip")});export{p as FormHelperText};
+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};
 //# 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            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,OACVnC,IAAKO,EAAUb,SAEdA,UAtDAiB,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 { 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"}

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{__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};
 //# sourceMappingURL=HelperTextContent.js.map