wjec-one 4.0.21 → 4.1.0

package/theme/index.d.ts

@@ -1,87 +1,435 @@
-/// <reference types="react" />
-import * as _emotion_utils from '@emotion/utils';
-import * as React from 'react';
-import { Dispatch } from 'react';
-import { Record } from 'immutable';
+import * as react from 'react';
+import { Dispatch, FC, PropsWithChildren } from 'react';
+import { Implements, DeepPartial, ObjectLeaves, ColorPalette as ColorPalette$1, ColorPaletteEduqas } from 'wjec-one';
+import * as _emotion_core from '@emotion/core';
 
-type ColorPalette = {
-    border: string;
-    entryLevel: string;
-    errorBackground: string;
-    error: string;
-    errorDark: string;
-    errorDarker: string;
-    font: string;
-    fontLight: string;
-    gceALevel: string;
-    gceASLevel: string;
-    gcse: string;
-    highlight: string;
-    neutral: string;
-    neutralDark: string;
-    neutralLight: string;
-    offBlack: string;
-    offWhite: string;
-    otherQualifications: string;
-    primary: string;
-    primaryDark: string;
-    primaryDarkActive: string;
-    primaryLight: string;
-    primaryLightActive: string;
-    primaryLightest: string;
-    secondary: string;
-    secondaryDark: string;
-    secondaryDarkActive: string;
-    secondaryLight: string;
-    secondaryLightActive: string;
-    success: string;
-    successBackground: string;
-    successDark: string;
-    successDarker: string;
-    tertiary: string;
-    vQAward: string;
-    warningBackground: string;
-    warning: string;
-    warningDark: string;
-    welshBaccAdvanced: string;
-    welshBaccFoundation: string;
-    welshBaccNational: string;
-    welshBaccKS4: string;
-};
+declare const wjec: Readonly<{
+    readonly basicBlack: "#000000";
+    readonly basicBlack50: "#000000";
+    readonly basicNearlyWhite: "#fafcfc";
+    readonly basicWhite: "#ffffff";
+    readonly basicWhite50: "#ffffff";
+    readonly error: "#d22d2d";
+    readonly errorDark: "#931f1f";
+    readonly errorDarker: "#691616";
+    readonly errorDarkest: "#3f0d0d";
+    readonly errorLight: "#db5757";
+    readonly errorLighter: "#f2bfbf";
+    readonly errorLightest: "#fbebeb";
+    readonly highlight: "#e57300";
+    readonly highlightDark: "#b25900";
+    readonly highlightDarker: "#663300";
+    readonly highlightDarkest: "#331a00";
+    readonly highlightLight: "#f8a653";
+    readonly highlightLighter: "#fcd9b5";
+    readonly highlightLightest: "#fef2e6";
+    readonly neutral: "#819198";
+    readonly neutralDark: "#68787f";
+    readonly neutralDarker: "#4b585d";
+    readonly neutralDarker2: "#22282a";
+    readonly neutralDarkest: "#171b1c";
+    readonly neutralLight: "#9daaaf";
+    readonly neutralLighter: "#b9c2c6";
+    readonly neutralLighter2: "#d5dbdd";
+    readonly neutralLighter3: "#f1f3f4";
+    readonly neutralLightest: "#fafcfc";
+    readonly primary: "#007db2";
+    readonly primaryDark: "#005980";
+    readonly primaryDarker: "#004766";
+    readonly primaryDarkest: "#00354d";
+    readonly primaryLight: "#80d9ff";
+    readonly primaryLighter: "#b2e8ff";
+    readonly primaryLightest: "#e5f7ff";
+    readonly qualificationMurkyGreenLight: "#acc081";
+    readonly qualificationMurkyGreenMid: "#81994d";
+    readonly qualificationOrangeLight: "#f8a653";
+    readonly qualificationPinkLight: "#ffc0cb";
+    readonly qualificationPinkMid: "#ff8fa2";
+    readonly qualificationPlum: "#b858f4";
+    readonly qualificationTeal: "#4d9995";
+    readonly qualificationTealishBlueLight: "#aeb6dc";
+    readonly qualificationTealishBlueMid: "#5f6fba";
+    readonly qualificationYellowLight: "#f9e186";
+    readonly secondary: "#247d8f";
+    readonly secondaryDark: "#1a5966";
+    readonly secondaryDarker: "#135e6d";
+    readonly secondaryDarkest: "#0f363d";
+    readonly secondaryLight: "#70c9db";
+    readonly secondaryLighter: "#c2e8f0";
+    readonly secondaryLightest: "#ebf7fa";
+    readonly secondaryLightest2: "#f7fcfd";
+    readonly success: "#357e38";
+    readonly successDark: "#265a26";
+    readonly successDarker: "#1e481e";
+    readonly successLight: "#5dbb5d";
+    readonly successLighter: "#aad4aa";
+    readonly successLightest: "#ecf7ec";
+    readonly tertiary: "#f4c924";
+    readonly tertiaryDark: "#aa8909";
+    readonly tertiaryDarker: "#796206";
+    readonly tertiaryDarkest: "#493b04";
+    readonly tertiaryLight: "#f6d555";
+    readonly tertiaryLighter: "#f9e186";
+    readonly tertiaryLightest: "#fef9e7";
+    readonly warning: "#e57300";
+    readonly warningDark: "#b25900";
+    readonly warningDarker: "#663300";
+    readonly warningDarkest: "#331a00";
+    readonly warningLight: "#ff8c1a";
+    readonly warningLighter: "#fcd9b5";
+    readonly warningLightest: "#fef2e6";
+}>;
+declare const eduqas: Readonly<{
+    readonly primary: "#F1511B";
+    readonly primaryDark: "#BF3608";
+    readonly primaryLight: "#FDB8A1";
+    readonly basicBlack: "#000000";
+    readonly basicBlack50: "#000000";
+    readonly basicNearlyWhite: "#fafcfc";
+    readonly basicWhite: "#ffffff";
+    readonly basicWhite50: "#ffffff";
+    readonly error: "#d22d2d";
+    readonly errorDark: "#931f1f";
+    readonly errorDarker: "#691616";
+    readonly errorDarkest: "#3f0d0d";
+    readonly errorLight: "#db5757";
+    readonly errorLighter: "#f2bfbf";
+    readonly errorLightest: "#fbebeb";
+    readonly highlight: "#e57300";
+    readonly highlightDark: "#b25900";
+    readonly highlightDarker: "#663300";
+    readonly highlightDarkest: "#331a00";
+    readonly highlightLight: "#f8a653";
+    readonly highlightLighter: "#fcd9b5";
+    readonly highlightLightest: "#fef2e6";
+    readonly neutral: "#819198";
+    readonly neutralDark: "#68787f";
+    readonly neutralDarker: "#4b585d";
+    readonly neutralDarker2: "#22282a";
+    readonly neutralDarkest: "#171b1c";
+    readonly neutralLight: "#9daaaf";
+    readonly neutralLighter: "#b9c2c6";
+    readonly neutralLighter2: "#d5dbdd";
+    readonly neutralLighter3: "#f1f3f4";
+    readonly neutralLightest: "#fafcfc";
+    readonly primaryDarker: "#004766";
+    readonly primaryDarkest: "#00354d";
+    readonly primaryLighter: "#b2e8ff";
+    readonly primaryLightest: "#e5f7ff";
+    readonly qualificationMurkyGreenLight: "#acc081";
+    readonly qualificationMurkyGreenMid: "#81994d";
+    readonly qualificationOrangeLight: "#f8a653";
+    readonly qualificationPinkLight: "#ffc0cb";
+    readonly qualificationPinkMid: "#ff8fa2";
+    readonly qualificationPlum: "#b858f4";
+    readonly qualificationTeal: "#4d9995";
+    readonly qualificationTealishBlueLight: "#aeb6dc";
+    readonly qualificationTealishBlueMid: "#5f6fba";
+    readonly qualificationYellowLight: "#f9e186";
+    readonly secondary: "#247d8f";
+    readonly secondaryDark: "#1a5966";
+    readonly secondaryDarker: "#135e6d";
+    readonly secondaryDarkest: "#0f363d";
+    readonly secondaryLight: "#70c9db";
+    readonly secondaryLighter: "#c2e8f0";
+    readonly secondaryLightest: "#ebf7fa";
+    readonly secondaryLightest2: "#f7fcfd";
+    readonly success: "#357e38";
+    readonly successDark: "#265a26";
+    readonly successDarker: "#1e481e";
+    readonly successLight: "#5dbb5d";
+    readonly successLighter: "#aad4aa";
+    readonly successLightest: "#ecf7ec";
+    readonly tertiary: "#f4c924";
+    readonly tertiaryDark: "#aa8909";
+    readonly tertiaryDarker: "#796206";
+    readonly tertiaryDarkest: "#493b04";
+    readonly tertiaryLight: "#f6d555";
+    readonly tertiaryLighter: "#f9e186";
+    readonly tertiaryLightest: "#fef9e7";
+    readonly warning: "#e57300";
+    readonly warningDark: "#b25900";
+    readonly warningDarker: "#663300";
+    readonly warningDarkest: "#331a00";
+    readonly warningLight: "#ff8c1a";
+    readonly warningLighter: "#fcd9b5";
+    readonly warningLightest: "#fef2e6";
+}>;
 
