@primer/react-brand 0.0.4-rc.f3728d0 → 0.1.0-rc.0c7d40e

package/CHANGELOG.md

@@ -1,10 +1,16 @@
 # @primer/react-brand
 
-## 0.0.4
+## 0.1.0
+
+### Minor Changes
+
+- [#19](https://github.com/primer/react-brand/pull/19) [`3b22e9e`](https://github.com/primer/react-brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
 
 ### Patch Changes
 
-- [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
+- [#25](https://github.com/primer/react-brand/pull/25) [`4b00b72`](https://github.com/primer/react-brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
+
+* [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
 
 ## 0.0.3
 

package/lib/Hero/Hero.d.ts

@@ -9,6 +9,7 @@ export declare type HeroProps = {
     primaryAction: Action;
     secondaryAction?: Action;
     align?: 'start' | 'center';
+    size?: 'small' | 'large';
 };
-export declare function Hero({ heading, description, primaryAction, secondaryAction, align }: HeroProps): JSX.Element;
+export declare function Hero({ heading, description, primaryAction, secondaryAction, align, size }: HeroProps): JSX.Element;
 export {};

package/lib/css/gh-variables.color.css

@@ -275,6 +275,14 @@
   --gh-color-actionListItem-danger-hoverBg: rgba(255, 235, 233, 0.64);
   --gh-color-actionListItem-danger-activeBg: #ffebe9;
   --gh-color-actionListItem-danger-hoverText: #cf222e;
+  --gh-color-switchTrack-bg: #eaeef2;
+  --gh-color-switchTrack-border: #afb8c1;
+  --gh-color-switchTrack-checked-bg: #ddf4ff;
+  --gh-color-switchTrack-checked-hoverBg: #b6e3ff;
+  --gh-color-switchTrack-checked-activeBg: #80ccff;
+  --gh-color-switchTrack-checked-border: #54aeff;
+  --gh-color-switchKnob-checked-bg: #0969da;
+  --gh-color-switchKnob-checked-disabledBg: #6e7781;
   --gh-color-fg-default: #24292f;
   --gh-color-fg-muted: #57606a;
   --gh-color-fg-subtle: #6e7781;
@@ -617,6 +625,14 @@
   --gh-color-actionListItem-danger-hoverBg: rgba(255, 235, 233, 0.64);
   --gh-color-actionListItem-danger-activeBg: #ffebe9;
   --gh-color-actionListItem-danger-hoverText: #cf222e;
+  --gh-color-switchTrack-bg: #eaeef2;
+  --gh-color-switchTrack-border: #afb8c1;
+  --gh-color-switchTrack-checked-bg: #ddf4ff;
+  --gh-color-switchTrack-checked-hoverBg: #b6e3ff;
+  --gh-color-switchTrack-checked-activeBg: #80ccff;
+  --gh-color-switchTrack-checked-border: #54aeff;
+  --gh-color-switchKnob-checked-bg: #0969da;
+  --gh-color-switchKnob-checked-disabledBg: #6e7781;
   --gh-color-fg-default: #24292f;
   --gh-color-fg-muted: #57606a;
   --gh-color-fg-subtle: #6e7781;
@@ -738,7 +754,7 @@
   --gh-color-codemirror-bg: #0d1117;
   --gh-color-codemirror-guttersBg: #0d1117;
   --gh-color-codemirror-guttermarkerText: #0d1117;
-  --gh-color-codemirror-guttermarkerSubtleText: #484f58;
+  --gh-color-codemirror-guttermarkerSubtleText: #6e7681;
   --gh-color-codemirror-linenumberText: #8b949e;
   --gh-color-codemirror-cursor: #c9d1d9;
   --gh-color-codemirror-selectionBg: rgba(56, 139, 253, 0.4);
@@ -763,7 +779,7 @@
   --gh-color-checks-btnHoverIcon: #c9d1d9;
   --gh-color-checks-btnHoverBg: rgba(110, 118, 129, 0.1);
   --gh-color-checks-inputText: #8b949e;
-  --gh-color-checks-inputPlaceholderText: #484f58;
+  --gh-color-checks-inputPlaceholderText: #6e7681;
   --gh-color-checks-inputFocusText: #c9d1d9;
   --gh-color-checks-inputBg: #161b22;
   --gh-color-checks-inputShadow: 0 0 0 1px (obj) => get_1.default(obj, path);
@@ -785,8 +801,8 @@
   --gh-color-checks-headerBorder: #21262d;
   --gh-color-checks-headerIcon: #8b949e;
   --gh-color-checks-lineText: #8b949e;
-  --gh-color-checks-lineNumText: #484f58;
-  --gh-color-checks-lineTimestampText: #484f58;
+  --gh-color-checks-lineNumText: #6e7681;
+  --gh-color-checks-lineTimestampText: #6e7681;
   --gh-color-checks-lineHoverBg: rgba(110, 118, 129, 0.1);
   --gh-color-checks-lineSelectedBg: rgba(56, 139, 253, 0.15);
   --gh-color-checks-lineSelectedNumText: #58a6ff;
@@ -799,10 +815,10 @@
   --gh-color-checks-stepErrorText: #f85149;
   --gh-color-checks-stepWarningText: #d29922;
   --gh-color-checks-loglineText: #8b949e;
-  --gh-color-checks-loglineNumText: #484f58;
+  --gh-color-checks-loglineNumText: #6e7681;
   --gh-color-checks-loglineDebugText: #a371f7;
   --gh-color-checks-loglineErrorText: #8b949e;
-  --gh-color-checks-loglineErrorNumText: #484f58;
+  --gh-color-checks-loglineErrorNumText: #6e7681;
   --gh-color-checks-loglineErrorBg: rgba(248, 81, 73, 0.15);
   --gh-color-checks-loglineWarningText: #8b949e;
   --gh-color-checks-loglineWarningNumText: #d29922;
@@ -948,7 +964,7 @@
   --gh-color-btn-danger-focusShadow: 0 0 0 3px rgba(248, 81, 73, 0.4);
   --gh-color-btn-danger-counterBg: rgba(218, 54, 51, 0.1);
   --gh-color-btn-danger-icon: #f85149;
-  --gh-color-underlinenav-icon: #484f58;
+  --gh-color-underlinenav-icon: #6e7681;
   --gh-color-underlinenav-borderHover: rgba(110, 118, 129, 0.4);
   --gh-color-actionListItem-inlineDivider: rgba(48, 54, 61, 0.48);
   --gh-color-actionListItem-default-hoverBg: rgba(177, 186, 196, 0.12);
@@ -959,9 +975,17 @@
   --gh-color-actionListItem-danger-hoverBg: rgba(248, 81, 73, 0.16);
   --gh-color-actionListItem-danger-activeBg: rgba(248, 81, 73, 0.24);
   --gh-color-actionListItem-danger-hoverText: #ff7b72;
+  --gh-color-switchTrack-bg: #010409;
+  --gh-color-switchTrack-border: #6e7681;
+  --gh-color-switchTrack-checked-bg: rgba(31, 111, 235, 0.35);
+  --gh-color-switchTrack-checked-hoverBg: rgba(31, 111, 235, 0.5);
+  --gh-color-switchTrack-checked-activeBg: rgba(31, 111, 235, 0.65);
+  --gh-color-switchTrack-checked-border: #58a6ff;
+  --gh-color-switchKnob-checked-bg: #1f6feb;
+  --gh-color-switchKnob-checked-disabledBg: #484f58;
   --gh-color-fg-default: #c9d1d9;
   --gh-color-fg-muted: #8b949e;
-  --gh-color-fg-subtle: #484f58;
+  --gh-color-fg-subtle: #6e7681;
   --gh-color-fg-onEmphasis: #ffffff;
   --gh-color-canvas-default: #0d1117;
   --gh-color-canvas-overlay: #161b22;

package/lib/css/main.css

@@ -24,13 +24,20 @@ body {
 
 .Hero-module__Hero-heading___Ns\+oe {
   margin: 0;
-  font-size: 2.5rem;
   font-weight: 700;
   line-height: 1.1;
-  max-width: 20ch;
+  max-width: 18ch;
   color: var(--gh-color-fg-default);
 }
 
+.Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
+  font-size: 2.5rem;
+}
+
+.Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
+  font-size: 3rem;
+}
+
 .Hero-module__Hero-description___5DYuI {
   margin: 1.5rem 0 0;
   font-size: 1rem;
@@ -56,10 +63,14 @@ body {
     padding: 10.75rem 0;
   }
 
-  .Hero-module__Hero-heading___Ns\+oe {
+  .Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
     font-size: 3.5rem;
   }
 
+  .Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
+    font-size: 4.5rem;
+  }
+
   .Hero-module__Hero-description___5DYuI {
     font-size: 1.25rem;
   }
@@ -76,9 +87,17 @@ body {
 
 /* Medium breakpoint and up */
 @media screen and (min-width: 768px) {
-  .Hero-module__Hero-heading___Ns\+oe {
+  .Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
     font-size: 4.5rem;
   }
+
+  .Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
+    font-size: 6rem;
+  }
+
+  .Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-description___5DYuI {
+    font-size: 1.5rem;
+  }
 }
 
 .ExpandableArrow-module__ExpandableArrow___Zzb6R {

package/lib/design-tokens/css/tokens/base/size/size.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:16 GMT
+ */
+
+:root {
+  --base-size-128: 8rem;
+  --base-size-112: 7rem;
+  --base-size-96: 6rem;
+  --base-size-80: 5rem;
+  --base-size-64: 4rem;
+  --base-size-48: 3rem;
+  --base-size-44: 2.75rem;
+  --base-size-40: 2.5rem;
+  --base-size-36: 2.25rem;
+  --base-size-32: 2rem;
+  --base-size-28: 1.75rem;
+  --base-size-24: 1.5rem;
+  --base-size-20: 1.25rem;
+  --base-size-16: 1rem;
+  --base-size-12: 0.75rem;
+  --base-size-8: 0.5rem;
+  --base-size-4: 0.25rem;
+}

package/lib/design-tokens/css/tokens/base/typography/typography.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:15 GMT
+ */
+
+:root {
+  --base-text-weight-semibold: 600;
+  --base-text-weight-medium: 500;
+  --base-text-weight-normal: 400;
+  --base-text-weight-light: 300;
+}

package/lib/design-tokens/css/tokens/functional/size/border.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:15 GMT
+ */
+
+:root {
+  --brand-borderRadius-full: 100vh;
+  --brand-borderRadius-large: 0.75rem;
+  --brand-borderRadius-medium: 0.375rem;
+  --brand-borderRadius-small: 0.1875rem;
+  --brand-borderWidth-thick: max(4px, 0.25rem);
+  --brand-borderWidth-normal: max(2px, 0.125rem);
+  --brand-borderWidth-thin: max(1px, 0.0625rem);
+  --brand-borderInset-thick: inset 0 0 0 var(--brand-borderWidth-thick);
+  --brand-borderInset-normal: inset 0 0 0 var(--brand-borderWidth-normal);
+  --brand-borderInset-thin: inset 0 0 0 var(--brand-borderWidth-thin);
+}

package/lib/design-tokens/css/tokens/functional/size/breakpoints.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:15 GMT
+ */
+
+:root {
+  --brand-breakpoint-xxlarge: 90rem;
+  --brand-breakpoint-xlarge: 80rem;
+  --brand-breakpoint-large: 63.25rem;
+  --brand-breakpoint-medium: 48rem;
+  --brand-breakpoint-small: 34rem;
+  --brand-breakpoint-xsmall: 20rem;
+}

package/lib/design-tokens/css/tokens/functional/size/size-coarse.css

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:16 GMT
+ */
+
+@media (pointer: coarse) { :root {
+  --brand-controlStack-medium-gap-auto: var(--base-size-12);
+  --brand-controlStack-small-gap-auto: var(--base-size-16);
+  --brand-control-minTarget-auto: var(--base-size-44);
+}}

package/lib/design-tokens/css/tokens/functional/size/size-fine.css

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:16 GMT
+ */
+
+@media (pointer: fine) { :root {
+  --brand-controlStack-medium-gap-auto: var(--base-size-8);
+  --brand-controlStack-small-gap-auto: var(--base-size-8);
+  --brand-control-minTarget-auto: var(--base-size-16);
+}}

package/lib/design-tokens/css/tokens/functional/size/size.css

@@ -0,0 +1,54 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:15 GMT
+ */
+
+:root {
+  --brand-controlStack-large-gap-spacious: var(--base-size-12);
+  --brand-controlStack-large-gap-condensed: var(--base-size-8);
+  --brand-controlStack-large-gap-auto: var(--base-size-8);
+  --brand-controlStack-medium-gap-spacious: var(--base-size-12);
+  --brand-controlStack-medium-gap-condensed: var(--base-size-8);
+  --brand-controlStack-small-gap-spacious: var(--base-size-16);
+  --brand-controlStack-small-gap-condensed: var(--base-size-8);
+  --brand-stack-gap-spacious: var(--base-size-24);
+  --brand-stack-gap-normal: var(--base-size-16);
+  --brand-stack-gap-condensed: var(--base-size-8);
+  --brand-stack-padding-spacious: var(--base-size-24);
+  --brand-stack-padding-normal: var(--base-size-16);
+  --brand-stack-padding-condensed: var(--base-size-8);
+  --brand-control-xlarge-gap: var(--base-size-8);
+  --brand-control-xlarge-paddingInline-spacious: var(--base-size-16);
+  --brand-control-xlarge-paddingInline-normal: var(--base-size-12);
+  --brand-control-xlarge-lineBoxHeight: var(--base-size-20);
+  --brand-control-xlarge-size: var(--base-size-48);
+  --brand-control-large-gap: var(--base-size-8);
+  --brand-control-large-paddingInline-spacious: var(--base-size-16);
+  --brand-control-large-paddingInline-normal: var(--base-size-12);
+  --brand-control-large-lineBoxHeight: var(--base-size-20);
+  --brand-control-large-size: var(--base-size-40);
+  --brand-control-medium-gap: var(--base-size-8);
+  --brand-control-medium-paddingInline-spacious: var(--base-size-16);
+  --brand-control-medium-paddingInline-normal: var(--base-size-12);
+  --brand-control-medium-paddingInline-condensed: var(--base-size-8);
+  --brand-control-medium-lineBoxHeight: var(--base-size-20);
+  --brand-control-medium-size: var(--base-size-32);
+  --brand-control-small-gap: var(--base-size-4);
+  --brand-control-small-paddingInline-normal: var(--base-size-12);
+  --brand-control-small-paddingInline-condensed: var(--base-size-8);
+  --brand-control-small-lineBoxHeight: var(--base-size-20);
+  --brand-control-small-size: var(--base-size-28);
+  --brand-control-xsmall-gap: var(--base-size-4);
+  --brand-control-xsmall-paddingInline-spacious: var(--base-size-12);
+  --brand-control-xsmall-paddingInline-normal: var(--base-size-8);
+  --brand-control-xsmall-paddingInline-condensed: var(--base-size-4);
+  --brand-control-xsmall-lineBoxHeight: var(--base-size-20);
+  --brand-control-xsmall-size: var(--base-size-24);
+  --brand-control-minTarget-coarse: var(--base-size-44);
+  --brand-control-minTarget-fine: var(--base-size-16);
+  --brand-control-xlarge-paddingBlock: calc((var(--brand-control-xlarge-size) - var(--brand-control-xlarge-lineBoxHeight)) / 2);
+  --brand-control-large-paddingBlock: calc((var(--brand-control-large-size) - var(--brand-control-large-lineBoxHeight)) / 2);
+  --brand-control-medium-paddingBlock: calc((var(--brand-control-medium-size) - var(--brand-control-medium-lineBoxHeight)) / 2);
+  --brand-control-small-paddingBlock: calc((var(--brand-control-small-size) - var(--brand-control-small-lineBoxHeight)) / 2);
+  --brand-control-xsmall-paddingBlock: calc((var(--brand-control-xsmall-size) - var(--brand-control-xsmall-lineBoxHeight)) / 2);
+}

package/lib/design-tokens/css/tokens/functional/size/viewport.css

@@ -0,0 +1,6 @@
+@custom-media --brand-viewportRange-narrow-viewport (max-width: calc(48rem - 0.02px));
+@custom-media --brand-viewportRange-narrowLandscape-viewport (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
+@custom-media --brand-viewportRange-regular-viewport (min-width: 48rem);
+@custom-media --brand-viewportRange-wide-viewport (min-width: 90rem);
+@custom-media --brand-viewportRange-portrait-viewport (orientation: portrait);
+@custom-media --brand-viewportRange-landscape-viewport (orientation: landscape);

package/lib/design-tokens/css/tokens/functional/typography/typography.css

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:15 GMT
+ */
+
+:root {
+  --brand-fontStack-sansSerif: Alliance No.1,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+}

package/lib/design-tokens/js/module/tokens/base/size/size.js

@@ -0,0 +1,266 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 28 Apr 2022 09:17:16 GMT
+ */
+
+module.exports = {
+  "base": {
+    "size": {
+      "4": {
+        "value": "0.25rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "4px"
+        },
+        "name": "4",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "4"
+        ]
+      },
+      "8": {
+        "value": "0.5rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "8px"
+        },
+        "name": "8",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "8"
+        ]
+      },
+      "12": {
+        "value": "0.75rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "12px"
+        },
+        "name": "12",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "12"
+        ]
+      },
+      "16": {
+        "value": "1rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "16px"
+        },
+        "name": "16",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "16"
+        ]
+      },
+      "20": {
+        "value": "1.25rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "20px"
+        },
+        "name": "20",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "20"
+        ]
+      },
+      "24": {
+        "value": "1.5rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "24px"
+        },
+        "name": "24",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "24"
+        ]
+      },
+      "28": {
+        "value": "1.75rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "28px"
+        },
+        "name": "28",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "28"
+        ]
+      },
+      "32": {
+        "value": "2rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "32px"
+        },
+        "name": "32",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "32"
+        ]
+      },
+      "36": {
+        "value": "2.25rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "36px"
+        },
+        "name": "36",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "36"
+        ]
+      },
+      "40": {
+        "value": "2.5rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "40px"
+        },
+        "name": "40",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "40"
+        ]
+      },
+      "44": {
+        "value": "2.75rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "44px"
+        },
+        "name": "44",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "44"
+        ]
+      },
+      "48": {
+        "value": "3rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "48px"
+        },
+        "name": "48",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "48"
+        ]
+      },
+      "64": {
+        "value": "4rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "64px"
+        },
+        "name": "64",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "64"
+        ]
+      },
+      "80": {
+        "value": "5rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "80px"
+        },
+        "name": "80",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "80"
+        ]
+      },
+      "96": {
+        "value": "6rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "96px"
+        },
+        "name": "96",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "96"
+        ]
+      },
+      "112": {
+        "value": "7rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "112px"
+        },
+        "name": "112",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "112"
+        ]
+      },
+      "128": {
+        "value": "8rem",
+        "filePath": "tokens/base/size/size.json",
+        "isSource": true,
+        "original": {
+          "value": "128px"
+        },
+        "name": "128",
+        "attributes": {},
+        "path": [
+          "base",
+          "size",
+          "128"
+        ]
+      }
+    }
+  }
+};