@charcoal-ui/react 2.1.0 → 2.2.1

package/dist/components/LoadingSpinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAS,EACT,OAAY,EACZ,WAAmB,GACpB;;;;CAAA,eAMA;AA6CD,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,eAAO,MAAM,kBAAkB,yFAmB7B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAI1D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAS,EACT,OAAY,EACZ,WAAmB,GACpB;;;;CAAA,eAMA;AA8CD,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,eAAO,MAAM,kBAAkB,yFAmB7B,CAAA"}

package/dist/components/Radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,oBAAY,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,YAAoB,EACpB,QAAgB,EAChB,QAAQ,GACT,EAAE,UAAU,eAwCZ;AAYD,eAAO,MAAM,UAAU;;;;UA2CtB,CAAA;AAMD,oBAAY,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AA+BF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,eA8BjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,oBAAY,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,YAAoB,EACpB,QAAgB,EAChB,QAAQ,GACT,EAAE,UAAU,eAwCZ;AAYD,eAAO,MAAM,UAAU;;;;UA4CtB,CAAA;AAMD,oBAAY,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AA+BF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,eA8BjB"}

package/dist/index.cjs

@@ -87,7 +87,7 @@ var import_overlays = require("@react-aria/overlays");
 
 // src/components/Button/index.tsx
 var import_react3 = __toESM(require("react"), 1);
-var import_styled_components3 = __toESM(require("styled-components"), 1);
+var import_styled_components3 = require("styled-components");
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -97,13 +97,13 @@ function unreachable(value) {
 }
 
 // src/styled.ts
-var import_styled_components = __toESM(require("styled-components"), 1);
+var import_styled_components = require("styled-components");
 var import_styled = require("@charcoal-ui/styled");
 var theme = (0, import_styled.createTheme)(import_styled_components.default);
 
 // src/components/Clickable/index.tsx
 var import_react2 = __toESM(require("react"), 1);
