@easypost/easy-ui 1.0.0-alpha.7 → 1.0.0-alpha.70

package/styles/_accessibility.scss

@@ -0,0 +1,48 @@
+/// Used to hide an element visually, but keeping it accessible for
+/// accessibility tools.
+
+/// styles referenced from GOV.UK design system
+/// https://github.com/h5bp/main.css/issues/12#issuecomment-451965809
+@mixin visually-hidden {
+  position: absolute !important;
+  top: 0;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+}
+
+/// Used to overlay a hidden input on top of a custom-styled control so that
+/// the input will receive user events while only showing the custom control.
+@mixin overlay-input {
+  position: relative;
+  z-index: 0;
+
+  input,
+  select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0.0001;
+    z-index: 1;
+  }
+}
+
+@mixin native-focus-ring {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: Highlight;
+
+  @media (-webkit-min-device-pixel-ratio: 0) {
+    outline-color: -webkit-focus-ring-color;
+    outline-style: auto;
+  }
+}

package/styles/_common.scss

@@ -0,0 +1,8 @@
+@use "@easypost/easy-ui-tokens/scss/variables";
+@use "@easypost/easy-ui-tokens/scss/map";
+
+@forward "./accessibility";
+@forward "./token-helpers";
+@forward "./responsive-props";
+@forward "./media-queries";
+@forward "./typography";

package/styles/_media-queries.scss

@@ -0,0 +1,25 @@
+@use "@easypost/easy-ui-tokens/scss/variables" as *;
+
+@mixin breakpoint-sm-up {
+  @media (min-width: #{$ezui-breakpoint-sm}) {
+    @content;
+  }
+}
+
+@mixin breakpoint-md-up {
+  @media (min-width: #{$ezui-breakpoint-md}) {
+    @content;
+  }
+}
+
+@mixin breakpoint-lg-up {
+  @media (min-width: #{$ezui-breakpoint-lg}) {
+    @content;
+  }
+}
+
+@mixin breakpoint-xl-up {
+  @media (min-width: #{$ezui-breakpoint-xl}) {
+    @content;
+  }
+}

package/styles/_poppins-fallback.scss

@@ -0,0 +1,73 @@
+/*
+ * These fallback font faces provide visual stability to the page by overriding
+ * metrics of local fonts (Arial in this case) to take up the same amount of
+ * space as the primary Poppins font.
+ *
+ * CSS generated by pixel-point/fontpie
+ */
+
+@font-face {
+  font-family: "Poppins Fallback";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Arial");
+  ascent-override: 93.76%;
+  descent-override: 31.25%;
+  line-gap-override: 8.93%;
+  size-adjust: 111.99%;
+}
+
+@font-face {
+  font-family: "Poppins Fallback";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Arial");
+  ascent-override: 92.83%;
+  descent-override: 30.94%;
+  line-gap-override: 8.84%;
+  size-adjust: 113.11%;
+}
+
+@font-face {
+  font-family: "Poppins Fallback";
+  font-style: normal;
+  font-weight: 500;
+  src: local("Arial");
+  ascent-override: 91.82%;
+  descent-override: 30.61%;
+  line-gap-override: 8.74%;
+  size-adjust: 114.36%;
+}
+
+@font-face {
+  font-family: "Poppins Fallback";
+  font-style: normal;
+  font-weight: 600;
+  src: local("Arial Bold");
+  ascent-override: 98.3%;
+  descent-override: 32.77%;
+  line-gap-override: 9.36%;
+  size-adjust: 106.82%;
+}
+
+@font-face {
+  font-family: "Poppins Fallback";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Arial Bold");
+  ascent-override: 97.12%;
+  descent-override: 32.37%;
+  line-gap-override: 9.25%;
+  size-adjust: 108.12%;
+}
+
+@font-face {
+  font-family: "Poppins Fallback";
+  font-style: italic;
+  font-weight: 400;
+  src: local("Arial Italic");
+  ascent-override: 92.06%;
+  descent-override: 30.69%;
+  line-gap-override: 8.77%;
+  size-adjust: 114.06%;
+}

