@sky-mavis/design-system 0.2.0

package/README.MD

@@ -0,0 +1,29 @@
+#  Design System
+
+## Usage
+`design-system-v2` is under development. It will replace current `@axie/design-system` at some point in the future.
+
+1. Add `"@sky-mavis/design-system": "1.0.0"` to your package.json.
+2. Run `yarn`
+
+## Development
+`yarn dev` Watch changes in the package.
+
+## Build
+`yarn build` By default, `design-system-v2` will be compiled with `ES6` target.
+
+`yarn build:esnext` Build with ESNext target which support [ES proposed features](https://github.com/tc39/proposals).
+
+`yarn build:commonjs` build with CommonJS module resolver.
+
+## Publish
+Coming soon.
+
+## Ronin DS dev 17/05/2021
+Change `workspaces` property in `package.json` of `supreme` to `[packages/design-system-v2, packages/design-system-docs]`
+
+Upgrade `nodejs` to latest stable version. Upgrade `node-gyp` to 8.0 version.
+
+Remove `node-modules`, `yarn.lock`
+
+Re-run `yarn`

package/dist/commons/types.d.ts

@@ -0,0 +1,6 @@
+export declare enum IntentType {
+    Primary = "primary",
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger"
+}

package/dist/commons/types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntentType = void 0;
+var IntentType;
+(function (IntentType) {
+    IntentType["Primary"] = "primary";
+    IntentType["Success"] = "success";
+    IntentType["Warning"] = "warning";
+    IntentType["Danger"] = "danger";
+})(IntentType = exports.IntentType || (exports.IntentType = {}));

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { SvgIconProps } from '../../icons/svg-icon/SvgIcon';
+declare enum AvatarSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+export interface AvatarProps {
+    /**
+     * Size of Avatar element.
+     */
+    size?: AvatarSize;
+    /**
+     * The image URL.
+     */
+    src?: string;
+    /**
+     * One or more strings separated by commas, indicating possible image sources.
+     */
+    srcSet?: string;
+    /**
+     * An alternative text description of the image.
+     */
+    alt?: string;
+    /**
+     * Username to render text inside the Avatar if src is not set.
+     */
+    name?: string;
+    /**
+     * Icon render inside Avatar if both src and username is not set.
+     *
+     * Can use customized SvgIcon or any icon from Sky Mavis icon pack.
+     */
+    icon?: React.FC<SvgIconProps>;
+    /**
+     * Customized color for icon or name of Avatar.
+     */
+    color?: string;
+    /**
+     * A space-delimited list of class names to pass along to a Avatar element.
+     */
+    className?: string;
+}
+export declare const Avatar: React.FC<AvatarProps> & {
+    sizes: typeof AvatarSize;
+};
+export {};

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const FilledPerson_1 = require("../../icons/FilledPerson");
+const useIsErrorImg_1 = require("./useIsErrorImg");
+var AvatarSize;
+(function (AvatarSize) {
+    AvatarSize["Small"] = "small";
+    AvatarSize["Medium"] = "medium";
+    AvatarSize["Large"] = "large";
+})(AvatarSize || (AvatarSize = {}));
+const getInitialLetters = (name) => {
+    const words = name.split(' ');
+    let initials = words[0].substring(0, 1).toUpperCase();
+    if (words.length > 1) {
+        initials += words[words.length - 1].substring(0, 1).toUpperCase();
+    }
+    return initials;
+};
+exports.Avatar = props => {
+    const { icon: Icon, className, name, size = AvatarSize.Medium, color, src, srcSet, alt } = props;
+    const isErrorImg = useIsErrorImg_1.useIsErrorImg(src, srcSet);
+    const hasImg = (src || srcSet) && !isErrorImg;
+    const colorStyle = color ? { color, fill: 'currentColor' } : { fill: 'currentColor' };
+    const renderAvatarPresent = () => {
+        if (hasImg) {
+            return react_1.default.createElement("img", { alt: alt, src: src, srcSet: srcSet, className: "ds-avatar-img" });
+        }
+        if (name) {
+            const initials = getInitialLetters(name);
+            return (react_1.default.createElement("span", { className: "ds-avatar-name", style: colorStyle }, initials));
+        }
+        else if (Icon) {
+            return react_1.default.createElement(Icon, { className: "ds-avatar-icon", style: colorStyle });
+        }
+        else {
+            return react_1.default.createElement(FilledPerson_1.FilledPersonIcon, { className: "ds-avatar-icon", style: colorStyle });
+        }
+    };
+    return react_1.default.createElement("div", { className: classnames_1.default('ds-avatar', size, className) }, renderAvatarPresent());
+};
+exports.Avatar.sizes = AvatarSize;

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

@@ -0,0 +1 @@
+export declare const useIsErrorImg: (src?: string | undefined, srcSet?: string | undefined) => boolean;

package/dist/components/avatar/useIsErrorImg.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsErrorImg = void 0;
+const react_1 = require("react");
+exports.useIsErrorImg = (src, srcSet) => {
+    const [isLoadedError, setIsLoadedError] = react_1.useState(false);
+    react_1.useEffect(() => {
+        if (!src && !srcSet) {
+            return undefined;
+        }
+        setIsLoadedError(false);
+        let active = true;
+        const image = new Image();
+        image.src = src ? src : '';
+        image.srcset = srcSet ? srcSet : '';
+        image.onload = () => {
+            if (!active) {
+                return;
+            }
+            setIsLoadedError(false);
+        };
+        image.onerror = () => {
+            if (!active) {
+                return;
+            }
+            setIsLoadedError(true);
+        };
+        return () => {
+            active = false;
+        };
+    }, [src, srcSet]);
+    return isLoadedError;
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number to show in the badge. If the value is undefined, display a dot-variant.
+     */
+    value?: number;
+    /**
+     * The maximum value of the badge. If the value is greater than max, badge show label max+.
+     */
+    max?: number;
+    /**
+     * Whether to hide badge when the value is zero
+     */
+    hideZero?: boolean;
+    /**
+     * The visual intent colour applies to the background of a badge.
+     */
+    intent?: IntentType;
+    /**
+     * Whether to use a badge with circle or radius elements such as Avatar, Icon.
+     */
+    offsetX?: string;
+    /**
+     * Whether to use a badge with circle or radius elements such as Avatar, Icon.
+     */
+    offsetY?: string;
+    /**
+     * A space-delimited list of class names to pass along to a Badge element.
+     */
+    className?: string;
+    /**
+     * A space-delimited list of class names to pass along to a BadgeMask element.
+     */
+    classNameMask?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/badge/Badge.js

@@ -0,0 +1,40 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../../commons/types");
+const BadgeMask_1 = require("./BadgeMask");
+exports.Badge = props => {
+    const { value, max = 99, hideZero, intent = types_1.IntentType.Primary, offsetX, offsetY, className, classNameMask, children, style = {} } = props, restProps = __rest(props, ["value", "max", "hideZero", "intent", "offsetX", "offsetY", "className", "classNameMask", "children", "style"]);
+    let isDotVariant = false;
+    let labelText = '';
+    if (value === undefined || value === null) {
+        isDotVariant = true;
+    }
+    else {
+        labelText = value <= max ? `${value}` : `${max}+`;
+    }
+    const isShowBadge = !(hideZero && value === 0);
+    const isStandaloneVariant = children === undefined || children === null;
+    const offsetStyle = Object.assign(Object.assign({}, style), { bottom: offsetY ? offsetY : 0, right: offsetX ? offsetX : 0 });
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-badge', className) },
+        !isStandaloneVariant && children,
+        react_1.default.createElement(BadgeMask_1.BadgeMask, Object.assign({}, restProps, { intent: intent, isDot: isDotVariant, isShow: isShowBadge, label: labelText, style: offsetStyle, className: classnames_1.default({
+                'ds-badge-dependent': !isStandaloneVariant,
+            }, classNameMask) }))));
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+export interface BadgeMaskProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     *  Whether to show dot-variant or label-variant.
+     */
+    isDot?: boolean;
+    /**
+     * Text label of a badge.
+     */
+    label?: string;
+    /**
+     * Whether to show a badge or not.
+     */
+    isShow?: boolean;
+    /**
+     * The visual intent colour applies to the background of a badge.
+     */
+    intent?: IntentType;
+    /**
+     * A space-delimited list of class names to pass along to a BadgeMask element.
+     */
+    className?: string;
+}
+export declare const BadgeMask: React.FC<BadgeMaskProps>;

