@charcoal-ui/react 3.0.0-beta.4 → 3.0.0-beta.6

package/dist/index.esm.js

@@ -870,7 +870,7 @@ var FieldLabelWrapper = styled8.div`
 // src/components/TextField/index.tsx
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var TextField = React5.forwardRef(
-  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef16) {
+  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef17) {
     const {
       className,
       showLabel = false,
@@ -960,7 +960,7 @@ var TextField = React5.forwardRef(
         /* @__PURE__ */ jsx10(
           StyledInput,
           {
-            ref: mergeRefs(forwardRef16, ariaRef),
+            ref: mergeRefs(forwardRef17, ariaRef),
             invalid,
             extraLeftPadding: prefixWidth,
             extraRightPadding: suffixWidth,
@@ -1065,11 +1065,11 @@ var AssistiveText = styled9.p`
 // src/components/TextArea/index.tsx
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
-import React6, { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import styled10, { css as css3 } from "styled-components";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var TextArea = React6.forwardRef(
-  function TextAreaInner({ onChange, ...props }, forwardRef16) {
+var TextArea = forwardRef10(
+  function TextAreaInner({ onChange, ...props }, forwardRef17) {
     const {
       className,
       showCount = false,
@@ -1159,7 +1159,7 @@ var TextArea = React6.forwardRef(
             /* @__PURE__ */ jsx11(
               StyledTextarea,
               {
-                ref: mergeRefs(textareaRef, forwardRef16, ariaRef),
+                ref: mergeRefs(textareaRef, forwardRef17, ariaRef),
                 rows,
                 noBottomPadding: showCount,
                 ...inputProps
@@ -1197,6 +1197,7 @@ var StyledTextareaContainer = styled10.div`
 
   ${(p) => theme((o) => [
   o.bg.surface3.hover,
+  o.outline.default.focus,
   p.invalid && o.outline.assertive,
   o.font.text2,
   o.borderRadius(4)
@@ -1263,10 +1264,10 @@ var AssistiveText2 = styled10.p`
 `;
 
 // src/components/Icon/index.tsx
-import * as React7 from "react";
+import * as React6 from "react";
 import "@charcoal-ui/icons";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Icon = React7.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
+var Icon = React6.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
   return /* @__PURE__ */ jsx12(
     "pixiv-icon",
     {
@@ -1282,8 +1283,8 @@ var Icon = React7.forwardRef(function IconInner({ name, scale, unsafeNonGuidelin
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-import { useContext as useContext4, forwardRef as forwardRef11, memo as memo4 } from "react";
-import * as React8 from "react";
+import { useContext as useContext4, forwardRef as forwardRef12, memo as memo4 } from "react";
+import * as React7 from "react";
 import {
   Overlay,
   useModalOverlay,
@@ -1307,7 +1308,7 @@ import { animated, useTransition, easings } from "react-spring";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_Z_INDEX = 10;
-var Modal = forwardRef11(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
+var Modal = forwardRef12(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
   const {
     title,
     size = "M",
@@ -1395,7 +1396,7 @@ var Modal = forwardRef11(function ModalInner({ children, zIndex = DEFAULT_Z_INDE
   );
 });
 var Modal_default = memo4(Modal);
-var ModalContext = React8.createContext({
+var ModalContext = React7.createContext({
   titleProps: {},
   title: "",
   close: void 0,
@@ -1508,10 +1509,10 @@ var ModalButtons = styled12.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-import { forwardRef as forwardRef12, useImperativeHandle, useRef as useRef3, memo as memo5 } from "react";
+import { forwardRef as forwardRef13, useImperativeHandle, useRef as useRef3, memo as memo5 } from "react";
 import styled13, { keyframes } from "styled-components";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LoadingSpinner = forwardRef12(
+var LoadingSpinner = forwardRef13(
   function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
     return /* @__PURE__ */ jsx15(
       LoadingSpinnerRoot,
@@ -1564,7 +1565,7 @@ var Icon2 = styled13.div.attrs({ role: "presentation" })`
     animation: none;
   }
 `;
-var LoadingSpinnerIcon = forwardRef12(
+var LoadingSpinnerIcon = forwardRef13(
   function LoadingSpinnerIcon2({ once = false }, ref) {
     const iconRef = useRef3(null);
     useImperativeHandle(ref, () => ({
@@ -1671,12 +1672,12 @@ function DropdownPopover({ children, ...props }) {
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-import React10 from "react";
+import * as React8 from "react";
 function findPreviewRecursive(children, value) {
-  const childArray = React10.Children.toArray(children);
+  const childArray = React8.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React10.isValidElement(child)) {
+    if (React8.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -1712,12 +1713,12 @@ var MenuListContext = createContext5({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-import React11 from "react";
+import * as React9 from "react";
 function getValuesRecursive(children, values = []) {
-  const childArray = React11.Children.toArray(children);
+  const childArray = React9.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React11.isValidElement(child)) {
+    if (React9.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         const childValue = props.value;
@@ -2036,7 +2037,7 @@ var StyledLi2 = styled19.li`
 `;
 
 // src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef13, memo as memo6, useMemo as useMemo2, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef14, memo as memo6, useMemo as useMemo2, useRef as useRef8 } from "react";
 import { useRadioGroupState } from "react-stately";
 import {
   useRadio,
@@ -2064,7 +2065,7 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
-var SegmentedControl = forwardRef13(
+var SegmentedControl = forwardRef14(
   function SegmentedControlInner(props, ref) {
     const ariaRadioGroupProps = useMemo2(
       () => ({
@@ -2181,14 +2182,14 @@ var SegmentedLabelInner = styled20.div`
 `;
 
 // src/components/Checkbox/index.tsx
-import { forwardRef as forwardRef14, memo as memo7, useMemo as useMemo3 } from "react";
+import { forwardRef as forwardRef15, memo as memo7, useMemo as useMemo3 } from "react";
 import styled21, { css as css5 } from "styled-components";
 import { useCheckbox } from "@react-aria/checkbox";
 import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { disabledSelector as disabledSelector6, px as px3 } from "@charcoal-ui/utils";
 import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
-var Checkbox = forwardRef14(
+var Checkbox = forwardRef15(
   function CheckboxInner(props, ref) {
     const ariaCheckboxProps = useMemo3(
       () => ({
@@ -2277,7 +2278,7 @@ var InputLabel = styled21.div`
 `;
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef15, memo as memo8, useMemo as useMemo4 } from "react";
+import { forwardRef as forwardRef16, memo as memo8, useMemo as useMemo4 } from "react";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import styled22, { css as css6 } from "styled-components";
 import { disabledSelector as disabledSelector7, px as px4 } from "@charcoal-ui/utils";
@@ -2287,7 +2288,7 @@ var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = forwardRef15(
+var TagItem = forwardRef16(
   function TagItemInner({
     label,
     translatedLabel,