package/styles/_responsive-props.scss

@@ -0,0 +1,90 @@
+@use "sass:map";
+@use "sass:list";
+@use "sass:string";
+@use "string-functions" as ezuiString;
+@use "@easypost/easy-ui-tokens/scss/map" as *;
+
+// Builds CSS variable templates that are pinned to breakpoints defined in
+// our design tokens. The variables are passed to the mixin to be
+// used in CSS modules
+//
+// Inspired by Shopify's responsive system but more flexible and
+// pinned to our tokens:
+// https://github.com/Shopify/polaris/blob/main/polaris-react/src/styles/shared/_responsive-props.scss
+//
+// See documentation/decisions/007_support_responsive_props for more info
+@mixin responsive-props($componentName, $componentProp) {
+  $cleanedComponentName: ezuiString.clean-name($componentName);
+  $cleanedComponentProp: ezuiString.clean-name($componentProp);
+
+  // Create a mapping of breakpoints and a list of aliases from
+  // the breakpoint namespace of our design tokens
+  $bps: ();
+  $bp-aliases: ();
+  @each $key, $value in $ezui-tokens {
+    @if string.index($key, "breakpoint-") == 1 {
+      $bp-alias: string.slice($key, string.length("breakpoint-") + 1);
+      $bps: map.set($bps, $bp-alias, $value);
+      $bp-aliases: list.append($bp-aliases, $bp-alias);
+    }
+  }
+
+  // For each of our breakpoints, initialize an initial value (literally)
+  @each $bp-alias in $bp-aliases {
+    & {
+      --ezui-c-#{$cleanedComponentName}-#{$cleanedComponentProp}-#{$bp-alias}: initial;
+    }
+  }
+
+  // For each of our breakpoints, create a media query block and assign a
+  // variable to that media query scope, passing the variable to the
+  // mixin content
+  //
+  // Resulting SCSS looks something like this for a "lg" breakpoint:
+  // @media (min-width: 992px) {
+  //   $var: var(
+  //     --ezui-c-#{$componentName}-#{$componentProp}-lg,
+  //     var(
+  //       --ezui-c-#{$componentName}-#{$componentProp}-md,
+  //       var(
+  //         --ezui-c-#{$componentName}-#{$componentProp}-sm,
+  //         var(--ezui-c-#{$componentName}-#{$componentProp}-xs)
+  //       )
+  //     )
+  //   );
+  //   @content($var);
+  // }
+  @for $i from 1 through list.length($bp-aliases) {
+    $bp-alias: list.nth($bp-aliases, $i);
+    $bp: map.get($bps, $bp-alias);
+
+    @if $i == 1 {
+      $var: var(
+        --ezui-c-#{$cleanedComponentName}-#{$cleanedComponentProp}-#{$bp-alias}
+      );
+      @content ($var);
+    } @else {
+      @media (min-width: #{$bp}) {
+        $this-bp-value: initial;
+        @for $j from 1 through $i {
+          $this-bp-alias: list.nth($bp-aliases, $j);
+          $this-bp-value: var(
+            --ezui-c-#{$cleanedComponentName}-#{$cleanedComponentProp}-#{$this-bp-alias},
+            $this-bp-value
+          );
+        }
+        $var: $this-bp-value;
+        @content ($var);
+      }
+    }
+  }
+}
+
+// Shorthand for applying a CSS variable template to a single CSS prop
+@mixin responsive-prop($componentName, $componentProp, $declarationProp) {
+  @include responsive-props($componentName, $componentProp) using ($var) {
+    & {
+      #{$declarationProp}: $var;
+    }
+  }
+}

package/styles/_scrollbars.scss

