@snokam/ui 1.0.0

package/dist/components/layout/container/transitions/Curve/styled.d.ts

@@ -0,0 +1,26 @@
+import { Position, LayoutTheme } from "../../../types";
+declare const _default: {
+    Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        position: Position;
+        sizeInPercent: number;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Content: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        flipY: boolean;
+        flipX: boolean;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Curve: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        theme: LayoutTheme;
+        sizeInPercent: number;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default _default;
+//# sourceMappingURL=styled.d.ts.map

package/dist/components/layout/container/transitions/Curve/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/container/transitions/Curve/styled.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;;;;;;kBA8D3C,QAAQ;uBACH,MAAM;;;;;;eAmBa,OAAO;eAAS,OAAO;;;;;;eA9ElD,WAAW;uBACH,MAAM;;;AAuFvB,wBAA6C"}

package/dist/components/layout/container/transitions/Curve/styled.js

@@ -0,0 +1,83 @@
+"use client";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { Position, LayoutTheme } from "../../../types";
+import { Color } from "@snokam/ui/theme";
+const Curve = styled.div `
+  position: absolute;
+  z-index: 2;
+  height: calc(100vw * ${({ sizeInPercent }) => sizeInPercent ?? 0.25});
+  width: calc(100vw * ${({ sizeInPercent }) => sizeInPercent ?? 0.25});
+  right: -1px;
+  top: -1px;
+
+  ${({ theme }) => {
+    const svg = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+      >
+        <path
+          fill="black"
+          fill-rule="evenodd"
+          d="
+            M 0,0
+            H 100
+            V 100
+            H 0
+            Z
+            M 0,0
+            A 100,100 0 0,1 100,100
+            L 0,100
+            Z
+          "
+        />
+      </svg>
+    `;
+    const maskURI = `data:image/svg+xml;charset=utf8,${encodeURIComponent(svg)}`;
+    const light = theme === LayoutTheme.Dark ? Color.LightBlue : Color.DarkBlue;
+    const dark = theme === LayoutTheme.Dark ? "#0e2748" : "#071d41";
+    return css `
+      mask-image: url("${maskURI}");
+      mask-size: cover;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      -webkit-mask-image: url("${maskURI}");
+      -webkit-mask-size: cover;
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      background-color: ${light};
+
+      [data-theme="dark"] & {
+        background-color: ${dark};
+      }
+    `;
+}}
+`;
+const Container = styled.div `
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  height: calc(100vw * ${({ sizeInPercent }) => sizeInPercent ?? 0.25});
+  width: 100vw;
+  right: 0;
+
+  ${({ position }) => position === Position.Top
+    ? css `
+          top: 0px;
+        `
+    : css `
+          bottom: 0px;
+        `}
+`;
+const Content = styled.div `
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  transform: ${({ flipY, flipX }) => `${flipY ? "rotateY(180deg)" : ""} ${flipX ? "rotateX(180deg)" : ""}`.trim()};
+`;
+export default { Container, Content, Curve };
+//# sourceMappingURL=styled.js.map

package/dist/components/layout/container/transitions/Curve/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../../../../src/components/layout/container/transitions/Curve/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAGtB;;;yBAGuB,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa,IAAI,IAAI;wBAC7C,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa,IAAI,IAAI;;;;IAIhE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACd,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;KAsBX,CAAC;IAEF,MAAM,OAAO,GAAG,mCAAmC,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;IAC7E,MAAM,KAAK,GAAG,KAAK,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5E,MAAM,IAAI,GAAG,KAAK,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhE,OAAO,GAAG,CAAA;yBACW,OAAO;;;;iCAIC,OAAO;;;;0BAId,KAAK;;;4BAGH,IAAI;;KAE3B,CAAC;AACJ,CAAC;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAG1B;;;;yBAIuB,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa,IAAI,IAAI;;;;IAIjE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ,KAAK,QAAQ,CAAC,GAAG;IACvB,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;SAEF;CACR,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAoC;;;;;;eAM/C,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,GAAG,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE;CAC/E,CAAC;AAEF,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/layout/container/transitions/Wave/index.d.ts

@@ -0,0 +1,12 @@
+import { Color } from "@snokam/ui/theme";
+import { Position, LayoutTheme } from "../../../types";
+export interface Props {
+    theme: LayoutTheme;
+    position: Position;
+    color?: Color;
+    flipY?: boolean;
+    flipX?: boolean;
+}
+declare const Wave: ({ position, theme, flipY, flipX, color, }: Props) => import("react").JSX.Element;
+export default Wave;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/container/transitions/Wave/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/container/transitions/Wave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGvD,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,IAAI,GAAI,2CAMX,KAAK,gCAyBP,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/layout/container/transitions/Wave/index.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Color } from "@snokam/ui/theme";
+import { Position, LayoutTheme } from "../../../types";
+import Styled from "./styled";
+const Wave = ({ position, theme, flipY = false, flipX, color = Color.DarkGreen, }) => {
+    const isFlippedX = flipX ?? position === Position.Bottom;
+    const shouldInvertTheme = (position === Position.Top && isFlippedX) ||
+        (position === Position.Bottom && !isFlippedX);
+    const invertedTheme = shouldInvertTheme
+        ? theme === LayoutTheme.Dark
+            ? LayoutTheme.Light
+            : LayoutTheme.Dark
+        : theme;
+    return (_jsx(Styled.Container, { position: position, children: _jsx(Styled.Content, { flipY: flipY, flipX: isFlippedX, children: _jsxs(Styled.Curve, { children: [_jsx(Styled.Circle, { color: color }), _jsx(Styled.Background, { theme: shouldInvertTheme ? invertedTheme : theme })] }) }) }));
+};
+export default Wave;
+//# sourceMappingURL=index.js.map

package/dist/components/layout/container/transitions/Wave/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/layout/container/transitions/Wave/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,MAAM,MAAM,UAAU,CAAC;AAU9B,MAAM,IAAI,GAAG,CAAC,EACZ,QAAQ,EACR,KAAK,EACL,KAAK,GAAG,KAAK,EACb,KAAK,EACL,KAAK,GAAG,KAAK,CAAC,SAAS,GACjB,EAAE,EAAE;IACV,MAAM,UAAU,GAAG,KAAK,IAAI,QAAQ,KAAK,QAAQ,CAAC,MAAM,CAAC;IAEzD,MAAM,iBAAiB,GACrB,CAAC,QAAQ,KAAK,QAAQ,CAAC,GAAG,IAAI,UAAU,CAAC;QACzC,CAAC,QAAQ,KAAK,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC;IAEhD,MAAM,aAAa,GAAG,iBAAiB;QACrC,CAAC,CAAC,KAAK,KAAK,WAAW,CAAC,IAAI;YAC1B,CAAC,CAAC,WAAW,CAAC,KAAK;YACnB,CAAC,CAAC,WAAW,CAAC,IAAI;QACpB,CAAC,CAAC,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,MAAM,CAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,YAClC,KAAC,MAAM,CAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,YAC7C,MAAC,MAAM,CAAC,KAAK,eACX,KAAC,MAAM,CAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EAC/B,KAAC,MAAM,CAAC,UAAU,IAChB,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,GAChD,IACW,GACA,GACA,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/layout/container/transitions/Wave/styled.d.ts

@@ -0,0 +1,35 @@
+import { Position, LayoutTheme } from "../../../types";
+import { Color } from "@snokam/ui/theme";
+declare const _default: {
+    Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        position: Position;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Content: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        flipY: boolean;
+        flipX: boolean;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Curve: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Circle: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        color: Color;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Background: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        theme: LayoutTheme;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default _default;
+//# sourceMappingURL=styled.d.ts.map

package/dist/components/layout/container/transitions/Wave/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/container/transitions/Wave/styled.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;;;;;kBAyEA,QAAQ;;;;;;eAiBb,OAAO;eAAS,OAAO;;;;;;;;;;eAxCxB,KAAK;;;;;;eA5BD,WAAW;;;AA8ElD,wBAAiE"}

package/dist/components/layout/container/transitions/Wave/styled.js

@@ -0,0 +1,92 @@
+"use client";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { Position, LayoutTheme } from "../../../types";
+const Curve = styled.div `
+  height: 100%;
+  width: 100%;
+
+  ${() => {
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 80" preserveAspectRatio="none">
+        <path d="M0,40 C100,40 100,0 200,0 C300,0 300,40 400,40 L400,80 L0,80 Z"  fill="black" transform="scale(1,-1) translate(0,-80)" />
+      </svg>`;
+    const waveDataURI = `data:image/svg+xml;charset=utf8,${encodeURIComponent(svg)}`;
+    return css `
+      mask: url("${waveDataURI}") repeat-x;
+      mask-position: calc(100vw / 2);
+      mask-size: 2500px 100%;
+    `;
+}}
+`;
+const Background = styled.div `
+  position: absolute;
+  z-index: 0;
+
+  ${({ theme }) => theme === LayoutTheme.Dark
+    ? css `
+          background-color: var(--color-light-blue);
+
+          [data-theme="dark"] & {
+            background-color: #0e2748;
+          }
+        `
+    : css `
+          background-color: var(--color-primary);
+
+          [data-theme="dark"] & {
+            background-color: #071d41;
+          }
+        `}
+
+  top: 0;
+  left: 0;
+
+  height: 100%;
+  width: 100%;
+`;
+const Circle = styled.div `
+  position: absolute;
+  z-index: 1;
+  top: 50px;
+  height: 200px;
+  width: 100%;
+
+  ${({ color }) => {
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 40" preserveAspectRatio="none">
+        <path d="M0,40 C100,40 100,0 200,0 C300,0 300,40 400,40" fill="${color}" />
+      </svg>`;
+    const dataURI = `data:image/svg+xml;charset=utf8,${encodeURIComponent(svg)}`;
+    return css `
+      background: url("${dataURI}") no-repeat;
+      background-position: calc(50% - 500px) 50%;
+      background-size: 2500px 100%;
+    `;
+}}
+`;
+const Container = styled.div `
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  height: 200px;
+  width: 100%;
+
+  ${({ position }) => position === Position.Top
+    ? css `
+          top: -100px;
+        `
+    : css `
+          bottom: -100px;
+        `}
+`;
+const Content = styled.div `
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  transform: ${({ flipY, flipX }) => `${flipY ? "rotateY(180deg)" : ""} ${flipX ? "rotateX(180deg)" : ""}`.trim()};
+`;
+export default { Container, Content, Curve, Circle, Background };
+//# sourceMappingURL=styled.js.map

package/dist/components/layout/container/transitions/Wave/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../../../../src/components/layout/container/transitions/Wave/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGvD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAIpB,GAAG,EAAE;IACL,MAAM,GAAG,GAAG;;;aAGH,CAAC;IAEV,MAAM,WAAW,GAAG,mCAAmC,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;IAEjF,OAAO,GAAG,CAAA;mBACK,WAAW;;;KAGzB,CAAC;AACJ,CAAC;CACF,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;IAIjD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK,KAAK,WAAW,CAAC,IAAI;IACxB,CAAC,CAAC,GAAG,CAAA;;;;;;SAMF;IACH,CAAC,CAAC,GAAG,CAAA;;;;;;SAMF;;;;;;;CAOR,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAkB;;;;;;;IAOvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACd,MAAM,GAAG,GAAG;;yEAEyD,KAAK;aACjE,CAAC;IAEV,MAAM,OAAO,GAAG,mCAAmC,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;IAE7E,OAAO,GAAG,CAAA;yBACW,OAAO;;;KAG3B,CAAC;AACJ,CAAC;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;;;;IAOhD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ,KAAK,QAAQ,CAAC,GAAG;IACvB,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;SAEF;CACR,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAoC;;;;;;eAM/C,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,GAAG,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE;CAC/E,CAAC;AAEF,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/layout/container/transitions/index.d.ts

@@ -0,0 +1,9 @@
+import { Position, LayoutTheme, TransitionWithOptions } from "../../types";
+interface Props {
+    theme: LayoutTheme;
+    transition: TransitionWithOptions;
+    position: Position;
+}
+declare const Transition: ({ transition, theme, position }: Props) => import("react").JSX.Element;
+export default Transition;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/container/transitions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/container/transitions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,qBAAqB,EACtB,MAAM,aAAa,CAAC;AAKrB,UAAU,KAAK;IACb,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,qBAAqB,CAAC;IAClC,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,iCAAiC,KAAK,gCA0BzD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/layout/container/transitions/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TransitionType, } from "../../types";
+import Arc from "./Arc";
+import Curve from "./Curve";
+import Wave from "./Wave";
+const Transition = ({ transition, theme, position }) => {
+    switch (transition.type) {
+        case TransitionType.Wave:
+            return (_jsx(Wave, { theme: theme, position: position, flipY: transition.flipY, flipX: transition.flipX, color: transition.color }));
+        case TransitionType.Curve:
+            return (_jsx(Curve, { theme: theme, position: position, flipY: transition.flipY, sizeInPercent: transition.sizeInPercent ?? 0.25 }));
+        case TransitionType.Arc:
+            return _jsx(Arc, { theme: theme, position: position, flipY: transition.flipY });
+        default:
+            return null;
+    }
+};
+export default Transition;
+//# sourceMappingURL=index.js.map

package/dist/components/layout/container/transitions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/container/transitions/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,cAAc,GAEf,MAAM,aAAa,CAAC;AACrB,OAAO,GAAG,MAAM,OAAO,CAAC;AACxB,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAQ1B,MAAM,UAAU,GAAG,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5D,QAAQ,UAAU,CAAC,IAAI,EAAE,CAAC;QACxB,KAAK,cAAc,CAAC,IAAI;YACtB,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,KAAK,EAAE,UAAU,CAAC,KAAK,GACvB,CACH,CAAC;QACJ,KAAK,cAAc,CAAC,KAAK;YACvB,OAAO,CACL,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,aAAa,EAAE,UAAU,CAAC,aAAa,IAAI,IAAI,GAC/C,CACH,CAAC;QACJ,KAAK,cAAc,CAAC,GAAG;YACrB,OAAO,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,GAAI,CAAC;QAC5E;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,29 @@
+export declare const Section: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("./types").SectionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("./types").ContentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare enum Breakpoints {
+    xs = 576,
+    sm = 768,
+    md = 992,
+    lg = 1272,
+    xl = 1920
+}
+declare const _default: {
+    Container: ({ children, as, theme, transitions, animation, popover, ...restOfProps }: import("./types").ContainerProps) => import("react").JSX.Element;
+    Section: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & import("./types").SectionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Content: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & import("./types").ContentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default _default;
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO;;;0IAAiB,CAAC;AACtC,eAAO,MAAM,OAAO;;;0IAAiB,CAAC;AAEtC,oBAAY,WAAW;IACrB,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,OAAO;IACT,EAAE,OAAO;CACV;;;;;;;;;;;;AAED,wBAIE;AAEF,cAAc,SAAS,CAAC"}

package/dist/components/layout/index.js

@@ -0,0 +1,20 @@
+"use client";
+import Styled from "./styled";
+import Container from "./container";
+export const Section = Styled.Section;
+export const Content = Styled.Content;
+export var Breakpoints;
+(function (Breakpoints) {
+    Breakpoints[Breakpoints["xs"] = 576] = "xs";
+    Breakpoints[Breakpoints["sm"] = 768] = "sm";
+    Breakpoints[Breakpoints["md"] = 992] = "md";
+    Breakpoints[Breakpoints["lg"] = 1272] = "lg";
+    Breakpoints[Breakpoints["xl"] = 1920] = "xl";
+})(Breakpoints || (Breakpoints = {}));
+export default {
+    Container,
+    Section,
+    Content,
+};
+export * from "./types";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layout/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AACtC,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AAEtC,MAAM,CAAN,IAAY,WAMX;AAND,WAAY,WAAW;IACrB,2CAAQ,CAAA;IACR,2CAAQ,CAAA;IACR,2CAAQ,CAAA;IACR,4CAAS,CAAA;IACT,4CAAS,CAAA;AACX,CAAC,EANW,WAAW,KAAX,WAAW,QAMtB;AAED,eAAe;IACb,SAAS;IACT,OAAO;IACP,OAAO;CACR,CAAC;AAEF,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,13 @@
+import { ContentProps, SectionProps } from "./types";
+declare const _default: {
+    Section: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & SectionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Content: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & ContentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default _default;
+//# sourceMappingURL=styled.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/layout/styled.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAW,YAAY,EAAS,MAAM,SAAS,CAAC;;;;;;;;;;;AAsErE,wBAAoC"}

package/dist/components/layout/styled.js

@@ -0,0 +1,68 @@
+"use client";
+import styled from "@emotion/styled";
+import { Padding, Width } from "./types";
+import { css } from "@emotion/react";
+import { getPaddingValue } from "./utils";
+const Section = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  ${({ stretchItems = false }) => stretchItems
+    ? css `
+          align-items: stretch;
+        `
+    : css `
+          align-items: flex-start;
+        `}
+
+  ${({ padding = Padding.Small }) => {
+    if (typeof padding === "object") {
+        const top = getPaddingValue(padding.top ?? Padding.None);
+        const bottom = getPaddingValue(padding.bottom ?? Padding.None);
+        return css `
+        padding-top: ${top};
+        padding-bottom: ${bottom};
+      `;
+    }
+    const value = getPaddingValue(padding);
+    return css `
+      padding: ${value} 0;
+    `;
+}}
+`;
+const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  z-index: 2;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+
+  @media only screen and (min-width: 576px) {
+    padding: 2rem;
+    ${({ width }) => {
+    switch (width) {
+        case Width.Full:
+            return css `
+            max-width: none;
+          `;
+        case Width.ExtraNarrow:
+            return css `
+            max-width: 880px;
+          `;
+        case Width.Narrow:
+            return css `
+            max-width: 1080px;
+          `;
+        case Width.Normal:
+        default:
+            return css `
+            max-width: 1272px;
+          `;
+    }
+}}
+  }
+`;
+export default { Section, Content };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/layout/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAgB,OAAO,EAAgB,KAAK,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAc;;;;IAIpC,CAAC,EAAE,YAAY,GAAG,KAAK,EAAE,EAAE,EAAE,CAC7B,YAAY;IACV,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;SAEF;;IAEL,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE;IAChC,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAChC,MAAM,GAAG,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;QACzD,MAAM,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;QAE/D,OAAO,GAAG,CAAA;uBACO,GAAG;0BACA,MAAM;OACzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;iBACG,KAAK;KACjB,CAAC;AACJ,CAAC;CACF,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAc;;;;;;;;;;;MAWlC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACd,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,KAAK,CAAC,IAAI;YACb,OAAO,GAAG,CAAA;;WAET,CAAC;QACJ,KAAK,KAAK,CAAC,WAAW;YACpB,OAAO,GAAG,CAAA;;WAET,CAAC;QACJ,KAAK,KAAK,CAAC,MAAM;YACf,OAAO,GAAG,CAAA;;WAET,CAAC;QACJ,KAAK,KAAK,CAAC,MAAM,CAAC;QAClB;YACE,OAAO,GAAG,CAAA;;WAET,CAAC;IACN,CAAC;AACH,CAAC;;CAEJ,CAAC;AAEF,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -0,0 +1,70 @@
+import React, { ElementType, HTMLAttributes } from "react";
+import { Color } from "@snokam/ui/theme";
+export declare enum LayoutTheme {
+    Light = "light",
+    Dark = "dark"
+}
+export declare enum TransitionType {
+    Wave = "wave",
+    Curve = "curve",
+    Arc = "arc"
+}
+export type TransitionWithOptions = Options & ({
+    type: TransitionType.Wave;
+    color?: Color;
+    flipX?: boolean;
+} | {
+    type: TransitionType.Curve;
+    sizeInPercent?: number;
+} | {
+    type: TransitionType.Arc;
+});
+export interface Transitions {
+    top?: TransitionWithOptions;
+    bottom?: TransitionWithOptions;
+}
+export type Options = {
+    flipY?: boolean;
+};
+export declare enum Position {
+    Top = "top",
+    Bottom = "bottom"
+}
+export declare enum Padding {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+export declare enum Width {
+    Normal = "normal",
+    Narrow = "narrow",
+    ExtraNarrow = "extraNarrow",
+    Full = "full"
+}
+export declare enum AnimationType {
+    Blobs = "blobs"
+}
+export interface AnimationConfig {
+    type: AnimationType;
+    elements?: number;
+}
+export interface SectionProps {
+    stretchItems?: boolean;
+    padding?: Padding | {
+        top?: Padding;
+        bottom?: Padding;
+    };
+}
+export interface ContentProps {
+    width?: Width;
+}
+export interface ContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, "popover"> {
+    as?: ElementType;
+    theme?: LayoutTheme;
+    transitions?: Transitions;
+    animation?: AnimationConfig;
+    children?: React.ReactNode;
+    popover?: "" | "auto" | "manual" | "hint";
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/layout/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,oBAAY,WAAW;IACrB,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;CACZ;AAED,MAAM,MAAM,qBAAqB,GAAG,OAAO,GACzC,CACI;IACE,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GACD;IACE,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,cAAc,CAAC,GAAG,CAAC;CAC1B,CACJ,CAAC;AAEJ,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,qBAAqB,CAAC;IAC5B,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAED,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,oBAAY,QAAQ;IAClB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,KAAK;IACf,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,IAAI,SAAS;CACd;AAED,oBAAY,aAAa;IACvB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EACJ,OAAO,GACP;QACE,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;CACP;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,SAAS,CACV;IACC,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,EAAE,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC3C"}

package/dist/components/layout/types.js

@@ -0,0 +1,35 @@
+export var LayoutTheme;
+(function (LayoutTheme) {
+    LayoutTheme["Light"] = "light";
+    LayoutTheme["Dark"] = "dark";
+})(LayoutTheme || (LayoutTheme = {}));
+export var TransitionType;
+(function (TransitionType) {
+    TransitionType["Wave"] = "wave";
+    TransitionType["Curve"] = "curve";
+    TransitionType["Arc"] = "arc";
+})(TransitionType || (TransitionType = {}));
+export var Position;
+(function (Position) {
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+})(Position || (Position = {}));
+export var Padding;
+(function (Padding) {
+    Padding["None"] = "none";
+    Padding["Small"] = "small";
+    Padding["Medium"] = "medium";
+    Padding["Large"] = "large";
+})(Padding || (Padding = {}));
+export var Width;
+(function (Width) {
+    Width["Normal"] = "normal";
+    Width["Narrow"] = "narrow";
+    Width["ExtraNarrow"] = "extraNarrow";
+    Width["Full"] = "full";
+})(Width || (Width = {}));
+export var AnimationType;
+(function (AnimationType) {
+    AnimationType["Blobs"] = "blobs";
+})(AnimationType || (AnimationType = {}));
+//# sourceMappingURL=types.js.map

package/dist/components/layout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/layout/types.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,8BAAe,CAAA;IACf,4BAAa,CAAA;AACf,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAED,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,+BAAa,CAAA;IACb,iCAAe,CAAA;IACf,6BAAW,CAAA;AACb,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB;AA2BD,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,uBAAW,CAAA;IACX,6BAAiB,CAAA;AACnB,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAED,MAAM,CAAN,IAAY,OAKX;AALD,WAAY,OAAO;IACjB,wBAAa,CAAA;IACb,0BAAe,CAAA;IACf,4BAAiB,CAAA;IACjB,0BAAe,CAAA;AACjB,CAAC,EALW,OAAO,KAAP,OAAO,QAKlB;AAED,MAAM,CAAN,IAAY,KAKX;AALD,WAAY,KAAK;IACf,0BAAiB,CAAA;IACjB,0BAAiB,CAAA;IACjB,oCAA2B,CAAA;IAC3B,sBAAa,CAAA;AACf,CAAC,EALW,KAAK,KAAL,KAAK,QAKhB;AAED,MAAM,CAAN,IAAY,aAEX;AAFD,WAAY,aAAa;IACvB,gCAAe,CAAA;AACjB,CAAC,EAFW,aAAa,KAAb,aAAa,QAExB"}

package/dist/components/layout/utils.d.ts

@@ -0,0 +1,3 @@
+import { Padding } from "./types";
+export declare const getPaddingValue: (padding: Padding) => "0" | "6rem" | "4rem" | "2rem";
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/layout/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/layout/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,mCAY/C,CAAC"}

package/dist/components/layout/utils.js

@@ -0,0 +1,15 @@
+import { Padding } from "./types";
+export const getPaddingValue = (padding) => {
+    switch (padding) {
+        case Padding.None:
+            return "0";
+        case Padding.Large:
+            return "6rem";
+        case Padding.Medium:
+            return "4rem";
+        case Padding.Small:
+        default:
+            return "2rem";
+    }
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/layout/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/layout/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAgB,EAAE,EAAE;IAClD,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,OAAO,CAAC,IAAI;YACf,OAAO,GAAG,CAAC;QACb,KAAK,OAAO,CAAC,KAAK;YAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO,CAAC,MAAM;YACjB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO,CAAC,KAAK,CAAC;QACnB;YACE,OAAO,MAAM,CAAC;IAClB,CAAC;AACH,CAAC,CAAC"}

package/dist/components/linear-progress/index.d.ts

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

package/dist/components/linear-progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/linear-progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,mBAAmB,EACpB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAExD,CAAC"}