@sinco/react 1.0.7-rc.2 → 1.0.7-rc.3

package/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useContext } from 'react';
+import React__default, { forwardRef, useContext, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -5209,7 +5209,7 @@ const properties = {
   m: 'margin',
   p: 'padding'
 };
-const directions = {
+const directions$1 = {
   t: 'Top',
   r: 'Right',
   b: 'Bottom',
@@ -5238,7 +5238,7 @@ const getCssProperties = memoize(prop => {
   }
   const [a, b] = prop.split('');
   const property = properties[a];
-  const direction = directions[b] || '';
+  const direction = directions$1[b] || '';
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
 const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
@@ -6508,6 +6508,27 @@ function getContrastRatio(foreground, background) {
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 }
 
+/**
+ * Sets the absolute transparency of a color.
+ * Any existing alpha values are overwritten.
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+ * @param {number} value - value to set the alpha channel to in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+function alpha(color, value) {
+  color = decomposeColor(color);
+  value = clamp(value);
+  if (color.type === 'rgb' || color.type === 'hsl') {
+    color.type += 'a';
+  }
+  if (color.type === 'color') {
+    color.values[3] = `/${value}`;
+  } else {
+    color.values[3] = value;
+  }
+  return recomposeColor(color);
+}
+
 /**
  * Darkens a color.
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
@@ -9903,6 +9924,19 @@ function clampDouble(min, max, input) {
     }
     return input;
 }
+/**
+ * Sanitizes a degree measure as an integer.
+ *
+ * @return a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+function sanitizeDegreesInt(degrees) {
+    degrees = degrees % 360;
+    if (degrees < 0) {
+        degrees = degrees + 360;
+    }
+    return degrees;
+}
 /**
  * Sanitizes a degree measure as a floating-point number.
  *
@@ -9916,6 +9950,30 @@ function sanitizeDegreesDouble(degrees) {
     }
     return degrees;
 }
+/**
+ * Sign of direction change needed to travel from one angle to
+ * another.
+ *
+ * For angles that are 180 degrees apart from each other, both
+ * directions have the same travel distance, so either direction is
+ * shortest. The value 1.0 is returned in this case.
+ *
+ * @param from The angle travel starts from, in degrees.
+ * @param to The angle travel ends at, in degrees.
+ * @return -1 if decreasing from leads to the shortest travel
+ * distance, 1 if increasing from leads to the shortest travel
+ * distance.
+ */
+function rotationDirection(from, to) {
+    const increasingDifference = sanitizeDegreesDouble(to - from);
+    return increasingDifference <= 180.0 ? 1.0 : -1.0;
+}
+/**
+ * Distance of two points on a circle, represented using degrees.
+ */
+function differenceDegrees(a, b) {
+    return 180.0 - Math.abs(Math.abs(a - b) - 180.0);
+}
 /**
  * Multiplies a 1x3 row vector with a 3x3 matrix.
  */
@@ -9987,6 +10045,12 @@ function argbFromLinrgb(linrgb) {
     const b = delinearized(linrgb[2]);
     return argbFromRgb(r, g, b);
 }
+/**
+ * Returns the alpha component of a color in ARGB format.
+ */
+function alphaFromArgb(argb) {
+    return argb >> 24 & 255;
+}
 /**
  * Returns the red component of a color in ARGB format.
  */
@@ -10027,6 +10091,50 @@ function xyzFromArgb(argb) {
     const b = linearized(blueFromArgb(argb));
     return matrixMultiply([r, g, b], SRGB_TO_XYZ);
 }
+/**
+ * Converts a color represented in Lab color space into an ARGB
+ * integer.
+ */
+function argbFromLab(l, a, b) {
+    const whitePoint = WHITE_POINT_D65;
+    const fy = (l + 16.0) / 116.0;
+    const fx = a / 500.0 + fy;
+    const fz = fy - b / 200.0;
+    const xNormalized = labInvf(fx);
+    const yNormalized = labInvf(fy);
+    const zNormalized = labInvf(fz);
+    const x = xNormalized * whitePoint[0];
+    const y = yNormalized * whitePoint[1];
+    const z = zNormalized * whitePoint[2];
+    return argbFromXyz(x, y, z);
+}
+/**
+ * Converts a color from ARGB representation to L*a*b*
+ * representation.
+ *
+ * @param argb the ARGB representation of a color
+ * @return a Lab object representing the color
+ */
+function labFromArgb(argb) {
+    const linearR = linearized(redFromArgb(argb));
+    const linearG = linearized(greenFromArgb(argb));
+    const linearB = linearized(blueFromArgb(argb));
+    const matrix = SRGB_TO_XYZ;
+    const x = matrix[0][0] * linearR + matrix[0][1] * linearG + matrix[0][2] * linearB;
+    const y = matrix[1][0] * linearR + matrix[1][1] * linearG + matrix[1][2] * linearB;
+    const z = matrix[2][0] * linearR + matrix[2][1] * linearG + matrix[2][2] * linearB;
+    const whitePoint = WHITE_POINT_D65;
+    const xNormalized = x / whitePoint[0];
+    const yNormalized = y / whitePoint[1];
+    const zNormalized = z / whitePoint[2];
+    const fx = labF(xNormalized);
+    const fy = labF(yNormalized);
+    const fz = labF(zNormalized);
+    const l = 116.0 * fy - 16;
+    const a = 500.0 * (fx - fy);
+    const b = 200.0 * (fy - fz);
+    return [l, a, b];
+}
 /**
  * Converts an L* value to an ARGB representation.
  *
@@ -11238,6 +11346,93 @@ class Hct {
     }
 }
 
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable:class-as-namespace
+/**
+ * Functions for blending in HCT and CAM16.
+ */
+class Blend {
+    /**
+     * Blend the design color's HCT hue towards the key color's HCT
+     * hue, in a way that leaves the original color recognizable and
+     * recognizably shifted towards the key color.
+     *
+     * @param designColor ARGB representation of an arbitrary color.
+     * @param sourceColor ARGB representation of the main theme color.
+     * @return The design color with a hue shifted towards the
+     * system's color, a slightly warmer/cooler variant of the design
+     * color's hue.
+     */
+    static harmonize(designColor, sourceColor) {
+        const fromHct = Hct.fromInt(designColor);
+        const toHct = Hct.fromInt(sourceColor);
+        const differenceDegrees$1 = differenceDegrees(fromHct.hue, toHct.hue);
+        const rotationDegrees = Math.min(differenceDegrees$1 * 0.5, 15.0);
+        const outputHue = sanitizeDegreesDouble(fromHct.hue +
+            rotationDegrees * rotationDirection(fromHct.hue, toHct.hue));
+        return Hct.from(outputHue, fromHct.chroma, fromHct.tone).toInt();
+    }
+    /**
+     * Blends hue from one color into another. The chroma and tone of
+     * the original color are maintained.
+     *
+     * @param from ARGB representation of color
+     * @param to ARGB representation of color
+     * @param amount how much blending to perform; 0.0 >= and <= 1.0
+     * @return from, with a hue blended towards to. Chroma and tone
+     * are constant.
+     */
+    static hctHue(from, to, amount) {
+        const ucs = Blend.cam16Ucs(from, to, amount);
+        const ucsCam = Cam16.fromInt(ucs);
+        const fromCam = Cam16.fromInt(from);
+        const blended = Hct.from(ucsCam.hue, fromCam.chroma, lstarFromArgb(from));
+        return blended.toInt();
+    }
+    /**
+     * Blend in CAM16-UCS space.
+     *
+     * @param from ARGB representation of color
+     * @param to ARGB representation of color
+     * @param amount how much blending to perform; 0.0 >= and <= 1.0
+     * @return from, blended towards to. Hue, chroma, and tone will
+     * change.
+     */
+    static cam16Ucs(from, to, amount) {
+        const fromCam = Cam16.fromInt(from);
+        const toCam = Cam16.fromInt(to);
+        const fromJ = fromCam.jstar;
+        const fromA = fromCam.astar;
+        const fromB = fromCam.bstar;
+        const toJ = toCam.jstar;
+        const toA = toCam.astar;
+        const toB = toCam.bstar;
+        const jstar = fromJ + (toJ - fromJ) * amount;
+        const astar = fromA + (toA - fromA) * amount;
+        const bstar = fromB + (toB - fromB) * amount;
+        return Cam16.fromUcs(jstar, astar, bstar).toInt();
+    }
+}
+
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -12482,4 +12677,1544 @@ MaterialDynamicColors.onTertiaryFixedVariant = DynamicColor.fromPalette({
     contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
 });
 
-export { SincoTheme };
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ *  A convenience class for retrieving colors that are constant in hue and
+ *  chroma, but vary in tone.
+ */
+class TonalPalette {
+    /**
+     * @param argb ARGB representation of a color
+     * @return Tones matching that color's hue and chroma.
+     */
+    static fromInt(argb) {
+        const hct = Hct.fromInt(argb);
+        return TonalPalette.fromHct(hct);
+    }
+    /**
+     * @param hct Hct
+     * @return Tones matching that color's hue and chroma.
+     */
+    static fromHct(hct) {
+        return new TonalPalette(hct.hue, hct.chroma, hct);
+    }
+    /**
+     * @param hue HCT hue
+     * @param chroma HCT chroma
+     * @return Tones matching hue and chroma.
+     */
+    static fromHueAndChroma(hue, chroma) {
+        return new TonalPalette(hue, chroma, TonalPalette.createKeyColor(hue, chroma));
+    }
+    constructor(hue, chroma, keyColor) {
+        this.hue = hue;
+        this.chroma = chroma;
+        this.keyColor = keyColor;
+        this.cache = new Map();
+    }
+    static createKeyColor(hue, chroma) {
+        const startTone = 50.0;
+        let smallestDeltaHct = Hct.from(hue, chroma, startTone);
+        let smallestDelta = Math.abs(smallestDeltaHct.chroma - chroma);
+        // Starting from T50, check T+/-delta to see if they match the requested
+        // chroma.
+        //
+        // Starts from T50 because T50 has the most chroma available, on
+        // average. Thus it is most likely to have a direct answer and minimize
+        // iteration.
+        for (let delta = 1.0; delta < 50.0; delta += 1.0) {
+            // Termination condition rounding instead of minimizing delta to avoid
+            // case where requested chroma is 16.51, and the closest chroma is 16.49.
+            // Error is minimized, but when rounded and displayed, requested chroma
+            // is 17, key color's chroma is 16.
+            if (Math.round(chroma) === Math.round(smallestDeltaHct.chroma)) {
+                return smallestDeltaHct;
+            }
+            const hctAdd = Hct.from(hue, chroma, startTone + delta);
+            const hctAddDelta = Math.abs(hctAdd.chroma - chroma);
+            if (hctAddDelta < smallestDelta) {
+                smallestDelta = hctAddDelta;
+                smallestDeltaHct = hctAdd;
+            }
+            const hctSubtract = Hct.from(hue, chroma, startTone - delta);
+            const hctSubtractDelta = Math.abs(hctSubtract.chroma - chroma);
+            if (hctSubtractDelta < smallestDelta) {
+                smallestDelta = hctSubtractDelta;
+                smallestDeltaHct = hctSubtract;
+            }
+        }
+        return smallestDeltaHct;
+    }
+    /**
+     * @param tone HCT tone, measured from 0 to 100.
+     * @return ARGB representation of a color with that tone.
+     */
+    tone(tone) {
+        let argb = this.cache.get(tone);
+        if (argb === undefined) {
+            argb = Hct.from(this.hue, this.chroma, tone).toInt();
+            this.cache.set(tone, argb);
+        }
+        return argb;
+    }
+    /**
+     * @param tone HCT tone.
+     * @return HCT representation of a color with that tone.
+     */
+    getHct(tone) {
+        return Hct.fromInt(this.tone(tone));
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * An intermediate concept between the key color for a UI theme, and a full
+ * color scheme. 5 sets of tones are generated, all except one use the same hue
+ * as the key color, and all vary in chroma.
+ */
+class CorePalette {
+    /**
+     * @param argb ARGB representation of a color
+     */
+    static of(argb) {
+        return new CorePalette(argb, false);
+    }
+    /**
+     * @param argb ARGB representation of a color
+     */
+    static contentOf(argb) {
+        return new CorePalette(argb, true);
+    }
+    /**
+     * Create a [CorePalette] from a set of colors
+     */
+    static fromColors(colors) {
+        return CorePalette.createPaletteFromColors(false, colors);
+    }
+    /**
+     * Create a content [CorePalette] from a set of colors
+     */
+    static contentFromColors(colors) {
+        return CorePalette.createPaletteFromColors(true, colors);
+    }
+    static createPaletteFromColors(content, colors) {
+        const palette = new CorePalette(colors.primary, content);
+        if (colors.secondary) {
+            const p = new CorePalette(colors.secondary, content);
+            palette.a2 = p.a1;
+        }
+        if (colors.tertiary) {
+            const p = new CorePalette(colors.tertiary, content);
+            palette.a3 = p.a1;
+        }
+        if (colors.error) {
+            const p = new CorePalette(colors.error, content);
+            palette.error = p.a1;
+        }
+        if (colors.neutral) {
+            const p = new CorePalette(colors.neutral, content);
+            palette.n1 = p.n1;
+        }
+        if (colors.neutralVariant) {
+            const p = new CorePalette(colors.neutralVariant, content);
+            palette.n2 = p.n2;
+        }
+        return palette;
+    }
+    constructor(argb, isContent) {
+        const hct = Hct.fromInt(argb);
+        const hue = hct.hue;
+        const chroma = hct.chroma;
+        if (isContent) {
+            this.a1 = TonalPalette.fromHueAndChroma(hue, chroma);
+            this.a2 = TonalPalette.fromHueAndChroma(hue, chroma / 3);
+            this.a3 = TonalPalette.fromHueAndChroma(hue + 60, chroma / 2);
+            this.n1 = TonalPalette.fromHueAndChroma(hue, Math.min(chroma / 12, 4));
+            this.n2 = TonalPalette.fromHueAndChroma(hue, Math.min(chroma / 6, 8));
+        }
+        else {
+            this.a1 = TonalPalette.fromHueAndChroma(hue, Math.max(48, chroma));
+            this.a2 = TonalPalette.fromHueAndChroma(hue, 16);
+            this.a3 = TonalPalette.fromHueAndChroma(hue + 60, 24);
+            this.n1 = TonalPalette.fromHueAndChroma(hue, 4);
+            this.n2 = TonalPalette.fromHueAndChroma(hue, 8);
+        }
+        this.error = TonalPalette.fromHueAndChroma(25, 84);
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Provides conversions needed for K-Means quantization. Converting input to
+ * points, and converting the final state of the K-Means algorithm to colors.
+ */
+class LabPointProvider {
+    /**
+     * Convert a color represented in ARGB to a 3-element array of L*a*b*
+     * coordinates of the color.
+     */
+    fromInt(argb) {
+        return labFromArgb(argb);
+    }
+    /**
+     * Convert a 3-element array to a color represented in ARGB.
+     */
+    toInt(point) {
+        return argbFromLab(point[0], point[1], point[2]);
+    }
+    /**
+     * Standard CIE 1976 delta E formula also takes the square root, unneeded
+     * here. This method is used by quantization algorithms to compare distance,
+     * and the relative ordering is the same, with or without a square root.
+     *
+     * This relatively minor optimization is helpful because this method is
+     * called at least once for each pixel in an image.
+     */
+    distance(from, to) {
+        const dL = from[0] - to[0];
+        const dA = from[1] - to[1];
+        const dB = from[2] - to[2];
+        return dL * dL + dA * dA + dB * dB;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const MAX_ITERATIONS = 10;
+const MIN_MOVEMENT_DISTANCE = 3.0;
+/**
+ * An image quantizer that improves on the speed of a standard K-Means algorithm
+ * by implementing several optimizations, including deduping identical pixels
+ * and a triangle inequality rule that reduces the number of comparisons needed
+ * to identify which cluster a point should be moved to.
+ *
+ * Wsmeans stands for Weighted Square Means.
+ *
+ * This algorithm was designed by M. Emre Celebi, and was found in their 2011
+ * paper, Improving the Performance of K-Means for Color Quantization.
+ * https://arxiv.org/abs/1101.0395
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerWsmeans {
+    /**
+     * @param inputPixels Colors in ARGB format.
+     * @param startingClusters Defines the initial state of the quantizer. Passing
+     *     an empty array is fine, the implementation will create its own initial
+     *     state that leads to reproducible results for the same inputs.
+     *     Passing an array that is the result of Wu quantization leads to higher
+     *     quality results.
+     * @param maxColors The number of colors to divide the image into. A lower
+     *     number of colors may be returned.
+     * @return Colors in ARGB format.
+     */
+    static quantize(inputPixels, startingClusters, maxColors) {
+        const pixelToCount = new Map();
+        const points = new Array();
+        const pixels = new Array();
+        const pointProvider = new LabPointProvider();
+        let pointCount = 0;
+        for (let i = 0; i < inputPixels.length; i++) {
+            const inputPixel = inputPixels[i];
+            const pixelCount = pixelToCount.get(inputPixel);
+            if (pixelCount === undefined) {
+                pointCount++;
+                points.push(pointProvider.fromInt(inputPixel));
+                pixels.push(inputPixel);
+                pixelToCount.set(inputPixel, 1);
+            }
+            else {
+                pixelToCount.set(inputPixel, pixelCount + 1);
+            }
+        }
+        const counts = new Array();
+        for (let i = 0; i < pointCount; i++) {
+            const pixel = pixels[i];
+            const count = pixelToCount.get(pixel);
+            if (count !== undefined) {
+                counts[i] = count;
+            }
+        }
+        let clusterCount = Math.min(maxColors, pointCount);
+        if (startingClusters.length > 0) {
+            clusterCount = Math.min(clusterCount, startingClusters.length);
+        }
+        const clusters = new Array();
+        for (let i = 0; i < startingClusters.length; i++) {
+            clusters.push(pointProvider.fromInt(startingClusters[i]));
+        }
+        const additionalClustersNeeded = clusterCount - clusters.length;
+        if (startingClusters.length === 0 && additionalClustersNeeded > 0) {
+            for (let i = 0; i < additionalClustersNeeded; i++) {
+                const l = Math.random() * 100.0;
+                const a = Math.random() * (100.0 - (-100.0) + 1) + -100;
+                const b = Math.random() * (100.0 - (-100.0) + 1) + -100;
+                clusters.push(new Array(l, a, b));
+            }
+        }
+        const clusterIndices = new Array();
+        for (let i = 0; i < pointCount; i++) {
+            clusterIndices.push(Math.floor(Math.random() * clusterCount));
+        }
+        const indexMatrix = new Array();
+        for (let i = 0; i < clusterCount; i++) {
+            indexMatrix.push(new Array());
+            for (let j = 0; j < clusterCount; j++) {
+                indexMatrix[i].push(0);
+            }
+        }
+        const distanceToIndexMatrix = new Array();
+        for (let i = 0; i < clusterCount; i++) {
+            distanceToIndexMatrix.push(new Array());
+            for (let j = 0; j < clusterCount; j++) {
+                distanceToIndexMatrix[i].push(new DistanceAndIndex());
+            }
+        }
+        const pixelCountSums = new Array();
+        for (let i = 0; i < clusterCount; i++) {
+            pixelCountSums.push(0);
+        }
+        for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
+            for (let i = 0; i < clusterCount; i++) {
+                for (let j = i + 1; j < clusterCount; j++) {
+                    const distance = pointProvider.distance(clusters[i], clusters[j]);
+                    distanceToIndexMatrix[j][i].distance = distance;
+                    distanceToIndexMatrix[j][i].index = i;
+                    distanceToIndexMatrix[i][j].distance = distance;
+                    distanceToIndexMatrix[i][j].index = j;
+                }
+                distanceToIndexMatrix[i].sort();
+                for (let j = 0; j < clusterCount; j++) {
+                    indexMatrix[i][j] = distanceToIndexMatrix[i][j].index;
+                }
+            }
+            let pointsMoved = 0;
+            for (let i = 0; i < pointCount; i++) {
+                const point = points[i];
+                const previousClusterIndex = clusterIndices[i];
+                const previousCluster = clusters[previousClusterIndex];
+                const previousDistance = pointProvider.distance(point, previousCluster);
+                let minimumDistance = previousDistance;
+                let newClusterIndex = -1;
+                for (let j = 0; j < clusterCount; j++) {
+                    if (distanceToIndexMatrix[previousClusterIndex][j].distance >=
+                        4 * previousDistance) {
+                        continue;
+                    }
+                    const distance = pointProvider.distance(point, clusters[j]);
+                    if (distance < minimumDistance) {
+                        minimumDistance = distance;
+                        newClusterIndex = j;
+                    }
+                }
+                if (newClusterIndex !== -1) {
+                    const distanceChange = Math.abs((Math.sqrt(minimumDistance) - Math.sqrt(previousDistance)));
+                    if (distanceChange > MIN_MOVEMENT_DISTANCE) {
+                        pointsMoved++;
+                        clusterIndices[i] = newClusterIndex;
+                    }
+                }
+            }
+            if (pointsMoved === 0 && iteration !== 0) {
+                break;
+            }
+            const componentASums = new Array(clusterCount).fill(0);
+            const componentBSums = new Array(clusterCount).fill(0);
+            const componentCSums = new Array(clusterCount).fill(0);
+            for (let i = 0; i < clusterCount; i++) {
+                pixelCountSums[i] = 0;
+            }
+            for (let i = 0; i < pointCount; i++) {
+                const clusterIndex = clusterIndices[i];
+                const point = points[i];
+                const count = counts[i];
+                pixelCountSums[clusterIndex] += count;
+                componentASums[clusterIndex] += (point[0] * count);
+                componentBSums[clusterIndex] += (point[1] * count);
+                componentCSums[clusterIndex] += (point[2] * count);
+            }
+            for (let i = 0; i < clusterCount; i++) {
+                const count = pixelCountSums[i];
+                if (count === 0) {
+                    clusters[i] = [0.0, 0.0, 0.0];
+                    continue;
+                }
+                const a = componentASums[i] / count;
+                const b = componentBSums[i] / count;
+                const c = componentCSums[i] / count;
+                clusters[i] = [a, b, c];
+            }
+        }
+        const argbToPopulation = new Map();
+        for (let i = 0; i < clusterCount; i++) {
+            const count = pixelCountSums[i];
+            if (count === 0) {
+                continue;
+            }
+            const possibleNewCluster = pointProvider.toInt(clusters[i]);
+            if (argbToPopulation.has(possibleNewCluster)) {
+                continue;
+            }
+            argbToPopulation.set(possibleNewCluster, count);
+        }
+        return argbToPopulation;
+    }
+}
+/**
+ *  A wrapper for maintaining a table of distances between K-Means clusters.
+ */
+class DistanceAndIndex {
+    constructor() {
+        this.distance = -1;
+        this.index = -1;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Quantizes an image into a map, with keys of ARGB colors, and values of the
+ * number of times that color appears in the image.
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerMap {
+    /**
+     * @param pixels Colors in ARGB format.
+     * @return A Map with keys of ARGB colors, and values of the number of times
+     *     the color appears in the image.
+     */
+    static quantize(pixels) {
+        const countByColor = new Map();
+        for (let i = 0; i < pixels.length; i++) {
+            const pixel = pixels[i];
+            const alpha = alphaFromArgb(pixel);
+            if (alpha < 255) {
+                continue;
+            }
+            countByColor.set(pixel, (countByColor.get(pixel) ?? 0) + 1);
+        }
+        return countByColor;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const INDEX_BITS = 5;
+const SIDE_LENGTH = 33; // ((1 << INDEX_INDEX_BITS) + 1)
+const TOTAL_SIZE = 35937; // SIDE_LENGTH * SIDE_LENGTH * SIDE_LENGTH
+const directions = {
+    RED: 'red',
+    GREEN: 'green',
+    BLUE: 'blue',
+};
+/**
+ * An image quantizer that divides the image's pixels into clusters by
+ * recursively cutting an RGB cube, based on the weight of pixels in each area
+ * of the cube.
+ *
+ * The algorithm was described by Xiaolin Wu in Graphic Gems II, published in
+ * 1991.
+ */
+class QuantizerWu {
+    constructor(weights = [], momentsR = [], momentsG = [], momentsB = [], moments = [], cubes = []) {
+        this.weights = weights;
+        this.momentsR = momentsR;
+        this.momentsG = momentsG;
+        this.momentsB = momentsB;
+        this.moments = moments;
+        this.cubes = cubes;
+    }
+    /**
+     * @param pixels Colors in ARGB format.
+     * @param maxColors The number of colors to divide the image into. A lower
+     *     number of colors may be returned.
+     * @return Colors in ARGB format.
+     */
+    quantize(pixels, maxColors) {
+        this.constructHistogram(pixels);
+        this.computeMoments();
+        const createBoxesResult = this.createBoxes(maxColors);
+        const results = this.createResult(createBoxesResult.resultCount);
+        return results;
+    }
+    constructHistogram(pixels) {
+        this.weights = Array.from({ length: TOTAL_SIZE }).fill(0);
+        this.momentsR = Array.from({ length: TOTAL_SIZE }).fill(0);
+        this.momentsG = Array.from({ length: TOTAL_SIZE }).fill(0);
+        this.momentsB = Array.from({ length: TOTAL_SIZE }).fill(0);
+        this.moments = Array.from({ length: TOTAL_SIZE }).fill(0);
+        const countByColor = QuantizerMap.quantize(pixels);
+        for (const [pixel, count] of countByColor.entries()) {
+            const red = redFromArgb(pixel);
+            const green = greenFromArgb(pixel);
+            const blue = blueFromArgb(pixel);
+            const bitsToRemove = 8 - INDEX_BITS;
+            const iR = (red >> bitsToRemove) + 1;
+            const iG = (green >> bitsToRemove) + 1;
+            const iB = (blue >> bitsToRemove) + 1;
+            const index = this.getIndex(iR, iG, iB);
+            this.weights[index] = (this.weights[index] ?? 0) + count;
+            this.momentsR[index] += count * red;
+            this.momentsG[index] += count * green;
+            this.momentsB[index] += count * blue;
+            this.moments[index] += count * (red * red + green * green + blue * blue);
+        }
+    }
+    computeMoments() {
+        for (let r = 1; r < SIDE_LENGTH; r++) {
+            const area = Array.from({ length: SIDE_LENGTH }).fill(0);
+            const areaR = Array.from({ length: SIDE_LENGTH }).fill(0);
+            const areaG = Array.from({ length: SIDE_LENGTH }).fill(0);
+            const areaB = Array.from({ length: SIDE_LENGTH }).fill(0);
+            const area2 = Array.from({ length: SIDE_LENGTH }).fill(0.0);
+            for (let g = 1; g < SIDE_LENGTH; g++) {
+                let line = 0;
+                let lineR = 0;
+                let lineG = 0;
+                let lineB = 0;
+                let line2 = 0.0;
+                for (let b = 1; b < SIDE_LENGTH; b++) {
+                    const index = this.getIndex(r, g, b);
+                    line += this.weights[index];
+                    lineR += this.momentsR[index];
+                    lineG += this.momentsG[index];
+                    lineB += this.momentsB[index];
+                    line2 += this.moments[index];
+                    area[b] += line;
+                    areaR[b] += lineR;
+                    areaG[b] += lineG;
+                    areaB[b] += lineB;
+                    area2[b] += line2;
+                    const previousIndex = this.getIndex(r - 1, g, b);
+                    this.weights[index] = this.weights[previousIndex] + area[b];
+                    this.momentsR[index] = this.momentsR[previousIndex] + areaR[b];
+                    this.momentsG[index] = this.momentsG[previousIndex] + areaG[b];
+                    this.momentsB[index] = this.momentsB[previousIndex] + areaB[b];
+                    this.moments[index] = this.moments[previousIndex] + area2[b];
+                }
+            }
+        }
+    }
+    createBoxes(maxColors) {
+        this.cubes =
+            Array.from({ length: maxColors }).fill(0).map(() => new Box());
+        const volumeVariance = Array.from({ length: maxColors }).fill(0.0);
+        this.cubes[0].r0 = 0;
+        this.cubes[0].g0 = 0;
+        this.cubes[0].b0 = 0;
+        this.cubes[0].r1 = SIDE_LENGTH - 1;
+        this.cubes[0].g1 = SIDE_LENGTH - 1;
+        this.cubes[0].b1 = SIDE_LENGTH - 1;
+        let generatedColorCount = maxColors;
+        let next = 0;
+        for (let i = 1; i < maxColors; i++) {
+            if (this.cut(this.cubes[next], this.cubes[i])) {
+                volumeVariance[next] =
+                    this.cubes[next].vol > 1 ? this.variance(this.cubes[next]) : 0.0;
+                volumeVariance[i] =
+                    this.cubes[i].vol > 1 ? this.variance(this.cubes[i]) : 0.0;
+            }
+            else {
+                volumeVariance[next] = 0.0;
+                i--;
+            }
+            next = 0;
+            let temp = volumeVariance[0];
+            for (let j = 1; j <= i; j++) {
+                if (volumeVariance[j] > temp) {
+                    temp = volumeVariance[j];
+                    next = j;
+                }
+            }
+            if (temp <= 0.0) {
+                generatedColorCount = i + 1;
+                break;
+            }
+        }
+        return new CreateBoxesResult(maxColors, generatedColorCount);
+    }
+    createResult(colorCount) {
+        const colors = [];
+        for (let i = 0; i < colorCount; ++i) {
+            const cube = this.cubes[i];
+            const weight = this.volume(cube, this.weights);
+            if (weight > 0) {
+                const r = Math.round(this.volume(cube, this.momentsR) / weight);
+                const g = Math.round(this.volume(cube, this.momentsG) / weight);
+                const b = Math.round(this.volume(cube, this.momentsB) / weight);
+                const color = (255 << 24) | ((r & 0x0ff) << 16) | ((g & 0x0ff) << 8) |
+                    (b & 0x0ff);
+                colors.push(color);
+            }
+        }
+        return colors;
+    }
+    variance(cube) {
+        const dr = this.volume(cube, this.momentsR);
+        const dg = this.volume(cube, this.momentsG);
+        const db = this.volume(cube, this.momentsB);
+        const xx = this.moments[this.getIndex(cube.r1, cube.g1, cube.b1)] -
+            this.moments[this.getIndex(cube.r1, cube.g1, cube.b0)] -
+            this.moments[this.getIndex(cube.r1, cube.g0, cube.b1)] +
+            this.moments[this.getIndex(cube.r1, cube.g0, cube.b0)] -
+            this.moments[this.getIndex(cube.r0, cube.g1, cube.b1)] +
+            this.moments[this.getIndex(cube.r0, cube.g1, cube.b0)] +
+            this.moments[this.getIndex(cube.r0, cube.g0, cube.b1)] -
+            this.moments[this.getIndex(cube.r0, cube.g0, cube.b0)];
+        const hypotenuse = dr * dr + dg * dg + db * db;
+        const volume = this.volume(cube, this.weights);
+        return xx - hypotenuse / volume;
+    }
+    cut(one, two) {
+        const wholeR = this.volume(one, this.momentsR);
+        const wholeG = this.volume(one, this.momentsG);
+        const wholeB = this.volume(one, this.momentsB);
+        const wholeW = this.volume(one, this.weights);
+        const maxRResult = this.maximize(one, directions.RED, one.r0 + 1, one.r1, wholeR, wholeG, wholeB, wholeW);
+        const maxGResult = this.maximize(one, directions.GREEN, one.g0 + 1, one.g1, wholeR, wholeG, wholeB, wholeW);
+        const maxBResult = this.maximize(one, directions.BLUE, one.b0 + 1, one.b1, wholeR, wholeG, wholeB, wholeW);
+        let direction;
+        const maxR = maxRResult.maximum;
+        const maxG = maxGResult.maximum;
+        const maxB = maxBResult.maximum;
+        if (maxR >= maxG && maxR >= maxB) {
+            if (maxRResult.cutLocation < 0) {
+                return false;
+            }
+            direction = directions.RED;
+        }
+        else if (maxG >= maxR && maxG >= maxB) {
+            direction = directions.GREEN;
+        }
+        else {
+            direction = directions.BLUE;
+        }
+        two.r1 = one.r1;
+        two.g1 = one.g1;
+        two.b1 = one.b1;
+        switch (direction) {
+            case directions.RED:
+                one.r1 = maxRResult.cutLocation;
+                two.r0 = one.r1;
+                two.g0 = one.g0;
+                two.b0 = one.b0;
+                break;
+            case directions.GREEN:
+                one.g1 = maxGResult.cutLocation;
+                two.r0 = one.r0;
+                two.g0 = one.g1;
+                two.b0 = one.b0;
+                break;
+            case directions.BLUE:
+                one.b1 = maxBResult.cutLocation;
+                two.r0 = one.r0;
+                two.g0 = one.g0;
+                two.b0 = one.b1;
+                break;
+            default:
+                throw new Error('unexpected direction ' + direction);
+        }
+        one.vol = (one.r1 - one.r0) * (one.g1 - one.g0) * (one.b1 - one.b0);
+        two.vol = (two.r1 - two.r0) * (two.g1 - two.g0) * (two.b1 - two.b0);
+        return true;
+    }
+    maximize(cube, direction, first, last, wholeR, wholeG, wholeB, wholeW) {
+        const bottomR = this.bottom(cube, direction, this.momentsR);
+        const bottomG = this.bottom(cube, direction, this.momentsG);
+        const bottomB = this.bottom(cube, direction, this.momentsB);
+        const bottomW = this.bottom(cube, direction, this.weights);
+        let max = 0.0;
+        let cut = -1;
+        let halfR = 0;
+        let halfG = 0;
+        let halfB = 0;
+        let halfW = 0;
+        for (let i = first; i < last; i++) {
+            halfR = bottomR + this.top(cube, direction, i, this.momentsR);
+            halfG = bottomG + this.top(cube, direction, i, this.momentsG);
+            halfB = bottomB + this.top(cube, direction, i, this.momentsB);
+            halfW = bottomW + this.top(cube, direction, i, this.weights);
+            if (halfW === 0) {
+                continue;
+            }
+            let tempNumerator = (halfR * halfR + halfG * halfG + halfB * halfB) * 1.0;
+            let tempDenominator = halfW * 1.0;
+            let temp = tempNumerator / tempDenominator;
+            halfR = wholeR - halfR;
+            halfG = wholeG - halfG;
+            halfB = wholeB - halfB;
+            halfW = wholeW - halfW;
+            if (halfW === 0) {
+                continue;
+            }
+            tempNumerator = (halfR * halfR + halfG * halfG + halfB * halfB) * 1.0;
+            tempDenominator = halfW * 1.0;
+            temp += tempNumerator / tempDenominator;
+            if (temp > max) {
+                max = temp;
+                cut = i;
+            }
+        }
+        return new MaximizeResult(cut, max);
+    }
+    volume(cube, moment) {
+        return (moment[this.getIndex(cube.r1, cube.g1, cube.b1)] -
+            moment[this.getIndex(cube.r1, cube.g1, cube.b0)] -
+            moment[this.getIndex(cube.r1, cube.g0, cube.b1)] +
+            moment[this.getIndex(cube.r1, cube.g0, cube.b0)] -
+            moment[this.getIndex(cube.r0, cube.g1, cube.b1)] +
+            moment[this.getIndex(cube.r0, cube.g1, cube.b0)] +
+            moment[this.getIndex(cube.r0, cube.g0, cube.b1)] -
+            moment[this.getIndex(cube.r0, cube.g0, cube.b0)]);
+    }
+    bottom(cube, direction, moment) {
+        switch (direction) {
+            case directions.RED:
+                return (-moment[this.getIndex(cube.r0, cube.g1, cube.b1)] +
+                    moment[this.getIndex(cube.r0, cube.g1, cube.b0)] +
+                    moment[this.getIndex(cube.r0, cube.g0, cube.b1)] -
+                    moment[this.getIndex(cube.r0, cube.g0, cube.b0)]);
+            case directions.GREEN:
+                return (-moment[this.getIndex(cube.r1, cube.g0, cube.b1)] +
+                    moment[this.getIndex(cube.r1, cube.g0, cube.b0)] +
+                    moment[this.getIndex(cube.r0, cube.g0, cube.b1)] -
+                    moment[this.getIndex(cube.r0, cube.g0, cube.b0)]);
+            case directions.BLUE:
+                return (-moment[this.getIndex(cube.r1, cube.g1, cube.b0)] +
+                    moment[this.getIndex(cube.r1, cube.g0, cube.b0)] +
+                    moment[this.getIndex(cube.r0, cube.g1, cube.b0)] -
+                    moment[this.getIndex(cube.r0, cube.g0, cube.b0)]);
+            default:
+                throw new Error('unexpected direction $direction');
+        }
+    }
+    top(cube, direction, position, moment) {
+        switch (direction) {
+            case directions.RED:
+                return (moment[this.getIndex(position, cube.g1, cube.b1)] -
+                    moment[this.getIndex(position, cube.g1, cube.b0)] -
+                    moment[this.getIndex(position, cube.g0, cube.b1)] +
+                    moment[this.getIndex(position, cube.g0, cube.b0)]);
+            case directions.GREEN:
+                return (moment[this.getIndex(cube.r1, position, cube.b1)] -
+                    moment[this.getIndex(cube.r1, position, cube.b0)] -
+                    moment[this.getIndex(cube.r0, position, cube.b1)] +
+                    moment[this.getIndex(cube.r0, position, cube.b0)]);
+            case directions.BLUE:
+                return (moment[this.getIndex(cube.r1, cube.g1, position)] -
+                    moment[this.getIndex(cube.r1, cube.g0, position)] -
+                    moment[this.getIndex(cube.r0, cube.g1, position)] +
+                    moment[this.getIndex(cube.r0, cube.g0, position)]);
+            default:
+                throw new Error('unexpected direction $direction');
+        }
+    }
+    getIndex(r, g, b) {
+        return (r << (INDEX_BITS * 2)) + (r << (INDEX_BITS + 1)) + r +
+            (g << INDEX_BITS) + g + b;
+    }
+}
+/**
+ * Keeps track of the state of each box created as the Wu  quantization
+ * algorithm progresses through dividing the image's pixels as plotted in RGB.
+ */
+class Box {
+    constructor(r0 = 0, r1 = 0, g0 = 0, g1 = 0, b0 = 0, b1 = 0, vol = 0) {
+        this.r0 = r0;
+        this.r1 = r1;
+        this.g0 = g0;
+        this.g1 = g1;
+        this.b0 = b0;
+        this.b1 = b1;
+        this.vol = vol;
+    }
+}
+/**
+ * Represents final result of Wu algorithm.
+ */
+class CreateBoxesResult {
+    /**
+     * @param requestedCount how many colors the caller asked to be returned from
+     *     quantization.
+     * @param resultCount the actual number of colors achieved from quantization.
+     *     May be lower than the requested count.
+     */
+    constructor(requestedCount, resultCount) {
+        this.requestedCount = requestedCount;
+        this.resultCount = resultCount;
+    }
+}
+/**
+ * Represents the result of calculating where to cut an existing box in such
+ * a way to maximize variance between the two new boxes created by a cut.
+ */
+class MaximizeResult {
+    constructor(cutLocation, maximum) {
+        this.cutLocation = cutLocation;
+        this.maximum = maximum;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * An image quantizer that improves on the quality of a standard K-Means
+ * algorithm by setting the K-Means initial state to the output of a Wu
+ * quantizer, instead of random centroids. Improves on speed by several
+ * optimizations, as implemented in Wsmeans, or Weighted Square Means, K-Means
+ * with those optimizations.
+ *
+ * This algorithm was designed by M. Emre Celebi, and was found in their 2011
+ * paper, Improving the Performance of K-Means for Color Quantization.
+ * https://arxiv.org/abs/1101.0395
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerCelebi {
+    /**
+     * @param pixels Colors in ARGB format.
+     * @param maxColors The number of colors to divide the image into. A lower
+     *     number of colors may be returned.
+     * @return Map with keys of colors in ARGB format, and values of number of
+     *     pixels in the original image that correspond to the color in the
+     *     quantized image.
+     */
+    static quantize(pixels, maxColors) {
+        const wu = new QuantizerWu();
+        const wuResult = wu.quantize(pixels, maxColors);
+        return QuantizerWsmeans.quantize(pixels, wuResult, maxColors);
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Represents a Material color scheme, a mapping of color roles to colors.
+ */
+class Scheme {
+    get primary() {
+        return this.props.primary;
+    }
+    get onPrimary() {
+        return this.props.onPrimary;
+    }
+    get primaryContainer() {
+        return this.props.primaryContainer;
+    }
+    get onPrimaryContainer() {
+        return this.props.onPrimaryContainer;
+    }
+    get secondary() {
+        return this.props.secondary;
+    }
+    get onSecondary() {
+        return this.props.onSecondary;
+    }
+    get secondaryContainer() {
+        return this.props.secondaryContainer;
+    }
+    get onSecondaryContainer() {
+        return this.props.onSecondaryContainer;
+    }
+    get tertiary() {
+        return this.props.tertiary;
+    }
+    get onTertiary() {
+        return this.props.onTertiary;
+    }
+    get tertiaryContainer() {
+        return this.props.tertiaryContainer;
+    }
+    get onTertiaryContainer() {
+        return this.props.onTertiaryContainer;
+    }
+    get error() {
+        return this.props.error;
+    }
+    get onError() {
+        return this.props.onError;
+    }
+    get errorContainer() {
+        return this.props.errorContainer;
+    }
+    get onErrorContainer() {
+        return this.props.onErrorContainer;
+    }
+    get background() {
+        return this.props.background;
+    }
+    get onBackground() {
+        return this.props.onBackground;
+    }
+    get surface() {
+        return this.props.surface;
+    }
+    get onSurface() {
+        return this.props.onSurface;
+    }
+    get surfaceVariant() {
+        return this.props.surfaceVariant;
+    }
+    get onSurfaceVariant() {
+        return this.props.onSurfaceVariant;
+    }
+    get outline() {
+        return this.props.outline;
+    }
+    get outlineVariant() {
+        return this.props.outlineVariant;
+    }
+    get shadow() {
+        return this.props.shadow;
+    }
+    get scrim() {
+        return this.props.scrim;
+    }
+    get inverseSurface() {
+        return this.props.inverseSurface;
+    }
+    get inverseOnSurface() {
+        return this.props.inverseOnSurface;
+    }
+    get inversePrimary() {
+        return this.props.inversePrimary;
+    }
+    /**
+     * @param argb ARGB representation of a color.
+     * @return Light Material color scheme, based on the color's hue.
+     */
+    static light(argb) {
+        return Scheme.lightFromCorePalette(CorePalette.of(argb));
+    }
+    /**
+     * @param argb ARGB representation of a color.
+     * @return Dark Material color scheme, based on the color's hue.
+     */
+    static dark(argb) {
+        return Scheme.darkFromCorePalette(CorePalette.of(argb));
+    }
+    /**
+     * @param argb ARGB representation of a color.
+     * @return Light Material content color scheme, based on the color's hue.
+     */
+    static lightContent(argb) {
+        return Scheme.lightFromCorePalette(CorePalette.contentOf(argb));
+    }
+    /**
+     * @param argb ARGB representation of a color.
+     * @return Dark Material content color scheme, based on the color's hue.
+     */
+    static darkContent(argb) {
+        return Scheme.darkFromCorePalette(CorePalette.contentOf(argb));
+    }
+    /**
+     * Light scheme from core palette
+     */
+    static lightFromCorePalette(core) {
+        return new Scheme({
+            primary: core.a1.tone(40),
+            onPrimary: core.a1.tone(100),
+            primaryContainer: core.a1.tone(90),
+            onPrimaryContainer: core.a1.tone(10),
+            secondary: core.a2.tone(40),
+            onSecondary: core.a2.tone(100),
+            secondaryContainer: core.a2.tone(90),
+            onSecondaryContainer: core.a2.tone(10),
+            tertiary: core.a3.tone(40),
+            onTertiary: core.a3.tone(100),
+            tertiaryContainer: core.a3.tone(90),
+            onTertiaryContainer: core.a3.tone(10),
+            error: core.error.tone(40),
+            onError: core.error.tone(100),
+            errorContainer: core.error.tone(90),
+            onErrorContainer: core.error.tone(10),
+            background: core.n1.tone(99),
+            onBackground: core.n1.tone(10),
+            surface: core.n1.tone(99),
+            onSurface: core.n1.tone(10),
+            surfaceVariant: core.n2.tone(90),
+            onSurfaceVariant: core.n2.tone(30),
+            outline: core.n2.tone(50),
+            outlineVariant: core.n2.tone(80),
+            shadow: core.n1.tone(0),
+            scrim: core.n1.tone(0),
+            inverseSurface: core.n1.tone(20),
+            inverseOnSurface: core.n1.tone(95),
+            inversePrimary: core.a1.tone(80)
+        });
+    }
+    /**
+     * Dark scheme from core palette
+     */
+    static darkFromCorePalette(core) {
+        return new Scheme({
+            primary: core.a1.tone(80),
+            onPrimary: core.a1.tone(20),
+            primaryContainer: core.a1.tone(30),
+            onPrimaryContainer: core.a1.tone(90),
+            secondary: core.a2.tone(80),
+            onSecondary: core.a2.tone(20),
+            secondaryContainer: core.a2.tone(30),
+            onSecondaryContainer: core.a2.tone(90),
+            tertiary: core.a3.tone(80),
+            onTertiary: core.a3.tone(20),
+            tertiaryContainer: core.a3.tone(30),
+            onTertiaryContainer: core.a3.tone(90),
+            error: core.error.tone(80),
+            onError: core.error.tone(20),
+            errorContainer: core.error.tone(30),
+            onErrorContainer: core.error.tone(80),
+            background: core.n1.tone(10),
+            onBackground: core.n1.tone(90),
+            surface: core.n1.tone(10),
+            onSurface: core.n1.tone(90),
+            surfaceVariant: core.n2.tone(30),
+            onSurfaceVariant: core.n2.tone(80),
+            outline: core.n2.tone(60),
+            outlineVariant: core.n2.tone(30),
+            shadow: core.n1.tone(0),
+            scrim: core.n1.tone(0),
+            inverseSurface: core.n1.tone(90),
+            inverseOnSurface: core.n1.tone(20),
+            inversePrimary: core.a1.tone(40)
+        });
+    }
+    constructor(props) {
+        this.props = props;
+    }
+    toJSON() {
+        return {
+            ...this.props
+        };
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const SCORE_OPTION_DEFAULTS = {
+    desired: 4,
+    fallbackColorARGB: 0xff4285f4,
+    filter: true, // Avoid unsuitable colors.
+};
+function compare(a, b) {
+    if (a.score > b.score) {
+        return -1;
+    }
+    else if (a.score < b.score) {
+        return 1;
+    }
+    return 0;
+}
+/**
+ *  Given a large set of colors, remove colors that are unsuitable for a UI
+ *  theme, and rank the rest based on suitability.
+ *
+ *  Enables use of a high cluster count for image quantization, thus ensuring
+ *  colors aren't muddied, while curating the high cluster count to a much
+ *  smaller number of appropriate choices.
+ */
+class Score {
+    constructor() { }
+    /**
+     * Given a map with keys of colors and values of how often the color appears,
+     * rank the colors based on suitability for being used for a UI theme.
+     *
+     * @param colorsToPopulation map with keys of colors and values of how often
+     *     the color appears, usually from a source image.
+     * @param {ScoreOptions} options optional parameters.
+     * @return Colors sorted by suitability for a UI theme. The most suitable
+     *     color is the first item, the least suitable is the last. There will
+     *     always be at least one color returned. If all the input colors
+     *     were not suitable for a theme, a default fallback color will be
+     *     provided, Google Blue.
+     */
+    static score(colorsToPopulation, options) {
+        const { desired, fallbackColorARGB, filter } = { ...SCORE_OPTION_DEFAULTS, ...options };
+        // Get the HCT color for each Argb value, while finding the per hue count and
+        // total count.
+        const colorsHct = [];
+        const huePopulation = new Array(360).fill(0);
+        let populationSum = 0;
+        for (const [argb, population] of colorsToPopulation.entries()) {
+            const hct = Hct.fromInt(argb);
+            colorsHct.push(hct);
+            const hue = Math.floor(hct.hue);
+            huePopulation[hue] += population;
+            populationSum += population;
+        }
+        // Hues with more usage in neighboring 30 degree slice get a larger number.
+        const hueExcitedProportions = new Array(360).fill(0.0);
+        for (let hue = 0; hue < 360; hue++) {
+            const proportion = huePopulation[hue] / populationSum;
+            for (let i = hue - 14; i < hue + 16; i++) {
+                const neighborHue = sanitizeDegreesInt(i);
+                hueExcitedProportions[neighborHue] += proportion;
+            }
+        }
+        // Scores each HCT color based on usage and chroma, while optionally
+        // filtering out values that do not have enough chroma or usage.
+        const scoredHct = new Array();
+        for (const hct of colorsHct) {
+            const hue = sanitizeDegreesInt(Math.round(hct.hue));
+            const proportion = hueExcitedProportions[hue];
+            if (filter && (hct.chroma < Score.CUTOFF_CHROMA || proportion <= Score.CUTOFF_EXCITED_PROPORTION)) {
+                continue;
+            }
+            const proportionScore = proportion * 100.0 * Score.WEIGHT_PROPORTION;
+            const chromaWeight = hct.chroma < Score.TARGET_CHROMA ? Score.WEIGHT_CHROMA_BELOW : Score.WEIGHT_CHROMA_ABOVE;
+            const chromaScore = (hct.chroma - Score.TARGET_CHROMA) * chromaWeight;
+            const score = proportionScore + chromaScore;
+            scoredHct.push({ hct, score });
+        }
+        // Sorted so that colors with higher scores come first.
+        scoredHct.sort(compare);
+        // Iterates through potential hue differences in degrees in order to select
+        // the colors with the largest distribution of hues possible. Starting at
+        // 90 degrees(maximum difference for 4 colors) then decreasing down to a
+        // 15 degree minimum.
+        const chosenColors = [];
+        for (let differenceDegrees$1 = 90; differenceDegrees$1 >= 15; differenceDegrees$1--) {
+            chosenColors.length = 0;
+            for (const { hct } of scoredHct) {
+                const duplicateHue = chosenColors.find(chosenHct => {
+                    return differenceDegrees(hct.hue, chosenHct.hue) < differenceDegrees$1;
+                });
+                if (!duplicateHue) {
+                    chosenColors.push(hct);
+                }
+                if (chosenColors.length >= desired)
+                    break;
+            }
+            if (chosenColors.length >= desired)
+                break;
+        }
+        const colors = [];
+        if (chosenColors.length === 0) {
+            colors.push(fallbackColorARGB);
+        }
+        for (const chosenHct of chosenColors) {
+            colors.push(chosenHct.toInt());
+        }
+        return colors;
+    }
+}
+Score.TARGET_CHROMA = 48.0; // A1 Chroma
+Score.WEIGHT_PROPORTION = 0.7;
+Score.WEIGHT_CHROMA_ABOVE = 0.3;
+Score.WEIGHT_CHROMA_BELOW = 0.1;
+Score.CUTOFF_CHROMA = 5.0;
+Score.CUTOFF_EXCITED_PROPORTION = 0.01;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Utility methods for hexadecimal representations of colors.
+ */
+/**
+ * @param argb ARGB representation of a color.
+ * @return Hex string representing color, ex. #ff0000 for red.
+ */
+function hexFromArgb(argb) {
+    const r = redFromArgb(argb);
+    const g = greenFromArgb(argb);
+    const b = blueFromArgb(argb);
+    const outParts = [r.toString(16), g.toString(16), b.toString(16)];
+    // Pad single-digit output values
+    for (const [i, part] of outParts.entries()) {
+        if (part.length === 1) {
+            outParts[i] = '0' + part;
+        }
+    }
+    return '#' + outParts.join('');
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Get the source color from an image.
+ *
+ * @param image The image element
+ * @return Source color - the color most suitable for creating a UI theme
+ */
+async function sourceColorFromImage(image) {
+    // Convert Image data to Pixel Array
+    const imageBytes = await new Promise((resolve, reject) => {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context) {
+            reject(new Error('Could not get canvas context'));
+            return;
+        }
+        const callback = () => {
+            canvas.width = image.width;
+            canvas.height = image.height;
+            context.drawImage(image, 0, 0);
+            let rect = [0, 0, image.width, image.height];
+            const area = image.dataset['area'];
+            if (area && /^\d+(\s*,\s*\d+){3}$/.test(area)) {
+                rect = area.split(/\s*,\s*/).map(s => {
+                    // tslint:disable-next-line:ban
+                    return parseInt(s, 10);
+                });
+            }
+            const [sx, sy, sw, sh] = rect;
+            resolve(context.getImageData(sx, sy, sw, sh).data);
+        };
+        if (image.complete) {
+            callback();
+        }
+        else {
+            image.onload = callback;
+        }
+    });
+    // Convert Image data to Pixel Array
+    const pixels = [];
+    for (let i = 0; i < imageBytes.length; i += 4) {
+        const r = imageBytes[i];
+        const g = imageBytes[i + 1];
+        const b = imageBytes[i + 2];
+        const a = imageBytes[i + 3];
+        if (a < 255) {
+            continue;
+        }
+        const argb = argbFromRgb(r, g, b);
+        pixels.push(argb);
+    }
+    // Convert Pixels to Material Colors
+    const result = QuantizerCelebi.quantize(pixels, 128);
+    const ranked = Score.score(result);
+    const top = ranked[0];
+    return top;
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Generate a theme from a source color
+ *
+ * @param source Source color
+ * @param customColors Array of custom colors
+ * @return Theme object
+ */
+function themeFromSourceColor(source, customColors = []) {
+    const palette = CorePalette.of(source);
+    return {
+        source,
+        schemes: {
+            light: Scheme.light(source),
+            dark: Scheme.dark(source),
+        },
+        palettes: {
+            primary: palette.a1,
+            secondary: palette.a2,
+            tertiary: palette.a3,
+            neutral: palette.n1,
+            neutralVariant: palette.n2,
+            error: palette.error,
+        },
+        customColors: customColors.map((c) => customColor(source, c)),
+    };
+}
+/**
+ * Generate a theme from an image source
+ *
+ * @param image Image element
+ * @param customColors Array of custom colors
+ * @return Theme object
+ */
+async function themeFromImage(image, customColors = []) {
+    const source = await sourceColorFromImage(image);
+    return themeFromSourceColor(source, customColors);
+}
+/**
+ * Generate custom color group from source and target color
+ *
+ * @param source Source color
+ * @param color Custom color
+ * @return Custom color group
+ *
+ * @link https://m3.material.io/styles/color/the-color-system/color-roles
+ */
+function customColor(source, color) {
+    let value = color.value;
+    const from = value;
+    const to = source;
+    if (color.blend) {
+        value = Blend.harmonize(from, to);
+    }
+    const palette = CorePalette.of(value);
+    const tones = palette.a1;
+    return {
+        color,
+        value,
+        light: {
+            color: tones.tone(40),
+            onColor: tones.tone(100),
+            colorContainer: tones.tone(90),
+            onColorContainer: tones.tone(10),
+        },
+        dark: {
+            color: tones.tone(80),
+            onColor: tones.tone(20),
+            colorContainer: tones.tone(30),
+            onColorContainer: tones.tone(90),
+        },
+    };
+}
+
+const dynamicColor = async src => {
+  const imageElement = document.createElement("img");
+  imageElement.src = src;
+  const dynamicPalette = await themeFromImage(imageElement);
+  const extractHctInstance = color => {
+    const {
+      hue,
+      chroma,
+      tone
+    } = color.keyColor;
+    return hexFromArgb(Hct.from(hue, chroma, tone).toInt());
+  };
+  const {
+    primary,
+    secondary
+  } = dynamicPalette.palettes;
+  const {
+    dark,
+    light
+  } = dynamicPalette.schemes;
+  const primaryMain = extractHctInstance(primary);
+  const secondaryMain = extractHctInstance(secondary);
+  const primaryLight = hexFromArgb(dark.primary);
+  const primaryDark = hexFromArgb(light.primary);
+  const secondaryLight = hexFromArgb(dark.secondary);
+  const secondaryDark = hexFromArgb(light.secondary);
+  const primaryColor = {
+    main: primaryMain,
+    light: primaryLight,
+    dark: primaryDark,
+    contrastText: "#ffffff"
+  };
+  const secondaryColor = {
+    main: secondaryMain,
+    light: secondaryLight,
+    dark: secondaryDark,
+    contrastText: "#ffffff"
+  };
+  const backgroundColor = {
+    default: alpha(primaryMain, 0.1),
+    paper: "#fff"
+  };
+  return {
+    primaryColor,
+    secondaryColor,
+    backgroundColor
+  };
+};
+
+const useDynamicColor = url => {
+  const [primary, setPrimary] = useState(SincoTheme.palette.primary);
+  const [secondary, setSecondary] = useState(SincoTheme.palette.secondary);
+  const [background, setBackground] = useState(SincoTheme.palette.background);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    dynamicColor(url).then(({
+      primaryColor,
+      secondaryColor,
+      backgroundColor
+    }) => {
+      setPrimary(primaryColor);
+      setSecondary(secondaryColor);
+      setBackground(backgroundColor);
+      setLoading(true);
+    });
+  }, [url]);
+  SincoTheme.palette.primary = primary;
+  SincoTheme.palette.secondary = secondary;
+  SincoTheme.palette.background = background;
+  return {
+    loading
+  };
+};
+
+export { SincoTheme, useDynamicColor };