@flipdish/portal-library 8.0.0 → 8.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/IconButton/getIconButtonStyles.cjs.js +1 -1
- package/dist/components/atoms/IconButton/getIconButtonStyles.cjs.js.map +1 -1
- package/dist/components/atoms/IconButton/getIconButtonStyles.d.ts +22 -12
- package/dist/components/atoms/IconButton/getIconButtonStyles.js +1 -1
- package/dist/components/atoms/IconButton/getIconButtonStyles.js.map +1 -1
- package/dist/components/atoms/IconButton/index.cjs.js +1 -1
- package/dist/components/atoms/IconButton/index.cjs.js.map +1 -1
- package/dist/components/atoms/IconButton/index.d.ts +2 -2
- package/dist/components/atoms/IconButton/index.js +1 -1
- package/dist/components/atoms/IconButton/index.js.map +1 -1
- package/dist/themes/flipdishPublicTheme.cjs.js +1 -1
- package/dist/themes/flipdishPublicTheme.cjs.js.map +1 -1
- package/dist/themes/flipdishPublicTheme.js +1 -1
- package/dist/themes/flipdishPublicTheme.js.map +1 -1
- package/dist/themes/overrides/iconButtonOverrides.cjs.js +2 -0
- package/dist/themes/overrides/iconButtonOverrides.cjs.js.map +1 -0
- package/dist/themes/overrides/iconButtonOverrides.d.ts +5 -0
- package/dist/themes/overrides/iconButtonOverrides.js +2 -0
- package/dist/themes/overrides/iconButtonOverrides.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/atoms/IconButton/iconButtonThemeOverrides.cjs.js +0 -2
- package/dist/components/atoms/IconButton/iconButtonThemeOverrides.cjs.js.map +0 -1
- package/dist/components/atoms/IconButton/iconButtonThemeOverrides.d.ts +0 -13
- package/dist/components/atoms/IconButton/iconButtonThemeOverrides.js +0 -2
- package/dist/components/atoms/IconButton/iconButtonThemeOverrides.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";require("@mui/material/styles");module.exports=(o,r="primary",e="brand")=>{const l=o.palette.semantic,i={borderRadius:o.radius["radius-8"],boxShadow:o.customShadows.raised,boxSizing:"border-box",cursor:"pointer",minWidth:0,opacity:1,overflow:"hidden",padding:0,position:"relative",transition:"all 0.2s ease-in-out"},n={borderRadius:"inherit",borderStyle:"solid",borderWidth:1,content:'""',inset:0,pointerEvents:"none",position:"absolute"},s={boxShadow:"none",cursor:"not-allowed",pointerEvents:"auto"},d={primary:{brand:{default:{...i,background:l.fill["fill-primary-strong"],color:l.icon["icon-inverse"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,background:l.fill["fill-disabled"],color:l.icon["icon-inverse"]}},neutral:{default:{...i,background:l.fill["fill-strong"],color:l.icon["icon-inverse"]},hover:{background:l.fill["fill-inverse-hover"]},press:{background:l.fill["fill-inverse-press"]},disabled:{...s,background:l.fill["fill-disabled"],color:l.icon["icon-inverse"]}},destructive:{default:{...i,background:l.fill["fill-error-strong"],color:l.icon["icon-inverse"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,background:l.fill["fill-disabled"],color:l.icon["icon-inverse"]}},inverse:{default:{...i,background:l.fill["fill-inverse-strong"],color:l.icon["icon-strong"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,background:l.fill["fill-inverse-disabled"],color:l.icon["icon-strong"]}}},secondary:{brand:{default:{...i,color:l.icon["icon-primary"],"&::before":{...n,borderColor:l.stroke["stroke-primary-strong"]}},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"],"&::before":{borderColor:l.stroke["stroke-disabled"]}}},neutral:{default:{...i,color:l.icon["icon-strong"],"&::before":{...n,borderColor:l.stroke["stroke-strong"]}},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"],"&::before":{borderColor:l.stroke["stroke-disabled"]}}},destructive:{default:{...i,color:l.icon["icon-error"],"&::before":{...n,borderColor:l.stroke["stroke-error-strong"]}},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"],"&::before":{borderColor:l.stroke["stroke-disabled"]}}},inverse:{default:{...i,color:l.icon["icon-inverse"],"&::before":{...n,borderColor:l.stroke["stroke-inverse-strong"]}},hover:{background:l.fill["fill-inverse-hover"]},press:{background:l.fill["fill-inverse-press"]},disabled:{...s,color:l.icon["icon-inverse-disabled"],"&::before":{borderColor:l.stroke["stroke-inverse-disabled"]}}}},tertiary:{brand:{default:{...i,boxShadow:"none",color:l.icon["icon-primary"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"]}},neutral:{default:{...i,boxShadow:"none",color:l.icon["icon-strong"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"]}},destructive:{default:{...i,boxShadow:"none",color:l.icon["icon-error"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"]}},inverse:{default:{...i,boxShadow:"none",color:l.icon["icon-inverse"]},hover:{background:l.fill["fill-inverse-hover"]},press:{background:l.fill["fill-inverse-press"]},disabled:{...s,color:l.icon["icon-inverse-disabled"]}}}};return d[r][e in d[r]?e:"brand"]};
|
|
2
2
|
//# sourceMappingURL=getIconButtonStyles.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getIconButtonStyles.cjs.js","sources":["../../../../src/components/atoms/IconButton/getIconButtonStyles.ts"],"sourcesContent":["import { darken, lighten, type Theme } from '@mui/material/styles';\n\nexport type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type IconButtonTone = 'brand' | 'destructive' | 'inverse' | 'neutral';\nexport type IconButtonState = 'default' | 'disabled' | 'focus' | 'hover' | 'press';\n\ninterface StyleObject {\n [property: string]: number | string | undefined;\n}\ninterface IconButtonStyles {\n default?: StyleObject;\n disabled?: StyleObject;\n focus?: StyleObject;\n hover?: StyleObject;\n press?: StyleObject;\n}\n\nconst getIconButtonStyles = (\n theme: Theme,\n variant: IconButtonVariant = 'primary',\n tone: IconButtonTone = 'brand',\n size: 'medium' | 'small' = 'medium'\n): IconButtonStyles => {\n const isLight = theme.palette.mode === 'light';\n const palette = theme.palette.semantic;\n const radius = theme.radius['radius-8'] || 8;\n const boxShadow = theme.customShadows?.raised || '0px 1px 2px 0px rgba(0,0,0,0.1), 0px 2px 6px 0px rgba(0,0,0,0.15)';\n const sizePx = size === 'small' ? 32 : 48;\n\n const shared = {\n borderRadius: radius,\n width: sizePx,\n height: sizePx,\n boxShadow,\n minWidth: 0,\n padding: 0,\n position: 'relative',\n transition: 'all 0.2s ease-in-out',\n };\n\n const variants = {\n generic: {\n focus: {\n outlineOffset: '2px',\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n transition: 'none',\n },\n },\n primary: {\n brand: {\n default: {\n ...shared,\n background: palette.fill['fill-primary-strong'],\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-primary-strong'], 0.1) : lighten(palette.fill['fill-primary-strong'], 0.1),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-primary-strong'], 0.2) : lighten(palette.fill['fill-primary-strong'], 0.2),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n neutral: {\n default: {\n ...shared,\n background: palette.fill['fill-strong'],\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? lighten(palette.fill['fill-strong'], 0.1) : darken(palette.fill['fill-strong'], 0.1),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? lighten(palette.fill['fill-strong'], 0.2) : darken(palette.fill['fill-strong'], 0.2),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n destructive: {\n default: {\n ...shared,\n background: palette.fill['fill-error-strong'],\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-error-strong'], 0.1) : lighten(palette.fill['fill-error-strong'], 0.1),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-error-strong'], 0.2) : lighten(palette.fill['fill-error-strong'], 0.2),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n inverse: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-inverse-strong'], 0.1) : lighten(palette.fill['fill-inverse-strong'], 0.1),\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-inverse-strong'], 0.2) : lighten(palette.fill['fill-inverse-strong'], 0.2),\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n },\n secondary: {\n brand: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-primary'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-primary'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-primary'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: `1px solid ${palette.stroke['stroke-disabled']}`,\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n destructive: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-error'],\n border: `1px solid ${palette.stroke['stroke-error-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-error'],\n border: `1px solid ${palette.stroke['stroke-error-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-error'],\n border: `1px solid ${palette.stroke['stroke-error-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: `1px solid ${palette.stroke['stroke-disabled']}`,\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n neutral: {\n default: {\n ...shared,\n background: palette.fill['fill-strong'],\n color: palette.icon['icon-strong'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-strong'], 0.1) : lighten(palette.fill['fill-strong'], 0.1),\n color: palette.icon['icon-strong'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-strong'], 0.2) : lighten(palette.fill['fill-strong'], 0.2),\n color: palette.icon['icon-strong'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: `1px solid ${palette.stroke['stroke-disabled']}`,\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n inverse: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-inverse-strong'],\n border: `1px solid ${palette.stroke['stroke-inverse-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-inverse-strong'], 0.1) : lighten(palette.fill['fill-inverse-strong'], 0.1),\n color: palette.icon['icon-inverse-strong'],\n border: `1px solid ${palette.stroke['stroke-inverse-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-inverse-strong'], 0.2) : lighten(palette.fill['fill-inverse-strong'], 0.2),\n color: palette.icon['icon-inverse-strong'],\n border: `1px solid ${palette.stroke['stroke-inverse-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: `1px solid ${palette.stroke['stroke-disabled']}`,\n cursor: 'not-allowed',\n opacity: 0.5,\n },\n },\n },\n tertiary: {\n brand: {\n default: {\n ...shared,\n boxShadow: 'none',\n background: 'transparent',\n color: palette.icon['icon-primary'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-primary'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-primary'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n destructive: {\n default: {\n ...shared,\n boxShadow: 'none',\n background: 'transparent',\n color: palette.icon['icon-error'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-error'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-error'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n opacity: 0.5,\n },\n },\n neutral: {\n default: {\n ...shared,\n boxShadow: 'none',\n background: 'transparent',\n color: palette.icon['icon-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n inverse: {\n default: {\n ...shared,\n boxShadow: 'none',\n background: 'transparent',\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n },\n };\n\n // Fallback to brand if tone not found\n const toneKey: IconButtonTone = tone in variants[variant] ? tone : 'brand';\n return { ...variants.generic, ...variants[variant][toneKey] };\n};\n\nexport default getIconButtonStyles;"],"names":["theme","variant","tone","size","isLight","palette","mode","semantic","sizePx","shared","borderRadius","radius","width","height","boxShadow","customShadows","raised","minWidth","padding","position","transition","variants","generic","focus","outlineOffset","outline","stroke","primary","brand","default","background","fill","color","icon","border","cursor","opacity","hover","darken","lighten","press","disabled","pointerEvents","neutral","destructive","inverse","secondary","tertiary"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"getIconButtonStyles.cjs.js","sources":["../../../../src/components/atoms/IconButton/getIconButtonStyles.ts"],"sourcesContent":["import { type CSSObject, type Theme } from '@mui/material/styles';\n\n/**\n * The variant of the IconButton.\n * @default 'primary'\n */\nexport type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';\n/**\n * The tone of the IconButton.\n * @default 'brand'\n */\nexport type IconButtonTone = 'brand' | 'destructive' | 'inverse' | 'neutral';\n\ninterface IconButtonStyles {\n default?: CSSObject;\n disabled?: CSSObject;\n hover?: CSSObject;\n press?: CSSObject;\n}\n\n/**\n * Returns the styles for the IconButton states based on the variant and tone.\n * @param theme - The theme object.\n * @param variant - The variant of the IconButton.\n * @param tone - The tone of the IconButton.\n * @returns The styles for the IconButton states based on the variant and tone.\n */\nconst getIconButtonStyles = (\n theme: Theme,\n variant: IconButtonVariant = 'primary',\n tone: IconButtonTone = 'brand',\n): IconButtonStyles => {\n const palette = theme.palette.semantic;\n const radius = theme.radius['radius-8'];\n const boxShadow = theme.customShadows.raised;\n\n const shared = {\n borderRadius: radius,\n boxShadow,\n boxSizing: 'border-box',\n cursor: 'pointer',\n minWidth: 0,\n opacity: 1,\n overflow: 'hidden',\n padding: 0,\n position: 'relative',\n transition: 'all 0.2s ease-in-out',\n } satisfies CSSObject;\n\n const secondaryBorderStyle = {\n borderRadius: 'inherit',\n borderStyle: 'solid',\n borderWidth: 1,\n content: '\"\"',\n inset: 0,\n pointerEvents: 'none',\n position: 'absolute',\n } satisfies CSSObject;\n\n const sharedDisabled = {\n boxShadow: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n } satisfies CSSObject;\n\n const variants = {\n primary: {\n brand: {\n default: {\n ...shared,\n background: palette.fill['fill-primary-strong'],\n color: palette.icon['icon-inverse'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-inverse'],\n },\n },\n neutral: {\n default: {\n ...shared,\n background: palette.fill['fill-strong'],\n color: palette.icon['icon-inverse'],\n },\n hover: {\n background: palette.fill['fill-inverse-hover'],\n },\n press: {\n background: palette.fill['fill-inverse-press'],\n },\n disabled: {\n ...sharedDisabled,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-inverse'],\n },\n },\n destructive: {\n default: {\n ...shared,\n background: palette.fill['fill-error-strong'],\n color: palette.icon['icon-inverse'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-inverse'],\n },\n },\n inverse: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-strong'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n background: palette.fill['fill-inverse-disabled'],\n color: palette.icon['icon-strong'],\n },\n },\n },\n secondary: {\n brand: {\n default: {\n ...shared,\n color: palette.icon['icon-primary'],\n '&::before': {\n ...secondaryBorderStyle,\n borderColor: palette.stroke['stroke-primary-strong'],\n },\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n '&::before': {\n borderColor: palette.stroke['stroke-disabled'],\n },\n },\n },\n neutral: {\n default: {\n ...shared,\n color: palette.icon['icon-strong'],\n '&::before': {\n ...secondaryBorderStyle,\n borderColor: palette.stroke['stroke-strong'],\n },\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n '&::before': {\n borderColor: palette.stroke['stroke-disabled'],\n },\n },\n },\n destructive: {\n default: {\n ...shared,\n color: palette.icon['icon-error'],\n '&::before': {\n ...secondaryBorderStyle,\n borderColor: palette.stroke['stroke-error-strong'],\n },\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n '&::before': {\n borderColor: palette.stroke['stroke-disabled'],\n },\n },\n },\n inverse: {\n default: {\n ...shared,\n color: palette.icon['icon-inverse'],\n '&::before': {\n ...secondaryBorderStyle,\n borderColor: palette.stroke['stroke-inverse-strong'],\n },\n },\n hover: {\n background: palette.fill['fill-inverse-hover'],\n },\n press: {\n background: palette.fill['fill-inverse-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-inverse-disabled'],\n '&::before': {\n borderColor: palette.stroke['stroke-inverse-disabled'],\n },\n },\n },\n },\n tertiary: {\n brand: {\n default: {\n ...shared,\n boxShadow: 'none',\n color: palette.icon['icon-primary'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n },\n },\n neutral: {\n default: {\n ...shared,\n boxShadow: 'none',\n color: palette.icon['icon-strong'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n },\n },\n destructive: {\n default: {\n ...shared,\n boxShadow: 'none',\n color: palette.icon['icon-error'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n },\n },\n inverse: {\n default: {\n ...shared,\n boxShadow: 'none',\n color: palette.icon['icon-inverse'],\n },\n hover: {\n background: palette.fill['fill-inverse-hover'],\n },\n press: {\n background: palette.fill['fill-inverse-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-inverse-disabled'],\n },\n },\n },\n };\n\n // Fallback to brand if tone not found\n const toneKey: IconButtonTone = tone in variants[variant] ? tone : 'brand';\n return variants[variant][toneKey];\n};\n\nexport default getIconButtonStyles;\n"],"names":["theme","variant","tone","palette","semantic","shared","borderRadius","radius","boxShadow","customShadows","raised","boxSizing","cursor","minWidth","opacity","overflow","padding","position","transition","secondaryBorderStyle","borderStyle","borderWidth","content","inset","pointerEvents","sharedDisabled","variants","primary","brand","default","background","fill","color","icon","hover","press","disabled","neutral","destructive","inverse","secondary","borderColor","stroke","tertiary"],"mappings":"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"}
|
|
@@ -1,19 +1,29 @@
|
|
|
1
|
-
import { Theme } from '@mui/material/styles';
|
|
1
|
+
import { Theme, CSSObject } from '@mui/material/styles';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* The variant of the IconButton.
|
|
5
|
+
* @default 'primary'
|
|
6
|
+
*/
|
|
3
7
|
type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
|
|
8
|
+
/**
|
|
9
|
+
* The tone of the IconButton.
|
|
10
|
+
* @default 'brand'
|
|
11
|
+
*/
|
|
4
12
|
type IconButtonTone = 'brand' | 'destructive' | 'inverse' | 'neutral';
|
|
5
|
-
type IconButtonState = 'default' | 'disabled' | 'focus' | 'hover' | 'press';
|
|
6
|
-
interface StyleObject {
|
|
7
|
-
[property: string]: number | string | undefined;
|
|
8
|
-
}
|
|
9
13
|
interface IconButtonStyles {
|
|
10
|
-
default?:
|
|
11
|
-
disabled?:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
press?: StyleObject;
|
|
14
|
+
default?: CSSObject;
|
|
15
|
+
disabled?: CSSObject;
|
|
16
|
+
hover?: CSSObject;
|
|
17
|
+
press?: CSSObject;
|
|
15
18
|
}
|
|
16
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Returns the styles for the IconButton states based on the variant and tone.
|
|
21
|
+
* @param theme - The theme object.
|
|
22
|
+
* @param variant - The variant of the IconButton.
|
|
23
|
+
* @param tone - The tone of the IconButton.
|
|
24
|
+
* @returns The styles for the IconButton states based on the variant and tone.
|
|
25
|
+
*/
|
|
26
|
+
declare const getIconButtonStyles: (theme: Theme, variant?: IconButtonVariant, tone?: IconButtonTone) => IconButtonStyles;
|
|
17
27
|
|
|
18
28
|
export { getIconButtonStyles as default };
|
|
19
|
-
export type {
|
|
29
|
+
export type { IconButtonTone, IconButtonVariant };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import"@mui/material/styles";const o=(o,r="primary",e="brand")=>{const l=o.palette.semantic,i={borderRadius:o.radius["radius-8"],boxShadow:o.customShadows.raised,boxSizing:"border-box",cursor:"pointer",minWidth:0,opacity:1,overflow:"hidden",padding:0,position:"relative",transition:"all 0.2s ease-in-out"},n={borderRadius:"inherit",borderStyle:"solid",borderWidth:1,content:'""',inset:0,pointerEvents:"none",position:"absolute"},s={boxShadow:"none",cursor:"not-allowed",pointerEvents:"auto"},d={primary:{brand:{default:{...i,background:l.fill["fill-primary-strong"],color:l.icon["icon-inverse"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,background:l.fill["fill-disabled"],color:l.icon["icon-inverse"]}},neutral:{default:{...i,background:l.fill["fill-strong"],color:l.icon["icon-inverse"]},hover:{background:l.fill["fill-inverse-hover"]},press:{background:l.fill["fill-inverse-press"]},disabled:{...s,background:l.fill["fill-disabled"],color:l.icon["icon-inverse"]}},destructive:{default:{...i,background:l.fill["fill-error-strong"],color:l.icon["icon-inverse"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,background:l.fill["fill-disabled"],color:l.icon["icon-inverse"]}},inverse:{default:{...i,background:l.fill["fill-inverse-strong"],color:l.icon["icon-strong"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,background:l.fill["fill-inverse-disabled"],color:l.icon["icon-strong"]}}},secondary:{brand:{default:{...i,color:l.icon["icon-primary"],"&::before":{...n,borderColor:l.stroke["stroke-primary-strong"]}},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"],"&::before":{borderColor:l.stroke["stroke-disabled"]}}},neutral:{default:{...i,color:l.icon["icon-strong"],"&::before":{...n,borderColor:l.stroke["stroke-strong"]}},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"],"&::before":{borderColor:l.stroke["stroke-disabled"]}}},destructive:{default:{...i,color:l.icon["icon-error"],"&::before":{...n,borderColor:l.stroke["stroke-error-strong"]}},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"],"&::before":{borderColor:l.stroke["stroke-disabled"]}}},inverse:{default:{...i,color:l.icon["icon-inverse"],"&::before":{...n,borderColor:l.stroke["stroke-inverse-strong"]}},hover:{background:l.fill["fill-inverse-hover"]},press:{background:l.fill["fill-inverse-press"]},disabled:{...s,color:l.icon["icon-inverse-disabled"],"&::before":{borderColor:l.stroke["stroke-inverse-disabled"]}}}},tertiary:{brand:{default:{...i,boxShadow:"none",color:l.icon["icon-primary"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"]}},neutral:{default:{...i,boxShadow:"none",color:l.icon["icon-strong"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"]}},destructive:{default:{...i,boxShadow:"none",color:l.icon["icon-error"]},hover:{background:l.fill["fill-hover"]},press:{background:l.fill["fill-press"]},disabled:{...s,color:l.icon["icon-disabled"]}},inverse:{default:{...i,boxShadow:"none",color:l.icon["icon-inverse"]},hover:{background:l.fill["fill-inverse-hover"]},press:{background:l.fill["fill-inverse-press"]},disabled:{...s,color:l.icon["icon-inverse-disabled"]}}}};return d[r][e in d[r]?e:"brand"]};export{o as default};
|
|
2
2
|
//# sourceMappingURL=getIconButtonStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getIconButtonStyles.js","sources":["../../../../src/components/atoms/IconButton/getIconButtonStyles.ts"],"sourcesContent":["import { darken, lighten, type Theme } from '@mui/material/styles';\n\nexport type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type IconButtonTone = 'brand' | 'destructive' | 'inverse' | 'neutral';\nexport type IconButtonState = 'default' | 'disabled' | 'focus' | 'hover' | 'press';\n\ninterface StyleObject {\n [property: string]: number | string | undefined;\n}\ninterface IconButtonStyles {\n default?: StyleObject;\n disabled?: StyleObject;\n focus?: StyleObject;\n hover?: StyleObject;\n press?: StyleObject;\n}\n\nconst getIconButtonStyles = (\n theme: Theme,\n variant: IconButtonVariant = 'primary',\n tone: IconButtonTone = 'brand',\n size: 'medium' | 'small' = 'medium'\n): IconButtonStyles => {\n const isLight = theme.palette.mode === 'light';\n const palette = theme.palette.semantic;\n const radius = theme.radius['radius-8'] || 8;\n const boxShadow = theme.customShadows?.raised || '0px 1px 2px 0px rgba(0,0,0,0.1), 0px 2px 6px 0px rgba(0,0,0,0.15)';\n const sizePx = size === 'small' ? 32 : 48;\n\n const shared = {\n borderRadius: radius,\n width: sizePx,\n height: sizePx,\n boxShadow,\n minWidth: 0,\n padding: 0,\n position: 'relative',\n transition: 'all 0.2s ease-in-out',\n };\n\n const variants = {\n generic: {\n focus: {\n outlineOffset: '2px',\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n transition: 'none',\n },\n },\n primary: {\n brand: {\n default: {\n ...shared,\n background: palette.fill['fill-primary-strong'],\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-primary-strong'], 0.1) : lighten(palette.fill['fill-primary-strong'], 0.1),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-primary-strong'], 0.2) : lighten(palette.fill['fill-primary-strong'], 0.2),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n neutral: {\n default: {\n ...shared,\n background: palette.fill['fill-strong'],\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? lighten(palette.fill['fill-strong'], 0.1) : darken(palette.fill['fill-strong'], 0.1),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? lighten(palette.fill['fill-strong'], 0.2) : darken(palette.fill['fill-strong'], 0.2),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n destructive: {\n default: {\n ...shared,\n background: palette.fill['fill-error-strong'],\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-error-strong'], 0.1) : lighten(palette.fill['fill-error-strong'], 0.1),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-error-strong'], 0.2) : lighten(palette.fill['fill-error-strong'], 0.2),\n color: palette.icon['icon-inverse'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n inverse: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-inverse-strong'], 0.1) : lighten(palette.fill['fill-inverse-strong'], 0.1),\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-inverse-strong'], 0.2) : lighten(palette.fill['fill-inverse-strong'], 0.2),\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n },\n secondary: {\n brand: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-primary'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-primary'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-primary'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: `1px solid ${palette.stroke['stroke-disabled']}`,\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n destructive: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-error'],\n border: `1px solid ${palette.stroke['stroke-error-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-error'],\n border: `1px solid ${palette.stroke['stroke-error-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-error'],\n border: `1px solid ${palette.stroke['stroke-error-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: `1px solid ${palette.stroke['stroke-disabled']}`,\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n neutral: {\n default: {\n ...shared,\n background: palette.fill['fill-strong'],\n color: palette.icon['icon-strong'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-strong'], 0.1) : lighten(palette.fill['fill-strong'], 0.1),\n color: palette.icon['icon-strong'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-strong'], 0.2) : lighten(palette.fill['fill-strong'], 0.2),\n color: palette.icon['icon-strong'],\n border: `1px solid ${palette.stroke['stroke-primary-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: `1px solid ${palette.stroke['stroke-disabled']}`,\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n inverse: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-inverse-strong'],\n border: `1px solid ${palette.stroke['stroke-inverse-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-inverse-strong'], 0.1) : lighten(palette.fill['fill-inverse-strong'], 0.1),\n color: palette.icon['icon-inverse-strong'],\n border: `1px solid ${palette.stroke['stroke-inverse-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: isLight ? darken(palette.fill['fill-inverse-strong'], 0.2) : lighten(palette.fill['fill-inverse-strong'], 0.2),\n color: palette.icon['icon-inverse-strong'],\n border: `1px solid ${palette.stroke['stroke-inverse-strong']}`,\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: `1px solid ${palette.stroke['stroke-disabled']}`,\n cursor: 'not-allowed',\n opacity: 0.5,\n },\n },\n },\n tertiary: {\n brand: {\n default: {\n ...shared,\n boxShadow: 'none',\n background: 'transparent',\n color: palette.icon['icon-primary'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-primary'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-primary'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n destructive: {\n default: {\n ...shared,\n boxShadow: 'none',\n background: 'transparent',\n color: palette.icon['icon-error'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-error'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-error'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n opacity: 0.5,\n },\n },\n neutral: {\n default: {\n ...shared,\n boxShadow: 'none',\n background: 'transparent',\n color: palette.icon['icon-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n inverse: {\n default: {\n ...shared,\n boxShadow: 'none',\n background: 'transparent',\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n hover: {\n ...shared,\n background: palette.fill['fill-hover'],\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n press: {\n ...shared,\n background: palette.fill['fill-press'],\n color: palette.icon['icon-inverse-strong'],\n border: 'none',\n cursor: 'pointer',\n opacity: 1,\n },\n disabled: {\n ...shared,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-disabled'],\n border: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n opacity: 0.5,\n },\n },\n },\n };\n\n // Fallback to brand if tone not found\n const toneKey: IconButtonTone = tone in variants[variant] ? tone : 'brand';\n return { ...variants.generic, ...variants[variant][toneKey] };\n};\n\nexport default getIconButtonStyles;"],"names":["getIconButtonStyles","theme","variant","tone","size","isLight","palette","mode","semantic","sizePx","shared","borderRadius","radius","width","height","boxShadow","customShadows","raised","minWidth","padding","position","transition","variants","generic","focus","outlineOffset","outline","stroke","primary","brand","default","background","fill","color","icon","border","cursor","opacity","hover","darken","lighten","press","disabled","pointerEvents","neutral","destructive","inverse","secondary","tertiary"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"getIconButtonStyles.js","sources":["../../../../src/components/atoms/IconButton/getIconButtonStyles.ts"],"sourcesContent":["import { type CSSObject, type Theme } from '@mui/material/styles';\n\n/**\n * The variant of the IconButton.\n * @default 'primary'\n */\nexport type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';\n/**\n * The tone of the IconButton.\n * @default 'brand'\n */\nexport type IconButtonTone = 'brand' | 'destructive' | 'inverse' | 'neutral';\n\ninterface IconButtonStyles {\n default?: CSSObject;\n disabled?: CSSObject;\n hover?: CSSObject;\n press?: CSSObject;\n}\n\n/**\n * Returns the styles for the IconButton states based on the variant and tone.\n * @param theme - The theme object.\n * @param variant - The variant of the IconButton.\n * @param tone - The tone of the IconButton.\n * @returns The styles for the IconButton states based on the variant and tone.\n */\nconst getIconButtonStyles = (\n theme: Theme,\n variant: IconButtonVariant = 'primary',\n tone: IconButtonTone = 'brand',\n): IconButtonStyles => {\n const palette = theme.palette.semantic;\n const radius = theme.radius['radius-8'];\n const boxShadow = theme.customShadows.raised;\n\n const shared = {\n borderRadius: radius,\n boxShadow,\n boxSizing: 'border-box',\n cursor: 'pointer',\n minWidth: 0,\n opacity: 1,\n overflow: 'hidden',\n padding: 0,\n position: 'relative',\n transition: 'all 0.2s ease-in-out',\n } satisfies CSSObject;\n\n const secondaryBorderStyle = {\n borderRadius: 'inherit',\n borderStyle: 'solid',\n borderWidth: 1,\n content: '\"\"',\n inset: 0,\n pointerEvents: 'none',\n position: 'absolute',\n } satisfies CSSObject;\n\n const sharedDisabled = {\n boxShadow: 'none',\n cursor: 'not-allowed',\n pointerEvents: 'auto',\n } satisfies CSSObject;\n\n const variants = {\n primary: {\n brand: {\n default: {\n ...shared,\n background: palette.fill['fill-primary-strong'],\n color: palette.icon['icon-inverse'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-inverse'],\n },\n },\n neutral: {\n default: {\n ...shared,\n background: palette.fill['fill-strong'],\n color: palette.icon['icon-inverse'],\n },\n hover: {\n background: palette.fill['fill-inverse-hover'],\n },\n press: {\n background: palette.fill['fill-inverse-press'],\n },\n disabled: {\n ...sharedDisabled,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-inverse'],\n },\n },\n destructive: {\n default: {\n ...shared,\n background: palette.fill['fill-error-strong'],\n color: palette.icon['icon-inverse'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n background: palette.fill['fill-disabled'],\n color: palette.icon['icon-inverse'],\n },\n },\n inverse: {\n default: {\n ...shared,\n background: palette.fill['fill-inverse-strong'],\n color: palette.icon['icon-strong'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n background: palette.fill['fill-inverse-disabled'],\n color: palette.icon['icon-strong'],\n },\n },\n },\n secondary: {\n brand: {\n default: {\n ...shared,\n color: palette.icon['icon-primary'],\n '&::before': {\n ...secondaryBorderStyle,\n borderColor: palette.stroke['stroke-primary-strong'],\n },\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n '&::before': {\n borderColor: palette.stroke['stroke-disabled'],\n },\n },\n },\n neutral: {\n default: {\n ...shared,\n color: palette.icon['icon-strong'],\n '&::before': {\n ...secondaryBorderStyle,\n borderColor: palette.stroke['stroke-strong'],\n },\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n '&::before': {\n borderColor: palette.stroke['stroke-disabled'],\n },\n },\n },\n destructive: {\n default: {\n ...shared,\n color: palette.icon['icon-error'],\n '&::before': {\n ...secondaryBorderStyle,\n borderColor: palette.stroke['stroke-error-strong'],\n },\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n '&::before': {\n borderColor: palette.stroke['stroke-disabled'],\n },\n },\n },\n inverse: {\n default: {\n ...shared,\n color: palette.icon['icon-inverse'],\n '&::before': {\n ...secondaryBorderStyle,\n borderColor: palette.stroke['stroke-inverse-strong'],\n },\n },\n hover: {\n background: palette.fill['fill-inverse-hover'],\n },\n press: {\n background: palette.fill['fill-inverse-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-inverse-disabled'],\n '&::before': {\n borderColor: palette.stroke['stroke-inverse-disabled'],\n },\n },\n },\n },\n tertiary: {\n brand: {\n default: {\n ...shared,\n boxShadow: 'none',\n color: palette.icon['icon-primary'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n },\n },\n neutral: {\n default: {\n ...shared,\n boxShadow: 'none',\n color: palette.icon['icon-strong'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n },\n },\n destructive: {\n default: {\n ...shared,\n boxShadow: 'none',\n color: palette.icon['icon-error'],\n },\n hover: {\n background: palette.fill['fill-hover'],\n },\n press: {\n background: palette.fill['fill-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-disabled'],\n },\n },\n inverse: {\n default: {\n ...shared,\n boxShadow: 'none',\n color: palette.icon['icon-inverse'],\n },\n hover: {\n background: palette.fill['fill-inverse-hover'],\n },\n press: {\n background: palette.fill['fill-inverse-press'],\n },\n disabled: {\n ...sharedDisabled,\n color: palette.icon['icon-inverse-disabled'],\n },\n },\n },\n };\n\n // Fallback to brand if tone not found\n const toneKey: IconButtonTone = tone in variants[variant] ? tone : 'brand';\n return variants[variant][toneKey];\n};\n\nexport default getIconButtonStyles;\n"],"names":["getIconButtonStyles","theme","variant","tone","palette","semantic","shared","borderRadius","radius","boxShadow","customShadows","raised","boxSizing","cursor","minWidth","opacity","overflow","padding","position","transition","secondaryBorderStyle","borderStyle","borderWidth","content","inset","pointerEvents","sharedDisabled","variants","primary","brand","default","background","fill","color","icon","hover","press","disabled","neutral","destructive","inverse","secondary","borderColor","stroke","tertiary"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/IconButton"),a=require("@mui/material/styles"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/IconButton"),a=require("@mui/material/styles"),s=require("../BadgeCount/index.cjs.js"),n=require("../BadgeDot/index.cjs.js"),r=require("@mui/material/Box"),o=require("./getIconButtonStyles.cjs.js");const d=a.styled(i,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i),s="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...a.default,overflow:"visible","&.Mui-disabled":{...a.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:s}}})),l=a.styled(r,{shouldForwardProp:e=>!["variant","tone"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":a.hover,"[data-variant]:active:not(.Mui-disabled) > &":a.press}})),u=a.styled(s,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),c=a.styled(n,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),p=t.forwardRef((({badgeCount:t,badgeDot:i=!1,children:a,className:s,disabled:n=!1,fdKey:r,onClick:o,size:p="medium",tone:m="brand",variant:b="primary",...v},g)=>e.jsxs(d,{ref:g,disableRipple:!0,className:s,"data-fd":r,"data-tone":m,"data-variant":b,disabled:n,onClick:o,size:p,tone:m,variant:b,...v,children:[e.jsx(l,{tone:m,variant:b,children:a}),!!t&&e.jsx(u,{"data-testid":"icon-button-badge-count",size:p,children:t}),i&&!t&&e.jsx(c,{"data-testid":"icon-button-badge-dot",size:p})]})));p.displayName="IconButton",exports.IconButton=p,exports.default=p;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport getIconButtonStyles, { type
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n 'aria-label': string;\n badgeCount?: number;\n badgeDot?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n fdKey?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n size?: 'medium' | 'small';\n tone?: IconButtonTone;\n variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n shouldForwardProp: (prop) =>\n !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n tone?: IconButtonTone;\n variant?: IconButtonVariant;\n iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n const styles = getIconButtonStyles(theme, variant, tone);\n const focusColor =\n tone === 'inverse'\n ? theme.palette.semantic.stroke['stroke-inverse-strong']\n : theme.palette.semantic.stroke['stroke-focus'];\n\n return {\n ...styles.default,\n overflow: 'visible', // Allow badges to overflow\n '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n '&.Mui-focusVisible': {\n outlineColor: focusColor,\n },\n };\n});\n\nconst StyledBox = styled(Box, {\n shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n const styles = getIconButtonStyles(theme, variant, tone);\n\n return {\n alignItems: 'center',\n borderRadius: 'inherit',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n overflow: 'hidden',\n pointerEvents: 'none',\n width: '100%',\n '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n position: 'absolute',\n bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n zIndex: 1,\n pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n position: 'absolute',\n bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n zIndex: 1,\n pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n badgeCount,\n badgeDot = false,\n children,\n className,\n disabled = false,\n fdKey,\n onClick,\n size = 'medium',\n tone = 'brand',\n variant = 'primary',\n ...rest\n },\n ref,\n ) => {\n return (\n <StyledIconButton\n ref={ref}\n disableRipple\n className={className}\n data-fd={fdKey}\n data-tone={tone}\n data-variant={variant}\n disabled={disabled}\n onClick={onClick}\n size={size}\n tone={tone}\n variant={variant}\n {...rest}\n >\n <StyledBox tone={tone} variant={variant}>\n {children}\n </StyledBox>\n {!!badgeCount && (\n <StyledBadgeCount data-testid=\"icon-button-badge-count\" size={size}>\n {badgeCount}\n </StyledBadgeCount>\n )}\n\n {badgeDot && !badgeCount && <StyledBadgeDot data-testid=\"icon-button-badge-dot\" size={size} />}\n </StyledIconButton>\n );\n },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"yVAoCA,MAAMA,EAAmBC,EAAAA,OAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,EAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,OAKdQ,EAAYlB,EAAAA,OAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,EAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,UAIrDC,EAAmB7B,EAAAA,OAAO8B,EAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,EAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGXY,EAAiBrC,EAAAA,OAAOsC,EAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,EAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGJc,EAAaC,EAAAA,YACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAAA,KAAClD,GACCiD,IAAKA,EACLE,iBACAN,UAAWA,EAAS,UACXC,cACEtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAAAA,IAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAAAA,IAACtB,EAAgB,CAAA,cAAa,0BAA0BE,KAAMA,EAAIY,SAC/DF,IAIJC,IAAaD,GAAcU,EAAAA,IAACd,EAAc,CAAA,cAAa,wBAAwBN,KAAMA,SAM9FQ,EAAWa,YAAc"}
|
|
@@ -15,8 +15,10 @@ import { IconButtonTone, IconButtonVariant } from './getIconButtonStyles.js';
|
|
|
15
15
|
* - ...rest: All other props are passed to MuiIconButton
|
|
16
16
|
*/
|
|
17
17
|
interface IconButtonProps extends Omit<IconButtonProps$1, 'color'> {
|
|
18
|
+
'aria-label': string;
|
|
18
19
|
badgeCount?: number;
|
|
19
20
|
badgeDot?: boolean;
|
|
21
|
+
children: React.ReactNode;
|
|
20
22
|
className?: string;
|
|
21
23
|
disabled?: boolean;
|
|
22
24
|
fdKey?: string;
|
|
@@ -24,8 +26,6 @@ interface IconButtonProps extends Omit<IconButtonProps$1, 'color'> {
|
|
|
24
26
|
size?: 'medium' | 'small';
|
|
25
27
|
tone?: IconButtonTone;
|
|
26
28
|
variant?: IconButtonVariant;
|
|
27
|
-
children: React.ReactNode;
|
|
28
|
-
'aria-label': string;
|
|
29
29
|
}
|
|
30
30
|
declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
31
31
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import o from"@mui/material/IconButton";import{styled as a}from"@mui/material/styles";import n from"../BadgeCount/index.js";import r from"../BadgeDot/index.js";import s from"@mui/material/Box";import d from"./getIconButtonStyles.js";const l=a(o,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i),a="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...o.default,overflow:"visible","&.Mui-disabled":{...o.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:a}}})),m=a(s,{shouldForwardProp:e=>!["variant","tone"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":o.hover,"[data-variant]:active:not(.Mui-disabled) > &":o.press}})),c=a(n,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),u=a(r,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),p=i((({badgeCount:i,badgeDot:o=!1,children:a,className:n,disabled:r=!1,fdKey:s,onClick:d,size:p="medium",tone:b="brand",variant:f="primary",...v},g)=>e(l,{ref:g,disableRipple:!0,className:n,"data-fd":s,"data-tone":b,"data-variant":f,disabled:r,onClick:d,size:p,tone:b,variant:f,...v,children:[t(m,{tone:b,variant:f,children:a}),!!i&&t(c,{"data-testid":"icon-button-badge-count",size:p,children:i}),o&&!i&&t(u,{"data-testid":"icon-button-badge-dot",size:p})]})));p.displayName="IconButton";export{p as IconButton,p as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport getIconButtonStyles, { type
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n 'aria-label': string;\n badgeCount?: number;\n badgeDot?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n fdKey?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n size?: 'medium' | 'small';\n tone?: IconButtonTone;\n variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n shouldForwardProp: (prop) =>\n !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n tone?: IconButtonTone;\n variant?: IconButtonVariant;\n iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n const styles = getIconButtonStyles(theme, variant, tone);\n const focusColor =\n tone === 'inverse'\n ? theme.palette.semantic.stroke['stroke-inverse-strong']\n : theme.palette.semantic.stroke['stroke-focus'];\n\n return {\n ...styles.default,\n overflow: 'visible', // Allow badges to overflow\n '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n '&.Mui-focusVisible': {\n outlineColor: focusColor,\n },\n };\n});\n\nconst StyledBox = styled(Box, {\n shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n const styles = getIconButtonStyles(theme, variant, tone);\n\n return {\n alignItems: 'center',\n borderRadius: 'inherit',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n overflow: 'hidden',\n pointerEvents: 'none',\n width: '100%',\n '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n position: 'absolute',\n bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n zIndex: 1,\n pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n position: 'absolute',\n bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n zIndex: 1,\n pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n badgeCount,\n badgeDot = false,\n children,\n className,\n disabled = false,\n fdKey,\n onClick,\n size = 'medium',\n tone = 'brand',\n variant = 'primary',\n ...rest\n },\n ref,\n ) => {\n return (\n <StyledIconButton\n ref={ref}\n disableRipple\n className={className}\n data-fd={fdKey}\n data-tone={tone}\n data-variant={variant}\n disabled={disabled}\n onClick={onClick}\n size={size}\n tone={tone}\n variant={variant}\n {...rest}\n >\n <StyledBox tone={tone} variant={variant}>\n {children}\n </StyledBox>\n {!!badgeCount && (\n <StyledBadgeCount data-testid=\"icon-button-badge-count\" size={size}>\n {badgeCount}\n </StyledBadgeCount>\n )}\n\n {badgeDot && !badgeCount && <StyledBadgeDot data-testid=\"icon-button-badge-dot\" size={size} />}\n </StyledIconButton>\n );\n },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"8TAoCA,MAAMA,EAAmBC,EAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,EAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,OAKdQ,EAAYlB,EAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,EAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,UAIrDC,EAAmB7B,EAAO8B,EAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,EAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGXY,EAAiBrC,EAAOsC,EAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,EAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGJc,EAAaC,GACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAClD,GACCiD,IAAKA,EACLE,iBACAN,UAAWA,EAAS,UACXC,cACEtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAACtB,EAAgB,CAAA,cAAa,0BAA0BE,KAAMA,EAAIY,SAC/DF,IAIJC,IAAaD,GAAcU,EAACd,EAAc,CAAA,cAAa,wBAAwBN,KAAMA,SAM9FQ,EAAWa,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("@mui/material/styles/createTheme"),r=require("../components/atoms/Button/buttonThemeOverrides.cjs.js"),s=require("../
|
|
1
|
+
"use strict";var e=require("@mui/material/styles/createTheme"),r=require("../components/atoms/Button/buttonThemeOverrides.cjs.js"),s=require("../icons/Cancel/index.cjs.js"),i=require("./overrides/autocompleteOverrides.cjs.js"),t=require("./overrides/buttonBaseOverrides.cjs.js"),o=require("./overrides/checkboxOverrides.cjs.js"),d=require("./overrides/chipOverrides.cjs.js"),a=require("./overrides/formControlLabelOverrides.cjs.js"),u=require("./overrides/formHelperTextOverrides.cjs.js"),n=require("./overrides/formLabelOverrides.cjs.js"),l=require("./overrides/iconButtonOverrides.cjs.js"),p=require("./overrides/inputBaseOverrides.cjs.js"),c=require("./overrides/inputLabelOverrides.cjs.js"),v=require("./overrides/listItemTextOverrides.cjs.js"),j=require("./overrides/listSubheaderOverrides.cjs.js"),m=require("./overrides/menuItemOverrides.cjs.js"),b=require("./overrides/menuOverrides.cjs.js"),O=require("./overrides/ratingOverride.cjs.js"),h=require("./overrides/selectOverrides.cjs.js"),y=require("./overrides/tabOverrides.cjs.js"),g=require("./overrides/tabsOverrides.cjs.js"),M=require("./overrides/textFieldOverrides.cjs.js"),q=require("./tokens/breakpoints/breakpoints.cjs.js"),k=require("./tokens/colours/semantic.cjs.js"),x=require("./tokens/radius/radius.cjs.js"),T=require("./tokens/shadows/shadows.cjs.js"),B=require("./tokens/typography/variant-mapping.cjs.js"),f=require("./typography.cjs.js");const C=C=>{const w={typography:f.typography,palette:"light"===C?k.lightColours:k.darkColours,radius:x.radius,breakpoints:{values:q.breakpointValues},customShadows:{...T.shadows}},L=e(w);return Object.keys(f.typography).forEach((e=>{const r=e.split(/(?=[A-Z])/)[0],s=e;L.typography[s]={...L.typography[s],[L.breakpoints.down("tablet")]:{...f.getMobileTextStyle(r)}}})),e({...w,typography:L.typography,shape:{borderRadius:4},customShadows:L.customShadows,components:{MuiAlert:{defaultProps:{components:{CloseIcon:s}},styleOverrides:{root:{borderRadius:"8px",padding:"24px"},icon:{marginRight:"12px",padding:0},action:{padding:0,"& button":{marginTop:"-5px"}},message:{padding:0}}},MuiButton:r.buttonStyleOverrides(L),MuiIconButton:l.iconButtonOverrides(),MuiCard:{styleOverrides:{root:{boxShadow:"none",borderWidth:"1px",borderStyle:"solid",borderColor:L.palette.divider}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:L.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${L.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:L.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}},MuiTypography:{defaultProps:{variantMapping:B.typographyVariantMapping}},MuiAutocomplete:i.autocompleteOverrides(L),MuiButtonBase:t.buttonBaseOverrides(),MuiCheckbox:o.checkboxOverrides(L),MuiChip:d.chipOverrides(L),MuiFormControlLabel:a.formControlLabelOverrides(L),MuiFormHelperText:u.formHelperTextOverrides(L),MuiFormLabel:n.formLabelOverrides(L),MuiInputBase:p.inputBaseOverrides(L),MuiInputLabel:c.inputLabelOverrides(L),MuiListItemText:v.listItemTextOverrides(L),MuiListSubheader:j.listSubheaderOverrides(L),MuiMenu:b.menuOverrides(L),MuiMenuItem:m.menuItemOverrides(L),MuiRating:O.ratingOverride(),MuiSelect:h.selectOverrides(L),MuiTab:y.tabOverrides(L),MuiTabs:g.tabsOverrides(L),MuiTextField:M.textFieldOverrides(L)}})},w=C("light"),L=C("dark");exports.darkTheme=L,exports.lightTheme=w;
|
|
2
2
|
//# sourceMappingURL=flipdishPublicTheme.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flipdishPublicTheme.cjs.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type Theme, type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport { buttonStyleOverrides } from '../components/atoms/Button/buttonThemeOverrides';\nimport
|
|
1
|
+
{"version":3,"file":"flipdishPublicTheme.cjs.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type Theme, type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport { buttonStyleOverrides } from '../components/atoms/Button/buttonThemeOverrides';\nimport CancelIcon from '../icons/Cancel';\nimport { autocompleteOverrides } from './overrides/autocompleteOverrides';\nimport { buttonBaseOverrides } from './overrides/buttonBaseOverrides';\nimport { checkboxOverrides } from './overrides/checkboxOverrides';\nimport { chipOverrides } from './overrides/chipOverrides';\nimport { formControlLabelOverrides } from './overrides/formControlLabelOverrides';\nimport { formHelperTextOverrides } from './overrides/formHelperTextOverrides';\nimport { formLabelOverrides } from './overrides/formLabelOverrides';\nimport { iconButtonOverrides } from './overrides/iconButtonOverrides';\nimport { inputBaseOverrides } from './overrides/inputBaseOverrides';\nimport { inputLabelOverrides } from './overrides/inputLabelOverrides';\nimport { listItemTextOverrides } from './overrides/listItemTextOverrides';\nimport { listSubheaderOverrides } from './overrides/listSubheaderOverrides';\nimport { menuItemOverrides } from './overrides/menuItemOverrides';\nimport { menuOverrides } from './overrides/menuOverrides';\nimport { ratingOverride } from './overrides/ratingOverride';\nimport { selectOverrides } from './overrides/selectOverrides';\nimport { tabOverrides } from './overrides/tabOverrides';\nimport { tabsOverrides } from './overrides/tabsOverrides';\nimport { textFieldOverrides } from './overrides/textFieldOverrides';\nimport { breakpointValues } from './tokens/breakpoints/breakpoints';\nimport { darkColours, lightColours } from './tokens/colours/semantic';\nimport { radius } from './tokens/radius/radius';\nimport { shadows } from './tokens/shadows/shadows';\nimport { fontSize } from './tokens/typography/font-size';\nimport { typographyVariantMapping } from './tokens/typography/variant-mapping';\nimport { getMobileTextStyle, typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'dark' | 'light'): Theme => {\n const themeOptions: ThemeOptions = {\n typography,\n palette: mode === 'light' ? lightColours : darkColours,\n radius,\n breakpoints: {\n values: breakpointValues,\n },\n customShadows: {\n ...shadows,\n },\n };\n const baseTheme = createTheme(themeOptions);\n\n /*\n Add mobile text styles to typography\n Has to be done using media queries, otherwise it isn't responsive :(\n https://mui.com/material-ui/customization/typography/#responsive-font-sizes\n */\n Object.keys(typography).forEach((key) => {\n // only key before the suffix split by capital letter (h1Strong -> h1)\n const keyWithoutVariantSuffix = key.split(/(?=[A-Z])/)[0];\n const typographyKey = key as keyof typeof typography;\n baseTheme.typography[typographyKey] = {\n ...baseTheme.typography[typographyKey],\n [baseTheme.breakpoints.down('tablet')]: {\n ...getMobileTextStyle(keyWithoutVariantSuffix as keyof (typeof fontSize)['mobile']),\n },\n };\n });\n\n // Create final theme with component overrides and additional configurations\n return createTheme({\n ...themeOptions,\n typography: baseTheme.typography,\n shape: {\n borderRadius: 4,\n },\n customShadows: baseTheme.customShadows,\n components: {\n MuiAlert: {\n defaultProps: {\n components: {\n CloseIcon: CancelIcon,\n },\n },\n styleOverrides: {\n root: {\n // TODO: Replace with borderRadius from tokens when implemented\n borderRadius: '8px',\n // TODO: Replace with spacing from tokens when implemented\n padding: '24px',\n },\n icon: {\n // TODO: Replace with spacing from tokens when implemented\n marginRight: '12px',\n padding: 0,\n },\n action: {\n padding: 0,\n '& button': {\n marginTop: '-5px',\n },\n },\n message: {\n padding: 0,\n },\n },\n },\n MuiButton: buttonStyleOverrides(baseTheme),\n MuiIconButton: iconButtonOverrides(),\n MuiCard: {\n styleOverrides: {\n root: {\n boxShadow: 'none',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: baseTheme.palette.divider,\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n '&:hover': {\n backgroundColor: baseTheme.palette.semantic.fill['fill-primary-weak'],\n },\n '&:not(:last-child)': {\n borderBottom: `1px solid ${baseTheme.palette.semantic.stroke['stroke-weak']}`,\n },\n },\n },\n },\n MuiTableRow: {\n styleOverrides: {\n root: {\n '&.MuiTableRow-hover:hover': {\n backgroundColor: baseTheme.palette.semantic.fill['fill-secondary'],\n cursor: 'pointer',\n },\n },\n },\n },\n MuiTypography: {\n defaultProps: {\n variantMapping: typographyVariantMapping,\n },\n },\n MuiAutocomplete: autocompleteOverrides(baseTheme),\n MuiButtonBase: buttonBaseOverrides(baseTheme),\n MuiCheckbox: checkboxOverrides(baseTheme),\n MuiChip: chipOverrides(baseTheme),\n MuiFormControlLabel: formControlLabelOverrides(baseTheme),\n MuiFormHelperText: formHelperTextOverrides(baseTheme),\n MuiFormLabel: formLabelOverrides(baseTheme),\n MuiInputBase: inputBaseOverrides(baseTheme),\n MuiInputLabel: inputLabelOverrides(baseTheme),\n MuiListItemText: listItemTextOverrides(baseTheme),\n MuiListSubheader: listSubheaderOverrides(baseTheme),\n MuiMenu: menuOverrides(baseTheme),\n MuiMenuItem: menuItemOverrides(baseTheme),\n MuiRating: ratingOverride(),\n MuiSelect: selectOverrides(baseTheme),\n MuiTab: tabOverrides(baseTheme),\n MuiTabs: tabsOverrides(baseTheme),\n MuiTextField: textFieldOverrides(baseTheme),\n },\n });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","themeOptions","typography","palette","lightColours","darkColours","radius","breakpoints","values","breakpointValues","customShadows","shadows","baseTheme","createTheme","Object","keys","forEach","key","keyWithoutVariantSuffix","split","typographyKey","down","getMobileTextStyle","shape","borderRadius","components","MuiAlert","defaultProps","CloseIcon","CancelIcon","styleOverrides","root","padding","icon","marginRight","action","marginTop","message","MuiButton","buttonStyleOverrides","MuiIconButton","iconButtonOverrides","MuiCard","boxShadow","borderWidth","borderStyle","borderColor","divider","MuiListItemButton","backgroundColor","semantic","fill","borderBottom","stroke","MuiTableRow","cursor","MuiTypography","variantMapping","typographyVariantMapping","MuiAutocomplete","autocompleteOverrides","MuiButtonBase","buttonBaseOverrides","MuiCheckbox","checkboxOverrides","MuiChip","chipOverrides","MuiFormControlLabel","formControlLabelOverrides","MuiFormHelperText","formHelperTextOverrides","MuiFormLabel","formLabelOverrides","MuiInputBase","inputBaseOverrides","MuiInputLabel","inputLabelOverrides","MuiListItemText","listItemTextOverrides","MuiListSubheader","listSubheaderOverrides","MuiMenu","menuOverrides","MuiMenuItem","menuItemOverrides","MuiRating","ratingOverride","MuiSelect","selectOverrides","MuiTab","tabOverrides","MuiTabs","tabsOverrides","MuiTextField","textFieldOverrides","lightTheme","darkTheme"],"mappings":"q4CA+BA,MAAMA,EAA8BC,IAClC,MAAMC,EAA6B,YACjCC,EAAAA,WACAC,QAAkB,UAATH,EAAmBI,EAAAA,aAAeC,EAAAA,mBAC3CC,EAAAA,OACAC,YAAa,CACXC,OAAQC,EAAAA,kBAEVC,cAAe,IACVC,EAAAA,UAGDC,EAAYC,EAAYZ,GAoB9B,OAbAa,OAAOC,KAAKb,EAAAA,YAAYc,SAASC,IAE/B,MAAMC,EAA0BD,EAAIE,MAAM,aAAa,GACjDC,EAAgBH,EACtBL,EAAUV,WAAWkB,GAAiB,IACjCR,EAAUV,WAAWkB,GACxB,CAACR,EAAUL,YAAYc,KAAK,WAAY,IACnCC,EAAAA,mBAAmBJ,QAMrBL,EAAY,IACdZ,EACHC,WAAYU,EAAUV,WACtBqB,MAAO,CACLC,aAAc,GAEhBd,cAAeE,EAAUF,cACzBe,WAAY,CACVC,SAAU,CACRC,aAAc,CACZF,WAAY,CACVG,UAAWC,IAGfC,eAAgB,CACdC,KAAM,CAEJP,aAAc,MAEdQ,QAAS,QAEXC,KAAM,CAEJC,YAAa,OACbF,QAAS,GAEXG,OAAQ,CACNH,QAAS,EACT,WAAY,CACVI,UAAW,SAGfC,QAAS,CACPL,QAAS,KAIfM,UAAWC,EAAAA,qBAAqB3B,GAChC4B,cAAeC,EAAAA,sBACfC,QAAS,CACPZ,eAAgB,CACdC,KAAM,CACJY,UAAW,OACXC,YAAa,MACbC,YAAa,QACbC,YAAalC,EAAUT,QAAQ4C,WAIrCC,kBAAmB,CACjBlB,eAAgB,CACdC,KAAM,CACJ,UAAW,CACTkB,gBAAiBrC,EAAUT,QAAQ+C,SAASC,KAAK,sBAEnD,qBAAsB,CACpBC,aAAc,aAAaxC,EAAUT,QAAQ+C,SAASG,OAAO,qBAKrEC,YAAa,CACXxB,eAAgB,CACdC,KAAM,CACJ,4BAA6B,CAC3BkB,gBAAiBrC,EAAUT,QAAQ+C,SAASC,KAAK,kBACjDI,OAAQ,cAKhBC,cAAe,CACb7B,aAAc,CACZ8B,eAAgBC,EAAAA,2BAGpBC,gBAAiBC,EAAAA,sBAAsBhD,GACvCiD,cAAeC,EAAAA,sBACfC,YAAaC,EAAAA,kBAAkBpD,GAC/BqD,QAASC,EAAAA,cAActD,GACvBuD,oBAAqBC,EAAAA,0BAA0BxD,GAC/CyD,kBAAmBC,EAAAA,wBAAwB1D,GAC3C2D,aAAcC,EAAAA,mBAAmB5D,GACjC6D,aAAcC,EAAAA,mBAAmB9D,GACjC+D,cAAeC,EAAAA,oBAAoBhE,GACnCiE,gBAAiBC,EAAAA,sBAAsBlE,GACvCmE,iBAAkBC,EAAAA,uBAAuBpE,GACzCqE,QAASC,EAAAA,cAActE,GACvBuE,YAAaC,EAAAA,kBAAkBxE,GAC/ByE,UAAWC,EAAAA,iBACXC,UAAWC,EAAAA,gBAAgB5E,GAC3B6E,OAAQC,EAAAA,aAAa9E,GACrB+E,QAASC,EAAAA,cAAchF,GACvBiF,aAAcC,EAAAA,mBAAmBlF,OAK1BmF,EAAahG,EAA2B,SACxCiG,EAAYjG,EAA2B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from"@mui/material/styles/createTheme";import{buttonStyleOverrides as e}from"../components/atoms/Button/buttonThemeOverrides.js";import
|
|
1
|
+
import r from"@mui/material/styles/createTheme";import{buttonStyleOverrides as e}from"../components/atoms/Button/buttonThemeOverrides.js";import o from"../icons/Cancel/index.js";import{autocompleteOverrides as i}from"./overrides/autocompleteOverrides.js";import{buttonBaseOverrides as t}from"./overrides/buttonBaseOverrides.js";import{checkboxOverrides as s}from"./overrides/checkboxOverrides.js";import{chipOverrides as m}from"./overrides/chipOverrides.js";import{formControlLabelOverrides as p}from"./overrides/formControlLabelOverrides.js";import{formHelperTextOverrides as a}from"./overrides/formHelperTextOverrides.js";import{formLabelOverrides as d}from"./overrides/formLabelOverrides.js";import{iconButtonOverrides as n}from"./overrides/iconButtonOverrides.js";import{inputBaseOverrides as u}from"./overrides/inputBaseOverrides.js";import{inputLabelOverrides as l}from"./overrides/inputLabelOverrides.js";import{listItemTextOverrides as v}from"./overrides/listItemTextOverrides.js";import{listSubheaderOverrides as f}from"./overrides/listSubheaderOverrides.js";import{menuItemOverrides as c}from"./overrides/menuItemOverrides.js";import{menuOverrides as b}from"./overrides/menuOverrides.js";import{ratingOverride as h}from"./overrides/ratingOverride.js";import{selectOverrides as M}from"./overrides/selectOverrides.js";import{tabOverrides as j}from"./overrides/tabOverrides.js";import{tabsOverrides as y}from"./overrides/tabsOverrides.js";import{textFieldOverrides as O}from"./overrides/textFieldOverrides.js";import{breakpointValues as g}from"./tokens/breakpoints/breakpoints.js";import{lightColours as k,darkColours as x}from"./tokens/colours/semantic.js";import{radius as T}from"./tokens/radius/radius.js";import{shadows as w}from"./tokens/shadows/shadows.js";import{typographyVariantMapping as B}from"./tokens/typography/variant-mapping.js";import{typography as C,getMobileTextStyle as I}from"./typography.js";const L=L=>{const S={typography:C,palette:"light"===L?k:x,radius:T,breakpoints:{values:g},customShadows:{...w}},R=r(S);return Object.keys(C).forEach((r=>{const e=r.split(/(?=[A-Z])/)[0],o=r;R.typography[o]={...R.typography[o],[R.breakpoints.down("tablet")]:{...I(e)}}})),r({...S,typography:R.typography,shape:{borderRadius:4},customShadows:R.customShadows,components:{MuiAlert:{defaultProps:{components:{CloseIcon:o}},styleOverrides:{root:{borderRadius:"8px",padding:"24px"},icon:{marginRight:"12px",padding:0},action:{padding:0,"& button":{marginTop:"-5px"}},message:{padding:0}}},MuiButton:e(R),MuiIconButton:n(),MuiCard:{styleOverrides:{root:{boxShadow:"none",borderWidth:"1px",borderStyle:"solid",borderColor:R.palette.divider}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:R.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${R.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:R.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}},MuiTypography:{defaultProps:{variantMapping:B}},MuiAutocomplete:i(R),MuiButtonBase:t(),MuiCheckbox:s(R),MuiChip:m(R),MuiFormControlLabel:p(R),MuiFormHelperText:a(R),MuiFormLabel:d(R),MuiInputBase:u(R),MuiInputLabel:l(R),MuiListItemText:v(R),MuiListSubheader:f(R),MuiMenu:b(R),MuiMenuItem:c(R),MuiRating:h(),MuiSelect:M(R),MuiTab:j(R),MuiTabs:y(R),MuiTextField:O(R)}})},S=L("light"),R=L("dark");export{R as darkTheme,S as lightTheme};
|
|
2
2
|
//# sourceMappingURL=flipdishPublicTheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flipdishPublicTheme.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type Theme, type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport { buttonStyleOverrides } from '../components/atoms/Button/buttonThemeOverrides';\nimport
|
|
1
|
+
{"version":3,"file":"flipdishPublicTheme.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type Theme, type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport { buttonStyleOverrides } from '../components/atoms/Button/buttonThemeOverrides';\nimport CancelIcon from '../icons/Cancel';\nimport { autocompleteOverrides } from './overrides/autocompleteOverrides';\nimport { buttonBaseOverrides } from './overrides/buttonBaseOverrides';\nimport { checkboxOverrides } from './overrides/checkboxOverrides';\nimport { chipOverrides } from './overrides/chipOverrides';\nimport { formControlLabelOverrides } from './overrides/formControlLabelOverrides';\nimport { formHelperTextOverrides } from './overrides/formHelperTextOverrides';\nimport { formLabelOverrides } from './overrides/formLabelOverrides';\nimport { iconButtonOverrides } from './overrides/iconButtonOverrides';\nimport { inputBaseOverrides } from './overrides/inputBaseOverrides';\nimport { inputLabelOverrides } from './overrides/inputLabelOverrides';\nimport { listItemTextOverrides } from './overrides/listItemTextOverrides';\nimport { listSubheaderOverrides } from './overrides/listSubheaderOverrides';\nimport { menuItemOverrides } from './overrides/menuItemOverrides';\nimport { menuOverrides } from './overrides/menuOverrides';\nimport { ratingOverride } from './overrides/ratingOverride';\nimport { selectOverrides } from './overrides/selectOverrides';\nimport { tabOverrides } from './overrides/tabOverrides';\nimport { tabsOverrides } from './overrides/tabsOverrides';\nimport { textFieldOverrides } from './overrides/textFieldOverrides';\nimport { breakpointValues } from './tokens/breakpoints/breakpoints';\nimport { darkColours, lightColours } from './tokens/colours/semantic';\nimport { radius } from './tokens/radius/radius';\nimport { shadows } from './tokens/shadows/shadows';\nimport { fontSize } from './tokens/typography/font-size';\nimport { typographyVariantMapping } from './tokens/typography/variant-mapping';\nimport { getMobileTextStyle, typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'dark' | 'light'): Theme => {\n const themeOptions: ThemeOptions = {\n typography,\n palette: mode === 'light' ? lightColours : darkColours,\n radius,\n breakpoints: {\n values: breakpointValues,\n },\n customShadows: {\n ...shadows,\n },\n };\n const baseTheme = createTheme(themeOptions);\n\n /*\n Add mobile text styles to typography\n Has to be done using media queries, otherwise it isn't responsive :(\n https://mui.com/material-ui/customization/typography/#responsive-font-sizes\n */\n Object.keys(typography).forEach((key) => {\n // only key before the suffix split by capital letter (h1Strong -> h1)\n const keyWithoutVariantSuffix = key.split(/(?=[A-Z])/)[0];\n const typographyKey = key as keyof typeof typography;\n baseTheme.typography[typographyKey] = {\n ...baseTheme.typography[typographyKey],\n [baseTheme.breakpoints.down('tablet')]: {\n ...getMobileTextStyle(keyWithoutVariantSuffix as keyof (typeof fontSize)['mobile']),\n },\n };\n });\n\n // Create final theme with component overrides and additional configurations\n return createTheme({\n ...themeOptions,\n typography: baseTheme.typography,\n shape: {\n borderRadius: 4,\n },\n customShadows: baseTheme.customShadows,\n components: {\n MuiAlert: {\n defaultProps: {\n components: {\n CloseIcon: CancelIcon,\n },\n },\n styleOverrides: {\n root: {\n // TODO: Replace with borderRadius from tokens when implemented\n borderRadius: '8px',\n // TODO: Replace with spacing from tokens when implemented\n padding: '24px',\n },\n icon: {\n // TODO: Replace with spacing from tokens when implemented\n marginRight: '12px',\n padding: 0,\n },\n action: {\n padding: 0,\n '& button': {\n marginTop: '-5px',\n },\n },\n message: {\n padding: 0,\n },\n },\n },\n MuiButton: buttonStyleOverrides(baseTheme),\n MuiIconButton: iconButtonOverrides(),\n MuiCard: {\n styleOverrides: {\n root: {\n boxShadow: 'none',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: baseTheme.palette.divider,\n },\n },\n },\n MuiListItemButton: {\n styleOverrides: {\n root: {\n '&:hover': {\n backgroundColor: baseTheme.palette.semantic.fill['fill-primary-weak'],\n },\n '&:not(:last-child)': {\n borderBottom: `1px solid ${baseTheme.palette.semantic.stroke['stroke-weak']}`,\n },\n },\n },\n },\n MuiTableRow: {\n styleOverrides: {\n root: {\n '&.MuiTableRow-hover:hover': {\n backgroundColor: baseTheme.palette.semantic.fill['fill-secondary'],\n cursor: 'pointer',\n },\n },\n },\n },\n MuiTypography: {\n defaultProps: {\n variantMapping: typographyVariantMapping,\n },\n },\n MuiAutocomplete: autocompleteOverrides(baseTheme),\n MuiButtonBase: buttonBaseOverrides(baseTheme),\n MuiCheckbox: checkboxOverrides(baseTheme),\n MuiChip: chipOverrides(baseTheme),\n MuiFormControlLabel: formControlLabelOverrides(baseTheme),\n MuiFormHelperText: formHelperTextOverrides(baseTheme),\n MuiFormLabel: formLabelOverrides(baseTheme),\n MuiInputBase: inputBaseOverrides(baseTheme),\n MuiInputLabel: inputLabelOverrides(baseTheme),\n MuiListItemText: listItemTextOverrides(baseTheme),\n MuiListSubheader: listSubheaderOverrides(baseTheme),\n MuiMenu: menuOverrides(baseTheme),\n MuiMenuItem: menuItemOverrides(baseTheme),\n MuiRating: ratingOverride(),\n MuiSelect: selectOverrides(baseTheme),\n MuiTab: tabOverrides(baseTheme),\n MuiTabs: tabsOverrides(baseTheme),\n MuiTextField: textFieldOverrides(baseTheme),\n },\n });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","themeOptions","typography","palette","lightColours","darkColours","radius","breakpoints","values","breakpointValues","customShadows","shadows","baseTheme","createTheme","Object","keys","forEach","key","keyWithoutVariantSuffix","split","typographyKey","down","getMobileTextStyle","shape","borderRadius","components","MuiAlert","defaultProps","CloseIcon","CancelIcon","styleOverrides","root","padding","icon","marginRight","action","marginTop","message","MuiButton","buttonStyleOverrides","MuiIconButton","iconButtonOverrides","MuiCard","boxShadow","borderWidth","borderStyle","borderColor","divider","MuiListItemButton","backgroundColor","semantic","fill","borderBottom","stroke","MuiTableRow","cursor","MuiTypography","variantMapping","typographyVariantMapping","MuiAutocomplete","autocompleteOverrides","MuiButtonBase","buttonBaseOverrides","MuiCheckbox","checkboxOverrides","MuiChip","chipOverrides","MuiFormControlLabel","formControlLabelOverrides","MuiFormHelperText","formHelperTextOverrides","MuiFormLabel","formLabelOverrides","MuiInputBase","inputBaseOverrides","MuiInputLabel","inputLabelOverrides","MuiListItemText","listItemTextOverrides","MuiListSubheader","listSubheaderOverrides","MuiMenu","menuOverrides","MuiMenuItem","menuItemOverrides","MuiRating","ratingOverride","MuiSelect","selectOverrides","MuiTab","tabOverrides","MuiTabs","tabsOverrides","MuiTextField","textFieldOverrides","lightTheme","darkTheme"],"mappings":"i4DA+BA,MAAMA,EAA8BC,IAClC,MAAMC,EAA6B,CACjCC,aACAC,QAAkB,UAATH,EAAmBI,EAAeC,EAC3CC,SACAC,YAAa,CACXC,OAAQC,GAEVC,cAAe,IACVC,IAGDC,EAAYC,EAAYZ,GAoB9B,OAbAa,OAAOC,KAAKb,GAAYc,SAASC,IAE/B,MAAMC,EAA0BD,EAAIE,MAAM,aAAa,GACjDC,EAAgBH,EACtBL,EAAUV,WAAWkB,GAAiB,IACjCR,EAAUV,WAAWkB,GACxB,CAACR,EAAUL,YAAYc,KAAK,WAAY,IACnCC,EAAmBJ,QAMrBL,EAAY,IACdZ,EACHC,WAAYU,EAAUV,WACtBqB,MAAO,CACLC,aAAc,GAEhBd,cAAeE,EAAUF,cACzBe,WAAY,CACVC,SAAU,CACRC,aAAc,CACZF,WAAY,CACVG,UAAWC,IAGfC,eAAgB,CACdC,KAAM,CAEJP,aAAc,MAEdQ,QAAS,QAEXC,KAAM,CAEJC,YAAa,OACbF,QAAS,GAEXG,OAAQ,CACNH,QAAS,EACT,WAAY,CACVI,UAAW,SAGfC,QAAS,CACPL,QAAS,KAIfM,UAAWC,EAAqB3B,GAChC4B,cAAeC,IACfC,QAAS,CACPZ,eAAgB,CACdC,KAAM,CACJY,UAAW,OACXC,YAAa,MACbC,YAAa,QACbC,YAAalC,EAAUT,QAAQ4C,WAIrCC,kBAAmB,CACjBlB,eAAgB,CACdC,KAAM,CACJ,UAAW,CACTkB,gBAAiBrC,EAAUT,QAAQ+C,SAASC,KAAK,sBAEnD,qBAAsB,CACpBC,aAAc,aAAaxC,EAAUT,QAAQ+C,SAASG,OAAO,qBAKrEC,YAAa,CACXxB,eAAgB,CACdC,KAAM,CACJ,4BAA6B,CAC3BkB,gBAAiBrC,EAAUT,QAAQ+C,SAASC,KAAK,kBACjDI,OAAQ,cAKhBC,cAAe,CACb7B,aAAc,CACZ8B,eAAgBC,IAGpBC,gBAAiBC,EAAsBhD,GACvCiD,cAAeC,IACfC,YAAaC,EAAkBpD,GAC/BqD,QAASC,EAActD,GACvBuD,oBAAqBC,EAA0BxD,GAC/CyD,kBAAmBC,EAAwB1D,GAC3C2D,aAAcC,EAAmB5D,GACjC6D,aAAcC,EAAmB9D,GACjC+D,cAAeC,EAAoBhE,GACnCiE,gBAAiBC,EAAsBlE,GACvCmE,iBAAkBC,EAAuBpE,GACzCqE,QAASC,EAActE,GACvBuE,YAAaC,EAAkBxE,GAC/ByE,UAAWC,IACXC,UAAWC,EAAgB5E,GAC3B6E,OAAQC,EAAa9E,GACrB+E,QAASC,EAAchF,GACvBiF,aAAcC,EAAmBlF,OAK1BmF,EAAahG,EAA2B,SACxCiG,EAAYjG,EAA2B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";require("@mui/material/styles");exports.iconButtonOverrides=()=>({styleOverrides:{root:{color:"inherit",verticalAlign:"middle","&.Mui-focusVisible":{outline:"2px solid",outlineOffset:"2px"},"&.MuiIconButton-sizeSmall":{height:"32px",width:"32px"},"&.MuiIconButton-sizeMedium":{height:"48px",width:"48px"},"&.MuiIconButton-sizeSmall > div > svg":{height:"16px",width:"16px"},"&.MuiIconButton-sizeMedium > div > svg":{height:"24px",width:"24px"}}}});
|
|
2
|
+
//# sourceMappingURL=iconButtonOverrides.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"iconButtonOverrides.cjs.js","sources":["../../../src/themes/overrides/iconButtonOverrides.ts"],"sourcesContent":["import { type Components, type Theme } from '@mui/material/styles';\n\nexport const iconButtonOverrides = (): Components<Theme>['MuiIconButton'] => ({\n styleOverrides: {\n root: {\n color: 'inherit',\n verticalAlign: 'middle',\n '&.Mui-focusVisible': {\n outline: '2px solid',\n outlineOffset: '2px',\n },\n '&.MuiIconButton-sizeSmall': {\n height: '32px',\n width: '32px',\n },\n '&.MuiIconButton-sizeMedium': {\n height: '48px',\n width: '48px',\n },\n '&.MuiIconButton-sizeSmall > div > svg': {\n height: '16px',\n width: '16px',\n },\n '&.MuiIconButton-sizeMedium > div > svg': {\n height: '24px',\n width: '24px',\n },\n },\n },\n});\n"],"names":["styleOverrides","root","color","verticalAlign","outline","outlineOffset","height","width"],"mappings":"yEAEmC,KAAA,CACjCA,eAAgB,CACdC,KAAM,CACJC,MAAO,UACPC,cAAe,SACf,qBAAsB,CACpBC,QAAS,YACTC,cAAe,OAEjB,4BAA6B,CAC3BC,OAAQ,OACRC,MAAO,QAET,6BAA8B,CAC5BD,OAAQ,OACRC,MAAO,QAET,wCAAyC,CACvCD,OAAQ,OACRC,MAAO,QAET,yCAA0C,CACxCD,OAAQ,OACRC,MAAO"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import"@mui/material/styles";const i=()=>({styleOverrides:{root:{color:"inherit",verticalAlign:"middle","&.Mui-focusVisible":{outline:"2px solid",outlineOffset:"2px"},"&.MuiIconButton-sizeSmall":{height:"32px",width:"32px"},"&.MuiIconButton-sizeMedium":{height:"48px",width:"48px"},"&.MuiIconButton-sizeSmall > div > svg":{height:"16px",width:"16px"},"&.MuiIconButton-sizeMedium > div > svg":{height:"24px",width:"24px"}}}});export{i as iconButtonOverrides};
|
|
2
|
+
//# sourceMappingURL=iconButtonOverrides.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"iconButtonOverrides.js","sources":["../../../src/themes/overrides/iconButtonOverrides.ts"],"sourcesContent":["import { type Components, type Theme } from '@mui/material/styles';\n\nexport const iconButtonOverrides = (): Components<Theme>['MuiIconButton'] => ({\n styleOverrides: {\n root: {\n color: 'inherit',\n verticalAlign: 'middle',\n '&.Mui-focusVisible': {\n outline: '2px solid',\n outlineOffset: '2px',\n },\n '&.MuiIconButton-sizeSmall': {\n height: '32px',\n width: '32px',\n },\n '&.MuiIconButton-sizeMedium': {\n height: '48px',\n width: '48px',\n },\n '&.MuiIconButton-sizeSmall > div > svg': {\n height: '16px',\n width: '16px',\n },\n '&.MuiIconButton-sizeMedium > div > svg': {\n height: '24px',\n width: '24px',\n },\n },\n },\n});\n"],"names":["iconButtonOverrides","styleOverrides","root","color","verticalAlign","outline","outlineOffset","height","width"],"mappings":"6BAEO,MAAMA,EAAsB,KAAA,CACjCC,eAAgB,CACdC,KAAM,CACJC,MAAO,UACPC,cAAe,SACf,qBAAsB,CACpBC,QAAS,YACTC,cAAe,OAEjB,4BAA6B,CAC3BC,OAAQ,OACRC,MAAO,QAET,6BAA8B,CAC5BD,OAAQ,OACRC,MAAO,QAET,wCAAyC,CACvCD,OAAQ,OACRC,MAAO,QAET,yCAA0C,CACxCD,OAAQ,OACRC,MAAO"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"iconButtonThemeOverrides.cjs.js","sources":["../../../../src/components/atoms/IconButton/iconButtonThemeOverrides.ts"],"sourcesContent":["interface IconButtonStyleOverrides {\n styleOverrides: {\n sizeSmall: Record<string, string | { [key: string]: string }>;\n sizeMedium: Record<string, string | { [key: string]: string }>;\n };\n}\n\nexport const iconButtonStyleOverrides = (): IconButtonStyleOverrides => ({\n styleOverrides: {\n sizeSmall: {\n height: '32px',\n width: '32px',\n },\n sizeMedium: {\n height: '48px',\n width: '48px',\n },\n\n },\n});\n"],"names":["styleOverrides","sizeSmall","height","width","sizeMedium"],"mappings":"8CAOwC,KAAA,CACpCA,eAAgB,CACdC,UAAW,CACTC,OAAQ,OACRC,MAAO,QAETC,WAAY,CACVF,OAAQ,OACRC,MAAO"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
interface IconButtonStyleOverrides {
|
|
2
|
-
styleOverrides: {
|
|
3
|
-
sizeSmall: Record<string, string | {
|
|
4
|
-
[key: string]: string;
|
|
5
|
-
}>;
|
|
6
|
-
sizeMedium: Record<string, string | {
|
|
7
|
-
[key: string]: string;
|
|
8
|
-
}>;
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
declare const iconButtonStyleOverrides: () => IconButtonStyleOverrides;
|
|
12
|
-
|
|
13
|
-
export { iconButtonStyleOverrides };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"iconButtonThemeOverrides.js","sources":["../../../../src/components/atoms/IconButton/iconButtonThemeOverrides.ts"],"sourcesContent":["interface IconButtonStyleOverrides {\n styleOverrides: {\n sizeSmall: Record<string, string | { [key: string]: string }>;\n sizeMedium: Record<string, string | { [key: string]: string }>;\n };\n}\n\nexport const iconButtonStyleOverrides = (): IconButtonStyleOverrides => ({\n styleOverrides: {\n sizeSmall: {\n height: '32px',\n width: '32px',\n },\n sizeMedium: {\n height: '48px',\n width: '48px',\n },\n\n },\n});\n"],"names":["iconButtonStyleOverrides","styleOverrides","sizeSmall","height","width","sizeMedium"],"mappings":"AAOO,MAAMA,EAA2B,KAAA,CACpCC,eAAgB,CACdC,UAAW,CACTC,OAAQ,OACRC,MAAO,QAETC,WAAY,CACVF,OAAQ,OACRC,MAAO"}
|