box-ui-elements 15.0.0-beta.7 → 15.0.0

package/src/icons/microsoft-office/IconOffice.js.flow

@@ -0,0 +1,45 @@
+// @flow
+import * as React from 'react';
+import uniqueId from 'lodash/uniqueId';
+
+import AccessibleSVG from '../accessible-svg';
+
+const ICON_CLASS = 'icon-office';
+
+type Props = {
+    className: string,
+    height?: number,
+    /** A text-only string describing the icon if it's not purely decorative for accessibility */
+    title?: string | React.Element<any>,
+    width?: number,
+};
+
+class IconOfficeDefault extends React.Component<Props> {
+    static defaultProps = {
+        className: '',
+        height: 30,
+        width: 30,
+    };
+
+    idPrefix = `${uniqueId(ICON_CLASS)}-`;
+
+    render() {
+        const { className, height, title, width } = this.props;
+        return (
+            <AccessibleSVG
+                className={`${ICON_CLASS} ${className}`}
+                height={height}
+                title={title}
+                viewBox="0 0 64 77"
+                width={width}
+            >
+                <path
+                    d="M 0 62.113281 L 0 15.304688 L 41.464844 0.00390625 L 64 7.199219 L 64 70.214844 L 41.464844 77 L 0 62.113281 L 41.464844 67.097656 L 41.464844 12.605469 L 14.421875 18.90625 L 14.421875 55.816406 Z M 0 62.113281 "
+                    fill="#d83b01"
+                />
+            </AccessibleSVG>
+        );
+    }
+}
+
+export default IconOfficeDefault;

package/src/icons/microsoft-office/IconOffice.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import uniqueId from 'lodash/uniqueId';
+
+import AccessibleSVG from '../accessible-svg';
+
+import { TwoTonedIcon } from '../iconTypes';
+
+const ICON_CLASS = 'icon-office';
+
+class IconOffice extends React.Component<TwoTonedIcon> {
+    static defaultProps = {
+        className: '',
+        height: 30,
+        width: 30,
+    };
+
+    idPrefix = `${uniqueId(ICON_CLASS)}-`;
+
+    render() {
+        const { className, height, title, width } = this.props;
+        return (
+            <AccessibleSVG
+                className={`${ICON_CLASS} ${className}`}
+                height={height}
+                title={title}
+                viewBox="0 0 64 77"
+                width={width}
+            >
+                <path
+                    d="M 0 62.113281 L 0 15.304688 L 41.464844 0.00390625 L 64 7.199219 L 64 70.214844 L 41.464844 77 L 0 62.113281 L 41.464844 67.097656 L 41.464844 12.605469 L 14.421875 18.90625 L 14.421875 55.816406 Z M 0 62.113281 "
+                    fill="#d83b01"
+                />
+            </AccessibleSVG>
+        );
+    }
+}
+
+export default IconOffice;

package/src/icons/microsoft-office/__tests__/IconOffice.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import IconOffice from '../IconOffice';
+
+describe('icons/microsoft-office/IconOffice', () => {
+    const getWrapper = (props = {}) => shallow(<IconOffice {...props} />);
+
+    test('should correctly render default icon', () => {
+        const wrapper = getWrapper();
+
+        expect(wrapper.is('AccessibleSVG')).toBe(true);
+        expect(wrapper.hasClass('icon-office')).toBe(true);
+        expect(wrapper.prop('height')).toEqual(30);
+        expect(wrapper.prop('width')).toEqual(30);
+    });
+
+    test('should correctly render icon with specified class', () => {
+        const className = 'test';
+        const wrapper = getWrapper({ className });
+
+        expect(wrapper.hasClass(className)).toBe(true);
+    });
+
+    test('should correctly render icon with specified height', () => {
+        const height = 17;
+        const wrapper = getWrapper({ height });
+
+        expect(wrapper.prop('height')).toEqual(height);
+    });
+
+    test('should correctly render icon with specified title', () => {
+        const title = 'fool';
+        const wrapper = getWrapper({ title });
+
+        expect(wrapper.prop('title')).toEqual(title);
+    });
+
+    test('should correctly render icon with specified width', () => {
+        const width = 17;
+        const wrapper = getWrapper({ width });
+
+        expect(wrapper.prop('width')).toEqual(width);
+    });
+});

package/src/illustration/EmailVerification140.js.flow

