@wistia/kaleidoscope 0.0.2 → 0.0.3-beta.744e55dd.c7dc7eb

package/README.md

@@ -84,6 +84,48 @@ most contrasting color available, which is always black or white and is picked b
 both. Check the result with `contrast` when the ratio is load-bearing.
 
 
+## Lightness
+
+`getColorLightnessClassification` classifies a color by its lightness, returning 'veryDark', 'dark', midtone', or 'light'
+
+```ts
+import { getColorLightnessClassification } from '@wistia/kaleidoscope';
+
+getColorLightnessClassification('#000000'); // 'veryDark'
+getColorLightnessClassification('#2949e5'); // 'dark'
+getColorLightnessClassification('#7f7f7f'); // 'midtone'
+getColorLightnessClassification('#ffffff'); // 'light'
+```
+
+## Accented backgrounds
+
+Often we want a surface (a card or panel) to have a visually distinct background color derived from the main background the surface sits on. 
+
+Use these utilities only when the contrast ratio of the accented background color against the given background color is insignificant.
+
+`getSlightAccentedBackgroundColor` is one step darker/lighter than the background
+`getHeavyAccentedBackgroundColor` is two steps darker/lighter than the background
+
+
+```ts
+import {
+  getHeavyAccentedBackgroundColor,
+  getSlightAccentedBackgroundColor,
+} from '@wistia/kaleidoscope';
+
+getSlightAccentedBackgroundColor('#f5f5f5').toHex(); // '#e0e0e0'
+getHeavyAccentedBackgroundColor('#f5f5f5').toHex(); // '#cbcbcb'
+```
+
+Pass `primaryColor` when the background color is derived from a primary color so that the accented color
+preserves the vibrancy of the primary color rather than getting muddy/gray.
+
+```ts
+getSlightAccentedBackgroundColor('#f5f5f5', { primaryColor: '#2949e5' }).toHex(); // '#cdd5f9'
+getHeavyAccentedBackgroundColor('#f5f5f5', { primaryColor: '#2949e5' }).toHex(); // '#adbbf5'
+```
+
+
 ## Storybook
 
 Color is easier to judge by eye than by assertion, so every feature has a story, including

package/dist/color-BD12TVX4.d.ts

