@snokam/ui 1.0.0

package/dist/components/animated-blobs/styled.js

@@ -0,0 +1,86 @@
+"use client";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+const float1 = keyframes `
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  25% { transform: translate(20px, -30px) rotate(5deg); }
+  50% { transform: translate(-10px, -50px) rotate(-3deg); }
+  75% { transform: translate(-30px, -20px) rotate(2deg); }
+`;
+const float2 = keyframes `
+  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
+  33% { transform: translate(-40px, 30px) rotate(-8deg) scale(1.05); }
+  66% { transform: translate(30px, -20px) rotate(5deg) scale(0.95); }
+`;
+const float3 = keyframes `
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  50% { transform: translate(50px, 40px) rotate(10deg); }
+`;
+const pulse = keyframes `
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+`;
+export const BlobLayer = styled.div `
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+`;
+export const Blob = styled.div `
+  position: absolute;
+  width: ${(p) => p.size}px;
+  height: ${(p) => p.size}px;
+  top: ${(p) => p.top};
+  left: ${(p) => p.left};
+  transition:
+    top 0.5s ease-out,
+    left 0.5s ease-out,
+    width 0.5s ease-out,
+    height 0.5s ease-out;
+  animation: ${(p) => p.animationIndex === 1
+    ? float1
+    : p.animationIndex === 2
+        ? float2
+        : float3}
+    ${(p) => 15 + (p.animationIndex || 0) * 5}s ease-in-out infinite;
+  animation-delay: ${(p) => p.delay || 0}s;
+
+  @media (max-width: 768px) {
+    width: ${(p) => p.size * 0.5}px;
+    height: ${(p) => p.size * 0.5}px;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+    filter: blur(2px);
+
+    path,
+    circle {
+      fill: ${(p) => p.color};
+      opacity: 0.5;
+      animation: ${pulse} 8s ease-in-out infinite;
+      animation-delay: ${(p) => (p.delay || 0) + 2}s;
+    }
+  }
+`;
+export const GradientOverlay = styled.div `
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 0%,
+    ${(p) => p.baseColor}88 50%,
+    ${(p) => p.baseColor} 100%
+  );
+  pointer-events: none;
+`;
+export const BlobWrapper = styled.div `
+  position: relative;
+  overflow-x: clip;
+  background: var(--color-primary);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+//# sourceMappingURL=styled.js.map

package/dist/components/animated-blobs/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/animated-blobs/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,GAAG,SAAS,CAAA;;;;;CAKvB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;;CAIvB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;CAGvB,CAAC;AAEF,MAAM,KAAK,GAAG,SAAS,CAAA;;;CAGtB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAO5B;;WAES,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;YACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;SAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG;UACX,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;;;;;;eAMR,CAAC,CAAC,EAAE,EAAE,CACf,CAAC,CAAC,cAAc,KAAK,CAAC;IACpB,CAAC,CAAC,MAAM;IACR,CAAC,CAAC,CAAC,CAAC,cAAc,KAAK,CAAC;QACtB,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,MAAM;MACZ,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,GAAG,CAAC;qBACxB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;;;aAG3B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG;cAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG;;;;;;;;;;cAUnB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;;mBAET,KAAK;yBACC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC;;;CAGjD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;;;MAM1D,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;MAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;;;CAGvB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOpC,CAAC"}

package/dist/components/app-error/index.d.ts

@@ -0,0 +1,10 @@
+export interface AppErrorProps {
+    reset?: () => void;
+    title?: string;
+    message?: string;
+    supportHref?: string;
+    supportLabel?: string;
+}
+export declare function AppError({ reset, title, message, supportHref, supportLabel, }: AppErrorProps): import("react").JSX.Element;
+export default AppError;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/app-error/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app-error/index.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAgD,EAChD,OAAmJ,EACnJ,WAAW,EACX,YAA+B,GAChC,EAAE,aAAa,+BAmBf;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/app-error/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Styled from "./styled";
+export function AppError({ reset, title = "Innholdet er midlertidig utilgjengelig", message = "Vi klarte ikke å hente innholdet akkurat nå. Hvis bedriften nettopp er satt opp, kan det hende noen tjenester fortsatt må konfigureres.", supportHref, supportLabel = "Gå til oppsett", }) {
+    return (_jsx(Styled.Wrapper, { children: _jsxs(Styled.Panel, { children: [_jsx(Styled.Title, { children: title }), _jsx(Styled.Message, { children: message }), _jsxs(Styled.Actions, { children: [reset && (_jsx(Styled.Button, { onClick: () => reset(), children: "Pr\u00F8v igjen" })), supportHref && (_jsx(Styled.SecondaryLink, { href: supportHref, children: supportLabel }))] })] }) }));
+}
+export default AppError;
+//# sourceMappingURL=index.js.map

package/dist/components/app-error/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app-error/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AAUnC,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,GAAG,wCAAwC,EAChD,OAAO,GAAG,yIAAyI,EACnJ,WAAW,EACX,YAAY,GAAG,gBAAgB,GACjB;IACd,OAAO,CACL,KAAC,MAAM,CAAC,OAAO,cACb,MAAC,MAAM,CAAC,KAAK,eACX,KAAC,MAAM,CAAC,KAAK,cAAE,KAAK,GAAgB,EACpC,KAAC,MAAM,CAAC,OAAO,cAAE,OAAO,GAAkB,EAC1C,MAAC,MAAM,CAAC,OAAO,eACZ,KAAK,IAAI,CACR,KAAC,MAAM,CAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,gCAA4B,CAClE,EACA,WAAW,IAAI,CACd,KAAC,MAAM,CAAC,aAAa,IAAC,IAAI,EAAE,WAAW,YACpC,YAAY,GACQ,CACxB,IACc,IACJ,GACA,CAClB,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/app-error/styled.d.ts

@@ -0,0 +1,29 @@
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Panel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const Message: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const Actions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const SecondaryLink: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+//# sourceMappingURL=styled.d.ts.map

package/dist/components/app-error/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/app-error/styled.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;yGAOnB,CAAC;AAEF,eAAO,MAAM,KAAK;;;yGAajB,CAAC;AAEF,eAAO,MAAM,KAAK;;;iHAKjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;qHAKnB,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;qHAclB,CAAC;AAEF,eAAO,MAAM,aAAa;;;qHAczB,CAAC"}

package/dist/components/app-error/styled.js

@@ -0,0 +1,72 @@
+import styled from "@emotion/styled";
+export const Wrapper = styled.div `
+  min-height: 60vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  background: var(--o-card-bg, var(--color-light-blue));
+`;
+export const Panel = styled.div `
+  max-width: 520px;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 40px 32px;
+  border: 1px solid var(--o-border, rgba(7, 29, 65, 0.1));
+  border-radius: 16px;
+  background: var(--o-surface-2, #fff);
+  color: var(--o-text, var(--color-primary));
+  box-shadow: var(--o-shadow-card, 0 8px 24px rgba(7, 29, 65, 0.08));
+`;
+export const Title = styled.h1 `
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--o-text, var(--color-primary));
+`;
+export const Message = styled.p `
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--o-text-muted, rgba(7, 29, 65, 0.7));
+`;
+export const Actions = styled.div `
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 8px;
+`;
+export const Button = styled.button `
+  appearance: none;
+  cursor: pointer;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 20px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  background: var(--o-cyan, var(--color-blue));
+  color: var(--o-cyan-ink, #fff);
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+`;
+export const SecondaryLink = styled.a `
+  display: inline-flex;
+  align-items: center;
+  border-radius: 8px;
+  padding: 10px 20px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-decoration: none;
+  border: 1px solid var(--o-border-strong, rgba(7, 29, 65, 0.2));
+  color: var(--o-text, var(--color-primary));
+
+  &:hover {
+    background: var(--o-hover-tint, rgba(7, 29, 65, 0.04));
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/dist/components/app-error/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/app-error/styled.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAa9B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKhC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;CAclC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;;;;;;;;CAcpC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Autocomplete } from "@mui/material";
+export type { AutocompleteProps } from "@mui/material";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/autocomplete/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { Autocomplete } from "@mui/material";
+//# sourceMappingURL=index.js.map

package/dist/components/autocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/autocomplete/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,4 @@
+import { AvatarProps } from "@mui/material";
+export type { AvatarProps };
+export declare const Avatar: (props: AvatarProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjE,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,gCAA6B,CAAC"}

package/dist/components/avatar/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as MuiAvatar } from "@mui/material";
+export const Avatar = (props) => _jsx(MuiAvatar, { ...props });
+//# sourceMappingURL=index.js.map

package/dist/components/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,IAAI,SAAS,EAAe,MAAM,eAAe,CAAC;AAIjE,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC"}

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

@@ -0,0 +1,4 @@
+import { BadgeProps } from "@mui/material";
+export type { BadgeProps };
+export declare const Badge: (props: BadgeProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,UAAU,EAAE,MAAM,eAAe,CAAC;AAE9D,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,gCAA4B,CAAC"}

package/dist/components/badge/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge as MuiBadge } from "@mui/material";
+export const Badge = (props) => _jsx(MuiBadge, { ...props });
+//# sourceMappingURL=index.js.map

package/dist/components/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/badge/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAc,MAAM,eAAe,CAAC;AAI9D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC"}

package/dist/components/blob/Blob.d.ts

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from "react";
+import { BlobShape, BlobColor, ShadowConfig } from "./types";
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    background?: React.ReactNode;
+    maskSize?: string;
+    shape?: BlobShape;
+    color?: BlobColor;
+    isFilled?: boolean;
+    shadow?: boolean | ShadowConfig;
+    children?: React.ReactNode;
+}
+declare const _default: React.MemoExoticComponent<({ color, shape, isFilled, shadow, children, background, maskSize, popover, ...restOfProps }: Props) => React.JSX.Element>;
+export default _default;
+//# sourceMappingURL=Blob.d.ts.map