-var import_styled_components2 = __toESM(require("styled-components"), 1);
+var import_styled_components2 = require("styled-components");
 var import_utils = require("@charcoal-ui/utils");
 var Clickable = import_react2.default.forwardRef(
   function Clickable2(props, ref) {
@@ -274,7 +274,7 @@ function sizeToProps(size) {
 
 // src/components/IconButton/index.tsx
 var import_react4 = __toESM(require("react"), 1);
-var import_styled_components4 = __toESM(require("styled-components"), 1);
+var import_styled_components4 = require("styled-components");
 var IconButton = import_react4.default.forwardRef(
   function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
     validateIconSize(size, icon);
@@ -358,7 +358,7 @@ function validateIconSize(size, icon) {
 
 // src/components/Radio/index.tsx
 var import_react5 = __toESM(require("react"), 1);
-var import_styled_components5 = __toESM(require("styled-components"), 1);
+var import_styled_components5 = require("styled-components");
 var import_warning = __toESM(require("warning"), 1);
 var import_utils2 = require("@charcoal-ui/utils");
 function Radio({
@@ -416,6 +416,7 @@ var RadioInput = import_styled_components5.default.input.attrs({ type: "radio" }
     display: block;
     box-sizing: border-box;
 
+    margin: 0;
     padding: 6px;
 
     width: 20px;
@@ -423,14 +424,14 @@ var RadioInput = import_styled_components5.default.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 {
@@ -451,7 +452,7 @@ var RadioInput = import_styled_components5.default.input.attrs({ type: "radio" }
   }
 `;
 var RadioLabel = import_styled_components5.default.div`
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 var StyledRadioGroup = import_styled_components5.default.div`
   display: grid;
@@ -515,7 +516,7 @@ function RadioGroup({
 
 // src/components/MultiSelect/index.tsx
 var import_react7 = __toESM(require("react"), 1);
-var import_styled_components6 = __toESM(require("styled-components"), 1);
+var import_styled_components6 = require("styled-components");
 var import_warning2 = __toESM(require("warning"), 1);
 var import_utils3 = require("@charcoal-ui/utils");
 
@@ -607,7 +608,7 @@ var MultiSelectRoot = import_styled_components6.default.label`
 var MultiSelectLabel = import_styled_components6.default.div`
   display: flex;
   align-items: center;
-  ${theme((o) => [o.typography(14), o.font.text1])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 var MultiSelectInput = import_styled_components6.default.input.attrs({ type: "checkbox" })`
   &[type='checkbox'] {
@@ -706,7 +707,7 @@ function MultiSelectGroup({
 var import_switch = require("@react-aria/switch");
 var import_react8 = __toESM(require("react"), 1);
 var import_react_stately = require("react-stately");
-var import_styled_components7 = __toESM(require("styled-components"), 1);
+var import_styled_components7 = require("styled-components");
 var import_utils4 = require("@charcoal-ui/utils");
 function SwitchCheckbox(props) {
   const { disabled, className } = props;
@@ -729,6 +730,7 @@ function SwitchCheckbox(props) {
 var Label = import_styled_components7.default.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
+  align-items: center;
   gap: ${({ theme: theme4 }) => (0, import_utils4.px)(theme4.spacing[4])};
   cursor: pointer;
   outline: 0;
@@ -740,7 +742,7 @@ var Label = import_styled_components7.default.label`
   }
 `;
 var LabelInner = import_styled_components7.default.div`
-  ${theme((o) => o.typography(14))}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 var SwitchInput = import_styled_components7.default.input.attrs({
   type: "checkbox"
@@ -788,11 +790,11 @@ var SwitchInput = import_styled_components7.default.input.attrs({
 var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
 var import_react10 = __toESM(require("react"), 1);
-var import_styled_components9 = __toESM(require("styled-components"), 1);
+var import_styled_components9 = require("styled-components");
 
 // src/components/FieldLabel/index.tsx
 var import_react9 = __toESM(require("react"), 1);
-var import_styled_components8 = __toESM(require("styled-components"), 1);
+var import_styled_components8 = require("styled-components");
 var import_styled7 = require("@charcoal-ui/styled");
 var FieldLabel = import_react9.default.forwardRef(
   function FieldLabel2({
@@ -1221,7 +1223,7 @@ var Icon_default = Icon;
 // src/components/Modal/index.tsx
 var import_react12 = __toESM(require("react"), 1);
 var import_overlays2 = require("@react-aria/overlays");
-var import_styled_components10 = __toESM(require("styled-components"), 1);
+var import_styled_components10 = require("styled-components");
 var import_focus = require("@react-aria/focus");
 var import_dialog = require("@react-aria/dialog");
 
@@ -1391,7 +1393,7 @@ var ModalHeading = import_styled_components10.default.h3`
 
 // src/components/Modal/ModalPlumbing.tsx
 var import_react13 = __toESM(require("react"), 1);
-var import_styled_components11 = __toESM(require("styled-components"), 1);
+var import_styled_components11 = require("styled-components");
 var import_utils6 = require("@charcoal-ui/utils");
 function ModalHeader() {
   return /* @__PURE__ */ import_react13.default.createElement(ModalHeaderRoot, null, /* @__PURE__ */ import_react13.default.createElement(StyledModalTitle, null));
@@ -1427,9 +1429,8 @@ var ModalButtons = import_styled_components11.default.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-var import_polished = require("polished");
 var import_react14 = __toESM(require("react"), 1);
-var import_styled_components12 = __toESM(require("styled-components"), 1);
+var import_styled_components12 = require("styled-components");
 function LoadingSpinner({
   size = 48,
   padding = 16,
@@ -1444,8 +1445,11 @@ var LoadingSpinnerRoot = import_styled_components12.default.div.attrs({ role: "p
   font-size: ${(props) => props.size}px;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
-  background-color: ${({ theme: theme4, transparent }) => transparent ? "transparent" : (0, import_polished.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 = import_styled_components12.keyframes`
   from {
@@ -1487,7 +1491,7 @@ var LoadingSpinnerIcon = import_react14.default.forwardRef(function LoadingSpinn
 
 // src/components/DropdownSelector/index.tsx
 var import_react22 = __toESM(require("react"), 1);
-var import_styled_components14 = __toESM(require("styled-components"), 1);
+var import_styled_components14 = require("styled-components");
 var import_react_stately2 = require("react-stately");
 var import_utils14 = require("@charcoal-ui/utils");
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
@@ -1496,7 +1500,7 @@ var import_button = require("@react-aria/button");
 
 // src/components/DropdownSelector/Listbox.tsx
 var import_react20 = __toESM(require("react"), 1);
-var import_styled_components13 = __toESM(require("styled-components"), 1);
+var import_styled_components13 = require("styled-components");
 
 // ../../node_modules/@react-aria/utils/dist/module.js
 var import_react15 = __toESM(require("react"));
@@ -3909,6 +3913,7 @@ var OptionRoot = import_styled_components13.default.li`
 `;
 var OptionCheckIcon = (0, import_styled_components13.default)(Icon_default)`
   visibility: hidden;
+  ${theme((o) => [o.font.text2])}
 
   ${({ isSelected }) => isSelected && import_styled_components13.css`
       visibility: visible;
@@ -3916,7 +3921,7 @@ var OptionCheckIcon = (0, import_styled_components13.default)(Icon_default)`
 `;
 var OptionText = import_styled_components13.default.span`
   display: block;
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 
 // src/components/DropdownSelector/Popover.tsx
@@ -4005,7 +4010,7 @@ var DropdownSelector = ({
       isDisabled: disabled,
       autoComplete
     }
-  ), /* @__PURE__ */ import_react22.default.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ import_react22.default.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ import_react22.default.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react22.default.createElement(Icon_default, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ import_react22.default.createElement(DropdownPopover, { open: state.isOpen, onClose: () => state.close() }, /* @__PURE__ */ import_react22.default.createElement(Listbox_default, { ...menuProps, state, mode }))), hasAssertiveText && /* @__PURE__ */ import_react22.default.createElement(
+  ), /* @__PURE__ */ import_react22.default.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ import_react22.default.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ import_react22.default.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react22.default.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ import_react22.default.createElement(DropdownPopover, { open: state.isOpen, onClose: () => state.close() }, /* @__PURE__ */ import_react22.default.createElement(Listbox_default, { ...menuProps, state, mode }))), hasAssertiveText && /* @__PURE__ */ import_react22.default.createElement(
     AssertiveText,
     {
       invalid,
@@ -4061,11 +4066,14 @@ var DropdownButtonText = import_styled_components14.default.span`
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
+var DropdownButtonIcon = (0, import_styled_components14.default)(Icon_default)`
+  ${theme((o) => [o.font.text2])}
+`;
 var AssertiveText = import_styled_components14.default.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
-  invalid && o.font.assertive
+  invalid ? o.font.assertive : o.font.text2
 ])}
 `;
 var DropdownPopover = (0, import_styled_components14.default)(Popover_default)`
@@ -4080,7 +4088,7 @@ var DropdownPopover = (0, import_styled_components14.default)(Popover_default)`
 var import_react24 = __toESM(require("react"), 1);
 var import_react_stately3 = require("react-stately");
 var import_radio = require("@react-aria/radio");
-var import_styled_components15 = __toESM(require("styled-components"), 1);
+var import_styled_components15 = require("styled-components");
 var import_utils15 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
@@ -4203,7 +4211,7 @@ var SegmentedLabelInner = import_styled_components15.default.div`
 
 // src/components/Checkbox/index.tsx
 var import_react25 = __toESM(require("react"), 1);
-var import_styled_components16 = __toESM(require("styled-components"), 1);
+var import_styled_components16 = require("styled-components");
 var import_checkbox = require("@react-aria/checkbox");
 var import_react_stately4 = require("react-stately");
 var import_utils17 = require("@charcoal-ui/utils");
@@ -4276,12 +4284,12 @@ var CheckboxInputOverlay = import_styled_components16.default.div`
   ${({ checked }) => checked !== true && hiddenCss};
 `;
 var InputLabel = import_styled_components16.default.div`
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `;
 
 // src/components/TagItem/index.tsx
 var import_react26 = __toESM(require("react"), 1);
-var import_styled_components17 = __toESM(require("styled-components"), 1);
+var import_styled_components17 = require("styled-components");
 var import_utils19 = require("@charcoal-ui/utils");
 var import_button2 = require("@react-aria/button");
 var sizeMap = {