@royaloperahouse/chord 2.2.3-chord-development → 2.2.3-e-chord-development-chord-development

package/dist/components/atoms/TextField/TextField.d.ts

@@ -1,41 +1,42 @@
+import React from 'react';
 import { ITextFieldProps } from '../../../types/formTypes';
 /**
  * A text field component, that wraps around the native `<input />` element
- * and adds some extra information around it (i.e. a text label and an error label).
+ * and adds some extra states and information around it (i.e. a text and an error labels,
+ * error state, show/hide button for password field).
  *
- * # Labels
+ * # Label
  * You can use this component just like you would use a regular `<input />` element,
  * just with the extra `label` prop, to set the label of the content. For example:
  * ```tsx
  * <TextField label="This is a label" />
  * ```
  *
- * **IMPORTANT!** If you want to render a `<TextField />` without a label, you will
- * have to make the label an empty string:
- * ```tsx
- * <TextField label='' />
- * ```
+ * # Error state
+ * An error label will be shown below the text input field if the `error` prop exists.
+ * Also input will be rendered with a red border. An empty string can be passed to
+ * render only error state without error message.
  *
- * This is not recommended, as it makes the input non-accessible - all `<TextField />`s should
- * have a label.
+ * # Password mode
+ * If type `password` provided this will be rendered with the `Show/Hide` button over the input field.
+ * Clicking on that changes type to `text` and back to `password`.
  *
  * # Light / Dark mode
  * The component can also adapt its styles for light / dark mode. If you want this component
  * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
  * ```tsx
  * <div>
- *     <WhiteBackgroundContainer>
- *         <TextField label="..." />
- *     </WhiteBackgroundContainer>
- *
- *     <BlackBackgroundContainer>
- *         <TextField darkMode label="..." />
- *     </BlackBackgroundContainer>
- *     <BlueBackgroundContainer>
- *         <TextField darkMode label="..." />
- *     </BlueBackgroundContainer>
+ *   <WhiteBackgroundContainer>
+ *     <TextField label="..." />
+ *   </WhiteBackgroundContainer>
+ *   <BlackBackgroundContainer>
+ *     <TextField darkMode label="..." />
+ *   </BlackBackgroundContainer>
+ *   <BlueBackgroundContainer>
+ *     <TextField darkMode label="..." />
+ *   </BlueBackgroundContainer>
  * </div>
  * ```
  */
-declare const TextField: ({ label, error, darkMode, width, ...inputProps }: ITextFieldProps) => JSX.Element;
+declare const TextField: React.ForwardRefExoticComponent<ITextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/components/atoms/TextField/TextField.style.d.ts

@@ -1,5 +1,9 @@
 import { ITextFieldProps } from '../../../types/formTypes';
-export declare const TextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, Pick<ITextFieldProps, "error" | "darkMode">, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, Pick<ITextFieldProps, "width">, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", any, Pick<ITextFieldProps, "error" | "darkMode"> & {
+    isPasswordField: boolean;
+}, never>;
+export declare const ShowHideButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const TextLabel: import("styled-components").StyledComponent<"p", any, Pick<ITextFieldProps, "darkMode">, never>;
 export declare const ErrorLabel: import("styled-components").StyledComponent<"p", any, Pick<ITextFieldProps, "darkMode">, never>;

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextLink, Tickbox, Timer, TypeTags, VideoControls } from './atoms';
 import { AnchorTabBar, Footer, LiveChat, Navigation, StickyBar, TitleWithCTA, UpsellSection } from './organisms';
-import { Accordion, Accordions, AnnouncementBanner, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, ReadMore, SearchBar, SectionTitle, Select, Tabs, TextOnly, UpsellCard, Quote } from './molecules';
+import { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, ReadMore, SearchBar, SectionTitle, Select, Tabs, TextOnly, UpsellCard, Quote } from './molecules';
 import ThemeProvider from '../styles/ThemeProvider';
 import GlobalStyles from '../styles/GlobalStyles';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, BodyText, Card, Cards, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, SearchBar, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Tabs, TextArea, TextField, TextLink, TextLogo, Tickbox, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, };
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, SearchBar, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Tabs, TextArea, TextField, TextLink, TextLogo, Tickbox, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, };

