@charcoal-ui/react 2.6.0 → 2.7.0

package/dist/index.esm.js

@@ -406,6 +406,9 @@ var RadioInput = styled5.input.attrs({ type: "radio" })`
     }
 
     ${theme((o) => o.outline.default.focus)}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `;
 var RadioLabel = styled5.div`
@@ -693,6 +696,10 @@ var Label = styled7.label`
 
   ${theme((o) => o.disabled)}
 
+  :active > input {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
+
   ${disabledSelector3} {
     cursor: default;
   }
@@ -707,42 +714,63 @@ var LabelInner = styled7.div`
 var SwitchInput = styled7.input.attrs({
   type: "checkbox"
 })`
-  &[type='checkbox'] {
-    appearance: none;
-    display: inline-flex;
-    position: relative;
-    box-sizing: border-box;
-    width: 28px;
-    border: 2px solid transparent;
-    transition: box-shadow 0.2s, background-color 0.2s;
-    cursor: inherit;
-    ${theme((o) => [
-  o.borderRadius(16),
-  o.height.px(16),
-  o.bg.text4.hover.press,
-  o.outline.default.focus,
-  o.margin.all(0)
-])}
+  appearance: none;
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  border: 2px solid transparent;
 
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      top: 0;
-      left: 0;
-      width: 12px;
-      height: 12px;
-      transform: translateX(0);
-      transition: transform 0.2s;
-      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
-    }
+  transition-property: background-color, box-shadow;
+  transition-duration: 0.2s;
+  cursor: inherit;
 
-    &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+  outline: none;
+  border-radius: 16px;
+  height: 16px;
+  margin: 0;
+  background-color: var(--charcoal-text4);
+  :hover {
+    background-color: var(--charcoal-text4-hover);
+  }
+  :active {
+    background-color: var(--charcoal-text4-press);
+  }
+  :focus {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
 
-      &::after {
-        transform: translateX(12px);
-      }
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    transform: translateX(0);
+    transition: transform 0.2s;
+    border-radius: 1024px;
+    background-color: var(--charcoal-text5);
+    :hover {
+      background-color: var(--charcoal-text5-hover);
+    }
+    :active {
+      background-color: var(--charcoal-text5-press);
+    }
+  }
+
+  &:checked {
+    background-color: var(--charcoal-brand);
+    :hover {
+      background-color: var(--charcoal-brand-hover);
+    }
+    :active {
+      background-color: var(--charcoal-brand-press);
+    }
+    &::after {
+      transform: translateX(12px);
+      transition: transform 0.2s;
     }
   }
 `;
@@ -1105,6 +1133,13 @@ var StyledTextareaContainer = styled9.div`
   o.borderRadius(4)
 ])}
 
+  /**
+   * FIXME: o.outline.default を &:focus-within 内に書いてると、外れるときに transition が効かない
+   * 本来 o.outline.default.focus と書けば足してくれるような transition の内容を一旦明示している
+   * o.outline.default.focusWithin のようなものがあればこの行は不要になるはず
+   */
+  transition: box-shadow 0.2s;
+
   &:focus-within {
     ${(p) => theme3((o) => p.invalid ? o.outline.assertive : o.outline.default)}
   }
@@ -1363,7 +1398,6 @@ var ModalHeading = styled10.h3`
 // src/components/Modal/ModalPlumbing.tsx
 import React13 from "react";
 import styled11 from "styled-components";
-import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
 function ModalHeader() {
   return /* @__PURE__ */ React13.createElement(ModalHeaderRoot, null, /* @__PURE__ */ React13.createElement(StyledModalTitle, null));
 }
@@ -1377,11 +1411,7 @@ var StyledModalTitle = styled11(ModalTitle)`
   ${theme((o) => [o.font.text1, o.typography(16).bold])}
 `;
 var ModalAlign = styled11.div`
-  ${theme((o) => [o.padding.horizontal(24)])}
-
-  @media ${({ theme: theme4 }) => maxWidth2(theme4.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16)])}
 `;
 var ModalBody = styled11.div`
   ${theme((o) => [o.padding.bottom(40)])}
@@ -1390,11 +1420,8 @@ var ModalButtons = styled11.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
-  ${theme((o) => [o.padding.horizontal(24).top(16)])}
 
-  @media ${({ theme: theme4 }) => maxWidth2(theme4.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16).top(16)])}
 `;
 
 // src/components/LoadingSpinner/index.tsx
@@ -1975,6 +2002,9 @@ var CheckboxInput = styled20.input`
       border-color: ${({ theme: theme4 }) => theme4.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `;
 var CheckboxInputOverlay = styled20.div`
@@ -2021,6 +2051,7 @@ var TagItem = forwardRef3(
     size = "M",
     disabled,
     status = "default",
+    className,
     ...props
   }, _ref) {
     const ref = useObjectRef2(_ref);
@@ -2040,7 +2071,8 @@ var TagItem = forwardRef3(
         ref,
         size: hasTranslatedLabel ? "M" : size,
         status,
-        ...buttonProps
+        ...buttonProps,
+        className
       },
       /* @__PURE__ */ React23.createElement(Background, { bgColor, bgImage, status }),
       /* @__PURE__ */ React23.createElement(Inner, null, /* @__PURE__ */ React23.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ React23.createElement(TranslatedLabel, null, /* @__PURE__ */ React23.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ React23.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ React23.createElement(Icon_default, { name: "16/Remove" }))