@@ -0,0 +1,102 @@
+// @flow
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../styles/variables';
+import AccessibleSVG from '../icons/accessible-svg';
+import type { Icon } from '../icons/flowTypes';
+
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+const EmailVerification140 = (props: Icon) => (
+    <AccessibleSVG width={140} height={140} viewBox="0 0 140 140" {...props}>
+        <g fill="none" fillRule="evenodd">
+            <path
+                d="M118.5 103a8.498 8.498 0 00-8.5 8.5c0 4.696 3.804 8.5 8.5 8.5s8.5-3.804 8.5-8.5-3.804-8.5-8.5-8.5zM65 12c-5.525 0-10 4.475-10 10s4.475 10 10 10 10-4.475 10-10-4.475-10-10-10zM41 92c-7.731 0-14 6.269-14 14s6.269 14 14 14 14-6.269 14-14-6.269-14-14-14z"
+                fill={vars.bdlBoxBlue10}
+                fillRule="nonzero"
+            />
+            <path
+                d="M30.626 32.076a6.653 6.653 0 011.759-.033l.24.03.26.041 78.199 13.745.275.054.309.074.27.077c.342.104.672.232.988.383l.294.149c.156.082.307.17.454.264l.294.197.268.198.048.038c.1.08.199.162.295.246l.246.228.236.241.181.2.053.062c.085.1.167.202.247.307l.149.204.097.14.12.186.17.285.494.903-.051.034a7.105 7.105 0 01.42 3.485l-.052.332-8.48 47.94a7.165 7.165 0 01-8.057 5.842l-.238-.037-78.198-13.745a7.152 7.152 0 01-5.844-8.05l.038-.237 8.48-47.94a7.166 7.166 0 015.7-5.786l.336-.057z"
+                fill={vars.bdlBoxBlue}
+                fillRule="nonzero"
+            />
+            <path
+                d="M32.32 34.048a5.159 5.159 0 00-1.432.015 4.461 4.461 0 00-.993.291c.152.453.32.82.553 1.186l.148.22.14.19 31.21 40.72c1.705 2.223 4.99 2.855 7.409 1.465l.21-.128 44.382-28.333-.075-.093-.153-.172-.16-.165-.162-.153-.152-.132a5.136 5.136 0 00-.308-.238l-.16-.11-.211-.132-.211-.118-.215-.107-.14-.064-.145-.06-.23-.085-.085-.029a5.189 5.189 0 00-.47-.128l-.239-.048-78.275-13.756-.237-.036z"
+                fill={vars.white}
+                fillRule="nonzero"
+            />
+            <path
+                d="M28.14 35.388a5.133 5.133 0 00-1.519 2.622l-.053.263-8.488 47.976a5.127 5.127 0 00.48 3.231c.314-.625.836-1.257 1.575-1.858l.177-.14 29.794-22.973 1.217 1.588-29.79 22.968c-1.96 1.511-1.764 2.562.553 3.021l.192.036 78.475 13.791.378.058c.444.058.816.066 1.116.025 1.047-.143 1.221-.88.503-2.183l-.09-.16-.202-.327-20.115-31.103 1.686-1.076 20.109 31.093c.53.82.843 1.597.962 2.3a5.132 5.132 0 001.377-2.481l.055-.268 8.488-47.976a5.127 5.127 0 00-.134-2.365L70.642 79.692c-3.236 2.066-7.693 1.342-10.12-1.602l-.163-.204-31.21-40.72a6.899 6.899 0 01-1.008-1.778z"
+                fill={vars.white}
+                fillRule="nonzero"
+            />
+            <g transform="translate(62 53.005)">
+                <path
+                    d="M50.065 0H5.935A5.938 5.938 0 000 5.93v22.14C0 31.35 2.655 34 5.935 34h44.13A5.938 5.938 0 0056 28.07V5.93C56 2.65 53.345 0 50.065 0z"
+                    fill={vars.bdlBoxBlue}
+                    fillRule="nonzero"
+                />
+                <path
+                    d="M5.935 2h44.13A3.928 3.928 0 0154 5.93v22.14A3.938 3.938 0 0150.065 32H5.935A3.928 3.928 0 012 28.07V5.93A3.938 3.938 0 015.935 2z"
+                    fill={vars.bdlBoxBlue05}
+                    fillRule="nonzero"
+                />
+                <rect fill={vars.bdlBoxBlue} x={33} y={14} width={16} height={1} rx={0.5} />
+                <rect fill={vars.bdlBoxBlue} x={33} y={18} width={12} height={1} rx={0.5} />
+                <rect fill={vars.bdlBoxBlue} x={33} y={22} width={14} height={1} rx={0.5} />
+                <path
+                    d="M17 5c6.627 0 12 5.373 12 12s-5.373 12-12 12S5 23.627 5 17 10.373 5 17 5z"
+                    fill={vars.white}
+                    fillRule="nonzero"
+                />
+                <path
+                    d="M17 5c6.627 0 12 5.373 12 12l-.004.33-.022.466-.037.439-.027.243-.044.32-.093.54-.078.364-.112.447.021-.082c-.062.239-.133.475-.21.707l-.14.4-.153.391c-.15.364-.317.72-.501 1.065l-.242.432-.257.419-.162.245-.234.333-.288.38-.285.346-.155.178-.212.234-.166.173-.305.303-.287.265A11.956 11.956 0 0117 29a11.95 11.95 0 01-7.49-2.625l-.292-.24-.163-.141-.343-.315-.27-.266-.232-.244-.342-.384-.33-.402a12.31 12.31 0 01-.306-.411l-.17-.243-.294-.456-.179-.3a12.119 12.119 0 01-.456-.875l-.12-.265-.15-.358-.137-.354c-.077-.212-.149-.427-.215-.644l-.094-.328-.07-.269-.067-.292-.094-.47-.052-.32-.062-.48-.029-.291-.025-.368A12.197 12.197 0 015 17c0-6.627 5.373-12 12-12zm0 15a7.998 7.998 0 00-7.006 4.135A9.965 9.965 0 0017 27c2.728 0 5.2-1.092 7.005-2.863A7.992 7.992 0 0017 20zm0-10a4 4 0 100 8 4 4 0 000-8z"
+                    fill={vars.bdlBoxBlue}
+                    fillRule="nonzero"
+                />
+            </g>
+            <g fillRule="nonzero">
+                <path
+                    d="M125.751 51.943L105.02 40.338c-1.304-.73-2.892-.219-3.488 1.122l-4.29 9.634c-.552 1.24-.134 2.742 1.02 3.388l18.245 10.212c1.153.646 2.698.246 3.528-.835l6.462-8.419c.9-1.173.56-2.767-.745-3.497z"
+                    fill={vars.bdlBoxBlue}
+                />
+                <path
+                    d="M103.94 42.077l20.524 11.81c.253.145.305.396.132.628l-6.397 8.567c-.242.325-.673.44-.892.313l-18.06-10.392c-.217-.124-.332-.549-.172-.919l4.246-9.804c.116-.268.364-.35.62-.203z"
+                    fill={vars.white}
+                />
+                <path
+                    d="M118.642 45.647l-4.78-2.75a1 1 0 00-1.206.16l-11.69 11.717a1 1 0 00.21 1.573l12.134 6.982a1 1 0 001.464-.605l4.334-15.948a1 1 0 00-.466-1.13z"
+                    fill={vars.bdlBoxBlue}
+                />
+                <path fill={vars.white} d="M116.975 46.995l-3.791 13.953-9.882-5.685 10.228-10.25z" />
+                <path
+                    d="M99.506 48.663c-1.261-.735-2.383-1.007-2.946-.007l-1.422 2.778c-.388.834.08 1.541.936 2.16l.283.192c.098.064.2.126.306.187l20.544 12.382c1.21.705 2.306.975 2.914.098l1.675-2.63c.576-.987-.132-1.805-1.305-2.519l-20.985-12.64z"
+                    fill={vars.bdlBoxBlue}
+                />
+                <path
+                    d="M119.348 62.965l.165.101.152.103.12.09-1.023 1.606-.063-.023a3.815 3.815 0 01-.486-.24L97.66 52.22l-.163-.1a3.602 3.602 0 01-.286-.204l-.049-.042.869-1.696.144.064c.107.05.22.108.334.175l20.838 12.548z"
+                    fill={vars.white}
+                />
+                <path
+                    d="M116.464 48.87l-4.413-2.556a1.012 1.012 0 01-.476-.636l-.075-.333-.1-.49a23.963 23.963 0 01-.296-1.932 15.095 15.095 0 01-.099-2.083c.062-2.064.684-3.497 2.238-3.78 3.037-.555 9.57 3.233 10.607 6.145.534 1.496-.399 2.751-2.161 3.841-.538.333-1.152.647-1.823.944-.602.267-1.219.505-1.818.713l-.474.16-.326.101a1 1 0 01-.784-.094z"
+                    fill={vars.bdlBoxBlue}
+                />
+                <path
+                    d="M117.09 47.005l.31-.107a21.87 21.87 0 001.672-.663 13.166 13.166 0 001.586-.829c1.037-.649 1.425-1.177 1.327-1.455-.709-2.011-6.313-5.3-8.392-4.915-.296.054-.552.652-.589 1.88-.016.545.016 1.163.088 1.827.065.605.16 1.215.272 1.795l.063.32 3.662 2.147z"
+                    fill={vars.bdlBoxBlue05}
+                />
+            </g>
+        </g>
+    </AccessibleSVG>
+);
+
+export default EmailVerification140;