package/dist/components/molecules/AuxiliaryNav/AuxiliaryNav.d.ts

@@ -0,0 +1,21 @@
+import { FunctionComponent } from 'react';
+import { IAuxiliaryNavProps } from '../../../types/auxiliaryNav';
+/**
+ * Vertical menu component uses for navigation
+ * inside website chapter. It looks like a vertical
+ * list with clickable items on desktop and dropdown
+ * list on mobile.
+ *
+ * ## Menu items
+ * Menu items should be passed as `items` prop. This
+ * should be an array of objects. Each object should
+ * have `text` (text displayed as a menu item) and
+ * `onClick` (click handler function)
+ *
+ * ## Active menu item
+ * Active menu item should be passed as component `activeItem`
+ * prop. This indicates on which menu item should be highlighted
+ * as active one. Should be equal to `text` prop from one of the `items`
+ */
+declare const AuxiliaryNav: FunctionComponent<IAuxiliaryNavProps>;
+export default AuxiliaryNav;

package/dist/components/molecules/AuxiliaryNav/AuxiliaryNav.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const MenuContainer: import("styled-components").StyledComponent<"menu", any, {}, never>;
+export declare const MenuList: import("styled-components").StyledComponent<"ul", any, {
+    mobileOpen: boolean;
+}, never>;
+export declare const MenuItem: import("styled-components").StyledComponent<"button", any, {
+    active: boolean;
+}, never>;
+export declare const MobileButton: import("styled-components").StyledComponent<"button", any, {
+    mobileOpen: boolean;
+}, never>;

package/dist/components/molecules/AuxiliaryNav/index.d.ts

@@ -0,0 +1,2 @@
+import AuxiliaryNav from './AuxiliaryNav';
+export default AuxiliaryNav;

package/dist/components/molecules/PasswordStrength/PasswordStrength.d.ts

@@ -0,0 +1,33 @@
+import { FunctionComponent } from 'react';
+import { IPasswordStrengthProps } from '../../../types/passwordStrength';
+/**
+ * Password strength indicator component.
+ * This renders some number of lines (6 by default)
+ * which should become active when the user improves
+ * the strength of the entered password.
+ *
+ * ## Sections
+ * To set number of sections it should be passed
+ * as `sections` prop.
+ *
+ * ## Active section
+ * To set number of active sections it should be passed
+ * as `activeSections` prop.
+ *
+ * ## Colors
+ * Color of every element can be controlled by properties:
+ * `sectionsColor`, `activeSectionsColor`,
+ * `textColor`, `strengthLabelColor`.
+ *
+ * ## Text
+ * `text` prop is used to render some message.
+ * For example error (together with proper red color)
+ * or some password requirement. It can be empty.
+ *
+ * ## Strength label
+ * `strengthLabel` prop is used to render strength characteristic
+ * of entered password. For example: `weak`, `normal`, `strong`, etc.
+ * It can be empty.
+ */
+declare const PasswordStrength: FunctionComponent<IPasswordStrengthProps>;
+export default PasswordStrength;

package/dist/components/molecules/PasswordStrength/PasswordStrength.styles.d.ts

@@ -0,0 +1,13 @@
+import { Colors } from '../../../types/types';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Sections: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Section: import("styled-components").StyledComponent<"div", any, {
+    color: Colors;
+}, never>;
+export declare const BottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", any, {
+    color: Colors;
+}, never>;
+export declare const LabelText: import("styled-components").StyledComponent<"div", any, {
+    color: Colors;
+}, never>;

package/dist/components/molecules/PasswordStrength/index.d.ts

@@ -0,0 +1,2 @@
+import PasswordStrength from './PasswordStrength';
+export default PasswordStrength;

package/dist/components/molecules/index.d.ts

@@ -23,4 +23,6 @@ import ImageWithCaption from './ImageWithCaption';
 import Quote from './Quote';
 import MiniCard from './MiniCard';
 import ReadMore from './ReadMore';
-export { Accordion, Accordions, AnnouncementBanner, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, ReadMore, Quote, SectionTitle, SearchBar, Select, Tabs, TextOnly, UpsellCard, };
+import PasswordStrength from './PasswordStrength';
+import AuxiliaryNav from './AuxiliaryNav';
+export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, ReadMore, Quote, SectionTitle, SearchBar, Select, Tabs, TextOnly, UpsellCard, };

