datocms-react-ui 2.1.5 → 2.2.0-alpha.2

package/src/Canvas/styles.module.css

@@ -1,33 +1,46 @@
 .themeVariables {
-  /* Colors */
+  /**
+   * @deprecated LEGACY COLOR VARIABLES — DO NOT USE IN NEW CODE.
+   *
+   * The color variables below are kept strictly for backward compatibility
+   * with third-party plugins authored before the semantic color token
+   * system. Each one now resolves to its closest semantic token, so it
+   * follows the active theme (including dark mode).
+   *
+   * The colors in this block will be removed in a future major version.
+   * Migrate to the `--color--*` semantic tokens (see the `Canvas` JSDoc
+   * for the full list). The non-color tokens further below (fonts, spacing,
+   * font-sizes, easings) are stable and will remain.
+   */
+  /* Colors (deprecated) */
   --base-body-color-rgb-components: 52, 54, 58;
-  --base-body-color: rgb(var(--base-body-color-rgb-components));
+  --base-body-color: var(--color--ink);
   --light-body-color-rgb-components: 132, 132, 132;
-  --light-body-color: rgb(var(--light-body-color-rgb-components));
+  --light-body-color: var(--color--ink-subtle);
   --placeholder-body-color-rgb-components: 198, 198, 198;
-  --placeholder-body-color: rgb(var(--placeholder-body-color-rgb-components));
+  --placeholder-body-color: var(--color--ink-placeholder);
   --light-bg-color-rgb-components: 245, 245, 245;
-  --light-bg-color: rgb(var(--light-bg-color-rgb-components));
+  --light-bg-color: var(--color--surface-muted);
   --lighter-bg-color-rgb-components: 248, 248, 248;
-  --lighter-bg-color: rgb(var(--lighter-bg-color-rgb-components));
+  --lighter-bg-color: var(--color--surface-muted);
   --disabled-bg-color-rgb-components: 237, 237, 237;
-  --disabled-bg-color: rgb(var(--disabled-bg-color-rgb-components));
+  --disabled-bg-color: var(--color--disabled--surface);
   --border-color-rgb-components: 240, 240, 240;
-  --border-color: rgb(var(--border-color-rgb-components));
+  --border-color: var(--color--border);
   --darker-border-color-rgb-components: 215, 215, 215;
-  --darker-border-color: rgb(var(--darker-border-color-rgb-components));
+  --darker-border-color: var(--color--border-hover);
   --alert-color-rgb-components: 255, 94, 73;
-  --alert-color: rgb(var(--alert-color-rgb-components));
+  --alert-color: var(--color--ink-danger);
   --warning-color-rgb-components: 255, 215, 0;
-  --warning-color: rgb(var(--warning-color-rgb-components));
+  --warning-color: var(--color--ink-warning);
   --notice-color-rgb-components: 70, 215, 0;
-  --notice-color: rgb(var(--notice-color-rgb-components));
+  --notice-color: var(--color--ink-success);
   --warning-bg-color-rgb-components: 255, 255, 229;
-  --warning-bg-color: rgb(var(--warning-bg-color-rgb-components));
+  --warning-bg-color: var(--color--warning-soft--surface);
   --add-color-rgb-components: 76, 176, 109;
-  --add-color: rgb(var(--add-color-rgb-components));
+  --add-color: var(--color--diff-added--surface);
   --remove-color-rgb-components: 235, 87, 106;
-  --remove-color: rgb(var(--remove-color-rgb-components));
+  --remove-color: var(--color--diff-removed--surface);
 
   /* Fonts */
   --base-font-family:
@@ -39,6 +52,7 @@
   --font-weight-bold: 500;
 
   /* Spacing */
+  --spacing-xs: calc(0.25 * 12 * 0.0625rem);
   --spacing-s: calc(0.5 * 12 * 0.0625rem);
   --spacing-m: calc(1 * 12 * 0.0625rem);
   --spacing-l: calc(2 * 12 * 0.0625rem);
@@ -46,6 +60,7 @@
   --spacing-xxl: calc(5 * 12 * 0.0625rem);
   --spacing-xxxl: calc(8 * 12 * 0.0625rem);
 
+  --negative-spacing-xs: calc(-0.25 * 12 * 0.0625rem);
   --negative-spacing-s: calc(-0.5 * 12 * 0.0625rem);
   --negative-spacing-m: calc(-1 * 12 * 0.0625rem);
   --negative-spacing-l: calc(-2 * 12 * 0.0625rem);
@@ -71,7 +86,8 @@
   font-family: var(--base-font-family);
   -webkit-text-size-adjust: 100%;
   line-height: 1.5;
-  color: var(--base-body-color);
+  color: var(--color--ink);
+  background: var(--color--surface);
   font-size: var(--font-size-m);
   text-rendering: optimizeLegibility;
 }