package/src/illustration/EmailVerification140.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import EmailVerification140 from './EmailVerification140';
+
+export const emailVerification140 = () => <EmailVerification140 />;
+
+export default {
+    title: 'Illustration|EmailVerification140',
+    component: EmailVerification140,
+    parameters: {
+        notes: "`import EmailVerification140 from 'box-ui-elements/es/illustration/EmailVerification140';`",
+    },
+};

package/src/illustration/EmailVerification140.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../styles/variables';
+import AccessibleSVG, { SVGProps } from '../components/accessible-svg/AccessibleSVG';
+
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+const EmailVerification140 = (props: SVGProps) => (
+    <AccessibleSVG width={140} height={140} viewBox="0 0 140 140" {...props}>
+        <g fill="none" fillRule="evenodd">
+            <path
+                d="M118.5 103a8.498 8.498 0 00-8.5 8.5c0 4.696 3.804 8.5 8.5 8.5s8.5-3.804 8.5-8.5-3.804-8.5-8.5-8.5zM65 12c-5.525 0-10 4.475-10 10s4.475 10 10 10 10-4.475 10-10-4.475-10-10-10zM41 92c-7.731 0-14 6.269-14 14s6.269 14 14 14 14-6.269 14-14-6.269-14-14-14z"
+                fill={vars.bdlBoxBlue10}
+                fillRule="nonzero"
+            />
+            <path
+                d="M30.626 32.076a6.653 6.653 0 011.759-.033l.24.03.26.041 78.199 13.745.275.054.309.074.27.077c.342.104.672.232.988.383l.294.149c.156.082.307.17.454.264l.294.197.268.198.048.038c.1.08.199.162.295.246l.246.228.236.241.181.2.053.062c.085.1.167.202.247.307l.149.204.097.14.12.186.17.285.494.903-.051.034a7.105 7.105 0 01.42 3.485l-.052.332-8.48 47.94a7.165 7.165 0 01-8.057 5.842l-.238-.037-78.198-13.745a7.152 7.152 0 01-5.844-8.05l.038-.237 8.48-47.94a7.166 7.166 0 015.7-5.786l.336-.057z"
+                fill={vars.bdlBoxBlue}
+                fillRule="nonzero"
+            />
+            <path
+                d="M32.32 34.048a5.159 5.159 0 00-1.432.015 4.461 4.461 0 00-.993.291c.152.453.32.82.553 1.186l.148.22.14.19 31.21 40.72c1.705 2.223 4.99 2.855 7.409 1.465l.21-.128 44.382-28.333-.075-.093-.153-.172-.16-.165-.162-.153-.152-.132a5.136 5.136 0 00-.308-.238l-.16-.11-.211-.132-.211-.118-.215-.107-.14-.064-.145-.06-.23-.085-.085-.029a5.189 5.189 0 00-.47-.128l-.239-.048-78.275-13.756-.237-.036z"
+                fill={vars.white}
+                fillRule="nonzero"
+            />
+            <path
+                d="M28.14 35.388a5.133 5.133 0 00-1.519 2.622l-.053.263-8.488 47.976a5.127 5.127 0 00.48 3.231c.314-.625.836-1.257 1.575-1.858l.177-.14 29.794-22.973 1.217 1.588-29.79 22.968c-1.96 1.511-1.764 2.562.553 3.021l.192.036 78.475 13.791.378.058c.444.058.816.066 1.116.025 1.047-.143 1.221-.88.503-2.183l-.09-.16-.202-.327-20.115-31.103 1.686-1.076 20.109 31.093c.53.82.843 1.597.962 2.3a5.132 5.132 0 001.377-2.481l.055-.268 8.488-47.976a5.127 5.127 0 00-.134-2.365L70.642 79.692c-3.236 2.066-7.693 1.342-10.12-1.602l-.163-.204-31.21-40.72a6.899 6.899 0 01-1.008-1.778z"
+                fill={vars.white}
+                fillRule="nonzero"
+            />
+            <g transform="translate(62 53.005)">
+                <path
+                    d="M50.065 0H5.935A5.938 5.938 0 000 5.93v22.14C0 31.35 2.655 34 5.935 34h44.13A5.938 5.938 0 0056 28.07V5.93C56 2.65 53.345 0 50.065 0z"
+                    fill={vars.bdlBoxBlue}
+                    fillRule="nonzero"
+                />
+                <path
+                    d="M5.935 2h44.13A3.928 3.928 0 0154 5.93v22.14A3.938 3.938 0 0150.065 32H5.935A3.928 3.928 0 012 28.07V5.93A3.938 3.938 0 015.935 2z"
+                    fill={vars.bdlBoxBlue05}
+                    fillRule="nonzero"
+                />
+                <rect fill={vars.bdlBoxBlue} x={33} y={14} width={16} height={1} rx={0.5} />
+                <rect fill={vars.bdlBoxBlue} x={33} y={18} width={12} height={1} rx={0.5} />
+                <rect fill={vars.bdlBoxBlue} x={33} y={22} width={14} height={1} rx={0.5} />
+                <path
+                    d="M17 5c6.627 0 12 5.373 12 12s-5.373 12-12 12S5 23.627 5 17 10.373 5 17 5z"
+                    fill={vars.white}
+                    fillRule="nonzero"
+                />
+                <path
+                    d="M17 5c6.627 0 12 5.373 12 12l-.004.33-.022.466-.037.439-.027.243-.044.32-.093.54-.078.364-.112.447.021-.082c-.062.239-.133.475-.21.707l-.14.4-.153.391c-.15.364-.317.72-.501 1.065l-.242.432-.257.419-.162.245-.234.333-.288.38-.285.346-.155.178-.212.234-.166.173-.305.303-.287.265A11.956 11.956 0 0117 29a11.95 11.95 0 01-7.49-2.625l-.292-.24-.163-.141-.343-.315-.27-.266-.232-.244-.342-.384-.33-.402a12.31 12.31 0 01-.306-.411l-.17-.243-.294-.456-.179-.3a12.119 12.119 0 01-.456-.875l-.12-.265-.15-.358-.137-.354c-.077-.212-.149-.427-.215-.644l-.094-.328-.07-.269-.067-.292-.094-.47-.052-.32-.062-.48-.029-.291-.025-.368A12.197 12.197 0 015 17c0-6.627 5.373-12 12-12zm0 15a7.998 7.998 0 00-7.006 4.135A9.965 9.965 0 0017 27c2.728 0 5.2-1.092 7.005-2.863A7.992 7.992 0 0017 20zm0-10a4 4 0 100 8 4 4 0 000-8z"
+                    fill={vars.bdlBoxBlue}
+                    fillRule="nonzero"
+                />
+            </g>
+            <g fillRule="nonzero">
+                <path
+                    d="M125.751 51.943L105.02 40.338c-1.304-.73-2.892-.219-3.488 1.122l-4.29 9.634c-.552 1.24-.134 2.742 1.02 3.388l18.245 10.212c1.153.646 2.698.246 3.528-.835l6.462-8.419c.9-1.173.56-2.767-.745-3.497z"
+                    fill={vars.bdlBoxBlue}
+                />
+                <path
+                    d="M103.94 42.077l20.524 11.81c.253.145.305.396.132.628l-6.397 8.567c-.242.325-.673.44-.892.313l-18.06-10.392c-.217-.124-.332-.549-.172-.919l4.246-9.804c.116-.268.364-.35.62-.203z"
+                    fill={vars.white}
+                />
+                <path
+                    d="M118.642 45.647l-4.78-2.75a1 1 0 00-1.206.16l-11.69 11.717a1 1 0 00.21 1.573l12.134 6.982a1 1 0 001.464-.605l4.334-15.948a1 1 0 00-.466-1.13z"
+                    fill={vars.bdlBoxBlue}
+                />
+                <path fill={vars.white} d="M116.975 46.995l-3.791 13.953-9.882-5.685 10.228-10.25z" />
+                <path
+                    d="M99.506 48.663c-1.261-.735-2.383-1.007-2.946-.007l-1.422 2.778c-.388.834.08 1.541.936 2.16l.283.192c.098.064.2.126.306.187l20.544 12.382c1.21.705 2.306.975 2.914.098l1.675-2.63c.576-.987-.132-1.805-1.305-2.519l-20.985-12.64z"
+                    fill={vars.bdlBoxBlue}
+                />
+                <path
+                    d="M119.348 62.965l.165.101.152.103.12.09-1.023 1.606-.063-.023a3.815 3.815 0 01-.486-.24L97.66 52.22l-.163-.1a3.602 3.602 0 01-.286-.204l-.049-.042.869-1.696.144.064c.107.05.22.108.334.175l20.838 12.548z"
+                    fill={vars.white}
+                />
+                <path
+                    d="M116.464 48.87l-4.413-2.556a1.012 1.012 0 01-.476-.636l-.075-.333-.1-.49a23.963 23.963 0 01-.296-1.932 15.095 15.095 0 01-.099-2.083c.062-2.064.684-3.497 2.238-3.78 3.037-.555 9.57 3.233 10.607 6.145.534 1.496-.399 2.751-2.161 3.841-.538.333-1.152.647-1.823.944-.602.267-1.219.505-1.818.713l-.474.16-.326.101a1 1 0 01-.784-.094z"
+                    fill={vars.bdlBoxBlue}
+                />
+                <path
+                    d="M117.09 47.005l.31-.107a21.87 21.87 0 001.672-.663 13.166 13.166 0 001.586-.829c1.037-.649 1.425-1.177 1.327-1.455-.709-2.011-6.313-5.3-8.392-4.915-.296.054-.552.652-.589 1.88-.016.545.016 1.163.088 1.827.065.605.16 1.215.272 1.795l.063.32 3.662 2.147z"
+                    fill={vars.bdlBoxBlue05}
+                />
+            </g>
+        </g>
+    </AccessibleSVG>
+);
+
+export default EmailVerification140;

