@charcoal-ui/react 2.1.0 → 2.2.1

package/dist/index.js

@@ -359,6 +359,7 @@ var RadioInput = styled5.input.attrs({ type: "radio" })`
     display: block;
     box-sizing: border-box;
 
+    margin: 0;
     padding: 6px;
 
     width: 20px;
@@ -366,14 +367,14 @@ var RadioInput = styled5.input.attrs({ type: "radio" })`
 
     ${({ hasError = false }) => theme((o) => [
   o.borderRadius("oval"),
-  o.bg.text5.hover.press,
+  o.bg.surface1.hover.press,
   hasError && o.outline.assertive
 ])};
 
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme: theme4 }) => theme4.color.text4};
+      border-color: ${({ theme: theme4 }) => theme4.color.text3};
     }
 
     &:checked {
@@ -394,7 +395,7 @@ var RadioInput = styled5.input.attrs({ type: "radio" })`
   }
 `;
 var RadioLabel = styled5.div`
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 var StyledRadioGroup = styled5.div`
   display: grid;
@@ -550,7 +551,7 @@ var MultiSelectRoot = styled6.label`
 var MultiSelectLabel = styled6.div`
   display: flex;
   align-items: center;
-  ${theme((o) => [o.typography(14), o.font.text1])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 var MultiSelectInput = styled6.input.attrs({ type: "checkbox" })`
   &[type='checkbox'] {
@@ -672,6 +673,7 @@ function SwitchCheckbox(props) {
 var Label = styled7.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
+  align-items: center;
   gap: ${({ theme: theme4 }) => px3(theme4.spacing[4])};
   cursor: pointer;
   outline: 0;
@@ -683,7 +685,7 @@ var Label = styled7.label`
   }
 `;
 var LabelInner = styled7.div`
-  ${theme((o) => o.typography(14))}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 var SwitchInput = styled7.input.attrs({
   type: "checkbox"
@@ -1380,7 +1382,6 @@ var ModalButtons = styled11.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-import { transparentize } from "polished";
 import React13, { useImperativeHandle, useRef as useRef4 } from "react";
 import styled12, { keyframes } from "styled-components";
 function LoadingSpinner({
@@ -1397,8 +1398,11 @@ var LoadingSpinnerRoot = styled12.div.attrs({ role: "progressbar" })`
   font-size: ${(props) => props.size}px;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
-  background-color: ${({ theme: theme4, transparent }) => transparent ? "transparent" : transparentize(0.32, theme4.color.background1)};
-  color: ${({ theme: theme4 }) => theme4.color.text4};
+  opacity: 0.84;
+  ${({ transparent }) => theme((o) => [
+  o.font.text4,
+  transparent ? o.bg.transparent : o.bg.background1
+])}
 `;
 var scaleout = keyframes`
   from {
@@ -3862,6 +3866,7 @@ var OptionRoot = styled13.li`
 `;
 var OptionCheckIcon = styled13(Icon_default)`
   visibility: hidden;
+  ${theme((o) => [o.font.text2])}
 
   ${({ isSelected }) => isSelected && css5`
       visibility: visible;
@@ -3869,7 +3874,7 @@ var OptionCheckIcon = styled13(Icon_default)`
 `;
 var OptionText = styled13.span`
   display: block;
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 
 // src/components/DropdownSelector/Popover.tsx
@@ -3962,7 +3967,7 @@ var DropdownSelector = ({
       isDisabled: disabled,
       autoComplete
     }
-  ), /* @__PURE__ */ React16.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ React16.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ React16.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React16.createElement(Icon_default, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ React16.createElement(DropdownPopover, { open: state.isOpen, onClose: () => state.close() }, /* @__PURE__ */ React16.createElement(Listbox_default, { ...menuProps, state, mode }))), hasAssertiveText && /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React16.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ React16.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ React16.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React16.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ React16.createElement(DropdownPopover, { open: state.isOpen, onClose: () => state.close() }, /* @__PURE__ */ React16.createElement(Listbox_default, { ...menuProps, state, mode }))), hasAssertiveText && /* @__PURE__ */ React16.createElement(
     AssertiveText,
     {
       invalid,
@@ -4018,11 +4023,14 @@ var DropdownButtonText = styled14.span`
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
+var DropdownButtonIcon = styled14(Icon_default)`
+  ${theme((o) => [o.font.text2])}
+`;
 var AssertiveText = styled14.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
-  invalid && o.font.assertive
+  invalid ? o.font.assertive : o.font.text2
 ])}
 `;
 var DropdownPopover = styled14(Popover_default)`
@@ -4236,7 +4244,7 @@ var CheckboxInputOverlay = styled16.div`
   ${({ checked }) => checked !== true && hiddenCss};
 `;
 var InputLabel = styled16.div`
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 
 // src/components/TagItem/index.tsx