@zidsa/zidmui 2.5.14 → 2.5.16

package/dist/react/cjs/components/app-accordion.js

@@ -42,6 +42,7 @@ const AppAccordion = ({
       disabled: disable,
       slotProps: { transition: { unmountOnExit } },
       "data-rounded-corners": roundedCorners,
+      "data-color": color,
       color,
       ...expandedProp,
       ...accordionProps,

package/dist/react/cjs/components/app-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-accordion.js","sources":["../../../../src/components/app-accordion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\nimport { IconArrowDownSLine } from '../icons/arrows/arrow-down-s-line';\n\nimport {\n  Accordion,\n  type AccordionProps,\n  AccordionDetails,\n  AccordionSummary,\n  type AccordionSummaryProps,\n  type Theme,\n  SxProps,\n  Box,\n} from '@mui/material';\nimport { StackRow, type StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\nimport ZidLogoSpinner from '../logos/zid/zid-logo-spinner.svg';\n\n//\n//\n\nexport type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppAccordionRoundedCorners = 'grouped' | 'all';\n\nexport type AppAccordionProps = {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;\n  color?: AppAccordionColor;\n  disable?: boolean;\n\n  roundedCorners?: AppAccordionRoundedCorners;\n\n  accordionProps?: Partial<AccordionProps>;\n  accordionSummaryProps?: Partial<AccordionSummaryProps>;\n\n  unmountOnExit?: boolean;\n\n  title?: string | React.ReactNode;\n  titleProps?: AppTypographyProps;\n  titlePrefix?: React.ReactNode;\n  titleSuffix?: React.ReactNode;\n\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n\n  isSummaryLoading?: boolean;\n  summaryLoader?: React.ReactNode;\n  summaryLoaderProps?: StackRowProps;\n\n  isDetailsLoading?: boolean;\n  detailsLoader?: React.ReactNode;\n  detailsLoaderProps?: StackRowProps;\n\n  sx?: SxProps<Theme>;\n};\n\nexport const AppAccordion: React.FC<AppAccordionProps> = ({\n  isOpen,\n  color,\n  onToggle,\n  accordionProps,\n  title,\n  description,\n  descriptionProps,\n  accordionSummaryProps,\n  titleProps,\n  titleSuffix,\n  titlePrefix,\n  children,\n  unmountOnExit = true,\n  isSummaryLoading,\n  summaryLoader,\n  summaryLoaderProps,\n  isDetailsLoading,\n  detailsLoader,\n  detailsLoaderProps,\n  disable,\n  roundedCorners = 'all',\n}) => {\n  // Determine if controlled or uncontrolled mode\n  const expandedProp = isOpen !== undefined ? { expanded: isOpen } : {};\n\n  // Default loader component\n  const defaultSummaryLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 24 }} />;\n  const defaultDetailsLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 56 }} />;\n\n  // Determine which loader to show\n  const summaryLoaderContent = isSummaryLoading\n    ? summaryLoader === undefined\n      ? defaultSummaryLoader\n      : summaryLoader\n    : null;\n\n  const detailsLoaderContent = isDetailsLoading\n    ? detailsLoader === undefined\n      ? defaultDetailsLoader\n      : detailsLoader\n    : null;\n\n  return (\n    <Accordion\n      onChange={onToggle}\n      disabled={disable}\n      slotProps={{ transition: { unmountOnExit } }}\n      data-rounded-corners={roundedCorners}\n      color={color}\n      {...expandedProp}\n      {...accordionProps}\n    >\n      {/* Summary */}\n      <AccordionSummary\n        expandIcon={summaryLoaderContent ? undefined : <IconArrowDownSLine />}\n        {...accordionSummaryProps}\n      >\n        <StackRow alignItems=\"center\" gap={1} width=\"100%\">\n          {titlePrefix}\n\n          <StackColumn gap={0.25} width=\"100%\">\n            {typeof title === 'string' ? (\n              <AppTypography\n                variant=\"subtitle1\"\n                color={disable ? 'text.tertiary' : 'text.primary'}\n                gap={1}\n                {...titleProps}\n              >\n                {title} {titleSuffix ? titleSuffix : null}\n              </AppTypography>\n            ) : (\n              title\n            )}\n\n            {description && (\n              <AppTypography\n                variant=\"body2\"\n                color={disable ? 'text.disabled' : 'text.tertiary'}\n                whiteSpace=\"pre-line\"\n                {...descriptionProps}\n              >\n                {description}\n              </AppTypography>\n            )}\n          </StackColumn>\n\n          {summaryLoaderContent && (\n            <StackRow alignItems=\"center\" justifyContent=\"center\" {...summaryLoaderProps}>\n              {summaryLoaderContent}\n            </StackRow>\n          )}\n        </StackRow>\n      </AccordionSummary>\n\n      {/* Details */}\n      <AccordionDetails>\n        {detailsLoaderContent ? (\n          <StackRow alignItems=\"center\" justifyContent=\"center\" {...detailsLoaderProps}>\n            {detailsLoaderContent}\n          </StackRow>\n        ) : (\n          children\n        )}\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n"],"names":["jsx","Box","ZidLogoSpinner","jsxs","Accordion","AccordionSummary","IconArrowDownSLine","StackRow","StackColumn","AppTypography","AccordionDetails"],"mappings":";;;;;;;;;AA4DO,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AAEJ,QAAM,eAAe,WAAW,SAAY,EAAE,UAAU,OAAA,IAAW,CAAA;AAGnE,QAAM,uBAAuBA,2BAAAA,IAACC,cAAA,EAAI,WAAU,OAAM,KAAKC,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAC1F,QAAM,uBAAuBF,2BAAAA,IAACC,cAAA,EAAI,WAAU,OAAM,KAAKC,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAG1F,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,EAAE,YAAY,EAAE,gBAAc;AAAA,MACzC,wBAAsB;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAGJ,UAAA;AAAA,QAAAJ,2BAAAA;AAAAA,UAACK,SAAAA;AAAAA,UAAA;AAAA,YACC,YAAY,uBAAuB,SAAYL,2BAAAA,IAACM,eAAAA,oBAAA,CAAA,CAAmB;AAAA,YAClE,GAAG;AAAA,YAEJ,0CAACC,mBAAA,EAAS,YAAW,UAAS,KAAK,GAAG,OAAM,QACzC,UAAA;AAAA,cAAA;AAAA,cAEDJ,2BAAAA,KAACK,YAAAA,aAAA,EAAY,KAAK,MAAM,OAAM,QAC3B,UAAA;AAAA,gBAAA,OAAO,UAAU,WAChBL,2BAAAA;AAAAA,kBAACM,cAAAA;AAAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,KAAK;AAAA,oBACJ,GAAG;AAAA,oBAEH,UAAA;AAAA,sBAAA;AAAA,sBAAM;AAAA,sBAAE,cAAc,cAAc;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA,IAGvC;AAAA,gBAGD,eACCT,2BAAAA;AAAAA,kBAACS,cAAAA;AAAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,YAAW;AAAA,oBACV,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GAEJ;AAAA,cAEC,uDACEF,mBAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAIFP,2BAAAA,IAACU,SAAAA,kBAAA,EACE,UAAA,uBACCV,2BAAAA,IAACO,SAAAA,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH,IAEA,SAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"app-accordion.js","sources":["../../../../src/components/app-accordion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\nimport { IconArrowDownSLine } from '../icons/arrows/arrow-down-s-line';\n\nimport {\n  Accordion,\n  type AccordionProps,\n  AccordionDetails,\n  AccordionSummary,\n  type AccordionSummaryProps,\n  type Theme,\n  SxProps,\n  Box,\n} from '@mui/material';\nimport { StackRow, type StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\nimport ZidLogoSpinner from '../logos/zid/zid-logo-spinner.svg';\n\n//\n//\n\nexport type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppAccordionRoundedCorners = 'grouped' | 'all';\n\nexport type AppAccordionProps = {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;\n  color?: AppAccordionColor;\n  disable?: boolean;\n\n  roundedCorners?: AppAccordionRoundedCorners;\n\n  accordionProps?: Partial<AccordionProps>;\n  accordionSummaryProps?: Partial<AccordionSummaryProps>;\n\n  unmountOnExit?: boolean;\n\n  title?: string | React.ReactNode;\n  titleProps?: AppTypographyProps;\n  titlePrefix?: React.ReactNode;\n  titleSuffix?: React.ReactNode;\n\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n\n  isSummaryLoading?: boolean;\n  summaryLoader?: React.ReactNode;\n  summaryLoaderProps?: StackRowProps;\n\n  isDetailsLoading?: boolean;\n  detailsLoader?: React.ReactNode;\n  detailsLoaderProps?: StackRowProps;\n\n  sx?: SxProps<Theme>;\n};\n\nexport const AppAccordion: React.FC<AppAccordionProps> = ({\n  isOpen,\n  color,\n  onToggle,\n  accordionProps,\n  title,\n  description,\n  descriptionProps,\n  accordionSummaryProps,\n  titleProps,\n  titleSuffix,\n  titlePrefix,\n  children,\n  unmountOnExit = true,\n  isSummaryLoading,\n  summaryLoader,\n  summaryLoaderProps,\n  isDetailsLoading,\n  detailsLoader,\n  detailsLoaderProps,\n  disable,\n  roundedCorners = 'all',\n}) => {\n  // Determine if controlled or uncontrolled mode\n  const expandedProp = isOpen !== undefined ? { expanded: isOpen } : {};\n\n  // Default loader component\n  const defaultSummaryLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 24 }} />;\n  const defaultDetailsLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 56 }} />;\n\n  // Determine which loader to show\n  const summaryLoaderContent = isSummaryLoading\n    ? summaryLoader === undefined\n      ? defaultSummaryLoader\n      : summaryLoader\n    : null;\n\n  const detailsLoaderContent = isDetailsLoading\n    ? detailsLoader === undefined\n      ? defaultDetailsLoader\n      : detailsLoader\n    : null;\n\n  return (\n    <Accordion\n      onChange={onToggle}\n      disabled={disable}\n      slotProps={{ transition: { unmountOnExit } }}\n      data-rounded-corners={roundedCorners}\n      data-color={color}\n      color={color}\n      {...expandedProp}\n      {...accordionProps}\n    >\n      {/* Summary */}\n      <AccordionSummary\n        expandIcon={summaryLoaderContent ? undefined : <IconArrowDownSLine />}\n        {...accordionSummaryProps}\n      >\n        <StackRow alignItems=\"center\" gap={1} width=\"100%\">\n          {titlePrefix}\n\n          <StackColumn gap={0.25} width=\"100%\">\n            {typeof title === 'string' ? (\n              <AppTypography\n                variant=\"subtitle1\"\n                color={disable ? 'text.tertiary' : 'text.primary'}\n                gap={1}\n                {...titleProps}\n              >\n                {title} {titleSuffix ? titleSuffix : null}\n              </AppTypography>\n            ) : (\n              title\n            )}\n\n            {description && (\n              <AppTypography\n                variant=\"body2\"\n                color={disable ? 'text.disabled' : 'text.tertiary'}\n                whiteSpace=\"pre-line\"\n                {...descriptionProps}\n              >\n                {description}\n              </AppTypography>\n            )}\n          </StackColumn>\n\n          {summaryLoaderContent && (\n            <StackRow alignItems=\"center\" justifyContent=\"center\" {...summaryLoaderProps}>\n              {summaryLoaderContent}\n            </StackRow>\n          )}\n        </StackRow>\n      </AccordionSummary>\n\n      {/* Details */}\n      <AccordionDetails>\n        {detailsLoaderContent ? (\n          <StackRow alignItems=\"center\" justifyContent=\"center\" {...detailsLoaderProps}>\n            {detailsLoaderContent}\n          </StackRow>\n        ) : (\n          children\n        )}\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n"],"names":["jsx","Box","ZidLogoSpinner","jsxs","Accordion","AccordionSummary","IconArrowDownSLine","StackRow","StackColumn","AppTypography","AccordionDetails"],"mappings":";;;;;;;;;AA4DO,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AAEJ,QAAM,eAAe,WAAW,SAAY,EAAE,UAAU,OAAA,IAAW,CAAA;AAGnE,QAAM,uBAAuBA,2BAAAA,IAACC,cAAA,EAAI,WAAU,OAAM,KAAKC,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAC1F,QAAM,uBAAuBF,2BAAAA,IAACC,cAAA,EAAI,WAAU,OAAM,KAAKC,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAG1F,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,EAAE,YAAY,EAAE,gBAAc;AAAA,MACzC,wBAAsB;AAAA,MACtB,cAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAGJ,UAAA;AAAA,QAAAJ,2BAAAA;AAAAA,UAACK,SAAAA;AAAAA,UAAA;AAAA,YACC,YAAY,uBAAuB,SAAYL,2BAAAA,IAACM,eAAAA,oBAAA,CAAA,CAAmB;AAAA,YAClE,GAAG;AAAA,YAEJ,0CAACC,mBAAA,EAAS,YAAW,UAAS,KAAK,GAAG,OAAM,QACzC,UAAA;AAAA,cAAA;AAAA,cAEDJ,2BAAAA,KAACK,YAAAA,aAAA,EAAY,KAAK,MAAM,OAAM,QAC3B,UAAA;AAAA,gBAAA,OAAO,UAAU,WAChBL,2BAAAA;AAAAA,kBAACM,cAAAA;AAAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,KAAK;AAAA,oBACJ,GAAG;AAAA,oBAEH,UAAA;AAAA,sBAAA;AAAA,sBAAM;AAAA,sBAAE,cAAc,cAAc;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA,IAGvC;AAAA,gBAGD,eACCT,2BAAAA;AAAAA,kBAACS,cAAAA;AAAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,YAAW;AAAA,oBACV,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GAEJ;AAAA,cAEC,uDACEF,mBAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAIFP,2BAAAA,IAACU,SAAAA,kBAAA,EACE,UAAA,uBACCV,2BAAAA,IAACO,SAAAA,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH,IAEA,SAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/react/cjs/components/app-icon-box.js

@@ -5,18 +5,42 @@ const material = require("@mui/material");
 const AppIconBox = ({
   children,
   background = "default",
+  size = "large",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { "data-background-color": background, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { "data-background-color": background, "data-size": size, ...props, children });
 };
 const IconWrapper = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  padding: theme.spacing(1.5),
   borderRadius: theme.spacing(1.5),
   backgroundColor: theme.palette.action.selected,
   flexShrink: 0,
+  // Size variants
+  "&[data-size='large']": {
+    width: 48,
+    height: 48
+  },
+  "&[data-size='medium']": {
+    width: 40,
+    height: 40,
+    "& svg": {
+      fontSize: 20,
+      width: 20,
+      height: 20
+    }
+  },
+  "&[data-size='small']": {
+    width: 24,
+    height: 24,
+    borderRadius: theme.spacing(0.5),
+    "& svg": {
+      fontSize: 16,
+      width: 16,
+      height: 16
+    }
+  },
   "&[data-background-color='default']": {
     backgroundColor: theme.palette.action.hover
   },

package/dist/react/cjs/components/app-icon-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-icon-box.js","sources":["../../../../src/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n  | 'default'\n  | 'primary'\n  | 'blue'\n  | 'red'\n  | 'green'\n  | 'yellow'\n  | 'orange'\n  | 'secondary';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n  children: React.ReactNode;\n  background?: AppIconBoxbackgroundColor;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n  children,\n  background = 'default',\n  ...props\n}) => {\n  return (\n    <IconWrapper data-background-color={background} {...props}>\n      {children}\n    </IconWrapper>\n  );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(1.5),\n  borderRadius: theme.spacing(1.5),\n  backgroundColor: theme.palette.action.selected,\n  flexShrink: 0,\n\n  \"&[data-background-color='default']\": {\n    backgroundColor: theme.palette.action.hover,\n  },\n  \"&[data-background-color='primary']\": {\n    backgroundColor: theme.palette.colors.primary[100],\n  },\n  \"&[data-background-color='blue']\": {\n    backgroundColor: theme.palette.colors.blue[100],\n  },\n  \"&[data-background-color='red']\": {\n    backgroundColor: theme.palette.colors.red[100],\n  },\n  \"&[data-background-color='green']\": {\n    backgroundColor: theme.palette.colors.green[100],\n  },\n  \"&[data-background-color='yellow']\": {\n    backgroundColor: theme.palette.colors.yellow[100],\n  },\n  \"&[data-background-color='orange']\": {\n    backgroundColor: theme.palette.colors.orange[100],\n  },\n  \"&[data-background-color='secondary']\": {\n    backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n  },\n\n  ...theme.applyStyles('dark', {\n    \"&[data-background-color='default']\": {\n      backgroundColor: theme.palette.action.hover,\n    },\n    \"&[data-background-color='primary']\": {\n      backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n    },\n    \"&[data-background-color='blue']\": {\n      backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n    },\n    \"&[data-background-color='red']\": {\n      backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n    },\n    \"&[data-background-color='green']\": {\n      backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n    },\n    \"&[data-background-color='yellow']\": {\n      backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n    },\n    \"&[data-background-color='orange']\": {\n      backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n    },\n    \"&[data-background-color='secondary']\": {\n      backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n    },\n  }),\n}));\n"],"names":["styled","Box","alpha"],"mappings":";;;;AAoBO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,wCACG,aAAA,EAAY,yBAAuB,YAAa,GAAG,OACjD,UACH;AAEJ;AAIA,MAAM,cAAcA,SAAAA,OAAOC,SAAAA,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS,MAAM,QAAQ,GAAG;AAAA,EAC1B,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EACtC,YAAY;AAAA,EAEZ,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EAAA;AAAA,EAExC,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA;AAAA,EAEnD,mCAAmC;AAAA,IACjC,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhD,kCAAkC;AAAA,IAChC,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/C,oCAAoC;AAAA,IAClC,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAEjD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,wCAAwC;AAAA,IACtC,iBAAiBC,SAAAA,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,EAAA;AAAA,EAG3D,GAAG,MAAM,YAAY,QAAQ;AAAA,IAC3B,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAExC,sCAAsC;AAAA,MACpC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE/D,mCAAmC;AAAA,MACjC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE5D,kCAAkC;AAAA,MAChC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE3D,oCAAoC;AAAA,MAClC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE7D,qCAAqC;AAAA,MACnC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,qCAAqC;AAAA,MACnC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,wCAAwC;AAAA,MACtC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,IAAA;AAAA,EAC3D,CACD;AACH,EAAE;;"}
+{"version":3,"file":"app-icon-box.js","sources":["../../../../src/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n  | 'default'\n  | 'primary'\n  | 'blue'\n  | 'red'\n  | 'green'\n  | 'yellow'\n  | 'orange'\n  | 'secondary';\n\nexport type AppIconBoxSize = 'small' | 'medium' | 'large';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n  children: React.ReactNode;\n  background?: AppIconBoxbackgroundColor;\n  size?: AppIconBoxSize;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n  children,\n  background = 'default',\n  size = 'large',\n  ...props\n}) => {\n  return (\n    <IconWrapper data-background-color={background} data-size={size} {...props}>\n      {children}\n    </IconWrapper>\n  );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.spacing(1.5),\n  backgroundColor: theme.palette.action.selected,\n  flexShrink: 0,\n\n  // Size variants\n  \"&[data-size='large']\": {\n    width: 48,\n    height: 48,\n  },\n  \"&[data-size='medium']\": {\n    width: 40,\n    height: 40,\n    '& svg': {\n      fontSize: 20,\n      width: 20,\n      height: 20,\n    },\n  },\n  \"&[data-size='small']\": {\n    width: 24,\n    height: 24,\n    borderRadius: theme.spacing(0.5),\n    '& svg': {\n      fontSize: 16,\n      width: 16,\n      height: 16,\n    },\n  },\n\n  \"&[data-background-color='default']\": {\n    backgroundColor: theme.palette.action.hover,\n  },\n  \"&[data-background-color='primary']\": {\n    backgroundColor: theme.palette.colors.primary[100],\n  },\n  \"&[data-background-color='blue']\": {\n    backgroundColor: theme.palette.colors.blue[100],\n  },\n  \"&[data-background-color='red']\": {\n    backgroundColor: theme.palette.colors.red[100],\n  },\n  \"&[data-background-color='green']\": {\n    backgroundColor: theme.palette.colors.green[100],\n  },\n  \"&[data-background-color='yellow']\": {\n    backgroundColor: theme.palette.colors.yellow[100],\n  },\n  \"&[data-background-color='orange']\": {\n    backgroundColor: theme.palette.colors.orange[100],\n  },\n  \"&[data-background-color='secondary']\": {\n    backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n  },\n\n  ...theme.applyStyles('dark', {\n    \"&[data-background-color='default']\": {\n      backgroundColor: theme.palette.action.hover,\n    },\n    \"&[data-background-color='primary']\": {\n      backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n    },\n    \"&[data-background-color='blue']\": {\n      backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n    },\n    \"&[data-background-color='red']\": {\n      backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n    },\n    \"&[data-background-color='green']\": {\n      backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n    },\n    \"&[data-background-color='yellow']\": {\n      backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n    },\n    \"&[data-background-color='orange']\": {\n      backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n    },\n    \"&[data-background-color='secondary']\": {\n      backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n    },\n  }),\n}));\n"],"names":["jsx","styled","Box","alpha"],"mappings":"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"}

package/dist/react/cjs/theme/components/accordion.js

@@ -95,7 +95,7 @@ const MuiAccordionSummary = {
 };
 const MuiAccordionDetails = {
   styleOverrides: {
-    root: ({ theme, ownerState }) => ({
+    root: ({ theme }) => ({
       display: "flex",
       flexDirection: "column",
       gap: theme.spacing(1.5),
@@ -105,11 +105,12 @@ const MuiAccordionDetails = {
       marginBottom: theme.spacing(0.5),
       borderBottomLeftRadius: theme.spacing(1.5),
       borderBottomRightRadius: theme.spacing(1.5),
-      ...ownerState.color && {
+      ".MuiAccordion-root[data-color] &": {
         borderRadius: theme.spacing(1.5),
         marginTop: "-2px"
       },
-      ...!ownerState.color && {
+      // When parent Accordion has no color
+      ".MuiAccordion-root:not([data-color]) &": {
         borderTop: `1px solid ${theme.palette.divider}`,
         marginTop: 0
       },

package/dist/react/cjs/theme/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../../../src/theme/components/accordion.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiAccordion: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordion'] = {\n  defaultProps: {\n    disableGutters: true,\n    elevation: 0,\n  },\n  styleOverrides: {\n    root: ({ theme }) => ({\n      border: `1px solid ${theme.palette.divider}`,\n      backgroundColor: theme.palette.background.paper,\n      overflow: 'hidden',\n      '&.Mui-disabled': {\n        backgroundColor: theme.palette.action.disabledBackground,\n      },\n      ':first-of-type': {\n        borderTopLeftRadius: theme.spacing(2),\n        borderTopRightRadius: theme.spacing(2),\n      },\n      ':last-of-type': {\n        borderBottomLeftRadius: theme.spacing(2),\n        borderBottomRightRadius: theme.spacing(2),\n      },\n      '&[data-rounded-corners=\"all\"]': {\n        borderRadius: theme.spacing(2),\n      },\n    }),\n  },\n  variants: [\n    {\n      props: { color: 'primary' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.primary.background,\n          borderColor: theme.palette._components.accordion.primary.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'success' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.success.background,\n          borderColor: theme.palette._components.accordion.success.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'error' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.error.background,\n          borderColor: theme.palette._components.accordion.error.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'warning' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.warning.background,\n          borderColor: theme.palette._components.accordion.warning.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'info' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.info.background,\n          borderColor: theme.palette._components.accordion.info.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'neutral' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.neutral.background,\n          borderColor: theme.palette._components.accordion.neutral.border,\n        },\n      }),\n    },\n  ],\n};\n\nexport const MuiAccordionSummary: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionSummary'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      marginInline: theme.spacing(0.5),\n    }),\n    content: ({ theme }) => ({\n      marginBlock: theme.spacing(2),\n    }),\n  },\n};\n\nexport const MuiAccordionDetails: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionDetails'] = {\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: theme.spacing(1.5),\n      background: theme.palette.background.paper,\n      padding: theme.spacing(2),\n      marginInline: theme.spacing(0.5),\n      marginBottom: theme.spacing(0.5),\n      borderBottomLeftRadius: theme.spacing(1.5),\n      borderBottomRightRadius: theme.spacing(1.5),\n      ...(ownerState.color && {\n        borderRadius: theme.spacing(1.5),\n        marginTop: '-2px',\n      }),\n      ...(!ownerState.color && {\n        borderTop: `1px solid ${theme.palette.divider}`,\n        marginTop: 0,\n      }),\n      '.Mui-disabled &': {\n        opacity: 0.5,\n      },\n    }),\n  },\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"accordion.js","sources":["../../../../../src/theme/components/accordion.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiAccordion: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordion'] = {\n  defaultProps: {\n    disableGutters: true,\n    elevation: 0,\n  },\n  styleOverrides: {\n    root: ({ theme }) => ({\n      border: `1px solid ${theme.palette.divider}`,\n      backgroundColor: theme.palette.background.paper,\n      overflow: 'hidden',\n      '&.Mui-disabled': {\n        backgroundColor: theme.palette.action.disabledBackground,\n      },\n      ':first-of-type': {\n        borderTopLeftRadius: theme.spacing(2),\n        borderTopRightRadius: theme.spacing(2),\n      },\n      ':last-of-type': {\n        borderBottomLeftRadius: theme.spacing(2),\n        borderBottomRightRadius: theme.spacing(2),\n      },\n      '&[data-rounded-corners=\"all\"]': {\n        borderRadius: theme.spacing(2),\n      },\n    }),\n  },\n  variants: [\n    {\n      props: { color: 'primary' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.primary.background,\n          borderColor: theme.palette._components.accordion.primary.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'success' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.success.background,\n          borderColor: theme.palette._components.accordion.success.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'error' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.error.background,\n          borderColor: theme.palette._components.accordion.error.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'warning' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.warning.background,\n          borderColor: theme.palette._components.accordion.warning.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'info' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.info.background,\n          borderColor: theme.palette._components.accordion.info.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'neutral' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.neutral.background,\n          borderColor: theme.palette._components.accordion.neutral.border,\n        },\n      }),\n    },\n  ],\n};\n\nexport const MuiAccordionSummary: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionSummary'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      marginInline: theme.spacing(0.5),\n    }),\n    content: ({ theme }) => ({\n      marginBlock: theme.spacing(2),\n    }),\n  },\n};\n\nexport const MuiAccordionDetails: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionDetails'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: theme.spacing(1.5),\n      background: theme.palette.background.paper,\n      padding: theme.spacing(2),\n      marginInline: theme.spacing(0.5),\n      marginBottom: theme.spacing(0.5),\n      borderBottomLeftRadius: theme.spacing(1.5),\n      borderBottomRightRadius: theme.spacing(1.5),\n      '.MuiAccordion-root[data-color] &': {\n        borderRadius: theme.spacing(1.5),\n        marginTop: '-2px',\n      },\n      // When parent Accordion has no color\n      '.MuiAccordion-root:not([data-color]) &': {\n        borderTop: `1px solid ${theme.palette.divider}`,\n        marginTop: 0,\n      },\n      '.Mui-disabled &': {\n        opacity: 0.5,\n      },\n    }),\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/react/cjs/theme/components/svg-icon.js

@@ -6,7 +6,15 @@ const MuiSvgIcon = {
       transition: theme.transitions.create("color", {
         easing: theme.transitions.easing.easeInOut,
         duration: theme.transitions.duration.standard
-      })
+      }),
+      variants: [
+        {
+          props: { fontSize: "extraSmall" },
+          style: {
+            fontSize: theme.spacing(2)
+          }
+        }
+      ]
     })
   }
 };

package/dist/react/cjs/theme/components/svg-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg-icon.js","sources":["../../../../../src/theme/components/svg-icon.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiSvgIcon: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiSvgIcon'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      transition: theme.transitions.create('color', {\n        easing: theme.transitions.easing.easeInOut,\n        duration: theme.transitions.duration.standard,\n      }),\n    }),\n  },\n};\n"],"names":[],"mappings":";;AAKO,MAAM,aAEK;AAAA,EAChB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,QAC5C,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU,MAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH;AAEJ;;"}
+{"version":3,"file":"svg-icon.js","sources":["../../../../../src/theme/components/svg-icon.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiSvgIcon: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiSvgIcon'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      transition: theme.transitions.create('color', {\n        easing: theme.transitions.easing.easeInOut,\n        duration: theme.transitions.duration.standard,\n      }),\n      variants: [\n        {\n          props: { fontSize: 'extraSmall' },\n          style: {\n            fontSize: theme.spacing(2),\n          },\n        },\n      ],\n    }),\n  },\n};\n"],"names":[],"mappings":";;AAKO,MAAM,aAEK;AAAA,EAChB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,QAC5C,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU,MAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAU;AAAA,QACR;AAAA,UACE,OAAO,EAAE,UAAU,aAAA;AAAA,UACnB,OAAO;AAAA,YACL,UAAU,MAAM,QAAQ,CAAC;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;;"}

package/dist/react/es/components/app-accordion.js

@@ -40,6 +40,7 @@ const AppAccordion = ({
       disabled: disable,
       slotProps: { transition: { unmountOnExit } },
       "data-rounded-corners": roundedCorners,
+      "data-color": color,
       color,
       ...expandedProp,
       ...accordionProps,

package/dist/react/es/components/app-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-accordion.js","sources":["../../../../src/components/app-accordion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\nimport { IconArrowDownSLine } from '../icons/arrows/arrow-down-s-line';\n\nimport {\n  Accordion,\n  type AccordionProps,\n  AccordionDetails,\n  AccordionSummary,\n  type AccordionSummaryProps,\n  type Theme,\n  SxProps,\n  Box,\n} from '@mui/material';\nimport { StackRow, type StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\nimport ZidLogoSpinner from '../logos/zid/zid-logo-spinner.svg';\n\n//\n//\n\nexport type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppAccordionRoundedCorners = 'grouped' | 'all';\n\nexport type AppAccordionProps = {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;\n  color?: AppAccordionColor;\n  disable?: boolean;\n\n  roundedCorners?: AppAccordionRoundedCorners;\n\n  accordionProps?: Partial<AccordionProps>;\n  accordionSummaryProps?: Partial<AccordionSummaryProps>;\n\n  unmountOnExit?: boolean;\n\n  title?: string | React.ReactNode;\n  titleProps?: AppTypographyProps;\n  titlePrefix?: React.ReactNode;\n  titleSuffix?: React.ReactNode;\n\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n\n  isSummaryLoading?: boolean;\n  summaryLoader?: React.ReactNode;\n  summaryLoaderProps?: StackRowProps;\n\n  isDetailsLoading?: boolean;\n  detailsLoader?: React.ReactNode;\n  detailsLoaderProps?: StackRowProps;\n\n  sx?: SxProps<Theme>;\n};\n\nexport const AppAccordion: React.FC<AppAccordionProps> = ({\n  isOpen,\n  color,\n  onToggle,\n  accordionProps,\n  title,\n  description,\n  descriptionProps,\n  accordionSummaryProps,\n  titleProps,\n  titleSuffix,\n  titlePrefix,\n  children,\n  unmountOnExit = true,\n  isSummaryLoading,\n  summaryLoader,\n  summaryLoaderProps,\n  isDetailsLoading,\n  detailsLoader,\n  detailsLoaderProps,\n  disable,\n  roundedCorners = 'all',\n}) => {\n  // Determine if controlled or uncontrolled mode\n  const expandedProp = isOpen !== undefined ? { expanded: isOpen } : {};\n\n  // Default loader component\n  const defaultSummaryLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 24 }} />;\n  const defaultDetailsLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 56 }} />;\n\n  // Determine which loader to show\n  const summaryLoaderContent = isSummaryLoading\n    ? summaryLoader === undefined\n      ? defaultSummaryLoader\n      : summaryLoader\n    : null;\n\n  const detailsLoaderContent = isDetailsLoading\n    ? detailsLoader === undefined\n      ? defaultDetailsLoader\n      : detailsLoader\n    : null;\n\n  return (\n    <Accordion\n      onChange={onToggle}\n      disabled={disable}\n      slotProps={{ transition: { unmountOnExit } }}\n      data-rounded-corners={roundedCorners}\n      color={color}\n      {...expandedProp}\n      {...accordionProps}\n    >\n      {/* Summary */}\n      <AccordionSummary\n        expandIcon={summaryLoaderContent ? undefined : <IconArrowDownSLine />}\n        {...accordionSummaryProps}\n      >\n        <StackRow alignItems=\"center\" gap={1} width=\"100%\">\n          {titlePrefix}\n\n          <StackColumn gap={0.25} width=\"100%\">\n            {typeof title === 'string' ? (\n              <AppTypography\n                variant=\"subtitle1\"\n                color={disable ? 'text.tertiary' : 'text.primary'}\n                gap={1}\n                {...titleProps}\n              >\n                {title} {titleSuffix ? titleSuffix : null}\n              </AppTypography>\n            ) : (\n              title\n            )}\n\n            {description && (\n              <AppTypography\n                variant=\"body2\"\n                color={disable ? 'text.disabled' : 'text.tertiary'}\n                whiteSpace=\"pre-line\"\n                {...descriptionProps}\n              >\n                {description}\n              </AppTypography>\n            )}\n          </StackColumn>\n\n          {summaryLoaderContent && (\n            <StackRow alignItems=\"center\" justifyContent=\"center\" {...summaryLoaderProps}>\n              {summaryLoaderContent}\n            </StackRow>\n          )}\n        </StackRow>\n      </AccordionSummary>\n\n      {/* Details */}\n      <AccordionDetails>\n        {detailsLoaderContent ? (\n          <StackRow alignItems=\"center\" justifyContent=\"center\" {...detailsLoaderProps}>\n            {detailsLoaderContent}\n          </StackRow>\n        ) : (\n          children\n        )}\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4DO,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AAEJ,QAAM,eAAe,WAAW,SAAY,EAAE,UAAU,OAAA,IAAW,CAAA;AAGnE,QAAM,uBAAuB,oBAAC,KAAA,EAAI,WAAU,OAAM,KAAK,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAC1F,QAAM,uBAAuB,oBAAC,KAAA,EAAI,WAAU,OAAM,KAAK,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAG1F,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,EAAE,YAAY,EAAE,gBAAc;AAAA,MACzC,wBAAsB;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAGJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY,uBAAuB,SAAY,oBAAC,oBAAA,CAAA,CAAmB;AAAA,YAClE,GAAG;AAAA,YAEJ,+BAAC,UAAA,EAAS,YAAW,UAAS,KAAK,GAAG,OAAM,QACzC,UAAA;AAAA,cAAA;AAAA,cAED,qBAAC,aAAA,EAAY,KAAK,MAAM,OAAM,QAC3B,UAAA;AAAA,gBAAA,OAAO,UAAU,WAChB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,KAAK;AAAA,oBACJ,GAAG;AAAA,oBAEH,UAAA;AAAA,sBAAA;AAAA,sBAAM;AAAA,sBAAE,cAAc,cAAc;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA,IAGvC;AAAA,gBAGD,eACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,YAAW;AAAA,oBACV,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GAEJ;AAAA,cAEC,4CACE,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAIF,oBAAC,kBAAA,EACE,UAAA,uBACC,oBAAC,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH,IAEA,SAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"app-accordion.js","sources":["../../../../src/components/app-accordion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\nimport { IconArrowDownSLine } from '../icons/arrows/arrow-down-s-line';\n\nimport {\n  Accordion,\n  type AccordionProps,\n  AccordionDetails,\n  AccordionSummary,\n  type AccordionSummaryProps,\n  type Theme,\n  SxProps,\n  Box,\n} from '@mui/material';\nimport { StackRow, type StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\nimport ZidLogoSpinner from '../logos/zid/zid-logo-spinner.svg';\n\n//\n//\n\nexport type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppAccordionRoundedCorners = 'grouped' | 'all';\n\nexport type AppAccordionProps = {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;\n  color?: AppAccordionColor;\n  disable?: boolean;\n\n  roundedCorners?: AppAccordionRoundedCorners;\n\n  accordionProps?: Partial<AccordionProps>;\n  accordionSummaryProps?: Partial<AccordionSummaryProps>;\n\n  unmountOnExit?: boolean;\n\n  title?: string | React.ReactNode;\n  titleProps?: AppTypographyProps;\n  titlePrefix?: React.ReactNode;\n  titleSuffix?: React.ReactNode;\n\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n\n  isSummaryLoading?: boolean;\n  summaryLoader?: React.ReactNode;\n  summaryLoaderProps?: StackRowProps;\n\n  isDetailsLoading?: boolean;\n  detailsLoader?: React.ReactNode;\n  detailsLoaderProps?: StackRowProps;\n\n  sx?: SxProps<Theme>;\n};\n\nexport const AppAccordion: React.FC<AppAccordionProps> = ({\n  isOpen,\n  color,\n  onToggle,\n  accordionProps,\n  title,\n  description,\n  descriptionProps,\n  accordionSummaryProps,\n  titleProps,\n  titleSuffix,\n  titlePrefix,\n  children,\n  unmountOnExit = true,\n  isSummaryLoading,\n  summaryLoader,\n  summaryLoaderProps,\n  isDetailsLoading,\n  detailsLoader,\n  detailsLoaderProps,\n  disable,\n  roundedCorners = 'all',\n}) => {\n  // Determine if controlled or uncontrolled mode\n  const expandedProp = isOpen !== undefined ? { expanded: isOpen } : {};\n\n  // Default loader component\n  const defaultSummaryLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 24 }} />;\n  const defaultDetailsLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 56 }} />;\n\n  // Determine which loader to show\n  const summaryLoaderContent = isSummaryLoading\n    ? summaryLoader === undefined\n      ? defaultSummaryLoader\n      : summaryLoader\n    : null;\n\n  const detailsLoaderContent = isDetailsLoading\n    ? detailsLoader === undefined\n      ? defaultDetailsLoader\n      : detailsLoader\n    : null;\n\n  return (\n    <Accordion\n      onChange={onToggle}\n      disabled={disable}\n      slotProps={{ transition: { unmountOnExit } }}\n      data-rounded-corners={roundedCorners}\n      data-color={color}\n      color={color}\n      {...expandedProp}\n      {...accordionProps}\n    >\n      {/* Summary */}\n      <AccordionSummary\n        expandIcon={summaryLoaderContent ? undefined : <IconArrowDownSLine />}\n        {...accordionSummaryProps}\n      >\n        <StackRow alignItems=\"center\" gap={1} width=\"100%\">\n          {titlePrefix}\n\n          <StackColumn gap={0.25} width=\"100%\">\n            {typeof title === 'string' ? (\n              <AppTypography\n                variant=\"subtitle1\"\n                color={disable ? 'text.tertiary' : 'text.primary'}\n                gap={1}\n                {...titleProps}\n              >\n                {title} {titleSuffix ? titleSuffix : null}\n              </AppTypography>\n            ) : (\n              title\n            )}\n\n            {description && (\n              <AppTypography\n                variant=\"body2\"\n                color={disable ? 'text.disabled' : 'text.tertiary'}\n                whiteSpace=\"pre-line\"\n                {...descriptionProps}\n              >\n                {description}\n              </AppTypography>\n            )}\n          </StackColumn>\n\n          {summaryLoaderContent && (\n            <StackRow alignItems=\"center\" justifyContent=\"center\" {...summaryLoaderProps}>\n              {summaryLoaderContent}\n            </StackRow>\n          )}\n        </StackRow>\n      </AccordionSummary>\n\n      {/* Details */}\n      <AccordionDetails>\n        {detailsLoaderContent ? (\n          <StackRow alignItems=\"center\" justifyContent=\"center\" {...detailsLoaderProps}>\n            {detailsLoaderContent}\n          </StackRow>\n        ) : (\n          children\n        )}\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4DO,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AAEJ,QAAM,eAAe,WAAW,SAAY,EAAE,UAAU,OAAA,IAAW,CAAA;AAGnE,QAAM,uBAAuB,oBAAC,KAAA,EAAI,WAAU,OAAM,KAAK,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAC1F,QAAM,uBAAuB,oBAAC,KAAA,EAAI,WAAU,OAAM,KAAK,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAG1F,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,EAAE,YAAY,EAAE,gBAAc;AAAA,MACzC,wBAAsB;AAAA,MACtB,cAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAGJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY,uBAAuB,SAAY,oBAAC,oBAAA,CAAA,CAAmB;AAAA,YAClE,GAAG;AAAA,YAEJ,+BAAC,UAAA,EAAS,YAAW,UAAS,KAAK,GAAG,OAAM,QACzC,UAAA;AAAA,cAAA;AAAA,cAED,qBAAC,aAAA,EAAY,KAAK,MAAM,OAAM,QAC3B,UAAA;AAAA,gBAAA,OAAO,UAAU,WAChB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,KAAK;AAAA,oBACJ,GAAG;AAAA,oBAEH,UAAA;AAAA,sBAAA;AAAA,sBAAM;AAAA,sBAAE,cAAc,cAAc;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA,IAGvC;AAAA,gBAGD,eACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,YAAW;AAAA,oBACV,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GAEJ;AAAA,cAEC,4CACE,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAIF,oBAAC,kBAAA,EACE,UAAA,uBACC,oBAAC,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH,IAEA,SAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/react/es/components/app-icon-box.js

@@ -3,18 +3,42 @@ import { styled, Box, alpha } from "@mui/material";
 const AppIconBox = ({
   children,
   background = "default",
+  size = "large",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(IconWrapper, { "data-background-color": background, ...props, children });
+  return /* @__PURE__ */ jsx(IconWrapper, { "data-background-color": background, "data-size": size, ...props, children });
 };
 const IconWrapper = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  padding: theme.spacing(1.5),
   borderRadius: theme.spacing(1.5),
   backgroundColor: theme.palette.action.selected,
   flexShrink: 0,
+  // Size variants
+  "&[data-size='large']": {
+    width: 48,
+    height: 48
+  },
+  "&[data-size='medium']": {
+    width: 40,
+    height: 40,
+    "& svg": {
+      fontSize: 20,
+      width: 20,
+      height: 20
+    }
+  },
+  "&[data-size='small']": {
+    width: 24,
+    height: 24,
+    borderRadius: theme.spacing(0.5),
+    "& svg": {
+      fontSize: 16,
+      width: 16,
+      height: 16
+    }
+  },
   "&[data-background-color='default']": {
     backgroundColor: theme.palette.action.hover
   },

package/dist/react/es/components/app-icon-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-icon-box.js","sources":["../../../../src/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n  | 'default'\n  | 'primary'\n  | 'blue'\n  | 'red'\n  | 'green'\n  | 'yellow'\n  | 'orange'\n  | 'secondary';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n  children: React.ReactNode;\n  background?: AppIconBoxbackgroundColor;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n  children,\n  background = 'default',\n  ...props\n}) => {\n  return (\n    <IconWrapper data-background-color={background} {...props}>\n      {children}\n    </IconWrapper>\n  );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(1.5),\n  borderRadius: theme.spacing(1.5),\n  backgroundColor: theme.palette.action.selected,\n  flexShrink: 0,\n\n  \"&[data-background-color='default']\": {\n    backgroundColor: theme.palette.action.hover,\n  },\n  \"&[data-background-color='primary']\": {\n    backgroundColor: theme.palette.colors.primary[100],\n  },\n  \"&[data-background-color='blue']\": {\n    backgroundColor: theme.palette.colors.blue[100],\n  },\n  \"&[data-background-color='red']\": {\n    backgroundColor: theme.palette.colors.red[100],\n  },\n  \"&[data-background-color='green']\": {\n    backgroundColor: theme.palette.colors.green[100],\n  },\n  \"&[data-background-color='yellow']\": {\n    backgroundColor: theme.palette.colors.yellow[100],\n  },\n  \"&[data-background-color='orange']\": {\n    backgroundColor: theme.palette.colors.orange[100],\n  },\n  \"&[data-background-color='secondary']\": {\n    backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n  },\n\n  ...theme.applyStyles('dark', {\n    \"&[data-background-color='default']\": {\n      backgroundColor: theme.palette.action.hover,\n    },\n    \"&[data-background-color='primary']\": {\n      backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n    },\n    \"&[data-background-color='blue']\": {\n      backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n    },\n    \"&[data-background-color='red']\": {\n      backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n    },\n    \"&[data-background-color='green']\": {\n      backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n    },\n    \"&[data-background-color='yellow']\": {\n      backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n    },\n    \"&[data-background-color='orange']\": {\n      backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n    },\n    \"&[data-background-color='secondary']\": {\n      backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n    },\n  }),\n}));\n"],"names":[],"mappings":";;AAoBO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,6BACG,aAAA,EAAY,yBAAuB,YAAa,GAAG,OACjD,UACH;AAEJ;AAIA,MAAM,cAAc,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS,MAAM,QAAQ,GAAG;AAAA,EAC1B,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EACtC,YAAY;AAAA,EAEZ,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EAAA;AAAA,EAExC,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA;AAAA,EAEnD,mCAAmC;AAAA,IACjC,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhD,kCAAkC;AAAA,IAChC,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/C,oCAAoC;AAAA,IAClC,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAEjD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,wCAAwC;AAAA,IACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,EAAA;AAAA,EAG3D,GAAG,MAAM,YAAY,QAAQ;AAAA,IAC3B,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAExC,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE/D,mCAAmC;AAAA,MACjC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE5D,kCAAkC;AAAA,MAChC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE3D,oCAAoC;AAAA,MAClC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE7D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,wCAAwC;AAAA,MACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,IAAA;AAAA,EAC3D,CACD;AACH,EAAE;"}
+{"version":3,"file":"app-icon-box.js","sources":["../../../../src/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n  | 'default'\n  | 'primary'\n  | 'blue'\n  | 'red'\n  | 'green'\n  | 'yellow'\n  | 'orange'\n  | 'secondary';\n\nexport type AppIconBoxSize = 'small' | 'medium' | 'large';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n  children: React.ReactNode;\n  background?: AppIconBoxbackgroundColor;\n  size?: AppIconBoxSize;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n  children,\n  background = 'default',\n  size = 'large',\n  ...props\n}) => {\n  return (\n    <IconWrapper data-background-color={background} data-size={size} {...props}>\n      {children}\n    </IconWrapper>\n  );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.spacing(1.5),\n  backgroundColor: theme.palette.action.selected,\n  flexShrink: 0,\n\n  // Size variants\n  \"&[data-size='large']\": {\n    width: 48,\n    height: 48,\n  },\n  \"&[data-size='medium']\": {\n    width: 40,\n    height: 40,\n    '& svg': {\n      fontSize: 20,\n      width: 20,\n      height: 20,\n    },\n  },\n  \"&[data-size='small']\": {\n    width: 24,\n    height: 24,\n    borderRadius: theme.spacing(0.5),\n    '& svg': {\n      fontSize: 16,\n      width: 16,\n      height: 16,\n    },\n  },\n\n  \"&[data-background-color='default']\": {\n    backgroundColor: theme.palette.action.hover,\n  },\n  \"&[data-background-color='primary']\": {\n    backgroundColor: theme.palette.colors.primary[100],\n  },\n  \"&[data-background-color='blue']\": {\n    backgroundColor: theme.palette.colors.blue[100],\n  },\n  \"&[data-background-color='red']\": {\n    backgroundColor: theme.palette.colors.red[100],\n  },\n  \"&[data-background-color='green']\": {\n    backgroundColor: theme.palette.colors.green[100],\n  },\n  \"&[data-background-color='yellow']\": {\n    backgroundColor: theme.palette.colors.yellow[100],\n  },\n  \"&[data-background-color='orange']\": {\n    backgroundColor: theme.palette.colors.orange[100],\n  },\n  \"&[data-background-color='secondary']\": {\n    backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n  },\n\n  ...theme.applyStyles('dark', {\n    \"&[data-background-color='default']\": {\n      backgroundColor: theme.palette.action.hover,\n    },\n    \"&[data-background-color='primary']\": {\n      backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n    },\n    \"&[data-background-color='blue']\": {\n      backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n    },\n    \"&[data-background-color='red']\": {\n      backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n    },\n    \"&[data-background-color='green']\": {\n      backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n    },\n    \"&[data-background-color='yellow']\": {\n      backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n    },\n    \"&[data-background-color='orange']\": {\n      backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n    },\n    \"&[data-background-color='secondary']\": {\n      backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n    },\n  }),\n}));\n"],"names":[],"mappings":";;AAuBO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,eAAY,yBAAuB,YAAY,aAAW,MAAO,GAAG,OAClE,UACH;AAEJ;AAIA,MAAM,cAAc,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EACtC,YAAY;AAAA;AAAA,EAGZ,wBAAwB;AAAA,IACtB,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,wBAAwB;AAAA,IACtB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc,MAAM,QAAQ,GAAG;AAAA,IAC/B,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAGF,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EAAA;AAAA,EAExC,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA;AAAA,EAEnD,mCAAmC;AAAA,IACjC,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhD,kCAAkC;AAAA,IAChC,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/C,oCAAoC;AAAA,IAClC,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAEjD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,wCAAwC;AAAA,IACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,EAAA;AAAA,EAG3D,GAAG,MAAM,YAAY,QAAQ;AAAA,IAC3B,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAExC,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE/D,mCAAmC;AAAA,MACjC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE5D,kCAAkC;AAAA,MAChC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE3D,oCAAoC;AAAA,MAClC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE7D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,wCAAwC;AAAA,MACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,IAAA;AAAA,EAC3D,CACD;AACH,EAAE;"}

package/dist/react/es/theme/components/accordion.js

@@ -93,7 +93,7 @@ const MuiAccordionSummary = {
 };
 const MuiAccordionDetails = {
   styleOverrides: {
-    root: ({ theme, ownerState }) => ({
+    root: ({ theme }) => ({
       display: "flex",
       flexDirection: "column",
       gap: theme.spacing(1.5),
@@ -103,11 +103,12 @@ const MuiAccordionDetails = {
       marginBottom: theme.spacing(0.5),
       borderBottomLeftRadius: theme.spacing(1.5),
       borderBottomRightRadius: theme.spacing(1.5),
-      ...ownerState.color && {
+      ".MuiAccordion-root[data-color] &": {
         borderRadius: theme.spacing(1.5),
         marginTop: "-2px"
       },
-      ...!ownerState.color && {
+      // When parent Accordion has no color
+      ".MuiAccordion-root:not([data-color]) &": {
         borderTop: `1px solid ${theme.palette.divider}`,
         marginTop: 0
       },

package/dist/react/es/theme/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../../../src/theme/components/accordion.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiAccordion: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordion'] = {\n  defaultProps: {\n    disableGutters: true,\n    elevation: 0,\n  },\n  styleOverrides: {\n    root: ({ theme }) => ({\n      border: `1px solid ${theme.palette.divider}`,\n      backgroundColor: theme.palette.background.paper,\n      overflow: 'hidden',\n      '&.Mui-disabled': {\n        backgroundColor: theme.palette.action.disabledBackground,\n      },\n      ':first-of-type': {\n        borderTopLeftRadius: theme.spacing(2),\n        borderTopRightRadius: theme.spacing(2),\n      },\n      ':last-of-type': {\n        borderBottomLeftRadius: theme.spacing(2),\n        borderBottomRightRadius: theme.spacing(2),\n      },\n      '&[data-rounded-corners=\"all\"]': {\n        borderRadius: theme.spacing(2),\n      },\n    }),\n  },\n  variants: [\n    {\n      props: { color: 'primary' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.primary.background,\n          borderColor: theme.palette._components.accordion.primary.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'success' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.success.background,\n          borderColor: theme.palette._components.accordion.success.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'error' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.error.background,\n          borderColor: theme.palette._components.accordion.error.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'warning' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.warning.background,\n          borderColor: theme.palette._components.accordion.warning.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'info' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.info.background,\n          borderColor: theme.palette._components.accordion.info.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'neutral' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.neutral.background,\n          borderColor: theme.palette._components.accordion.neutral.border,\n        },\n      }),\n    },\n  ],\n};\n\nexport const MuiAccordionSummary: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionSummary'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      marginInline: theme.spacing(0.5),\n    }),\n    content: ({ theme }) => ({\n      marginBlock: theme.spacing(2),\n    }),\n  },\n};\n\nexport const MuiAccordionDetails: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionDetails'] = {\n  styleOverrides: {\n    root: ({ theme, ownerState }) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: theme.spacing(1.5),\n      background: theme.palette.background.paper,\n      padding: theme.spacing(2),\n      marginInline: theme.spacing(0.5),\n      marginBottom: theme.spacing(0.5),\n      borderBottomLeftRadius: theme.spacing(1.5),\n      borderBottomRightRadius: theme.spacing(1.5),\n      ...(ownerState.color && {\n        borderRadius: theme.spacing(1.5),\n        marginTop: '-2px',\n      }),\n      ...(!ownerState.color && {\n        borderTop: `1px solid ${theme.palette.divider}`,\n        marginTop: 0,\n      }),\n      '.Mui-disabled &': {\n        opacity: 0.5,\n      },\n    }),\n  },\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"accordion.js","sources":["../../../../../src/theme/components/accordion.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiAccordion: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordion'] = {\n  defaultProps: {\n    disableGutters: true,\n    elevation: 0,\n  },\n  styleOverrides: {\n    root: ({ theme }) => ({\n      border: `1px solid ${theme.palette.divider}`,\n      backgroundColor: theme.palette.background.paper,\n      overflow: 'hidden',\n      '&.Mui-disabled': {\n        backgroundColor: theme.palette.action.disabledBackground,\n      },\n      ':first-of-type': {\n        borderTopLeftRadius: theme.spacing(2),\n        borderTopRightRadius: theme.spacing(2),\n      },\n      ':last-of-type': {\n        borderBottomLeftRadius: theme.spacing(2),\n        borderBottomRightRadius: theme.spacing(2),\n      },\n      '&[data-rounded-corners=\"all\"]': {\n        borderRadius: theme.spacing(2),\n      },\n    }),\n  },\n  variants: [\n    {\n      props: { color: 'primary' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.primary.background,\n          borderColor: theme.palette._components.accordion.primary.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'success' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.success.background,\n          borderColor: theme.palette._components.accordion.success.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'error' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.error.background,\n          borderColor: theme.palette._components.accordion.error.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'warning' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.warning.background,\n          borderColor: theme.palette._components.accordion.warning.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'info' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.info.background,\n          borderColor: theme.palette._components.accordion.info.border,\n        },\n      }),\n    },\n    {\n      props: { color: 'neutral' },\n      style: ({ theme }) => ({\n        '&.Mui-expanded': {\n          backgroundColor: theme.palette._components.accordion.neutral.background,\n          borderColor: theme.palette._components.accordion.neutral.border,\n        },\n      }),\n    },\n  ],\n};\n\nexport const MuiAccordionSummary: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionSummary'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      marginInline: theme.spacing(0.5),\n    }),\n    content: ({ theme }) => ({\n      marginBlock: theme.spacing(2),\n    }),\n  },\n};\n\nexport const MuiAccordionDetails: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionDetails'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: theme.spacing(1.5),\n      background: theme.palette.background.paper,\n      padding: theme.spacing(2),\n      marginInline: theme.spacing(0.5),\n      marginBottom: theme.spacing(0.5),\n      borderBottomLeftRadius: theme.spacing(1.5),\n      borderBottomRightRadius: theme.spacing(1.5),\n      '.MuiAccordion-root[data-color] &': {\n        borderRadius: theme.spacing(1.5),\n        marginTop: '-2px',\n      },\n      // When parent Accordion has no color\n      '.MuiAccordion-root:not([data-color]) &': {\n        borderTop: `1px solid ${theme.palette.divider}`,\n        marginTop: 0,\n      },\n      '.Mui-disabled &': {\n        opacity: 0.5,\n      },\n    }),\n  },\n};\n"],"names":[],"mappings":"AAKO,MAAM,eAEO;AAAA,EAClB,cAAc;AAAA,IACZ,gBAAgB;AAAA,IAChB,WAAW;AAAA,EAAA;AAAA,EAEb,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,MAC1C,iBAAiB,MAAM,QAAQ,WAAW;AAAA,MAC1C,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,iBAAiB,MAAM,QAAQ,OAAO;AAAA,MAAA;AAAA,MAExC,kBAAkB;AAAA,QAChB,qBAAqB,MAAM,QAAQ,CAAC;AAAA,QACpC,sBAAsB,MAAM,QAAQ,CAAC;AAAA,MAAA;AAAA,MAEvC,iBAAiB;AAAA,QACf,wBAAwB,MAAM,QAAQ,CAAC;AAAA,QACvC,yBAAyB,MAAM,QAAQ,CAAC;AAAA,MAAA;AAAA,MAE1C,iCAAiC;AAAA,QAC/B,cAAc,MAAM,QAAQ,CAAC;AAAA,MAAA;AAAA,IAC/B;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,IACR;AAAA,MACE,OAAO,EAAE,OAAO,UAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,UAC7D,aAAa,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,QAAA;AAAA,MAC3D;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,UAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,UAC7D,aAAa,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,QAAA;AAAA,MAC3D;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,QAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,MAAM;AAAA,UAC3D,aAAa,MAAM,QAAQ,YAAY,UAAU,MAAM;AAAA,QAAA;AAAA,MACzD;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,UAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,UAC7D,aAAa,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,QAAA;AAAA,MAC3D;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,OAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,KAAK;AAAA,UAC1D,aAAa,MAAM,QAAQ,YAAY,UAAU,KAAK;AAAA,QAAA;AAAA,MACxD;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,UAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,UAC7D,aAAa,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,QAAA;AAAA,MAC3D;AAAA,IACF;AAAA,EACF;AAEJ;AAEO,MAAM,sBAEc;AAAA,EACzB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,cAAc,MAAM,QAAQ,GAAG;AAAA,IAAA;AAAA,IAEjC,SAAS,CAAC,EAAE,aAAa;AAAA,MACvB,aAAa,MAAM,QAAQ,CAAC;AAAA,IAAA;AAAA,EAC9B;AAEJ;AAEO,MAAM,sBAEc;AAAA,EACzB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,MAAM,QAAQ,GAAG;AAAA,MACtB,YAAY,MAAM,QAAQ,WAAW;AAAA,MACrC,SAAS,MAAM,QAAQ,CAAC;AAAA,MACxB,cAAc,MAAM,QAAQ,GAAG;AAAA,MAC/B,cAAc,MAAM,QAAQ,GAAG;AAAA,MAC/B,wBAAwB,MAAM,QAAQ,GAAG;AAAA,MACzC,yBAAyB,MAAM,QAAQ,GAAG;AAAA,MAC1C,oCAAoC;AAAA,QAClC,cAAc,MAAM,QAAQ,GAAG;AAAA,QAC/B,WAAW;AAAA,MAAA;AAAA;AAAA,MAGb,0CAA0C;AAAA,QACxC,WAAW,aAAa,MAAM,QAAQ,OAAO;AAAA,QAC7C,WAAW;AAAA,MAAA;AAAA,MAEb,mBAAmB;AAAA,QACjB,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAEJ;"}

package/dist/react/es/theme/components/svg-icon.js

@@ -4,7 +4,15 @@ const MuiSvgIcon = {
       transition: theme.transitions.create("color", {
         easing: theme.transitions.easing.easeInOut,
         duration: theme.transitions.duration.standard
-      })
+      }),
+      variants: [
+        {
+          props: { fontSize: "extraSmall" },
+          style: {
+            fontSize: theme.spacing(2)
+          }
+        }
+      ]
     })
   }
 };

package/dist/react/es/theme/components/svg-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg-icon.js","sources":["../../../../../src/theme/components/svg-icon.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiSvgIcon: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiSvgIcon'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      transition: theme.transitions.create('color', {\n        easing: theme.transitions.easing.easeInOut,\n        duration: theme.transitions.duration.standard,\n      }),\n    }),\n  },\n};\n"],"names":[],"mappings":"AAKO,MAAM,aAEK;AAAA,EAChB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,QAC5C,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU,MAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"svg-icon.js","sources":["../../../../../src/theme/components/svg-icon.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiSvgIcon: Components<\n  Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiSvgIcon'] = {\n  styleOverrides: {\n    root: ({ theme }) => ({\n      transition: theme.transitions.create('color', {\n        easing: theme.transitions.easing.easeInOut,\n        duration: theme.transitions.duration.standard,\n      }),\n      variants: [\n        {\n          props: { fontSize: 'extraSmall' },\n          style: {\n            fontSize: theme.spacing(2),\n          },\n        },\n      ],\n    }),\n  },\n};\n"],"names":[],"mappings":"AAKO,MAAM,aAEK;AAAA,EAChB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,QAC5C,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU,MAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAU;AAAA,QACR;AAAA,UACE,OAAO,EAAE,UAAU,aAAA;AAAA,UACnB,OAAO;AAAA,YACL,UAAU,MAAM,QAAQ,CAAC;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/react/types/components/app-icon-box.d.ts

@@ -1,7 +1,9 @@
 import { BoxProps } from '@mui/material';
 export type AppIconBoxbackgroundColor = 'default' | 'primary' | 'blue' | 'red' | 'green' | 'yellow' | 'orange' | 'secondary';
+export type AppIconBoxSize = 'small' | 'medium' | 'large';
 export type AppIconBoxProps = Omit<BoxProps, 'color'> & {
     children: React.ReactNode;
     background?: AppIconBoxbackgroundColor;
+    size?: AppIconBoxSize;
 };
 export declare const AppIconBox: React.FC<AppIconBoxProps>;

package/dist/react/types/theme/types.d.ts

@@ -24,6 +24,13 @@ declare module '@mui/material/IconButton' {
     extraSmall: true;
   }
 }
+
+declare module '@mui/material/SvgIcon' {
+  interface SvgIconPropsSizeOverrides {
+    extraSmall: true;
+  }
+}
+
 declare module '@mui/material/Radio' {
   interface RadioPropsSizeOverrides {
     small: true;