@codecademy/gamut-styles 17.10.0-alpha.4e9d26.0 → 17.10.0-alpha.4fbb62.0

package/dist/themes/platform.d.ts

@@ -26,6 +26,30 @@ export declare const platformTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+    c_base: string;
+    c_xs: string;
+    c_sm: string;
+    c_md: string;
+    c_lg: string;
+    c_xl: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+    c_base: string;
+    c_xs: string;
+    c_sm: string;
+    c_md: string;
+    c_lg: string;
+    c_xl: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
 }> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
     readonly headerHeight: {
         readonly base: "4rem";
@@ -536,7 +560,7 @@ export declare const platformTheme: Record<"breakpoints", {
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
     readonly teal: "#006D82";
@@ -1129,7 +1153,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | import("@codecademy/variance").Path<{
+    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | import("@codecademy/variance").Path<{
         readonly lightBeige: "#FFFBF8";
         readonly gold: "#8A7300";
         readonly teal: "#006D82";
@@ -1151,7 +1175,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "teal-500": "#006D82";
         readonly "purple-300": "#B3CCFF";
     }, "-">) => string;
-}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type PlatformThemeShape = typeof platformTheme;
 export interface PlatformTheme extends PlatformThemeShape {
 }

package/dist/themes/platform.js

@@ -75,4 +75,4 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
       }
     }
   }
-}).build();
+}).addName('platform').build();

package/dist/utilities/themed.js

@@ -10,10 +10,7 @@ import get from 'lodash/get';
  */
 
 export function themed(path) {
-  return _ref => {
-    let {
-      theme
-    } = _ref;
-    return get(theme, path);
-  };
+  return ({
+    theme
+  }) => get(theme, path);
 }

package/dist/utils/fontUtils.d.ts

@@ -0,0 +1,33 @@
+import { Theme } from '@emotion/react';
+import * as React from 'react';
+import { webFonts } from '../remoteAssets/fonts';
+export interface FontConfig {
+    filePath: string;
+    extensions: readonly string[];
+    name: string;
+    style?: React.CSSProperties['fontStyle'];
+    weight?: React.CSSProperties['fontWeight'];
+}
+type ThemeName = keyof typeof webFonts;
+export type NamedTheme = Theme & {
+    name?: ThemeName;
+};
+/**
+ * Retrieves font configurations based on the provided theme name.
+ *
+ * Returns the appropriate font configuration array for the given theme.
+ * If no theme name is provided or the theme name is not recognized,
+ * returns the core fonts as a fallback.
+ *
+ * @param themeName - The name of the theme to get fonts for, or undefined
+ * @returns A readonly array of FontConfig objects for the specified theme
+ *
+ * @example
+ * ```ts
+ * const fonts = getFonts('percipio'); // Returns percipio theme fonts
+ * const coreFonts = getFonts(undefined); // Returns core fonts
+ * const invalidFonts = getFonts('invalid'); // Returns core fonts as fallback
+ * ```
+ */
+export declare const getFonts: (themeName: string | undefined) => readonly FontConfig[];
+export {};

package/dist/utils/fontUtils.js

@@ -0,0 +1,27 @@
+import { webFonts } from '../remoteAssets/fonts';
+const isThemeName = name => {
+  return name in webFonts;
+};
+/**
+ * Retrieves font configurations based on the provided theme name.
+ *
+ * Returns the appropriate font configuration array for the given theme.
+ * If no theme name is provided or the theme name is not recognized,
+ * returns the core fonts as a fallback.
+ *
+ * @param themeName - The name of the theme to get fonts for, or undefined
+ * @returns A readonly array of FontConfig objects for the specified theme
+ *
+ * @example
+ * ```ts
+ * const fonts = getFonts('percipio'); // Returns percipio theme fonts
+ * const coreFonts = getFonts(undefined); // Returns core fonts
+ * const invalidFonts = getFonts('invalid'); // Returns core fonts as fallback
+ * ```
+ */
+export const getFonts = themeName => {
+  if (!themeName || !isThemeName(themeName)) {
+    return webFonts.core;
+  }
+  return webFonts[themeName];
+};

package/dist/variables/colors.d.ts

