@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/date-picker/date-picker.js

@@ -0,0 +1,193 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+/* empty css                */
+import { forwardRef, useRef } from "react";
+import dayjs from "dayjs";
+import { isNil } from "lodash-es";
+import { Calendar } from "react-date-range";
+import { getDatePickerProps } from "./helpers.js";
+import CalendarIcon from "../../assets/svg/calendar.svg.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getColorVar } from "../../theme/palette.js";
+import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import { TimePicker } from "../time-picker/time-picker.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
+import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+import { Icon } from "../icon/icon.js";
+const DEFAULT_DATE_FORMAT = "MM/DD/YYYY";
+const DEFAULT_DATETIME_FORMAT = "MM/DD/YYYY HH:mm";
+const DatePicker = (_props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    placeholder,
+    icon,
+    format,
+    minDate,
+    maxDate,
+    timePicker,
+    clearable,
+    onClear,
+    helperText,
+    error,
+    containerProps,
+    open,
+    onOpenChange,
+    placement = "bottom-end",
+    ...rest
+  } = getDatePickerProps(_props);
+  const floatingRef = useRef(null);
+  const valueFormat = format ?? (timePicker ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATE_FORMAT);
+  const [selectedDate, setSelectedDate] = useControllableState({
+    defaultValue,
+    value
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const handleChange = (date) => {
+    let preset = date;
+    if (timePicker) {
+      preset = dayjs(preset).set("hour", dayjs(selectedDate ?? /* @__PURE__ */ new Date()).hour()).set("minute", dayjs(selectedDate ?? /* @__PURE__ */ new Date()).minute()).toDate();
+    }
+    if (minDate && dayjs(preset).isBefore(minDate)) {
+      preset = minDate;
+    }
+    if (maxDate && dayjs(preset).isAfter(maxDate)) {
+      preset = maxDate;
+    }
+    setSelectedDate(preset);
+    onChange == null ? void 0 : onChange(preset);
+  };
+  const onChangeTime = (val) => {
+    const preset = dayjs(selectedDate ?? /* @__PURE__ */ new Date()).set("hour", dayjs(val).hour()).set("minute", dayjs(val).minute()).toDate();
+    setSelectedDate(preset);
+    onChange == null ? void 0 : onChange(preset);
+  };
+  const getCss = (sizeVariant) => {
+    if (isNil(sizeVariant)) return {};
+    return getSizeVariantState(sizeVariant);
+  };
+  const portalContentRenderer = () => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      css: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 12,
+        backgroundColor: getColorVar("white"),
+        fontSize: "0.875rem",
+        lineHeight: "1.25rem",
+        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        border: "1px solid",
+        borderColor: getColorVar("neutral.100")
+      },
+      children: [
+        /* @__PURE__ */ jsx(Calendar, { onChange: handleChange, minDate, maxDate, date: selectedDate ?? void 0 }),
+        timePicker && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            css: { paddingLeft: 12, paddingRight: 12, paddingBottom: 12, display: "flex", alignItems: "center", gap: 8 },
+            children: [
+              /* @__PURE__ */ jsx("span", { css: { fontSize: "0.75rem", lineHeight: "1rem" }, children: "Time:" }),
+              /* @__PURE__ */ jsx(TimePicker, { onChange: onChangeTime, placement: "top", xs: { size: "xs" }, value: selectedDate })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onClear == null ? void 0 : onClear();
+  };
+  const getSuffix = () => {
+    var _a, _b;
+    if (icon) {
+      return icon;
+    }
+    if (selectedDate && clearable) {
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          source: CloseIcon,
+          css: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
+          onClick: handleClear
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        source: CalendarIcon,
+        xs: { size: getCss((_b = rest.xs) == null ? void 0 : _b.size).iconSize },
+        css: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...containerProps,
+      css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Floating,
+          {
+            clickProps: {
+              enabled: true
+            },
+            dismissProps: {
+              enabled: true
+            },
+            placement,
+            open: isOpen,
+            onOpenChange: prehandleOpenChange,
+            ref: floatingRef,
+            children: [
+              /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsx(
+                ForwardRefInputMask,
+                {
+                  type: "button",
+                  error: isOpen ? false : error,
+                  as: "button",
+                  suffix: getSuffix(),
+                  ...rest,
+                  ref,
+                  children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      css: { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                      children: [
+                        !selectedDate && !!placeholder && /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400") }, children: placeholder }),
+                        !!selectedDate && /* @__PURE__ */ jsx("span", { children: dayjs(selectedDate).format(valueFormat) })
+                      ]
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FloatingContent, { children: portalContentRenderer() })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
+};
+const ForwardRefDatePicker = forwardRef(DatePicker);
+export {
+  ForwardRefDatePicker as DatePicker
+};

package/dist/lib/date-picker/helpers.d.ts

@@ -1,2 +1,3 @@
 import { DatePickerProps } from './types';
 export declare const getDatePickerProps: (extended: DatePickerProps) => DatePickerProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/date-picker/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAW1C,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAE3D,CAAC"}

package/dist/lib/date-picker/helpers.js

@@ -1,9 +1,12 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        size: 'md',
-    },
+  xs: {
+    size: "md"
+  }
 };
-export const getDatePickerProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getDatePickerProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getDatePickerProps
 };

package/dist/lib/date-picker/index.d.ts

@@ -1,3 +1,4 @@
 export * from './date-picker';
 export * from './helpers';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/date-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/lib/date-picker/types.d.ts

@@ -36,3 +36,4 @@ type DatePickerBaseProps = {
 };
 export type DatePickerProps = DatePickerBaseProps & ResponsiveDesign<DateResponsiveProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/date-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAE1C,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC;AAED,KAAK,mBAAmB,GAAG;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC"}

package/dist/lib/dialog/dialog/dialog.d.ts

@@ -1,2 +1,3 @@
 import { DialogProps } from './types';
 export declare const Dialog: (_props: DialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dialog.d.ts.map

package/dist/lib/dialog/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAKtC,eAAO,MAAM,MAAM,WAAY,WAAW,qDA0EzC,CAAC"}

package/dist/lib/dialog/dialog/dialog.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { getDialogProps, getDialogSizeInNumber } from "./helpers.js";
+import { FLOATING_Z_INDEX } from "../../../theme/index.js";
+import { Floating } from "../../floating/floating/floating.js";
+import { FloatingContent } from "../../floating/floating-content/floating-content.js";
+import { getColorVar } from "../../../theme/palette.js";
+import { mediaQuery } from "../../../theme/screens.js";
+const Dialog = (_props) => {
+  const { xs, sm, md, lg, children, ...props } = getDialogProps(_props);
+  return /* @__PURE__ */ jsx(
+    Floating,
+    {
+      dismissProps: {
+        enabled: true
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        FloatingContent,
+        {
+          floatingOverlayProps: {
+            disabled: false,
+            css: {
+              display: "grid",
+              placeItems: "center",
+              padding: "1rem",
+              [mediaQuery("sm")]: { padding: "1.25rem" },
+              [mediaQuery("md")]: { padding: "1.5rem" }
+            },
+            lockScroll: true,
+            style: {
+              zIndex: FLOATING_Z_INDEX
+            }
+          },
+          css: {
+            maxHeight: "100%",
+            maxWidth: "100%",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  backdropFilter: "blur(2px)",
+                  position: "fixed",
+                  inset: 0,
+                  backgroundColor: "rgba(0, 0, 0, 0.4)",
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: [
+                  {
+                    width: getDialogSizeInNumber(xs == null ? void 0 : xs.size),
+                    backgroundColor: getColorVar("surface.default"),
+                    maxWidth: "100%",
+                    overflow: "hidden",
+                    display: "flex",
+                    flexDirection: "column",
+                    borderRadius: "0.5rem",
+                    paddingTop: "0.5rem",
+                    paddingBottom: "0.5rem",
+                    position: "relative"
+                  },
+                  {
+                    [mediaQuery("sm")]: {
+                      width: getDialogSizeInNumber(sm == null ? void 0 : sm.size)
+                    },
+                    [mediaQuery("md")]: {
+                      width: getDialogSizeInNumber(md == null ? void 0 : md.size)
+                    },
+                    [mediaQuery("lg")]: {
+                      width: getDialogSizeInNumber(lg == null ? void 0 : lg.size)
+                    }
+                  }
+                ],
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Dialog
+};

package/dist/lib/dialog/dialog/helpers.d.ts

@@ -1,4 +1,5 @@
 import { DialogProps, DialogSize } from './types';
 export declare const getDialogProps: (extended: DialogProps) => DialogProps;
 export declare const getDialogSizeInNumber: (size?: DialogSize) => number | undefined;
-export declare const useDialogContext: () => import("../../floating").FloatingContextValue;
+export declare const useDialogContext: () => import('../../floating').FloatingContextValue;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/dialog/dialog/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAalD,eAAO,MAAM,cAAc,aAAc,WAAW,gBAEnD,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,UAAU,uBAKtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,qDAE5B,CAAC"}

package/dist/lib/dialog/dialog/helpers.js

@@ -1,21 +1,27 @@
-import { isString } from 'lodash-es';
-import { useFloatingContext } from '../../floating';
-import { breakpoint } from '../../../theme';
-import { mergeComponentProps } from '../../../utils';
+import { isString } from "lodash-es";
+import { breakpoint } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+import { mergeComponentProps } from "../../../utils/index.js";
+import { useFloatingContext } from "../../floating/floating/helpers.js";
 const defaultProps = {
-    xs: {
-        size: 'sm',
-    },
+  xs: {
+    size: "sm"
+  }
 };
-export const getDialogProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getDialogProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
 };
-export const getDialogSizeInNumber = (size) => {
-    if (isString(size)) {
-        return size === 'xs' ? 480 : breakpoint[size].minWidth;
-    }
-    return size;
+const getDialogSizeInNumber = (size) => {
+  if (isString(size)) {
+    return size === "xs" ? 480 : breakpoint[size].minWidth;
+  }
+  return size;
 };
-export const useDialogContext = () => {
-    return useFloatingContext();
+const useDialogContext = () => {
+  return useFloatingContext();
+};
+export {
+  getDialogProps,
+  getDialogSizeInNumber,
+  useDialogContext
 };

package/dist/lib/dialog/dialog/index.d.ts

@@ -1,3 +1,4 @@
 export * from './dialog';
 export * from './types';
 export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/dialog/dialog/types.d.ts

@@ -1,7 +1,8 @@
 import { FloatingProps } from '../../floating';
-import { type breakpoint } from '../../../theme';
+import { breakpoint } from '../../../theme';
 import { ResponsiveDesign, ShallowMerge } from '../../../types';
 export type DialogSize = keyof typeof breakpoint | number;
 export type DialogProps = ShallowMerge<FloatingProps, ResponsiveDesign<{
     size?: DialogSize;
 }>>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,YAAY,CACpC,aAAa,EACb,gBAAgB,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC,CACH,CAAC"}

package/dist/lib/dialog/dialog-body/dialog-body.d.ts

@@ -1,2 +1,3 @@
 import { DialogBodyProps } from './types';
 export declare const DialogBody: (props: DialogBodyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dialog-body.d.ts.map

package/dist/lib/dialog/dialog-body/dialog-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-body.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-body/dialog-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK1C,eAAO,MAAM,UAAU,UAAW,eAAe,qDAiBhD,CAAC"}

package/dist/lib/dialog/dialog-body/dialog-body.js

@@ -0,0 +1,26 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { ScrollView } from "../../../components/scroll-view.js";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+const DialogBody = (props) => {
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      css: {
+        flex: "1 1 0%",
+        paddingTop: "0.5rem",
+        paddingBottom: "0.5rem",
+        overflow: "auto",
+        "&:first-of-type": { paddingTop: "0.75rem" },
+        "&:last-of-type": { paddingBottom: "0.75rem" },
+        paddingLeft: "1rem",
+        paddingRight: "1rem",
+        [mediaQuery("sm")]: { paddingLeft: "1.25rem", paddingRight: "1.25rem" }
+      },
+      ...props
+    }
+  );
+};
+export {
+  DialogBody
+};

package/dist/lib/dialog/dialog-body/index.d.ts

@@ -1,2 +1,3 @@
 export * from './dialog-body';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog-body/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-body/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/lib/dialog/dialog-body/types.d.ts

@@ -1,3 +1,4 @@
 import { ScrollViewProps } from '../../../components';
 import { ShallowMerge } from '../../../types';
 export type DialogBodyProps = ShallowMerge<ScrollViewProps, {}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog-body/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-body/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,eAAe,EACf,EAEC,CACF,CAAC"}

package/dist/lib/dialog/dialog-close/dialog-close.d.ts

@@ -1 +1,2 @@
-export declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<import("../../floating").FloatingCloseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogClose: import('react').ForwardRefExoticComponent<Omit<import('../../floating').FloatingCloseProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=dialog-close.d.ts.map

package/dist/lib/dialog/dialog-close/dialog-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-close.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-close/dialog-close.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,qJAAgB,CAAC"}

package/dist/lib/dialog/dialog-close/dialog-close.js

@@ -0,0 +1,5 @@
+import { FloatingClose } from "../../floating/floating-close/floating-close.js";
+const DialogClose = FloatingClose;
+export {
+  DialogClose
+};

package/dist/lib/dialog/dialog-close/index.d.ts

@@ -1,2 +1,3 @@
 export * from './dialog-close';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog-close/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-close/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

package/dist/lib/dialog/dialog-close/types.d.ts

@@ -1,2 +1,3 @@
 import { FloatingCloseProps } from '../../floating';
 export type DialogCloseProps = FloatingCloseProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog-close/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-close/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC"}

package/dist/lib/dialog/dialog-footer/dialog-footer.d.ts

@@ -1,2 +1,3 @@
 import { DialogFooterProps } from './types';
 export declare const DialogFooter: (props: DialogFooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dialog-footer.d.ts.map

package/dist/lib/dialog/dialog-footer/dialog-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-footer.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-footer/dialog-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI5C,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAiBpD,CAAC"}

package/dist/lib/dialog/dialog-footer/dialog-footer.js

@@ -0,0 +1,25 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+const DialogFooter = (props) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: {
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: "0.5rem",
+        paddingTop: "0.5rem",
+        paddingBottom: "0.5rem",
+        paddingLeft: "1rem",
+        paddingRight: "1rem",
+        position: "relative",
+        [mediaQuery("sm")]: { paddingLeft: "1.25rem", paddingRight: "1.25rem" }
+      },
+      ...props
+    }
+  );
+};
+export {
+  DialogFooter
+};

package/dist/lib/dialog/dialog-footer/index.d.ts

@@ -1,2 +1,3 @@
 export * from './dialog-footer';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/dialog/dialog-footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-footer/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/lib/dialog/dialog-footer/types.d.ts

@@ -1,3 +1,4 @@
 import { HTMLAttributes } from 'react';
 export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/dialog/dialog-footer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-footer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;CAAG"}

package/dist/lib/dialog/dialog-header/dialog-header.d.ts

@@ -1,2 +1,3 @@
 import { DialogHeaderProps } from './types';
 export declare const DialogHeader: ({ children, closeable, ...props }: DialogHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dialog-header.d.ts.map

package/dist/lib/dialog/dialog-header/dialog-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-header.d.ts","sourceRoot":"","sources":["../../../../src/lib/dialog/dialog-header/dialog-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ5C,eAAO,MAAM,YAAY,sCAA8C,iBAAiB,qDAmDvF,CAAC"}

package/dist/lib/dialog/dialog-header/dialog-header.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import CloseIcon from "../../../assets/svg/times-close-delete.svg.js";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+import { getTypographyVar } from "../../../theme/typography.js";
+import { DialogClose } from "../dialog-close/dialog-close.js";
+import { IconButton } from "../../icon-button/icon-button.js";
+const DialogHeader = ({ children, closeable = true, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      css: [
+        {
+          paddingTop: "0.5rem",
+          paddingBottom: "0.5rem",
+          paddingLeft: "1rem",
+          paddingRight: "1rem",
+          gap: "0.5rem",
+          position: "relative",
+          fontSize: getTypographyVar("lg").fontSize,
+          lineHeight: getTypographyVar("lg").lineHeight,
+          fontWeight: 500,
+          [mediaQuery("sm")]: {
+            paddingLeft: "1.25rem",
+            paddingRight: "1.25rem",
+            fontSize: getTypographyVar("xl").fontSize,
+            lineHeight: getTypographyVar("xl").lineHeight
+          }
+        },
+        closeable && { paddingRight: "3rem" }
+      ],
+      ...props,
+      children: [
+        children,
+        closeable && /* @__PURE__ */ jsx(DialogClose, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            css: {
+              position: "absolute",
+              right: "0.5rem",
+              top: "50%",
+              transform: "translateY(-50%)",
+              [mediaQuery("sm")]: { right: "0.75rem" }
+            },
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                xs: {
+                  size: "sm"
+                },
+                color: "neutral",
+                icon: {
+                  source: CloseIcon
+                }
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  DialogHeader
+};