package/dist/components/badge/BadgeMask.js

@@ -0,0 +1,26 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeMask = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../../commons/types");
+const intent_1 = require("../../utils/intent");
+exports.BadgeMask = props => {
+    const { isDot, label, isShow, intent = types_1.IntentType.Primary, className } = props, restProps = __rest(props, ["isDot", "label", "isShow", "intent", "className"]);
+    const intentClass = intent_1.getIntentClassname(intent);
+    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: classnames_1.default('ds-badge-mask', { 'ds-badge-dot-variant': isDot, 'ds-badge-hidden': !isShow }, intentClass, className) }), !isDot && label));
+};

package/dist/components/button/Button.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+import { SvgIconProps } from '../../icons/svg-icon/SvgIcon';
+declare enum ButtonSize {
+    Large = "large",
+    Small = "small",
+    Default = "default"
+}
+declare type ButtonHtmlProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+interface Props extends ButtonHtmlProps {
+    /**
+     * Visual intent color, this will apply on background, title and icon.
+     */
+    intent?: IntentType;
+    /**
+     * Should button appears in minimal styles.
+     */
+    minimal?: boolean;
+    /**
+     * Should button apply Large, Small or Default styles.
+     */
+    size?: ButtonSize;
+    /**
+     * Should button be filled to its container.
+     */
+    fill?: boolean;
+    /**
+     * Leftmost icon of button. Can use customized SvgIcon or any icon from Sky
+     * Mavis icon pack.
+     */
+    leftIcon?: React.FC<SvgIconProps>;
+    /**
+     * Leftmost icon of button. Can use customized SvgIcon or any icon from Sky
+     * Mavis icon pack.
+     */
+    rightIcon?: React.FC<SvgIconProps>;
+}
+declare type ButtonType = React.FC<Props> & {
+    sizes: typeof ButtonSize;
+};
+export declare const Button: ButtonType;
+export {};