package/src/styles/_variables.scss

@@ -5,6 +5,7 @@
 @import './constants/typography';
 @import './constants/themes';
 @import './constants/buttons';
+@import './constants/media-queries';
 @import './deprecated'; // <<< Deprecated
 
 // Mixins

package/src/styles/common/_forms.scss

@@ -7,6 +7,7 @@
 /* Inputs */
 
 input[type='text'],
+input[type='date'],
 input[type='password'],
 input[type='search'],
 input[type='email'],
@@ -21,6 +22,7 @@ textarea {
 }
 
 input[type='text']:hover,
+input[type='date']:hover,
 input[type='password']:hover,
 input[type='search']:hover,
 input[type='email']:hover,
@@ -33,6 +35,7 @@ textarea:hover {
 }
 
 input[type='text']:focus,
+input[type='date']:focus,
 input[type='password']:focus,
 input[type='search']:focus,
 input[type='email']:focus,
@@ -51,6 +54,7 @@ input:-ms-input-placeholder {
 }
 
 input[type='text'].is-invalid,
+input[type='date'].is-invalid,
 input[type='password'].is-invalid,
 input[type='search'].is-invalid,
 input[type='email'].is-invalid,
@@ -63,6 +67,7 @@ textarea.is-invalid {
 }
 
 input[type='text'].is-invalid:focus,
