@ndlib/component-library 1.0.20 → 1.0.22

package/dist/components/providers/componentConfigV2.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const DEFAULT_EXTERNAL_LINK_MATCHER = /[a-zA-Z0-9]*:(\/\/)?[^\s]*/g;
+export const DefaultLinkV2 = (_a) => {
+    var { to } = _a, rest = __rest(_a, ["to"]);
+    return _jsx("a", Object.assign({ href: to }, rest));
+};
+const defaultComponentConfig = {
+    link: {
+        externalMatcher: DEFAULT_EXTERNAL_LINK_MATCHER,
+        navigate: (url) => {
+            window.location.href = url;
+        },
+        internalLinkComponent: DefaultLinkV2,
+        externalLinkComponent: DefaultLinkV2,
+    },
+    modal: {
+        appElement: undefined,
+    },
+};
+export const ComponentConfigContextV2 = createContext(defaultComponentConfig);
+export const useComponentConfigV2 = () => useContext(ComponentConfigContextV2);
+export const ComponentConfigProviderV2 = ({ config: configParam, children }) => {
+    const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), []);
+    return (_jsx(ComponentConfigContextV2.Provider, Object.assign({ value: config }, { children: children })));
+};

package/dist/components/providers/media.js

@@ -9,7 +9,7 @@ export const MediaSizeProvider = ({ useHydrationPatch, ssrBreakpoint: ssrBreakpo
     const [renderCount, setRenderCount] = useState(0);
     const ssrBreakpoint = ssrBreakpointParam || -1;
     const theme = useTheme();
-    const breakpoints = theme.breakpoints.map((bp) => parseInt(bp.slice(0, -2)), [theme]);
+    const breakpoints = (theme.breakpoints || ['576px', '768px', '992px', '1200px', '1400px']).map((bp) => parseInt((bp === null || bp === void 0 ? void 0 : bp.slice(0, -2)) || '0'), [theme]);
     const getBreakpoint = (screenSize) => {
         const closestBreakpoint = breakpoints.findIndex((bp) => screenSize < bp);
         return closestBreakpoint === -1 ? breakpoints.length : closestBreakpoint;

package/dist/components/providers/mediaV2.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+type MediaContextTypeV2 = {
+    screenSize: number;
+    breakpoint: number;
+};
+export declare const MediaSizeProviderV2: React.FC<PropsWithChildren<{
+    ssrBreakpoint?: number;
+    useHydrationPatch?: boolean;
+}>>;
+export declare const useMediaQueryV2: () => MediaContextTypeV2;
+export {};

package/dist/components/providers/mediaV2.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, } from 'react';
+import { useThemeV2 } from '../../theme';
+const MediaContextV2 = createContext({
+    screenSize: -1,
+    breakpoint: -1,
+});
+export const MediaSizeProviderV2 = ({ useHydrationPatch, ssrBreakpoint: ssrBreakpointParam, children }) => {
+    const [renderCount, setRenderCount] = useState(0);
+    const ssrBreakpoint = ssrBreakpointParam || -1;
+    const theme = useThemeV2();
+    const breakpoints = (theme.breakpoints || ['576px', '768px', '992px', '1200px', '1400px']).map((bp) => parseInt(bp.slice(0, -2) || '0'), [theme]);
+    const getBreakpoint = (screenSize) => {
+        const closestBreakpoint = breakpoints.findIndex((bp) => screenSize < bp);
+        return closestBreakpoint === -1 ? breakpoints.length : closestBreakpoint;
+    };
+    const initialScreenSize = useHydrationPatch || typeof window === 'undefined' ? -1 : window.innerWidth;
+    const initialBreakpoint = useHydrationPatch || typeof window === 'undefined'
+        ? ssrBreakpoint
+        : getBreakpoint(window.innerWidth);
+    const [screenSize, setScreenSize] = useState(initialScreenSize);
+    const [breakpoint, setBreakpoint] = useState(initialBreakpoint);
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const screenSize = window.innerWidth;
+        const breakpoint = getBreakpoint(screenSize);
+        setScreenSize(screenSize);
+        setBreakpoint(breakpoint);
+    }, [renderCount, breakpoints]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const rerenderOnResize = () => {
+            setRenderCount((renderCount) => renderCount + 1);
+        };
+        window.addEventListener('resize', rerenderOnResize);
+        return () => {
+            window.removeEventListener('resize', rerenderOnResize);
+        };
+    }, []);
+    return (_jsx(MediaContextV2.Provider, Object.assign({ value: {
+            breakpoint,
+            screenSize,
+        } }, { children: children })));
+};
+export const useMediaQueryV2 = () => useContext(MediaContextV2);