package/dist/components/blob/Blob.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blob.d.ts","sourceRoot":"","sources":["../../../src/components/blob/Blob.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAQ,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAkB,YAAY,EAAE,MAAM,SAAS,CAAC;AAG7E,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;gJAcE,KAAK;AAgER,wBAA0B"}

package/dist/components/blob/Blob.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { memo } from "react";
+import { shapeData } from "./shapes";
+import Styled from "./styled";
+import { BlobShape, BlobColor, ShadowPosition } from "./types";
+import { getMaskImage, getStyling, getRandomBlobShape } from "./utils";
+const DEFAULT_SHADOW_COLOR = "rgba(17, 207, 127, 0.3)";
+const Blob = ({ color = BlobColor.DarkBlue, shape = BlobShape.RANDOM, isFilled, shadow, children, background, maskSize = "100%", popover, ...restOfProps }) => {
+    const shadowConfig = shadow
+        ? {
+            enabled: true,
+            position: typeof shadow === "object"
+                ? (shadow.position ?? ShadowPosition.BottomRight)
+                : ShadowPosition.BottomRight,
+            color: typeof shadow === "object"
+                ? (shadow.color ?? DEFAULT_SHADOW_COLOR)
+                : DEFAULT_SHADOW_COLOR,
+            scale: typeof shadow === "object" ? (shadow.scale ?? 1) : 1,
+        }
+        : {
+            enabled: false,
+            position: ShadowPosition.BottomRight,
+            color: DEFAULT_SHADOW_COLOR,
+            scale: 1,
+        };
+    const shapeInfo = shapeData[shape === BlobShape.RANDOM ? getRandomBlobShape() : shape];
+    const { shapeElement, shapeAttrs, id } = shapeInfo;
+    const maskImage = getMaskImage(shapeElement, shapeAttrs);
+    const shapeStyle = getStyling(color, isFilled ?? false);
+    return (_jsxs(Styled.BlobWrapper, { shadow: shadowConfig.enabled, shadowPosition: shadowConfig.position, shadowColor: shadowConfig.color, shadowScale: shadowConfig.scale, ...restOfProps, children: [_jsxs(Styled.Content, { children: [_jsxs(Styled.BlobSVG, { viewBox: "0 0 1080 1080", children: [React.createElement(shapeElement, {
+                                className: "cls-1",
+                                id,
+                                ...shapeStyle,
+                                ...shapeAttrs,
+                                clipPath: `url(#${id}Clip)`,
+                            }), _jsx("clipPath", { id: `${id}Clip`, children: _jsx("use", { xlinkHref: `#${id}` }) })] }), _jsx(Styled.Children, { maskImage: maskImage, maskSize: maskSize, color: color, children: children })] }), _jsx(Styled.Background, { maskImage: maskImage, maskSize: maskSize, children: background })] }));
+};
+export default memo(Blob);
+//# sourceMappingURL=Blob.js.map

