@caspeco/casper-ui-library 0.0.1

package/dist/components/icon-button/helper.js

@@ -0,0 +1,23 @@
+import { ThemeIconSizeVariable as e } from "../../theme/theme-types.js";
+const o = {
+  lg: e.Medium,
+  md: e.Medium,
+  sm: e.Small
+};
+function a(r) {
+  if (typeof r == "string")
+    return o[r];
+  if (Array.isArray(r))
+    return r.map((t) => t && o[t]);
+  if (typeof r == "object") {
+    const t = {};
+    return Object.keys(r).forEach((n) => {
+      const i = r[n];
+      i && (t[n] = o[i]);
+    }), t;
+  }
+}
+export {
+  a as getIconSizeFromButtonSize,
+  o as iconSizeMap
+};

package/dist/components/icon-button/icon-button.composition.d.ts

@@ -0,0 +1,5 @@
+export declare const PrimaryVariant: () => import("react/jsx-runtime").JSX.Element;
+export declare const SecondaryVariant: () => import("react/jsx-runtime").JSX.Element;
+export declare const GhostVariant: () => import("react/jsx-runtime").JSX.Element;
+export declare const TertiaryVariant: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-button.composition.d.ts.map

package/dist/components/icon-button/icon-button.composition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/icon-button.composition.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,+CAO1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAO5B,CAAC;AAEF,eAAO,MAAM,YAAY,+CAOxB,CAAC;AAEF,eAAO,MAAM,eAAe,+CAO3B,CAAC"}

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Button component with only an icon visible, used to trigger an action or event,
+ * such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.
+ *
+ * @see Docs https://bit.cloud/caspeco/casper-ui-library/components/icon-button
+ * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/button
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<{
+    icon: import('../icon/index.js').Icons;
+    variant?: "primary" | "secondary" | "ghost" | "tertiary";
+    size?: import('@chakra-ui/styled-system').ResponsiveValue<"lg" | "sm" | "md">;
+} & {
+    "aria-label": string;
+    onKeyDown?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onClick?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
+    isDisabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+} & import('../../index.js').CustomChakraBoxProps & import('../../index.js').MarginProps & import('../../index.js').PaddingProps & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/icon-button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAMA;;;;;;GAMG;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;yJAetB,CAAC"}

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,25 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as i, useMemo as s } from "react";
+import { IconButton as u } from "@chakra-ui/react";
+import { getIconSizeFromButtonSize as f } from "./helper.js";
+import { Icon as p } from "../icon/icon.js";
+const S = i(
+  ({ icon: r, size: o = "md", variant: n = "secondary", ...m }, e) => {
+    const c = s(() => f(o), [o]);
+    return /* @__PURE__ */ t(
+      u,
+      {
+        ref: e,
+        isRound: !0,
+        style: { aspectRatio: 1 },
+        variant: n,
+        size: o,
+        icon: /* @__PURE__ */ t(p, { size: c, icon: r }),
+        ...m
+      }
+    );
+  }
+);
+export {
+  S as IconButton
+};

package/dist/components/icon-button/icon-button.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=icon-button.spec.d.ts.map

package/dist/components/icon-button/icon-button.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/icon-button.spec.tsx"],"names":[],"mappings":""}

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,3 @@
+export { IconButton } from './icon-button.js';
+export type { IconButtonProps } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/icon-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/icon-button/types.d.ts

@@ -0,0 +1,22 @@
+import { IconButtonProps as ChakraIconButtonProps, ResponsiveValue } from '@chakra-ui/react';
+import { CustomChakraBoxProps, MarginProps, PaddingProps } from '../../theme/index.js';
+import { Icons } from '../icon/index.js';
+type CustomStyleProps = CustomChakraBoxProps & MarginProps & PaddingProps;
+type CustomProperties = {
+    /**
+     * The icon to be displayed in the button. The Icons enum can be found in the Icon component.
+     */
+    icon: Icons;
+    /**
+     * Appearance variant for Button.
+     */
+    variant?: "primary" | "secondary" | "ghost" | "tertiary";
+    /**
+     * The size of the button, defaults to md
+     */
+    size?: ResponsiveValue<"lg" | "sm" | "md">;
+};
+type ChakraIconButtonProperties = Pick<ChakraIconButtonProps, "aria-label" | "isDisabled" | "onClick" | "type" | "isLoading" | "onKeyDown">;
+export type IconButtonProps = CustomProperties & ChakraIconButtonProperties & CustomStyleProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/icon-button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,IAAI,qBAAqB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAClG,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE1E,KAAK,gBAAgB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IACzD;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACrC,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,CAC5E,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,0BAA0B,GAAG,gBAAgB,CAAC"}