@@ -0,0 +1,393 @@
+
+//#region src/colorContrastRatiosByShape.d.ts
+declare const colorContrastRatiosByShape: {
+  readonly nonText: 3.0;
+  readonly largeText: 3.0;
+  readonly paragraphText: 4.5;
+  readonly smallText: 5.5;
+};
+/** The kind of content a color has to be legible as, which sets the ratio it has to clear. */
+type ColorShape = keyof typeof colorContrastRatiosByShape;
+//#endregion
+//#region src/Color.d.ts
+/**
+ * An immutable sRGB color with transformation methods like lighten, darken, tint, shade.
+ * Also includes methods to calculate contrast ratio against another color, relative luminance, etc.
+ *
+ * @example
+ * ```ts
+ * new Color('#2949e5').lighten(0.5).toHex();    // '#89aaff'
+ * new Color('#2949e5').withAlpha(0.5).toRgba(); // 'rgba(41, 73, 229, 0.5)'
+ * new Color('#2949e5').contrast('#ffffff');     // 6.6
+ * ```
+ */
+declare class Color {
+  #private;
+  /**
+   * Read `input` into a color, returning `null` when it cannot be parsed.
+   */
+  static parse(input: ColorInput): Color | null;
+  static fromHsl(hsl: Hsl, alpha?: number): Color;
+  static fromLab(lab: Lab, alpha?: number): Color;
+  /** Red channel, 0–255. Kept unrounded so that chained operations don't accumulate error. */
+  readonly r: number;
+  /** Green channel, 0–255. Kept unrounded so that chained operations don't accumulate error. */
+  readonly g: number;
+  /** Blue channel, 0–255. Kept unrounded so that chained operations don't accumulate error. */
+  readonly b: number;
+  /** Alpha channel, 0–1. */
+  readonly a: number;
+  /**
+   * @param input - any supported color representation. Input that cannot be read as a
+   *   color resolves to brand blue rather than failing, so a malformed value degrades to
+   *   a usable color instead of interrupting a render.
+   */
+  constructor(input: ColorInput);
+  /** `#rrggbb`. Alpha is dropped — use {@link Color.toHexWithAlpha} to keep it. */
+  toHex(): string;
+  /** `#rrggbbaa`. */
+  toHexWithAlpha(): string;
+  /** `rgb(41, 73, 229)`. */
+  toRgb(): string;
+  /** `rgba(41, 73, 229, 0.5)`. */
+  toRgba(): string;
+  /** Rounded channels, ready to hand to another color library. */
+  toRgbaTuple(): RgbaTuple;
+  toHsl(): Hsl;
+  toLab(): Lab;
+  /** Hex when fully opaque, `rgba()` otherwise, so the alpha is never silently lost. */
+  toString(): string;
+  /**
+   * WCAG relative luminance, from 0 (black) to 1 (white). Alpha is ignored — luminance
+   * is only meaningful once a color has been composited onto a background.
+   */
+  luminance(): number;
+  /**
+   * WCAG contrast ratio against `other`, from 1 (identical) to 21 (black on white),
+   * reported to one decimal place.
+   *
+   * @see {@link colorContrastRatiosByShape} for the ratio each kind of content needs
+   */
+  contrast(other: ColorInput): number;
+  /**
+   * Raise perceptual lightness `ratio` (0–1) of the way to white, holding the hue steady.
+   *
+   * The hue is held in OKLCh, so a lightened color stays recognizably itself: a blue
+   * lightens to a paler blue instead of drifting purple, and a red that runs out of sRGB
+   * gives up colorfulness rather than sliding towards orange. That is the difference from
+   * {@link Color.tint}, which stirs white into the channels and lets the hue land where it
+   * may.
+   */
+  lighten(ratio: number): Color;
+  /** Lower perceptual lightness `ratio` (0–1) of the way to black, holding the hue steady. */
+  darken(ratio: number): Color;
+  /** Mix `ratio` (0–1) of white in. */
+  tint(ratio: number, mode?: InterpolationMode): Color;
+  /** Mix `ratio` (0–1) of black in. */
+  shade(ratio: number, mode?: InterpolationMode): Color;
+  /**
+   * Mix towards `other`, where `ratio` 0 keeps this color and 1 returns `other`. Alpha is
+   * always interpolated linearly, whichever `mode` the channels travel through.
+   */
+  blend(other: ColorInput, ratio?: number, mode?: InterpolationMode): Color;
+  /** Replace the alpha channel with `alpha` (0–1). */
+  withAlpha(alpha: number): Color;
+  /**
+   * Replace HSL lightness with `lightness` (0–100), leaving hue and saturation alone.
+   * Use this to hit an absolute lightness; use {@link Color.lighten} to step relative to
+   * where the color already is.
+   */
+  withLightness(lightness: number): Color;
+}
+//#endregion
+//#region src/types.d.ts
+/** Red, green and blue channels, each in the 0–255 range. */
+type RgbTuple = [red: number, green: number, blue: number];
+/** Red, green and blue channels (0–255) plus an alpha channel (0–1). */
+type RgbaTuple = [red: number, green: number, blue: number, alpha: number];
+/** RGB channels (0–255) with an optional alpha channel (0–1). */
+type ColorTuple = [red: number, green: number, blue: number, alpha?: number];
+/** Any object carrying RGB channels (0–255) and an optional alpha channel (0–1). */
+type RgbaObject = {
+  readonly a?: number;
+  readonly b: number;
+  readonly g: number;
+  readonly r: number;
+};
+/**
+ * Anything that can be read as a color:
+ *
+ * - a hex string — `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa` (the `#` is optional)
+ * - an `rgb()`/`rgba()` string in either legacy comma syntax (`rgb(41, 73, 229)`) or
+ *   modern space syntax (`rgb(41 73 229 / 50%)`), with numbers or percentages
+ * - an `[r, g, b]` or `[r, g, b, a]` tuple
+ * - an object with `r`, `g`, `b` and optionally `a` — including another `Color`
+ *
+ * CSS named colors (`red`, `transparent`, …) are not supported.
+ */
+type ColorInput = Color | ColorTuple | RgbaObject | string;
+/** Hue (0–360), saturation (0–100) and lightness (0–100). */
+type Hsl = {
+  readonly hue: number;
+  readonly lightness: number;
+  readonly saturation: number;
+};
+/**
+ * CIELAB: perceptual lightness (0–100), plus the green–red (`a`) and blue–yellow (`b`)
+ * axes, which are unbounded but in practice fall within ±128.
+ */
+type Lab = {
+  readonly a: number;
+  readonly b: number;
+  readonly lightness: number;
+};
+/**
+ * The color space a blend interpolates through.
+ *
+ * - `oklch` — perceptually uniform, and the only mode that carries hue as a hue, so a
+ *   blend takes the short way round the wheel instead of through the grays in between
+ * - `lab` — perceptually uniform, interpolated on the rectangular axes
+ * - `lrgb` — linear RGB; avoids the muddy midpoints of naive RGB blending
+ * - `rgb` — naive channel-wise RGB; fastest, and what CSS `color-mix()` does in sRGB
+ */
+type InterpolationMode = "lab" | "lrgb" | "oklch" | "rgb";
+//#endregion
+//#region src/adjustColorForProperContrast.d.ts
+type AdjustColorForProperContrastOptions = {
+  /** What the foreground sits on. Never adjusted. */
+  readonly backgroundColor: ColorInput;
+  /** The color to nudge until it is legible. Returned untouched if it already is. */
+  readonly foregroundColor: ColorInput;
+  /** What the foreground is. Defaults to `paragraphText` (4.5:1). */
+  readonly shape?: ColorShape;
+};
+/**
+ * Walk `foregroundColor` towards white or black until it clears the contrast ratio
+ * `shape` requires against `backgroundColor`.
+ *
+ * Hue is pinned for the whole walk, so the result still reads as the color you passed in
+ * — a washed-out brand blue stays blue rather than drifting towards its neighbors. The
+ * direction is whichever gains contrast faster, reversing if it hits an extreme with the
+ * ratio still unmet. Text-grade ratios that can't be met either way settle on plain white
+ * or black, since at that point nothing else beats them.
+ *
+ * @example
+ * ```ts
+ * // Already legible, so nothing moves.
+ * adjustColorForProperContrast({
+ *   foregroundColor: '#2949e5',
+ *   backgroundColor: '#ffffff',
+ * }).toHex(); // '#2949e5'
+ *
+ * // A brand blue on itself, darkened until it separates.
+ * adjustColorForProperContrast({
+ *   foregroundColor: '#2949e5',
+ *   backgroundColor: '#2949e5',
+ *   shape: 'nonText',
+ * }).toHex();
+ * ```
+ */
+declare const adjustColorForProperContrast: ({ backgroundColor, foregroundColor, shape }: AdjustColorForProperContrastOptions) => Color;
+//#endregion
+//#region src/ColorScale.d.ts
+type ColorScaleOptions = {
+  /**
+   * Quantize the scale into bands instead of leaving it continuous: a count of equally sized
+   * classes across the domain, or explicit class breaks.
+   */
+  readonly classes?: number | number[];
+  /**
+   * Redistribute stops so that perceived lightness moves evenly from end to end. Worth
+   * turning on for any scale a reader is meant to rank by eye.
+   */
+  readonly correctLightness?: boolean;
+  /**
+   * The input range, `[0, 1]` by default. Two values set the ends; supply one value per
+   * color to pin each color to a position, or more than two to warp the scale.
+   */
+  readonly domain?: number[];
+  /** Bias the scale towards one end. Above 1 favors the start, below 1 the end. */
+  readonly gamma?: number;
+  /** The color space blends travel through. */
+  readonly mode?: InterpolationMode;
+  /** Trim `[start, end]` fractions off the scale, dropping its most extreme colors. */
+  readonly padding?: [number, number] | number;
+};
+/**
+ * A continuous scale between two or more colors — the chroma.js `scale` model, as an
+ * immutable class. Every configuration method returns a new scale, so a configured scale
+ * is safe to hold onto and share.
+ *
+ * @example
+ * ```ts
+ * const scale = new ColorScale(['#2949e5', '#ffffff']);
+ * scale.at(0.5).toHex();                             // the midpoint color
+ * scale.colors(5).map((color) => color.toHex());     // five evenly spaced colors
+ * scale.correctLightness().domain([0, 100]).at(72);  // perceptually even, read in %
+ * ```
+ */
+declare class ColorScale {
+  #private;
+  /**
+   * @param colors - the colors the scale runs through; a single color makes a flat scale
+   * @throws {TypeError} when `colors` is empty or `domain` has fewer than two values
+   */
+  constructor(colors: readonly ColorInput[], options?: ColorScaleOptions);
+  /** The color at `value`, read through the scale's domain, classes, gamma and padding. */
+  at(value: number): Color;
+  /** `count` colors spread evenly across the domain. */
+  colors(count: number): Color[];
+  mode(mode: InterpolationMode): ColorScale;
+  domain(domain: number[]): ColorScale;
+  gamma(gamma: number): ColorScale;
+  padding(padding: [number, number] | number): ColorScale;
+  correctLightness(correctLightness?: boolean): ColorScale;
+  classes(classes: number | number[]): ColorScale;
+}
+//#endregion
+//#region src/getBestColorForText.d.ts
+type BestColorForTextOptions = {
+  /** Always excluded from the result.*/
+  readonly backgroundColor: ColorInput;
+  /**
+   * Colors that are part of the palette but should not be considered as candidates.
+   * Useful in scenarios like the webinar pages color derivation logic, where we might include derived colors
+   * in the palette used by some fields, like `lowEmphasisTextColor`, but we want to exclude the derived colors
+   * from other fields, like `mainTextColor`.
+   */
+  readonly exclude?: readonly ColorInput[];
+  /**
+   * The colors to choose from. Black and white are included automatically, so an empty/absent palette
+   * still yields whichever of the two has best contrast against `backgroundColor`.
+   */
+  readonly palette?: readonly ColorInput[];
+  /** The type of text/shape that will use the resulting color. Defaults to `paragraphText` (4.5:1). */
+  readonly shape?: ColorShape;
+};
+/**
+ * Picks a color most suitable for a given text (or non-text) shape against the given background color.
+ * Accepts an optional color palette, but white and black are always included as options in addition to the palette.
+ * Also accepts a set of colors from the palette that should be excluded from consideration.
+ *
+ * @example
+ * ```ts
+ * getBestColorForText({ backgroundColor: '#2949e5' }).toHex(); // '#ffffff'
+ * ```
+ */
+declare const getBestColorForText: ({ backgroundColor, exclude, palette, shape }: BestColorForTextOptions) => Color;
+//#endregion
+//#region src/getBrandDarkBackgroundColor.d.ts
+/**
+ * Generates a dark background color from a given primary color, preserving the hue of the primary color.
+ *
+ * @example
+ * ```ts
+ * getBrandDarkBackgroundColor('#2949e5').toHex(); // '#242942'
+ * ```
+ *
+ * @see {@link getBrandLightBackgroundColor} for the light counterpart
+ */
+declare const getBrandDarkBackgroundColor: (_primaryColor: ColorInput) => Color;
+//#endregion
+//#region src/getBrandLightBackgroundColor.d.ts
+/**
+ *
+ * Generates a light background color from a given primary color, preserving the hue of the primary color.
+ *
+ * @example
+ * ```ts
+ * getBrandLightBackgroundColor('#2949e5').toHex(); // '#ebeefd'
+ * ```
+ *
+ * @see {@link getBrandDarkBackgroundColor} for the dark counterpart
+ */
+declare const getBrandLightBackgroundColor: (_primaryColor: ColorInput) => Color;
+//#endregion
+//#region src/getBrandedColorScale.d.ts
+type BrandColorScaleOptions = {
+  /** How many steps the scale is divided into. */
+  readonly steps?: number;
+};
+/**
+ * Builds a color scale using the derived light/dark background colors based on the given primary color,
+ * with the primary color slotted into the scale wherever it fits based on lightness.
+ *
+ * It's important to include the primary color in the scale because the light/dark derived background colors
+ * do not have the same saturation as the primary color, and we want the scale to reflect the vibrancy
+ * of the primary color.
+ *
+ * @example
+ * ```ts
+ * getBrandedColorScale('#2949e5').map((color) => color.toHex());
+ * // ['#ebeefd', '#d4dbfa', '#bdc8f7', '#a5b5f4', '#8da2f1', '#748eef',
+ * //  '#5b7aec', '#4263e8', '#2949e5', '#2539ba', '#213080', '#171f45']
+ * //                        ^ the primary, at its own lightness
+ * ```
+ */
+declare const getBrandedColorScale: (primaryColor: ColorInput, { steps }?: BrandColorScaleOptions) => Color[];
+//#endregion
+//#region src/getColorLightnessClassification.d.ts
+type ColorLightnessClassification = "dark" | "light" | "midtone" | "veryDark";
+/**
+ * Classify a color's lightness based on relative luminance.
+ *
+ * @example
+ * ```ts
+ * getColorLightnessClassification('#000000'); // 'veryDark'
+ * getColorLightnessClassification('#2949e5'); // 'dark'
+ * getColorLightnessClassification('#7f7f7f'); // 'midtone'
+ * getColorLightnessClassification('#ffffff'); // 'light'
+ * ```
+ */
+declare const getColorLightnessClassification: (color: ColorInput) => ColorLightnessClassification;
+//#endregion
+//#region src/getHeavyAccentedBackgroundColor.d.ts
+type HeavyAccentedBackgroundColorOptions = {
+  readonly primaryColor?: ColorInput;
+};
+/**
+ * Get an accented version of a background color that is a two steps lighter/darker.
+ * Use this when the color contrast of the accented background color is not significant,
+ * such as for card/panel background colors.
+ *
+ * Accepts an optional primary color, used when the background color has been derived from the primary color,
+ * and we want the accented versions of the background color to come from the color scale, see {@link getBrandedColorScale}
+ * See {@link getSlightAccentedBackgroundColor} for a single step away from the background color instead of two.
+ *
+ * @example
+ * ```ts
+ * getHeavyAccentedBackgroundColor('#f5f5f5').toHex();                             // '#cbcbcb'
+ * getHeavyAccentedBackgroundColor('#f5f5f5', { primaryColor: '#2949e5' }).toHex(); // '#adbbf5'
+ * ```
+ */
+declare const getHeavyAccentedBackgroundColor: (_backgroundColor: ColorInput, { primaryColor }?: HeavyAccentedBackgroundColorOptions) => Color;
+//#endregion
+//#region src/getSlightAccentedBackgroundColor.d.ts
+type SlightAccentedBackgroundColorOptions = {
+  readonly shouldReturnWhiteForWhiteBackground?: boolean;
+  /**
+   * Optional primary color, which is used when the background color is derived from the primary color,
+   * so we'll calculate the accented background color using a color scale.
+   */
+  readonly primaryColor?: ColorInput;
+};
+/**
+ * Get an accented version of a background color that is a single step lighter/darker.
+ * Use this when the color contrast of the accented background color is not significant,
+ * such as for card/panel background colors.
+ *
+ * Accepts an optional primary color, used when the background color has been derived from the primary color,
+ * and we want the accented versions of the background color to come from the color scale, see {@link getBrandedColorScale}
+ * See {@link getHeavyAccentedBackgroundColor} for two steps away from the background color instead of one.
+ *
+ * @example
+ * ```ts
+ * getSlightAccentedBackgroundColor('#f5f5f5').toHex(); // '#e0e0e0'
+ * getSlightAccentedBackgroundColor('#f5f5f5', { primaryColor: '#2949e5' }).toHex(); // '#cdd5f9'
+ * getSlightAccentedBackgroundColor('#ffffff', { shouldReturnWhiteForWhiteBackground: true }).toHex(); // '#ffffff'
+ * ```
+ */
+declare const getSlightAccentedBackgroundColor: (_backgroundColor: ColorInput, { shouldReturnWhiteForWhiteBackground, primaryColor }?: SlightAccentedBackgroundColorOptions) => Color;
+//#endregion
+export { RgbaObject as C, colorContrastRatiosByShape as D, ColorShape as E, RgbTuple as S, Color as T, ColorInput as _, ColorLightnessClassification as a, InterpolationMode as b, getBrandedColorScale as c, BestColorForTextOptions as d, getBestColorForText as f, adjustColorForProperContrast as g, AdjustColorForProperContrastOptions as h, getHeavyAccentedBackgroundColor as i, getBrandLightBackgroundColor as l, ColorScaleOptions as m, getSlightAccentedBackgroundColor as n, getColorLightnessClassification as o, ColorScale as p, HeavyAccentedBackgroundColorOptions as r, BrandColorScaleOptions as s, SlightAccentedBackgroundColorOptions as t, getBrandDarkBackgroundColor as u, ColorTuple as v, RgbaTuple as w, Lab as x, Hsl as y };
+//# sourceMappingURL=color-BD12TVX4.d.ts.map

