@charcoal-ui/react 3.1.2-beta.6 → 3.2.0

package/dist/index.esm.js

@@ -178,21 +178,17 @@ var Button2 = forwardRef3(function Button3({
     {
       ...rest,
       disabled,
-      variant,
-      size,
-      fullWidth: fixed,
+      $variant: variant,
+      $size: size,
+      $fullWidth: fixed,
       ref,
       children
     }
   );
 });
 var Button_default = Button2;
-var StyledButton = styled3(Clickable_default).withConfig({
-  shouldForwardProp(prop) {
-    return prop !== "fullWidth";
-  }
-}).attrs(styledProps)`
-  width: ${(p) => p.fullWidth ? "stretch" : "min-content"};
+var StyledButton = styled3(Clickable_default)`
+  width: ${(p) => p.$fullWidth ? "stretch" : "min-content"};
   display: inline-grid;
   align-items: center;
   justify-content: center;
@@ -201,53 +197,48 @@ var StyledButton = styled3(Clickable_default).withConfig({
   white-space: nowrap;
 
   ${(p) => theme((o) => [
-  o.font[p.font].hover.press,
-  o.bg[p.background].hover.press,
+  o.font[variantToFont(p.$variant)].hover.press,
+  o.bg[variantToBackgraund(p.$variant)].hover.press,
   o.typography(14).bold.preserveHalfLeading,
-  o.padding.horizontal(p.padding),
+  o.padding.horizontal(p.$size === "M" ? 24 : 16),
   o.disabled,
   o.borderRadius("oval"),
   o.outline.default.focus
 ])}
 
   /* よく考えたらheight=32って定義が存在しないな... */
-  height: ${(p) => p.height}px;
+  height: ${(p) => p.$size === "M" ? 40 : 32}px;
 `;
-function styledProps(props) {
-  return {
-    ...props,
-    ...variantToProps(props.variant),
-    ...sizeToProps(props.size)
-  };
-}
-function variantToProps(variant) {
+function variantToBackgraund(variant) {
   switch (variant) {
     case "Overlay":
-      return { font: "text5", background: "surface4" };
+      return "surface4";
     case "Default":
-      return { font: "text2", background: "surface3" };
+      return "surface3";
     case "Primary":
-      return { font: "text5", background: "brand" };
+      return "brand";
     case "Navigation":
-      return { font: "text5", background: "surface6" };
+      return "surface6";
     case "Danger":
-      return { font: "text5", background: "assertive" };
+      return "assertive";
     default:
       return unreachable(variant);
   }
 }
-function sizeToProps(size) {
-  switch (size) {
-    case "S":
-      return {
-        height: 32,
-        padding: 16
-      };
-    case "M":
-      return {
-        height: 40,
-        padding: 24
-      };
+function variantToFont(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "text5";
+    case "Default":
+      return "text2";
+    case "Primary":
+      return "text5";
+    case "Navigation":
+      return "text5";
+    case "Danger":
+      return "text5";
+    default:
+      return unreachable(variant);
   }
 }
 
@@ -262,7 +253,7 @@ var IconButton = forwardRef4(
   }
 );
 var IconButton_default = IconButton;
-var StyledIconButton = styled4(Clickable_default).attrs(styledProps2)`
+var StyledIconButton = styled4(Clickable_default).attrs(styledProps)`
   user-select: none;
 
   width: ${(p) => p.width}px;
@@ -279,14 +270,14 @@ var StyledIconButton = styled4(Clickable_default).attrs(styledProps2)`
   o.outline.default.focus
 ])}
 `;
-function styledProps2(props) {
+function styledProps(props) {
   return {
     ...props,
-    ...variantToProps2(props.variant),
-    ...sizeToProps2(props.size)
+    ...variantToProps(props.variant),
+    ...sizeToProps(props.size)
   };
 }
-function variantToProps2(variant) {
+function variantToProps(variant) {
   switch (variant) {
     case "Default":
       return { font: "text3", background: "transparent" };
@@ -294,7 +285,7 @@ function variantToProps2(variant) {
       return { font: "text5", background: "surface4" };
   }
 }
-function sizeToProps2(size) {
+function sizeToProps(size) {
   switch (size) {
     case "XS":
       return {