package/dist/components/providers/uiV2.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { ComponentConfigParamV2 } from './componentConfigV2';
+import { ENVIRONMENT } from './env';
+import { AlertQueryParams } from './alerts';
+import { StructuredDataProps } from '../composites/StructuredData';
+export type UiConfigV2 = {
+    structuredData?: StructuredDataProps;
+    env?: ENVIRONMENT;
+    components?: ComponentConfigParamV2;
+    alertsConfig?: AlertQueryParams;
+    disableAlerts?: boolean;
+    loadFonts?: boolean;
+    loadGlobalStyles?: boolean;
+    includeTheme?: boolean;
+    ssrBreakpoint?: number;
+    useHydrationPatch?: boolean;
+};
+type UiProviderPropsV2 = PropsWithChildren<UiConfigV2>;
+export declare const UiProviderV2: React.FC<UiProviderPropsV2>;
+export {};

package/dist/components/providers/uiV2.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentConfigProviderV2, } from './componentConfigV2';
+import { EnvironmentProvider } from './env';
+import { ThemeProviderV2 } from '../../theme';
+import { AlertsProvider } from './alerts';
+import { FontLoader } from '../../FontLoader';
+import { GlobalStylesV2 } from '../../theme/GlobalStylesV2';
+import { DialogsProvider } from './dialogs';
+import { MediaSizeProviderV2 } from './mediaV2';
+import StructuredData from '../composites/StructuredData';
+import { SnackBarProvider } from './snackBar';
+import { UniqueIdProvider } from './uniqueIds';
+export const UiProviderV2 = ({ structuredData, env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, useHydrationPatch, ssrBreakpoint, }) => {
+    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProviderV2, Object.assign({ ssrBreakpoint: ssrBreakpoint, useHydrationPatch: useHydrationPatch }, { children: _jsx(ComponentConfigProviderV2, Object.assign({ config: components || {} }, { children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) })), loadGlobalStyles && _jsx(GlobalStylesV2, {}), loadFonts && _jsx(FontLoader, {}), structuredData && _jsx(StructuredData, Object.assign({}, structuredData))] })));
+    return includeTheme ? _jsx(ThemeProviderV2, { children: core }) : core;
+};

package/dist/index.d.ts

@@ -1,52 +1,72 @@
 export { theme, ThemeProvider, useTheme } from './theme';
-export type { StylesProp, StyledElementProps } from './theme';
-export { COLOR } from './theme/colors';
+export { themeV2, ThemeProviderV2, useThemeV2 } from './theme';
+export type { StylesProp, StylesPropV2, StyledElementProps, StyledElementPropsV2, } from './theme';
+export { COLOR, colors } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { ArrowLink } from './components/elements/ArrowLink';
 export { BrandingBar } from './components/elements/BrandingBar';
 export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
-export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
-export { Label, LABEL_SIZE } from './components/elements/text/Label';
-export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
+export { ButtonV2, BUTTONV2_SIZE, BUTTONV2_TYPE, LinkButtonV2, } from './components/elements/ButtonV2';
+export { Heading, HEADING_SIZE } from './components/elements/Heading';
+export { HeadingV2, HEADINGV2_SIZE } from './components/elements/HeadingV2';
+export { Label, LABEL_SIZE } from './components/elements/Label';
+export { LabelV2, LABELV2_SIZE } from './components/elements/LabelV2';
+export { Paragraph, PARAGRAPH_SIZE } from './components/elements/Paragraph';
+export { ParagraphV2, PARAGRAPHV2_SIZE, } from './components/elements/ParagraphV2';
 export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
+export { GroupV2, useGroupV2, GROUPV2_TYPE, } from './components/elements/GroupV2';
 export { Markdown } from './components/elements/Markdown';
 export { Box } from './components/elements/layout/Box';
+export { BoxV2 } from './components/elements/layoutV2/BoxV2';
 export { Column } from './components/elements/layout/Column';
+export { ColumnV2 } from './components/elements/layoutV2/ColumnV2';
 export { Row } from './components/elements/layout/Row';
+export { RowV2 } from './components/elements/layoutV2/RowV2';
 export { Link, LINK_SIZE } from './components/elements/Link';
