@instructure/emotion 8.9.2-snapshot.2 → 8.9.2-snapshot.9

package/src/EmotionTypes.ts

@@ -0,0 +1,89 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type {
+  BaseTheme,
+  ComponentTheme,
+  ComponentThemeMap,
+  DeepPartial
+} from '@instructure/shared-types'
+
+type PartialTheme = DeepPartial<Omit<BaseTheme, 'key'>>
+
+type ComponentOverride =
+  | DeepPartial<ComponentThemeMap>
+  // this is needed for user defined components which we can't possibly type
+  | { [otherComponent: string]: ComponentTheme }
+
+type SpecificThemeOverride = {
+  [key: string]: PartialTheme | { componentOverrides?: ComponentOverride }
+}
+
+type ThemeOverride = PartialTheme | SpecificThemeOverride
+
+type Overrides = {
+  themeOverrides?: ThemeOverride
+  componentOverrides?: ComponentOverride
+}
+
+type ThemeOrOverride = BaseTheme | PartialTheme | Overrides
+
+type Props = Record<string, unknown>
+type State = Record<string, unknown>
+
+type GenerateComponentTheme = (
+  theme: BaseTheme | PartialTheme
+) => ComponentTheme
+
+type GenerateStyle = (
+  componentTheme: ComponentTheme,
+  props: Props,
+  state?: State
+) => StyleObject
+
+type ComponentStyle<Keys extends string = string> = Record<
+  Keys,
+  StyleObject | string | number | undefined
+>
+
+/**
+ * Style object returned by the generateStyle method of the components
+ */
+export interface StyleObject {
+  [key: string]: StyleObject | string | number | undefined
+}
+
+export type {
+  ThemeOrOverride,
+  Overrides,
+  ComponentOverride,
+  SpecificThemeOverride,
+  ThemeOverride,
+  PartialTheme,
+  Props,
+  State,
+  GenerateComponentTheme,
+  GenerateStyle,
+  ComponentStyle
+}

package/src/getComponentThemeOverride.ts

@@ -22,6 +22,16 @@
  * SOFTWARE.
  */
 
+import type {
+  ThemeOrOverride,
+  Overrides,
+  ComponentOverride
+} from './EmotionTypes'
+import type { ComponentTheme } from '@instructure/shared-types'
+import type { WithStyleProps } from './withStyle'
+
+type ComponentName = keyof ComponentOverride | undefined
+
 /**
  * ---
  * private: true
@@ -30,19 +40,31 @@
  * based on every possible override there is.
 
  * @param {object} theme - Theme object
- * @param {*} componentName - Name of the component
+ * @param {*} displayName - Name of the component
+ * @param {*} componentId - componentId of the component
  * @param {*} props - The component's props object
  * @returns {object} The calculated theme override object
  */