package/dist/components/blob/Blob.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blob.js","sourceRoot":"","sources":["../../../src/components/blob/Blob.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAkB,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAgB,MAAM,SAAS,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAYvE,MAAM,oBAAoB,GAAG,yBAAyB,CAAC;AAEvD,MAAM,IAAI,GAAG,CAAC,EACZ,KAAK,GAAG,SAAS,CAAC,QAAQ,EAC1B,KAAK,GAAG,SAAS,CAAC,MAAM,EACxB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,QAAQ,GAAG,MAAM,EACjB,OAAO,EACP,GAAG,WAAW,EACR,EAAE,EAAE;IACV,MAAM,YAAY,GAAG,MAAM;QACzB,CAAC,CAAC;YACE,OAAO,EAAE,IAAI;YACb,QAAQ,EACN,OAAO,MAAM,KAAK,QAAQ;gBACxB,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAI,cAAc,CAAC,WAAW,CAAC;gBACjD,CAAC,CAAC,cAAc,CAAC,WAAW;YAChC,KAAK,EACH,OAAO,MAAM,KAAK,QAAQ;gBACxB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,oBAAoB,CAAC;gBACxC,CAAC,CAAC,oBAAoB;YAC1B,KAAK,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5D;QACH,CAAC,CAAC;YACE,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,cAAc,CAAC,WAAW;YACpC,KAAK,EAAE,oBAAoB;YAC3B,KAAK,EAAE,CAAC;SACT,CAAC;IACN,MAAM,SAAS,GACb,SAAS,CAAC,KAAK,KAAK,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAEvE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC;IAEnD,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzD,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,EAAE,QAAQ,IAAI,KAAK,CAAC,CAAC;IAExD,OAAO,CACL,MAAC,MAAM,CAAC,WAAW,IACjB,MAAM,EAAE,YAAY,CAAC,OAAO,EAC5B,cAAc,EAAE,YAAY,CAAC,QAAQ,EACrC,WAAW,EAAE,YAAY,CAAC,KAAK,EAC/B,WAAW,EAAE,YAAY,CAAC,KAAK,KAC3B,WAAW,aAEf,MAAC,MAAM,CAAC,OAAO,eACb,MAAC,MAAM,CAAC,OAAO,IAAC,OAAO,EAAC,eAAe,aACpC,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;gCACjC,SAAS,EAAE,OAAO;gCAClB,EAAE;gCACF,GAAG,UAAU;gCACb,GAAG,UAAU;gCACb,QAAQ,EAAE,QAAQ,EAAE,OAAO;6BAC5B,CAAC,EACF,mBAAU,EAAE,EAAE,GAAG,EAAE,MAAM,YACvB,cAAK,SAAS,EAAE,IAAI,EAAE,EAAE,GAAI,GACnB,IACI,EACjB,KAAC,MAAM,CAAC,QAAQ,IACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,YAEX,QAAQ,GACO,IACH,EACjB,KAAC,MAAM,CAAC,UAAU,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,YACxD,UAAU,GACO,IACD,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC,IAAI,CAAC,CAAC"}

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

