@codecademy/brand 5.1.0-alpha.0b3d95991.0 → 5.1.0-alpha.65779fe09.0

package/dist/AccordionDeprecated/AccordionAreaDeprecated/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+export type AccordionAreaDeprecatedProps = {
+    children: ReactNode;
+    className?: string;
+    expanded?: boolean;
+    top: ReactNode;
+};
+/**
+ * @deprecated
+ * Vendored from Gamut for consumers that still rely on the legacy accordion API.
+ */
+export declare const AccordionAreaDeprecated: React.FC<AccordionAreaDeprecatedProps>;

package/dist/AccordionDeprecated/AccordionAreaDeprecated/index.js

@@ -0,0 +1,55 @@
+import _styled from "@emotion/styled/base";
+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)."; }
+import { motion } from 'framer-motion';
+import React, { useState } from 'react';
+import { useIsomorphicLayoutEffect } from 'react-use';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const transitionDuration = 0.2;
+const variants = {
+  expanded: {
+    height: 'auto'
+  },
+  folded: {
+    height: '0'
+  }
+};
+const StyledAccordionBody = /*#__PURE__*/_styled(motion.div, {
+  target: "esa36tz0",
+  label: "StyledAccordionBody"
+})(process.env.NODE_ENV === "production" ? {
+  name: "d3v9zr",
+  styles: "overflow:hidden"
+} : {
+  name: "d3v9zr",
+  styles: "overflow:hidden/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BY2NvcmRpb25EZXByZWNhdGVkL0FjY29yZGlvbkFyZWFEZXByZWNhdGVkL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0FjY29yZGlvbkRlcHJlY2F0ZWQvQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdyZWFjdC11c2UnO1xuXG5jb25zdCB0cmFuc2l0aW9uRHVyYXRpb24gPSAwLjI7XG5cbmNvbnN0IHZhcmlhbnRzID0ge1xuICBleHBhbmRlZDogeyBoZWlnaHQ6ICdhdXRvJyB9LFxuICBmb2xkZWQ6IHsgaGVpZ2h0OiAnMCcgfSxcbn07XG5cbmNvbnN0IFN0eWxlZEFjY29yZGlvbkJvZHkgPSBzdHlsZWQobW90aW9uLmRpdilgXG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgdHlwZSBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIGV4cGFuZGVkPzogYm9vbGVhbjtcbiAgdG9wOiBSZWFjdE5vZGU7XG59O1xuXG4vKipcbiAqIEBkZXByZWNhdGVkXG4gKiBWZW5kb3JlZCBmcm9tIEdhbXV0IGZvciBjb25zdW1lcnMgdGhhdCBzdGlsbCByZWx5IG9uIHRoZSBsZWdhY3kgYWNjb3JkaW9uIEFQSS5cbiAqL1xuZXhwb3J0IGNvbnN0IEFjY29yZGlvbkFyZWFEZXByZWNhdGVkOiBSZWFjdC5GQzxcbiAgQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWRQcm9wc1xuPiA9ICh7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGV4cGFuZGVkLCB0b3AgfSkgPT4ge1xuICBjb25zdCBbZGVsYXlFeHBhbmRlZCwgc2V0RGVsYXlFeHBhbmRlZF0gPSB1c2VTdGF0ZShleHBhbmRlZCk7XG5cbiAgdXNlSXNvbW9ycGhpY0xheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgaGFuZGxlID0gc2V0VGltZW91dChcbiAgICAgICgpID0+IHNldERlbGF5RXhwYW5kZWQoZXhwYW5kZWQpLFxuICAgICAgdHJhbnNpdGlvbkR1cmF0aW9uICogMTAwMFxuICAgICk7XG5cbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KGhhbmRsZSk7XG4gIH0sIFtleHBhbmRlZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7dG9wfVxuICAgICAgPFN0eWxlZEFjY29yZGlvbkJvZHlcbiAgICAgICAgYW5pbWF0ZT17ZXhwYW5kZWQgPyAnZXhwYW5kZWQnIDogJ2ZvbGRlZCd9XG4gICAgICAgIGluaXRpYWw9e2V4cGFuZGVkID8gJ2V4cGFuZGVkJyA6ICdmb2xkZWQnfVxuICAgICAgICB0cmFuc2l0aW9uPXt7IGR1cmF0aW9uOiAwLjIsIGVhc2U6ICdlYXNlSW5PdXQnIH19XG4gICAgICAgIHZhcmlhbnRzPXt2YXJpYW50c31cbiAgICAgID5cbiAgICAgICAgeyhleHBhbmRlZCB8fCBkZWxheUV4cGFuZGVkKSAmJiBjaGlsZHJlbn1cbiAgICAgIDwvU3R5bGVkQWNjb3JkaW9uQm9keT5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * @deprecated
+ * Vendored from Gamut for consumers that still rely on the legacy accordion API.
+ */
+export const AccordionAreaDeprecated = ({
+  children,
+  className,
+  expanded,
+  top
+}) => {
+  const [delayExpanded, setDelayExpanded] = useState(expanded);
+  useIsomorphicLayoutEffect(() => {
+    const handle = setTimeout(() => setDelayExpanded(expanded), transitionDuration * 1000);
+    return () => clearTimeout(handle);
+  }, [expanded]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: className,
+    children: [top, /*#__PURE__*/_jsx(StyledAccordionBody, {
+      animate: expanded ? 'expanded' : 'folded',
+      initial: expanded ? 'expanded' : 'folded',
+      transition: {
+        duration: 0.2,
+        ease: 'easeInOut'
+      },
+      variants: variants,
+      children: (expanded || delayExpanded) && children
+    })]
+  });
+};

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecated/index.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { ButtonDeprecatedBaseProps } from '../ButtonDeprecatedBase';
+export type ButtonDeprecatedTheme = 'brand-dark-blue' | 'white';
+export type ButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
+    block?: boolean;
+    caps?: boolean;
+    children: ReactNode;
+    disabled?: boolean;
+    flat?: boolean;
+    go?: boolean;
+    href?: string;
+    rel?: string;
+    target?: string;
+    id?: string;
+    link?: boolean;
+    outline?: boolean;
+    round?: boolean;
+    size?: 'small' | 'large';
+    square?: boolean;
+    theme?: ButtonDeprecatedTheme;
+    type?: string;
+    underline?: boolean;
+    fitText?: boolean;
+};
+export declare const ButtonDeprecated: React.FC<ButtonDeprecatedProps>;

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecated/index.js