-export const getComponentThemeOverride = (
-  theme: any,
-  componentName: any,
-  props: any
-) => {
-  const componentOverride =
-    theme?.componentOverrides &&
-    (theme.componentOverrides[componentName[0]] ||
-      theme.componentOverrides[componentName[1]])
+const getComponentThemeOverride = (
+  theme: ThemeOrOverride,
+  displayName: string,
+  componentId?: string,
+  props?: { [k: string]: unknown } & WithStyleProps
+): ComponentTheme => {
+  let componentOverride: ComponentTheme = {}
+  const overrides = (theme as Overrides).componentOverrides
+  const name = displayName as ComponentName
+  const id = componentId as ComponentName
 
-  return { ...componentOverride, ...(props?.themeOverride ?? {}) }
+  if (overrides) {
+    componentOverride = (name && overrides[name]) || (id && overrides[id]) || {}
+  }
+
+  return {
+    ...componentOverride,
+    ...(props?.themeOverride ?? {})
+  }
 }
+
+export default getComponentThemeOverride
+export { getComponentThemeOverride }

package/src/index.ts

@@ -26,5 +26,26 @@
 export * from '@emotion/react'
 
 export { EmotionThemeProvider } from './EmotionThemeProvider'
-export * from './styleUtils'
-export * from './withStyle'
+export { withStyle } from './withStyle'
+export {
+  ThemeablePropValues,
+  ThemeablePropTypes,
+  makeThemeVars,
+  getShorthandPropValue,
+  mirrorShorthandCorners,
+  mirrorShorthandEdges
+} from './styleUtils'
+
+export type { ComponentStyle } from './EmotionTypes'
+export type { WithStyleProps } from './withStyle'
+export type {
+  SpacingValues,
+  Spacing,
+  Shadow,
+  Stacking,
+  Background,
+  BorderRadiiValues,
+  BorderRadii,
+  BorderWidthValues,
+  BorderWidth
+} from './styleUtils'

package/src/styleUtils/ThemeablePropTypes.ts

@@ -25,6 +25,14 @@
 import PropTypes from 'prop-types'
 
 import { ThemeablePropValues } from './ThemeablePropValues'
+import type {
+  BorderRadiiValues,
+  BorderRadii,
+  BorderWidthValues,
+  BorderWidth,
+  SpacingValues,
+  Spacing
+} from './ThemeablePropValues'
 
 const {
   SHADOW_TYPES,
@@ -53,24 +61,38 @@ const ThemeablePropTypes = {
   spacing: shorthandPropType(Object.values(SPACING))
 }
 
-function shorthandPropType(validValues: any) {
+type ValueKeys =
+  | BorderWidthValues[]
+  | BorderRadiiValues[]
+  | SpacingValues[]
+  | string[]
+
+function shorthandPropType<V extends ValueKeys>(
+  validValues: V
+): PropTypes.Validator<
+  V extends BorderWidthValues[]
+    ? BorderWidth
+    : V extends BorderRadiiValues[]
+    ? BorderRadii
+    : V extends SpacingValues[]
+    ? Spacing
+    : string[]
+> {
   return function (
-    props: any,
-    propName: any,
-    componentName: any,
-    location: any
-  ): any {
+    props: Record<string, unknown>,
+    propName: string,
+    componentName: string,
+    location: string
+  ) {
     const propValue = props[propName]
 
     if (typeof propValue === 'undefined') {
-      return
+      return null
     }
 
-    const propValueType = typeof propValue
-
-    if (propValueType !== 'string') {
+    if (typeof propValue !== 'string') {
       return new Error(
-        `Invalid ${location} \`${propName}\` of type \`${propValueType}\` supplied to \`${componentName}\`, expected ` +
+        `Invalid ${location} \`${propName}\` of type \`${typeof propValue}\` supplied to \`${componentName}\`, expected ` +
           `a string.`
       )
     }
@@ -79,7 +101,7 @@ function shorthandPropType(validValues: any) {
     const valuesLength = propValues.length
     if (valuesLength > 0 && valuesLength < 5) {
       for (let i = 0; i < valuesLength; i++) {
-        const valueIndex = validValues.indexOf(propValues[i])
+        const valueIndex = (validValues as string[]).indexOf(propValues[i])
         if (valueIndex === -1) {
           return new Error(
             `Invalid ${location} \`${propName}\` \`${propValues[i]}\` supplied to \`${componentName}\`, expected ` +
@@ -95,6 +117,8 @@ function shorthandPropType(validValues: any) {
           )}\`.`
       )
     }
+
+    return null
   }
 }
 

package/src/styleUtils/ThemeablePropValues.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { CSSShorthandValue } from '@instructure/shared-types'
+import type { CSSShorthandValue } from '@instructure/shared-types'
 
 const ThemeablePropValues = {
   SHADOW_TYPES: {

package/src/styleUtils/bidirectionalPolyfill.ts

@@ -22,8 +22,12 @@
  * SOFTWARE.
  */
 
-import { consoleLog as log } from '@instructure/console'
 import { isObject } from 'lodash'
+import { consoleLog as log } from '@instructure/console'
+
+import type { StyleObject } from '../EmotionTypes'
+
+type Direction = 'ltr' | 'rtl'
 
 /**
  * ---
@@ -68,8 +72,11 @@ const SUPPORT_PROPS = [
 ]
 
 function processProps(
-  { originalProp, originalValue }: any,
-  textDirection: any
+  {
+    originalProp,
+    originalValue
+  }: { originalProp: string; originalValue: string | number },
+  textDirection: Direction
 ) {
   const isLtr = textDirection === 'ltr'
 
@@ -82,7 +89,7 @@ function processProps(
     case 'float':
     case 'clear':
     case 'textAlign':
-      if (['start', 'end'].indexOf(value) !== -1) {
+      if (['start', 'end'].indexOf(value as string) !== -1) {
         if (value === 'start') {
           value = start.toLowerCase()
         } else {
@@ -155,12 +162,15 @@ function processProps(
   return { prop, value }
 }
 
-const isSupportedProps = (prop: any) => SUPPORT_PROPS.indexOf(prop) > -1
+const isSupportedProps = (prop: string) => SUPPORT_PROPS.indexOf(prop) > -1
 
-const processStyleProps = (propsObj: any, dir: any): any =>
+const processStyleProps = (
+  propsObj: StyleObject | string | number | undefined,
+  dir: Direction
+): StyleObject | string | number | undefined =>
   isObject(propsObj)
     ? Object.entries(propsObj).reduce(
-        (accumulator: any, [originalProp, originalValue]) => {
+        (accumulator, [originalProp, originalValue]) => {
           if (isObject(originalValue)) {
             return {
               ...accumulator,
@@ -168,7 +178,10 @@ const processStyleProps = (propsObj: any, dir: any): any =>
             }
           }
 
-          if (isSupportedProps(originalProp) && originalValue !== 'undefined') {
+          if (
+            isSupportedProps(originalProp) &&
+            typeof originalValue !== 'undefined'
+          ) {
             const { prop, value } = processProps(
               { originalProp, originalValue },
 
@@ -184,11 +197,17 @@ const processStyleProps = (propsObj: any, dir: any): any =>
       )
     : propsObj
 
-export const bidirectionalPolyfill = (styles: any, dir: any) =>
+const bidirectionalPolyfill = <S extends StyleObject>(
+  styles: S,
+  dir: Direction
+) =>
   Object.entries(styles).reduce(
     (accumulator, [style, props]) => ({
       ...accumulator,
       [style]: processStyleProps(props, dir)
     }),
     {}
-  )
+  ) as S
+
+export default bidirectionalPolyfill
+export { bidirectionalPolyfill }

package/src/styleUtils/getShorthandPropValue.ts

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { isEmpty, camelize } from '@instructure/ui-utils'
 import { logError as error } from '@instructure/console'
 

package/src/styleUtils/makeThemeVars.ts

@@ -23,13 +23,13 @@
  */
 
 import { camelize } from '@instructure/ui-utils'
-import { BaseTheme } from '@instructure/shared-types'
 
-type ThemeVars = Omit<BaseTheme, 'key' | 'description'>
-type Vars = ThemeVars[keyof ThemeVars]
+import type { BaseTheme, BaseThemeVariables } from '@instructure/shared-types'
+
+type ThemeVarGroup = BaseThemeVariables[keyof BaseThemeVariables]
 type PrefixedThemeVars<
   P extends string,
-  Variables extends Partial<Vars>
+  Variables extends Partial<ThemeVarGroup>
 > = Variables extends Record<infer R, any>
   ? Record<
       `${P}${R extends string ? Capitalize<R> : string}`,
@@ -48,7 +48,7 @@ type PrefixedThemeVars<
  * @param {Object} vars - an object
  * @returns {Object} a modified object with prefixed keys
  */
-function makeThemeVars<P extends string, V extends Partial<Vars>>(
+function makeThemeVars<P extends string, V extends Partial<ThemeVarGroup>>(
   prefix: P,
   vars: V
 ) {

package/src/styleUtils/mirrorShorthandCorners.ts

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { mirrorShorthandCorners } from './mirrorShorthand'
+
 export default mirrorShorthandCorners
 export { mirrorShorthandCorners }

package/src/styleUtils/mirrorShorthandEdges.ts

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { mirrorShorthandEdges } from './mirrorShorthand'
+
 export default mirrorShorthandEdges
 export { mirrorShorthandEdges }

package/src/useTheme.ts

@@ -26,6 +26,8 @@ import { useTheme as useEmotionTheme } from '@emotion/react'
 import { canvas } from '@instructure/ui-themes'
 import { isEmpty } from '@instructure/ui-utils'
 
+import type { ThemeOrOverride } from './EmotionTypes'
+
 /**
  * ---
  * private: true
@@ -34,8 +36,8 @@ import { isEmpty } from '@instructure/ui-utils'
  * If there is no theme provided to the Context it will return the default `canvas` theme.
  * @returns {object} the theme object
  */
-export const useTheme = () => {
-  let theme = useEmotionTheme()
+const useTheme = () => {
+  let theme = useEmotionTheme() as ThemeOrOverride
   // TODO type theme properly, then this cast might not be needed.
   if (isEmpty(theme as Record<string, unknown>)) {
     if (process.env.NODE_ENV !== 'production') {
@@ -47,3 +49,6 @@ export const useTheme = () => {
   }
   return theme
 }
+
+export default useTheme
+export { useTheme }

package/src/withStyle.tsx

@@ -22,20 +22,59 @@
  * SOFTWARE.
  */
 
-import React, { ForwardedRef, forwardRef, useState } from 'react'
-import { decorator } from '@instructure/ui-decorator'
+import React, { ComponentClass, forwardRef, useState } from 'react'
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes
+} from 'react'
+
 import { isEqual } from 'lodash'
 import hoistNonReactStatics from 'hoist-non-react-statics'
+
+import { decorator } from '@instructure/ui-decorator'
 import { useTextDirectionContext } from '@instructure/ui-i18n'
 import { bidirectionalPolyfill } from './styleUtils/bidirectionalPolyfill'
+
 import { getComponentThemeOverride } from './getComponentThemeOverride'
 import { useTheme } from './useTheme'
-import type { CSSObject } from '@emotion/react'
 
-export type WithStyleProps = Partial<{
-  styles: CSSObject
-  makeStyles: (...extraArgs: unknown[]) => void
-}>
+import type { BaseTheme, ComponentTheme } from '@instructure/shared-types'
+import type {
+  ComponentStyle,
+  ComponentOverride,
+  GenerateComponentTheme,
+  GenerateStyle,
+  Props
+} from './EmotionTypes'
+
+type ComponentName = keyof ComponentOverride
+
+interface WithStyleComponent extends ComponentClass<any, any> {
+  componentId?: ComponentName
+  allowedProps?: string[]
+}
+
+type WithStylePrivateProps<
+  Style extends ComponentStyle | null = ComponentStyle
+> = Style extends null
+  ? // eslint-disable-next-line @typescript-eslint/ban-types
+    {}
+  : {
+      styles?: Style
+      makeStyles?: (extraArgs?: Record<string, unknown>) => void
+    }
+
+type ThemeOverrideProp<Theme extends ComponentTheme | null = ComponentTheme> = {
+  themeOverride?: Partial<Theme>
+}
+
+type WithStyleProps<
+  Theme extends ComponentTheme | null = ComponentTheme,
+  Style extends ComponentStyle | null = ComponentStyle
+> = Theme extends null
+  ? WithStylePrivateProps<Style>
+  : WithStylePrivateProps<Style> & ThemeOverrideProp<Theme>
 
 /**
  * ---
@@ -106,36 +145,56 @@ export type WithStyleProps = Partial<{
  * @returns {ReactElement} The decorated WithStyle Component
  */
 const withStyle = decorator(
-  (ComposedComponent, generateStyle: any, generateComponentTheme: any) => {
+  (
+    ComposedComponent: WithStyleComponent,
+    generateStyle: GenerateStyle,
+    generateComponentTheme: GenerateComponentTheme
+  ) => {
     const displayName = ComposedComponent.displayName || ComposedComponent.name
 
-    const WithStyle = forwardRef((props, ref: ForwardedRef<any>) => {
+    const WithStyle: ForwardRefExoticComponent<
+      PropsWithoutRef<Props> & RefAttributes<any>
+    > & {
+      generateComponentTheme?: GenerateComponentTheme
+      allowedProps?: string[]
+    } = forwardRef((props, ref) => {
       const theme = useTheme()
       const dir = useTextDirectionContext()
-      const componentProps = {
+
+      const componentProps: Props = {
         ...ComposedComponent.defaultProps,
         ...props
       }
+
       const themeOverride = getComponentThemeOverride(
         theme,
-        [displayName, (ComposedComponent as any).componentId],
+        displayName,
+        ComposedComponent.componentId,
         componentProps
       )
-      const componentTheme =
+
+      const componentTheme: ComponentTheme =
         typeof generateComponentTheme === 'function'
-          ? { ...generateComponentTheme(theme), ...themeOverride }
+          ? {
+              ...generateComponentTheme(theme as BaseTheme),
+              ...themeOverride
+            }
           : {}
+
       const [styles, setStyles] = useState(
         generateStyle
           ? bidirectionalPolyfill(
               generateStyle(componentTheme, componentProps, {}),
+              // @ts-expect-error TODO: this shouldn't be "auto" (INSTUI-3241)
               dir
             )
           : {}
       )
-      const makeStyleHandler = (...extraArgs: any[]) => {
+
+      const makeStyleHandler: WithStyleProps['makeStyles'] = (extraArgs) => {
         const calculatedStyles = bidirectionalPolyfill(
-          generateStyle(componentTheme, componentProps, ...extraArgs),
+          generateStyle(componentTheme, componentProps, extraArgs),
+          // @ts-expect-error TODO: this shouldn't be "auto" (INSTUI-3241)
           dir
         )
         if (!isEqual(calculatedStyles, styles)) {
@@ -152,14 +211,21 @@ const withStyle = decorator(
         />
       )
     })
+
     hoistNonReactStatics(WithStyle, ComposedComponent)
-    // we have to pass these on, because sometimes we need to
+
+    // we have to pass these on, because sometimes users
     // access propTypes of the component in other components
-    // (mainly in the `omitProps` method)
+    // eslint-disable-next-line react/forbid-foreign-prop-types
     WithStyle.propTypes = ComposedComponent.propTypes
     WithStyle.defaultProps = ComposedComponent.defaultProps
+
+    // These static fields exist on InstUI components
+    WithStyle.allowedProps = ComposedComponent.allowedProps
+
     // we are exposing the theme generator for the docs generation
-    ;(WithStyle as any).generateComponentTheme = generateComponentTheme
+    WithStyle.generateComponentTheme = generateComponentTheme
+
     // we have to add defaults to makeStyles and styles added by this decorator
     // eslint-disable-next-line no-param-reassign
     ComposedComponent.defaultProps = {
@@ -167,11 +233,15 @@ const withStyle = decorator(
       makeStyles: () => {},
       styles: {}
     }
+
     if (process.env.NODE_ENV !== 'production') {
       WithStyle.displayName = `WithStyle(${displayName})`
     }
+
     return WithStyle
   }
 )
+
 export default withStyle
 export { withStyle }
+export type { WithStyleProps }

package/types/EmotionThemeProvider/index.d.ts

@@ -1,19 +1,5 @@
 import React from 'react';
-import { ComponentThemeMap, DeepPartial, BaseTheme } from '@instructure/shared-types';
-declare type PartialTheme = DeepPartial<Omit<BaseTheme, 'key'>>;
-declare type ComponentOverride = DeepPartial<ComponentThemeMap> | {
-    [otherComponent: string]: Record<string, unknown>;
-};
-declare type ThemeOverride = PartialTheme | {
-    [key: string]: PartialTheme | {
-        componentOverrides?: ComponentOverride;
-    };
-};
-declare type Overrides = {
-    themeOverrides?: ThemeOverride;
-    componentOverrides?: ComponentOverride;
-};
-declare type ThemeOrOverride = BaseTheme | PartialTheme | Overrides;
+import type { ThemeOrOverride } from '../EmotionTypes';
 declare type ThemeProviderProps = {
     theme: ThemeOrOverride;
 };

package/types/EmotionThemeProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/EmotionThemeProvider/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,SAAS,EACV,MAAM,2BAA2B,CAAA;AAElC,aAAK,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAA;AACvD,aAAK,iBAAiB,GAClB,WAAW,CAAC,iBAAiB,CAAC,GAE9B;IAAE,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,CAAA;AAEzD,aAAK,aAAa,GACd,YAAY,GACZ;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,GAAG;QAAE,kBAAkB,CAAC,EAAE,iBAAiB,CAAA;KAAE,CAAA;CAAE,CAAA;AAEhF,aAAK,SAAS,GAAG;IACf,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,kBAAkB,CAAC,EAAE,iBAAiB,CAAA;CACvC,CAAA;AAED,aAAK,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAAA;AAC3D,aAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,eAAe,CAAA;CACvB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,QAAQ,EACR,KAAK,EACN,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,eAE7C;AA4CD,eAAe,oBAAoB,CAAA;AACnC,OAAO,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/EmotionThemeProvider/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAEV,eAAe,EAEhB,MAAM,iBAAiB,CAAA;AAExB,aAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,eAAe,CAAA;CACvB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,QAAQ,EACR,KAAK,EACN,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,eAE7C;AA6CD,eAAe,oBAAoB,CAAA;AACnC,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/types/EmotionTypes.d.ts

@@ -0,0 +1,29 @@
+import type { BaseTheme, ComponentTheme, ComponentThemeMap, DeepPartial } from '@instructure/shared-types';
+declare type PartialTheme = DeepPartial<Omit<BaseTheme, 'key'>>;
+declare type ComponentOverride = DeepPartial<ComponentThemeMap> | {
+    [otherComponent: string]: ComponentTheme;
+};
+declare type SpecificThemeOverride = {
+    [key: string]: PartialTheme | {
+        componentOverrides?: ComponentOverride;
+    };
+};
+declare type ThemeOverride = PartialTheme | SpecificThemeOverride;
+declare type Overrides = {
+    themeOverrides?: ThemeOverride;
+    componentOverrides?: ComponentOverride;
+};
+declare type ThemeOrOverride = BaseTheme | PartialTheme | Overrides;
+declare type Props = Record<string, unknown>;
+declare type State = Record<string, unknown>;
+declare type GenerateComponentTheme = (theme: BaseTheme | PartialTheme) => ComponentTheme;
+declare type GenerateStyle = (componentTheme: ComponentTheme, props: Props, state?: State) => StyleObject;
+declare type ComponentStyle<Keys extends string = string> = Record<Keys, StyleObject | string | number | undefined>;
+/**
+ * Style object returned by the generateStyle method of the components
+ */
+export interface StyleObject {
+    [key: string]: StyleObject | string | number | undefined;
+}
+export type { ThemeOrOverride, Overrides, ComponentOverride, SpecificThemeOverride, ThemeOverride, PartialTheme, Props, State, GenerateComponentTheme, GenerateStyle, ComponentStyle };
+//# sourceMappingURL=EmotionTypes.d.ts.map

package/types/EmotionTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmotionTypes.d.ts","sourceRoot":"","sources":["../src/EmotionTypes.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,WAAW,EACZ,MAAM,2BAA2B,CAAA;AAElC,aAAK,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAA;AAEvD,aAAK,iBAAiB,GAClB,WAAW,CAAC,iBAAiB,CAAC,GAE9B;IAAE,CAAC,cAAc,EAAE,MAAM,GAAG,cAAc,CAAA;CAAE,CAAA;AAEhD,aAAK,qBAAqB,GAAG;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,GAAG;QAAE,kBAAkB,CAAC,EAAE,iBAAiB,CAAA;KAAE,CAAA;CACzE,CAAA;AAED,aAAK,aAAa,GAAG,YAAY,GAAG,qBAAqB,CAAA;AAEzD,aAAK,SAAS,GAAG;IACf,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,kBAAkB,CAAC,EAAE,iBAAiB,CAAA;CACvC,CAAA;AAED,aAAK,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAAA;AAE3D,aAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACpC,aAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEpC,aAAK,sBAAsB,GAAG,CAC5B,KAAK,EAAE,SAAS,GAAG,YAAY,KAC5B,cAAc,CAAA;AAEnB,aAAK,aAAa,GAAG,CACnB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,KAAK,CAAC,EAAE,KAAK,KACV,WAAW,CAAA;AAEhB,aAAK,cAAc,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAAI,MAAM,CACxD,IAAI,EACJ,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAC1C,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CACzD;AAED,YAAY,EACV,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,KAAK,EACL,KAAK,EACL,sBAAsB,EACtB,aAAa,EACb,cAAc,EACf,CAAA"}