+input[type='date'].is-invalid:focus,
 input[type='password'].is-invalid:focus,
 input[type='search'].is-invalid:focus,
 input[type='email'].is-invalid:focus,
@@ -75,6 +80,7 @@ textarea.is-invalid:focus {
 }
 
 input[type='text']:disabled,
+input[type='date']:disabled,
 input[type='password']:disabled,
 input[type='search']:disabled,
 input[type='email']:disabled,

package/src/styles/constants/_layout.scss

@@ -11,6 +11,9 @@ $bdl-border-radius-size-med: $bdl-border-radius-size * 1.5;
 $bdl-border-radius-size-large: $bdl-border-radius-size * 2;
 $bdl-border-radius-size-xlarge: $bdl-border-radius-size * 3;
 
+// Drop shadows
+$bdl-header-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
+
 // Spacing
 $bdl-grid-unit: 4px !default;
 $bdl-grid-unit-px: 4 !default; // unitless grid unit (defined in pixels for manual multiplication in JS)

package/src/styles/constants/_media-queries.scss

@@ -0,0 +1,15 @@
+$size-small-max: 374px;
+$size-small-medium-max: 460px;
+$size-medium-max: 767px;
+$size-large-max: 1023px;
+
+$small-screen: unquote('(max-width: #{$size-small-max})');
+$small-medium-screen: unquote('(max-width: #{$size-small-medium-max})');
+$medium-screen: unquote('(max-width: #{$size-medium-max})');
+$large-screen: unquote('(max-width: #{$size-large-max})');
+
+@mixin breakpoint($media-query) {
+    @media #{$media-query} {
+        @content;
+    }
+}