@@ -0,0 +1,5 @@
+import Blob from "./Blob";
+export { BlobShape, BlobColor, ShadowPosition } from "./types";
+export type { ShadowConfig } from "./types";
+export default Blob;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/blob/index.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC/D,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAe,IAAI,CAAC"}

package/dist/components/blob/index.js

@@ -0,0 +1,4 @@
+import Blob from "./Blob";
+export { BlobShape, BlobColor, ShadowPosition } from "./types";
+export default Blob;
+//# sourceMappingURL=index.js.map

package/dist/components/blob/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/blob/index.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG/D,eAAe,IAAI,CAAC"}

package/dist/components/blob/shapes.d.ts

@@ -0,0 +1,43 @@
+export declare const shapeData: {
+    RRRR: {
+        shapeElement: string;
+        shapeAttrs: {
+            cx: string;
+            cy: string;
+            r: string;
+        };
+        id: string;
+    };
+    RSRR: {
+        shapeElement: string;
+        shapeAttrs: {
+            d: string;
+        };
+        id: string;
+    };
+    RSRS: {
+        shapeElement: string;
+        shapeAttrs: {
+            d: string;
+        };
+        id: string;
+    };
+    RSSS: {
+        shapeElement: string;
+        shapeAttrs: {
+            d: string;
+        };
+        id: string;
+    };
+    SSSS: {
+        shapeElement: string;
+        shapeAttrs: {
+            x: string;
+            y: string;
+            width: string;
+            height: string;
+        };
+        id: string;
+    };
+};
+//# sourceMappingURL=shapes.d.ts.map