@@ -316,24 +316,12 @@ export declare const percipioColors: {
     readonly percipioTextSecondary: "rgba(34, 35, 37, 0.75)";
     readonly percipioTextDisabled: "#AFB6C2";
     readonly percipioTextAccent: "#222325";
-    readonly percipioBgDefault: "#FFFFFF";
     readonly percipioBgPrimary: "#FAFBFC";
-    readonly percipioBgContrast: "#FFFFFF";
-    readonly percipioBgHover: "rgba(16, 22, 47, 0.12)";
-    readonly percipioBgSelected: "rgba(16, 22, 47, 0.04)";
-    readonly percipioBgDisabled: "rgba(16, 22, 47, 0.12)";
     readonly percipioBgSuccess: "#EEF7F3";
     readonly percipioBgWarning: "#FFF7E0";
     readonly percipioBgError: "#FFF1F5";
-    readonly percipioBorderPrimary: "rgba(16, 22, 47, 0.47)";
-    readonly percipioBorderSecondary: "rgba(16, 22, 47, 0.12)";
-    readonly percipioBorderTertiary: "#10162F";
-    readonly percipioBorderDisabled: "rgba(16, 22, 47, 0.28)";
-    readonly percipioShadowPrimary: "rgba(16, 22, 47, 0.12)";
-    readonly percipioShadowSecondary: "rgba(16, 22, 47, 0.47)";
     readonly percipioActionPrimary: "#0073C4";
     readonly percipioActionPrimaryHover: "#141C36";
-    readonly percipioActionPrimaryInverse: "#FFFFFF";
     readonly percipioActionSecondary: "#6A6E75";
     readonly percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
     readonly percipioActionDanger: "#B83C3C";
@@ -347,24 +335,12 @@ export declare const percipioPalette: {
     percipioTextSecondary: "rgba(34, 35, 37, 0.75)";
     percipioTextDisabled: "#AFB6C2";
     percipioTextAccent: "#222325";
-    percipioBgDefault: "#FFFFFF";
     percipioBgPrimary: "#FAFBFC";
-    percipioBgContrast: "#FFFFFF";
-    percipioBgHover: "rgba(16, 22, 47, 0.12)";
-    percipioBgSelected: "rgba(16, 22, 47, 0.04)";
-    percipioBgDisabled: "rgba(16, 22, 47, 0.12)";
     percipioBgSuccess: "#EEF7F3";
     percipioBgWarning: "#FFF7E0";
     percipioBgError: "#FFF1F5";
-    percipioBorderPrimary: "rgba(16, 22, 47, 0.47)";
-    percipioBorderSecondary: "rgba(16, 22, 47, 0.12)";
-    percipioBorderTertiary: "#10162F";
-    percipioBorderDisabled: "rgba(16, 22, 47, 0.28)";
-    percipioShadowPrimary: "rgba(16, 22, 47, 0.12)";
-    percipioShadowSecondary: "rgba(16, 22, 47, 0.47)";
     percipioActionPrimary: "#0073C4";
     percipioActionPrimaryHover: "#141C36";
-    percipioActionPrimaryInverse: "#FFFFFF";
     percipioActionSecondary: "#6A6E75";
     percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
     percipioActionDanger: "#B83C3C";

package/dist/variables/colors.js

@@ -180,27 +180,13 @@ export const percipioColors = {
   percipioTextDisabled: '#AFB6C2',
   percipioTextAccent: '#222325',
   // Background colors
-  percipioBgDefault: '#FFFFFF',
   percipioBgPrimary: '#FAFBFC',
-  percipioBgContrast: '#FFFFFF',
-  percipioBgHover: 'rgba(16, 22, 47, 0.12)',
-  percipioBgSelected: 'rgba(16, 22, 47, 0.04)',
-  percipioBgDisabled: 'rgba(16, 22, 47, 0.12)',
   percipioBgSuccess: '#EEF7F3',
   percipioBgWarning: '#FFF7E0',
   percipioBgError: '#FFF1F5',
-  // Border colors
-  percipioBorderPrimary: 'rgba(16, 22, 47, 0.47)',
-  percipioBorderSecondary: 'rgba(16, 22, 47, 0.12)',
-  percipioBorderTertiary: '#10162F',
-  percipioBorderDisabled: 'rgba(16, 22, 47, 0.28)',
-  // Shadow colors
-  percipioShadowPrimary: 'rgba(16, 22, 47, 0.12)',
-  percipioShadowSecondary: 'rgba(16, 22, 47, 0.47)',
   // Action colors
   percipioActionPrimary: '#0073C4',
   percipioActionPrimaryHover: '#141C36',
-  percipioActionPrimaryInverse: '#FFFFFF',
   percipioActionSecondary: '#6A6E75',
   percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)',
   percipioActionDanger: '#B83C3C',

package/dist/variance/utils.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { ThemeProps } from '@codecademy/variance';
-declare const allPropnames: ["mode", "variant", "p" | "fontSize" | "fontFamily" | "lineHeight" | "fontWeight" | "color" | "background" | "border" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom"];
+declare const allPropnames: ["mode", "variant", "fontStyle" | "fontWeight" | "fontSize" | "fontFamily" | "lineHeight" | "color" | "background" | "border" | "p" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom"];
 export type SystemPropNames = (typeof allPropnames)[number];
 export type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
 export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
 export declare function createStyledOptions<El extends ElementOrProps = 'div', Additional extends string = never>(additional?: readonly Additional[]): {
-    shouldForwardProp: (prop: PropertyKey) => prop is Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, "p" | "fontSize" | "fontFamily" | "lineHeight" | "fontWeight" | "color" | "background" | "border" | "mode" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "variant" | Additional>;
+    shouldForwardProp: (prop: PropertyKey) => prop is Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, "fontStyle" | "fontWeight" | "fontSize" | "fontFamily" | "lineHeight" | "color" | "background" | "border" | "mode" | "p" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "variant" | Additional>;
 };
 /**
  * @description
@@ -24,6 +24,6 @@ export declare function createStyledOptions<El extends ElementOrProps = 'div', A
  *
  */
 export declare const styledOptions: typeof createStyledOptions & {
-    shouldForwardProp: (prop: PropertyKey) => prop is "style" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "property" | "content" | "translate" | "hidden" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>;
+    shouldForwardProp: (prop: PropertyKey) => prop is "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>;
 };
 export {};

package/dist/variance/utils.js

@@ -7,8 +7,7 @@ const allPropnames = ['mode', 'variant', ...Object.keys(allProps)];
  * props like `color` and `width`.
  */
 const validPropnames = allPropnames.filter(isPropValid);
-export function createStyledOptions() {
-  let additional = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+export function createStyledOptions(additional = []) {
   // Cache possible valid prop names to prevent searching a larger list.
   const additionalExclusions = additional.filter(isPropValid);
   return {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.10.0-alpha.4e9d26.0",
+  "version": "17.10.0-alpha.4fbb62.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.24.0",
+    "@codecademy/variance": "0.24.1-alpha.4fbb62.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "polished": "^4.1.2"
   },
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "06f20422fc4e5b287dd795d6828b9eb981975d8a"
+  "gitHead": "48bc8e3064b6108f6f4c35641a24b1ccab1a13fb"
 }