@@ -0,0 +1,32 @@
+import cx from 'classnames';
+import React from 'react';
+import { omitProps } from '../../utils/omitProps';
+import { ButtonDeprecatedBase } from '../ButtonDeprecatedBase';
+// eslint-disable-next-line gamut/no-css-standalone -- vendored Gamut legacy accordion
+import styles from './styles/index.module.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+const propKeys = ['theme', 'size', 'outline', 'underline', 'link', 'caps', 'go', 'children', 'block', 'className', 'round', 'square', 'flat', 'fitText', 'onClick'];
+export const ButtonDeprecated = props => {
+  const theme = props.theme ?? 'brand-dark-blue';
+  const typeClassName = props.link ? styles.link : styles.btn;
+  const themeClassName = props.link ? styles[`link-${theme}`] : styles[`btn-${theme}`];
+  const classes = cx(typeClassName, themeClassName, styles[props.size], {
+    [styles.block]: props.block,
+    [styles.go]: props.go,
+    [styles.outline]: props.outline,
+    [styles.underline]: props.underline,
+    [styles.caps]: props.caps,
+    [styles.round]: props.round,
+    [styles.square]: props.square,
+    [styles.flat]: props.flat,
+    [styles['fit-text']]: props.fitText
+  }, props.className);
+  const propsToTransfer = omitProps(propKeys, props);
+  return /*#__PURE__*/_jsx(ButtonDeprecatedBase, {
+    ...propsToTransfer,
+    className: classes,
+    link: props.link,
+    onClick: props.onClick,
+    children: props.children
+  });
+};

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecated/styles/index.module.scss

