@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib-esm/_VisuallyHidden.d.ts

@@ -1,7 +1,8 @@
 import type { SxProp } from './sx';
-interface Props {
+interface Props extends React.ComponentPropsWithoutRef<'span'> {
     isVisible?: boolean;
+    as?: React.ElementType;
 }
-declare const VisuallyHidden: import("styled-components").StyledComponent<"span", any, Props & SxProp, never>;
+declare function VisuallyHidden({ isVisible, children, as, className, ...rest }: Props & SxProp): import("react").JSX.Element;
 export default VisuallyHidden;
 //# sourceMappingURL=_VisuallyHidden.d.ts.map

package/lib-esm/_VisuallyHidden.js

@@ -1,26 +1,67 @@
-import styled from 'styled-components';
-import sx from './sx.js';
+import { c } from 'react-compiler-runtime';
+import classes from './_VisuallyHidden.module.css.js';
+import { clsx } from 'clsx';
+import { BoxWithFallback } from './internal/components/BoxWithFallback.js';
+import { jsx } from 'react/jsx-runtime';
 
-const VisuallyHidden = styled.span.withConfig({
-  displayName: "_VisuallyHidden__VisuallyHidden",
-  componentId: "sc-11jhm7a-0"
-})(["", ""], ({
-  isVisible = false
-}) => {
-  if (isVisible) {
-    return sx;
+function VisuallyHidden(t0) {
+  const $ = c(14);
+  let children;
+  let className;
+  let isVisible;
+  let rest;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      isVisible,
+      children,
+      as: t1,
+      className,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = isVisible;
+    $[4] = rest;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    isVisible = $[3];
+    rest = $[4];
+    t1 = $[5];
   }
-  return `
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-    `;
-});
+  const as = t1 === undefined ? "span" : t1;
+  const t2 = !isVisible;
+  let t3;
+  if ($[6] !== className || $[7] !== t2) {
+    t3 = clsx(className, {
+      [classes.InternalVisuallyHidden]: t2
+    });
+    $[6] = className;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== as || $[10] !== children || $[11] !== rest || $[12] !== t3) {
+    t4 = /*#__PURE__*/jsx(BoxWithFallback, {
+      as: as,
+      className: t3,
+      ...rest,
+      children: children
+    });
+    $[9] = as;
+    $[10] = children;
+    $[11] = rest;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+}
 
 export { VisuallyHidden as default };

package/lib-esm/_VisuallyHidden.module.css.js

@@ -0,0 +1,5 @@
+import './_VisuallyHidden-5c0a2499.css';
+
+var classes = {"InternalVisuallyHidden":"prc-src-InternalVisuallyHidden-nlR9R"};
+
+export { classes as default };

package/lib-esm/deprecated/ActionList/List.js

@@ -1,12 +1,10 @@
-import { c } from 'react-compiler-runtime';
 import React, { createElement } from 'react';
 import { Group } from './Group.js';
 import { Item } from './Item.js';
 import { Divider } from './Divider.js';
-import styled from 'styled-components';
-import { get } from '../../constants.js';
 import { hasActiveDescendantAttribute } from '@primer/behaviors';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { BoxWithFallback } from '../../internal/components/BoxWithFallback.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 /**
  * Asserts that the given value fulfills the `GroupedListProps` contract.
@@ -20,13 +18,16 @@ function isGroupedListProps(props) {
  * Contract for props passed to the `List` component.
  */
 
-const StyledList = styled.div.withConfig({
-  displayName: "List__StyledList",
-  componentId: "sc-hkz3q0-0"
-})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, get('colors.border.muted'));
+// Base styles for the List component
+const listStyles = {
+  fontSize: 'var(--text-body-size-medium, 14px)',
+  // 14px font-size * 1.428571429 = 20px line height
+  // TODO: When rem-based spacing on a 4px scale lands, replace hardcoded '20px'
+  lineHeight: '20px'
+};
 
 /**
- * Returns `sx` prop values for `List` children matching the given `List` style variation.
+ * Returns style objects for `List` children matching the given `List` style variation.
  * @param variant `List` style variation.
  */
 function useListVariant(variant = 'inset') {
@@ -34,7 +35,8 @@ function useListVariant(variant = 'inset') {
     case 'full':
       return {
         headerStyle: {
-          paddingX: get('space.2')
+          paddingLeft: 'var(--base-size-8, 8px)',
+          paddingRight: 'var(--base-size-8, 8px)'
         },
         itemStyle: {
           borderRadius: 0
@@ -43,13 +45,14 @@ function useListVariant(variant = 'inset') {
     default:
       return {
         firstGroupStyle: {
-          marginTop: get('space.2')
+          marginTop: 'var(--base-size-8, 8px)'
         },
         lastGroupStyle: {
-          marginBottom: get('space.2')
+          marginBottom: 'var(--base-size-8, 8px)'
         },
         itemStyle: {
-          marginX: get('space.2')
+          marginLeft: 'var(--base-size-8, 8px)',
+          marginRight: 'var(--base-size-8, 8px)'
         }
       };
   }
@@ -59,103 +62,113 @@ function useListVariant(variant = 'inset') {
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
 const List = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
-  const $ = c(25);
+  // Extract style prop to avoid conflicts with BoxWithFallback
+  const {
+    style,
+    ...restProps
+  } = props;
+  // Get style objects for `List` children matching the given `List` style variation.
   const {
     firstGroupStyle,
     lastGroupStyle,
     headerStyle,
     itemStyle
-  } = useListVariant(props.variant);
-  let t0;
-  if ($[0] !== props.renderGroup) {
-    t0 = groupProps => {
-      var _ref;
-      const GroupComponent = ((_ref = "renderGroup" in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : props.renderGroup) || Group;
-      return /*#__PURE__*/createElement(GroupComponent, {
-        ...groupProps,
-        key: groupProps.groupId
-      });
-    };
-    $[0] = props.renderGroup;
-    $[1] = t0;
+  } = useListVariant(restProps.variant);
+
+  /**
+   * Render a `Group` using the first of the following renderers that is defined:
+   * A `Group`-level or `List`-level custom `Group` renderer, or
+   * the default `Group` renderer.
+   */
+  const renderGroup = groupProps => {
+    var _ref;
+    const GroupComponent = ((_ref = 'renderGroup' in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : restProps.renderGroup) || Group;
+    return /*#__PURE__*/createElement(GroupComponent, {
+      ...groupProps,
+      key: groupProps.groupId
+    });
+  };
+
+  /**
+   * Render an `Item` using the first of the following renderers that is defined:
+   * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
+   * or the default `Item` renderer.
+   */
+  const renderItem = (itemProps, item, itemIndex) => {
+    var _ref2, _ref3, _itemProps$id;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || restProps.renderItem || Item;
+    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    return /*#__PURE__*/createElement(ItemComponent, {
+      showDivider: restProps.showItemDividers,
+      selectionVariant: restProps.selectionVariant,
+      ...itemProps,
+      key: key,
+      sx: {
+        ...itemStyle,
+        ...itemProps.sx
+      },
+      item: item
+    });
+  };
+
+  /**
+   * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
+   */
+  let groups = [];
+
+  // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
+  if (!isGroupedListProps(restProps)) {
+    // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
+    groups = [{
+      items: restProps.items.map((item_0, index) => renderItem(item_0, item_0, index)),
+      groupId: '0'
+    }];
   } else {
-    t0 = $[1];
-  }
-  const renderGroup = t0;
-  let t1;
-  if ($[2] !== itemStyle || $[3] !== props.renderItem || $[4] !== props.selectionVariant || $[5] !== props.showItemDividers) {
-    t1 = (itemProps, item, itemIndex) => {
-      var _ref2, _ref3, _itemProps$id;
-      const ItemComponent = "renderItem" in itemProps && itemProps.renderItem || props.renderItem || Item;
-      const key = (_ref2 = (_ref3 = "key" in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
-      return /*#__PURE__*/createElement(ItemComponent, {
-        showDivider: props.showItemDividers,
-        selectionVariant: props.selectionVariant,
-        ...itemProps,
-        key: key,
-        sx: {
-          ...itemStyle,
-          ...itemProps.sx
-        },
-        item: item
+    // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
+
+    /**
+     * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
+     */
+    const groupMap = restProps.groupMetadata.reduce((groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata), new Map());
+    for (const itemProps_0 of restProps.items) {
+      var _group$items$length, _group$items, _group$items2;
+      // Look up the group associated with the current item.
+      const group = groupMap.get(itemProps_0.groupId);
+      const itemIndex_0 = (_group$items$length = group === null || group === void 0 ? void 0 : (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0;
+
+      // Upsert the group to include the current item (rendered).
+      groupMap.set(itemProps_0.groupId, {
+        ...group,
+        items: [...((_group$items2 = group === null || group === void 0 ? void 0 : group.items) !== null && _group$items2 !== void 0 ? _group$items2 : []), renderItem({
+          showDivider: group === null || group === void 0 ? void 0 : group.showItemDividers,
+          ...(group && 'renderItem' in group && {
+            renderItem: group.renderItem
+          }),
+          ...itemProps_0
+        }, itemProps_0, itemIndex_0)]
       });
-    };
-    $[2] = itemStyle;
-    $[3] = props.renderItem;
-    $[4] = props.selectionVariant;
-    $[5] = props.showItemDividers;
-    $[6] = t1;
-  } else {
-    t1 = $[6];
+    }
+    groups = [...groupMap.values()];
   }
-  const renderItem = t1;
-  let T0;
-  let t2;
-  let t3;
-  let t4;
-  if ($[7] !== firstGroupStyle || $[8] !== forwardedRef || $[9] !== headerStyle || $[10] !== lastGroupStyle || $[11] !== props || $[12] !== renderGroup || $[13] !== renderItem) {
-    let groups = [];
-    if (!isGroupedListProps(props)) {
-      let t5;
-      if ($[18] !== renderItem) {
-        t5 = (item_0, index) => renderItem(item_0, item_0, index);
-        $[18] = renderItem;
-        $[19] = t5;
-      } else {
-        t5 = $[19];
+  return /*#__PURE__*/jsx(BoxWithFallback, {
+    ...restProps,
+    ref: forwardedRef,
+    style: {
+      ...listStyles,
+      ...(style || {})
+    },
+    sx: {
+      [`&[${hasActiveDescendantAttribute}], &:focus-within`]: {
+        '--item-hover-bg-override': 'none',
+        '--item-hover-divider-border-color-override': 'var(--borderColor-muted)'
       }
-      groups = [{
-        items: props.items.map(t5),
-        groupId: "0"
-      }];
-    } else {
-      const groupMap = props.groupMetadata.reduce(_temp, new Map());
-      for (const itemProps_0 of props.items) {
-        var _group$items$length, _group$items, _group$items2;
-        const group = groupMap.get(itemProps_0.groupId);
-        const itemIndex_0 = (_group$items$length = group === null || group === void 0 ? void 0 : (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0;
-        groupMap.set(itemProps_0.groupId, {
-          ...group,
-          items: [...((_group$items2 = group === null || group === void 0 ? void 0 : group.items) !== null && _group$items2 !== void 0 ? _group$items2 : []), renderItem({
-            showDivider: group === null || group === void 0 ? void 0 : group.showItemDividers,
-            ...(group && "renderItem" in group && {
-              renderItem: group.renderItem
-            }),
-            ...itemProps_0
-          }, itemProps_0, itemIndex_0)]
-        });
-      }
-      groups = [...groupMap.values()];
-    }
-    T0 = StyledList;
-    t2 = props;
-    t3 = forwardedRef;
-    t4 = groups.map((t5, index_0) => {
-      const {
-        header,
-        ...groupProps_0
-      } = t5;
-      const hasFilledHeader = (header === null || header === void 0 ? void 0 : header.variant) === "filled";
+    },
+    children: groups.map(({
+      header,
+      ...groupProps_0
+    }, index_0) => {
+      const hasFilledHeader = (header === null || header === void 0 ? void 0 : header.variant) === 'filled';
       const shouldShowDivider = index_0 > 0 && !hasFilledHeader;
       return /*#__PURE__*/jsxs(React.Fragment, {
         children: [shouldShowDivider ? /*#__PURE__*/jsx(Divider, {}, `${groupProps_0.groupId}-divider`) : null, renderGroup({
@@ -178,44 +191,9 @@ const List = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
           ...groupProps_0
         })]
       }, groupProps_0.groupId);
-    });
-    $[7] = firstGroupStyle;
-    $[8] = forwardedRef;
-    $[9] = headerStyle;
-    $[10] = lastGroupStyle;
-    $[11] = props;
-    $[12] = renderGroup;
-    $[13] = renderItem;
-    $[14] = T0;
-    $[15] = t2;
-    $[16] = t3;
-    $[17] = t4;
-  } else {
-    T0 = $[14];
-    t2 = $[15];
-    t3 = $[16];
-    t4 = $[17];
-  }
-  let t5;
-  if ($[20] !== T0 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4) {
-    t5 = /*#__PURE__*/jsx(T0, {
-      ...t2,
-      ref: t3,
-      children: t4
-    });
-    $[20] = T0;
-    $[21] = t2;
-    $[22] = t3;
-    $[23] = t4;
-    $[24] = t5;
-  } else {
-    t5 = $[24];
-  }
-  return t5;
+    })
+  });
 });
 List.displayName = 'ActionList';
-function _temp(groupAccumulator, groupMetadata) {
-  return groupAccumulator.set(groupMetadata.groupId, groupMetadata);
-}
 
 export { List };

package/lib-esm/deprecated/ActionMenu.js

@@ -117,11 +117,10 @@ const ActionMenuBase = t0 => {
   }
   const renderMenuAnchor = t4;
   let t5;
-  let t6;
   if ($[17] !== items || $[18] !== onAction || $[19] !== onClose) {
-    let t7;
+    let t6;
     if ($[21] !== onAction || $[22] !== onClose) {
-      t7 = item => ({
+      t6 = item => ({
         ...item,
         role: "menuitem",
         onAction: (props_0, event) => {
@@ -135,43 +134,42 @@ const ActionMenuBase = t0 => {
       });
       $[21] = onAction;
       $[22] = onClose;
-      $[23] = t7;
+      $[23] = t6;
     } else {
-      t7 = $[23];
+      t6 = $[23];
     }
-    t6 = items.map(t7);
+    t5 = items.map(t6);
     $[17] = items;
     $[18] = onAction;
     $[19] = onClose;
-    $[20] = t6;
+    $[20] = t5;
   } else {
-    t6 = $[20];
+    t5 = $[20];
   }
-  t5 = t6;
   const itemsToRender = t5;
-  let t7;
+  let t6;
   if ($[24] !== itemsToRender || $[25] !== listProps) {
-    t7 = /*#__PURE__*/jsx(List, {
+    t6 = /*#__PURE__*/jsx(List, {
       ...listProps,
       role: "menu",
       items: itemsToRender
     });
     $[24] = itemsToRender;
     $[25] = listProps;
-    $[26] = t7;
+    $[26] = t6;
   } else {
-    t7 = $[26];
+    t6 = $[26];
   }
-  let t8;
-  if ($[27] !== anchorRef || $[28] !== combinedOpenState || $[29] !== onClose || $[30] !== onOpen || $[31] !== overlayProps || $[32] !== renderMenuAnchor || $[33] !== t7) {
-    t8 = /*#__PURE__*/jsx(AnchoredOverlay, {
+  let t7;
+  if ($[27] !== anchorRef || $[28] !== combinedOpenState || $[29] !== onClose || $[30] !== onOpen || $[31] !== overlayProps || $[32] !== renderMenuAnchor || $[33] !== t6) {
+    t7 = /*#__PURE__*/jsx(AnchoredOverlay, {
       renderAnchor: renderMenuAnchor,
       anchorRef: anchorRef,
       open: combinedOpenState,
       onOpen: onOpen,
       onClose: onClose,
       overlayProps: overlayProps,
-      children: t7
+      children: t6
     });
     $[27] = anchorRef;
     $[28] = combinedOpenState;
@@ -179,12 +177,12 @@ const ActionMenuBase = t0 => {
     $[30] = onOpen;
     $[31] = overlayProps;
     $[32] = renderMenuAnchor;
-    $[33] = t7;
-    $[34] = t8;
+    $[33] = t6;
+    $[34] = t7;
   } else {
-    t8 = $[34];
+    t7 = $[34];
   }
-  return t8;
+  return t7;
 };
 ActionMenuBase.displayName = 'ActionMenu';
 

package/lib-esm/deprecated/UnderlineNav/UnderlineNav.d.ts

@@ -1,8 +1,7 @@
 import type { To } from 'history';
 import type React from 'react';
-import type { SxProp } from '../../sx';
 import type { ComponentProps } from '../../utils/types';
-declare const UnderlineNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
+declare const UnderlineNavBase: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export type UnderlineNavProps = {
     actions?: React.ReactNode;
     align?: 'right';
@@ -13,7 +12,7 @@ declare function UnderlineNav({ actions, className, align, children, full, label
 type StyledUnderlineNavLinkProps = {
     to?: To;
     selected?: boolean;
-} & SxProp;
+};
 declare const UnderlineNavLink: import("styled-components").StyledComponent<"a", any, StyledUnderlineNavLinkProps, never>;
 export type UnderlineNavLinkProps = ComponentProps<typeof UnderlineNavLink>;
 /**

package/lib-esm/deprecated/UnderlineNav/UnderlineNav.js

@@ -2,7 +2,6 @@ import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import styled from 'styled-components';
 import { get } from '../../constants.js';
-import sx from '../../sx.js';
 import getGlobalFocusStyles from '../../internal/utils/getGlobalFocusStyles.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -11,7 +10,7 @@ const SELECTED_CLASS = 'PRC-selected';
 const UnderlineNavBase = styled.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
   componentId: "sc-11ejk33-0"
-})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.PRC-UnderlineNav--right{justify-content:flex-end;.PRC-UnderlineNav-item{margin-right:0;margin-left:", ";}.PRC-UnderlineNav-actions{flex:1 1 auto;}}&.PRC-UnderlineNav--full{display:block;}.PRC-UnderlineNav-body{display:flex;margin-bottom:-1px;}.PRC-UnderlineNav-actions{align-self:center;}", ";"], get('colors.border.muted'), get('space.3'), sx);
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.PRC-UnderlineNav--right{justify-content:flex-end;.PRC-UnderlineNav-item{margin-right:0;margin-left:", ";}.PRC-UnderlineNav-actions{flex:1 1 auto;}}&.PRC-UnderlineNav--full{display:block;}.PRC-UnderlineNav-body{display:flex;margin-bottom:-1px;}.PRC-UnderlineNav-actions{align-self:center;}"], get('colors.border.muted'), get('space.3'));
 function UnderlineNav(t0) {
   const $ = c(24);
   let actions;
@@ -113,7 +112,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
   componentId: "sc-11ejk33-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:border-bottom-color 0.2s ease;.PRC-UnderlineNav-octicon{color:", ";}}&.PRC-selected{color:", ";border-bottom-color:", ";.PRC-UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), getGlobalFocusStyles('-8px'), sx);
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:border-bottom-color 0.2s ease;.PRC-UnderlineNav-octicon{color:", ";}}&.PRC-selected{color:", ";border-bottom-color:", ";.PRC-UnderlineNav-octicon{color:", ";}}", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), getGlobalFocusStyles('-8px'));
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 /**
  * @deprecated UnderlineNav is deprecated and will be replaced by the draft `UnderlineNav` in the next major release. See https://primer.style/react/drafts/UnderlineNav2 for more details.

package/lib-esm/deprecated/index.d.ts

@@ -23,4 +23,6 @@ export { default as TabNav } from '../TabNav';
 export type { TabNavProps, TabNavLinkProps } from '../TabNav';
 export { default as Tooltip } from '../Tooltip/Tooltip';
 export type { TooltipProps } from '../Tooltip/Tooltip';
+export { default as PointerBox } from '../PointerBox';
+export type { PointerBoxProps } from '../PointerBox';
 //# sourceMappingURL=index.d.ts.map

package/lib-esm/deprecated/index.js

@@ -5,6 +5,7 @@ export { default as Tooltip } from '../Tooltip/Tooltip.js';
 export { default as FilteredSearch } from './FilteredSearch/FilteredSearch.js';
 export { default as Octicon } from '../Octicon/Octicon.js';
 export { default as Pagehead } from '../Pagehead/Pagehead.js';
+export { default as PointerBox } from '../PointerBox/PointerBox.js';
 export { default as UnderlineNav } from './UnderlineNav/UnderlineNav.js';
 export { default as Dialog } from '../DialogV1/Dialog.js';
 export { default as TabNav } from '../TabNav/TabNav.js';

package/lib-esm/experimental/IssueLabel/IssueLabel-6581d1bd.css

@@ -0,0 +1,2 @@
+@layer primer.components.IssueLabel{.prc-IssueLabel-IssueLabel-WJ5y-{align-items:center;background-color:var(--label-bgColor-rest);border:0;border-radius:var(--borderRadius-full,624.9375rem);box-shadow:var(--boxShadow-thin,inset 0 0 0 .0625rem) transparent;color:var(--label-fgColor);display:inline-flex;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);min-height:var(--base-size-20,1.25rem);padding-block:0;padding-inline:var(--base-size-8,.5rem);white-space:nowrap}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a){-webkit-text-decoration:none;text-decoration:none}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):hover{background-color:var(--label-bgColor-hover);color:var(--label-fgColor-hover);cursor:pointer}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):active{background-color:var(--label-bgColor-active);color:var(--label-fgColor-active)}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=pink]{--label-bgColor-rest:var(--label-pink-bgColor-rest,#ffe5f1);--label-bgColor-hover:var(--label-pink-bgColor-hover,#fdc9e2);--label-bgColor-active:var(--label-pink-bgColor-active,#f8a5cf);--label-fgColor:var(--label-pink-fgColor-rest,#b12f79);--label-fgColor-hover:var(--label-pink-fgColor-hover,#8e2e66);--label-fgColor-active:var(--label-pink-fgColor-active,#6e2b53)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=plum]{--label-bgColor-rest:var(--label-plum-bgColor-rest,#f8e5ff);--label-bgColor-hover:var(--label-plum-bgColor-hover,#f0cdfe);--label-bgColor-active:var(--label-plum-bgColor-active,#e2a7fb);--label-fgColor:var(--label-plum-fgColor-rest,#961edc);--label-fgColor-hover:var(--label-plum-fgColor-hover,#7d1eb8);--label-fgColor-active:var(--label-plum-fgColor-active,#651d96)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=purple]{--label-bgColor-rest:var(--label-purple-bgColor-rest,#f1e5ff);--label-bgColor-hover:var(--label-purple-bgColor-hover,#e6d2fe);--label-bgColor-active:var(--label-purple-bgColor-active,#d1b1fc);--label-fgColor:var(--label-purple-fgColor-rest,#783ae4);--label-fgColor-hover:var(--label-purple-fgColor-hover,#6223d7);--label-fgColor-active:var(--label-purple-fgColor-active,#4f21ab)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=indigo]{--label-bgColor-rest:var(--label-indigo-bgColor-rest,#e5e9ff);--label-bgColor-hover:var(--label-indigo-bgColor-hover,#d2d7fe);--label-bgColor-active:var(--label-indigo-bgColor-active,#b1b9fb);--label-fgColor:var(--label-indigo-fgColor-rest,#494edf);--label-fgColor-hover:var(--label-indigo-fgColor-hover,#393cd5);--label-fgColor-active:var(--label-indigo-fgColor-active,#2d2db4)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=blue]{--label-bgColor-rest:var(--label-blue-bgColor-rest,#d1f0ff);--label-bgColor-hover:var(--label-blue-bgColor-hover,#ade1ff);--label-bgColor-active:var(--label-blue-bgColor-active,#75c8ff);--label-fgColor:var(--label-blue-fgColor-rest,#005fcc);--label-fgColor-hover:var(--label-blue-fgColor-hover,#004db3);--label-fgColor-active:var(--label-blue-fgColor-active,#003d99)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=cyan]{--label-bgColor-rest:var(--label-cyan-bgColor-rest,#bdf4ff);--label-bgColor-hover:var(--label-cyan-bgColor-hover,#7ae9ff);--label-bgColor-active:var(--label-cyan-bgColor-active,#00d0fa);--label-fgColor:var(--label-cyan-fgColor-rest,#006a80);--label-fgColor-hover:var(--label-cyan-fgColor-hover,#00596b);--label-fgColor-active:var(--label-cyan-fgColor-active,#004857)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=teal]{--label-bgColor-rest:var(--label-teal-bgColor-rest,#c7f5ef);--label-bgColor-hover:var(--label-teal-bgColor-hover,#89ebe1);--label-bgColor-active:var(--label-teal-bgColor-active,#22d3c7);--label-fgColor:var(--label-teal-fgColor-rest,#106e75);--label-fgColor-hover:var(--label-teal-fgColor-hover,#0d5b63);--label-fgColor-active:var(--label-teal-fgColor-active,#0a4852)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=pine]{--label-bgColor-rest:var(--label-pine-bgColor-rest,#bff8db);--label-bgColor-hover:var(--label-pine-bgColor-hover,#80efb9);--label-bgColor-active:var(--label-pine-bgColor-active,#1dd781);--label-fgColor:var(--label-pine-fgColor-rest,#156f4b);--label-fgColor-hover:var(--label-pine-fgColor-hover,#135d41);--label-fgColor-active:var(--label-pine-fgColor-active,#114b36)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=green]{--label-bgColor-rest:var(--label-green-bgColor-rest,#caf7ca);--label-bgColor-hover:var(--label-green-bgColor-hover,#9ceda0);--label-bgColor-active:var(--label-green-bgColor-active,#54d961);--label-fgColor:var(--label-green-fgColor-rest,#2b6e3f);--label-fgColor-hover:var(--label-green-fgColor-hover,#285c3b);--label-fgColor-active:var(--label-green-fgColor-active,#254b34)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=lime]{--label-bgColor-rest:var(--label-lime-bgColor-rest,#e3f2b5);--label-bgColor-hover:var(--label-lime-bgColor-hover,#c7e580);--label-bgColor-active:var(--label-lime-bgColor-active,#9bd039);--label-fgColor:var(--label-lime-fgColor-rest,#476c28);--label-fgColor-hover:var(--label-lime-fgColor-hover,#3a5b25);--label-fgColor-active:var(--label-lime-fgColor-active,#2f4a21)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=olive]{--label-bgColor-rest:var(--label-olive-bgColor-rest,#f0f0ad);--label-bgColor-hover:var(--label-olive-bgColor-hover,#dbe170);--label-bgColor-active:var(--label-olive-bgColor-active,#b9c832);--label-fgColor:var(--label-olive-fgColor-rest,#56682c);--label-fgColor-hover:var(--label-olive-fgColor-hover,#495a2b);--label-fgColor-active:var(--label-olive-fgColor-active,#3b4927)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=lemon]{--label-bgColor-rest:var(--label-lemon-bgColor-rest,#f7eea1);--label-bgColor-hover:var(--label-lemon-bgColor-hover,#f0db3d);--label-bgColor-active:var(--label-lemon-bgColor-active,#d8bd0e);--label-fgColor:var(--label-lemon-fgColor-rest,#786002);--label-fgColor-hover:var(--label-lemon-fgColor-hover,#654f01);--label-fgColor-active:var(--label-lemon-fgColor-active,#523f00)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=yellow]{--label-bgColor-rest:var(--label-yellow-bgColor-rest,#ffec9e);--label-bgColor-hover:var(--label-yellow-bgColor-hover,#ffd642);--label-bgColor-active:var(--label-yellow-bgColor-active,#ebb400);--label-fgColor:var(--label-yellow-fgColor-rest,#805900);--label-fgColor-hover:var(--label-yellow-fgColor-hover,#704d00);--label-fgColor-active:var(--label-yellow-fgColor-active,#5c3d00)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=orange]{--label-bgColor-rest:var(--label-orange-bgColor-rest,#ffe7d1);--label-bgColor-hover:var(--label-orange-bgColor-hover,#fecfaa);--label-bgColor-active:var(--label-orange-bgColor-active,#fbaf74);--label-fgColor:var(--label-orange-fgColor-rest,#a24610);--label-fgColor-hover:var(--label-orange-fgColor-hover,#8d3c11);--label-fgColor-active:var(--label-orange-fgColor-active,#70300f)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=red]{--label-bgColor-rest:var(--label-red-bgColor-rest,#ffe2e0);--label-bgColor-hover:var(--label-red-bgColor-hover,#fecdcd);--label-bgColor-active:var(--label-red-bgColor-active,#fda5a7);--label-fgColor:var(--label-red-fgColor-rest,#c50d28);--label-fgColor-hover:var(--label-red-fgColor-hover,#a60c29);--label-fgColor-active:var(--label-red-fgColor-active,#880c27)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=coral]{--label-bgColor-rest:var(--label-coral-bgColor-rest,#ffe5db);--label-bgColor-hover:var(--label-coral-bgColor-hover,#fecebe);--label-bgColor-active:var(--label-coral-bgColor-active,#fcab92);--label-fgColor:var(--label-coral-fgColor-rest,#ba2e12);--label-fgColor-hover:var(--label-coral-fgColor-hover,#9b2712);--label-fgColor-active:var(--label-coral-fgColor-active,#7e2011)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=gray]{--label-bgColor-rest:var(--label-gray-bgColor-rest,#e8ecf2);--label-bgColor-hover:var(--label-gray-bgColor-hover,#d2dae4);--label-bgColor-active:var(--label-gray-bgColor-active,#b4c0cf);--label-fgColor:var(--label-gray-fgColor-rest,#5c6570);--label-fgColor-hover:var(--label-gray-fgColor-hover,#4e535a);--label-fgColor-active:var(--label-gray-fgColor-active,#424448)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=brown]{--label-bgColor-rest:var(--label-brown-bgColor-rest,#eeeae2);--label-bgColor-hover:var(--label-brown-bgColor-hover,#dfd7c8);--label-bgColor-active:var(--label-brown-bgColor-active,#cbbda4);--label-fgColor:var(--label-brown-fgColor-rest,#755f43);--label-fgColor-hover:var(--label-brown-fgColor-hover,#64513a);--label-fgColor-active:var(--label-brown-fgColor-active,#51412f)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=auburn]{--label-bgColor-rest:var(--label-auburn-bgColor-rest,#f2e9e9);--label-bgColor-hover:var(--label-auburn-bgColor-hover,#e6d6d5);--label-bgColor-active:var(--label-auburn-bgColor-active,#d4b7b5);--label-fgColor:var(--label-auburn-fgColor-rest,#8a5551);--label-fgColor-hover:var(--label-auburn-fgColor-hover,#744744);--label-fgColor-active:var(--label-auburn-fgColor-active,#5d3937)}}
+/*# sourceMappingURL=IssueLabel-6581d1bd.css.map */

package/lib-esm/experimental/IssueLabel/IssueLabel-6581d1bd.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/experimental/IssueLabel/IssueLabel.module.css","../../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"AAAA,oCACE,iCAgBE,kBAAmB,CANnB,0CAA2C,CAC3C,QAAS,CACT,kDAAuC,CAGvC,iEAA6C,CAR7C,0BAA2B,CAN3B,mBAAoB,CAEpB,4CAAsC,CACtC,gDAA6C,CAC7C,oDAA8C,CAH9C,sCAA+B,CAgB/B,eAAgB,CADhB,uCAAkC,CATlC,kBA6MF,CAjME,iDACE,4BAAqB,CAArB,oBAoBF,CAlBE,uDAKE,2CAA4C,CAH5C,gCAAiC,CACjC,cAGF,CAEA,wDAIE,4CAA6C,CAF7C,iCAGF,CAEA,+DCpCJ,eAAgB,CAFhB,kEAAgC,CAChC,kBDuCI,CAGF,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEA,mDACE,0DAAmD,CACnD,4DAAqD,CACrD,8DAAuD,CACvD,qDAA8C,CAC9C,4DAAqD,CACrD,8DACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEJ","file":"IssueLabel-6581d1bd.css","sourcesContent":["@layer primer.components.IssueLabel {\n  .IssueLabel {\n    display: inline-flex;\n    min-height: var(--base-size-20);\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    line-height: var(--text-body-lineHeight-small);\n    /* stylelint-disable-next-line primer/colors */\n    color: var(--label-fgColor);\n    white-space: nowrap;\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--label-bgColor-rest);\n    border: 0;\n    border-radius: var(--borderRadius-full);\n\n    /* use color var for box-shadow (border) in future for high contrast themes */\n    box-shadow: var(--boxShadow-thin) transparent;\n    align-items: center;\n    padding-inline: var(--base-size-8);\n    padding-block: 0;\n\n    &:where(button, a) {\n      text-decoration: none;\n\n      &:hover {\n        /* stylelint-disable-next-line primer/colors */\n        color: var(--label-fgColor-hover);\n        cursor: pointer;\n        /* stylelint-disable-next-line primer/colors */\n        background-color: var(--label-bgColor-hover);\n      }\n\n      &:active {\n        /* stylelint-disable-next-line primer/colors */\n        color: var(--label-fgColor-active);\n        /* stylelint-disable-next-line primer/colors */\n        background-color: var(--label-bgColor-active);\n      }\n\n      &:focus-visible {\n        @mixin focusOutline 2px;\n      }\n    }\n\n    &[data-variant='pink'] {\n      --label-bgColor-rest: var(--label-pink-bgColor-rest);\n      --label-bgColor-hover: var(--label-pink-bgColor-hover);\n      --label-bgColor-active: var(--label-pink-bgColor-active);\n      --label-fgColor: var(--label-pink-fgColor-rest);\n      --label-fgColor-hover: var(--label-pink-fgColor-hover);\n      --label-fgColor-active: var(--label-pink-fgColor-active);\n    }\n\n    &[data-variant='plum'] {\n      --label-bgColor-rest: var(--label-plum-bgColor-rest);\n      --label-bgColor-hover: var(--label-plum-bgColor-hover);\n      --label-bgColor-active: var(--label-plum-bgColor-active);\n      --label-fgColor: var(--label-plum-fgColor-rest);\n      --label-fgColor-hover: var(--label-plum-fgColor-hover);\n      --label-fgColor-active: var(--label-plum-fgColor-active);\n    }\n\n    &[data-variant='purple'] {\n      --label-bgColor-rest: var(--label-purple-bgColor-rest);\n      --label-bgColor-hover: var(--label-purple-bgColor-hover);\n      --label-bgColor-active: var(--label-purple-bgColor-active);\n      --label-fgColor: var(--label-purple-fgColor-rest);\n      --label-fgColor-hover: var(--label-purple-fgColor-hover);\n      --label-fgColor-active: var(--label-purple-fgColor-active);\n    }\n\n    &[data-variant='indigo'] {\n      --label-bgColor-rest: var(--label-indigo-bgColor-rest);\n      --label-bgColor-hover: var(--label-indigo-bgColor-hover);\n      --label-bgColor-active: var(--label-indigo-bgColor-active);\n      --label-fgColor: var(--label-indigo-fgColor-rest);\n      --label-fgColor-hover: var(--label-indigo-fgColor-hover);\n      --label-fgColor-active: var(--label-indigo-fgColor-active);\n    }\n\n    &[data-variant='blue'] {\n      --label-bgColor-rest: var(--label-blue-bgColor-rest);\n      --label-bgColor-hover: var(--label-blue-bgColor-hover);\n      --label-bgColor-active: var(--label-blue-bgColor-active);\n      --label-fgColor: var(--label-blue-fgColor-rest);\n      --label-fgColor-hover: var(--label-blue-fgColor-hover);\n      --label-fgColor-active: var(--label-blue-fgColor-active);\n    }\n\n    &[data-variant='cyan'] {\n      --label-bgColor-rest: var(--label-cyan-bgColor-rest);\n      --label-bgColor-hover: var(--label-cyan-bgColor-hover);\n      --label-bgColor-active: var(--label-cyan-bgColor-active);\n      --label-fgColor: var(--label-cyan-fgColor-rest);\n      --label-fgColor-hover: var(--label-cyan-fgColor-hover);\n      --label-fgColor-active: var(--label-cyan-fgColor-active);\n    }\n\n    &[data-variant='teal'] {\n      --label-bgColor-rest: var(--label-teal-bgColor-rest);\n      --label-bgColor-hover: var(--label-teal-bgColor-hover);\n      --label-bgColor-active: var(--label-teal-bgColor-active);\n      --label-fgColor: var(--label-teal-fgColor-rest);\n      --label-fgColor-hover: var(--label-teal-fgColor-hover);\n      --label-fgColor-active: var(--label-teal-fgColor-active);\n    }\n\n    &[data-variant='pine'] {\n      --label-bgColor-rest: var(--label-pine-bgColor-rest);\n      --label-bgColor-hover: var(--label-pine-bgColor-hover);\n      --label-bgColor-active: var(--label-pine-bgColor-active);\n      --label-fgColor: var(--label-pine-fgColor-rest);\n      --label-fgColor-hover: var(--label-pine-fgColor-hover);\n      --label-fgColor-active: var(--label-pine-fgColor-active);\n    }\n\n    &[data-variant='green'] {\n      --label-bgColor-rest: var(--label-green-bgColor-rest);\n      --label-bgColor-hover: var(--label-green-bgColor-hover);\n      --label-bgColor-active: var(--label-green-bgColor-active);\n      --label-fgColor: var(--label-green-fgColor-rest);\n      --label-fgColor-hover: var(--label-green-fgColor-hover);\n      --label-fgColor-active: var(--label-green-fgColor-active);\n    }\n\n    &[data-variant='lime'] {\n      --label-bgColor-rest: var(--label-lime-bgColor-rest);\n      --label-bgColor-hover: var(--label-lime-bgColor-hover);\n      --label-bgColor-active: var(--label-lime-bgColor-active);\n      --label-fgColor: var(--label-lime-fgColor-rest);\n      --label-fgColor-hover: var(--label-lime-fgColor-hover);\n      --label-fgColor-active: var(--label-lime-fgColor-active);\n    }\n\n    &[data-variant='olive'] {\n      --label-bgColor-rest: var(--label-olive-bgColor-rest);\n      --label-bgColor-hover: var(--label-olive-bgColor-hover);\n      --label-bgColor-active: var(--label-olive-bgColor-active);\n      --label-fgColor: var(--label-olive-fgColor-rest);\n      --label-fgColor-hover: var(--label-olive-fgColor-hover);\n      --label-fgColor-active: var(--label-olive-fgColor-active);\n    }\n\n    &[data-variant='lemon'] {\n      --label-bgColor-rest: var(--label-lemon-bgColor-rest);\n      --label-bgColor-hover: var(--label-lemon-bgColor-hover);\n      --label-bgColor-active: var(--label-lemon-bgColor-active);\n      --label-fgColor: var(--label-lemon-fgColor-rest);\n      --label-fgColor-hover: var(--label-lemon-fgColor-hover);\n      --label-fgColor-active: var(--label-lemon-fgColor-active);\n    }\n\n    &[data-variant='yellow'] {\n      --label-bgColor-rest: var(--label-yellow-bgColor-rest);\n      --label-bgColor-hover: var(--label-yellow-bgColor-hover);\n      --label-bgColor-active: var(--label-yellow-bgColor-active);\n      --label-fgColor: var(--label-yellow-fgColor-rest);\n      --label-fgColor-hover: var(--label-yellow-fgColor-hover);\n      --label-fgColor-active: var(--label-yellow-fgColor-active);\n    }\n\n    &[data-variant='orange'] {\n      --label-bgColor-rest: var(--label-orange-bgColor-rest);\n      --label-bgColor-hover: var(--label-orange-bgColor-hover);\n      --label-bgColor-active: var(--label-orange-bgColor-active);\n      --label-fgColor: var(--label-orange-fgColor-rest);\n      --label-fgColor-hover: var(--label-orange-fgColor-hover);\n      --label-fgColor-active: var(--label-orange-fgColor-active);\n    }\n\n    &[data-variant='red'] {\n      --label-bgColor-rest: var(--label-red-bgColor-rest);\n      --label-bgColor-hover: var(--label-red-bgColor-hover);\n      --label-bgColor-active: var(--label-red-bgColor-active);\n      --label-fgColor: var(--label-red-fgColor-rest);\n      --label-fgColor-hover: var(--label-red-fgColor-hover);\n      --label-fgColor-active: var(--label-red-fgColor-active);\n    }\n\n    &[data-variant='coral'] {\n      --label-bgColor-rest: var(--label-coral-bgColor-rest);\n      --label-bgColor-hover: var(--label-coral-bgColor-hover);\n      --label-bgColor-active: var(--label-coral-bgColor-active);\n      --label-fgColor: var(--label-coral-fgColor-rest);\n      --label-fgColor-hover: var(--label-coral-fgColor-hover);\n      --label-fgColor-active: var(--label-coral-fgColor-active);\n    }\n\n    &[data-variant='gray'] {\n      --label-bgColor-rest: var(--label-gray-bgColor-rest);\n      --label-bgColor-hover: var(--label-gray-bgColor-hover);\n      --label-bgColor-active: var(--label-gray-bgColor-active);\n      --label-fgColor: var(--label-gray-fgColor-rest);\n      --label-fgColor-hover: var(--label-gray-fgColor-hover);\n      --label-fgColor-active: var(--label-gray-fgColor-active);\n    }\n\n    &[data-variant='brown'] {\n      --label-bgColor-rest: var(--label-brown-bgColor-rest);\n      --label-bgColor-hover: var(--label-brown-bgColor-hover);\n      --label-bgColor-active: var(--label-brown-bgColor-active);\n      --label-fgColor: var(--label-brown-fgColor-rest);\n      --label-fgColor-hover: var(--label-brown-fgColor-hover);\n      --label-fgColor-active: var(--label-brown-fgColor-active);\n    }\n\n    &[data-variant='auburn'] {\n      --label-bgColor-rest: var(--label-auburn-bgColor-rest);\n      --label-bgColor-hover: var(--label-auburn-bgColor-hover);\n      --label-bgColor-active: var(--label-auburn-bgColor-active);\n      --label-fgColor: var(--label-auburn-fgColor-rest);\n      --label-fgColor-hover: var(--label-auburn-fgColor-hover);\n      --label-fgColor-active: var(--label-auburn-fgColor-active);\n    }\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}