-declare const _default: ColorPalette;
+declare const colors_d_eduqas: typeof eduqas;
+declare const colors_d_wjec: typeof wjec;
+declare namespace colors_d {
+  export {
+    colors_d_eduqas as eduqas,
+    colors_d_wjec as wjec,
+  };
+}
 
-type ThemeState$1 = {
-    brand: 'eduqas' | 'wjec';
-    colorPalette: typeof _default;
+type ColorPalette = {
+    basicBlack: string;
+    basicBlack50: string;
+    basicNearlyWhite: string;
+    basicWhite: string;
+    basicWhite50: string;
+    errorDark: string;
+    errorDarker: string;
+    errorDarkest: string;
+    error: string;
+    errorLight: string;
+    errorLighter: string;
+    errorLightest: string;
+    highlightDark: string;
+    highlightDarker: string;
+    highlightDarkest: string;
+    highlight: string;
+    highlightLight: string;
+    highlightLighter: string;
+    highlightLightest: string;
+    neutralDark: string;
+    neutralDarker: string;
+    neutralDarker2: string;
+    neutralDarkest: string;
+    neutral: string;
+    neutralLight: string;
+    neutralLighter: string;
+    neutralLighter2: string;
+    neutralLighter3: string;
+    neutralLightest: string;
+    primaryDark: string;
+    primaryDarker: string;
+    primaryDarkest: string;
+    primary: string;
+    primaryLight: string;
+    primaryLighter: string;
+    primaryLightest: string;
+    qualificationMurkyGreenLight: string;
+    qualificationMurkyGreenMid: string;
+    qualificationOrangeLight: string;
+    qualificationPinkLight: string;
+    qualificationPinkMid: string;
+    qualificationPlum: string;
+    qualificationTeal: string;
+    qualificationTealishBlueLight: string;
+    qualificationTealishBlueMid: string;
+    qualificationYellowLight: string;
+    secondaryDark: string;
+    secondaryDarker: string;
+    secondaryDarkest: string;
+    secondary: string;
+    secondaryLight: string;
+    secondaryLighter: string;
+    secondaryLightest: string;
+    secondaryLightest2: string;
+    successDark: string;
+    successDarker: string;
+    success: string;
+    successLight: string;
+    successLighter: string;
+    successLightest: string;
+    tertiaryDark: string;
+    tertiaryDarker: string;
+    tertiaryDarkest: string;
+    tertiary: string;
+    tertiaryLight: string;
+    tertiaryLighter: string;
+    tertiaryLightest: string;
+    warningDark: string;
+    warningDarker: string;
+    warningDarkest: string;
+    warning: string;
+    warningLight: string;
+    warningLighter: string;
+    warningLightest: string;
 };
-
-type Action = AsyncAction | SimpleAction;
-type AsyncAction = (dispatch: Dispatch<Action>, state: DestructurableRecord<any>) => void | Promise<void>;
-type ContextHook<T> = <R extends any, U extends {
-    [key: string]: (state: T) => R;
-}>(selectors?: U) => [
-    DestructurableRecord<T & {
-        [K in keyof U]: ReturnType<U[K]>;
-    }>,
-    Dispatch<Action>
-];
-type DestructurableRecord<T extends {}> = Record<T> & {
-    [K in keyof T]: T[K];
-};
-type SimpleAction = {
-    payload?: any;
-    type: string;
+type ThemeCategory = {
+    [category: string]: keyof ColorPalette | ThemeCategory;
+};
+type ThemeColorMapping = Implements<ThemeCategory, {
+    controls: {
+        borders: {
+            default: keyof ColorPalette;
+            defaultDarker: keyof ColorPalette;
+            defaultHover: keyof ColorPalette;
+            defaultLight: keyof ColorPalette;
+            disabled: keyof ColorPalette;
+            error: keyof ColorPalette;
+            primary: keyof ColorPalette;
+            primaryHover: keyof ColorPalette;
+            secondary: keyof ColorPalette;
+            secondaryHover: keyof ColorPalette;
+            success: keyof ColorPalette;
+            warning: keyof ColorPalette;
+            white: keyof ColorPalette;
+        };
+        container: {
+            background: keyof ColorPalette;
+            backgroundLightgrey: keyof ColorPalette;
+            boldGreen: keyof ColorPalette;
+            boldRed: keyof ColorPalette;
+            boldYellow: keyof ColorPalette;
+            border: keyof ColorPalette;
+            error: keyof ColorPalette;
+            primary: keyof ColorPalette;
+            success: keyof ColorPalette;
+            warning: keyof ColorPalette;
+        };
+        interaction: {
+            default: keyof ColorPalette;
+            defaultActive: keyof ColorPalette;
+            defaultHover: keyof ColorPalette;
+            disabled: keyof ColorPalette;
+            error: keyof ColorPalette;
+            errorActive: keyof ColorPalette;
+            errorHover: keyof ColorPalette;
+            errorSecondary: keyof ColorPalette;
+            errorSecondaryActive: keyof ColorPalette;
+            errorSecondaryHover: keyof ColorPalette;
+            primary: keyof ColorPalette;
+            primaryActive: keyof ColorPalette;
+            primaryHover: keyof ColorPalette;
+            primaryLightBackground: keyof ColorPalette;
+            secondary: keyof ColorPalette;
+            secondaryActive: keyof ColorPalette;
+            secondaryHover: keyof ColorPalette;
+            success: keyof ColorPalette;
+            successActive: keyof ColorPalette;
+            successHover: keyof ColorPalette;
+            successLightBackground: keyof ColorPalette;
+            tertiary: keyof ColorPalette;
+            tertiaryActive: keyof ColorPalette;
+            tertiaryHover: keyof ColorPalette;
+            textDark: keyof ColorPalette;
+            textDisabled: keyof ColorPalette;
+            textLight: keyof ColorPalette;
+            textSecondaryDark: keyof ColorPalette;
+            textSecondaryLight: keyof ColorPalette;
+            warning: keyof ColorPalette;
+            warningActive: keyof ColorPalette;
+            warningHover: keyof ColorPalette;
+        };
+        userInput: {
+            background: {
+                default: keyof ColorPalette;
+                defaultHover: keyof ColorPalette;
+                defaultShadow: keyof ColorPalette;
+                error: keyof ColorPalette;
+                primary: keyof ColorPalette;
+                primaryHover: keyof ColorPalette;
+                secondary: keyof ColorPalette;
+                secondaryHover: keyof ColorPalette;
+                success: keyof ColorPalette;
+                warning: keyof ColorPalette;
+            };
+            icon: {
+                default: keyof ColorPalette;
+                defaultLight: keyof ColorPalette;
+                disabled: keyof ColorPalette;
+                error: keyof ColorPalette;
+                primary: keyof ColorPalette;
+                primaryDark: keyof ColorPalette;
+                primaryLight: keyof ColorPalette;
+                secondary: keyof ColorPalette;
+                secondaryDark: keyof ColorPalette;
+                secondaryLight: keyof ColorPalette;
+                success: keyof ColorPalette;
+                warning: keyof ColorPalette;
+            };
+            message: {
+                default: keyof ColorPalette;
+                error: keyof ColorPalette;
+                success: keyof ColorPalette;
+                warning: keyof ColorPalette;
+            };
+            text: {
+                default: keyof ColorPalette;
+                defaultLighter: keyof ColorPalette;
+                disabled: keyof ColorPalette;
+                label: keyof ColorPalette;
+                placeholder: keyof ColorPalette;
+            };
+        };
+    };
+    foundational: {
+        background: keyof ColorPalette;
+        border: keyof ColorPalette;
+        eduqas: keyof ColorPalette;
+        neutral: keyof ColorPalette;
+        primary: keyof ColorPalette;
+        secondary: keyof ColorPalette;
+        tertiary: keyof ColorPalette;
+        white: keyof ColorPalette;
+        wjec: keyof ColorPalette;
+    };
+    qualifications: {
+        entrylevel: keyof ColorPalette;
+        gcealevel: keyof ColorPalette;
+        gceaslevel: keyof ColorPalette;
+        gcse: keyof ColorPalette;
+        otherquals: keyof ColorPalette;
+        vqaward: keyof ColorPalette;
+        wbqadvanced: keyof ColorPalette;
+        wbqfoundation: keyof ColorPalette;
+        wbqkeystage4: keyof ColorPalette;
+        wbqnational: keyof ColorPalette;
+    };
+    text: {
+        body: {
+            accent: keyof ColorPalette;
+            default: keyof ColorPalette;
+            disabled: keyof ColorPalette;
+            highlight: keyof ColorPalette;
+            link: keyof ColorPalette;
+            linkHoverBackground: keyof ColorPalette;
+        };
+        heading: {
+            large: keyof ColorPalette;
+            medium: keyof ColorPalette;
+            primary: keyof ColorPalette;
+            secondary: keyof ColorPalette;
+        };
+    };
+}>;
+type ThemeConfig = {
+    colorMapping?: DeepPartial<ThemeColorMapping>;
+    colorPalette: ColorPalette;
+    name: string;
 };
+interface ThemeRegister {
+    legacyEduqas: ThemeConfig;
+    eduqas: ThemeConfig;
+    legacyWjec: ThemeConfig;
+    wjec: ThemeConfig;
+}
+type Theme = {
+    colorPalette: ColorPalette;
+    name: string;
+    themeColors: ThemeColorMapping;
+};
+
+declare const cssVar: (path: keyof ColorPalette | ObjectLeaves<ThemeColorMapping>) => `var(--${string})`;
+declare const getCssColorVariableName: (path: keyof ColorPalette | ObjectLeaves<ThemeColorMapping>) => `--${string}`;
+declare const registerThemes: (newThemeConfigs: {
+    [theme: string]: ThemeConfig;
+}) => void;
 
-type ThemeState = ThemeState$1;
+type ThemeState = {
+    brand: 'eduqas' | 'wjec';
+    colorPalette: typeof ColorPalette$1 | typeof ColorPaletteEduqas;
+};
+type ThemeStylesType = (_emotion_core.SerializedStyles extends undefined ? 0 : 1) extends 1 ? _emotion_core.SerializedStyles : react.CSSProperties;
+declare const selectBrand: (brand: "eduqas" | "wjec") => void;
+declare const useWjecOneTheme: () => [ThemeState, Dispatch<any>];
+declare const useWjecOneThemeStyles: <S extends {
+    [key: string]: ThemeStylesType;
+}>(styles: S | ((theme: ThemeState) => S)) => S;
 
-declare const selectBrand: (payload?: "eduqas" | "wjec") => SimpleAction;
-declare const themeContext: React.Context<[DestructurableRecord<ThemeState$1>, React.Dispatch<Action>]>;
-declare const WjecOneThemeProvider: React.FC<React.PropsWithChildren<Pick<ThemeState$1, "brand">>>;
-declare const useWjecOneTheme: ContextHook<ThemeState$1>;
-declare const useWjecOneThemeStyles: <S extends {
-    [key: string]: _emotion_utils.SerializedStyles;
-}>(styles: S | ((theme: ThemeState$1) => S)) => S;
+declare const getTheme: (theme?: keyof ThemeRegister) => Readonly<Theme>;
+declare const setTheme: (themeOrSetter: keyof ThemeRegister | ((currentTheme: keyof ThemeRegister) => keyof ThemeRegister)) => void;
+type ThemeProviderProps = PropsWithChildren<{
+    defaultTheme?: keyof ThemeRegister;
+}>;
+declare const ThemeProvider: FC<ThemeProviderProps>;
+declare const useTheme: (theme?: keyof ThemeRegister) => Readonly<Theme>;
+declare const useThemeColor: <T extends string>(color: T | keyof ColorPalette) => string;
 
-export { ThemeState, WjecOneThemeProvider, selectBrand, themeContext, useWjecOneTheme, useWjecOneThemeStyles };
+export { ColorPalette, Theme, ThemeColorMapping, ThemeConfig, ThemeProvider, ThemeRegister, ThemeState, colors_d as colors, cssVar, getCssColorVariableName, getTheme, registerThemes, selectBrand, setTheme, useTheme, useThemeColor, useWjecOneTheme, useWjecOneThemeStyles };

package/theme/index.js

@@ -1 +1 @@
-import{createSimpleAction as r,createContext as e}from"wjec-one/store";import{isCallableFunction as t}from"wjec-one/utils";import{useMemo as n}from"react";function o(r,e){(null==e||e>r.length)&&(e=r.length);for(var t=0,n=Array(e);t<e;t++)n[t]=r[t];return n}function a(r,e,t){return(e=function(r){var e=function(r,e){if("object"!=typeof r||!r)return r;var t=r[Symbol.toPrimitive];if(void 0!==t){var n=t.call(r,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(r)}(r,"string");return"symbol"==typeof e?e:e+""}(e))in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function i(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,n)}return t}function c(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?i(Object(t),!0).forEach((function(e){a(r,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}))}return r}function u(r,e){return function(r){if(Array.isArray(r))return r}(r)||function(r,e){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var n,o,a,i,c=[],u=!0,l=!1;try{if(a=(t=t.call(r)).next,0===e){if(Object(t)!==t)return;u=!1}else for(;!(u=(n=a.call(t)).done)&&(c.push(n.value),c.length!==e);u=!0);}catch(r){l=!0,o=r}finally{try{if(!u&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(l)throw o}}return c}}(r,e)||function(r,e){if(r){if("string"==typeof r)return o(r,e);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(r,e):void 0}}(r,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var l=r("SELECT_BRAND"),f=Object.freeze({border:"#BCCBD1",entryLevel:"#6B994D",error:"#D32F2F",errorBackground:"#FBEBEB",errorDark:"#A82424",errorDarker:"#661616",font:"#2E3638",fontLight:"#606A6C",gceALevel:"#516FA2",gceASLevel:"#4D9995",gcse:"#81994D",highlight:"#FFEDC1",neutral:"#F1F3F4",neutralDark:"#2D3538",neutralLight:"#56666C",offBlack:"#001B26",offWhite:"#FAFCFC",otherQualifications:"#A55395",secondary:"#47BAD1",secondaryDark:"#1F6B7A",secondaryDarkActive:"#103840",secondaryLight:"#C0E8F0",secondaryLightActive:"#96CBD6",success:"#43A047",successBackground:"#EDF6ED",successDark:"#3C9040",successDarker:"#2A662D",tertiary:"#FFEDC1",vQAward:"#D86C8B",warning:"#F57C00",warningBackground:"#FEF2E6",warningDark:"#EF6C00",welshBaccAdvanced:"#6E81DC",welshBaccFoundation:"#BF8660",welshBaccNational:"#B4C160",welshBaccKS4:"#B25A6C"}),s=Object.freeze(c(c({},f),{},{primary:"#007DB2",primaryDark:"#00628C",primaryDarkActive:"#004766",primaryLight:"#E5F8FF",primaryLightActive:"#CCF1FF",primaryLightest:"#E5F7FF"})),y=Object.freeze(c(c({},f),{},{primary:"#F1511B",primaryDark:"#BF3608",primaryDarkActive:"#BF3608",primaryLight:"#FDB8A1",primaryLightActive:"#FDB8A1"})),m=function(r,e){var t=e.payload;return"SELECT_BRAND"===e.type?r.merge({brand:t,colorPalette:"wjec"===t?s:y}):r},p={brand:"wjec",colorPalette:s},b=function(){var r=e(m,p,(function(r,e){var t=r.brand,n=e.colorPalette;return{colorPalette:"eduqas"===t?y:n}})),o=r.context,a=r.hook,i=r.provider;return{selectBrand:l,themeContext:o,WjecOneThemeProvider:i,useWjecOneTheme:a,useWjecOneThemeStyles:function(r){var e=u(a(),1)[0];return n((function(){return t(r)?r(e):r}),[e.brand])}}}(),h=b.selectBrand,v=b.themeContext,d=b.WjecOneThemeProvider,g=b.useWjecOneTheme,F=b.useWjecOneThemeStyles;export{d as WjecOneThemeProvider,h as selectBrand,v as themeContext,g as useWjecOneTheme,F as useWjecOneThemeStyles};
+import{useMemo as e,createContext as r,useState as a,createElement as t,useContext as i}from"react";import{ColorPaletteEduqas as n,ColorPalette as c,useIsMounted as s}from"wjec-one";import{deepFreeze as o,deepMerge as l,noop as d}from"wjec-one/utils";const h={selectedTheme:"wjec",themes:{legacyEduqas:void 0,eduqas:void 0,legacyWjec:void 0,wjec:void 0}},u=e=>h[e],g=e=>{Object.entries(e).forEach(([e,r])=>{h[e]=r})},f=Object.freeze({basicBlack:"#000000",basicBlack50:"#000000",basicNearlyWhite:"#fafcfc",basicWhite:"#ffffff",basicWhite50:"#ffffff",error:"#d22d2d",errorDark:"#931f1f",errorDarker:"#691616",errorDarkest:"#3f0d0d",errorLight:"#db5757",errorLighter:"#f2bfbf",errorLightest:"#fbebeb",highlight:"#e57300",highlightDark:"#b25900",highlightDarker:"#663300",highlightDarkest:"#331a00",highlightLight:"#f8a653",highlightLighter:"#fcd9b5",highlightLightest:"#fef2e6",neutral:"#819198",neutralDark:"#68787f",neutralDarker:"#4b585d",neutralDarker2:"#22282a",neutralDarkest:"#171b1c",neutralLight:"#9daaaf",neutralLighter:"#b9c2c6",neutralLighter2:"#d5dbdd",neutralLighter3:"#f1f3f4",neutralLightest:"#fafcfc",primary:"#007db2",primaryDark:"#005980",primaryDarker:"#004766",primaryDarkest:"#00354d",primaryLight:"#80d9ff",primaryLighter:"#b2e8ff",primaryLightest:"#e5f7ff",qualificationMurkyGreenLight:"#acc081",qualificationMurkyGreenMid:"#81994d",qualificationOrangeLight:"#f8a653",qualificationPinkLight:"#ffc0cb",qualificationPinkMid:"#ff8fa2",qualificationPlum:"#b858f4",qualificationTeal:"#4d9995",qualificationTealishBlueLight:"#aeb6dc",qualificationTealishBlueMid:"#5f6fba",qualificationYellowLight:"#f9e186",secondary:"#247d8f",secondaryDark:"#1a5966",secondaryDarker:"#135e6d",secondaryDarkest:"#0f363d",secondaryLight:"#70c9db",secondaryLighter:"#c2e8f0",secondaryLightest:"#ebf7fa",secondaryLightest2:"#f7fcfd",success:"#357e38",successDark:"#265a26",successDarker:"#1e481e",successLight:"#5dbb5d",successLighter:"#aad4aa",successLightest:"#ecf7ec",tertiary:"#f4c924",tertiaryDark:"#aa8909",tertiaryDarker:"#796206",tertiaryDarkest:"#493b04",tertiaryLight:"#f6d555",tertiaryLighter:"#f9e186",tertiaryLightest:"#fef9e7",warning:"#e57300",warningDark:"#b25900",warningDarker:"#663300",warningDarkest:"#331a00",warningLight:"#ff8c1a",warningLighter:"#fcd9b5",warningLightest:"#fef2e6"}),y=Object.freeze({...f,primary:"#F1511B",primaryDark:"#BF3608",primaryLight:"#FDB8A1"});var L=Object.freeze({__proto__:null,eduqas:y,wjec:f});const m=Object.freeze({controls:{borders:{default:"neutralLight",defaultDarker:"neutralDark",defaultHover:"neutral",defaultLight:"neutralLighter2",disabled:"neutralLight",error:"error",primary:"primary",primaryHover:"primaryDark",secondary:"secondary",secondaryHover:"secondaryDark",success:"success",warning:"warning",white:"basicWhite"},container:{background:"basicWhite",backgroundLightgrey:"neutralLighter3",boldGreen:"successLighter",boldRed:"errorLighter",boldYellow:"tertiaryLighter",border:"neutralLighter2",error:"errorLightest",primary:"primaryLightest",success:"successLightest",warning:"warningLightest"},interaction:{default:"neutralLighter2",defaultActive:"neutralDark",defaultHover:"neutralLight",disabled:"neutralLighter3",error:"error",errorActive:"errorDarker",errorHover:"errorDark",errorSecondary:"errorLightest",errorSecondaryActive:"errorLight",errorSecondaryHover:"errorLighter",primary:"primary",primaryActive:"primaryDarker",primaryHover:"primaryDark",primaryLightBackground:"primaryLightest",secondary:"secondaryLightest",secondaryActive:"secondaryLight",secondaryHover:"secondaryLighter",success:"success",successActive:"successDarker",successHover:"successDark",successLightBackground:"successLightest",tertiary:"tertiary",tertiaryActive:"tertiaryDarker",tertiaryHover:"tertiaryDark",textDark:"neutralDarker2",textDisabled:"neutralLighter",textLight:"neutralLightest",textSecondaryDark:"secondaryDarker",textSecondaryLight:"secondaryLightest",warning:"warning",warningActive:"warningDarker",warningHover:"warningDark"},userInput:{background:{default:"basicWhite",defaultHover:"neutralLighter3",defaultShadow:"neutralLighter2",error:"errorLightest",primary:"primaryLightest",primaryHover:"primaryLighter",secondary:"secondaryLightest",secondaryHover:"secondaryLighter",success:"successLightest",warning:"warningLightest"},icon:{default:"neutralDark",defaultLight:"neutralLighter3",disabled:"neutralLighter",error:"error",primary:"primary",primaryDark:"primaryDark",primaryLight:"primaryLighter",secondary:"secondary",secondaryDark:"secondaryDark",secondaryLight:"secondaryLighter",success:"success",warning:"warning"},message:{default:"neutralDarker",error:"errorDark",success:"successDark",warning:"warningDark"},text:{default:"neutralDarker2",defaultLighter:"neutralLightest",disabled:"neutral",label:"neutralDarker",placeholder:"neutral"}}},foundational:{background:"neutralLighter3",border:"neutralLighter",eduqas:"warning",neutral:"neutral",primary:"primary",secondary:"secondary",tertiary:"tertiary",white:"basicWhite",wjec:"primary"},qualifications:{entrylevel:"qualificationMurkyGreenLight",gcealevel:"qualificationTealishBlueMid",gceaslevel:"qualificationTeal",gcse:"qualificationMurkyGreenMid",otherquals:"qualificationPlum",vqaward:"qualificationPinkMid",wbqadvanced:"qualificationTealishBlueLight",wbqfoundation:"qualificationOrangeLight",wbqkeystage4:"qualificationPinkLight",wbqnational:"qualificationYellowLight"},text:{body:{accent:"warningDark",default:"neutralDarker2",disabled:"neutral",highlight:"primaryDark",link:"primary",linkHoverBackground:"primaryLighter"},heading:{large:"primaryDarkest",medium:"neutralDarker2",primary:"primary",secondary:"secondary"}}}),k=({colorMapping:e={},...r})=>o({...r,themeColors:l(m,e)}),b=e=>`var(${p(e)})`,p=e=>`--${e.replaceAll(".","_").replaceAll(/[A-Z]/g,e=>`-${e.toLocaleLowerCase()}`)}`,D=e=>{const r=u("themes"),a=Object.fromEntries(Object.entries(e).map(([e,r])=>[e,k(r)]));g({themes:{...r,...a}})};let w,q;const v=()=>{const e=u("selectedTheme"),r=u("themes"),a=r[e].colorPalette,t=Object.keys(a).map(e=>`${p(e)}: ${a[e]};`),i=(e,r)=>{const a=[];return Object.entries(e).forEach(([e,t])=>{const n=`${r}.${e}`;if("string"==typeof t){const e=p(n);a.push(`${e}: ${b(t)};`)}else"object"==typeof t&&a.push(...i(t,n).flat())}),a},n=Object.entries(r[e].themeColors).map(([e,r])=>i(r,e)).flat();w.setAttribute("data-wjec-one-color-palette",e),q.setAttribute("data-wjec-one-theme-colors",e),w.innerHTML=`\n    :root {\n      ${t.join("\n")}\n    }\n  `,q.innerHTML=`\n    :root {\n      ${n.join("\n")}\n    }\n  `},j=e=>M(e),T=()=>{E();const e=u("selectedTheme").toLocaleLowerCase().includes("eduqas")?"eduqas":"wjec";return[{brand:e,colorPalette:"eduqas"===e?n:c},(...e)=>d()]},H=r=>{const[a]=T();return e(()=>"function"==typeof r?r(a):r,[a])};((e={})=>{D(e),w=document.createElement("style"),q=document.createElement("style"),document.head.appendChild(w),document.head.appendChild(q),v()})({legacyEduqas:{colorPalette:n,name:"Eduqas 4.0"},eduqas:{colorPalette:y,name:"Eduqas 5.0"},legacyWjec:{colorPalette:c,name:"WJEC 4.0"},wjec:{colorPalette:f,name:"WJEC 5.0"}});const A=(e=u("selectedTheme"))=>u("themes")[e],O=r(u("themes")[u("selectedTheme")]);let P;const M=e=>{const r="function"==typeof e?e(u("selectedTheme")):e;g({selectedTheme:r}),v(),P?.(r)},B=({children:e,defaultTheme:r="wjec"})=>{const i=s(),[n,c]=a(r);return i.current||r===u("selectedTheme")||M(r),P=c,t(O.Provider,{value:A(n)},e)},E=(e=u("selectedTheme"))=>{const r=i(O);return e!==u("selectedTheme")?u("themes")[e]:r},W=e=>{const{colorPalette:r}=E();return Object.hasOwn(r,e)?r[e]:e};export{B as ThemeProvider,L as colors,b as cssVar,p as getCssColorVariableName,A as getTheme,D as registerThemes,j as selectBrand,M as setTheme,E as useTheme,W as useThemeColor,T as useWjecOneTheme,H as useWjecOneThemeStyles};