@cgi-learning-hub/ui 0.0.1-dev
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/_virtual/_commonjsHelpers.js +5 -0
- package/dist/_virtual/index.js +3 -0
- package/dist/_virtual/index2.js +3 -0
- package/dist/_virtual/index3.js +3 -0
- package/dist/_virtual/react-is.development.js +3 -0
- package/dist/_virtual/react-is.development2.js +3 -0
- package/dist/_virtual/react-is.production.min.js +3 -0
- package/dist/_virtual/react-is.production.min2.js +3 -0
- package/dist/components/BasicButtons/BasicButtons.d.ts +2 -0
- package/dist/components/BasicButtons/BasicButtons.js +14 -0
- package/dist/components/BasicButtons/BasicButtons.stories.d.ts +5 -0
- package/dist/components/BasicButtons/index.d.ts +2 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/node_modules/.pnpm/@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js +8 -0
- package/dist/node_modules/.pnpm/@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/extends.js +16 -0
- package/dist/node_modules/.pnpm/@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js +9 -0
- package/dist/node_modules/.pnpm/@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js +14 -0
- package/dist/node_modules/.pnpm/@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js +9 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/Button/Button.js +379 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/Button/buttonClasses.js +10 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/ButtonBase.js +477 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/Ripple.js +85 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/TouchRipple.js +340 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/buttonBaseClasses.js +9 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/touchRippleClasses.js +5 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonGroup/ButtonGroupButtonContext.js +12 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonGroup/ButtonGroupContext.js +12 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/Stack/Stack.js +63 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/blue.js +19 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/common.js +7 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/green.js +19 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/grey.js +19 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/lightBlue.js +19 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/orange.js +19 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/purple.js +19 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/red.js +19 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/createMixins.js +19 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/createPalette.js +308 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/createTheme.js +82 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/createTransitions.js +91 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/createTypography.js +93 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/defaultTheme.js +6 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/identifier.js +3 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/shadows.js +11 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/styled.js +12 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/useThemeProps.js +17 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/zIndex.js +15 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/utils/capitalize.js +5 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/utils/useEventCallback.js +5 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/utils/useForkRef.js +5 -0
- package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/utils/useIsFocusVisible.js +5 -0
- package/dist/node_modules/.pnpm/@mui_styled-engine@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_react@18.2.0/node_modules/@mui/styled-engine/index.js +36 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/Stack/createStack.js +176 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/borders.js +51 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/breakpoints.js +123 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/colorManipulator.js +236 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/compose.js +26 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/createStyled.js +322 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/createTheme/createBreakpoints.js +82 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/createTheme/createSpacing.js +34 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/createTheme/createTheme.js +43 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/createTheme/shape.js +6 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/cssGrid.js +86 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/memoize.js +11 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/merge.js +12 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/palette.js +28 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/propsToClassKey.js +30 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/responsivePropType.js +6 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/sizing.js +67 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/spacing.js +144 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/style.js +77 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/styleFunctionSx/defaultSxConfig.js +294 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/styleFunctionSx/extendSxProp.js +51 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/styleFunctionSx/styleFunctionSx.js +129 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/styled.js +5 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/useTheme.js +9 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/useThemeProps/getThemeProps.js +15 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/useThemeProps/useThemeProps.js +22 -0
- package/dist/node_modules/.pnpm/@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/useThemeWithoutDefault.js +12 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/ClassNameGenerator/ClassNameGenerator.js +18 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/capitalize/capitalize.js +14 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/chainPropTypes/chainPropTypes.js +10 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/clamp/clamp.js +5 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/composeClasses/composeClasses.js +23 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/deepmerge.js +44 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/elementTypeAcceptingRef.js +43 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/formatMuiErrorMessage/formatMuiErrorMessage.js +21 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js +22 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js +11 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/getDisplayName.js +49 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/refType.js +6 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/resolveProps.js +37 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/setRef.js +22 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/useEnhancedEffect/useEnhancedEffect.js +12 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js +19 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/useForkRef/useForkRef.js +23 -0
- package/dist/node_modules/.pnpm/@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/useIsFocusVisible.js +156 -0
- package/dist/node_modules/.pnpm/clsx@2.1.0/node_modules/clsx/dist/clsx.js +3 -0
- package/dist/node_modules/.pnpm/object-assign@4.1.1/node_modules/object-assign/index.js +99 -0
- package/dist/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/checkPropTypes.js +115 -0
- package/dist/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/factoryWithThrowingShims.js +74 -0
- package/dist/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/factoryWithTypeCheckers.js +625 -0
- package/dist/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.js +30 -0
- package/dist/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/lib/ReactPropTypesSecret.js +21 -0
- package/dist/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/lib/has.js +11 -0
- package/dist/node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.development.js +190 -0
- package/dist/node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js +26 -0
- package/dist/node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/index.js +19 -0
- package/dist/node_modules/.pnpm/react-is@18.2.0/node_modules/react-is/cjs/react-is.development.js +230 -0
- package/dist/node_modules/.pnpm/react-is@18.2.0/node_modules/react-is/cjs/react-is.production.min.js +26 -0
- package/dist/node_modules/.pnpm/react-is@18.2.0/node_modules/react-is/index.js +13 -0
- package/dist/node_modules/.pnpm/react-transition-group@4.4.5_react-dom@18.2.0_react@18.2.0/node_modules/react-transition-group/esm/TransitionGroup.js +191 -0
- package/dist/node_modules/.pnpm/react-transition-group@4.4.5_react-dom@18.2.0_react@18.2.0/node_modules/react-transition-group/esm/TransitionGroupContext.js +5 -0
- package/dist/node_modules/.pnpm/react-transition-group@4.4.5_react-dom@18.2.0_react@18.2.0/node_modules/react-transition-group/esm/utils/ChildMapping.js +143 -0
- package/package.json +46 -0
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import emStyled from '@emotion/styled';
|
|
2
|
+
export { ThemeContext, css, keyframes } from '@emotion/react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @mui/styled-engine v5.15.6
|
|
6
|
+
*
|
|
7
|
+
* @license MIT
|
|
8
|
+
* This source code is licensed under the MIT license found in the
|
|
9
|
+
* LICENSE file in the root directory of this source tree.
|
|
10
|
+
*/
|
|
11
|
+
function styled(tag, options) {
|
|
12
|
+
const stylesFactory = emStyled(tag, options);
|
|
13
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
14
|
+
return (...styles) => {
|
|
15
|
+
const component = typeof tag === 'string' ? `"${tag}"` : 'component';
|
|
16
|
+
if (styles.length === 0) {
|
|
17
|
+
console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
|
|
18
|
+
} else if (styles.some(style => style === undefined)) {
|
|
19
|
+
console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
|
|
20
|
+
}
|
|
21
|
+
return stylesFactory(...styles);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return stylesFactory;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
28
|
+
const internal_processStyles = (tag, processor) => {
|
|
29
|
+
// Emotion attaches all the styles as `__emotion_styles`.
|
|
30
|
+
// Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
|
|
31
|
+
if (Array.isArray(tag.__emotion_styles)) {
|
|
32
|
+
tag.__emotion_styles = processor(tag.__emotion_styles);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export { styled as default, internal_processStyles };
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from '../../../../../../@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js';
|
|
2
|
+
import _extends from '../../../../../../@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/extends.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import PropTypes from '../../../../../../prop-types@15.8.1/node_modules/prop-types/index.js';
|
|
5
|
+
import { clsx } from '../../../../../../clsx@2.1.0/node_modules/clsx/dist/clsx.js';
|
|
6
|
+
import styled from '../styled.js';
|
|
7
|
+
import { handleBreakpoints, resolveBreakpointValues, mergeBreakpointsInOrder } from '../breakpoints.js';
|
|
8
|
+
import { createUnarySpacing, getValue } from '../spacing.js';
|
|
9
|
+
import { jsx } from 'react/jsx-runtime';
|
|
10
|
+
import createTheme from '../createTheme/createTheme.js';
|
|
11
|
+
import deepmerge from '../../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/deepmerge.js';
|
|
12
|
+
import extendSxProp from '../styleFunctionSx/extendSxProp.js';
|
|
13
|
+
import useThemeProps from '../useThemeProps/useThemeProps.js';
|
|
14
|
+
import composeClasses from '../../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/composeClasses/composeClasses.js';
|
|
15
|
+
import generateUtilityClass from '../../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js';
|
|
16
|
+
|
|
17
|
+
const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
|
18
|
+
const defaultTheme = createTheme();
|
|
19
|
+
// widening Theme to any so that the consumer can own the theme structure.
|
|
20
|
+
const defaultCreateStyledComponent = styled('div', {
|
|
21
|
+
name: 'MuiStack',
|
|
22
|
+
slot: 'Root',
|
|
23
|
+
overridesResolver: (props, styles) => styles.root
|
|
24
|
+
});
|
|
25
|
+
function useThemePropsDefault(props) {
|
|
26
|
+
return useThemeProps({
|
|
27
|
+
props,
|
|
28
|
+
name: 'MuiStack',
|
|
29
|
+
defaultTheme
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Return an array with the separator React element interspersed between
|
|
35
|
+
* each React node of the input children.
|
|
36
|
+
*
|
|
37
|
+
* > joinChildren([1,2,3], 0)
|
|
38
|
+
* [1,0,2,0,3]
|
|
39
|
+
*/
|
|
40
|
+
function joinChildren(children, separator) {
|
|
41
|
+
const childrenArray = React.Children.toArray(children).filter(Boolean);
|
|
42
|
+
return childrenArray.reduce((output, child, index) => {
|
|
43
|
+
output.push(child);
|
|
44
|
+
if (index < childrenArray.length - 1) {
|
|
45
|
+
output.push( /*#__PURE__*/React.cloneElement(separator, {
|
|
46
|
+
key: `separator-${index}`
|
|
47
|
+
}));
|
|
48
|
+
}
|
|
49
|
+
return output;
|
|
50
|
+
}, []);
|
|
51
|
+
}
|
|
52
|
+
const getSideFromDirection = direction => {
|
|
53
|
+
return {
|
|
54
|
+
row: 'Left',
|
|
55
|
+
'row-reverse': 'Right',
|
|
56
|
+
column: 'Top',
|
|
57
|
+
'column-reverse': 'Bottom'
|
|
58
|
+
}[direction];
|
|
59
|
+
};
|
|
60
|
+
const style = ({
|
|
61
|
+
ownerState,
|
|
62
|
+
theme
|
|
63
|
+
}) => {
|
|
64
|
+
let styles = _extends({
|
|
65
|
+
display: 'flex',
|
|
66
|
+
flexDirection: 'column'
|
|
67
|
+
}, handleBreakpoints({
|
|
68
|
+
theme
|
|
69
|
+
}, resolveBreakpointValues({
|
|
70
|
+
values: ownerState.direction,
|
|
71
|
+
breakpoints: theme.breakpoints.values
|
|
72
|
+
}), propValue => ({
|
|
73
|
+
flexDirection: propValue
|
|
74
|
+
})));
|
|
75
|
+
if (ownerState.spacing) {
|
|
76
|
+
const transformer = createUnarySpacing(theme);
|
|
77
|
+
const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
|
|
78
|
+
if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
|
|
79
|
+
acc[breakpoint] = true;
|
|
80
|
+
}
|
|
81
|
+
return acc;
|
|
82
|
+
}, {});
|
|
83
|
+
const directionValues = resolveBreakpointValues({
|
|
84
|
+
values: ownerState.direction,
|
|
85
|
+
base
|
|
86
|
+
});
|
|
87
|
+
const spacingValues = resolveBreakpointValues({
|
|
88
|
+
values: ownerState.spacing,
|
|
89
|
+
base
|
|
90
|
+
});
|
|
91
|
+
if (typeof directionValues === 'object') {
|
|
92
|
+
Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
|
|
93
|
+
const directionValue = directionValues[breakpoint];
|
|
94
|
+
if (!directionValue) {
|
|
95
|
+
const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
|
|
96
|
+
directionValues[breakpoint] = previousDirectionValue;
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
const styleFromPropValue = (propValue, breakpoint) => {
|
|
101
|
+
if (ownerState.useFlexGap) {
|
|
102
|
+
return {
|
|
103
|
+
gap: getValue(transformer, propValue)
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
return {
|
|
107
|
+
// The useFlexGap={false} implement relies on each child to give up control of the margin.
|
|
108
|
+
// We need to reset the margin to avoid double spacing.
|
|
109
|
+
'& > :not(style):not(style)': {
|
|
110
|
+
margin: 0
|
|
111
|
+
},
|
|
112
|
+
'& > :not(style) ~ :not(style)': {
|
|
113
|
+
[`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
styles = deepmerge(styles, handleBreakpoints({
|
|
118
|
+
theme
|
|
119
|
+
}, spacingValues, styleFromPropValue));
|
|
120
|
+
}
|
|
121
|
+
styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
|
|
122
|
+
return styles;
|
|
123
|
+
};
|
|
124
|
+
function createStack(options = {}) {
|
|
125
|
+
const {
|
|
126
|
+
// This will allow adding custom styled fn (for example for custom sx style function)
|
|
127
|
+
createStyledComponent = defaultCreateStyledComponent,
|
|
128
|
+
useThemeProps = useThemePropsDefault,
|
|
129
|
+
componentName = 'MuiStack'
|
|
130
|
+
} = options;
|
|
131
|
+
const useUtilityClasses = () => {
|
|
132
|
+
const slots = {
|
|
133
|
+
root: ['root']
|
|
134
|
+
};
|
|
135
|
+
return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
|
|
136
|
+
};
|
|
137
|
+
const StackRoot = createStyledComponent(style);
|
|
138
|
+
const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
|
|
139
|
+
const themeProps = useThemeProps(inProps);
|
|
140
|
+
const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
|
|
141
|
+
const {
|
|
142
|
+
component = 'div',
|
|
143
|
+
direction = 'column',
|
|
144
|
+
spacing = 0,
|
|
145
|
+
divider,
|
|
146
|
+
children,
|
|
147
|
+
className,
|
|
148
|
+
useFlexGap = false
|
|
149
|
+
} = props,
|
|
150
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
151
|
+
const ownerState = {
|
|
152
|
+
direction,
|
|
153
|
+
spacing,
|
|
154
|
+
useFlexGap
|
|
155
|
+
};
|
|
156
|
+
const classes = useUtilityClasses();
|
|
157
|
+
return /*#__PURE__*/jsx(StackRoot, _extends({
|
|
158
|
+
as: component,
|
|
159
|
+
ownerState: ownerState,
|
|
160
|
+
ref: ref,
|
|
161
|
+
className: clsx(classes.root, className)
|
|
162
|
+
}, other, {
|
|
163
|
+
children: divider ? joinChildren(children, divider) : children
|
|
164
|
+
}));
|
|
165
|
+
});
|
|
166
|
+
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
|
|
167
|
+
children: PropTypes.node,
|
|
168
|
+
direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
|
|
169
|
+
divider: PropTypes.node,
|
|
170
|
+
spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
|
171
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
172
|
+
} : void 0;
|
|
173
|
+
return Stack;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
export { createStack as default, style };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import responsivePropType from './responsivePropType.js';
|
|
2
|
+
import style from './style.js';
|
|
3
|
+
import compose from './compose.js';
|
|
4
|
+
import { createUnaryUnit, getValue } from './spacing.js';
|
|
5
|
+
import { handleBreakpoints } from './breakpoints.js';
|
|
6
|
+
|
|
7
|
+
function borderTransform(value) {
|
|
8
|
+
if (typeof value !== 'number') {
|
|
9
|
+
return value;
|
|
10
|
+
}
|
|
11
|
+
return `${value}px solid`;
|
|
12
|
+
}
|
|
13
|
+
function createBorderStyle(prop, transform) {
|
|
14
|
+
return style({
|
|
15
|
+
prop,
|
|
16
|
+
themeKey: 'borders',
|
|
17
|
+
transform
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
const border = createBorderStyle('border', borderTransform);
|
|
21
|
+
const borderTop = createBorderStyle('borderTop', borderTransform);
|
|
22
|
+
const borderRight = createBorderStyle('borderRight', borderTransform);
|
|
23
|
+
const borderBottom = createBorderStyle('borderBottom', borderTransform);
|
|
24
|
+
const borderLeft = createBorderStyle('borderLeft', borderTransform);
|
|
25
|
+
const borderColor = createBorderStyle('borderColor');
|
|
26
|
+
const borderTopColor = createBorderStyle('borderTopColor');
|
|
27
|
+
const borderRightColor = createBorderStyle('borderRightColor');
|
|
28
|
+
const borderBottomColor = createBorderStyle('borderBottomColor');
|
|
29
|
+
const borderLeftColor = createBorderStyle('borderLeftColor');
|
|
30
|
+
const outline = createBorderStyle('outline', borderTransform);
|
|
31
|
+
const outlineColor = createBorderStyle('outlineColor');
|
|
32
|
+
|
|
33
|
+
// false positive
|
|
34
|
+
// eslint-disable-next-line react/function-component-definition
|
|
35
|
+
const borderRadius = props => {
|
|
36
|
+
if (props.borderRadius !== undefined && props.borderRadius !== null) {
|
|
37
|
+
const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
|
|
38
|
+
const styleFromPropValue = propValue => ({
|
|
39
|
+
borderRadius: getValue(transformer, propValue)
|
|
40
|
+
});
|
|
41
|
+
return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
|
|
42
|
+
}
|
|
43
|
+
return null;
|
|
44
|
+
};
|
|
45
|
+
borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
|
|
46
|
+
borderRadius: responsivePropType
|
|
47
|
+
} : {};
|
|
48
|
+
borderRadius.filterProps = ['borderRadius'];
|
|
49
|
+
compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
|
|
50
|
+
|
|
51
|
+
export { border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRadius, borderRight, borderRightColor, borderTop, borderTopColor, borderTransform, outline, outlineColor };
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import deepmerge from '../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/deepmerge.js';
|
|
2
|
+
|
|
3
|
+
// The breakpoint **start** at this value.
|
|
4
|
+
// For instance with the first breakpoint xs: [xs, sm[.
|
|
5
|
+
const values = {
|
|
6
|
+
xs: 0,
|
|
7
|
+
// phone
|
|
8
|
+
sm: 600,
|
|
9
|
+
// tablet
|
|
10
|
+
md: 900,
|
|
11
|
+
// small laptop
|
|
12
|
+
lg: 1200,
|
|
13
|
+
// desktop
|
|
14
|
+
xl: 1536 // large screen
|
|
15
|
+
};
|
|
16
|
+
const defaultBreakpoints = {
|
|
17
|
+
// Sorted ASC by size. That's important.
|
|
18
|
+
// It can't be configured as it's used statically for propTypes.
|
|
19
|
+
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
|
|
20
|
+
up: key => `@media (min-width:${values[key]}px)`
|
|
21
|
+
};
|
|
22
|
+
function handleBreakpoints(props, propValue, styleFromPropValue) {
|
|
23
|
+
const theme = props.theme || {};
|
|
24
|
+
if (Array.isArray(propValue)) {
|
|
25
|
+
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
|
|
26
|
+
return propValue.reduce((acc, item, index) => {
|
|
27
|
+
acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
|
|
28
|
+
return acc;
|
|
29
|
+
}, {});
|
|
30
|
+
}
|
|
31
|
+
if (typeof propValue === 'object') {
|
|
32
|
+
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
|
|
33
|
+
return Object.keys(propValue).reduce((acc, breakpoint) => {
|
|
34
|
+
// key is breakpoint
|
|
35
|
+
if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
|
|
36
|
+
const mediaKey = themeBreakpoints.up(breakpoint);
|
|
37
|
+
acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
|
|
38
|
+
} else {
|
|
39
|
+
const cssKey = breakpoint;
|
|
40
|
+
acc[cssKey] = propValue[cssKey];
|
|
41
|
+
}
|
|
42
|
+
return acc;
|
|
43
|
+
}, {});
|
|
44
|
+
}
|
|
45
|
+
const output = styleFromPropValue(propValue);
|
|
46
|
+
return output;
|
|
47
|
+
}
|
|
48
|
+
function createEmptyBreakpointObject(breakpointsInput = {}) {
|
|
49
|
+
var _breakpointsInput$key;
|
|
50
|
+
const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
|
|
51
|
+
const breakpointStyleKey = breakpointsInput.up(key);
|
|
52
|
+
acc[breakpointStyleKey] = {};
|
|
53
|
+
return acc;
|
|
54
|
+
}, {});
|
|
55
|
+
return breakpointsInOrder || {};
|
|
56
|
+
}
|
|
57
|
+
function removeUnusedBreakpoints(breakpointKeys, style) {
|
|
58
|
+
return breakpointKeys.reduce((acc, key) => {
|
|
59
|
+
const breakpointOutput = acc[key];
|
|
60
|
+
const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
|
|
61
|
+
if (isBreakpointUnused) {
|
|
62
|
+
delete acc[key];
|
|
63
|
+
}
|
|
64
|
+
return acc;
|
|
65
|
+
}, style);
|
|
66
|
+
}
|
|
67
|
+
function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
|
|
68
|
+
const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
|
|
69
|
+
const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
|
|
70
|
+
return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// compute base for responsive values; e.g.,
|
|
74
|
+
// [1,2,3] => {xs: true, sm: true, md: true}
|
|
75
|
+
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
|
|
76
|
+
function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
|
|
77
|
+
// fixed value
|
|
78
|
+
if (typeof breakpointValues !== 'object') {
|
|
79
|
+
return {};
|
|
80
|
+
}
|
|
81
|
+
const base = {};
|
|
82
|
+
const breakpointsKeys = Object.keys(themeBreakpoints);
|
|
83
|
+
if (Array.isArray(breakpointValues)) {
|
|
84
|
+
breakpointsKeys.forEach((breakpoint, i) => {
|
|
85
|
+
if (i < breakpointValues.length) {
|
|
86
|
+
base[breakpoint] = true;
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
} else {
|
|
90
|
+
breakpointsKeys.forEach(breakpoint => {
|
|
91
|
+
if (breakpointValues[breakpoint] != null) {
|
|
92
|
+
base[breakpoint] = true;
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
return base;
|
|
97
|
+
}
|
|
98
|
+
function resolveBreakpointValues({
|
|
99
|
+
values: breakpointValues,
|
|
100
|
+
breakpoints: themeBreakpoints,
|
|
101
|
+
base: customBase
|
|
102
|
+
}) {
|
|
103
|
+
const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
|
|
104
|
+
const keys = Object.keys(base);
|
|
105
|
+
if (keys.length === 0) {
|
|
106
|
+
return breakpointValues;
|
|
107
|
+
}
|
|
108
|
+
let previous;
|
|
109
|
+
return keys.reduce((acc, breakpoint, i) => {
|
|
110
|
+
if (Array.isArray(breakpointValues)) {
|
|
111
|
+
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
|
|
112
|
+
previous = i;
|
|
113
|
+
} else if (typeof breakpointValues === 'object') {
|
|
114
|
+
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
|
|
115
|
+
previous = breakpoint;
|
|
116
|
+
} else {
|
|
117
|
+
acc[breakpoint] = breakpointValues;
|
|
118
|
+
}
|
|
119
|
+
return acc;
|
|
120
|
+
}, {});
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export { computeBreakpointsBase, createEmptyBreakpointObject, handleBreakpoints, mergeBreakpointsInOrder, removeUnusedBreakpoints, resolveBreakpointValues, values };
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
import clamp from '../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/clamp/clamp.js';
|
|
2
|
+
import formatMuiErrorMessage from '../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/formatMuiErrorMessage/formatMuiErrorMessage.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Returns a number whose value is limited to the given range.
|
|
6
|
+
* @param {number} value The value to be clamped
|
|
7
|
+
* @param {number} min The lower boundary of the output range
|
|
8
|
+
* @param {number} max The upper boundary of the output range
|
|
9
|
+
* @returns {number} A number in the range [min, max]
|
|
10
|
+
*/
|
|
11
|
+
function clampWrapper(value, min = 0, max = 1) {
|
|
12
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
13
|
+
if (value < min || value > max) {
|
|
14
|
+
console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return clamp(value, min, max);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Converts a color from CSS hex format to CSS rgb format.
|
|
22
|
+
* @param {string} color - Hex color, i.e. #nnn or #nnnnnn
|
|
23
|
+
* @returns {string} A CSS rgb color string
|
|
24
|
+
*/
|
|
25
|
+
function hexToRgb(color) {
|
|
26
|
+
color = color.slice(1);
|
|
27
|
+
const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
|
|
28
|
+
let colors = color.match(re);
|
|
29
|
+
if (colors && colors[0].length === 1) {
|
|
30
|
+
colors = colors.map(n => n + n);
|
|
31
|
+
}
|
|
32
|
+
return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {
|
|
33
|
+
return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
|
|
34
|
+
}).join(', ')})` : '';
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Returns an object with the type and values of a color.
|
|
39
|
+
*
|
|
40
|
+
* Note: Does not support rgb % values.
|
|
41
|
+
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
|
42
|
+
* @returns {object} - A MUI color object: {type: string, values: number[]}
|
|
43
|
+
*/
|
|
44
|
+
function decomposeColor(color) {
|
|
45
|
+
// Idempotent
|
|
46
|
+
if (color.type) {
|
|
47
|
+
return color;
|
|
48
|
+
}
|
|
49
|
+
if (color.charAt(0) === '#') {
|
|
50
|
+
return decomposeColor(hexToRgb(color));
|
|
51
|
+
}
|
|
52
|
+
const marker = color.indexOf('(');
|
|
53
|
+
const type = color.substring(0, marker);
|
|
54
|
+
if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
|
|
55
|
+
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
|
|
56
|
+
The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : formatMuiErrorMessage(9, color));
|
|
57
|
+
}
|
|
58
|
+
let values = color.substring(marker + 1, color.length - 1);
|
|
59
|
+
let colorSpace;
|
|
60
|
+
if (type === 'color') {
|
|
61
|
+
values = values.split(' ');
|
|
62
|
+
colorSpace = values.shift();
|
|
63
|
+
if (values.length === 4 && values[3].charAt(0) === '/') {
|
|
64
|
+
values[3] = values[3].slice(1);
|
|
65
|
+
}
|
|
66
|
+
if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
|
|
67
|
+
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
|
|
68
|
+
The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : formatMuiErrorMessage(10, colorSpace));
|
|
69
|
+
}
|
|
70
|
+
} else {
|
|
71
|
+
values = values.split(',');
|
|
72
|
+
}
|
|
73
|
+
values = values.map(value => parseFloat(value));
|
|
74
|
+
return {
|
|
75
|
+
type,
|
|
76
|
+
values,
|
|
77
|
+
colorSpace
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Converts a color object with type and values to a string.
|
|
83
|
+
* @param {object} color - Decomposed color
|
|
84
|
+
* @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
|
|
85
|
+
* @param {array} color.values - [n,n,n] or [n,n,n,n]
|
|
86
|
+
* @returns {string} A CSS color string
|
|
87
|
+
*/
|
|
88
|
+
function recomposeColor(color) {
|
|
89
|
+
const {
|
|
90
|
+
type,
|
|
91
|
+
colorSpace
|
|
92
|
+
} = color;
|
|
93
|
+
let {
|
|
94
|
+
values
|
|
95
|
+
} = color;
|
|
96
|
+
if (type.indexOf('rgb') !== -1) {
|
|
97
|
+
// Only convert the first 3 values to int (i.e. not alpha)
|
|
98
|
+
values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
|
|
99
|
+
} else if (type.indexOf('hsl') !== -1) {
|
|
100
|
+
values[1] = `${values[1]}%`;
|
|
101
|
+
values[2] = `${values[2]}%`;
|
|
102
|
+
}
|
|
103
|
+
if (type.indexOf('color') !== -1) {
|
|
104
|
+
values = `${colorSpace} ${values.join(' ')}`;
|
|
105
|
+
} else {
|
|
106
|
+
values = `${values.join(', ')}`;
|
|
107
|
+
}
|
|
108
|
+
return `${type}(${values})`;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Converts a color from hsl format to rgb format.
|
|
113
|
+
* @param {string} color - HSL color values
|
|
114
|
+
* @returns {string} rgb color values
|
|
115
|
+
*/
|
|
116
|
+
function hslToRgb(color) {
|
|
117
|
+
color = decomposeColor(color);
|
|
118
|
+
const {
|
|
119
|
+
values
|
|
120
|
+
} = color;
|
|
121
|
+
const h = values[0];
|
|
122
|
+
const s = values[1] / 100;
|
|
123
|
+
const l = values[2] / 100;
|
|
124
|
+
const a = s * Math.min(l, 1 - l);
|
|
125
|
+
const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
126
|
+
let type = 'rgb';
|
|
127
|
+
const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
|
|
128
|
+
if (color.type === 'hsla') {
|
|
129
|
+
type += 'a';
|
|
130
|
+
rgb.push(values[3]);
|
|
131
|
+
}
|
|
132
|
+
return recomposeColor({
|
|
133
|
+
type,
|
|
134
|
+
values: rgb
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* The relative brightness of any point in a color space,
|
|
139
|
+
* normalized to 0 for darkest black and 1 for lightest white.
|
|
140
|
+
*
|
|
141
|
+
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
|
142
|
+
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
|
143
|
+
* @returns {number} The relative brightness of the color in the range 0 - 1
|
|
144
|
+
*/
|
|
145
|
+
function getLuminance(color) {
|
|
146
|
+
color = decomposeColor(color);
|
|
147
|
+
let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
|
|
148
|
+
rgb = rgb.map(val => {
|
|
149
|
+
if (color.type !== 'color') {
|
|
150
|
+
val /= 255; // normalized
|
|
151
|
+
}
|
|
152
|
+
return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
// Truncate at 3 digits
|
|
156
|
+
return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* Calculates the contrast ratio between two colors.
|
|
161
|
+
*
|
|
162
|
+
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
|
163
|
+
* @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
|
|
164
|
+
* @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
|
|
165
|
+
* @returns {number} A contrast ratio value in the range 0 - 21.
|
|
166
|
+
*/
|
|
167
|
+
function getContrastRatio(foreground, background) {
|
|
168
|
+
const lumA = getLuminance(foreground);
|
|
169
|
+
const lumB = getLuminance(background);
|
|
170
|
+
return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* Sets the absolute transparency of a color.
|
|
175
|
+
* Any existing alpha values are overwritten.
|
|
176
|
+
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
|
177
|
+
* @param {number} value - value to set the alpha channel to in the range 0 - 1
|
|
178
|
+
* @returns {string} A CSS color string. Hex input values are returned as rgb
|
|
179
|
+
*/
|
|
180
|
+
function alpha(color, value) {
|
|
181
|
+
color = decomposeColor(color);
|
|
182
|
+
value = clampWrapper(value);
|
|
183
|
+
if (color.type === 'rgb' || color.type === 'hsl') {
|
|
184
|
+
color.type += 'a';
|
|
185
|
+
}
|
|
186
|
+
if (color.type === 'color') {
|
|
187
|
+
color.values[3] = `/${value}`;
|
|
188
|
+
} else {
|
|
189
|
+
color.values[3] = value;
|
|
190
|
+
}
|
|
191
|
+
return recomposeColor(color);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* Darkens a color.
|
|
196
|
+
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
|
197
|
+
* @param {number} coefficient - multiplier in the range 0 - 1
|
|
198
|
+
* @returns {string} A CSS color string. Hex input values are returned as rgb
|
|
199
|
+
*/
|
|
200
|
+
function darken(color, coefficient) {
|
|
201
|
+
color = decomposeColor(color);
|
|
202
|
+
coefficient = clampWrapper(coefficient);
|
|
203
|
+
if (color.type.indexOf('hsl') !== -1) {
|
|
204
|
+
color.values[2] *= 1 - coefficient;
|
|
205
|
+
} else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
|
|
206
|
+
for (let i = 0; i < 3; i += 1) {
|
|
207
|
+
color.values[i] *= 1 - coefficient;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
return recomposeColor(color);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* Lightens a color.
|
|
215
|
+
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
|
216
|
+
* @param {number} coefficient - multiplier in the range 0 - 1
|
|
217
|
+
* @returns {string} A CSS color string. Hex input values are returned as rgb
|
|
218
|
+
*/
|
|
219
|
+
function lighten(color, coefficient) {
|
|
220
|
+
color = decomposeColor(color);
|
|
221
|
+
coefficient = clampWrapper(coefficient);
|
|
222
|
+
if (color.type.indexOf('hsl') !== -1) {
|
|
223
|
+
color.values[2] += (100 - color.values[2]) * coefficient;
|
|
224
|
+
} else if (color.type.indexOf('rgb') !== -1) {
|
|
225
|
+
for (let i = 0; i < 3; i += 1) {
|
|
226
|
+
color.values[i] += (255 - color.values[i]) * coefficient;
|
|
227
|
+
}
|
|
228
|
+
} else if (color.type.indexOf('color') !== -1) {
|
|
229
|
+
for (let i = 0; i < 3; i += 1) {
|
|
230
|
+
color.values[i] += (1 - color.values[i]) * coefficient;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
return recomposeColor(color);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
export { alpha, darken, decomposeColor, getContrastRatio, getLuminance, hexToRgb, hslToRgb, lighten, recomposeColor };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import merge from './merge.js';
|
|
2
|
+
|
|
3
|
+
function compose(...styles) {
|
|
4
|
+
const handlers = styles.reduce((acc, style) => {
|
|
5
|
+
style.filterProps.forEach(prop => {
|
|
6
|
+
acc[prop] = style;
|
|
7
|
+
});
|
|
8
|
+
return acc;
|
|
9
|
+
}, {});
|
|
10
|
+
|
|
11
|
+
// false positive
|
|
12
|
+
// eslint-disable-next-line react/function-component-definition
|
|
13
|
+
const fn = props => {
|
|
14
|
+
return Object.keys(props).reduce((acc, prop) => {
|
|
15
|
+
if (handlers[prop]) {
|
|
16
|
+
return merge(acc, handlers[prop](props));
|
|
17
|
+
}
|
|
18
|
+
return acc;
|
|
19
|
+
}, {});
|
|
20
|
+
};
|
|
21
|
+
fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
|
|
22
|
+
fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
|
|
23
|
+
return fn;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export { compose as default };
|