mosuk-ui 1.0.1

package/components/containers/article/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { ArticleProps } from './component.interface';
+export declare function Article<C extends ElementType = 'div'>({ as, ...rest }: ArticleProps<C>): React.JSX.Element;

package/components/containers/article/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type ArticleProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/containers/article/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/containers/article/component/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function Article(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'article');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-article', styles.article, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/containers/article/component/component.module.css

@@ -0,0 +1,10 @@
+@layer mosuk-ui {
+    @layer index-13 {
+        .article {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: calc(var(--spacing, .25rem) * 4);
+        }
+    }
+}

package/components/containers/article/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { ArticleProps } from './component.interface';
+export declare function Article(props: ArticleProps): import("react").JSX.Element;
+export declare namespace Article {
+    type Props = ArticleProps;
+}

package/components/containers/article/component/index.js

@@ -0,0 +1,4 @@
+import { Article as BaseArticle } from './component';
+export function Article(props) {
+    return BaseArticle(props);
+}

package/components/containers/buttons/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ButtonsProps } from './component.interface';
+export declare function Buttons({ ref, ...props }: ButtonsProps): React.JSX.Element;

package/components/containers/buttons/component/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, RefObject } from 'react';
+export interface ButtonsProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: RefObject<HTMLDivElement | null>;
+}

package/components/containers/buttons/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/containers/buttons/component/component.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styles from './component.module.css';
+export function Buttons(_a) {
+    var _b;
+    var ref = _a.ref, props = __rest(_a, ["ref"]);
+    return (React.createElement("section", __assign({}, props, { ref: ref, className: "mosuk-buttons ".concat(styles.buttons, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }), props === null || props === void 0 ? void 0 : props.children));
+}

package/components/containers/buttons/component/component.module.css

@@ -0,0 +1,13 @@
+@layer mosuk-ui {
+    @layer index-13 {
+        .buttons {
+            width: 100%;
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            gap: calc(var(--spacing, .25rem) * 2);
+        }
+    }
+}

package/components/containers/buttons/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonsProps } from './component.interface';
+export declare function Buttons(props: ButtonsProps): import("react").JSX.Element;
+export declare namespace Buttons {
+    type Props = ButtonsProps;
+}

package/components/containers/buttons/component/index.js

@@ -0,0 +1,4 @@
+import { Buttons as BaseButtons } from './component';
+export function Buttons(props) {
+    return BaseButtons(props);
+}

package/components/containers/content/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ContentProps } from './component.interface';
+export declare function Content({ ...props }: ContentProps): React.JSX.Element;

package/components/containers/content/component/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface ContentProps extends HTMLAttributes<HTMLDivElement> {
+}

package/components/containers/content/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/containers/content/component/component.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styles from './component.module.css';
+export function Content(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: "mosuk-content ".concat(styles.content, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }), props === null || props === void 0 ? void 0 : props.children));
+}

package/components/containers/content/component/component.module.css

@@ -0,0 +1,20 @@
+@layer mosuk-ui {
+    @layer index-13 {
+        @media (max-width: 1023px) {
+            .content {
+                display: flex;
+                flex-direction: column;
+                gap: calc(var(--spacing, .25rem) * 16);
+            }
+        }
+
+        /* ? Desktop */
+        @media (min-width: 1024px) {
+            .content {
+                display: flex;
+                flex-direction: column;
+                gap: calc(var(--spacing, .25rem) * 24);
+            }
+        }
+    }
+}

package/components/containers/content/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { ContentProps } from './component.interface';
+export declare function Content(props: ContentProps): import("react").JSX.Element;
+export declare namespace Content {
+    type Props = ContentProps;
+}

package/components/containers/content/component/index.js

@@ -0,0 +1,4 @@
+import { Content as BaseContent } from './component';
+export function Content(props) {
+    return BaseContent(props);
+}

package/components/containers/grid/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { GridProps } from './component.interface';
+export declare function Grid({ ...props }: GridProps): React.JSX.Element;

package/components/containers/grid/component/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+}

package/components/containers/grid/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/containers/grid/component/component.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styles from './component.module.css';
+export function Grid(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: 'mosuk-grid' +
+            ' ' +
+            ((_b = styles.grid) !== null && _b !== void 0 ? _b : '') +
+            ' ' +
+            ((_c = props === null || props === void 0 ? void 0 : props.className) !== null && _c !== void 0 ? _c : '') }), props === null || props === void 0 ? void 0 : props.children));
+}

package/components/containers/grid/component/component.module.css

@@ -0,0 +1,29 @@
+@layer mosuk-ui {
+    @layer index-13 {
+
+        /* ? Grid */
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: calc(var(--spacing, .25rem) * 2);
+        }
+
+        /* ? Tablet */
+        @media (min-width: 640px) and (max-width: 1023px) {
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+                gap: calc(var(--spacing, .25rem) * 4);
+            }
+        }
+
+        /* ? Desktop */
+        @media (min-width: 1024px) {
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(4, minmax(0, 1fr));
+                gap: calc(var(--spacing, .25rem) * 4);
+            }
+        }
+    }
+}

package/components/containers/grid/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { GridProps } from './component.interface';
+export declare function Grid(props: GridProps): import("react").JSX.Element;
+export declare namespace Grid {
+    type Props = GridProps;
+}