package/dist/components/blob/shapes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shapes.d.ts","sourceRoot":"","sources":["../../../src/components/blob/shapes.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrB,CAAC"}

package/dist/components/blob/shapes.js

@@ -0,0 +1,33 @@
+import { BlobShape } from "./types";
+export const shapeData = {
+    [BlobShape.RRRR]: {
+        shapeElement: "circle",
+        shapeAttrs: { cx: "540", cy: "540", r: "540" },
+        id: "circle",
+    },
+    [BlobShape.RSRR]: {
+        shapeElement: "path",
+        shapeAttrs: {
+            d: "M540,0h540V540c0,298.03-241.97,540-540,540h0C241.96,1080,0,838.04,0,540H0C0,241.97,241.97,0,540,0Z",
+        },
+        id: "drop",
+    },
+    [BlobShape.RSRS]: {
+        shapeElement: "path",
+        shapeAttrs: {
+            d: "M540,0h540V540c0,298.04-241.97,540-540,540H0V540C0,241.97,241.97,0,540,0Z",
+        },
+        id: "lemon",
+    },
+    [BlobShape.RSSS]: {
+        shapeElement: "path",
+        shapeAttrs: { d: "M540,0h540V1080s0,0,0,0H0V540C0,241.97,241.97,0,540,0Z" },
+        id: "sofaPillow",
+    },
+    [BlobShape.SSSS]: {
+        shapeElement: "rect",
+        shapeAttrs: { x: "0", y: "0", width: "1080", height: "1080" },
+        id: "square",
+    },
+};
+//# sourceMappingURL=shapes.js.map

package/dist/components/blob/shapes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../src/components/blob/shapes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;QAChB,YAAY,EAAE,QAAQ;QACtB,UAAU,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE;QAC9C,EAAE,EAAE,QAAQ;KACb;IACD,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;QAChB,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE;YACV,CAAC,EAAE,oGAAoG;SACxG;QACD,EAAE,EAAE,MAAM;KACX;IACD,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;QAChB,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE;YACV,CAAC,EAAE,2EAA2E;SAC/E;QACD,EAAE,EAAE,OAAO;KACZ;IACD,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;QAChB,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,EAAE,CAAC,EAAE,wDAAwD,EAAE;QAC3E,EAAE,EAAE,YAAY;KACjB;IACD,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;QAChB,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;QAC7D,EAAE,EAAE,QAAQ;KACb;CACF,CAAC"}

package/dist/components/blob/styled.d.ts

@@ -0,0 +1,38 @@
+import { ShadowPosition } from "./types";
+interface BlobWrapperProps {
+    shadow?: boolean;
+    shadowPosition?: ShadowPosition;
+    shadowColor?: string;
+    shadowScale?: number;
+}
+declare const _default: {
+    BlobWrapper: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & BlobWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    BlobSVG: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    }, import("react").SVGProps<SVGSVGElement>, {}>;
+    Children: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        color: string;
+        maskImage: string;
+        maskSize: string;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Background: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        maskImage: string;
+        maskSize: string;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Content: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default _default;
+//# sourceMappingURL=styled.d.ts.map

package/dist/components/blob/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/blob/styled.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAqBzC,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;;;;;;;;;;;;;eAsBQ,MAAM;mBACF,MAAM;kBACP,MAAM;;;;;;mBAmByB,MAAM;kBAAY,MAAM;;;;;;;AAqBnE,wBAME"}

package/dist/components/blob/styled.js

