@lightsparkdev/ui 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lightsparkdev/ui
 
+## 1.0.3
+
+### Patch Changes
+
+- e647962: Updates to Button, CodeInput, Drawer, Icon, Modal, Video
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/{buttons-e4eb84a2.d.ts → buttons-35280bfe.d.ts}

@@ -43,6 +43,7 @@ declare const baseThemeColors: {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
 };
 type ThemeColorKey = keyof typeof baseThemeColors;
 declare const themeOrColorKeyValues: readonly string[];
@@ -1779,6 +1780,7 @@ declare const baseTheme: {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
 };
 type BaseTheme = typeof baseTheme;
 type LightsparkSurfaces = {
@@ -3533,6 +3535,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
     header: {
         type: Themes;
         typography: {
@@ -5264,6 +5267,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     nav: {
         type: Themes;
@@ -6996,6 +7000,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     content: {
         type: Themes;
@@ -8728,6 +8733,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     controls: {
         type: Themes;
@@ -10460,6 +10466,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
 };
 declare function isThemeColorKey(key: unknown): key is ThemeColorKey;

package/dist/{buttons-b7f56076.d.ts → buttons-36cdd0fe.d.ts}

@@ -43,6 +43,7 @@ declare const baseThemeColors: {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
 };
 type ThemeColorKey = keyof typeof baseThemeColors;
 declare const themeOrColorKeyValues: readonly string[];
@@ -1779,6 +1780,7 @@ declare const baseTheme: {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
 };
 type BaseTheme = typeof baseTheme;
 type LightsparkSurfaces = {
@@ -3533,6 +3535,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
     header: {
         type: Themes;
         typography: {
@@ -5264,6 +5267,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     nav: {
         type: Themes;
@@ -6996,6 +7000,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     content: {
         type: Themes;
@@ -8728,6 +8733,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     controls: {
         type: Themes;
@@ -10460,6 +10466,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
 };
 declare function isThemeColorKey(key: unknown): key is ThemeColorKey;

package/dist/{chunk-GNVEN6UE.js → chunk-2AGBCGOW.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-XDP7GCYE.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-4C2TISN7.js";
 
 // src/components/typography/Code.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-HZ63YB4Y.js → chunk-2XUHQWCJ.js}

@@ -1,18 +1,18 @@
 import {
   TextIconAligner
-} from "./chunk-XP3BAAUO.js";
+} from "./chunk-7YY6BH5O.js";
 import {
   Link
 } from "./chunk-AAFUVYVP.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-LTCJ6LNO.js";
 import {
   elide
 } from "./chunk-EDN2QDCB.js";
 import {
   getFocusOutline
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-CMQELZES.js → chunk-35PJW7RT.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-XDP7GCYE.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-4C2TISN7.js";
 
 // src/components/typography/Title.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-37RRWSDE.js → chunk-435FPPZK.js}

@@ -1,12 +1,12 @@
 import {
   DocsHeadline
-} from "./chunk-EMXTALIX.js";
+} from "./chunk-BENSR2YW.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-55M7XHBZ.js → chunk-4BFBANKF.js}

@@ -1,31 +1,31 @@
 import {
   StyledContentTable
-} from "./chunk-J7SV67XL.js";
+} from "./chunk-K7FYXGOI.js";
 import {
   StyledCode
-} from "./chunk-GNVEN6UE.js";
+} from "./chunk-2AGBCGOW.js";
 import {
   displaySelector
-} from "./chunk-HRZNVE2K.js";
+} from "./chunk-MRGHRTKA.js";
 import {
   StyledTitle
-} from "./chunk-CMQELZES.js";
+} from "./chunk-35PJW7RT.js";
 import {
   StyledBody
-} from "./chunk-TM3C4LEG.js";
+} from "./chunk-GWHKALYQ.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
-} from "./chunk-PNSZAJL7.js";
+} from "./chunk-CRTTTIAD.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   standardBorderRadius
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   getTypographyString
 } from "./chunk-ENBUKLVT.js";

package/dist/{chunk-VUXU77SU.js → chunk-4C2TISN7.js}

@@ -1,6 +1,6 @@
 import {
   getFontColor
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 import {
   getTypographyString
 } from "./chunk-ENBUKLVT.js";

package/dist/{chunk-ZNZAY47J.js → chunk-4JHXRPRB.js}

@@ -1,12 +1,12 @@
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   standardBorderRadius
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-XUVCOSIE.js → chunk-54EOEIEN.js}

@@ -1,9 +1,9 @@
 import {
   standardBorderRadius
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-BMSSV6NX.js → chunk-5TTLUOJ5.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 
 // src/components/Loading.tsx
 import { useTheme } from "@emotion/react";

package/dist/{chunk-S6AOKANU.js → chunk-6CNJ5ZCC.js}

@@ -1,16 +1,16 @@
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-4C2TISN7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 
 // src/styles/fields.tsx
 import { css } from "@emotion/react";
@@ -81,7 +81,7 @@ var textInputStyle = ({
   var _a;
   return css`
   border-radius: ${textInputBorderRadiusPx}px;
-  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
   cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
   font-weight: ${textInputFontWeight};

package/dist/{chunk-2H7TBKII.js → chunk-7FHOKVKJ.js}

@@ -1,9 +1,9 @@
 import {
   toReactNodes
-} from "./chunk-UVGBD7XM.js";
+} from "./chunk-LIQSJ5R7.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-LTCJ6LNO.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -11,16 +11,16 @@ import {
   extend,
   flexCenter,
   pxToRems
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   standardContentInset
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   themeOr
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 import {
   colors
 } from "./chunk-XUWFUTR4.js";

package/dist/{chunk-VYTN6ASZ.js → chunk-7IHNYMFQ.js}

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   useThemeBg
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-F6EVBEMN.js → chunk-7N2PFDYE.js}

@@ -1,9 +1,9 @@
 import {
   SingleCodeInput
-} from "./chunk-SRHSJOES.js";
+} from "./chunk-PQKVR2BR.js";
 import {
   textInputBorderColor
-} from "./chunk-S6AOKANU.js";
+} from "./chunk-6CNJ5ZCC.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-KFX7US6Y.js → chunk-7WDAN3OC.js}

@@ -1,6 +1,6 @@
 import {
   rootFontSizePx
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 
 // src/styles/utils.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-XP3BAAUO.js → chunk-7YY6BH5O.js}

@@ -1,9 +1,9 @@
 import {
   renderTypography
-} from "./chunk-DCFB5MJ7.js";
+} from "./chunk-VXKNN4SF.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 
 // src/components/TextIconAligner.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";

package/dist/{chunk-56QJRFP2.js → chunk-B6S7Y4K7.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-XDP7GCYE.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-4C2TISN7.js";
 
 // src/components/typography/LabelModerate.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-SKXCT2FQ.js → chunk-BDZ46Z2I.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-6H7PZJ2A.js";
+} from "./chunk-XDP7GCYE.js";
 import {
   applyTypography
-} from "./chunk-VUXU77SU.js";
+} from "./chunk-4C2TISN7.js";
 
 // src/components/typography/Label.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-EMXTALIX.js → chunk-BENSR2YW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2NT4RAQ3.js";
 import {
   StyledHeadline
-} from "./chunk-PNSZAJL7.js";
+} from "./chunk-CRTTTIAD.js";
 
 // src/components/documentation/DocsHeadline.tsx
 import React from "react";

package/dist/{chunk-5H32AOXL.js → chunk-BHP5YL2N.js}

@@ -1,7 +1,7 @@
 import {
   firstChild,
   pxToRems
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-2XRCGW74.js → chunk-BSH6WRUZ.js}

@@ -1,13 +1,13 @@
 import {
   Pill
-} from "./chunk-TVLELY54.js";
+} from "./chunk-J3YVJWRG.js";
 import {
   InputSubtext,
   inputBlockStyle
-} from "./chunk-S6AOKANU.js";
+} from "./chunk-6CNJ5ZCC.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 
 // src/components/FileInput.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-WV5AB4ZB.js → chunk-C4KZC45Y.js}

@@ -3,51 +3,51 @@ import {
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-XUVCOSIE.js";
+} from "./chunk-54EOEIEN.js";
 import {
   Flex
 } from "./chunk-IL6J7EBZ.js";
 import {
   toReactNodes
-} from "./chunk-UVGBD7XM.js";
+} from "./chunk-LIQSJ5R7.js";
 import {
   Drawer
-} from "./chunk-467PLJO3.js";
+} from "./chunk-JNNJVBHF.js";
 import {
   Button,
   ButtonSelector
-} from "./chunk-EV6PGQPM.js";
+} from "./chunk-SLKPLSJU.js";
 import {
   Body
-} from "./chunk-TM3C4LEG.js";
+} from "./chunk-GWHKALYQ.js";
 import {
   Headline,
   headlineSelector
-} from "./chunk-PNSZAJL7.js";
+} from "./chunk-CRTTTIAD.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   UnstyledButton
-} from "./chunk-6JFJDBV2.js";
+} from "./chunk-LTCJ6LNO.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-KFX7US6Y.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   Icon
-} from "./chunk-KBYU4ZQ3.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-7NPHOJXD.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   getColor
-} from "./chunk-A4JZESAS.js";
+} from "./chunk-IBZBPQMZ.js";
 import {
   TokenSize
 } from "./chunk-ENBUKLVT.js";
@@ -56,6 +56,7 @@ import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
 import {
+  __objRest,
   __spreadValues
 } from "./chunk-LOPKRCGI.js";
 
@@ -101,13 +102,15 @@ function Modal({
   submitLink,
   cancelText = "Cancel",
   firstFocusRef,
-  smDrawer,
+  smKind = "default",
+  top,
   nonDismissable = false,
   autoFocus = true,
   width = 460,
   progressBar,
   buttonLayout = "horizontal",
-  extraActions
+  extraActions,
+  handleBack
 }) {
   const visibleChangedRef = useRef(false);
   const nodeRef = useRef(null);
@@ -208,7 +211,10 @@ function Modal({
   const linkIsHref = isSubmitLinkWithHref(submitLink);
   const linkIsRoute = !linkIsHref && submitLink;
   const buttonContent = /* @__PURE__ */ jsxs(Fragment2, { children: [
-    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((action) => action.content),
+    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
+      var _b = _a, { placement, text } = _b, rest = __objRest(_b, ["placement", "text"]);
+      return /* @__PURE__ */ jsx2(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
+    }),
     !isSm && !cancelHidden && /* @__PURE__ */ jsx2(
       Button,
       {
@@ -232,7 +238,10 @@ function Modal({
       }
     ),
     isSm && !cancelHidden && /* @__PURE__ */ jsx2(Button, { onClick: onClose, text: cancelText }),
-    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((action) => action.content)
+    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
+      var _d = _c, { placement, text } = _d, rest = __objRest(_d, ["placement", "text"]);
+      return /* @__PURE__ */ jsx2(Button, __spreadValues({ text }, rest), text || `no-text-${i}`);
+    })
   ] });
   let titleContent = null;
   if (title) {
@@ -269,11 +278,20 @@ function Modal({
     onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ jsx2(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ jsx2(ModalButtonColumn, { children: buttonContent }) : null
   ] });
   let content;
-  if (smDrawer && isSm) {
-    content = /* @__PURE__ */ jsx2(Drawer, { onClose: () => onClickCloseButton(), closeButton: true, children: modalContent });
+  if (smKind === "drawer" && isSm) {
+    content = /* @__PURE__ */ jsx2(
+      Drawer,
+      {
+        onClose: () => onClickCloseButton(),
+        closeButton: true,
+        nonDismissable,
+        handleBack,
+        children: modalContent
+      }
+    );
   } else {
     content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx2(ModalOverlay, { ref: overlayRef }),
+      !(smKind === "fullscreen" && bp2.isSm()) ? /* @__PURE__ */ jsx2(ModalOverlay, { ref: overlayRef }) : null,
       /* @__PURE__ */ jsx2(
         ModalContainer,
         {
@@ -282,9 +300,13 @@ function Modal({
           tabIndex: -1,
           role: "dialog",
           ref: modalContainerRef,
-          children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, children: [
+          top: top || (smKind === "default" ? standardContentInset.smPx : 0),
+          children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, smKind, children: [
             !firstFocusRef && /* @__PURE__ */ jsx2(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-            !(nonDismissable || ghost) && /* @__PURE__ */ jsx2(CloseButtonContainer, { children: /* @__PURE__ */ jsx2(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx2(Icon, { name: "Close", width: 9 }) }) }),
+            !ghost && /* @__PURE__ */ jsxs(ModalNavigation, { children: [
+              handleBack && /* @__PURE__ */ jsx2(BackButton, { onClick: handleBack, children: /* @__PURE__ */ jsx2(Icon, { name: "ChevronLeft", width: 16 }) }),
+              !nonDismissable && /* @__PURE__ */ jsx2(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx2(Icon, { name: "Close", width: 9 }) })
+            ] }),
             /* @__PURE__ */ jsx2(ModalContentInner, { ghost, children: modalContent })
           ] })
         }
@@ -326,7 +348,7 @@ var ModalContainer = styled2.div`
   justify-content: center;
   align-items: center;
   color: ${({ theme }) => theme.text};
-  padding-top: ${standardContentInset.smPx}px;
+  ${(props) => `top: ${props.top}px;`}
 `;
 var contentTopMarginPx = 24;
 var Description = styled2.div`
@@ -360,16 +382,22 @@ var ModalButtonColumn = styled2.div`
   margin-top: ${"24px" /* lg */};
 `;
 var ModalContent = styled2.div`
-  ${overflowAutoWithoutScrollbars}
-  ${standardContentInset.smCSS}
-  ${(props) => props.ghost ? "" : standardBorderRadius(16)}
-  ${(props) => props.ghost ? "" : overlaySurface}
   pointer-events: auto;
   transition: width 0.25s ease-in;
-  width: ${(props) => props.width}px;
-  max-width: 100%;
-  max-height: 100%;
-  position: absolute;
+
+  ${({ theme, smKind, ghost }) => ghost ? "" : overlaySurface({ theme, border: smKind !== "fullscreen" })}
+  ${overflowAutoWithoutScrollbars}
+  ${(props) => props.smKind === "fullscreen" && bp.isSm() ? `
+    width: 100%;
+    height: 100%;
+  ` : `
+    ${props.ghost ? "" : standardBorderRadius(16)}
+    ${standardContentInset.smCSS.styles}
+    width: ${props.width}px;
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+  `}
   ${(props) => props.ghost ? "" : "padding: 16px 16px 40px;"}
 
   ${headlineSelector("h4")} { {
@@ -379,16 +407,22 @@ var ModalContent = styled2.div`
     }
   }
 `;
-var CloseButtonContainer = styled2.div`
-  display: flex;
-  flex-direction: row;
+var ModalNavigation = styled2.div`
+  display: grid;
+  grid-auto-flow: column;
   width: 100%;
-  justify-content: flex-end;
+`;
+var BackButton = styled2(UnstyledButton)`
+  ${standardFocusOutline}
+  width: 24px;
+  height: 24px;
+  justify-self: flex-start;
 `;
 var CloseButton = styled2(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
+  justify-self: flex-end;
 `;
 var ModalContentInner = styled2.div`
   ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}