package/dist/components/organisms/ModalWindow/ModalWindow.d.ts

@@ -0,0 +1,68 @@
+import { FunctionComponent } from 'react';
+import { ModalWindowProps } from '../../../types';
+/**
+ * A ModalWindow component, leveraging React Modal for rendering modals with enhanced accessibility
+ * and styling customization. This component is designed to be flexible for various use cases, with
+ * support for mobile responsiveness, custom z-indexes, and a close button.
+ *
+ * # Usage
+ * This component is intended to be used in React applications where modal functionality is required.
+ * It supports a range of props for customization, including isOpen, setIsOpen, children, appElementId,
+ * and accepts all additional props supported by React Modal for further configuration.
+ *
+ * ## Basic Example
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import ModalWindow from './ModalWindow';
+ *
+ * const App = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   const toggleModal = () => setIsOpen(!isOpen);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={toggleModal}>Open Modal</button>
+ *       <ModalWindow
+ *         isOpen={isOpen}
+ *         setIsOpen={setIsOpen}
+ *         appElementId="root"
+ *       >
+ *         <div>Modal Content Here</div>
+ *       </ModalWindow>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * ## Advanced Usage
+ * You can further customize the modal by directly passing props supported by React Modal.
+ * This component adapts its z-index based on the device type (mobile or desktop) and allows for an
+ * accessible close functionality.
+ *
+ * ```tsx
+ * <ModalWindow
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   appElementId="root"
+ *   shouldCloseOnOverlayClick={true}
+ * >
+ *   <YourCustomComponent />
+ * </ModalWindow>
+ * ```
+ *
+ * # Props
+ * - `isOpen`: Boolean indicating if the modal is open.
+ * - `setIsOpen`: Function to set the open state of the modal.
+ * - `children`: Content to be displayed within the modal.
+ * - `appElementId`: ID of the app element to assist with accessibility.
+ * - All other props are passed directly to the underlying React Modal component, allowing for extensive customization.
+ *
+ * # Design and Accessibility
+ * This component automatically applies a `ScrollLock` when the modal is open to prevent background
+ * scrolling and sets appropriate z-index values to ensure the modal is layered correctly on the page.
+ * It also configures the modal for accessibility, including support for closing on ESC and setting
+ * `aria-modal` to true.
+ */
+declare const ModalWindow: FunctionComponent<ModalWindowProps>;
+export default ModalWindow;

package/dist/components/organisms/ModalWindow/ModalWindow.style.d.ts

@@ -0,0 +1,4 @@
+export declare const InnerModal: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/organisms/ModalWindow/index.d.ts

@@ -0,0 +1,2 @@
+import ModalWindow from './ModalWindow';
+export default ModalWindow;

package/dist/components/organisms/index.d.ts

@@ -5,4 +5,5 @@ import TitleWithCTA from './TitleWithCTA';
 import UpsellSection from './UpsellSection';
 import { LiveChat } from './LiveChat';
 import StickyBar from './StickyBar';
-export { AnchorTabBar, Footer, LiveChat, Navigation, StickyBar, TitleWithCTA, UpsellSection };
+import ModalWindow from './ModalWindow';
+export { AnchorTabBar, Footer, LiveChat, ModalWindow, Navigation, StickyBar, TitleWithCTA, UpsellSection };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, TabLink, Tabs, TextArea, TextField, TextLink, Tickbox, Timer, TypeTags, UpsellCard, UpsellSection, Quote } from './components';
 import { devices, breakpoints } from './styles/viewports';
 import zIndexes from './styles/zIndexes';
-import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType } from './types';
+import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink } from './types';
 import { MiniCard } from './components/molecules';
 import { BrandingStyle } from './types/impactHeader';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AspectRatio, BodyText, BrandingStyle, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, zIndexes, };
+import { ModalWindow } from './components/organisms';
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AspectRatio, BodyText, BrandingStyle, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, zIndexes, };

package/dist/types/auxiliaryNav.d.ts