@@ -0,0 +1,30 @@
+@use "variables";
+@use "mixins";
+@use "~@codecademy/gamut-styles/utils" as *;
+
+.btn {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  font-weight: variables.$btn-font-weight;
+  @include font-smoothing;
+  border: 1px solid transparent;
+  border-radius: variables.$btn-border-radius;
+  user-select: none;
+  @include mixins.button-size(
+    variables.$btn-padding-y,
+    variables.$btn-padding-x,
+    variables.$btn-font-size-base,
+    variables.$btn-line-height,
+    variables.$btn-min-width-sm
+  );
+  transition: all 0.1s ease-in-out;
+}
+
+@include mixins.button-variants(
+  "brand-dark-blue",
+  $color-white,
+  $brand-dark-blue
+);
+
+@include mixins.button-variants("white", $color-black, $color-white);

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss

@@ -0,0 +1,93 @@
+@use "sass:color";
+@use "~@codecademy/gamut-styles/utils" as *;
+@use "variables";
+
+@mixin button-variant($color, $background, $border: transparent) {
+  $active-background: color.mix($color-black, $background);
+
+  @if $border == transparent {
+    $active-border: transparent;
+    $active-border-hover: transparent;
+  }
+
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+
+  &:hover {
+    box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $background;
+  }
+
+  &:focus-visible,
+  &:hover {
+    text-decoration: none;
+    color: $color;
+
+    &:active {
+      box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
+    }
+  }
+
+  &:active {
+    background-color: $active-background;
+  }
+
+  &:disabled {
+    background-color: variables.$btn-disabled-color;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}
+
+@mixin button-flat-variant($color) {
+  color: $color;
+  background-color: transparent;
+
+  &:hover,
+  &:active {
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color;
+  }
+
+  &:disabled {
+    color: variables.$btn-disabled-color;
+    background-color: transparent;
+  }
+}
+
+@mixin button-size(
+  $padding-y,
+  $padding-x,
+  $font-size,
+  $line-height,
+  $min-width
+) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  line-height: $line-height;
+  min-width: $min-width;
+
+  &.fit-text {
+    min-width: 0;
+    min-height: 0;
+  }
+}
+
+@mixin button-variants($name, $color, $background, $border: transparent) {
+  .btn-#{$name} {
+    @include button-variant($color, $background, $border);
+    &.flat {
+      @include button-flat-variant($background);
+    }
+    @content;
+  }
+}

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecated/styles/variables.scss

@@ -0,0 +1,16 @@
+@use "~@codecademy/gamut-styles/utils" as *;
+
+$btn-padding-x: px-rem(16) !default;
+$btn-padding-y: 0.375rem !default;
+$btn-font-weight: bold !default;
+
+$btn-line-height: 1.5 !default;
+
+$btn-font-size-base: px-rem(16) !default;
+
+$btn-min-width-sm: px-rem(128) !default;
+
+$btn-border-radius: 2px !default;
+
+$btn-disabled-color: $color-gray-600;
+$btn-box-shadow-color: rgba(0, 0, 0, 0.3);

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecatedBase/index.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLProps, ReactNode } from 'react';
+export type ButtonDeprecatedBaseProps = Omit<HTMLProps<HTMLAnchorElement> & HTMLProps<HTMLButtonElement>, 'as' | 'size'> & {
+    as?: React.ElementType;
+    asProps?: Record<string, unknown>;
+    children?: ReactNode;
+    className?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    link?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement> & React.MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const ButtonDeprecatedBase: React.FC<ButtonDeprecatedBaseProps>;

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecatedBase/index.js

@@ -0,0 +1,57 @@
+import cx from 'classnames';
+import React from 'react';
+import { omitProps } from '../../utils/omitProps';
+// eslint-disable-next-line gamut/no-css-standalone -- vendored Gamut legacy accordion
+import styles from './styles.module.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+const propKeys = ['children', 'className', 'href', 'link', 'onClick', 'target', 'rel', 'as', 'asProps'];
+export const ButtonDeprecatedBase = props => {
+  const {
+    href,
+    className,
+    link,
+    onClick,
+    target,
+    rel,
+    as: As,
+    asProps = {}
+  } = props;
+  const propsToTransfer = omitProps(propKeys, props);
+  const classes = cx(styles.basicBtn, className, {
+    [styles.basicLink]: link
+  });
+  const defaultProps = {
+    ...propsToTransfer,
+    className: classes,
+    onClick,
+    'data-btn': true
+  };
+  if (As) {
+    return /*#__PURE__*/_jsx(As, {
+      ...defaultProps,
+      ...asProps
+    });
+  }
+  if (href) {
+    const anchorProps = {
+      target,
+      rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel
+    };
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      _jsx("a", {
+        ...defaultProps,
+        ...anchorProps,
+        href: href
+      })
+    );
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/button-has-type
+    _jsx("button", {
+      ...defaultProps
+    })
+  );
+};

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecatedBase/styles.module.scss