package/components/containers/grid/component/index.js

@@ -0,0 +1,4 @@
+import { Grid as BaseGrid, } from './component';
+export function Grid(props) {
+    return BaseGrid(props);
+}

package/components/containers/hr/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { HrProps } from './component.interface';
+export declare function Hr({ ...props }: HrProps): React.JSX.Element;

package/components/containers/hr/component/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface HrProps extends HTMLAttributes<HTMLHRElement> {
+}

package/components/containers/hr/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/containers/hr/component/component.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styles from './component.module.css';
+export function Hr(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return (React.createElement("hr", __assign({}, props, { className: "mosuk-hr ".concat(styles['hr'], " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') })));
+}

package/components/containers/hr/component/component.module.css

@@ -0,0 +1,7 @@
+@layer mosuk-ui {
+    @layer index-13 {
+        .hr {
+            border-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+        }
+    }
+}

package/components/containers/hr/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { HrProps } from './component.interface';
+export declare function Hr(props: HrProps): import("react").JSX.Element;
+export declare namespace Hr {
+    type Props = HrProps;
+}

package/components/containers/hr/component/index.js

@@ -0,0 +1,4 @@
+import { Hr as BaseHr } from './component';
+export function Hr(props) {
+    return BaseHr(props);
+}

package/components/containers/section/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { SectionProps } from './component.interface';
+export declare function Section<C extends ElementType = 'section'>({ as, ...rest }: SectionProps<C>): React.JSX.Element;

package/components/containers/section/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type SectionProps<C extends ElementType = 'section'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/containers/section/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/containers/section/component/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function Section(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'section');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-section', styles.section, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/containers/section/component/component.module.css

@@ -0,0 +1,9 @@
+@layer mosuk-ui {
+    @layer index-13 {
+        .section {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing, .25rem) * 4);
+        }
+    }
+}

package/components/containers/section/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { SectionProps } from './component.interface';
+export declare function Section(props: SectionProps): import("react").JSX.Element;
+export declare namespace Section {
+    type Props = SectionProps;
+}

package/components/containers/section/component/index.js

@@ -0,0 +1,4 @@
+import { Section as BaseSection } from './component';
+export function Section(props) {
+    return BaseSection(props);
+}

package/components/display/card/(flip)/component/back/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { CardFlipBackProps } from './component.interface';
+export declare function CardFlipBack<C extends ElementType = 'div'>({ as, ...rest }: CardFlipBackProps<C>): React.JSX.Element;

package/components/display/card/(flip)/component/back/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type CardFlipBackProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/display/card/(flip)/component/back/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/card/(flip)/component/back/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../component.module.css';
+export function CardFlipBack(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('card-flip-back', styles.cardBack, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/display/card/(flip)/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardFlipProps } from './component.interface';
+export declare function CardFlip({ as, ref, flip, onFlip, ...rest }: CardFlipProps): React.JSX.Element;

package/components/display/card/(flip)/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { CardProps } from '../../component/component.interface';
+export interface CardFlipProps extends CardProps {
+    flip?: boolean;
+    onFlip?: () => void;
+}

package/components/display/card/(flip)/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/card/(flip)/component/component.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { Card } from '../../component/component';
+import styles from './component.module.css';
+export function CardFlip(_a) {
+    var _b;
+    var as = _a.as, ref = _a.ref, flip = _a.flip, onFlip = _a.onFlip, rest = __rest(_a, ["as", "ref", "flip", "onFlip"]);
+    var handleFlip = function (e) {
+        if (onFlip) {
+            onFlip();
+        }
+        if (rest === null || rest === void 0 ? void 0 : rest.onClick) {
+            rest.onClick(e);
+        }
+    };
+    return (React.createElement(Card, __assign({}, rest, { as: as, ref: ref, onClick: handleFlip, className: classNames('mosuk-card', styles.card, rest === null || rest === void 0 ? void 0 : rest.className, (_b = {},
+            _b[styles.flip] = flip,
+            _b)) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/display/card/(flip)/component/component.module.css

@@ -0,0 +1,38 @@
+@layer mosuk-ui {
+    @layer index-22 {
+        .card {
+            overflow: visible;
+            position: relative;
+
+            backdrop-filter: unset;
+
+            transform-style: preserve-3d;
+            transition: transform 600ms;
+
+            .cardFront,
+            .cardBack {
+                position: absolute;
+                top: 0;
+                left: 0;
+
+                width: 100%;
+                height: 100%;
+
+                padding: calc(var(--spacing, .25rem) * 1);
+
+                backface-visibility: hidden;
+                -webkit-backface-visibility: hidden;
+            }
+
+            .cardBack {
+                transform: rotateY(180deg);
+            }
+
+            &.flip {
+                transform: rotateY(180deg);
+                transition: transform 600ms;
+
+            }
+        }
+    }
+}

package/components/display/card/(flip)/component/front/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { CardFlipFrontProps } from './component.interface';
+export declare function CardFlipFront<C extends ElementType = 'div'>({ as, ...rest }: CardFlipFrontProps<C>): React.JSX.Element;

package/components/display/card/(flip)/component/front/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type CardFlipFrontProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/display/card/(flip)/component/front/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/card/(flip)/component/front/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../../component/component.module.css';
+export function CardFlipFront(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('card-flip-front', styles.cardFront, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}