@@ -0,0 +1,74 @@
+import styled from "@emotion/styled";
+import { ShadowPosition } from "./types";
+const BASE_OFFSET = 10;
+const getShadowOffset = (position, scale) => {
+    const offset = BASE_OFFSET * scale;
+    const xOffset = offset * 2;
+    const yOffset = offset;
+    switch (position) {
+        case ShadowPosition.TopLeft:
+            return `${-xOffset}px ${-yOffset}px`;
+        case ShadowPosition.TopRight:
+            return `${xOffset}px ${-yOffset}px`;
+        case ShadowPosition.BottomLeft:
+            return `${-xOffset}px ${yOffset}px`;
+        case ShadowPosition.BottomRight:
+        default:
+            return `${xOffset}px ${yOffset}px`;
+    }
+};
+const BlobWrapper = styled.div `
+  position: relative;
+  transition: transform 0.5s;
+  z-index: 0;
+  ${({ shadow, shadowPosition = ShadowPosition.BottomRight, shadowColor, shadowScale = 1, }) => shadow &&
+    `filter: drop-shadow(${getShadowOffset(shadowPosition, shadowScale)} 0px ${shadowColor});`}
+`;
+const BlobSVG = styled.svg `
+  width: 100%;
+  height: 100%;
+`;
+const Children = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  z-index: 3000;
+  color: ${({ color }) => color};
+
+  mask-image: url(${({ maskImage }) => maskImage});
+  mask-size: ${({ maskSize }) => maskSize};
+  mask-repeat: no-repeat;
+  mask-position: center;
+`;
+const Background = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.2s;
+  z-index: 1;
+  mask-image: url(${({ maskImage }) => maskImage});
+  mask-size: ${({ maskSize }) => maskSize};
+  mask-repeat: no-repeat;
+  mask-position: center;
+`;
+const Content = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+`;
+export default {
+    BlobWrapper,
+    BlobSVG,
+    Children,
+    Background,
+    Content,
+};
+//# sourceMappingURL=styled.js.map

package/dist/components/blob/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/blob/styled.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,MAAM,eAAe,GAAG,CAAC,QAAwB,EAAE,KAAa,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,WAAW,GAAG,KAAK,CAAC;IACnC,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,CAAC;IAC3B,MAAM,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,cAAc,CAAC,OAAO;YACzB,OAAO,GAAG,CAAC,OAAO,MAAM,CAAC,OAAO,IAAI,CAAC;QACvC,KAAK,cAAc,CAAC,QAAQ;YAC1B,OAAO,GAAG,OAAO,MAAM,CAAC,OAAO,IAAI,CAAC;QACtC,KAAK,cAAc,CAAC,UAAU;YAC5B,OAAO,GAAG,CAAC,OAAO,MAAM,OAAO,IAAI,CAAC;QACtC,KAAK,cAAc,CAAC,WAAW,CAAC;QAChC;YACE,OAAO,GAAG,OAAO,MAAM,OAAO,IAAI,CAAC;IACvC,CAAC;AACH,CAAC,CAAC;AASF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAkB;;;;IAI5C,CAAC,EACD,MAAM,EACN,cAAc,GAAG,cAAc,CAAC,WAAW,EAC3C,WAAW,EACX,WAAW,GAAG,CAAC,GAChB,EAAE,EAAE,CACH,MAAM;IACN,uBAAuB,eAAe,CAAC,cAAc,EAAE,WAAW,CAAC,QAAQ,WAAW,IAAI;CAC7F,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzB,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAIzB;;;;;;;;;;WAUS,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK;;oBAEX,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;;;CAGxC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAyC;;;;;;;;oBAQlD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;;;CAGxC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKzB,CAAC;AAEF,eAAe;IACb,WAAW;IACX,OAAO;IACP,QAAQ;IACR,UAAU;IACV,OAAO;CACR,CAAC"}

package/dist/components/blob/types.d.ts

@@ -0,0 +1,27 @@
+export declare enum BlobShape {
+    RANDOM = "random",
+    RRRR = "RRRR",
+    RSRR = "RSRR",
+    RSRS = "RSRS",
+    RSSS = "RSSS",
+    SSSS = "SSSS"
+}
+export declare enum BlobColor {
+    DarkBlue = "#071d41",
+    Blue = "#67DAFD",
+    LightBlue = "#E1F8FF",
+    LightGreen = "#ACFFA4",
+    DarkGreen = "#11CF7F"
+}
+export declare enum ShadowPosition {
+    TopLeft = "TL",
+    TopRight = "TR",
+    BottomLeft = "BL",
+    BottomRight = "BR"
+}
+export interface ShadowConfig {
+    position?: ShadowPosition;
+    color?: string;
+    scale?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/blob/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/blob/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,IAAI,SAAS;IACb,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,oBAAY,SAAS;IACnB,QAAQ,YAAY;IACpB,IAAI,YAAY;IAChB,SAAS,YAAY;IACrB,UAAU,YAAY;IACtB,SAAS,YAAY;CACtB;AAED,oBAAY,cAAc;IACxB,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,WAAW,OAAO;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}