@amboss/design-system 1.15.1 → 1.15.2

package/build/cjs/src/index.js

@@ -1,136 +0,0 @@
-'use strict';
-
-var visualConfig = require('../build-tokens/visualConfig.js');
-var react = require('@emotion/react');
-var cache = require('@emotion/cache');
-var Card = require('./components/Card/Card.js');
-var CardBox = require('./components/Card/CardBox.js');
-var Box = require('./components/Box/Box.js');
-var Inline = require('./components/Inline/Inline.js');
-var Stack = require('./components/Stack/Stack.js');
-var Header = require('./components/Typography/Header/Header.js');
-var Text = require('./components/Typography/Text/Text.js');
-var TextClamped = require('./components/Typography/TextClamped/TextClamped.js');
-var StyledText = require('./components/Typography/StyledText/StyledText.js');
-var Link = require('./components/Link/Link.js');
-var Icon = require('./components/Icon/Icon.js');
-var Button = require('./components/Button/Button.js');
-var Divider = require('./components/Divider/Divider.js');
-var Columns = require('./components/Column/Columns.js');
-var Tabs = require('./components/Tabs/Tabs.js');
-var Badge = require('./components/Badge/Badge.js');
-var SearchResult = require('./components/SearchResult/SearchResult.js');
-var ToggleButton = require('./components/Form/ToggleButton/ToggleButton.js');
-var DropdownMenu = require('./components/DropdownMenu/DropdownMenu.js');
-var FormFieldGroup = require('./components/Form/FormFieldGroup/FormFieldGroup.js');
-var Checkbox = require('./components/Form/Checkbox/Checkbox.js');
-var Toggle = require('./components/Form/Toggle/Toggle.js');
-var Radio = require('./components/Form/Radio/Radio.js');
-var RadioButton = require('./components/Form/RadioButton/RadioButton.js');
-var Textarea = require('./components/Form/Textarea/Textarea.js');
-var Select = require('./components/Form/Select/Select.js');
-var SubThemeProvider = require('./components/SubThemeProvider/SubThemeProvider.js');
-var PictogramButton = require('./components/PictogramButton/PictogramButton.js');
-var MediaViewerBar = require('./components/MediaViewerBar/MediaViewerBar.js');
-var SegmentedProgressBar = require('./components/SegmentedProgressBar/SegmentedProgressBar.js');
-var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
-var Container = require('./components/Container/Container.js');
-var RoundButton = require('./components/RoundButton/RoundButton.js');
-var Notification = require('./components/Notification/Notification.js');
-var Logo = require('./components/Logo/Logo.js');
-var MediaItem = require('./components/MediaItem/MediaItem.js');
-var Callout = require('./components/Callout/Callout.js');
-var Modal = require('./components/Patterns/Modal/Modal.js');
-var ButtonGroup = require('./components/Patterns/ButtonGroup/ButtonGroup.js');
-var Collapsible = require('./components/Collapsible/Collapsible.js');
-var LoadingSpinner = require('./components/LoadingSpinner/LoadingSpinner.js');
-var Pagination = require('./components/Pagination/Pagination.js');
-var SegmentedControl = require('./components/Form/SegmentedControl/SegmentedControl.js');
-var Tooltip = require('./components/Tooltip/Tooltip.js');
-var Tag = require('./components/Tag/Tag.js');
-var Input = require('./components/Form/Input/Input.js');
-var PasswordInput = require('./components/Form/PasswordInput/PasswordInput.js');
-var DataTable = require('./components/DataTable/DataTable.js');
-var useDataTableSort = require('./components/DataTable/useDataTableSort.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var cache__default = /*#__PURE__*/_interopDefault(cache);
-
-const {
-  dark,
-  light
-} = visualConfig.ambossVisualConfiguration;
-
-Object.defineProperty(exports, 'CacheProvider', {
-  enumerable: true,
-  get: function () { return react.CacheProvider; }
-});
-Object.defineProperty(exports, 'ThemeProvider', {
-  enumerable: true,
-  get: function () { return react.ThemeProvider; }
-});
-Object.defineProperty(exports, 'createCache', {
-  enumerable: true,
-  get: function () { return cache__default.default; }
-});
-exports.Card = Card.Card;
-exports.CardBox = CardBox.CardBox;
-exports.Box = Box.Box;
-exports.Inline = Inline.Inline;
-exports.Stack = Stack.Stack;
-exports.H1 = Header.H1;
-exports.H2 = Header.H2;
-exports.H3 = Header.H3;
-exports.H4 = Header.H4;
-exports.H5 = Header.H5;
-exports.H6 = Header.H6;
-exports.Text = Text.Text;
-exports.TextClamped = TextClamped.TextClamped;
-exports.StyledText = StyledText.StyledText;
-exports.makeStyledJSX = StyledText.makeStyledJSX;
-exports.Link = Link.Link;
-exports.Icon = Icon.Icon;
-exports.Button = Button.Button;
-exports.Divider = Divider.Divider;
-exports.Column = Columns.Column;
-exports.Columns = Columns.Columns;
-exports.Tabs = Tabs.Tabs;
-exports.Badge = Badge.Badge;
-exports.SearchResult = SearchResult.SearchResult;
-exports.ToggleButton = ToggleButton.ToggleButton;
-exports.DropdownMenu = DropdownMenu.DropdownMenu;
-exports.FormFieldGroup = FormFieldGroup.FormFieldGroup;
-exports.Checkbox = Checkbox.Checkbox;
-exports.Toggle = Toggle.Toggle;
-exports.Radio = Radio.Radio;
-exports.RadioButton = RadioButton.RadioButton;
-exports.Textarea = Textarea.Textarea;
-exports.Select = Select.Select;
-exports.SubThemeProvider = SubThemeProvider.SubThemeProvider;
-exports.PictogramButton = PictogramButton.PictogramButton;
-exports.MediaViewerBar = MediaViewerBar.MediaViewerBar;
-exports.SegmentedProgressBar = SegmentedProgressBar.SegmentedProgressBar;
-exports.ProgressBar = ProgressBar.ProgressBar;
-exports.Container = Container.Container;
-exports.RoundButton = RoundButton.RoundButton;
-exports.Notification = Notification.Notification;
-exports.Logo = Logo.Logo;
-exports.MediaItem = MediaItem.MediaItem;
-exports.Callout = Callout.Callout;
-exports.Modal = Modal.Modal;
-exports.ButtonGroup = ButtonGroup.ButtonGroup;
-exports.Collapsible = Collapsible.Collapsible;
-exports.CollapsibleHeader = Collapsible.CollapsibleHeader;
-exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
-exports.Pagination = Pagination.Pagination;
-exports.SegmentedControl = SegmentedControl.SegmentedControl;
-exports.Tooltip = Tooltip.Tooltip;
-exports.Tag = Tag.Tag;
-exports.Input = Input.Input;
-exports.PasswordInput = PasswordInput.PasswordInput;
-exports.BaseDataTable = DataTable.BaseDataTable;
-exports.DataTable = DataTable.DataTable;
-exports.useDataTableSort = useDataTableSort.useDataTableSort;
-exports.dark = dark;
-exports.light = light;

package/build/cjs/src/shared/ScreenReaderText.js

@@ -1,26 +0,0 @@
-'use strict';
-
-var _styled = require('@emotion/styled/base');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-// Content required to be read by screen readers but visually hidden
-const ScreenReaderText = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "ezjk5ml0"
-} : {
-  target: "ezjk5ml0",
-  label: "ScreenReaderText"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1a6jdgo",
-  styles: "width:1px;height:1px;position:absolute;left:-10000px;top:0;overflow:hidden"
-} : {
-  name: "1a6jdgo",
-  styles: "width:1px;height:1px;position:absolute;left:-10000px;top:0;overflow:hidden",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNjcmVlblJlYWRlclRleHQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2dDIiwiZmlsZSI6IlNjcmVlblJlYWRlclRleHQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuLy8gQ29udGVudCByZXF1aXJlZCB0byBiZSByZWFkIGJ5IHNjcmVlbiByZWFkZXJzIGJ1dCB2aXN1YWxseSBoaWRkZW5cbmV4cG9ydCBjb25zdCBTY3JlZW5SZWFkZXJUZXh0ID0gc3R5bGVkLmRpdih7XG4gIHdpZHRoOiAxLFxuICBoZWlnaHQ6IDEsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIGxlZnQ6IFwiLTEwMDAwcHhcIixcbiAgdG9wOiAwLFxuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-exports.ScreenReaderText = ScreenReaderText;

package/build/cjs/src/shared/flattenChildren.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var React = require('react');
-var reactIs = require('react-is');
-
-/**
- * Copied from https://github.com/grrowl/react-keyed-flatten-children (since ESM import doesn't work with the module)
- *
- * Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray),
- * this utility takes children and returns them as an array for introspection or filtering.
- *
- * Different from `Children.toArray`, it will flatten arrays and `React.Fragment`s into a regular, one-dimensional
- * array while ensuring element and fragment keys are preserved, unique, and stable between renders.
- */
-
-const flattenChildren = function (children) {
-  let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  let keys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return React.Children.toArray(children).reduce((acc, node, nodeIndex) => {
-    if (reactIs.isFragment(node)) {
-      acc.push(...flattenChildren(node.props.children, depth + 1, keys.concat(String(node.key || nodeIndex))));
-    } else if ( /*#__PURE__*/React.isValidElement(node)) {
-      acc.push( /*#__PURE__*/React.cloneElement(node, {
-        key: keys.concat(String(node.key)).join(".")
-      }));
-    } else if (typeof node === "string" || typeof node === "number") {
-      acc.push(node);
-    }
-    return acc;
-  }, []);
-};
-
-exports.flattenChildren = flattenChildren;

package/build/cjs/src/shared/informDeprecation.js

@@ -1,12 +0,0 @@
-'use strict';
-
-const informDeprecation = function (property, value, location) {
-  let details = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
-  if (property === undefined) return;
-  if (property === value) {
-    // eslint-disable-next-line no-console
-    console.error(`value ${JSON.stringify(value)} is depricated in ${location} \n ${details}`);
-  }
-};
-
-exports.informDeprecation = informDeprecation;

package/build/cjs/src/shared/mediaQueries.js

@@ -1,68 +0,0 @@
-'use strict';
-
-var _breakpoints = require('../../build-tokens/_breakpoints.json.js');
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/*
- Although, mq implementation supports any property type, the following types are specified to provide type safety. If you need support for a new type, add it here.
-*/
-
-// this thing probably deserves to be a separate library, like facepaint for emotion
-function getMq(breakpointRules) {
-  const keys = breakpointRules;
-  return rules => {
-    const res = {};
-    keys.forEach(key => {
-      res[key] = {};
-    });
-    res[`@media screen`] = {};
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Object.entries(rules).forEach(_ref => {
-      let [cssProperty, [prop, map]] = _ref;
-      if (Array.isArray(prop)) {
-        const sm = prop[0];
-        const md = prop[1] || prop[0];
-        const lg = prop[2] || prop[1] || prop[0];
-        const [s, m, l] = keys;
-        res[s][cssProperty] = map[sm];
-        res[m][cssProperty] = map[md];
-        res[l][cssProperty] = map[lg];
-      } else {
-        res[`@media screen`][cssProperty] = map[prop];
-      }
-    });
-    return res;
-  };
-}
-const mq = getMq([`@media (max-width: ${_breakpoints.default.medium.value}px)`, `@media (min-width: ${_breakpoints.default.medium.value}px) and (max-width: ${_breakpoints.default.large.value}px)`, `@media (min-width: ${_breakpoints.default.large.value}px)`]);
-function getMqValue(breakpointRules) {
-  const keys = breakpointRules;
-  return rules => {
-    const res = {};
-    keys.forEach(key => {
-      res[key] = {};
-    });
-    res[`@media screen`] = {};
-    Object.entries(rules).forEach(_ref2 => {
-      let [cssProperty, cssValues] = _ref2;
-      if (Array.isArray(cssValues)) {
-        breakpointRules.forEach((breakpoint, index) => {
-          let i = index;
-          while (!cssValues[i] && i !== 0) {
-            i -= 1;
-          }
-          res[breakpoint][cssProperty] = cssValues[i];
-        });
-      } else {
-        res[`@media screen`][cssProperty] = cssValues;
-      }
-    });
-    return res;
-  };
-}
-const mqValue = getMqValue([`@media (max-width: ${_breakpoints.default.medium.value}px)`, `@media (min-width: ${_breakpoints.default.medium.value}px) and (max-width: ${_breakpoints.default.large.value}px)`, `@media (min-width: ${_breakpoints.default.large.value}px)`]);
-
-exports.mq = mq;
-exports.mqValue = mqValue;

package/build/cjs/src/shared/useAutoPosition.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var React = require('react');
-var useWindow = require('./useWindow.js');
-var useDocument = require('./useDocument.js');
-
-const useAutoPosition = (anchorRef, contentRef, isActive) => {
-  const [verticalPosition, setVerticalPosition] = React.useState("down");
-  const [horizontalPosition, setHorizontalPosition] = React.useState("left");
-  const document = useDocument.useDocument();
-  const window = useWindow.useWindow();
-  React.useLayoutEffect(() => {
-    if (!contentRef) return;
-    if (isActive) {
-      const maxHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-      const rect = contentRef.current.getBoundingClientRect();
-      const anchorHeight = anchorRef.current.getBoundingClientRect().height;
-      const anchorX = anchorRef.current.getBoundingClientRect().x;
-      const screenWidth = window.innerWidth;
-      const isUp = rect.top + rect.height > maxHeight;
-      const isDown = rect.top - anchorHeight < rect.height;
-      const isLeft = anchorX > screenWidth / 2;
-      const isRight = anchorX < screenWidth / 2;
-      if (isUp) {
-        setVerticalPosition("up");
-      } else if (isDown) {
-        setVerticalPosition("down");
-      }
-      if (isLeft) {
-        setHorizontalPosition("left");
-      } else if (isRight) {
-        setHorizontalPosition("right");
-      }
-    } else {
-      setVerticalPosition("down");
-      setHorizontalPosition("left");
-    }
-  }, [anchorRef, contentRef, document.documentElement.clientHeight, isActive, window.innerHeight, window.innerWidth]);
-  return [verticalPosition, horizontalPosition];
-};
-
-exports.useAutoPosition = useAutoPosition;

package/build/cjs/src/shared/useDocument.js

@@ -1,7 +0,0 @@
-'use strict';
-
-function useDocument() {
-  return document;
-}
-
-exports.useDocument = useDocument;

package/build/cjs/src/shared/useHover.js

@@ -1,26 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function useHover(ref) {
-  const [hovered, setHovered] = React.useState(false);
-  const handleMouseOver = () => setHovered(true);
-  const handleMouseOut = () => setHovered(false);
-  React.useEffect(() => {
-    if (!ref) return undefined;
-    const node = ref.current;
-    if (node) {
-      node.addEventListener("mouseover", handleMouseOver);
-      node.addEventListener("mouseout", handleMouseOut);
-      return () => {
-        node.removeEventListener("mouseover", handleMouseOver);
-        node.removeEventListener("mouseout", handleMouseOut);
-      };
-    }
-    return undefined;
-  }, [ref]);
-  if (!ref) return null;
-  return hovered;
-}
-
-exports.useHover = useHover;

package/build/cjs/src/shared/useKeyboard.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var React = require('react');
-var useDocument = require('./useDocument.js');
-
-/**
- * useKeyboard handles activation of keyboard hotkeys on a given element.
- * @param {Record<string, (e: KeyboardEvent) => {}} config - A map of keyboardEvent code to function.
- * @param {RefObject} ref - The element which the keyboard config has to apply on.
- * @param {boolean} isActive - A flag to determine when the keyboard config has to be applied.
- *
- * Example:
- * useKeyboard({
- *  Escape: closeMenu,
- *  ArrowUp: () => { doSomething() },
- *  KeyB: () => { console.log("bagi") },
- * }, menuRef, menuOpen)
- *
- * This mean that these keyboard shortcuts will be applied on menuRef when the menu is opened.
- */
-
-function useKeyboard(config, ref, isActive) {
-  const document = useDocument.useDocument();
-  const handleKeyboard = event => {
-    if (!isActive) return;
-    if (document.activeElement !== ref.current && !ref.current.contains(document.activeElement)) return;
-    const targetConfigKey = Object.keys(config).find(targetKeys => targetKeys.split(" ").includes(event.code));
-    if (!targetConfigKey) return;
-    event.preventDefault();
-    const res = config[targetConfigKey](event);
-    if (res === false) {
-      event.stopPropagation();
-    }
-  };
-  React.useEffect(() => {
-    document.addEventListener("keydown", handleKeyboard);
-    return () => {
-      document.removeEventListener("keydown", handleKeyboard);
-    };
-  });
-}
-
-exports.useKeyboard = useKeyboard;

package/build/cjs/src/shared/useOnEscapePress.js

@@ -1,52 +0,0 @@
-'use strict';
-
-var React = require('react');
-var useDocument = require('./useDocument.js');
-
-const registry = {};
-const handleEscape = event => {
-  if (!event.defaultPrevented) {
-    const handlers = Object.values(registry).reverse();
-    for (let i = 0; i < handlers.length; i += 1) {
-      const handler = handlers[i];
-      handler(event);
-      if (event.defaultPrevented) break;
-    }
-  }
-};
-const register = (id, handler) => {
-  registry[id] = handler;
-};
-const deregister = id => {
-  delete registry[id];
-};
-
-// For auto-incrementing unique identifiers for registered different handlers.
-let handlerId = 0;
-const useOnEscapePress = function (onEscape) {
-  let callbackDependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [onEscape];
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const escapeCallback = React.useCallback(onEscape, callbackDependencies);
-  const document = useDocument.useDocument();
-  const handler = React.useCallback(event => {
-    if (event.key === "Escape") escapeCallback(event);
-  }, [escapeCallback]);
-  const id = React.useMemo(() => {
-    handlerId += 1;
-    return handlerId;
-  }, []);
-  React.useEffect(() => {
-    if (Object.keys(registry).length === 0) {
-      document.addEventListener("keydown", handleEscape);
-    }
-    register(id, handler);
-    return () => {
-      deregister(id);
-      if (Object.keys(registry).length === 0) {
-        document.removeEventListener("keydown", handleEscape);
-      }
-    };
-  }, [id, handler, document]);
-};
-
-exports.useOnEscapePress = useOnEscapePress;

package/build/cjs/src/shared/useOutsideClick.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var React = require('react');
-var useWindow = require('./useWindow.js');
-
-/**
- * useOutsideClick handles outside click of a given element.
- * @param {RefObject} ref - Reference to a DOM element.
- * @param {e: Event) => void} handler - Function invoked when a click is triggered outside the referenced element.
- * @param {boolean} isActive - A flag to determine when the outside click event needs to be applied.
- *
- * Example: useOutsideClick(menuRef, closeMenu, menuIsOpen)
- * Means that when a menu is opened, clicking outside of the menu will close the mneu.
- */
-
-const useOutsideClick = (ref, handler, isActive) => {
-  const window = useWindow.useWindow();
-  const outsideClickEvent = React.useCallback(e => {
-    if (ref && ref.current && !ref.current.contains(e.target)) {
-      handler(e);
-    }
-  }, [handler, ref]);
-  React.useEffect(() => {
-    if (isActive) {
-      window.addEventListener("click", outsideClickEvent);
-    }
-    return () => {
-      window.removeEventListener("click", outsideClickEvent);
-    };
-  }, [isActive, window, outsideClickEvent]);
-};
-
-exports.useOutsideClick = useOutsideClick;

package/build/cjs/src/shared/useWindow.js

@@ -1,7 +0,0 @@
-'use strict';
-
-function useWindow() {
-  return window;
-}
-
-exports.useWindow = useWindow;

package/build/esm/build-tokens/_breakpoints.json

@@ -1,17 +0,0 @@
-{
-    "small": {
-        "category": "breakpoint",
-        "value": 576,
-        "variableName": "$breakpoint-small"
-    },
-    "medium": {
-        "category": "breakpoint",
-        "value": 768,
-        "variableName": "$breakpoint-medium"
-    },
-    "large": {
-        "category": "breakpoint",
-        "value": 1280,
-        "variableName": "$breakpoint-large"
-    }
-}

package/build/esm/build-tokens/_breakpoints.json.js

@@ -1,4 +0,0 @@
-var small={category:"breakpoint",value:576,variableName:"$breakpoint-small"};var medium={category:"breakpoint",value:768,variableName:"$breakpoint-medium"};var large={category:"breakpoint",value:1280,variableName:"$breakpoint-large"};var breakpoints = {small:small,medium:medium,large:large};
-
-export { breakpoints as default, large, medium, small };
-//# sourceMappingURL=_breakpoints.json.js.map

package/build/esm/build-tokens/_breakpoints.json.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_breakpoints.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}