package/src/Canvas/styles.module.css.json

@@ -1 +1 @@
-{"themeVariables":"_themeVariables_2dr1w_1","canvas":"_canvas_2dr1w_70"}
+{"themeVariables":"_themeVariables_1oghx_1","canvas":"_canvas_1oghx_85"}

package/src/ContextInspector/styles.module.css

@@ -3,7 +3,7 @@
 }
 
 .panel {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
 }
 
 .panelHandle {
@@ -12,20 +12,20 @@
   box-sizing: border-box;
   width: 100%;
   font-weight: var(--font-weight-bold);
-  background: var(--light-bg-color);
+  background: var(--color--surface-muted);
   border: 0;
   padding: 5px 10px;
   cursor: pointer;
 
   &:hover {
-    background: var(--lighter-bg-color);
+    background: var(--color--surface-hover);
   }
 }
 
 .panelBody {
   padding: 20px;
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--color--border);
+  border-right: 1px solid var(--color--border);
 }
 
 .groupDescription {
@@ -35,12 +35,12 @@
 }
 
 .propertyGroup {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   border-radius: 5px;
 }
 
 .propertyOrMethod {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
   line-height: 1.2;
 
   p {
@@ -57,7 +57,7 @@
 
   pre {
     padding: 15px;
-    background: var(--light-bg-color);
+    background: var(--color--surface-muted);
     font-size: 0.8em;
     margin: 0;
     max-height: 240px;
@@ -69,7 +69,7 @@
   display: block;
   text-decoration: none;
   font-weight: bold;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   font-family: var(--monospaced-font-family);
   font-size: 0.9em;
   margin-bottom: 5px;
@@ -81,7 +81,7 @@
 
 .propertyOrMethodExampleActions {
   padding: 15px;
-  background: white;
+  background: var(--color--surface);
   display: flex;
 
   > * {

package/src/ContextInspector/styles.module.css.json

@@ -1 +1 @@
-{"inspector":"_inspector_u6041_1","panel":"_panel_u6041_5","panelHandle":"_panelHandle_u6041_9","panelBody":"_panelBody_u6041_25","groupDescription":"_groupDescription_u6041_31","propertyGroup":"_propertyGroup_u6041_37","propertyOrMethod":"_propertyOrMethod_u6041_42","propertyOrMethodBody":"_propertyOrMethodBody_u6041_51","propertyOrMethodExample":"_propertyOrMethodExample_u6041_55","propertyOrMethodName":"_propertyOrMethodName_u6041_68","propertyOrMethodExampleActions":"_propertyOrMethodExampleActions_u6041_82"}
+{"inspector":"_inspector_4pnoo_1","panel":"_panel_4pnoo_5","panelHandle":"_panelHandle_4pnoo_9","panelBody":"_panelBody_4pnoo_25","groupDescription":"_groupDescription_4pnoo_31","propertyGroup":"_propertyGroup_4pnoo_37","propertyOrMethod":"_propertyOrMethod_4pnoo_42","propertyOrMethodBody":"_propertyOrMethodBody_4pnoo_51","propertyOrMethodExample":"_propertyOrMethodExample_4pnoo_55","propertyOrMethodName":"_propertyOrMethodName_4pnoo_68","propertyOrMethodExampleActions":"_propertyOrMethodExampleActions_4pnoo_82"}

package/src/Dropdown/styles.module.css

@@ -10,35 +10,37 @@
 
 .Dropdown__menu__search {
   padding: 7px;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
 }
 
 .Dropdown__menu__search__input {
   display: block;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   appearance: none;
+  background-color: var(--color--surface);
   background-image: none;
   transition: border 0.2s var(--material-ease);
   resize: none;
   font-family: inherit;
+  color: inherit;
   padding: 8px;
   border-radius: 3px;
   font-size: 0.9em;
 
   &::placeholder {
-    color: var(--placeholder-body-color);
+    color: var(--color--ink-placeholder);
   }
 
   &:hover {
-    border-color: var(--darker-border-color);
+    border-color: var(--color--border-hover);
   }
 
   &:focus {
     outline: 0;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+    border-color: var(--color--focus--border);
+    box-shadow: 0 0 0 4px var(--color--focus--outline);
   }
 }
 
@@ -49,8 +51,8 @@
 
 .Dropdown__menu {
   min-width: 200px;
-  background-color: white;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  background-color: var(--color--surface-raised);
+  box-shadow: var(--shadow--floating);
   border-radius: 4px;
   margin-bottom: var(--spacing-xl);
   padding: 1px 0;
@@ -64,8 +66,8 @@
 
 .Dropdown__menu__group__title {
   padding: 5px 15px 3px;
-  color: var(--light-body-color);
-  background-color: var(--light-bg-color);
+  color: var(--color--ink-subtle);
+  background-color: var(--color--surface-muted);
   text-transform: uppercase;
   font-size: var(--font-size-xs);
 }
@@ -77,7 +79,7 @@
 .Dropdown__menu__text {
   text-align: left;
   padding: 4px 15px;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   position: relative;
   display: block;
   line-height: 1.2;
@@ -86,7 +88,7 @@
 .Dropdown__menu__option {
   text-align: left;
   padding: 4px 15px;
-  color: var(--base-body-color);
+  color: var(--color--ink);
   position: relative;
   text-decoration: none;
   white-space: nowrap;
@@ -95,7 +97,7 @@
 
   &:hover,
   &:focus {
-    background-color: var(--light-bg-color);
+    background-color: var(--color--surface-hover);
   }
 
   & > a {
@@ -106,7 +108,7 @@
 }
 
 .Dropdown__menu__option--is-selected {
-  background-color: var(--light-bg-color);
+  background-color: var(--color--selected--surface);
 }
 
 .Dropdown__menu__option--is-disabled {
@@ -118,19 +120,19 @@
 }
 
 .Dropdown__menu__option--is-dangerous {
-  color: var(--alert-color);
+  color: var(--color--danger--ink);
 
   svg {
-    fill: var(--alert-color);
+    fill: var(--color--danger--ink);
   }
 
   &:hover,
   &:focus {
-    background-color: var(--alert-color);
-    color: white;
+    background-color: var(--color--danger--surface);
+    color: var(--color--danger--ink);
 
     svg {
-      fill: white;
+      fill: var(--color--danger--ink);
     }
   }
 }
@@ -161,7 +163,7 @@
     border-radius: 4px;
     height: 8px;
     width: 8px;
-    background-color: var(--alert-color);
+    background-color: var(--color--danger--surface);
   }
 }
 
@@ -186,8 +188,8 @@
     padding-right: 8px;
     display: inline-block;
     vertical-align: middle;
-    color: var(--light-body-color);
-    fill: var(--light-body-color);
+    color: var(--color--ink-subtle);
+    fill: var(--color--ink-subtle);
   }
 }
 
@@ -202,7 +204,7 @@
   cursor: pointer;
   line-height: inherit;
   background-color: transparent;
-  color: var(--base-body-color);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   box-sizing: border-box;
@@ -213,7 +215,7 @@
   width: auto;
   opacity: 0;
   line-height: 10px;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   padding: 3px;
   font-size: 13px;
   position: relative;
@@ -234,21 +236,21 @@
   }
 
   svg {
-    fill: var(--light-body-color);
+    fill: var(--color--ink-subtle);
   }
 }
 
 .Dropdown__menu__option__icon--delete {
-  color: var(--alert-color);
+  color: var(--color--danger--ink);
   svg {
-    fill: var(--alert-color);
+    fill: var(--color--danger--ink);
   }
 }
 
 .Dropdown__menu__separator {
   margin: 8px 0;
   height: 1px;
-  background-color: var(--border-color);
+  background-color: var(--color--border);
 }
 
 .Dropdown__menu {

package/src/Dropdown/styles.module.css.json

@@ -1 +1 @@
-{"Dropdown":"_Dropdown_nie0g_1","Dropdown__spacer":"_Dropdown__spacer_nie0g_5","Dropdown__menu__search":"_Dropdown__menu__search_nie0g_11","Dropdown__menu__search__input":"_Dropdown__menu__search__input_nie0g_16","Dropdown__menu-container":"_Dropdown__menu-container_nie0g_45","Dropdown__menu":"_Dropdown__menu_nie0g_11","Dropdown__menu__inner":"_Dropdown__menu__inner_nie0g_61","Dropdown__menu__group__title":"_Dropdown__menu__group__title_nie0g_65","Dropdown__menu__group__content":"_Dropdown__menu__group__content_nie0g_73","Dropdown__menu__text":"_Dropdown__menu__text_nie0g_77","Dropdown__menu__option":"_Dropdown__menu__option_nie0g_86","Dropdown__menu__option--is-selected":"_Dropdown__menu__option--is-selected_nie0g_108","Dropdown__menu__option--is-disabled":"_Dropdown__menu__option--is-disabled_nie0g_112","Dropdown__menu__option__content":"_Dropdown__menu__option__content_nie0g_115","Dropdown__menu__option--is-dangerous":"_Dropdown__menu__option--is-dangerous_nie0g_120","Dropdown__menu__option--is-active":"_Dropdown__menu__option--is-active_nie0g_138","Dropdown__menu__option--is-valid":"_Dropdown__menu__option--is-valid_nie0g_147","Dropdown__menu__option--is-invalid":"_Dropdown__menu__option--is-invalid_nie0g_151","Dropdown__menu__option__icons":"_Dropdown__menu__option__icons_nie0g_194","Dropdown__menu__option__icon":"_Dropdown__menu__option__icon_nie0g_194","Dropdown__menu__option__icon--delete":"_Dropdown__menu__option__icon--delete_nie0g_241","Dropdown__menu__separator":"_Dropdown__menu__separator_nie0g_248"}
+{"Dropdown":"_Dropdown_1mqss_1","Dropdown__spacer":"_Dropdown__spacer_1mqss_5","Dropdown__menu__search":"_Dropdown__menu__search_1mqss_11","Dropdown__menu__search__input":"_Dropdown__menu__search__input_1mqss_16","Dropdown__menu-container":"_Dropdown__menu-container_1mqss_47","Dropdown__menu":"_Dropdown__menu_1mqss_11","Dropdown__menu__inner":"_Dropdown__menu__inner_1mqss_63","Dropdown__menu__group__title":"_Dropdown__menu__group__title_1mqss_67","Dropdown__menu__group__content":"_Dropdown__menu__group__content_1mqss_75","Dropdown__menu__text":"_Dropdown__menu__text_1mqss_79","Dropdown__menu__option":"_Dropdown__menu__option_1mqss_88","Dropdown__menu__option--is-selected":"_Dropdown__menu__option--is-selected_1mqss_110","Dropdown__menu__option--is-disabled":"_Dropdown__menu__option--is-disabled_1mqss_114","Dropdown__menu__option__content":"_Dropdown__menu__option__content_1mqss_117","Dropdown__menu__option--is-dangerous":"_Dropdown__menu__option--is-dangerous_1mqss_122","Dropdown__menu__option--is-active":"_Dropdown__menu__option--is-active_1mqss_140","Dropdown__menu__option--is-valid":"_Dropdown__menu__option--is-valid_1mqss_149","Dropdown__menu__option--is-invalid":"_Dropdown__menu__option--is-invalid_1mqss_153","Dropdown__menu__option__icons":"_Dropdown__menu__option__icons_1mqss_196","Dropdown__menu__option__icon":"_Dropdown__menu__option__icon_1mqss_196","Dropdown__menu__option__icon--delete":"_Dropdown__menu__option__icon--delete_1mqss_243","Dropdown__menu__separator":"_Dropdown__menu__separator_1mqss_250"}

package/src/FieldError/styles.module.css

@@ -1,5 +1,5 @@
 .fieldError {
-  color: var(--alert-color);
+  color: var(--color--ink-danger);
   line-height: 1.2;
   font-size: var(--font-size-xs);
   margin-top: var(--spacing-s);

package/src/FieldError/styles.module.css.json

@@ -1 +1 @@
-{"fieldError":"_fieldError_qi0xk_1"}
+{"fieldError":"_fieldError_kqzsn_1"}

package/src/FieldHint/styles.module.css

@@ -1,5 +1,5 @@
 .fieldHint {
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   line-height: 1.2;
   font-size: var(--font-size-xs);
   margin-top: var(--spacing-s);

package/src/FieldHint/styles.module.css.json

@@ -1 +1 @@
-{"fieldHint":"_fieldHint_1avon_1"}
+{"fieldHint":"_fieldHint_1q1d1_1"}

package/src/FormLabel/styles.module.css

@@ -1,6 +1,6 @@
 .formLabel {
   display: flex;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
   margin-bottom: var(--spacing-s);
   align-items: center;
 
@@ -12,7 +12,7 @@
 }
 
 .formLabel--error {
-  color: var(--alert-color);
+  color: var(--color--ink-danger);
 }
 
 .formLabel__label {

package/src/FormLabel/styles.module.css.json

@@ -1 +1 @@
-{"formLabel":"_formLabel_tcjrv_1","formLabel__code":"_formLabel__code_tcjrv_8","formLabel--error":"_formLabel--error_tcjrv_14","formLabel__label":"_formLabel__label_tcjrv_18","formLabel__required":"_formLabel__required_tcjrv_30"}
+{"formLabel":"_formLabel_12h4v_1","formLabel__code":"_formLabel__code_12h4v_8","formLabel--error":"_formLabel--error_12h4v_14","formLabel__label":"_formLabel__label_12h4v_18","formLabel__required":"_formLabel__required_12h4v_30"}

package/src/HotKey/styles.module.css

@@ -17,6 +17,6 @@
 
 .hotKeyKey {
   padding: 5px 8px;
-  background: var(--light-color);
+  background: var(--color--primary-soft--surface);
   border-radius: 3px;
 }

package/src/HotKey/styles.module.css.json

@@ -1 +1 @@
-{"hotKey":"_hotKey_1eko8_1","label":"_label_1eko8_7","keys":"_keys_1eko8_12","hotKeyKey":"_hotKeyKey_1eko8_18"}
+{"hotKey":"_hotKey_17bh5_1","label":"_label_17bh5_7","keys":"_keys_17bh5_12","hotKeyKey":"_hotKeyKey_17bh5_18"}

package/src/Section/index.tsx

@@ -75,27 +75,28 @@ export function Section({
       className={cn(s.Section, { [s['Section--highlighted']]: highlighted })}
     >
       <div
-        className={cn(s.Section__header, headerClassName)}
+        className={cn(
+          s.Section__header,
+          { [s['Section__header--clickable']]: collapsible },
+          headerClassName,
+        )}
         style={headerStyle}
+        onClick={collapsible ? collapsible.onToggle : undefined}
       >
         <div
-          className={cn(
-            s.Section__title,
-
-            titleClassName,
-          )}
+          className={cn(s.Section__title, titleClassName)}
           style={titleStyle}
         >
-          {collapsible && (
-            <button
-              type="button"
-              className={cn(s.Section__arrow, {
-                [s['Section__arrow--is-open']]: collapsible.isOpen,
-              })}
-              onClick={collapsible.onToggle}
-            />
-          )}
-          <div className={s.Section__title__content}>{title}</div>
+          <span className={s.Section__title__content}>
+            {collapsible && (
+              <div
+                className={cn(s.Section__arrow, {
+                  [s['Section__arrow--is-open']]: collapsible.isOpen,
+                })}
+              />
+            )}
+            {title}
+          </span>
         </div>
       </div>
       {(!collapsible || collapsible.isOpen) && children}

package/src/Section/styles.module.css

@@ -1,5 +1,8 @@
 .Section {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
 }
 
 .Section--highlighted:before {
@@ -9,7 +12,7 @@
   right: -30px;
   bottom: -20px;
   left: -30px;
-  box-shadow: 0 0 0 4px var(--accent-color);
+  box-shadow: 0 0 0 4px var(--color--focus--border);
   border-radius: 4px;
   animation: pageContentSectionHighligh 4s 0.25s ease-in-out forwards;
   pointer-events: none;
@@ -19,44 +22,51 @@
 .Section__header {
   margin-left: var(--negative-spacing-l);
   margin-right: var(--negative-spacing-l);
-  margin-bottom: var(--spacing-l);
-  position: relative;
+}
 
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: var(--border-color);
-    z-index: 1;
+.Section__header--clickable {
+  cursor: pointer;
+  user-select: none;
+
+  &:hover .Section__arrow:before {
+    opacity: 0.7;
   }
 }
 
 .Section__title {
-  font-size: var(--font-size-l);
-  font-weight: var(--font-weight-bold);
-  margin-left: var(--spacing-m);
-  margin-right: var(--spacing-l);
-  padding-left: var(--spacing-m);
-  padding-right: var(--spacing-m);
-  background-color: white;
-  position: relative;
-  z-index: 2;
-  display: inline-flex;
+  display: flex;
+  gap: var(--spacing-m);
   align-items: center;
+
+  &:before,
+  &:after {
+    height: 1px;
+    content: '';
+    background-color: var(--color--border);
+  }
+
+  &:before {
+    width: calc(var(--spacing-l) - var(--spacing-m));
+  }
+
+  &:after {
+    flex: 1;
+    margin-right: var(--spacing-l);
+  }
 }
 
 .Section__title__content {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-bold);
 }
 
 .Section__arrow {
-  all: initial;
+  position: relative;
   width: 15px;
   align-self: stretch;
-  cursor: pointer;
   margin-right: 0.3em;
 
   &:before {
@@ -66,17 +76,13 @@
     width: 0;
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
-    border-left: 6px solid var(--base-body-color);
-    left: 14px;
+    border-left: 6px solid var(--color--ink);
+    left: 6px;
     top: 50%;
     margin-top: -6px;
     transition: transform 0.2s ease-out;
     transform-origin: 50% 50%;
   }
-
-  &:hover:before {
-    opacity: 0.7;
-  }
 }
 
 .Section__arrow--is-open:before {
@@ -85,14 +91,14 @@
 
 @keyframes pageContentSectionHighligh {
   0% {
-    box-shadow: 0 0 0 4px var(--accent-color),
-      0 0 0 4px rgba(var(--accent-color-rgb-components), 0.7);
+    box-shadow: 0 0 0 4px var(--color--focus--border),
+      0 0 0 4px var(--color--focus--outline);
   }
   15% {
-    box-shadow: 0 0 0 4px var(--accent-color), 0 0 0 80px transparent;
+    box-shadow: 0 0 0 4px var(--color--focus--border), 0 0 0 80px transparent;
   }
   75% {
-    box-shadow: 0 0 0 4px var(--accent-color), 0 0 0 80px transparent;
+    box-shadow: 0 0 0 4px var(--color--focus--border), 0 0 0 80px transparent;
   }
   100% {
     box-shadow: 0 0 0 4px transparent, 0 0 0 80px transparent;

package/src/Section/styles.module.css.json

@@ -1 +1 @@
-{"Section":"_Section_zh95u_1","Section--highlighted":"_Section--highlighted_zh95u_5","pageContentSectionHighligh":"_pageContentSectionHighligh_zh95u_1","Section__header":"_Section__header_zh95u_19","Section__title":"_Section__title_zh95u_38","Section__title__content":"_Section__title__content_zh95u_52","Section__arrow":"_Section__arrow_zh95u_55","Section__arrow--is-open":"_Section__arrow--is-open_zh95u_82"}
+{"Section":"_Section_12uz1_1","Section--highlighted":"_Section--highlighted_12uz1_8","pageContentSectionHighligh":"_pageContentSectionHighligh_12uz1_1","Section__header":"_Section__header_12uz1_22","Section__header--clickable":"_Section__header--clickable_12uz1_27","Section__arrow":"_Section__arrow_12uz1_31","Section__title":"_Section__title_12uz1_36","Section__title__content":"_Section__title__content_12uz1_58","Section__arrow--is-open":"_Section__arrow--is-open_12uz1_88"}