package/dist/components/button/Button.js

@@ -0,0 +1,44 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const intent_1 = require("../../utils/intent");
+var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize["Large"] = "large";
+    ButtonSize["Small"] = "small";
+    ButtonSize["Default"] = "default";
+})(ButtonSize || (ButtonSize = {}));
+exports.Button = (props) => {
+    const { className, intent, children, minimal, size, leftIcon: LeftIcon, rightIcon: RightIcon } = props, htmlProps = __rest(props, ["className", "intent", "children", "minimal", "size", "leftIcon", "rightIcon"]);
+    const intentClass = intent_1.getIntentClassname(intent);
+    const soleIconButton = [LeftIcon, RightIcon].filter(Boolean).length === 1 && children === undefined;
+    return (react_1.default.createElement("button", Object.assign({}, htmlProps, { className: classnames_1.default(className, 'ds-button', intentClass, {
+            'ds-minimal': minimal === true,
+            'ds-small': size === 'small',
+            'ds-large': size === 'large',
+            'ds-sole-icon': soleIconButton === true,
+        }) }),
+        react_1.default.createElement("div", { className: "ds-button-content" },
+            LeftIcon && (react_1.default.createElement("span", { className: "ds-icon left" },
+                react_1.default.createElement(LeftIcon, { size: size === 'small' ? 20 : 24, color: "currentColor" }))),
+            children,
+            RightIcon && (react_1.default.createElement("span", { className: "ds-icon right" },
+                react_1.default.createElement(RightIcon, { size: size === 'small' ? 20 : 24, color: "currentColor" }))))));
+};
+exports.Button.sizes = ButtonSize;

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+declare type InputHtmlProps = React.InputHTMLAttributes<HTMLInputElement>;
+interface CheckboxProps extends InputHtmlProps {
+    /**
+     * Visual intent color apply to Checkbox element.
+     */
+    intent?: IntentType;
+    /**
+     * Text label for the Checkbox.
+     */
+    label?: React.ReactNode;
+    /**
+     * If true, the Checkbox appears indeterminate.
+     * Basically, this change Icon from CheckmarkIcon to MinusIcon.
+     */
+    indeterminated?: boolean;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;
+export {};

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../commons/types");
+const Minus_1 = require("../../icons/Minus");
+const Tick_1 = require("../../icons/Tick");
+const intent_1 = require("../../utils/intent");
+exports.Checkbox = react_1.forwardRef((props, ref) => {
+    const { intent = types_1.IntentType.Primary, label, indeterminated, id, disabled, className } = props, htmlProps = __rest(props, ["intent", "label", "indeterminated", "id", "disabled", "className"]);
+    return (react_1.default.createElement("label", { htmlFor: id, className: classnames_1.default('ds-checkbox', className) },
+        react_1.default.createElement("input", Object.assign({ ref: ref, className: "ds-checkbox-input", type: "checkbox", id: id, disabled: disabled }, htmlProps)),
+        react_1.default.createElement("span", { className: classnames_1.default('ds-checkbox-mask', intent_1.getIntentClassname(intent)) }, !indeterminated ? (react_1.default.createElement(Tick_1.TickIcon, { className: "ds-checkbox-mask-icon", size: 20 })) : (react_1.default.createElement(Minus_1.MinusIcon, { className: "ds-checkbox-mask-icon", size: 20 }))),
+        react_1.default.createElement("span", { className: "ds-checkbox-label" }, label)));
+});
+exports.Checkbox.displayName = 'Checkbox';

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { OverlayProps } from '../overlay/Overlay';
+interface Props extends OverlayProps {
+    /**
+     * A space-delimited list of class names.
+     */
+    className?: string;
+    /**
+     * CSSProperties to pass to dialog content wrapper.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Title of the Dialog
+     */
+    title?: React.ReactNode;
+    /**
+     * Should close Button visible on the Dialog title
+     */
+    isCloseButtonShown?: boolean;
+}
+export declare const Dialog: React.FC<Props>;
+export * from './DialogHeader';
+export * from './DialogBody';
+export * from './DialogDivider';
+export * from './DialogFooter';

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const Cross_1 = require("../../icons/Cross");
+const Overlay_1 = require("../overlay/Overlay");
+const DialogHeader_1 = require("./DialogHeader");
+exports.Dialog = props => {
+    const { className, style, isOpen, onClose, isCloseButtonShown = true, canClickOutsideClose = true, canEscapeKeyClose = true, autoFocus = true, usePortal, portalContainer, withBackdrop = true, backdrop, children, title, } = props;
+    const contentRef = react_1.useRef(null);
+    const [contentStyles, setContentStyles] = react_1.useState();
+    react_1.useEffect(() => {
+        if (contentRef.current === null) {
+            return;
+        }
+        if (contentRef.current.offsetHeight < window.innerHeight - 148) {
+            setContentStyles({ transform: 'translateY(120px)' });
+        }
+        else {
+            setContentStyles(undefined);
+        }
+    }, [isOpen]);
+    react_1.useEffect(() => {
+        if (isOpen === true) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, [isOpen]);
+    return (react_1.default.createElement(Overlay_1.Overlay, { isOpen: isOpen, onClose: onClose, usePortal: usePortal, portalContainer: portalContainer, backdrop: backdrop, withBackdrop: withBackdrop, canClickOutsideClose: canClickOutsideClose, canEscapeKeyClose: canEscapeKeyClose, autoFocus: autoFocus },
+        react_1.default.createElement("div", { className: classnames_1.default('ds-dialog', className), ref: contentRef, style: Object.assign(Object.assign({}, contentStyles), style) },
+            isCloseButtonShown && (react_1.default.createElement("div", { className: "ds-dialog-close-icon", onClick: onClose },
+                react_1.default.createElement(Cross_1.CrossIcon, { size: 24 }))),
+            title && react_1.default.createElement(DialogHeader_1.DialogHeader, null, title),
+            children)));
+};
+__exportStar(require("./DialogHeader"), exports);
+__exportStar(require("./DialogBody"), exports);
+__exportStar(require("./DialogDivider"), exports);
+__exportStar(require("./DialogFooter"), exports);

package/dist/components/dialog/DialogBody.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A space-delimited list of class names.
+     */
+    className?: string;
+}
+export declare const DialogBody: React.FC<Props>;
+export {};

package/dist/components/dialog/DialogBody.js

@@ -0,0 +1,23 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogBody = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+exports.DialogBody = props => {
+    const { className, children } = props, restProps = __rest(props, ["className", "children"]);
+    return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default('ds-dialog-body', className) }, restProps), children));
+};

package/dist/components/dialog/DialogDivider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A space-delimited list of class names.
+     */
+    className?: string;
+}
+export declare const DialogDivider: React.FC<Props>;
+export {};

package/dist/components/dialog/DialogDivider.js

@@ -0,0 +1,23 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogDivider = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+exports.DialogDivider = props => {
+    const { className } = props, restProps = __rest(props, ["className"]);
+    return react_1.default.createElement("div", Object.assign({ className: classnames_1.default('ds-dialog-divider', className) }, restProps));
+};

package/dist/components/dialog/DialogFooter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A space-delimited list of class names.
+     */
+    className?: string;
+}
+export declare const DialogFooter: React.FC<Props>;
+export {};