-export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
-export { Select } from './components/elements/Fields/Select';
-export { DatePicker } from './components/elements/Fields/DatePicker';
-export { MonthPicker } from './components/elements/Fields/MonthPicker';
-export { Checkbox } from './components/elements/Fields/Checkbox';
-export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
-export { Radio } from './components/elements/Fields/Radio';
-export { RadioGroup } from './components/elements/Fields/RadioGroup';
+export { INPUT_SIZE, TextInput } from './components/elements/TextInput';
+export { INPUTV2_SIZE, TextInputV2 } from './components/elements/TextInputV2';
+export { Select } from './components/elements/Select';
+export { SelectV2 } from './components/elements/SelectV2';
+export { DatePicker } from './components/elements/DatePicker';
+export { MonthPicker } from './components/elements/MonthPicker';
+export { Checkbox } from './components/elements/Checkbox';
+export { CheckboxV2 } from './components/elements/CheckboxV2';
+export { CheckboxGroup } from './components/elements/CheckboxGroup';
+export { CheckboxGroupV2 } from './components/elements/CheckboxGroupV2';
+export { Radio } from './components/elements/Radio';
+export { RadioGroup } from './components/elements/RadioGroup';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';
-export { ReadMore } from './components/elements/text/ReadMore';
+export { ReadMore } from './components/elements/ReadMore';
+export { ReadMoreV2 } from './components/elements/ReadMoreV2';
 export { Icon } from './components/elements/Icon';
+export { IconV2 } from './components/elements/IconV2';
 export { Dropdown } from './components/elements/Dropdown';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
+export { SpinnerV2, SPINNERV2_SIZE } from './components/elements/SpinnerV2';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
 export { RawHtml } from './components/elements/RawHtml';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
+export { CardV2, CARDV2_SIZE, CARDV2_LAYOUT, } from './components/composites/CardV2';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';
+export { ModalV2 } from './components/composites/ModalV2';
 export { DragDropList, DragHandle } from './components/composites/DragDropList';
 export { Seo } from './components/composites/Seo';
 export { StructuredData } from './components/composites/StructuredData';
 export { UiProvider } from './components/providers/ui';
