@databricks/design-system 0.1.8 → 1.0.0

package/dist/cjs/design-system/Button/Button.js

@@ -1,173 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
-var emotionReactJsxRuntime_esm = require('../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js');
-var react = require('@emotion/react');
-var lodash = require('../../node_modules/lodash/lodash.js');
-var React = require('react');
-var useDesignSystemTheme = require('../hooks/useDesignSystemTheme.js');
-var button = require('../node_modules/antd/es/button/button.js');
-var DesignSystemProvider = require('../DesignSystemProvider/DesignSystemProvider.js');
-
-/**
- * Recursively appends `!important` to all CSS properties in an Emotion CSSObject.
- * Used to ensure that we always override Ant styles, without worrying about selector precedence.
- * TODO(@giles): move this out to a shared util file that can be consumed by other components.
- */
-function importantify(obj) {
-    return lodash.mapValues(obj, function (value) {
-        if (lodash.isString(value) || lodash.isNumber(value) || lodash.isBoolean(value)) {
-            return value + "!important";
-        }
-        if (lodash.isNil(value)) {
-            return value;
-        }
-        return importantify(value);
-    });
-}
-var getButtonEmotionStyles = function (_a) {
-    var _b, _c, _d;
-    var theme = _a.theme, classNamePrefix = _a.classNamePrefix, loading = _a.loading, withIcon = _a.withIcon, enableAnimation = _a.enableAnimation;
-    var clsIcon = theme.general.iconfontCssPrefix;
-    var clsLoadingIcon = classNamePrefix + "-btn-loading-icon";
-    var clsIconOnly = classNamePrefix + "-btn-icon-only";
-    var classPrimary = "." + classNamePrefix + "-btn-primary";
-    var classLink = "." + classNamePrefix + "-btn-link";
-    var classDangerous = "." + classNamePrefix + "-btn-dangerous";
-    var styles = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign((_b = { backgroundColor: theme.colors.actionDefaultBackgroundDefault, borderColor: theme.colors.actionDefaultBorderDefault, color: theme.colors.actionDefaultTextDefault, '&:focus-visible': {
-                outlineStyle: 'solid',
-                outlineWidth: '2px',
-                outlineOffset: '1px',
-                outlineColor: theme.colors.primary,
-            }, '&:hover': {
-                backgroundColor: theme.colors.actionDefaultBackgroundHover,
-                borderColor: theme.colors.actionDefaultBorderHover,
-                color: theme.colors.actionDefaultTextHover,
-            }, '&:active': {
-                backgroundColor: theme.colors.actionDefaultBackgroundPress,
-                borderColor: theme.colors.actionDefaultBorderPress,
-                color: theme.colors.actionDefaultTextPress,
-            } }, _b["&" + classPrimary] = {
-        backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
-        borderColor: theme.colors.actionPrimaryBackgroundDefault,
-        color: theme.colors.actionPrimaryTextDefault,
-        '&:hover': {
-            backgroundColor: theme.colors.actionPrimaryBackgroundHover,
-            borderColor: theme.colors.actionPrimaryBackgroundHover,
-            color: theme.colors.actionPrimaryTextHover,
-        },
-        '&:active': {
-            backgroundColor: theme.colors.actionPrimaryBackgroundPress,
-            borderColor: theme.colors.actionPrimaryBackgroundPress,
-            color: theme.colors.actionPrimaryTextPress,
-        },
-    }, _b["&" + classLink] = {
-        backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-        borderColor: theme.colors.actionTertiaryBackgroundDefault,
-        color: theme.colors.actionTertiaryTextDefault,
-        '&:hover': {
-            backgroundColor: theme.colors.actionTertiaryBackgroundHover,
-            borderColor: 'transparent',
-            color: theme.colors.actionTertiaryTextHover,
-        },
-        '&:active': {
-            backgroundColor: theme.colors.actionTertiaryBackgroundPress,
-            borderColor: 'transparent',
-            color: theme.colors.actionTertiaryTextPress,
-        },
-    }, _b["&" + classDangerous + classPrimary] = {
-        backgroundColor: theme.colors.actionDangerBackgroundDefault,
-        borderColor: theme.colors.actionDangerBackgroundDefault,
-        color: theme.colors.white,
-        '&:hover': {
-            backgroundColor: theme.colors.actionDangerBackgroundHover,
-            borderColor: theme.colors.actionDangerBackgroundHover,
-            color: theme.colors.white,
-        },
-        '&:active': {
-            backgroundColor: theme.colors.actionDangerBackgroundPress,
-            borderColor: theme.colors.actionDangerBackgroundPress,
-            color: theme.colors.white,
-        },
-        '&:focus-visible': {
-            outlineColor: theme.colors.actionDangerBackgroundDefault,
-        },
-    }, _b["&" + classDangerous] = {
-        backgroundColor: theme.colors.white,
-        borderColor: theme.colors.actionDangerBackgroundDefault,
-        color: theme.colors.textValidationDanger,
-        '&:hover': {
-            backgroundColor: theme.colors.white,
-            borderColor: theme.colors.actionDangerBackgroundHover,
-            color: theme.colors.actionDangerBackgroundHover,
-        },
-        '&:active': {
-            backgroundColor: theme.colors.white,
-            borderColor: theme.colors.actionDangerBackgroundPress,
-            color: theme.colors.actionDangerBackgroundPress,
-        },
-        '&:focus-visible': {
-            outlineColor: theme.colors.actionDangerBackgroundDefault,
-        },
-    }, _b['&[disabled]'] = {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        borderColor: theme.colors.actionDisabledBackground,
-        color: theme.colors.actionDisabledText,
-        '&:hover': {
-            backgroundColor: theme.colors.actionDisabledBackground,
-            borderColor: theme.colors.actionDisabledBackground,
-            color: theme.colors.actionDisabledText,
-        },
-        '&:active': {
-            backgroundColor: theme.colors.actionDisabledBackground,
-            borderColor: theme.colors.actionDisabledBackground,
-            color: theme.colors.actionDisabledText,
-        },
-    }, _b), (loading && (_c = {
-            '::before': {
-                opacity: 0,
-            }
-        },
-        _c["." + clsLoadingIcon] = {
-            // Position loading indicator in center
-            position: 'absolute',
-            // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
-            left: 'calc(50% - 7px)',
-            // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
-            svg: {
-                animationDuration: '1s !important',
-            },
-        },
-        _c["> :not(." + clsLoadingIcon + ")"] = tslib_es6.__assign({ 
-            // Hide all content except loading icon
-            opacity: 0, visibility: 'hidden' }, (withIcon && { paddingLeft: theme.spacing.paddingMd * 2 + 14 })),
-        _c))), (_d = {}, _d["> ." + clsIcon + " + span, > span + ." + clsIcon] = {
-        marginRight: 0,
-    }, _d["&[" + classNamePrefix + "-click-animating-without-extra-node='true']::after"] = {
-        display: 'none',
-    }, _d["&." + clsIconOnly] = {
-        border: 'none',
-        boxShadow: 'none',
-    }, _d)), DesignSystemProvider.getAnimationCss(enableAnimation));
-    var importantStyles = importantify(styles);
-    return react.css(importantStyles);
-};
-var Button = function (_a) {
-    var dangerouslySetAntdProps = _a.dangerouslySetAntdProps, props = tslib_es6.__rest(_a, ["dangerouslySetAntdProps"]);
-    var context = React.useContext(DesignSystemProvider.DesignSystemContext);
-    var _b = useDesignSystemTheme.useDesignSystemTheme(), theme = _b.theme, classNamePrefix = _b.classNamePrefix;
-    return (emotionReactJsxRuntime_esm.jsx(button["default"], tslib_es6.__assign({}, props, { css: getButtonEmotionStyles({
-            theme: theme,
-            classNamePrefix: classNamePrefix,
-            loading: Boolean(props.loading),
-            withIcon: Boolean(props.icon),
-            danger: Boolean(props.danger),
-            enableAnimation: context.enableAnimation,
-        }) }, dangerouslySetAntdProps), void 0));
-};
-
-exports.Button = Button;
-exports.getButtonEmotionStyles = getButtonEmotionStyles;
-//# sourceMappingURL=Button.js.map