@@ -0,0 +1,52 @@
+@use "overlayscrollbars/overlayscrollbars.css";
+@use "token-helpers";
+
+@mixin default-os-style {
+  --os-track-bg: #{token-helpers.theme-token("color.neutral.050")};
+  --os-track-bg-hover: #{token-helpers.theme-token("color.neutral.100")};
+  --os-track-bg-active: #{token-helpers.theme-token("color.neutral.100")};
+  --os-handle-bg: #{token-helpers.theme-token("color.neutral.300")};
+  --os-handle-bg-hover: #{token-helpers.theme-token("color.neutral.400")};
+  --os-handle-bg-active: #{token-helpers.theme-token("color.neutral.500")};
+  --os-track-border-radius: 999px;
+  --os-handle-border-radius: 999px;
+
+  // there's a bug in Firefox with overlay elements rendering below the
+  // scrollbar due to `contain` rasterizing this slice of the screen
+  contain: unset;
+}
+
+.os-scrollbar.ezui-os-theme-overlay {
+  @include default-os-style;
+  --ezui-scrollbar-width: 2px;
+  --os-size: calc(
+    (#{token-helpers.design-token("space.1")} * 2) + var(--ezui-scrollbar-width)
+  );
+  --os-padding-perpendicular: #{token-helpers.design-token("space.1")};
+  --os-padding-axis: #{token-helpers.design-token("space.1")};
+}
+
+.os-scrollbar.ezui-os-theme-code-block {
+  @include default-os-style;
+  --os-size: 4px;
+  --os-padding-perpendicular: 0;
+  --os-padding-axis: 0;
+}
+
+.os-scrollbar.ezui-os-theme-modal {
+  @include default-os-style;
+  --os-handle-bg: #{token-helpers.theme-token("color.neutral.200")};
+  --os-size: #{token-helpers.design-token("space.1")};
+  --os-padding-perpendicular: 0;
+  --os-padding-axis: #{token-helpers.design-token("space.1")};
+  right: #{token-helpers.design-token("space.0.5")};
+}
+
+.os-scrollbar.ezui-os-theme-drawer {
+  @include default-os-style;
+  --os-handle-bg: #{token-helpers.theme-token("color.neutral.200")};
+  --os-size: #{token-helpers.design-token("space.1")};
+  --os-padding-perpendicular: 0;
+  --os-padding-axis: #{token-helpers.design-token("space.1")};
+  right: #{token-helpers.design-token("space.0.5")};
+}

package/styles/_string-functions.scss

@@ -0,0 +1,26 @@
+@use "sass:string";
+
+/// Replace `$search` with `$replace` in `$string`
+///
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function replace($string, $search, $replace: "") {
+  $index: string.index($string, $search);
+
+  @if $index {
+    $replaced: replace(
+      string.slice($string, $index + string.length($search)),
+      $search,
+      $replace
+    );
+    @return string.slice($string, 1, $index - 1) + $replace + $replaced;
+  }
+
+  @return $string;
+}
+
+@function clean-name($name) {
+  @return replace(replace($name, ".", "-"), "_", "-");
+}

package/styles/_token-helpers.scss

@@ -0,0 +1,41 @@
+@use "string-functions" as string;
+
+/// Helper for referencing design tokens consistently in CSS modules.
+///
+/// To use a design token:
+/// color: design-token("color.blue.800");
+@function design-token($tokenName) {
+  $cleanedName: string.clean-name($tokenName);
+  @return var(--ezui-#{$cleanedName});
+}
+
+/// Helper for referencing theme tokens consistently in CSS modules.
+///
+/// To use a theme token:
+/// color: theme-token("color.primary.800");
+@function theme-token($tokenName) {
+  $cleanedName: string.clean-name($tokenName);
+  @return var(--ezui-#{$cleanedName});
+}
+
+/// Helpers for referencing tokens in components in a structured way. Supports
+/// a consistent naming between CSS and JS.
+///
+/// To define a component token:
+/// @include component-token("text", "color", inherit);
+///
+/// To use a component token:
+/// color: component-token("text", "color");
+///
+/// See utilities/css.ts for using component tokens in JS
+@mixin component-token($componentName, $componentProp, $value) {
+  $cleanedComponentName: string.clean-name($componentName);
+  $cleanedComponentProp: string.clean-name($componentProp);
+  --ezui-c-#{$cleanedComponentName}-#{$cleanedComponentProp}: #{$value};
+}
+
+@function component-token($componentName, $componentProp) {
+  $cleanedComponentName: string.clean-name($componentName);
+  $cleanedComponentProp: string.clean-name($componentProp);
+  @return var(--ezui-c-#{$cleanedComponentName}-#{$cleanedComponentProp});
+}

package/styles/_typography.scss

@@ -0,0 +1,53 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+@use "@easypost/easy-ui-tokens/scss/map" as *;
+@use "@easypost/easy-ui-tokens/scss/variables" as *;
+
+/// Apply font styles to element as-is. This doesn't map responsive styles
+@mixin font-style-static($style) {
+  font-family: map.get($ezui-tokens, "font-style-#{$style}-family");
+  font-weight: map.get($ezui-tokens, "font-style-#{$style}-weight");
+  font-size: map.get($ezui-tokens, "font-style-#{$style}-size");
+  letter-spacing: map.get($ezui-tokens, "font-style-#{$style}-letter-spacing");
+  line-height: map.get($ezui-tokens, "font-style-#{$style}-line-height");
+}
+
+/// Apply responsive font styles to element. Large headings reduce their size
+/// on samller screens
+@mixin font-style($style) {
+  $responsive_style: map.get($ezui-tokens, "font-responsive-mapping-#{$style}");
+  @if $responsive_style {
+    @include font-style-static($responsive_style);
+    @media (min-width: #{$ezui-breakpoint-sm}) {
+      @include font-style-static($style);
+    }
+  } @else {
+    @include font-style-static($style);
+  }
+}
+
+/// Retrieve names for our font styles
+@function font-style-aliases() {
+  $aliases: ();
+  @each $key, $value in $ezui-tokens {
+    @if string.index($key, "font-style-") and string.index($key, "-family") {
+      $alias: string.slice($key, string.length("font-style-") + 1);
+      $alias: string.slice($alias, 0, string.index($alias, "-family") - 1);
+      $aliases: list.append($aliases, $alias);
+    }
+  }
+  @return $aliases;
+}
+
+/// Create utility classes for the font styles in our tokens
+///
+/// These can be defined globally or locally scoped to a CSS module.
+/// See <Text /> as an example of them being defined locally
+@mixin font-classes() {
+  @each $key in font-style-aliases() {
+    .#{$key} {
+      @include font-style($key);
+    }
+  }
+}

package/styles/_unstyled.scss

@@ -0,0 +1,32 @@
+@mixin button {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+@mixin link {
+  text-decoration: none;
+}
+
+@mixin list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin legend {
+  border: none;
+  margin: 0;
+  padding: 0;
+}

package/styles/global.scss

@@ -0,0 +1,32 @@
+@use "@easypost/easy-ui-tokens/css/variables.css";
+@use "token-helpers";
+@use "poppins-fallback";
+@use "scrollbars";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: token-helpers.theme-token("font.family");
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* Deactivate auto-enlargement of small text in Safari */
+  text-size-adjust: 100%;
+  /* Enable kerning and optional ligatures */
+  text-rendering: optimizeLegibility;
+}
+
+/**
+ * Form elements render using OS defaults,
+ * so font-family inheritance must be specifically declared
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+}

package/types.d.ts

@@ -1,9 +1,10 @@
 import type tokens from "@easypost/easy-ui-tokens/js/tokens";
-import React from "react";
+import React, { ComponentProps } from "react";
 import { ResponsiveProp } from "./utilities/css";
 export type DesignTokens = typeof tokens;
 export type DesignTokenAliases = keyof DesignTokens;
 export type Falsy = boolean | undefined | null | 0;
+export type Heading = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 /**
  * Tells TypeScript to not try to infer a generic type argument. This is useful
  * for allowing component prop definitions to be optionally extended with an
@@ -20,14 +21,19 @@ export type Namespace<Set, NeedlePrefix extends string, NeedleSuffix extends str
  *   heading1 | heading2 | heading3 ...
  */
 export type DesignTokenNamespace<NeedlePrefix extends string, NeedleSuffix extends void | string = void> = NeedleSuffix extends void ? Namespace<DesignTokenAliases, `${NeedlePrefix}.`> : Namespace<DesignTokenAliases, `${NeedlePrefix}.`, `.${string & NeedleSuffix}`>;
-export type ThemeTokenAliases = DesignTokenNamespace<"theme.base">;
+export type ThemeTokenAliases = DesignTokenNamespace<"theme.light">;
 export type ThemeTokenNamespace<Needle extends string> = Namespace<ThemeTokenAliases, `${Needle}.`>;
-type IconSymbolProps = React.SVGProps<SVGSVGElement> & {
+export type ThemeColorAliases = ThemeTokenNamespace<"color">;
+type IconSvgSymbolProps = React.SVGProps<SVGSVGElement> & {
     title?: string;
     titleId?: string;
 };
-export type IconSymbol = React.FunctionComponent<IconSymbolProps>;
+export type IconSymbol = React.FunctionComponent<IconSvgSymbolProps> | React.FunctionComponent<ComponentProps<"img">>;
 export type SpaceScale = DesignTokenNamespace<"space">;
 export type ResponsiveSpaceScale = ResponsiveProp<SpaceScale>;
+export type ShadowLevel = DesignTokenNamespace<"shadow.level">;
+export type BorderRadius = DesignTokenNamespace<"shape.border_radius">;
+type Enumerate<N extends number, Acc extends number[] = []> = Acc["length"] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc["length"]]>;
+export type IntRange<F extends number, L extends number> = Exclude<Enumerate<L>, Enumerate<F>> | L;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,kBAAkB,GAAG,MAAM,YAAY,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC;AAEnD;;;;GAIG;AACH,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;AAG5D,MAAM,MAAM,SAAS,CACnB,GAAG,EACH,YAAY,SAAS,MAAM,EAC3B,YAAY,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI,IACvC,YAAY,SAAS,IAAI,GACzB,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,EAAE,EAAE,GACtC,EAAE,GACF,KAAK,GACP,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,YAAY,EAAE,GAChE,EAAE,GACF,KAAK,CAAC;AAEV;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,CAC9B,YAAY,SAAS,MAAM,EAC3B,YAAY,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI,IACvC,YAAY,SAAS,IAAI,GACzB,SAAS,CAAC,kBAAkB,EAAE,GAAG,YAAY,GAAG,CAAC,GACjD,SAAS,CACP,kBAAkB,EAClB,GAAG,YAAY,GAAG,EAClB,IAAI,MAAM,GAAG,YAAY,EAAE,CAC5B,CAAC;AAEN,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;AAEnE,MAAM,MAAM,mBAAmB,CAAC,MAAM,SAAS,MAAM,IAAI,SAAS,CAChE,iBAAiB,EACjB,GAAG,MAAM,GAAG,CACb,CAAC;AAEF,KAAK,eAAe,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;AAElE,MAAM,MAAM,UAAU,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;AACvD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/utilities/EasyPostLogo.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function EasyPostLogo(): React.JSX.Element;
+//# sourceMappingURL=EasyPostLogo.d.ts.map

package/utilities/EasyPostLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EasyPostLogo.d.ts","sourceRoot":"","sources":["../../src/utilities/EasyPostLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,YAAY,sBAuB3B"}

package/utilities/css.d.ts

@@ -34,4 +34,5 @@ export declare function addPxUnitToNumber(px: string | number): string;
  * only replaces underscores and dots with kebabs.
  */
 export declare function tokenSafeKebabCase(str: string): string;
+export declare function backwardsCompatibleColorToken(token?: string): string | undefined;
 //# sourceMappingURL=css.d.ts.map

package/utilities/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utilities/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;AAClE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;KAAG,UAAU,IAAI,gBAAgB,CAAC,CAAC,EAAE,CAAC;CAAE,CAAC;AAE7E,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,UAExD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAExD;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa;;cAKnE;AAED,wBAAgB,iBAAiB,CAC/B,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM;;EASf;AAED,wBAAgB,uBAAuB,CACrC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM;;EAWf;AAED,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM;;EAWf;AAED,wBAAgB,wBAAwB,CACtC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;;EAgCxC;AAED,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC;;EA6BlD;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,UAE1C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,UAEpD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,UAK7C"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utilities/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;AAClE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;KAAG,UAAU,IAAI,gBAAgB,CAAC,CAAC,EAAE,CAAC;CAAE,CAAC;AAE7E,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,UAExD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAExD;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa;;cAKnE;AAED,wBAAgB,iBAAiB,CAC/B,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM;;EASf;AAED,wBAAgB,uBAAuB,CACrC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM;;EAWf;AAED,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM;;EAWf;AAED,wBAAgB,wBAAwB,CACtC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;;EAgCxC;AAED,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC;;EA6BlD;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,UAE1C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,UAEpD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,UAK7C;AAGD,wBAAgB,6BAA6B,CAAC,KAAK,CAAC,EAAE,MAAM,sBAiB3D"}

package/utilities/css.js

@@ -19,7 +19,7 @@ function getComponentDesignToken(componentName, componentProp, tokenSubgroup, to
   return getComponentToken(componentName, componentProp, token ? `var(--ezui-${tokenSafeKebabCase(tokenSubgroup)}-${tokenSafeKebabCase(token)})` : void 0);
 }
 function getComponentThemeToken(componentName, componentProp, tokenSubgroup, token) {
-  return getComponentToken(componentName, componentProp, token ? `var(--ezui-t-${tokenSafeKebabCase(tokenSubgroup)}-${tokenSafeKebabCase(token)})` : void 0);
+  return getComponentToken(componentName, componentProp, token ? `var(--ezui-${tokenSafeKebabCase(tokenSubgroup)}-${tokenSafeKebabCase(token)})` : void 0);
 }
 function getResponsiveDesignToken(componentName, componentProp, tokenSubgroup, responsiveProp) {
   if (!responsiveProp) {
@@ -54,7 +54,26 @@ function addPxUnitToNumber(px) {
 function tokenSafeKebabCase(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_\.]+/g, "-").toLowerCase();
 }
+function backwardsCompatibleColorToken(token) {
+  const oldTokens = {
+    primary: "primary.800",
+    subdued: "neutral.600",
+    danger: "negative.600",
+    action: "primary.500",
+    disabled: "neutral.300",
+    inverse: "neutral.000",
+    "gray.bold": "neutral.800",
+    "gray.resting": "neutral.500",
+    "code.selector": "positive.700",
+    "primary-inverse": "neutral.000"
+  };
+  if (token && oldTokens.hasOwnProperty(token)) {
+    return oldTokens[token];
+  }
+  return token;
+}
 exports.addPxUnitToNumber = addPxUnitToNumber;
+exports.backwardsCompatibleColorToken = backwardsCompatibleColorToken;
 exports.classNames = classNames;
 exports.getComponentDesignToken = getComponentDesignToken;
 exports.getComponentThemeToken = getComponentThemeToken;

package/utilities/css.mjs

@@ -17,7 +17,7 @@ function getComponentDesignToken(componentName, componentProp, tokenSubgroup, to
   return getComponentToken(componentName, componentProp, token ? `var(--ezui-${tokenSafeKebabCase(tokenSubgroup)}-${tokenSafeKebabCase(token)})` : void 0);
 }
 function getComponentThemeToken(componentName, componentProp, tokenSubgroup, token) {
-  return getComponentToken(componentName, componentProp, token ? `var(--ezui-t-${tokenSafeKebabCase(tokenSubgroup)}-${tokenSafeKebabCase(token)})` : void 0);
+  return getComponentToken(componentName, componentProp, token ? `var(--ezui-${tokenSafeKebabCase(tokenSubgroup)}-${tokenSafeKebabCase(token)})` : void 0);
 }
 function getResponsiveDesignToken(componentName, componentProp, tokenSubgroup, responsiveProp) {
   if (!responsiveProp) {
@@ -52,8 +52,27 @@ function addPxUnitToNumber(px) {
 function tokenSafeKebabCase(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_\.]+/g, "-").toLowerCase();
 }
+function backwardsCompatibleColorToken(token) {
+  const oldTokens = {
+    primary: "primary.800",
+    subdued: "neutral.600",
+    danger: "negative.600",
+    action: "primary.500",
+    disabled: "neutral.300",
+    inverse: "neutral.000",
+    "gray.bold": "neutral.800",
+    "gray.resting": "neutral.500",
+    "code.selector": "positive.700",
+    "primary-inverse": "neutral.000"
+  };
+  if (token && oldTokens.hasOwnProperty(token)) {
+    return oldTokens[token];
+  }
+  return token;
+}
 export {
   addPxUnitToNumber,
+  backwardsCompatibleColorToken,
   classNames,
   getComponentDesignToken,
   getComponentThemeToken,

package/utilities/react.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { Key, ReactElement, ReactNode } from "react";
 /**
  * Similar to React's built-in Children.toArray method, this utility takes
  * children and returns them as an array for introspection or filtering.
@@ -12,4 +12,20 @@ import { ReactElement, ReactNode } from "react";
  */
 export declare function flattenChildren(children: ReactNode, depth?: number, keys?: (string | number)[]): ReactNode[];
 export declare function filterChildrenByDisplayName(children: ReactNode, displayName: string): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+export declare function getDisplayNameFromReactNode(component: ReactNode): string | undefined;
+/**
+ * When Children.toArray is called, keys of the child are modified
+ * in a predictable way. This function returns the original key
+ * of the child.
+ */
+export declare function getFlattenedKey(key: Key | null, level?: number, defaultKey?: string | Key): string | Key;
+/**
+ * Recursively searches a React tree finding the first that meets the specified
+ * comparator function.
+ *
+ * @param children Tree of children to search
+ * @param deepFindFn Comparator function to test each child against
+ * @returns The first child that meets the criteria of the comparator function
+ */
+export declare function deepFind(children: ReactNode | ReactNode[], deepFindFn: (child: ReactNode, index?: number, children?: ReactNode[]) => boolean): ReactNode | undefined;
 //# sourceMappingURL=react.d.ts.map

package/utilities/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/utilities/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,YAAY,EACZ,SAAS,EAGV,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,SAAS,EACnB,KAAK,GAAE,MAAU,EACjB,IAAI,GAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAO,GAC7B,SAAS,EAAE,CA4Bb;AAED,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,MAAM,4EASpB"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/utilities/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,GAAG,EAEH,YAAY,EACZ,SAAS,EAGV,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,SAAS,EACnB,KAAK,GAAE,MAAU,EACjB,IAAI,GAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAO,GAC7B,SAAS,EAAE,CA4Bb;AAED,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,MAAM,4EASpB;AAED,wBAAgB,2BAA2B,CAAC,SAAS,EAAE,SAAS,sBAM/D;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,KAAK,GAAE,MAAU,EACjB,UAAU,GAAE,MAAM,GAAG,GAAQ,GAC5B,MAAM,GAAG,GAAG,CASd;AAyBD;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,EACjC,UAAU,EAAE,CACV,KAAK,EAAE,SAAS,EAChB,KAAK,CAAC,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,SAAS,EAAE,KACnB,OAAO,GACX,SAAS,GAAG,SAAS,CAsBvB"}