+export { UiProviderV2 } from './components/providers/uiV2';
 export { MenuProvider, useMenu, MENU_ACTION_TYPE, MENU_ORIENTATION, } from './components/providers/menu';
 export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
 export { useAlerts, AlertsProvider, ALERT_TYPE, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
+export { MediaSizeProviderV2, useMediaQueryV2, } from './components/providers/mediaV2';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
 export { useUniqueId } from './components/providers/uniqueIds';
 export { sortByKey, SORT_DIRECTION } from './utils/sortByKey';

package/dist/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+    <script type="module" crossorigin src="/assets/index-3cfb730f.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    
+  </body>
+</html>

package/dist/index.js

@@ -1,51 +1,71 @@
 export { theme, ThemeProvider, useTheme } from './theme';
-export { COLOR } from './theme/colors';
+export { themeV2, ThemeProviderV2, useThemeV2 } from './theme';
+export { COLOR, colors } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { ArrowLink } from './components/elements/ArrowLink';
 export { BrandingBar } from './components/elements/BrandingBar';
 export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
-export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
-export { Label, LABEL_SIZE } from './components/elements/text/Label';
-export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
+export { ButtonV2, BUTTONV2_SIZE, BUTTONV2_TYPE, LinkButtonV2, } from './components/elements/ButtonV2';
+export { Heading, HEADING_SIZE } from './components/elements/Heading';
+export { HeadingV2, HEADINGV2_SIZE } from './components/elements/HeadingV2';
+export { Label, LABEL_SIZE } from './components/elements/Label';
+export { LabelV2, LABELV2_SIZE } from './components/elements/LabelV2';
+export { Paragraph, PARAGRAPH_SIZE } from './components/elements/Paragraph';
+export { ParagraphV2, PARAGRAPHV2_SIZE, } from './components/elements/ParagraphV2';
 export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
+export { GroupV2, useGroupV2, GROUPV2_TYPE, } from './components/elements/GroupV2';
 export { Markdown } from './components/elements/Markdown';
 export { Box } from './components/elements/layout/Box';
+export { BoxV2 } from './components/elements/layoutV2/BoxV2';
 export { Column } from './components/elements/layout/Column';
+export { ColumnV2 } from './components/elements/layoutV2/ColumnV2';
 export { Row } from './components/elements/layout/Row';
+export { RowV2 } from './components/elements/layoutV2/RowV2';
 export { Link, LINK_SIZE } from './components/elements/Link';
-export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
-export { Select } from './components/elements/Fields/Select';
-export { DatePicker } from './components/elements/Fields/DatePicker';
-export { MonthPicker } from './components/elements/Fields/MonthPicker';
-export { Checkbox } from './components/elements/Fields/Checkbox';
-export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
-export { Radio } from './components/elements/Fields/Radio';
-export { RadioGroup } from './components/elements/Fields/RadioGroup';
+export { INPUT_SIZE, TextInput } from './components/elements/TextInput';
+export { INPUTV2_SIZE, TextInputV2 } from './components/elements/TextInputV2';
+export { Select } from './components/elements/Select';
+export { SelectV2 } from './components/elements/SelectV2';
+export { DatePicker } from './components/elements/DatePicker';
+export { MonthPicker } from './components/elements/MonthPicker';
+export { Checkbox } from './components/elements/Checkbox';
+export { CheckboxV2 } from './components/elements/CheckboxV2';
+export { CheckboxGroup } from './components/elements/CheckboxGroup';
+export { CheckboxGroupV2 } from './components/elements/CheckboxGroupV2';
+export { Radio } from './components/elements/Radio';
+export { RadioGroup } from './components/elements/RadioGroup';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';
-export { ReadMore } from './components/elements/text/ReadMore';
+export { ReadMore } from './components/elements/ReadMore';
+export { ReadMoreV2 } from './components/elements/ReadMoreV2';
 export { Icon } from './components/elements/Icon';
+export { IconV2 } from './components/elements/IconV2';
 export { Dropdown } from './components/elements/Dropdown';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
+export { SpinnerV2, SPINNERV2_SIZE } from './components/elements/SpinnerV2';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
 export { RawHtml } from './components/elements/RawHtml';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
+export { CardV2, CARDV2_SIZE, CARDV2_LAYOUT, } from './components/composites/CardV2';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';
+export { ModalV2 } from './components/composites/ModalV2';
 export { DragDropList, DragHandle } from './components/composites/DragDropList';
 export { Seo } from './components/composites/Seo';
 export { StructuredData } from './components/composites/StructuredData';
 export { UiProvider } from './components/providers/ui';
+export { UiProviderV2 } from './components/providers/uiV2';
 export { MenuProvider, useMenu, MENU_ACTION_TYPE, MENU_ORIENTATION, } from './components/providers/menu';
 export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
 export { useAlerts, AlertsProvider, ALERT_TYPE, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
+export { MediaSizeProviderV2, useMediaQueryV2, } from './components/providers/mediaV2';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
 export { useUniqueId } from './components/providers/uniqueIds';
 export { sortByKey, SORT_DIRECTION } from './utils/sortByKey';

package/dist/theme/Color.stories.js

@@ -3,9 +3,11 @@ import { COLOR } from './colors';
 import { GROUP_TYPE, Group } from '../components/elements/Group';
 import { Row } from '../components/elements/layout/Row';
 import { Box } from '../components/elements/layout/Box';
-import { LABEL_SIZE, Label } from '../components/elements/text/Label';
+import { LABEL_SIZE, Label } from '../components/elements/Label';
+import { UIVersion1 } from '../utils/decorators/UIVersion1';
 const meta = {
     title: 'Theme/Colors',
+    decorators: [UIVersion1],
 };
 const ColorSquare = ({ color }) => {
     return _jsx(Box, { sx: { p: 3, bg: color } });

package/dist/theme/GlobalStylesV2.d.ts

@@ -0,0 +1,2 @@
+import '../../dist/theme/css-variables.css';
+export declare const GlobalStylesV2: () => import("react/jsx-runtime").JSX.Element;

package/dist/theme/GlobalStylesV2.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Global, css } from '@emotion/react';
+import '../../dist/theme/css-variables.css';
+import { colors } from './colors';
+const globalStyles = css `
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  sub {
+    vertical-align: sub;
+    font-size: smaller;
+  }
+
+  sup {
+    vertical-align: super;
+    font-size: smaller;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+    font-size: 16px;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  .react-datepicker {
+    border: 0 !important;
+    border-radius: 0 !important;
+  }
+    
+  .ndlib-date-picker-blue .react-datepicker__header,
+  .ndlib-date-picker-blue .react-datepicker__header * {
+    background-color: ${colors.primary};
+    color: white; 
+  }
+
+  .ndlib-date-picker-gold .react-datepicker__header,
+  .ndlib-date-picker-gold .react-datepicker__header * {
+    background-color: ${colors.ndMetallicGold};
+    color: white; 
+  }
+
+  .ndlib-date-picker-green .react-datepicker__header,
+  .ndlib-date-picker-green .react-datepicker__header * {
+    background-color: ${colors.ndGreem};
+    color: white; 
+  }
+
+  .ndlib-date-picker-red .react-datepicker__header,
+  .ndlib-date-picker-red .react-datepicker__header * {
+    background-color: ${colors.ndTertiary4};
+    color: white; 
+  }
+
+  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+    border-top-right-radius: 0 !important;
+  }
+
+  .ndlib-date-picker .react-datepicker__header {
+    width: 280px;
+    border-radius: 0;
+  }
+
+  .ndlib-date-picker .react-datepicker__day-names {
+    margin-top: 4px;
+  }
+
+  .ndlib-date-picker .react-datepicker__month .react-datepicker__month-text {
+    padding: 4px;
+  }
+
+  .ndlib-date-picker .ndlib-date-picker-highlight {
+    background-color: ${colors.ndTertiary1};
+    color: ${colors.background};
+    border-radius: 0.3rem;
+  }
+
+  .ndlib-date-picker .ndlib-date-picker-pastdate {
+    color: ${colors.lightGray};
+  }
+
+  @font-face {
+    font-family: GPCMed;
+    font-display: swap;
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff2') format('woff2'),
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff') format('woff'),
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.ttf')
+    format('truetype');
+  }
+
+  a {
+    color: ${colors.ndBlueBright}
+  }
+`;
+export const GlobalStylesV2 = () => {
+    return _jsx(Global, { styles: globalStyles });
+};

package/dist/theme/Typography.stories.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import { getTypographyStyles, TYPOGRAPHY_TYPE } from './typography';
 import { Group } from '../components/elements/Group';
 import { Box } from '../components/elements/layout/Box';
-import { LABEL_SIZE, Label } from '../components/elements/text/Label';
+import { LABEL_SIZE, Label } from '../components/elements/Label';
+import { UIVersion1 } from '../utils/decorators/UIVersion1';
 const meta = {
     title: 'Theme/Typography',
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const types = [

package/dist/theme/css-variables.css

@@ -0,0 +1,57 @@
+:root {
+  --text: #333333;
+  --lightText: #767676;
+  --background: #ffffff;
+  --transparent: rgba(0,0,0,0);
+  --primary: #0c2340;
+  --textOnPrimary: #ffffff;
+  --primaryHighlight: #000d1d;
+  --secondary: #d39f10;
+  --textOnSecondary: #040401;
+  --secondaryHighlight: #ddcc70;
+  --white: #ffffff;
+  --warmWhite: #f8f4ec;
+  --warmWhiteDark: #efe9d9;
+  --black: #000000;
+  --darkGray: #333333;
+  --gray: #767676;
+  --lightGray: #d2d2d2;
+  --extraLightGray: #e2e2e2;
+  --extraExtraLightGray: #f2f2f2;
+  --ndTertiary1: #00823E;
+  --ndBlue: #0c2340;
+  --ndBlueDark: #081629;
+  --ndBlueLight: #143865;
+  --ndBlueBright: #1c4f8f;
+  --ndGold: #ae9142;
+  --ndGoldLight: #d39f10;
+  --ndGoldDark: #8c7535;
+  --ndGreem: #0a843d;
+  --ndGreenLight: #b3dac5;
+  --ndSkyBlue: #e1e8f2;
+  --ndSkyBlueDark: #c1cddd;
+  --ndSkyBlueLight: #edf2f9;
+  --ndMetallicGold: #ae9142;
+  --ndMetallicGoldLight: #CEBE8E;
+  --ndProvostBlue: #002a5d;
+  --ndSecondary1: #5aabbc;
+  --ndSecondary2: #999623;
+  --ndSecondary3: #5f1709;
+  --ndSecondary4: #465510;
+  --ndSecondary5: #f6e7a1;
+  --ndSecondary6: #302205;
+  --ndTertiary1: #00823E;
+  --ndTertiary2: #4a3651;
+  --ndTertiary3: #ffcf01;
+  --ndTertiary4: #aa272f;
+  --ndTertiary5: #5a412f;
+  --ndTertiary6: #ba6f2e;
+  --alertInformationalBg: #ffb073;
+  --alertInformationalBorder: #ad7950;
+  --alertInformationalYellowBg: #f8e999;
+  --alertInformationalYellowBorder: #b3a871;
+  --alertWarningBg: #fc7279;
+  --alertWarningBorder: #ad5458;
+  --alertSuccessBg: #edffea;
+  --ndTertiary1: #00823E;
+}