package/dist/components/image/image.composition.d.ts

@@ -0,0 +1,3 @@
+export declare const BasicImage: () => import("react/jsx-runtime").JSX.Element;
+export declare const ImageWithFallback: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image.composition.d.ts.map

package/dist/components/image/image.composition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/image/image.composition.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,+CAMtB,CAAC;AACF,eAAO,MAAM,iBAAiB,+CAO7B,CAAC"}

package/dist/components/image/image.d.ts

@@ -0,0 +1,10 @@
+import { ThemeStyleProps } from '../../theme/index.js';
+import { ImageProps as ChakraImageProps } from '@chakra-ui/react';
+export type ImageProps = Pick<ChakraImageProps, "alt" | "src" | "srcSet" | "fit" | "objectFit" | "fallback" | "fallbackSrc" | "fallbackStrategy" | "align" | "crossOrigin" | "htmlHeight" | "htmlWidth" | "ignoreFallback" | "loading" | "onError" | "onLoad" | "sizes" | "boxSize" | "aspectRatio"> & ThemeStyleProps;
+/**
+ * Renders an image with support for fallbacks.
+ *
+ * @see Docs https://bit.cloud/caspeco/casper-ui-library/components/image
+ */
+export declare function Image({ ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image.d.ts.map

package/dist/components/image/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../lib/components/image/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAwB,KAAK,UAAU,IAAI,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE7F,MAAM,MAAM,UAAU,GAAG,IAAI,CAC5B,gBAAgB,EACd,KAAK,GACL,KAAK,GACL,QAAQ,GACR,KAAK,GACL,WAAW,GACX,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,OAAO,GACP,aAAa,GACb,YAAY,GACZ,WAAW,GACX,gBAAgB,GAChB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,aAAa,CACf,GACA,eAAe,CAAC;AAEjB;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAE7C"}

package/dist/components/image/image.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Image as o } from "@chakra-ui/react";
+function a({ ...m }) {
+  return /* @__PURE__ */ r(o, { ...m });
+}
+export {
+  a as Image
+};

package/dist/components/image/image.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image.spec.d.ts.map

package/dist/components/image/image.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/image/image.spec.tsx"],"names":[],"mappings":""}

package/dist/components/image/index.d.ts

@@ -0,0 +1,3 @@
+export { Image } from './image.js';
+export type { ImageProps } from './image.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/image-upload/image-cropper.d.ts

@@ -0,0 +1,11 @@
+import { Crop, ImageUploadAspectRatio } from './types.js';
+interface ImageCropperProps {
+    src: string;
+    crop: Crop | null;
+    onCropCallback: (crop: Crop) => void;
+    setPreviewImage: (base64: string) => void;
+    aspectRatio: ImageUploadAspectRatio;
+}
+export declare function ImageCropper({ src, crop: currentCrop, onCropCallback, setPreviewImage, aspectRatio, }: ImageCropperProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=image-cropper.d.ts.map

package/dist/components/image-upload/image-cropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.d.ts","sourceRoot":"","sources":["../../../lib/components/image-upload/image-cropper.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAqB,KAAK,IAAI,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE/E,UAAU,iBAAiB;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,sBAAsB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,EAC5B,GAAG,EACH,IAAI,EAAE,WAAW,EACjB,cAAc,EACd,eAAe,EACf,WAAW,GACX,EAAE,iBAAiB,2CA2fnB"}

package/dist/components/image-upload/image-cropper.helper.d.ts

@@ -0,0 +1,63 @@
+import { Crop, HandlePosition, ImageUploadAspectRatio } from './types.js';
+export declare enum ScalingDirection {
+    ToFullSize = 0,
+    ToDisplayedSize = 1
+}
+/**
+ * Adjust the crop area to match the full size of the original image.
+ *
+ * @param {Crop} crop - The crop area defined on the displayed image.
+ * @param {HTMLImageElement} originalImage - The original image element.
+ * @param {Object} displayedImage - The size of the image displayed to the user.
+ * @param {number} displayedImage.width - The width of the displayed image.
+ * @param {number} displayedImage.height - The height of the displayed image.
+ * @returns {Crop} The adjusted crop area that applies to the full-size image.
+ */
+export declare function adjustCrop(crop: Crop, originalImage: HTMLImageElement, displayedImageSize: {
+    width: number;
+    height: number;
+}, direction: ScalingDirection): Crop;
+/**
+ * Checks if a given point (x, y) is within a rectangle area.
+ *
+ * @param {number} x - The x coordinate of the point.
+ * @param {number} y - The y coordinate of the point.
+ * @param {number} rectX - The x coordinate of the rectangle's top left corner.
+ * @param {number} rectY - The y coordinate of the rectangle's top left corner.
+ * @param {number} rectWidth - The width of the rectangle.
+ * @param {number} rectHeight - The height of the rectangle.
+ * @returns {boolean} Returns true if the point is inside the rectangle, and false otherwise.
+ */
+export declare function isPointInsideRect(x: number, y: number, rectX: number, rectY: number, rectWidth: number, rectHeight: number): boolean;
+/**
+ * Calculates the positions of the four handles in the cropping area.
+ *
+ * @param {Crop} crop - An object defining the position and dimensions of the crop area.
+ * @returns {HandlePosition[]} An array of objects, each representing the position of a handle in the cropping area. Each object contains the handle's ID, its corner, and its x and y coordinates.
+ */
+export declare const calculateHandlePositions: (crop: Crop, handleSize: number) => HandlePosition[];
+/**
+ * Determines the cursor style based on the user's mouse position and other factors.
+ *
+ * @param {React.MouseEvent<HTMLCanvasElement>} e - The mouse event from a React event handler.
+ * @param {React.RefObject<HTMLCanvasElement>} canvasRef - A reference to the canvas element.
+ * @param {Crop} crop - An object defining the position and dimensions of the crop area.
+ * @param {number} handleSize - The size of the handles used for resizing the crop area.
+ * @param {HandlePosition[]} handlePositions - An array of handle positions for the crop area.
+ * @returns {string} The cursor style. Can be one of the following: the ID of the hovered handle ('nw', 'ne', 'se', 'sw'), 'move', or 'crosshair'.
+ */
+export declare function getCursorStyle(e: React.MouseEvent<HTMLCanvasElement>, canvasRef: React.RefObject<HTMLCanvasElement>, crop: Crop, handleSize: number, handlePositions: HandlePosition[]): string;
+/**
+ * Returns the coordinates of the opposite corner based on the given corner in the cropping area.
+ *
+ * @param {Crop} crop - An object defining the position and dimensions of the crop area.
+ * @param {string} corner - The corner of the cropping area. Can be one of the following: 'top-left', 'top-right', 'bottom-left', 'bottom-right'.
+ * @returns {{x: number, y: number}} The coordinates of the opposite corner.
+ * @throws Will throw an error if the provided corner value is not valid.
+ */
+export declare function getOppositeCorner(crop: Crop, corner: string): {
+    x: number;
+    y: number;
+};
+export declare function getAspectRatioValue(aspectRatio: ImageUploadAspectRatio): number;
+//# sourceMappingURL=image-cropper.helper.d.ts.map

package/dist/components/image-upload/image-cropper.helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.helper.d.ts","sourceRoot":"","sources":["../../../lib/components/image-upload/image-cropper.helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,cAAc,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjF,oBAAY,gBAAgB;IAC3B,UAAU,IAAA;IACV,eAAe,IAAA;CACf;AACD;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CACzB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,gBAAgB,EAC/B,kBAAkB,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EACrD,SAAS,EAAE,gBAAgB,GACzB,IAAI,CAeN;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAChC,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,GAChB,OAAO,CAET;AAED;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,GAAI,MAAM,IAAI,EAAE,YAAY,MAAM,KAAG,cAAc,EAyBvF,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC7B,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EACtC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAC7C,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,MAAM,EAClB,eAAe,EAAE,cAAc,EAAE,GAC/B,MAAM,CAyBR;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAatF;AAED,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,sBAAsB,GAAG,MAAM,CAW/E"}

package/dist/components/image-upload/image-cropper.helper.js

@@ -0,0 +1,89 @@
+import { ImageUploadAspectRatio as a } from "./types.js";
+var y = /* @__PURE__ */ ((t) => (t[t.ToFullSize = 0] = "ToFullSize", t[t.ToDisplayedSize = 1] = "ToDisplayedSize", t))(y || {});
+function c(t, e, s, n) {
+  const o = e.width / s.width, i = e.height / s.height, r = n === 0 ? o : 1 / o, u = n === 0 ? i : 1 / i;
+  return {
+    left: Math.round(t.left * r),
+    top: Math.round(t.top * u),
+    width: Math.round(t.width * r),
+    height: Math.round(t.height * u)
+  };
+}
+function d(t, e, s, n, o, i) {
+  return t >= s && t <= s + o && e >= n && e <= n + i;
+}
+const x = (t, e) => [
+  {
+    id: "nwse-resize",
+    corner: "top-left",
+    x: t.left - e / 2,
+    y: t.top - e / 2
+  },
+  {
+    id: "nesw-resize",
+    corner: "top-right",
+    x: t.left + t.width - e / 2,
+    y: t.top - e / 2
+  },
+  {
+    id: "nesw-resize",
+    corner: "bottom-left",
+    x: t.left - e / 2,
+    y: t.top + t.height - e / 2
+  },
+  {
+    id: "nwse-resize",
+    corner: "bottom-right",
+    x: t.left + t.width - e / 2,
+    y: t.top + t.height - e / 2
+  }
+];
+function m(t, e, s, n, o) {
+  if (!e.current) return "crosshair";
+  const r = e.current.getBoundingClientRect(), u = t.clientX - r.left, h = t.clientY - r.top, w = d(
+    u,
+    h,
+    s.left,
+    s.top,
+    Math.abs(s.width),
+    Math.abs(s.height)
+  ), l = o.find(
+    (f) => d(u, h, f.x, f.y, n, n)
+  );
+  return l ? l.id : w ? "move" : "crosshair";
+}
+function v(t, e) {
+  switch (e) {
+    case "top-left":
+      return { x: t.left + t.width, y: t.top + t.height };
+    case "top-right":
+      return { x: t.left, y: t.top + t.height };
+    case "bottom-left":
+      return { x: t.left + t.width, y: t.top };
+    case "bottom-right":
+      return { x: t.left, y: t.top };
+    default:
+      throw new Error(`Invalid corner: ${e}`);
+  }
+}
+function C(t) {
+  switch (t) {
+    case a.ThirtyTwoByNine:
+      return 32 / 9;
+    case a.SixteenByNine:
+      return 16 / 9;
+    case a.OneByOne:
+      return 1;
+    default:
+      throw new Error("Invalid aspect ratio value");
+  }
+}
+export {
+  y as ScalingDirection,
+  c as adjustCrop,
+  x as calculateHandlePositions,
+  C as getAspectRatioValue,
+  m as getCursorStyle,
+  v as getOppositeCorner,
+  d as isPointInsideRect
+};

package/dist/components/image-upload/image-cropper.js

@@ -0,0 +1,196 @@
+import { jsx as J } from "react/jsx-runtime";
+import { useRef as I, useState as K, useEffect as _ } from "react";
+import { adjustCrop as W, ScalingDirection as H, getAspectRatioValue as B, calculateHandlePositions as z, getCursorStyle as N, isPointInsideRect as P, getOppositeCorner as Q } from "./image-cropper.helper.js";
+function ee({
+  src: Y,
+  crop: F,
+  onCropCallback: V,
+  setPreviewImage: k,
+  aspectRatio: A
+}) {
+  const R = I(null), g = I(null), v = I(null), T = I(null), h = I({ left: 0, top: 0, width: 0, height: 0 }), u = I({
+    left: 0,
+    top: 0
+  }), [G, U] = K("crosshair"), b = 10, D = (e) => {
+    if (g.current && v.current) {
+      const t = {
+        width: v.current.width,
+        height: v.current.height
+      }, o = W(h.current, g.current, t, e);
+      V(o);
+    }
+  }, L = (e, t, o, w) => {
+    e.fillStyle = "rgba(0, 0, 0, 0.5)", e.fillRect(0, 0, t.width, t.height), e.save(), e.beginPath(), e.rect(o.left, o.top, o.width, o.height), e.clip(), g.current && e.drawImage(g.current, 0, 0, t.width, t.height), e.restore(), e.strokeStyle = "rgba(255, 255, 255, 0.88)", e.lineWidth = 1, e.strokeRect(o.left, o.top, o.width, o.height), w !== "new-selection" && z(o, b).forEach(({ x: d, y: s, corner: S }) => {
+      const i = b / 2, p = 3, M = (C, c = 0) => {
+        e.strokeStyle = C, e.lineWidth = p + c, e.beginPath();
+        const n = Math.min(o.width / 2, 16), r = Math.min(o.height / 2, 16);
+        switch (S) {
+          case "bottom-left":
+            e.moveTo(d + i, s - r + i), e.lineTo(d + i, s + i), e.lineTo(d + n + i, s + i);
+            break;
+          case "bottom-right":
+            e.moveTo(d + i, s - r + i), e.lineTo(d + i, s + i), e.lineTo(d - n + i, s + i);
+            break;
+          case "top-left":
+            e.moveTo(d + i, s + r + i), e.lineTo(d + i, s + i), e.lineTo(d + n + i, s + i);
+            break;
+          case "top-right":
+            e.moveTo(d + i, s + r + i), e.lineTo(d + i, s + i), e.lineTo(d - n + i, s + i);
+            break;
+        }
+        e.stroke();
+      };
+      M("#000", 1), M("#FFF");
+    });
+  }, j = () => {
+    if (R.current && g.current && v.current) {
+      const e = document.createElement("canvas");
+      e.width = g.current.width, e.height = g.current.height;
+      const t = e.getContext("2d"), o = {
+        width: v.current.width,
+        height: v.current.height
+      }, w = W(
+        h.current,
+        g.current,
+        o,
+        H.ToFullSize
+      );
+      if (t)
+        return t.drawImage(
+          g.current,
+          // Reference to the original image
+          w.left,
+          w.top,
+          w.width,
+          w.height,
+          0,
+          0,
+          e.width,
+          e.height
+        ), e.toDataURL("image/jpeg");
+    }
+    return null;
+  };
+  _(() => {
+    const e = R.current, t = e == null ? void 0 : e.getContext("2d");
+    if (!e || !t) return;
+    const o = new Image();
+    o.src = Y, o.onload = () => {
+      const { width: s } = o, { height: S } = o, i = Math.min(528 / s, 418 / S), p = s * i, M = S * i;
+      e.width = p, e.height = M, t.drawImage(o, 0, 0, e.width, e.height), g.current = o, g.current && t.drawImage(g.current, 0, 0, e.width, e.height), v.current = {
+        width: p,
+        height: M
+      };
+      let C, c, n;
+      if (F)
+        n = W(
+          F,
+          g.current,
+          v.current,
+          H.ToDisplayedSize
+        );
+      else {
+        const r = B(A);
+        r ? p / M < r ? (C = p, c = C / r) : (c = M, C = c * r) : (C = p, c = M), n = {
+          width: C,
+          height: c,
+          left: (p - C) / 2,
+          top: (M - c) / 2
+        };
+      }
+      h.current = n, L(t, e, n, T.current), D(H.ToFullSize), k(j() || "");
+    };
+  }, [Y]);
+  const y = () => {
+    const e = R.current, t = e == null ? void 0 : e.getContext("2d");
+    !t || !e || (t.clearRect(0, 0, e.width, e.height), g.current && t.drawImage(g.current, 0, 0, e.width, e.height), L(t, e, h.current, null));
+  }, O = (e) => {
+    const t = N(
+      e,
+      R,
+      h.current,
+      b,
+      z(h.current, b)
+    );
+    U(t);
+  }, X = (e) => {
+    var M, C;
+    const t = R.current, o = t == null ? void 0 : t.getContext("2d");
+    if (!t || !o) return;
+    const w = t.getBoundingClientRect(), d = e.clientX - w.left, s = e.clientY - w.top;
+    let S = 0, i = 0;
+    u.current && (S = d - u.current.left, i = s - u.current.top);
+    let p = { ...h.current };
+    if (T.current === "new-selection" || T.current === "resize") {
+      if (!u.current) return;
+      const c = B(A);
+      let n = 0, r = 0, m = S, f = i, l = u.current.left, a = u.current.top;
+      m >= 0 && f >= 0 ? (n = Math.min(t.width - l, m), r = n / c, r > f && (r = Math.min(t.height - a, f), n = r * c), l + n >= t.width && (n = t.width - l, r = n / c), a + r >= t.height && (r = t.height - a, n = r * c)) : m >= 0 && f < 0 ? (f = -f, n = Math.min(t.width - l, m), r = n / c, r > f && (r = f, n = r * c), a = u.current.top - r, a <= 0 && (r += a, a = 0, n = r * c)) : m < 0 && f >= 0 ? (l = Math.max(0, l + m), m = -m, n = m, r = n / c, r > f && (r = Math.min(t.height - a, f), n = r * c), l = u.current.left - n, l <= 0 && (n += l, l = 0, r = n / c), a + r >= t.height && (r = t.height - a, n = r * c, l = u.current.left - n)) : m < 0 && f < 0 && (l = Math.max(0, l + m), a = Math.max(0, a + f), m = -m, f = -f, n = m, r = n / c, r > f && (r = f, n = r * c), l = u.current.left - n, a = u.current.top - r, l <= 0 && (n += l, l = 0, r = n / c), a <= 0 && (r += a, a = 0, n = r * c), l + n > t.width && (n = t.width - l, r = n / c), a + r > t.height && (r = t.height - a, n = r * c), l = u.current.left - n, a = u.current.top - r), p = {
+        left: l,
+        top: a,
+        width: n,
+        height: r
+      };
+    } else if (T.current === "move") {
+      if (!u.current) return;
+      let c = Math.min(Math.max(h.current.left + S, 0), t.width - h.current.width), n = Math.min(Math.max(h.current.top + i, 0), t.height - h.current.height);
+      c = Math.max(0, Math.min(c, t.width - h.current.width)), n = Math.max(0, Math.min(n, t.height - h.current.height)), u.current = {
+        left: (((M = u.current) == null ? void 0 : M.left) || 0) + c - h.current.left,
+        top: (((C = u.current) == null ? void 0 : C.top) || 0) + n - h.current.top
+      }, p = { ...h.current, left: c, top: n };
+    }
+    h.current = p, y();
+  }, E = () => {
+    window.removeEventListener("mouseup", E), window.removeEventListener("mousemove", X), document.body.style.userSelect = "", T.current = null, y(), D(H.ToFullSize), k(j() || "");
+  };
+  function q(e) {
+    const t = R.current;
+    if (!t) return;
+    document.body.style.userSelect = "none";
+    const o = t.getBoundingClientRect(), w = z(h.current, b).find(
+      (i) => P(
+        e.clientX - o.left,
+        e.clientY - o.top,
+        i.x,
+        i.y,
+        b,
+        b
+      )
+    ), d = e.clientX - o.left, s = e.clientY - o.top, S = P(
+      e.clientX - o.left,
+      e.clientY - o.top,
+      h.current.left,
+      h.current.top,
+      h.current.width,
+      h.current.height
+    );
+    if (w) {
+      const i = Q(h.current, w.corner);
+      T.current = "resize", u.current = { left: i.x, top: i.y };
+    } else S ? (u.current = {
+      left: e.clientX - o.left,
+      top: e.clientY - o.top
+    }, T.current = "move") : (u.current = { left: d, top: s }, T.current = "new-selection", h.current = {
+      left: d,
+      top: s,
+      width: 0,
+      height: 0
+    });
+    window.addEventListener("mouseup", E), window.addEventListener("mousemove", X);
+  }
+  return _(() => () => {
+    window.removeEventListener("mouseup", E), window.removeEventListener("mousemove", X);
+  }, []), /* @__PURE__ */ J(
+    "canvas",
+    {
+      ref: R,
+      onMouseDown: q,
+      onMouseMove: O,
+      draggable: !1,
+      style: { cursor: G, margin: "0 auto" }
+    }
+  );
+}
+export {
+  ee as ImageCropper
+};

package/dist/components/image-upload/image-upload-dropzone.d.ts

@@ -0,0 +1,13 @@
+import { Locales } from './types.js';
+interface IDropzoneProps {
+    locale: Locales;
+    setFileItem: (fileItem: FileItem) => void;
+    setHasImageChanged: (hasImageChanged: boolean) => void;
+}
+export type FileItem = {
+    fileName: string;
+    data: string;
+};
+declare function Dropzone({ locale, setFileItem, setHasImageChanged }: IDropzoneProps): import("react/jsx-runtime").JSX.Element;
+export default Dropzone;
+//# sourceMappingURL=image-upload-dropzone.d.ts.map

package/dist/components/image-upload/image-upload-dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload-dropzone.d.ts","sourceRoot":"","sources":["../../../lib/components/image-upload/image-upload-dropzone.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,UAAU,cAAc;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,kBAAkB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD;AAED,MAAM,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,cAAc,2CA0H5E;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/image-upload/image-upload-dropzone.js

@@ -0,0 +1,82 @@
+import { jsxs as l, Fragment as U, jsx as n } from "react/jsx-runtime";
+import { Box as g, Text as h, Input as k } from "@chakra-ui/react";
+import B, { useState as f } from "react";
+import { ImageIconLarge as L } from "./image-upload-icons.js";
+import { sanitizeFilename as V } from "./image-upload-helper.js";
+import { translations as o } from "./translations.js";
+import { Alert as x } from "../alert/alert.js";
+import { ThemeRadiusVariable as O, ThemeColorVariable as d, ThemeSpaceVariable as D } from "../../theme/theme-types.js";
+function X({ locale: i, setFileItem: b, setHasImageChanged: F }) {
+  const [T, s] = f(!1), [y, c] = f(!1), [R, m] = f(!1), a = B.createRef();
+  function z(e, t) {
+    const r = new FileReader();
+    r.onload = t, r.readAsDataURL(e);
+  }
+  const C = ["image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"], p = (e) => {
+    const t = e.target;
+    if (!t || !t.files) return;
+    const r = t.files[0];
+    if (!C.includes(r.type)) {
+      m(!0);
+      return;
+    }
+    m(!1), r.size > 3145728 ? c(!0) : (c(!1), z(r, (S) => {
+      var u;
+      const j = (u = S.target) == null ? void 0 : u.result, E = { fileName: V(r.name), data: j };
+      b(E), F(!0);
+    }));
+  }, I = () => {
+    a.current && a.current.click();
+  }, w = (e) => {
+    e.preventDefault(), e.dataTransfer.items && e.dataTransfer.items.length > 0 && s(!0);
+  }, A = () => {
+    s(!1);
+  }, M = (e) => {
+    if (e.preventDefault(), !!a.current && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const t = new DataTransfer();
+      Array.from(e.dataTransfer.files).forEach((r) => {
+        t.items.add(r);
+      }), a.current.files = t.files, p({
+        target: a.current
+      }), e.dataTransfer.clearData(), s(!1);
+    }
+  };
+  return /* @__PURE__ */ l(U, { children: [
+    /* @__PURE__ */ l(
+      g,
+      {
+        p: "108px",
+        bg: d.BackgroundDisabled,
+        borderWidth: "1px",
+        borderColor: T ? d.OnSurfaceBorder : "transparent",
+        transition: "150ms ease",
+        borderRadius: O.Medium,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDir: "column",
+        onDragOver: w,
+        onDragLeave: A,
+        onDrop: M,
+        onClick: I,
+        cursor: "pointer",
+        children: [
+          /* @__PURE__ */ n(L, {}),
+          /* @__PURE__ */ n(h, { children: o[i].pullAndDrop }),
+          /* @__PURE__ */ l(h, { children: [
+            "eller",
+            " ",
+            /* @__PURE__ */ n(g, { as: "span", color: d.Accent, textDecoration: "underline", children: o[i].upload }),
+            "."
+          ] }),
+          /* @__PURE__ */ n(k, { type: "file", ref: a, display: "none", onChange: p })
+        ]
+      }
+    ),
+    R && /* @__PURE__ */ n(x, { mt: D.Medium, type: "error", children: o[i].unsupportedFormat }),
+    y && /* @__PURE__ */ n(x, { mt: D.Medium, type: "error", children: o[i].sizeExceeded })
+  ] });
+}
+export {
+  X as default
+};