@@ -0,0 +1,21 @@
+export interface IAuxiliaryNavProps {
+    /**
+     * Menu items
+     */
+    items: IItem[];
+    /**
+     * Item will be marked as active.
+     * Should be equal to text prop from one of the items
+     */
+    activeItem: string;
+}
+export interface IItem {
+    /**
+     * Item text
+     */
+    text: string;
+    /**
+     * Item on click action
+     */
+    onClick: () => void;
+}

package/dist/types/formTypes.d.ts

@@ -33,15 +33,28 @@ export interface ITextAreaProps extends Partial<IGridItemProps>, InputHTMLAttrib
      */
     darkMode?: boolean;
 }
+export declare type ITextFieldType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
 export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     /**
      * A text label to be shown above the text input field.
      */
-    label: string;
+    label?: string;
     /**
      * An error label to be shown below the text input field.
+     * Input will be rendered with a red border if this prop exist.
+     * Empty string can be passed to render only error state without
+     * error message.
      */
     error?: string;
+    /**
+     * Type of text field.
+     * It can be one of: `text`, `email`, `password`,
+     * `number`, `search`, `tel`, `url`.
+     * `password` type adds `Show/Hide` button over the input element.
+     * Any other types don't change the view of the element, just change
+     * accessibility stuff
+    */
+    type?: ITextFieldType;
     /**
      * A style prop that allows us to change what colours to
      * use for light or dark mode (e.g. text color, border color, etc...)
@@ -52,9 +65,8 @@ export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     darkMode?: boolean;
     /**
      * Width in pixels.
-     *
-     * Default: `196px`
-     *
+     * This will limit the maximum width of input element.
+     * By default it will take all available space.
      */
     width?: number;
 }

package/dist/types/index.d.ts

@@ -10,4 +10,5 @@ import { EditorialLink } from './editorial';
 import { IPageHeadingCompactProps } from './impactHeader';
 import { IntegratedTimerProps, ITimerProps } from './timer';
 import { ICreditListing } from './creditListing';
-export { AspectRatio, ButtonType, CarouselType, Colors, ICreditListing, EditorialLink, FooterData, IconNameType, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, };
+import { ModalWindowProps } from './modalWindow';
+export { AspectRatio, ButtonType, CarouselType, Colors, ICreditListing, EditorialLink, FooterData, IconNameType, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, };

package/dist/types/modalWindow.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import Modal from 'react-modal';
+export interface ModalWindowProps extends Modal.Props {
+    /**
+     * Boolean indicating if the modal is open.
+     */
+    isOpen: boolean;
+    /**
+     * Function to set the open state of the modal.
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Content to be displayed within the modal.
+     */
+    children: ReactElement;
+    /**
+     * ID of the app element to assist with accessibility.
+     */
+    appElementId: string;
+}

package/dist/types/passwordStrength.d.ts

@@ -0,0 +1,51 @@
+import { Colors } from './types';
+export interface IPasswordStrengthProps {
+    /**
+     * Number of sections to show
+     *
+     * Default: 6
+     */
+    sections?: number;
+    /**
+     * Number of active sections
+     *
+     * Default: 0
+     */
+    activeSections?: number;
+    /**
+     * Color of non-active sections
+     *
+     * Default: Colors.MidGrey
+     */
+    sectionsColor?: Colors;
+    /**
+    * Color of active sections
+    *
+    * Default: Colors.Black
+    */
+    activeSectionsColor?: Colors;
+    /**
+     * Text
+     *
+     * Default: ""
+     */
+    text?: string;
+    /**
+     * Text color
+     *
+     * Default: Colors.Black
+     */
+    textColor?: Colors;
+    /**
+     * Strength label text
+     *
+     * Default: ""
+    */
+    strengthLabel?: string;
+    /**
+     * Strength label text
+     *
+     * Default: Colors.Black
+    */
+    strengthLabelColor?: Colors;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "2.2.3-chord-development",
+  "version": "2.2.3-e-chord-development-chord-development",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,6 +91,7 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
+    "@types/react-modal": "^3.16.3",
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.15",
     "@types/testing-library__jest-dom": "^5.14.1",
@@ -110,6 +111,8 @@
     "typescript": "^4.4.4"
   },
   "dependencies": {
-    "moment": "^2.29.4"
+    "moment": "^2.29.4",
+    "react-modal": "^3.16.1",
+    "react-scrolllock": "^5.0.1"
   }
 }