package/src/styles/variables.js

@@ -92,6 +92,7 @@ export const bdlBorderRadiusSize = "4px"; // bdl-border-radius-size
 export const bdlBorderRadiusSizeMed = "6px"; // bdl-border-radius-size-med
 export const bdlBorderRadiusSizeLarge = "8px"; // bdl-border-radius-size-large
 export const bdlBorderRadiusSizeXlarge = "12px"; // bdl-border-radius-size-xlarge
+export const bdlHeaderBoxShadow = ["0 0 10px 0 rgba(0","0","0","0.05)"]; // bdl-header-box-shadow
 export const bdlGridUnit = "4px"; // bdl-grid-unit
 export const bdlGridUnitPx = "4"; // bdl-grid-unit-px
 export const bdlBtnBorderWidth = "1px"; // bdl-btn-border-width
@@ -101,4 +102,12 @@ export const bdlBtnIconSize = "20px"; // bdl-btn-icon-size
 export const bdlBtnTextIconSize = "16px"; // bdl-btn-text-icon-size
 export const bdlBtnPaddingHorizontal = "16px"; // bdl-btn-padding-horizontal
 export const bdlTransitionDurationBase = "0.15s"; // bdl-transitionDurationBase
-export const bdlTimingFunction = ["cubic-bezier(0","0","0.6","1)"]; // bdl-timingFunction
+export const bdlTimingFunction = ["cubic-bezier(0","0","0.6","1)"]; // bdl-timingFunction
+export const sizeSmallMax = "374px"; // size-small-max
+export const sizeSmallMediumMax = "460px"; // size-small-medium-max
+export const sizeMediumMax = "767px"; // size-medium-max
+export const sizeLargeMax = "1023px"; // size-large-max
+export const smallScreen = "(max-width: 374px)"; // small-screen
+export const smallMediumScreen = "(max-width: 460px)"; // small-medium-screen
+export const mediumScreen = "(max-width: 767px)"; // medium-screen
+export const largeScreen = "(max-width: 1023px)"; // large-screen

