@charcoal-ui/react 3.0.0-beta.1 → 3.0.0-beta.2

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":"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"}
+{"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;AA+CD,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/Modal/index.d.ts

@@ -2,12 +2,14 @@ import React from 'react';
 import { AriaModalOverlayProps } from '@react-aria/overlays';
 import { AriaDialogProps } from '@react-types/dialog';
 import { ButtonProps } from '../Button';
+type BottomSheet = boolean | 'full';
+type Size = 'S' | 'M' | 'L';
 export type ModalProps = AriaModalOverlayProps & AriaDialogProps & {
     children: React.ReactNode;
     zIndex?: number;
     title: string;
-    size?: 'S' | 'M' | 'L';
-    bottomSheet?: boolean | 'full';
+    size?: Size;
+    bottomSheet?: BottomSheet;
     isOpen: boolean;
     onClose: () => void;
     /**
@@ -43,4 +45,5 @@ export type ModalProps = AriaModalOverlayProps & AriaDialogProps & {
 export default function Modal({ children, zIndex, portalContainer, ...props }: ModalProps): JSX.Element;
 export declare function ModalTitle(props: React.HTMLAttributes<HTMLHeadingElement>): JSX.Element;
 export declare function ModalDismissButton({ children, ...props }: ButtonProps): JSX.Element | null;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,EACL,qBAAqB,EAItB,MAAM,sBAAsB,CAAA;AAK7B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAMrD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/C,MAAM,MAAM,UAAU,GAAG,qBAAqB,GAC5C,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B,CAAA;AAIH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,QAAQ,EACR,MAAwB,EACxB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,eA8FZ;AAgFD,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,eAOzE;AAQD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,sBAYrE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,EACL,qBAAqB,EAItB,MAAM,sBAAsB,CAAA;AAK7B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAMrD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/C,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AACnC,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAE3B,MAAM,MAAM,UAAU,GAAG,qBAAqB,GAC5C,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B,CAAA;AAIH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,QAAQ,EACR,MAAwB,EACxB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,eAgGZ;AA6FD,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,eAOzE;AAQD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,sBAYrE"}

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,MAAM,MAAM,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;;;;UA+CtB,CAAA;AAMD,MAAM,MAAM,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,MAAM,MAAM,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;;;;UAiDtB,CAAA;AAMD,MAAM,MAAM,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/components/SegmentedControl/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAchE,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAE9B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAEhD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C,CAAA;;AAuCD,wBAAqC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAchE,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAE9B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAEhD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C,CAAA;;AAwCD,wBAAqC"}

package/dist/components/SegmentedControl/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAyB,EAAE,qBAAqB,EAAE,MAAM,GAAG,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAEzC,wBAGC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,qBAAqB,CAEvD,CAAA;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,qBAAqB,CAEvD,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAyB,EAAE,qBAAqB,EAAE,MAAM,GAAG,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAEzC,wBAGC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,qBAAqB,CAEvD,CAAA;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,qBAAqB,CAEvD,CAAA"}

package/dist/index.cjs.js

@@ -437,6 +437,8 @@ var RadioInput = import_styled_components6.default.input.attrs({ type: "radio" }
     width: 20px;
     height: 20px;
 
+    cursor: pointer;
+
     ${({ hasError = false }) => theme((o) => [
   o.borderRadius("oval"),
   o.bg.surface1.hover.press,
@@ -1128,6 +1130,7 @@ var PrefixContainer = import_styled_components10.default.span`
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
+  z-index: 1;
 `;
 var SuffixContainer = import_styled_components10.default.span`
   position: absolute;
@@ -1351,7 +1354,7 @@ function Modal({
         ...underlayProps,
         style: transitionEnabled ? { backgroundColor } : {}
       },
-      /* @__PURE__ */ import_react13.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react13.default.createElement(
+      /* @__PURE__ */ import_react13.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react13.default.createElement(DialogContainer, { bottomSheet, size }, /* @__PURE__ */ import_react13.default.createElement(
         ModalDialog,
         {
           ref,
@@ -1377,7 +1380,7 @@ function Modal({
             }
           )
         )
-      ))
+      )))
     ))
   );
 }
@@ -1389,6 +1392,8 @@ var ModalContext = import_react13.default.createContext({
 });
 var ModalBackground = (0, import_react_spring.animated)(import_styled_components11.default.div`
   z-index: ${({ zIndex }) => zIndex};
+  overflow: scroll;
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -1397,34 +1402,52 @@ var ModalBackground = (0, import_react_spring.animated)(import_styled_components
 
   ${theme((o) => [o.bg.surface4])}
 `);
+var DialogContainer = import_styled_components11.default.div`
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
+  width: ${(p) => {
+  switch (p.size) {
+    case "S": {
+      return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "M": {
+      return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "L": {
+      return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    default: {
+      return unreachable(p.size);
+    }
+  }
+}}px;
+
+  @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
+    width: calc(100% - 48px);
+    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
+        margin: 0;
+        padding: 0;
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+        ${p.bottomSheet === "full" ? "height: 100%" : ""};
+      `}
+  }
+`;
 var ModalDialog = (0, import_react_spring.animated)(import_styled_components11.default.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: ${(p) => p.size === "S" ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "M" ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "L" ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size)}px;
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-
   @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
-    ${(p) => p.bottomSheet === "full" ? import_styled_components11.css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-            height: 100%;
-          ` : p.bottomSheet ? import_styled_components11.css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-          ` : import_styled_components11.css`
-            width: calc(100% - 48px);
-          `}
+    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
+        border-radius: 0;
+        ${p.bottomSheet === "full" && import_styled_components11.css`
+          height: 100%;
+        `}
+      `}
   }
 `);
 var ModalCrossButton = (0, import_styled_components11.default)(IconButton_default)`
@@ -1484,6 +1507,7 @@ function LoadingSpinner({
   return /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerIcon, null));
 }
 var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({ role: "progressbar" })`
+  box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
   border-radius: 8px;
@@ -1839,7 +1863,8 @@ var SegmentedControl = (0, import_react20.forwardRef)(
         ...props,
         isDisabled: props.disabled,
         isReadOnly: props.readonly,
-        isRequired: props.required
+        isRequired: props.required,
+        "aria-label": props.name
       }),
       [props]
     );