package/dist/{index.d.ts.map → color-BD12TVX4.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/colorContrastRatiosByShape.ts","../src/Color.ts","../src/types.ts","../src/adjustColorForProperContrast.ts","../src/ColorScale.ts","../src/getBestColorForText.ts"],"mappings":";;cAAa;WACX;WACA;WACA;WACA;;;KAIU,0BAA0B;;;;;;;;;;;;;;cCyEzB;;;;;SAIJ,MAAM,OAAO,aAAa;SAK1B,QAAQ,KAAK,KAAK,iBAAY;SAK9B,QAAQ,KAAK,KAAK,iBAAY;;WAM5B;;WAGA;;WAGA;;WAGA;;;;;;EAOT,YAAY,OAAO;;EASnB;;EAKA;;EAKA;;EAKA;;EAKA,eAAe;EAIf,SAAS;EAIT,SAAS;;EAKT;;;;;EAQA;;;;;;;EAUA,SAAS,OAAO;;;;;;;;;;EAiBhB,QAAQ,gBAAgB;;EAKxB,OAAO,gBAAgB;;EAKvB,KAAK,eAAe,OAAM,oBAAiD;;EAK3E,MAAM,eAAe,OAAM,oBAAiD;;;;;EAQ5E,MACE,OAAO,YACP,gBACA,OAAM,oBACL;;EAwCH,UAAU,gBAAgB;;;;;;EAS1B,cAAc,oBAAoB;;;;;KC1QxB,YAAY,aAAa,eAAe;;KAGxC,aAAa,aAAa,eAAe,cAAc;;KAGvD,cAAc,aAAa,eAAe,cAAc;;KAGxD;WACD;WACA;WACA;WACA;;;;;;;;;;;;;KAcC,aAAa,QAAQ,aAAa;;KAGlC;WACD;WACA;WACA;;;;;;KAOC;WACD;WACA;WACA;;;;;;;;;;;KAYC;;;KC1BA;;WAED,iBAAiB;;WAGjB,iBAAiB;;WAGjB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BN,iCACX,iBACA,iBACA,SACC,wCAAsC;;;KCzD7B;;;;;WAKD;;;;;WAMA;;;;;WAMA;;WAGA;;WAGA,OAAO;;WAGP;;;;;;;;;;;;;;;cAgDE;;;;;;EAmBX,YAAY,iBAAiB,cAAc,UAAS;;EAkEpD,GAAG,gBAAgB;;EAQnB,OAAO,gBAAgB;EAmBvB,KAAK,MAAM,oBAAoB;EAI/B,OAAO,mBAAmB;EAI1B,MAAM,gBAAgB;EAItB,QAAQ,qCAAqC;EAI7C,iBAAiB,6BAA0B;EAI3C,QAAQ,6BAA6B;;;;KCtN3B;;WAED,iBAAiB;;;;;;;WAQjB,mBAAmB;;;;;WAMnB,mBAAmB;;WAGnB,QAAQ;;;;;;;;;;;;cAaN,wBACX,iBACA,SACA,SACA,SACC,4BAA0B"}
+{"version":3,"file":"color-BD12TVX4.d.ts","names":[],"sources":["../src/colorContrastRatiosByShape.ts","../src/Color.ts","../src/types.ts","../src/adjustColorForProperContrast.ts","../src/ColorScale.ts","../src/getBestColorForText.ts","../src/getBrandDarkBackgroundColor.ts","../src/getBrandLightBackgroundColor.ts","../src/getBrandedColorScale.ts","../src/getColorLightnessClassification.ts","../src/getHeavyAccentedBackgroundColor.ts","../src/getSlightAccentedBackgroundColor.ts"],"mappings":";;cAAa;WACX;WACA;WACA;WACA;;;KAIU,0BAA0B;;;;;;;;;;;;;;cCyEzB;;;;;SAIJ,MAAM,OAAO,aAAa;SAK1B,QAAQ,KAAK,KAAK,iBAAY;SAK9B,QAAQ,KAAK,KAAK,iBAAY;;WAM5B;;WAGA;;WAGA;;WAGA;;;;;;EAOT,YAAY,OAAO;;EASnB;;EAKA;;EAKA;;EAKA;;EAKA,eAAe;EAIf,SAAS;EAIT,SAAS;;EAKT;;;;;EAQA;;;;;;;EAUA,SAAS,OAAO;;;;;;;;;;EAiBhB,QAAQ,gBAAgB;;EAKxB,OAAO,gBAAgB;;EAKvB,KAAK,eAAe,OAAM,oBAAiD;;EAK3E,MAAM,eAAe,OAAM,oBAAiD;;;;;EAQ5E,MACE,OAAO,YACP,gBACA,OAAM,oBACL;;EAwCH,UAAU,gBAAgB;;;;;;EAS1B,cAAc,oBAAoB;;;;;KC1QxB,YAAY,aAAa,eAAe;;KAGxC,aAAa,aAAa,eAAe,cAAc;;KAGvD,cAAc,aAAa,eAAe,cAAc;;KAGxD;WACD;WACA;WACA;WACA;;;;;;;;;;;;;KAcC,aAAa,QAAQ,aAAa;;KAGlC;WACD;WACA;WACA;;;;;;KAOC;WACD;WACA;WACA;;;;;;;;;;;KAYC;;;KC1BA;;WAED,iBAAiB;;WAGjB,iBAAiB;;WAGjB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BN,iCACX,iBACA,iBACA,SACC,wCAAsC;;;KCzD7B;;;;;WAKD;;;;;WAMA;;;;;WAMA;;WAGA;;WAGA,OAAO;;WAGP;;;;;;;;;;;;;;;cAgDE;;;;;;EAmBX,YAAY,iBAAiB,cAAc,UAAS;;EAkEpD,GAAG,gBAAgB;;EAQnB,OAAO,gBAAgB;EAmBvB,KAAK,MAAM,oBAAoB;EAI/B,OAAO,mBAAmB;EAI1B,MAAM,gBAAgB;EAItB,QAAQ,qCAAqC;EAI7C,iBAAiB,6BAA0B;EAI3C,QAAQ,6BAA6B;;;;KCtN3B;;WAED,iBAAiB;;;;;;;WAQjB,mBAAmB;;;;;WAMnB,mBAAmB;;WAGnB,QAAQ;;;;;;;;;;;;cAaN,wBACX,iBACA,SACA,SACA,SACC,4BAA0B;;;;;;;;;;;;;cCnBhB,8BAA+B,eAAe,eAAa;;;;;;;;;;;;;;cCN3D,+BAAgC,eAAe,eAAa;;;KCd7D;;WAED;;;;;;;;;;;;;;;;;;cAmBE,uBACX,cAAc,cACZ,UAAqC,2BACtC;;;KC5BS;;;;;;;;;;;;cAqCC,kCACX,OAAO,eACN;;;KCpCS;WACD,eAAe;;;;;;;;;;;;;;;;;cAoBb,kCACX,kBAAkB,cAChB,iBAAgB,wCACjB;;;KCtBS;WACD;;;;;WAKA,eAAe;;;;;;;;;;;;;;;;;;cAoBb,mCACX,kBAAkB,cAEhB,qCACA,iBACC,yCACF"}