package/dist/cjs/design-system/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/design-system/Button/Button.tsx"],"sourcesContent":["import { css, CSSObject, SerializedStyles } from '@emotion/react';\nimport { Button as AntDButton, ButtonProps as AntDButtonProps } from 'antd';\nimport _ from 'lodash';\nimport { DesignSystemContext, getAnimationCss } from '../DesignSystemProvider';\nimport { ComponentTheme } from '../../theme';\nimport { DangerouslySetAntdProps } from '../types';\nimport { useDesignSystemTheme } from '../hooks';\nimport React, { ReactElement, useContext } from 'react';\n\n/**\n * Recursively appends `!important` to all CSS properties in an Emotion CSSObject.\n * Used to ensure that we always override Ant styles, without worrying about selector precedence.\n * TODO(@giles): move this out to a shared util file that can be consumed by other components.\n */\nfunction importantify(obj: CSSObject): CSSObject {\n  return _.mapValues(obj, (value) => {\n    if (_.isString(value) || _.isNumber(value) || _.isBoolean(value)) {\n      return `${value}!important`;\n    }\n\n    if (_.isNil(value)) {\n      return value;\n    }\n\n    return importantify(value as CSSObject);\n  }) as CSSObject;\n}\n\nexport const getButtonEmotionStyles = ({\n  theme,\n  classNamePrefix,\n  loading,\n  withIcon,\n  enableAnimation,\n}: {\n  theme: ComponentTheme;\n  classNamePrefix: string;\n  loading?: boolean;\n  withIcon?: boolean;\n  danger?: boolean;\n  enableAnimation: boolean;\n}): SerializedStyles => {\n  const clsIcon = theme.general.iconfontCssPrefix;\n  const clsLoadingIcon = `${classNamePrefix}-btn-loading-icon`;\n  const clsIconOnly = `${classNamePrefix}-btn-icon-only`;\n  const classPrimary = `.${classNamePrefix}-btn-primary`;\n  const classLink = `.${classNamePrefix}-btn-link`;\n  const classDangerous = `.${classNamePrefix}-btn-dangerous`;\n\n  const styles: CSSObject = {\n    backgroundColor: theme.colors.actionDefaultBackgroundDefault,\n    borderColor: theme.colors.actionDefaultBorderDefault,\n    color: theme.colors.actionDefaultTextDefault,\n\n    '&:focus-visible': {\n      outlineStyle: 'solid',\n      outlineWidth: '2px',\n      outlineOffset: '1px',\n      outlineColor: theme.colors.primary,\n    },\n\n    '&:hover': {\n      backgroundColor: theme.colors.actionDefaultBackgroundHover,\n      borderColor: theme.colors.actionDefaultBorderHover,\n      color: theme.colors.actionDefaultTextHover,\n    },\n\n    '&:active': {\n      backgroundColor: theme.colors.actionDefaultBackgroundPress,\n      borderColor: theme.colors.actionDefaultBorderPress,\n      color: theme.colors.actionDefaultTextPress,\n    },\n\n    [`&${classPrimary}`]: {\n      backgroundColor: theme.colors.actionPrimaryBackgroundDefault,\n      borderColor: theme.colors.actionPrimaryBackgroundDefault,\n      color: theme.colors.actionPrimaryTextDefault,\n\n      '&:hover': {\n        backgroundColor: theme.colors.actionPrimaryBackgroundHover,\n        borderColor: theme.colors.actionPrimaryBackgroundHover,\n        color: theme.colors.actionPrimaryTextHover,\n      },\n\n      '&:active': {\n        backgroundColor: theme.colors.actionPrimaryBackgroundPress,\n        borderColor: theme.colors.actionPrimaryBackgroundPress,\n        color: theme.colors.actionPrimaryTextPress,\n      },\n    },\n\n    [`&${classLink}`]: {\n      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,\n      borderColor: theme.colors.actionTertiaryBackgroundDefault,\n      color: theme.colors.actionTertiaryTextDefault,\n\n      '&:hover': {\n        backgroundColor: theme.colors.actionTertiaryBackgroundHover,\n        borderColor: 'transparent',\n        color: theme.colors.actionTertiaryTextHover,\n      },\n\n      '&:active': {\n        backgroundColor: theme.colors.actionTertiaryBackgroundPress,\n        borderColor: 'transparent',\n        color: theme.colors.actionTertiaryTextPress,\n      },\n    },\n\n    [`&${classDangerous}${classPrimary}`]: {\n      backgroundColor: theme.colors.actionDangerBackgroundDefault,\n      borderColor: theme.colors.actionDangerBackgroundDefault,\n      color: theme.colors.white,\n\n      '&:hover': {\n        backgroundColor: theme.colors.actionDangerBackgroundHover,\n        borderColor: theme.colors.actionDangerBackgroundHover,\n        color: theme.colors.white,\n      },\n\n      '&:active': {\n        backgroundColor: theme.colors.actionDangerBackgroundPress,\n        borderColor: theme.colors.actionDangerBackgroundPress,\n        color: theme.colors.white,\n      },\n\n      '&:focus-visible': {\n        outlineColor: theme.colors.actionDangerBackgroundDefault,\n      },\n    },\n\n    [`&${classDangerous}`]: {\n      backgroundColor: theme.colors.white,\n      borderColor: theme.colors.actionDangerBackgroundDefault,\n      color: theme.colors.textValidationDanger,\n\n      '&:hover': {\n        backgroundColor: theme.colors.white,\n        borderColor: theme.colors.actionDangerBackgroundHover,\n        color: theme.colors.actionDangerBackgroundHover,\n      },\n\n      '&:active': {\n        backgroundColor: theme.colors.white,\n        borderColor: theme.colors.actionDangerBackgroundPress,\n        color: theme.colors.actionDangerBackgroundPress,\n      },\n\n      '&:focus-visible': {\n        outlineColor: theme.colors.actionDangerBackgroundDefault,\n      },\n    },\n\n    ['&[disabled]']: {\n      backgroundColor: theme.colors.actionDisabledBackground,\n      borderColor: theme.colors.actionDisabledBackground,\n      color: theme.colors.actionDisabledText,\n\n      '&:hover': {\n        backgroundColor: theme.colors.actionDisabledBackground,\n        borderColor: theme.colors.actionDisabledBackground,\n        color: theme.colors.actionDisabledText,\n      },\n\n      '&:active': {\n        backgroundColor: theme.colors.actionDisabledBackground,\n        borderColor: theme.colors.actionDisabledBackground,\n        color: theme.colors.actionDisabledText,\n      },\n    },\n\n    // Loading styles\n    ...(loading && {\n      '::before': {\n        opacity: 0,\n      },\n\n      [`.${clsLoadingIcon}`]: {\n        // Position loading indicator in center\n        position: 'absolute',\n        // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.\n        left: 'calc(50% - 7px)',\n\n        // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.\n        svg: {\n          animationDuration: '1s !important',\n        },\n      },\n      [`> :not(.${clsLoadingIcon})`]: {\n        // Hide all content except loading icon\n        opacity: 0,\n        visibility: 'hidden',\n        // Add horizontal space for icon\n        ...(withIcon && { paddingLeft: theme.spacing.paddingMd * 2 + 14 }),\n      },\n    }),\n\n    // Icon styles\n    [`> .${clsIcon} + span, > span + .${clsIcon}`]: {\n      marginRight: 0,\n    },\n\n    // Disable animations\n    [`&[${classNamePrefix}-click-animating-without-extra-node='true']::after`]: {\n      display: 'none',\n    },\n    [`&.${clsIconOnly}`]: {\n      border: 'none',\n      boxShadow: 'none',\n    },\n\n    ...getAnimationCss(enableAnimation),\n  };\n\n  const importantStyles = importantify(styles);\n\n  return css(importantStyles);\n};\n\nexport interface ButtonProps\n  extends Omit<AntDButtonProps, 'type' | 'ghost' | 'shape' | 'size'>,\n    DangerouslySetAntdProps<AntDButtonProps> {\n  type?: 'primary' | 'link';\n  size?: 'small' | 'middle';\n}\n\nexport const Button: React.FC<ButtonProps> = ({ dangerouslySetAntdProps, ...props }): ReactElement => {\n  const context = useContext(DesignSystemContext);\n  const { theme, classNamePrefix } = useDesignSystemTheme();\n\n  return (\n    <AntDButton\n      {...props}\n      css={getButtonEmotionStyles({\n        theme,\n        classNamePrefix,\n        loading: Boolean(props.loading),\n        withIcon: Boolean(props.icon),\n        danger: Boolean(props.danger),\n        enableAnimation: context.enableAnimation,\n      })}\n      {...dangerouslySetAntdProps}\n    />\n  );\n};\n"],"names":["_","getAnimationCss","css","useContext","DesignSystemContext","useDesignSystemTheme","_jsx","AntDButton"],"mappings":"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"}

package/dist/cjs/design-system/Button/Button.test.d.ts

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

package/dist/cjs/design-system/Button/SplitButton.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { DropdownButtonProps as AntDDropdownButtonProps } from 'antd/lib/dropdown';
-import { DangerouslySetAntdProps } from '../types';
-export interface SplitButtonMenuInfo {
-    key: React.Key;
-    keyPath: React.Key[];
-    domEvent: React.SyntheticEvent<HTMLElement>;
-}
-export declare type SplitButtonProps = Omit<AntDDropdownButtonProps, 'overlay'> & DangerouslySetAntdProps<AntDDropdownButtonProps> & {
-    menu: AntDDropdownButtonProps['overlay'];
-};
-export declare const SplitButton: React.FC<SplitButtonProps>;

package/dist/cjs/design-system/Button/SplitButton.js

@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
-var emotionReactJsxRuntime_esm = require('../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js');
-var Button = require('./Button.js');
-var React = require('react');
-var useDesignSystemTheme = require('../hooks/useDesignSystemTheme.js');
-var dropdown = require('../node_modules/antd/es/dropdown/dropdown.js');
-var ChevronDownIcon = require('../Icon/icons/ChevronDownIcon.js');
-var DesignSystemProvider = require('../DesignSystemProvider/DesignSystemProvider.js');
-
-var SplitButton = function (props) {
-    var context = React.useContext(DesignSystemProvider.DesignSystemContext);
-    var _a = useDesignSystemTheme.useDesignSystemTheme(), theme = _a.theme, classNamePrefix = _a.classNamePrefix;
-    // AntD DropdownButton does not support loading, danger and block.
-    // TODO: We could get around this using a custom buttonsRender.
-    var css = Button.getButtonEmotionStyles({
-        theme: theme,
-        classNamePrefix: classNamePrefix,
-        loading: false,
-        withIcon: Boolean(props.icon),
-        danger: false,
-        enableAnimation: context.enableAnimation,
-    });
-    var children = props.children, icon = props.icon, menu = props.menu, dangerouslySetAntdProps = props.dangerouslySetAntdProps, dropdownButtonProps = tslib_es6.__rest(props, ["children", "icon", "menu", "dangerouslySetAntdProps"]);
-    return (emotionReactJsxRuntime_esm.jsxs(dropdown.Button, tslib_es6.__assign({}, dropdownButtonProps, { overlay: menu, css: css, icon: emotionReactJsxRuntime_esm.jsx(ChevronDownIcon, {}, void 0) }, dangerouslySetAntdProps, { children: [icon, children] }), void 0));
-};
-
-exports.SplitButton = SplitButton;
-//# sourceMappingURL=SplitButton.js.map

package/dist/cjs/design-system/Button/SplitButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SplitButton.js","sources":["../../../../src/design-system/Button/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownIcon } from '../Icon/icons';\nimport { Dropdown as AntDDropdown } from 'antd';\nimport { DropdownButtonProps as AntDDropdownButtonProps } from 'antd/lib/dropdown';\nimport { getButtonEmotionStyles } from './Button';\nimport { useDesignSystemTheme } from '../hooks';\nimport { ReactElement, useContext } from 'react';\nimport { DesignSystemContext } from '../DesignSystemProvider';\nimport { DangerouslySetAntdProps } from '../types';\n\n// Taken from rc-menu\n// TODO: Check if we can maybe depend on rc-menu?\nexport interface SplitButtonMenuInfo {\n  key: React.Key;\n  keyPath: React.Key[];\n  domEvent: React.SyntheticEvent<HTMLElement>;\n}\n\nexport type SplitButtonProps = Omit<AntDDropdownButtonProps, 'overlay'> &\n  DangerouslySetAntdProps<AntDDropdownButtonProps> & {\n    menu: AntDDropdownButtonProps['overlay']; // Rename \"overlay\" to \"menu\"\n  };\n\nexport const SplitButton: React.FC<SplitButtonProps> = (props: SplitButtonProps): ReactElement => {\n  const context = useContext(DesignSystemContext);\n  const { theme, classNamePrefix } = useDesignSystemTheme();\n\n  // AntD DropdownButton does not support loading, danger and block.\n  // TODO: We could get around this using a custom buttonsRender.\n  const css = getButtonEmotionStyles({\n    theme,\n    classNamePrefix,\n    loading: false,\n    withIcon: Boolean(props.icon),\n    danger: false,\n    enableAnimation: context.enableAnimation,\n  });\n\n  const { children, icon, menu, dangerouslySetAntdProps, ...dropdownButtonProps } = props;\n\n  return (\n    <AntDDropdown.Button\n      {...dropdownButtonProps}\n      overlay={menu}\n      css={css}\n      icon={<ChevronDownIcon />}\n      {...dangerouslySetAntdProps}\n    >\n      {icon}\n      {children}\n    </AntDDropdown.Button>\n  );\n};\n"],"names":["useContext","DesignSystemContext","useDesignSystemTheme","getButtonEmotionStyles","_jsxs","AntDDropdown","_jsx"],"mappings":";;;;;;;;;;;;;IAuBa,WAAW,GAA+B,UAAC,KAAuB;IAC7E,IAAM,OAAO,GAAGA,gBAAU,CAACC,wCAAmB,CAAC,CAAC;IAC1C,IAAA,KAA6BC,yCAAoB,EAAE,EAAjD,KAAK,WAAA,EAAE,eAAe,qBAA2B,CAAC;;;IAI1D,IAAM,GAAG,GAAGC,6BAAsB,CAAC;QACjC,KAAK,OAAA;QACL,eAAe,iBAAA;QACf,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;QAC7B,MAAM,EAAE,KAAK;QACb,eAAe,EAAE,OAAO,CAAC,eAAe;KACzC,CAAC,CAAC;IAEK,IAAA,QAAQ,GAAkE,KAAK,SAAvE,EAAE,IAAI,GAA4D,KAAK,KAAjE,EAAE,IAAI,GAAsD,KAAK,KAA3D,EAAE,uBAAuB,GAA6B,KAAK,wBAAlC,EAAK,mBAAmB,oBAAK,KAAK,EAAjF,uDAAyE,CAAF,CAAW;IAExF,QACEC,gCAACC,QAAY,CAAC,MAAM,yBACd,mBAAmB,IACvB,OAAO,EAAE,IAAI,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAEC,+BAAC,eAAe,aAAG,IACrB,uBAAuB,eAE1B,IAAI,EACJ,QAAQ,aACW,EACtB;AACJ;;;;"}

package/dist/cjs/design-system/Button/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Button';
-export * from './SplitButton';

package/dist/cjs/design-system/Button/stories/block-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const BlockExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Button/stories/danger-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const DangerExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Button/stories/default-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const DefaultExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Button/stories/disabled-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const DisabledExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Button/stories/icon-and-label-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const IconAndLabelExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Button/stories/icon-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const IconExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Button/stories/loading-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const LoadingExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Button/stories/size-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const SizeExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Button/stories/split-example.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const SplitExample: () => JSX.Element;

package/dist/cjs/design-system/Button/stories/types-example.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../index';
-export declare const TypesExample: (props: ButtonProps) => JSX.Element;

package/dist/cjs/design-system/Checkbox/Checkbox.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { CheckboxChangeEvent } from 'antd/lib/checkbox';
-import { CheckboxGroupProps } from 'antd/lib/checkbox';
-export declare const Checkbox: {
-    ({ isChecked, onChange, children, isDisabled, }: {
-        isChecked: boolean | null;
-        onChange: (isChecked: boolean, event: CheckboxChangeEvent) => void;
-        children?: React.ReactNode;
-        isDisabled?: boolean | undefined;
-    }): JSX.Element;
-    Group: (props: CheckboxGroupProps) => JSX.Element;
-};

package/dist/cjs/design-system/Checkbox/Checkbox.js

@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
-var emotionReactJsxRuntime_esm = require('../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js');
-var react = require('@emotion/react');
-var index = require('../../theme/index.js');
-var React = require('react');
-var index$1 = require('../node_modules/antd/es/checkbox/index.js');
-var DesignSystemProvider = require('../DesignSystemProvider/DesignSystemProvider.js');
-
-function getCheckboxEmotionStyles(clsPrefix, enableAnimation, theme) {
-    var _a, _b, _c, _d, _e, _f;
-    var classInput = "." + clsPrefix + "-input";
-    var classInner = "." + clsPrefix + "-inner";
-    var classIndeterminate = "." + clsPrefix + "-indeterminate";
-    var classChecked = "." + clsPrefix + "-checked";
-    var classDisabled = "." + clsPrefix + "-disabled";
-    // TODO(giles): update all colours in this function to come from the main theme object when they are all available.
-    var colors = {
-        hover: '#18609A',
-        active: '#0D5087',
-        disabled: '#A3AEB8',
-    };
-    var styles = tslib_es6.__assign((_a = {}, _a[classInner] = {
-        '&:focus': {
-            borderColor: '#64727D',
-        },
-        borderColor: '#64727D',
-    }, _a[classInput + ":focus-visible + " + classInner] = {
-        outlineWidth: '2px',
-        outlineColor: theme.colors.primary,
-        outlineOffset: '4px',
-        outlineStyle: 'auto',
-    }, _a[classInput + ":hover + " + classInner] = {
-        backgroundColor: 'rgba(34, 114, 180, 0.08)',
-        borderColor: 'rgba(24, 96, 154, 1)',
-    }, _a[classInput + ":active + " + classInner] = {
-        backgroundColor: 'rgba(34, 114, 180, 0.16)',
-    }, _a[classChecked] = (_b = {},
-        // Checked hover
-        _b[classInput + ":hover + " + classInner] = {
-            backgroundColor: 'rgba(24, 96, 154, 1)',
-            borderColor: 'rgba(24, 96, 154, 1)',
-        },
-        // Checked and mouse pressed
-        _b[classInput + ":active + " + classInner] = {
-            backgroundColor: colors.active,
-            borderColor: colors.active,
-        },
-        _b), _a[classIndeterminate] = (_c = {},
-        _c[classInner] = {
-            backgroundColor: theme.colors.primary,
-            borderColor: theme.colors.primary,
-            // The after pseudo-element is used for the check image itself
-            '&:after': {
-                backgroundColor: 'white',
-                height: '3px',
-                width: '8px',
-                borderRadius: '4px',
-            },
-        },
-        // Indeterminate hover
-        _c[classInput + ":hover + " + classInner] = {
-            backgroundColor: 'rgba(24, 96, 154, 1)',
-            borderColor: 'rgba(24, 96, 154, 1)',
-        },
-        // Indeterminate and mouse pressed
-        _c[classInput + ":active + " + classInner] = {
-            backgroundColor: colors.active,
-        },
-        _c), _a[classDisabled] = (_d = {},
-        // Disabled Checked
-        _d["&" + classChecked] = (_e = {},
-            _e[classInner] = {
-                backgroundColor: colors.disabled,
-                borderColor: colors.disabled + "!important",
-            },
-            // Disabled checked hover
-            _e[classInput + ":hover + " + classInner] = {
-                backgroundColor: colors.disabled,
-                borderColor: colors.disabled + "!important",
-            },
-            _e),
-        // Disabled indeterminate
-        _d["&" + classIndeterminate] = (_f = {},
-            _f[classInner] = {
-                backgroundColor: colors.disabled,
-                borderColor: colors.disabled + "!important",
-            },
-            // Disabled indeterminate hover
-            _f[classInput + ":hover + " + classInner] = {
-                backgroundColor: colors.disabled,
-                borderColor: colors.disabled + "!important",
-            },
-            _f),
-        // Disabled unchecked
-        _d[classInner] = {
-            backgroundColor: 'white',
-            borderColor: colors.disabled + "!important",
-            // The after pseudo-element is used for the check image itself
-            '&:after': {
-                borderColor: 'white',
-            },
-        },
-        // Disabled hover
-        _d[classInput + ":hover + " + classInner] = {
-            backgroundColor: 'white',
-            borderColor: colors.disabled + "!important",
-        },
-        _d), _a), DesignSystemProvider.getAnimationCss(enableAnimation));
-    return react.css(styles);
-}
-var Checkbox = function (_a) {
-    var isChecked = _a.isChecked, onChange = _a.onChange, children = _a.children, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b;
-    var context = React.useContext(DesignSystemProvider.DesignSystemContext);
-    var clsPrefix = context.getPrefixCls('checkbox');
-    var theme = index.getTheme('default');
-    return (
-    // Antd checkboxes are inline, so we add this div to make ours block-level
-    emotionReactJsxRuntime_esm.jsx("div", { children: emotionReactJsxRuntime_esm.jsx(index$1, tslib_es6.__assign({ checked: isChecked === null ? undefined : isChecked, onChange: function (event) {
-                onChange(event.target.checked, event);
-            }, disabled: isDisabled, indeterminate: isChecked === null, css: getCheckboxEmotionStyles(clsPrefix, context.enableAnimation, theme) }, { children: children }), void 0) }, void 0));
-};
-var CheckboxGroup = function (props) {
-    var context = React.useContext(DesignSystemProvider.DesignSystemContext);
-    return emotionReactJsxRuntime_esm.jsx(index$1.Group, tslib_es6.__assign({}, props, { css: react.css(DesignSystemProvider.getAnimationCss(context.enableAnimation)) }), void 0);
-};
-Checkbox.Group = CheckboxGroup;
-
-exports.Checkbox = Checkbox;
-//# sourceMappingURL=Checkbox.js.map

package/dist/cjs/design-system/Checkbox/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/design-system/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Checkbox as AntDCheckbox } from 'antd';\nimport { css, CSSObject, SerializedStyles } from '@emotion/react';\nimport { DesignSystemContext, getAnimationCss } from '..';\nimport { getTheme, Theme } from '../../theme';\nimport { CheckboxChangeEvent } from 'antd/lib/checkbox';\nimport { CheckboxGroupProps } from 'antd/lib/checkbox';\nimport { useContext } from 'react';\n\nfunction getCheckboxEmotionStyles(clsPrefix: string, enableAnimation: boolean, theme: Theme): SerializedStyles {\n  const classInput = `.${clsPrefix}-input`;\n  const classInner = `.${clsPrefix}-inner`;\n  const classIndeterminate = `.${clsPrefix}-indeterminate`;\n  const classChecked = `.${clsPrefix}-checked`;\n  const classDisabled = `.${clsPrefix}-disabled`;\n\n  // TODO(giles): update all colours in this function to come from the main theme object when they are all available.\n  const colors = {\n    hover: '#18609A',\n    active: '#0D5087',\n    disabled: '#A3AEB8',\n  };\n\n  const styles: CSSObject = {\n    // Top level styles are for the unchecked state\n    [classInner]: {\n      '&:focus': {\n        borderColor: '#64727D',\n      },\n      borderColor: '#64727D',\n    },\n\n    // Keyboard focus\n    [`${classInput}:focus-visible + ${classInner}`]: {\n      outlineWidth: '2px',\n      outlineColor: theme.colors.primary,\n      outlineOffset: '4px',\n      outlineStyle: 'auto',\n    },\n\n    // Hover\n    [`${classInput}:hover + ${classInner}`]: {\n      backgroundColor: 'rgba(34, 114, 180, 0.08)',\n      borderColor: 'rgba(24, 96, 154, 1)',\n    },\n\n    // Mouse pressed\n    [`${classInput}:active + ${classInner}`]: {\n      backgroundColor: 'rgba(34, 114, 180, 0.16)',\n    },\n\n    // Checked state\n    [classChecked]: {\n      // Checked hover\n      [`${classInput}:hover + ${classInner}`]: {\n        backgroundColor: 'rgba(24, 96, 154, 1)',\n        borderColor: 'rgba(24, 96, 154, 1)',\n      },\n\n      // Checked and mouse pressed\n      [`${classInput}:active + ${classInner}`]: {\n        backgroundColor: colors.active,\n        borderColor: colors.active,\n      },\n    },\n\n    // Indeterminate\n    [classIndeterminate]: {\n      [classInner]: {\n        backgroundColor: theme.colors.primary,\n        borderColor: theme.colors.primary,\n\n        // The after pseudo-element is used for the check image itself\n        '&:after': {\n          backgroundColor: 'white',\n          height: '3px',\n          width: '8px',\n          borderRadius: '4px',\n        },\n      },\n\n      // Indeterminate hover\n      [`${classInput}:hover + ${classInner}`]: {\n        backgroundColor: 'rgba(24, 96, 154, 1)',\n        borderColor: 'rgba(24, 96, 154, 1)',\n      },\n\n      // Indeterminate and mouse pressed\n      [`${classInput}:active + ${classInner}`]: {\n        backgroundColor: colors.active,\n      },\n    },\n\n    // Disabled state\n    [classDisabled]: {\n      // Disabled Checked\n      [`&${classChecked}`]: {\n        [classInner]: {\n          backgroundColor: colors.disabled,\n          borderColor: `${colors.disabled}!important`,\n        },\n\n        // Disabled checked hover\n        [`${classInput}:hover + ${classInner}`]: {\n          backgroundColor: colors.disabled,\n          borderColor: `${colors.disabled}!important`,\n        },\n      },\n\n      // Disabled indeterminate\n      [`&${classIndeterminate}`]: {\n        [classInner]: {\n          backgroundColor: colors.disabled,\n          borderColor: `${colors.disabled}!important`,\n        },\n\n        // Disabled indeterminate hover\n        [`${classInput}:hover + ${classInner}`]: {\n          backgroundColor: colors.disabled,\n          borderColor: `${colors.disabled}!important`,\n        },\n      },\n\n      // Disabled unchecked\n      [classInner]: {\n        backgroundColor: 'white',\n        borderColor: `${colors.disabled}!important`,\n\n        // The after pseudo-element is used for the check image itself\n        '&:after': {\n          borderColor: 'white',\n        },\n      },\n\n      // Disabled hover\n      [`${classInput}:hover + ${classInner}`]: {\n        backgroundColor: 'white',\n        borderColor: `${colors.disabled}!important`,\n      },\n    },\n\n    // Animation\n    ...getAnimationCss(enableAnimation),\n  };\n\n  return css(styles);\n}\n\nexport const Checkbox = ({\n  isChecked,\n  onChange,\n  children,\n  isDisabled = false,\n}: {\n  isChecked: boolean | null;\n  onChange: (isChecked: boolean, event: CheckboxChangeEvent) => void;\n  children?: React.ReactNode;\n  isDisabled?: boolean;\n}): JSX.Element => {\n  const context = useContext(DesignSystemContext);\n  const clsPrefix = context.getPrefixCls('checkbox');\n  const theme = getTheme('default');\n\n  return (\n    // Antd checkboxes are inline, so we add this div to make ours block-level\n    <div>\n      <AntDCheckbox\n        checked={isChecked === null ? undefined : isChecked}\n        onChange={(event) => {\n          onChange(event.target.checked, event);\n        }}\n        disabled={isDisabled}\n        indeterminate={isChecked === null}\n        css={getCheckboxEmotionStyles(clsPrefix, context.enableAnimation, theme)}\n      >\n        {children}\n      </AntDCheckbox>\n    </div>\n  );\n};\n\nconst CheckboxGroup = (props: CheckboxGroupProps): JSX.Element => {\n  const context = useContext(DesignSystemContext);\n\n  return <AntDCheckbox.Group {...props} css={css(getAnimationCss(context.enableAnimation))} />;\n};\n\nCheckbox.Group = CheckboxGroup;\n"],"names":["getAnimationCss","css","useContext","DesignSystemContext","getTheme","_jsx","AntDCheckbox"],"mappings":"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"}

package/dist/cjs/design-system/Checkbox/index.d.ts

@@ -1 +0,0 @@
-export * from './Checkbox';

package/dist/cjs/design-system/Checkbox/stories/basic.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function BasicCheckbox(): JSX.Element;

package/dist/cjs/design-system/Checkbox/stories/indeterminate.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function IndeterminateCheckbox(): JSX.Element;

package/dist/cjs/design-system/Collapse/Collapse.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { Collapse as AntDCollapse, CollapseProps as AntDCollapseProps } from 'antd';
-export interface CollapseProps extends AntDCollapseProps {
-}
-interface CollapseInterface extends React.FC<CollapseProps> {
-    Panel: typeof AntDCollapse.Panel;
-}
-export declare const Collapse: CollapseInterface;
-export {};

package/dist/cjs/design-system/Collapse/Collapse.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
-var emotionReactJsxRuntime_esm = require('../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js');
-var react = require('@emotion/react');
-var index = require('../../theme/index.js');
-var React = require('react');
-var Collapse$1 = require('../node_modules/antd/es/collapse/Collapse.js');
-var DesignSystemProvider = require('../DesignSystemProvider/DesignSystemProvider.js');
-
-function getCollapseEmotionStyles(clsPrefix, theme, enableAnimation) {
-    var _a, _b;
-    var classHeader = "." + clsPrefix + "-header";
-    var styles = tslib_es6.__assign((_a = {}, _a[classHeader] = (_b = {},
-        _b['&:focus-visible'] = {
-            outlineColor: theme.colors.primary + " !important",
-            outlineStyle: 'auto !important',
-        },
-        _b), _a), DesignSystemProvider.getAnimationCss(enableAnimation));
-    return react.css(styles);
-}
-var Collapse = function (props) {
-    var context = React.useContext(DesignSystemProvider.DesignSystemContext);
-    var clsPrefix = context.getPrefixCls('collapse');
-    var theme = index.getTheme('default');
-    return emotionReactJsxRuntime_esm.jsx(Collapse$1, tslib_es6.__assign({}, props, { css: getCollapseEmotionStyles(clsPrefix, theme, context.enableAnimation) }), void 0);
-};
-Collapse.Panel = Collapse$1.Panel;
-
-exports.Collapse = Collapse;
-//# sourceMappingURL=Collapse.js.map

package/dist/cjs/design-system/Collapse/Collapse.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Collapse.js","sources":["../../../../src/design-system/Collapse/Collapse.tsx"],"sourcesContent":["import { Collapse as AntDCollapse, CollapseProps as AntDCollapseProps } from 'antd';\nimport { css, SerializedStyles } from '@emotion/react';\nimport { DesignSystemContext, getAnimationCss } from '..';\nimport { getTheme, Theme } from '../../theme';\nimport { useContext } from 'react';\n\nexport interface CollapseProps extends AntDCollapseProps {}\n\ninterface CollapseInterface extends React.FC<CollapseProps> {\n  Panel: typeof AntDCollapse.Panel;\n}\n\nfunction getCollapseEmotionStyles(clsPrefix: string, theme: Theme, enableAnimation: boolean): SerializedStyles {\n  const classHeader = `.${clsPrefix}-header`;\n\n  const styles = {\n    [classHeader]: {\n      ['&:focus-visible']: {\n        outlineColor: `${theme.colors.primary} !important`,\n        outlineStyle: 'auto !important',\n      },\n    },\n    ...getAnimationCss(enableAnimation),\n  };\n\n  return css(styles);\n}\n\nexport const Collapse: CollapseInterface = (props) => {\n  const context = useContext(DesignSystemContext);\n  const clsPrefix = context.getPrefixCls('collapse');\n  const theme = getTheme('default');\n\n  return <AntDCollapse {...props} css={getCollapseEmotionStyles(clsPrefix, theme, context.enableAnimation)} />;\n};\n\nCollapse.Panel = AntDCollapse.Panel;\n"],"names":["getAnimationCss","css","useContext","DesignSystemContext","getTheme","_jsx","AntDCollapse"],"mappings":";;;;;;;;;;;;AAYA,SAAS,wBAAwB,CAAC,SAAiB,EAAE,KAAY,EAAE,eAAwB;;IACzF,IAAM,WAAW,GAAG,MAAI,SAAS,YAAS,CAAC;IAE3C,IAAM,MAAM,mCACT,WAAW;QACV,GAAC,iBAAiB,IAAG;YACnB,YAAY,EAAK,KAAK,CAAC,MAAM,CAAC,OAAO,gBAAa;YAClD,YAAY,EAAE,iBAAiB;SAChC;kBAEAA,oCAAe,CAAC,eAAe,CAAC,CACpC,CAAC;IAEF,OAAOC,SAAG,CAAC,MAAM,CAAC,CAAC;AACrB,CAAC;IAEY,QAAQ,GAAsB,UAAC,KAAK;IAC/C,IAAM,OAAO,GAAGC,gBAAU,CAACC,wCAAmB,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACnD,IAAM,KAAK,GAAGC,cAAQ,CAAC,SAAS,CAAC,CAAC;IAElC,OAAOC,+BAACC,UAAY,yBAAK,KAAK,IAAE,GAAG,EAAE,wBAAwB,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,YAAI,CAAC;AAC/G,EAAE;AAEF,QAAQ,CAAC,KAAK,GAAGA,UAAY,CAAC,KAAK;;;;"}

package/dist/cjs/design-system/Collapse/index.d.ts

@@ -1 +0,0 @@
-export * from './Collapse';

package/dist/cjs/design-system/Collapse/stories/basic-example.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const BasicExample: () => JSX.Element;

package/dist/cjs/design-system/Colors/stories/all-colors.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ThemeName } from '../../../theme';
-export interface ColorTokensProps {
-    themeName: ThemeName;
-}
-export declare function AllColors(): JSX.Element;