package/src/styles/variables.json

@@ -89,6 +89,7 @@
     "bdl-border-radius-size-med": "6px",
     "bdl-border-radius-size-large": "8px",
     "bdl-border-radius-size-xlarge": "12px",
+    "bdl-header-box-shadow": ["0 0 10px 0 rgba(0", "0", "0", "0.05)"],
     "bdl-grid-unit": "4px",
     "bdl-grid-unit-px": "4",
     "bdl-btn-border-width": "1px",
@@ -98,5 +99,13 @@
     "bdl-btn-text-icon-size": "16px",
     "bdl-btn-padding-horizontal": "16px",
     "bdl-transitionDurationBase": "0.15s",
-    "bdl-timingFunction": ["cubic-bezier(0", "0", "0.6", "1)"]
+    "bdl-timingFunction": ["cubic-bezier(0", "0", "0.6", "1)"],
+    "size-small-max": "374px",
+    "size-small-medium-max": "460px",
+    "size-medium-max": "767px",
+    "size-large-max": "1023px",
+    "small-screen": "(max-width: 374px)",
+    "small-medium-screen": "(max-width: 460px)",
+    "medium-screen": "(max-width: 767px)",
+    "large-screen": "(max-width: 1023px)"
 }

package/src/styles/variables.ts

@@ -89,6 +89,7 @@ export const bdlBorderRadiusSize = '4px'; // bdl-border-radius-size
 export const bdlBorderRadiusSizeMed = '6px'; // bdl-border-radius-size-med
 export const bdlBorderRadiusSizeLarge = '8px'; // bdl-border-radius-size-large
 export const bdlBorderRadiusSizeXlarge = '12px'; // bdl-border-radius-size-xlarge
