@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Dialog/sc/bare.js

@@ -1,46 +1,83 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var helpers_1 = require("../../helpers");
-var styled_1 = require("../../styles/styled");
-var Buttons_1 = require("../../Buttons");
-var _ = tslib_1.__importStar(require("../DialogMui"));
-exports.Root = (0, styled_components_1.default)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"], ["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"])), styled_1.inset0);
-// export const Backdrop = (props) => {
-//   return <div {...props} />;
-// }
-exports.Backdrop = (0, styled_components_1.default)(_.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"])), styled_1.inset0);
-/**
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
- */
-exports.Container = (0, styled_components_1.default)(_.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  height: 100%;\n  outline: 0;\n  ", "\n"], ["\n  height: 100%;\n  outline: 0;\n  ", "\n"])), function (p) {
-    return p.$scrollPaper
-        ? "display: flex; justify-content: center; align-items: center;"
-        : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }";
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-/**
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
- */
-exports.Paper = (0, styled_components_1.default)(_.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (p) {
-    return p.$scrollPaper
-        ? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
-        : "display: inline-block; vertical-align: middle; text-align: initial;";
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Root: function() {
+        return Root;
+    },
+    Backdrop: function() {
+        return Backdrop;
+    },
+    Container: function() {
+        return Container;
+    },
+    Paper: function() {
+        return Paper;
+    },
+    Close: function() {
+        return Close;
+    },
+    Header: function() {
+        return Header;
+    },
+    Body: function() {
+        return Body;
+    },
+    KoineDialog: function() {
+        return KoineDialog;
+    }
 });
-exports.Close = (0, styled_components_1.default)(Buttons_1.IconButton)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
-exports.Header = (0, styled_components_1.default)(_.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
-/**
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
- */
-exports.Body = (0, styled_components_1.default)(_.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"], ["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"])));
-exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
-    Root: exports.Root,
-    Backdrop: exports.Backdrop,
-    Container: exports.Container,
-    Paper: exports.Paper,
-    Close: exports.Close,
-    Header: exports.Header,
-    Body: exports.Body,
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Buttons = require("../../Buttons");
+const _helpers = require("../../helpers");
+const _styled = require("../../styles/styled");
+const _DialogMui = /*#__PURE__*/ _interop_require_wildcard._(require("../DialogMui"));
+const Root = (0, _styledcomponents.default)(_DialogMui.Root)`
+  z-index: 1300;
+  position: fixed;
+  ${_styled.inset0}
+`;
+const Backdrop = (0, _styledcomponents.default)(_DialogMui.Backdrop)`
+  z-index: -1;
+  position: fixed;
+  ${_styled.inset0}
+  backdrop-filter: blur(0px);
+  -webkit-tap-highlight-color: transparent;
+`;
+const Container = (0, _styledcomponents.default)(_DialogMui.Container)`
+  height: 100%;
+  outline: 0;
+  ${(p)=>p.$scrollPaper ? "display: flex; justify-content: center; align-items: center;" : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }"}
+`;
+const Paper = (0, _styledcomponents.default)(_DialogMui.Paper)`
+  position: relative;
+  ${(p)=>p.$scrollPaper ? "display: flex; flex-direction: column; max-height: calc(100%-64px);" : "display: inline-block; vertical-align: middle; text-align: initial;"}
+`;
+const Close = (0, _styledcomponents.default)(_Buttons.IconButton)`
+  position: absolute;
+`;
+const Header = (0, _styledcomponents.default)(_DialogMui.Header)``;
+const Body = (0, _styledcomponents.default)(_DialogMui.Body)`
+  flex: 1 1 auto;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  overflow: auto;
+`;
+const KoineDialog = (0, _helpers.extendComponent)(_DialogMui.KoineDialog, {
+    Root,
+    Backdrop,
+    Container,
+    Paper,
+    Close,
+    Header,
+    Body
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/sc/bare.mjs

@@ -1,43 +1,54 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
+import { IconButton } from "../../Buttons";
 import { extendComponent } from "../../helpers";
 import { inset0 } from "../../styles/styled";
-import { IconButton } from "../../Buttons";
 import * as _ from "../DialogMui";
-export var Root = styled(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"], ["\n  z-index: 1300;\n  position: fixed;\n  ", "\n"])), inset0);
+export const Root = styled(_.Root)`
+  z-index: 1300;
+  position: fixed;
+  ${inset0}
+`;
 // export const Backdrop = (props) => {
 //   return <div {...props} />;
 // }
-export var Backdrop = styled(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  z-index: -1;\n  position: fixed;\n  ", "\n  backdrop-filter: blur(0px);\n  -webkit-tap-highlight-color: transparent;\n"])), inset0);
+export const Backdrop = styled(_.Backdrop)`
+  z-index: -1;
+  position: fixed;
+  ${inset0}
+  backdrop-filter: blur(0px);
+  -webkit-tap-highlight-color: transparent;
+`;
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
- */
-export var Container = styled(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  outline: 0;\n  ", "\n"], ["\n  height: 100%;\n  outline: 0;\n  ", "\n"])), function (p) {
-    return p.$scrollPaper
-        ? "display: flex; justify-content: center; align-items: center;"
-        : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }";
-});
+ */ export const Container = styled(_.Container)`
+  height: 100%;
+  outline: 0;
+  ${(p)=>p.$scrollPaper ? "display: flex; justify-content: center; align-items: center;" : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }"}
+`;
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
- */
-export var Paper = styled(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (p) {
-    return p.$scrollPaper
-        ? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
-        : "display: inline-block; vertical-align: middle; text-align: initial;";
-});
-export var Close = styled(IconButton)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
-export var Header = styled(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+ */ export const Paper = styled(_.Paper)`
+  position: relative;
+  ${(p)=>p.$scrollPaper ? "display: flex; flex-direction: column; max-height: calc(100%-64px);" : "display: inline-block; vertical-align: middle; text-align: initial;"}
+`;
+export const Close = styled(IconButton)`
+  position: absolute;
+`;
+export const Header = styled(_.Header)``;
 /**
  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
- */
-export var Body = styled(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"], ["\n  flex: 1 1 auto;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n  overflow: auto;\n"])));
-export var KoineDialog = extendComponent(_.KoineDialog, {
-    Root: Root,
-    Backdrop: Backdrop,
-    Container: Container,
-    Paper: Paper,
-    Close: Close,
-    Header: Header,
-    Body: Body,
+ */ export const Body = styled(_.Body)`
+  flex: 1 1 auto;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  overflow: auto;
+`;
+export const KoineDialog = extendComponent(_.KoineDialog, {
+    Root,
+    Backdrop,
+    Container,
+    Paper,
+    Close,
+    Header,
+    Body
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/sc/framer.d.ts

@@ -4,11 +4,11 @@ export type { KoineDialogProps } from "../DialogMui";
 export declare const KoineDialog: ((props: Omit<{
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -51,7 +51,7 @@ export declare const KoineDialog: ((props: Omit<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -65,12 +65,12 @@ export declare const KoineDialog: ((props: Omit<{
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;

package/Dialog/sc/framer.js

@@ -1,19 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var framer_motion_1 = require("framer-motion");
-var helpers_1 = require("../../helpers");
-var basic_1 = require("../m/basic");
-var bare_1 = require("../m/bare");
-var bare_2 = require("./bare");
-exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
-    Root: bare_2.Root,
-    Backdrop: (0, framer_motion_1.m)(bare_2.Backdrop),
-    Container: bare_2.Container,
-    Paper: (0, framer_motion_1.m)(bare_2.Paper),
-    Close: bare_2.Close,
-    Header: bare_2.Header,
-    Body: bare_2.Body,
-    mBackdrop: basic_1.dialogBackdropMotion,
-    mPaper: basic_1.dialogPaperMotion,
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineDialog", {
+    enumerable: true,
+    get: function() {
+        return KoineDialog;
+    }
+});
+const _framermotion = require("framer-motion");
+const _helpers = require("../../helpers");
+const _bare = require("../m/bare");
+const _basic = require("../m/basic");
+const _bare1 = require("./bare");
+const KoineDialog = (0, _helpers.extendComponent)(_bare.KoineDialog, {
+    Root: _bare1.Root,
+    Backdrop: (0, _framermotion.m)(_bare1.Backdrop),
+    Container: _bare1.Container,
+    Paper: (0, _framermotion.m)(_bare1.Paper),
+    Close: _bare1.Close,
+    Header: _bare1.Header,
+    Body: _bare1.Body,
+    mBackdrop: _basic.dialogBackdropMotion,
+    mPaper: _basic.dialogPaperMotion
 });

package/Dialog/sc/framer.mjs

@@ -1,16 +1,16 @@
 import { m } from "framer-motion";
 import { extendComponent } from "../../helpers";
-import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
 import { KoineDialog as _ } from "../m/bare";
-import { Root, Backdrop, Container, Paper, Close, Header, Body } from "./bare";
-export var KoineDialog = extendComponent(_, {
-    Root: Root,
+import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
+import { Backdrop, Body, Close, Container, Header, Paper, Root } from "./bare";
+export const KoineDialog = extendComponent(_, {
+    Root,
     Backdrop: m(Backdrop),
-    Container: Container,
+    Container,
     Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
+    Close,
+    Header,
+    Body,
     mBackdrop: dialogBackdropMotion,
-    mPaper: dialogPaperMotion,
+    mPaper: dialogPaperMotion
 });

package/Dialog/sc/framerMaterial.d.ts

@@ -3,11 +3,11 @@
 export declare const KoineDialog: ((props: Omit<{
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -50,7 +50,7 @@ export declare const KoineDialog: ((props: Omit<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -64,12 +64,12 @@ export declare const KoineDialog: ((props: Omit<{
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;

package/Dialog/sc/framerMaterial.js

@@ -1,19 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var framer_motion_1 = require("framer-motion");
-var helpers_1 = require("../../helpers");
-var basic_1 = require("../m/basic");
-var bare_1 = require("../m/bare");
-var material_1 = require("./material");
-exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
-    Root: material_1.Root,
-    Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),
-    Container: material_1.Container,
-    Paper: (0, framer_motion_1.m)(material_1.Paper),
-    Close: material_1.Close,
-    Header: material_1.Header,
-    Body: material_1.Body,
-    mBackdrop: basic_1.dialogBackdropMotion,
-    mPaper: basic_1.dialogPaperMotion,
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineDialog", {
+    enumerable: true,
+    get: function() {
+        return KoineDialog;
+    }
+});
+const _framermotion = require("framer-motion");
+const _helpers = require("../../helpers");
+const _bare = require("../m/bare");
+const _basic = require("../m/basic");
+const _material = require("./material");
+const KoineDialog = (0, _helpers.extendComponent)(_bare.KoineDialog, {
+    Root: _material.Root,
+    Backdrop: (0, _framermotion.m)(_material.Backdrop),
+    Container: _material.Container,
+    Paper: (0, _framermotion.m)(_material.Paper),
+    Close: _material.Close,
+    Header: _material.Header,
+    Body: _material.Body,
+    mBackdrop: _basic.dialogBackdropMotion,
+    mPaper: _basic.dialogPaperMotion
 });

package/Dialog/sc/framerMaterial.mjs

@@ -1,16 +1,16 @@
 import { m } from "framer-motion";
 import { extendComponent } from "../../helpers";
-import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
 import { KoineDialog as _ } from "../m/bare";
-import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "./material";
-export var KoineDialog = extendComponent(_, {
-    Root: Root,
+import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
+import { Backdrop, Body, Close, Container, Header, Paper, Root } from "./material";
+export const KoineDialog = extendComponent(_, {
+    Root,
     Backdrop: m(Backdrop),
-    Container: Container,
+    Container,
     Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
+    Close,
+    Header,
+    Body,
     mBackdrop: dialogBackdropMotion,
-    mPaper: dialogPaperMotion,
+    mPaper: dialogPaperMotion
 });

package/Dialog/sc/index.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: function() {
+        return _default;
+    },
+    bare: function() {
+        return bare;
+    },
+    material: function() {
+        return material;
+    },
+    framer: function() {
+        return framer;
+    },
+    framerMaterial: function() {
+        return framerMaterial;
+    }
+});
+const _stories = require("@koine/stories");
+const _bare = require("./bare");
+const _framer = require("./framer");
+const _framerMaterial = require("./framerMaterial");
+const _material = require("./material");
+const _default = {
+    title: "Base/Dialog/Styled Components",
+    ..._stories.storyDialogMeta
+};
+const bareTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _bare.KoineDialog
+    });
+};
+const bare = bareTemplate.bind({});
+bare.args = _stories.storyDialogArgs;
+const materialTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _material.KoineDialog
+    });
+};
+const material = materialTemplate.bind({});
+material.args = _stories.storyDialogArgs;
+const framerTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _framer.KoineDialog
+    });
+};
+const framer = framerTemplate.bind({});
+framer.decorators = [
+    _stories.decoratorFramer
+];
+framer.args = _stories.storyDialogArgs;
+const framerMaterialTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _framerMaterial.KoineDialog
+    });
+};
+const framerMaterial = framerMaterialTemplate.bind({});
+framerMaterial.decorators = [
+    _stories.decoratorFramer
+];
+framerMaterial.args = _stories.storyDialogArgs;

package/Dialog/sc/index.stories.mjs

@@ -0,0 +1,47 @@
+import { StoryDialog, decoratorFramer, storyDialogArgs, storyDialogMeta } from "@koine/stories";
+import { KoineDialog as bareComp } from "./bare";
+import { KoineDialog as framerComp } from "./framer";
+import { KoineDialog as framerMaterialComp } from "./framerMaterial";
+import { KoineDialog as materialComp } from "./material";
+export default {
+    title: "Base/Dialog/Styled Components",
+    ...storyDialogMeta
+};
+const bareTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: bareComp
+    });
+};
+export const bare = bareTemplate.bind({});
+bare.args = storyDialogArgs;
+const materialTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: materialComp
+    });
+};
+export const material = materialTemplate.bind({});
+material.args = storyDialogArgs;
+const framerTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: framerComp
+    });
+};
+export const framer = framerTemplate.bind({});
+framer.decorators = [
+    decoratorFramer
+];
+framer.args = storyDialogArgs;
+const framerMaterialTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: framerMaterialComp
+    });
+};
+export const framerMaterial = framerMaterialTemplate.bind({});
+framerMaterial.decorators = [
+    decoratorFramer
+];
+framerMaterial.args = storyDialogArgs;

package/Dialog/sc/material.d.ts

@@ -31,11 +31,11 @@ export declare const Body: import("styled-components").StyledComponent<NonNullab
 export declare const KoineDialog: ((props: Omit<{
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -78,7 +78,7 @@ export declare const KoineDialog: ((props: Omit<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -92,12 +92,12 @@ export declare const KoineDialog: ((props: Omit<{
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;