package/dist/cjs/design-system/Colors/stories/story-helpers/CopyableColorTag.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface ColorTokenProps {
-    value: string;
-    name: string;
-}
-export declare function CopyableColorTag({ value, name }: ColorTokenProps): JSX.Element;

package/dist/cjs/design-system/DesignSystemProvider/DesignSystemProvider.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { CSSObject } from '@emotion/react';
-import { ThemeName } from '../../theme';
-interface DesignSystemProviderProps {
-    /**
-     * The UI theme to be applied to all components inside this provider. Can be "default" or "dark".
-     */
-    theme?: ThemeName;
-    /**
-     * Set this to `true` to enable CSS animations for all Du Bois components inside this provider.
-     * This is purely a visual enhancement, and is not necessary for the functionality of any component.
-     */
-    enableAnimation?: boolean;
-    /**
-     * Components to render within the provider.
-     */
-    children: React.ReactNode;
-}
-interface DuboisContextType {
-    enableAnimation: boolean;
-    theme: ThemeName;
-    getPrefixCls: (suffix?: string) => string;
-}
-export declare const DesignSystemContext: import("react").Context<DuboisContextType>;
-export declare function getAnimationCss(enableAnimation: boolean): CSSObject;
-export declare const DesignSystemProvider: React.FC<DesignSystemProviderProps>;
-export {};