+export const bdlHeaderBoxShadow = ['0 0 10px 0 rgba(0', '0', '0', '0.05)']; // bdl-header-box-shadow
 export const bdlGridUnit = '4px'; // bdl-grid-unit
 export const bdlGridUnitPx = '4'; // bdl-grid-unit-px
 export const bdlBtnBorderWidth = '1px'; // bdl-btn-border-width
@@ -99,3 +100,11 @@ export const bdlBtnTextIconSize = '16px'; // bdl-btn-text-icon-size
 export const bdlBtnPaddingHorizontal = '16px'; // bdl-btn-padding-horizontal
 export const bdlTransitionDurationBase = '0.15s'; // bdl-transitionDurationBase
 export const bdlTimingFunction = ['cubic-bezier(0', '0', '0.6', '1)']; // bdl-timingFunction
+export const sizeSmallMax = '374px'; // size-small-max
+export const sizeSmallMediumMax = '460px'; // size-small-medium-max
+export const sizeMediumMax = '767px'; // size-medium-max
+export const sizeLargeMax = '1023px'; // size-large-max
+export const smallScreen = '(max-width: 374px)'; // small-screen
+export const smallMediumScreen = '(max-width: 460px)'; // small-medium-screen
+export const mediumScreen = '(max-width: 767px)'; // medium-screen
+export const largeScreen = '(max-width: 1023px)'; // large-screen

package/src/utils/Browser.js

@@ -41,6 +41,16 @@ class Browser {
         return /Trident/i.test(Browser.getUserAgent());
     }
 
+    /**
+     * Returns whether browser is Firefox.
+     *
+     * @return {boolean} Whether browser is Firefox
+     */
+    static isFirefox() {
+        const userAgent = Browser.getUserAgent();
+        return /Firefox/i.test(userAgent) && !/Seamonkey\//i.test(userAgent);
+    }
+
     /**
      * Returns whether browser is Safari.
      *

package/src/utils/validators.js

@@ -1,5 +1,6 @@
 // @flow
 import Address from '@hapi/address';
+import tldsHapi from '@hapi/address/lib/tlds';
 
 function hostnameValidator(value: string): boolean {
     // @see https://github.com/hapijs/joi/blame/3516cf0b995c9fe415634c4612c0ac2f8792f0b4/lib/types/string/index.js#L530
@@ -17,8 +18,29 @@ function domainNameValidator(value: string): boolean {
     return Address.domain.isValid(value);
 }
 
-function emailValidator(value: string): boolean {
-    return Address.email.isValid(value);
-}
+// @sideway/address ^4 has exhaustive TLDs, but upgrading requires a TextEncoder polyfill (such as fast-text-encoder) for IE11 support.
+// We can freely upgrade and remove manual TLD supplementation after IE11 EOL.
+
+// Diff of '@hapi/address/lib/tlds' and:
+// https://data.iana.org/TLD/tlds-alpha-by-domain.txt
+// Version 2022020100, Last Updated Tue Feb  1 07:07:01 2022 UTC,
+const tldSupplements = [
+    'AMAZON',
+    'CPA',
+    'LLP',
+    'MUSIC',
+    'SPA',
+    'XN--4DBRK0CE',
+    'XN--CCKWCXETD',
+    'XN--JLQ480N2RG',
+    'XN--MGBCPQ6GPA1A',
+    'XN--Q7CE6A',
+    'ZW',
+];
+
+const emailValidator = (value: string): boolean =>
+    Address.email.isValid(value, {
+        tlds: { allow: new Set([...tldsHapi, ...tldSupplements.map(tld => tld.toLowerCase())]) },
+    });
 
 export { domainNameValidator, emailValidator, hostnameValidator, ipv4AddressValidator };