@@ -0,0 +1,74 @@
+.basicBtn {
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  font-family: inherit;
+  font: inherit;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  line-height: normal;
+
+  &,
+  &:active {
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &:hover:focus {
+    text-decoration: none;
+  }
+  &:focus {
+    text-decoration: none;
+  }
+
+  &:active {
+    background-image: none;
+    outline: 0;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+}
+
+.basicLink {
+  text-decoration: none;
+  vertical-align: baseline;
+  cursor: pointer;
+
+  &,
+  &:active,
+  &:disabled {
+    background-color: transparent;
+  }
+  &,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+  &:hover,
+  &:focus {
+    opacity: 0.7;
+    text-decoration: none;
+    border-color: transparent;
+    background-color: transparent;
+  }
+  &:hover:focus {
+    opacity: 0.7;
+    background-color: transparent;
+  }
+  &:disabled {
+    &:hover:focus {
+      opacity: 0.7;
+      text-decoration: none;
+    }
+  }
+}

package/dist/AccordionDeprecated/AccordionButtonDeprecated/index.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { ButtonDeprecatedProps } from './ButtonDeprecated';
+export type AccordionButtonTheme = 'blue' | 'plain';
+export type AccordionButtonDeprecatedProps = Omit<ButtonDeprecatedProps, 'children' | 'flat' | 'theme'> & {
+    children: ReactNode;
+    expanded?: boolean;
+    theme?: AccordionButtonTheme;
+};
+/**
+ * @deprecated
+ * Vendored from Gamut for consumers that still rely on the legacy accordion API.
+ */
+export declare const AccordionButtonDeprecated: React.FC<AccordionButtonDeprecatedProps>;

package/dist/AccordionDeprecated/AccordionButtonDeprecated/index.js

@@ -0,0 +1,50 @@
+import { ArrowChevronDownIcon } from '@codecademy/gamut-icons';
+import cx from 'classnames';
+import React from 'react';
+import { ButtonDeprecated } from './ButtonDeprecated';
+// eslint-disable-next-line gamut/no-css-standalone -- vendored Gamut legacy accordion
+import styles from './styles.module.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const buttonThemes = {
+  blue: {
+    props: {
+      flat: true,
+      theme: 'white'
+    }
+  },
+  plain: {
+    props: {
+      flat: true,
+      theme: 'brand-dark-blue'
+    }
+  }
+};
+
+/**
+ * @deprecated
+ * Vendored from Gamut for consumers that still rely on the legacy accordion API.
+ */
+export const AccordionButtonDeprecated = ({
+  children,
+  className,
+  expanded,
+  theme = 'plain',
+  ...baseProps
+}) => {
+  const {
+    props: buttonProps
+  } = buttonThemes[theme];
+  return /*#__PURE__*/_jsxs(ButtonDeprecated, {
+    "aria-expanded": expanded,
+    className: cx(styles.accordionButton, styles[theme], className),
+    ...baseProps,
+    ...buttonProps,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: styles.children,
+      children: children
+    }), /*#__PURE__*/_jsx(ArrowChevronDownIcon, {
+      "aria-hidden": true,
+      className: cx(styles.expansionIcon, expanded && styles.expansionIconExpanded)
+    })]
+  });
+};

package/dist/AccordionDeprecated/AccordionButtonDeprecated/styles.module.scss

@@ -0,0 +1,22 @@
+@use "~@codecademy/gamut-styles/utils" as *;
+
+.accordionButton {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.375rem 1rem;
+  width: 100%;
+
+  &.blue {
+    color: $color-blue-200;
+  }
+}
+
+.expansionIcon {
+  margin-left: 0.75rem;
+  transition: transform 0.35s ease-out;
+}
+
+.expansionIconExpanded {
+  transform: rotate(-180deg);
+}

package/dist/AccordionDeprecated/index.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+export type ChildrenOrExpandedRender = ReactNode | ((expanded: boolean) => ReactNode);
+export type AccordionDeprecatedProps = {
+    children: ChildrenOrExpandedRender;
+    className?: string;
+    initiallyExpanded?: boolean;
+    onClick?: (expanding: boolean) => void;
+    top: ChildrenOrExpandedRender;
+};
+/**
+ * @deprecated
+ * Vendored from Gamut for consumers that still rely on the legacy accordion API.
+ */
+export declare const AccordionDeprecated: React.FC<AccordionDeprecatedProps>;
+export { AccordionAreaDeprecated } from './AccordionAreaDeprecated';
+export type { AccordionAreaDeprecatedProps } from './AccordionAreaDeprecated';
+export { AccordionButtonDeprecated } from './AccordionButtonDeprecated';
+export type { AccordionButtonDeprecatedProps, AccordionButtonTheme, } from './AccordionButtonDeprecated';

package/dist/AccordionDeprecated/index.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { AccordionAreaDeprecated } from './AccordionAreaDeprecated';
+import { AccordionButtonDeprecated } from './AccordionButtonDeprecated';
+import { jsx as _jsx } from "react/jsx-runtime";
+const expandRenderer = (renderer, expanded) => renderer instanceof Function ? renderer(expanded) : renderer;
+
+/**
+ * @deprecated
+ * Vendored from Gamut for consumers that still rely on the legacy accordion API.
+ */
+export const AccordionDeprecated = ({
+  children,
+  className,
+  initiallyExpanded,
+  onClick,
+  top
+}) => {
+  const [expanded, setExpanded] = useState(!!initiallyExpanded);
+  return /*#__PURE__*/_jsx(AccordionAreaDeprecated, {
+    className: className,
+    expanded: expanded,
+    top: /*#__PURE__*/_jsx(AccordionButtonDeprecated, {
+      expanded: expanded,
+      onClick: () => {
+        setExpanded(!expanded);
+        onClick?.(!expanded);
+      },
+      children: expandRenderer(top, expanded)
+    }),
+    children: expandRenderer(children, expanded)
+  });
+};
+export { AccordionAreaDeprecated } from './AccordionAreaDeprecated';
+export { AccordionButtonDeprecated } from './AccordionButtonDeprecated';

package/dist/AccordionDeprecated/utils/omitProps.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Removes a provided array of props from a props object,
+ * leaving necessary props like children intact.
+ */
+export declare function omitProps<T extends Record<string, unknown>>(initialPropsToOmit: string[] | Record<string, unknown>, props: T): Omit<T, string>;

package/dist/AccordionDeprecated/utils/omitProps.js

@@ -0,0 +1,12 @@
+import omit from 'lodash/omit';
+import without from 'lodash/without';
+
+/**
+ * Removes a provided array of props from a props object,
+ * leaving necessary props like children intact.
+ */
+export function omitProps(initialPropsToOmit, props) {
+  const propsToOmit = Array.isArray(initialPropsToOmit) ? initialPropsToOmit : Object.keys(initialPropsToOmit);
+  const dataProps = propsToOmit.filter(p => /^data-.*/.exec(p));
+  return omit(props, without(propsToOmit, 'children', 'className', ...dataProps));
+}