@dfds-ui/react-components 0.9.11-alpha.ca6fd903 → 0.9.11-alpha.d0bfdd42

package/cjs/surface/Surface.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { theme } from '@dfds-ui/theme';
+export declare type SurfaceType = keyof typeof theme.colors.surface;
+export declare type SurfaceContextType = {
+    surface: SurfaceType;
+    backgroundColor: string;
+    textColors: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+};
+export declare function getTextColors(surface: SurfaceType): {
+    primary: string;
+    secondary: string;
+    disabled: string;
+};
+export declare function getBackgroundColor(surface: SurfaceType): string;
+export declare const SurfaceContext: React.Context<SurfaceContextType | undefined>;
+export declare const SurfaceProvider: React.FC<{
+    surface: SurfaceType;
+}>;
+export declare function MaybeSurfaceProvider({ surface, ...rest }: React.PropsWithChildren<{
+    surface?: SurfaceType;
+}>): JSX.Element;
+export declare const useSurfaceContext: (surface?: "main" | "dark" | "primary" | "secondary" | "inverted" | "tertiary" | undefined) => SurfaceContextType;
+export declare const Surface: React.FC<{
+    surface: SurfaceType;
+    className?: string;
+}>;

package/cjs/surface/index.d.ts

@@ -0,0 +1 @@
+export * from './Surface';

package/cjs/tab/Tab.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type Index = number | string;
+export declare type TabProps = {
+    active?: boolean;
+    disabled?: boolean;
+    transparent?: boolean;
+    index: Index;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/cjs/tab/TabPanel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type TabPanelProps = {
+    index: number | string;
+    children: React.ReactNode;
+};
+declare const TabPanel: React.FC<TabPanelProps>;
+export default TabPanel;

package/cjs/tab/Tabs.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type TabsLabels = {
+    scrollLeft: string;
+    scrollRight: string;
+};
+declare type TabsProps = {
+    tabsLabels?: TabsLabels;
+    children?: any;
+};
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/cjs/tab/TabsContext.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Index } from './Tab';
+export declare type TabsContextProps = {
+    transparent?: boolean;
+    onChange?: (index: any) => void;
+    size?: 's' | 'm';
+    activeTab?: Index | undefined;
+};
+export declare const TabsContext: React.Context<TabsContextProps>;
+export declare const TabsContextProvider: React.FC<{
+    value: TabsContextProps;
+}>;
+export declare const useTabsContext: () => TabsContextProps;
+export default useTabsContext;

package/cjs/tab/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TabsContext';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';
+export { default as TabPanel } from './TabPanel';

package/cjs/table/Table.d.ts

@@ -0,0 +1,22 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+export declare type TableProps = {
+    /**
+     * Table content
+     */
+    children?: ReactNode;
+    /**
+     * Enables interaction effect on table rows
+     */
+    isInteractive?: boolean;
+    /**
+     * Makes table header sticky when scrolling (no IE 11 support)
+     */
+    isHeaderSticky?: boolean;
+} & ComponentPropsWithRef<'table'>;
+export declare type TableContextProps = {
+    isInteractive: boolean;
+    isHeaderSticky: boolean;
+};
+export declare const useTable: () => TableContextProps;
+export declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, "key" | "css" | keyof React.TableHTMLAttributes<HTMLTableElement> | "isHeaderSticky" | "isInteractive"> & React.RefAttributes<HTMLTableElement>>;
+export default Table;

package/cjs/table/TableBody.d.ts

@@ -0,0 +1,9 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+export declare type TableBodyProps = {
+    /**
+     * Table body content
+     */
+    children: ReactNode;
+} & ComponentPropsWithRef<'tbody'>;
+export declare const TableBody: React.ForwardRefExoticComponent<Pick<TableBodyProps, "key" | "css" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
+export default TableBody;

package/cjs/table/TableDataCell.d.ts

@@ -0,0 +1,14 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { Alignment } from './TableHeaderCell';
+export declare type TableDataCellProps = {
+    /**
+     * Sets alignment for the content in the tag
+     */
+    align?: Alignment;
+    /**
+     * Table cell content
+     */
+    children: ReactNode;
+} & ComponentPropsWithRef<'td'>;
+export declare const TableDataCell: React.ForwardRefExoticComponent<Pick<TableDataCellProps, "key" | "css" | keyof React.TdHTMLAttributes<HTMLTableDataCellElement>> & React.RefAttributes<HTMLTableCellElement>>;
+export default TableDataCell;

package/cjs/table/TableHead.d.ts

@@ -0,0 +1,14 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+export declare type TableHeadProps = {
+    /**
+     * Table header content
+     */
+    children: ReactNode;
+    /**
+     * Classes applied on the thead tag
+     */
+    className?: string;
+} & ComponentPropsWithRef<'thead'>;
+export declare const tableHeadStyle: import("@emotion/react").SerializedStyles;
+export declare const TableHead: React.ForwardRefExoticComponent<Pick<TableHeadProps, "key" | "css" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
+export default TableHead;

package/cjs/table/TableHeaderCell.d.ts

@@ -0,0 +1,15 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+export declare type Alignment = 'left' | 'center' | 'right' | 'justify' | 'char';
+export declare type TableHeaderCellProps = {
+    /**
+     * Sets alignment for the content in the tag
+     */
+    align?: Alignment;
+    /**
+     * Table cell content
+     */
+    children: ReactNode;
+} & ComponentPropsWithRef<'th'>;
+export declare const getTableCellStyle: (align?: Alignment) => import("@emotion/react").SerializedStyles;
+export declare const TableHeaderCell: React.ForwardRefExoticComponent<Pick<TableHeaderCellProps, "key" | "css" | keyof React.ThHTMLAttributes<HTMLTableHeaderCellElement>> & React.RefAttributes<HTMLTableCellElement>>;
+export default TableHeaderCell;

package/cjs/table/TableRow.d.ts

@@ -0,0 +1,17 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+export declare type TableRowProps = {
+    /**
+     * Table row content
+     */
+    children: ReactNode;
+    /**
+     * Classes applied on the tr tag
+     */
+    className?: string;
+    /**
+     * Applies Selected state styling to the row
+     */
+    isSelected?: boolean;
+} & ComponentPropsWithRef<'tr'>;
+export declare const TableRow: React.ForwardRefExoticComponent<Pick<TableRowProps, "key" | "css" | keyof React.HTMLAttributes<HTMLTableRowElement> | "isSelected"> & React.RefAttributes<HTMLTableRowElement>>;
+export default TableRow;

package/cjs/table/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Table';
+export * from './TableHead';
+export * from './TableBody';
+export * from './TableRow';
+export * from './TableHeaderCell';
+export * from './TableDataCell';

package/cjs/test/Test.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface TestProps {
+    /** Test name. */
+    name: string;
+    description?: string;
+}
+export declare const Test: FC<TestProps>;
+export default Test;

package/cjs/tooltip/Tooltip.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TippyProps } from '@tippy.js/react';
+declare type Placement = 'top' | 'right' | 'bottom' | 'left';
+declare type TooltipProps = {
+    content: string;
+    placement?: Placement;
+    offset?: number;
+    delay?: [number, number] | false;
+    containerProps?: any;
+    tabIndex?: number;
+};
+declare const Tooltip: React.FC<TooltipProps>;
+/**
+ * The `UnstableWithTooltip` component can be used to wrap an element with a tooltip but unlike the `Tooltip` component
+ * no extra html markup will wrapped around the targeted element.
+ *
+ * NOTE: It is important that the component being wrapped forwards a ref to the DOM node.
+ */
+export declare const UnstableWithTooltip: ({ delay, ...rest }: {
+    className?: string;
+} & TippyProps) => JSX.Element;
+export default Tooltip;

package/cjs/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip';
+export { UnstableWithTooltip } from './Tooltip';

package/cjs/typography/Headlines.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+declare const headlineStyles: {
+    h1: import("@emotion/react").SerializedStyles;
+    h2: import("@emotion/react").SerializedStyles;
+    h3: import("@emotion/react").SerializedStyles;
+    h4: import("@emotion/react").SerializedStyles;
+};
+export declare const H1: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
+    as?: React.ElementType<any> | undefined;
+    noMargin?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H2: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
+    as?: React.ElementType<any> | undefined;
+    noMargin?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H3: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
+    as?: React.ElementType<any> | undefined;
+    noMargin?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H4: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
+    as?: React.ElementType<any> | undefined;
+    noMargin?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const Headline: React.FunctionComponent<{
+    as?: React.ElementType;
+    styledAs?: keyof typeof headlineStyles;
+    className?: string;
+    noMargin?: boolean;
+}>;
+export declare const HeroHeadline: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
+    as?: React.ElementType<any> | undefined;
+    noMargin?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const SectionHeadline: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
+    as?: React.ElementType<any> | undefined;
+    noMargin?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const SubHeadline: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
+    as?: React.ElementType<any> | undefined;
+    noMargin?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const SmallHeadline: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
+    as?: React.ElementType<any> | undefined;
+    noMargin?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export {};

package/cjs/typography/Text.d.ts

@@ -0,0 +1,4 @@
+export declare const Text: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;

package/cjs/typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Headlines';
+export * from './Text';

package/global-styles/ResetStyles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Minimal/modern CSS reset.
+ *
+ * Taken from: https://www.joshwcomeau.com/css/custom-css-reset/
+ *
+ * TODO: Include this in the GlobalStyles component when adapted and tested in solutions.
+ */
+export declare const ResetStyles: () => JSX.Element;

package/global-styles/ResetStyles.js

@@ -0,0 +1,29 @@
+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 React from 'react';
+import { Global, css } from '@emotion/react';
+/**
+ * Minimal/modern CSS reset.
+ *
+ * Taken from: https://www.joshwcomeau.com/css/custom-css-reset/
+ *
+ * TODO: Include this in the GlobalStyles component when adapted and tested in solutions.
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "6jhwm5",
+  styles: "*,*::before,*::after{box-sizing:border-box;}*{margin:0;}html,body{height:100%;}body{-webkit-font-smoothing:antialiased;}img,picture,video,canvas,svg{display:block;max-width:100%;}input,button,textarea,select{font:inherit;}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;}"
+} : {
+  name: "1dzedxz-ResetStyles",
+  styles: "*,*::before,*::after{box-sizing:border-box;}*{margin:0;}html,body{height:100%;}body{-webkit-font-smoothing:antialiased;}img,picture,video,canvas,svg{display:block;max-width:100%;}input,button,textarea,select{font:inherit;}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;};label:ResetStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWwtc3R5bGVzL1Jlc2V0U3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjaUIiLCJmaWxlIjoiLi4vLi4vc3JjL2dsb2JhbC1zdHlsZXMvUmVzZXRTdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyBHbG9iYWwsIGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG4vKipcbiAqIE1pbmltYWwvbW9kZXJuIENTUyByZXNldC5cbiAqXG4gKiBUYWtlbiBmcm9tOiBodHRwczovL3d3dy5qb3Nod2NvbWVhdS5jb20vY3NzL2N1c3RvbS1jc3MtcmVzZXQvXG4gKlxuICogVE9ETzogSW5jbHVkZSB0aGlzIGluIHRoZSBHbG9iYWxTdHlsZXMgY29tcG9uZW50IHdoZW4gYWRhcHRlZCBhbmQgdGVzdGVkIGluIHNvbHV0aW9ucy5cbiAqL1xuZXhwb3J0IGNvbnN0IFJlc2V0U3R5bGVzID0gKCkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxHbG9iYWxcbiAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAvKlxuICAgICAgICAgIDEuIFVzZSBhIG1vcmUtaW50dWl0aXZlIGJveC1zaXppbmcgbW9kZWwuXG4gICAgICAgICovXG4gICAgICAgICosXG4gICAgICAgICo6OmJlZm9yZSxcbiAgICAgICAgKjo6YWZ0ZXIge1xuICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIH1cbiAgICAgICAgLypcbiAgICAgICAgICAyLiBSZW1vdmUgZGVmYXVsdCBtYXJnaW5cbiAgICAgICAgKi9cbiAgICAgICAgKiB7XG4gICAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgICB9XG4gICAgICAgIC8qXG4gICAgICAgICAgMy4gQWxsb3cgcGVyY2VudGFnZS1iYXNlZCBoZWlnaHRzIGluIHRoZSBhcHBsaWNhdGlvblxuICAgICAgICAqL1xuICAgICAgICBodG1sLFxuICAgICAgICBib2R5IHtcbiAgICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgIH1cbiAgICAgICAgLypcbiAgICAgICAgICBUeXBvZ3JhcGhpYyB0d2Vha3MhXG4gICAgICAgICAgNC4gQWRkIGFjY2Vzc2libGUgbGluZS1oZWlnaHRcbiAgICAgICAgICA1LiBJbXByb3ZlIHRleHQgcmVuZGVyaW5nXG4gICAgICAgICovXG4gICAgICAgIGJvZHkge1xuICAgICAgICAgIC8qIFRPRE86IEV2YWx1YXRlIGltcGxpY2F0aW9ucyBvZiBlbmFibGluZyB0aGlzIGxpbmUtaGVpZ2h0IGNoYW5nZSAqL1xuICAgICAgICAgIC8qIGxpbmUtaGVpZ2h0OiAxLjU7ICovXG4gICAgICAgICAgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7XG4gICAgICAgIH1cbiAgICAgICAgLypcbiAgICAgICAgICA2LiBJbXByb3ZlIG1lZGlhIGRlZmF1bHRzXG4gICAgICAgICovXG4gICAgICAgIGltZyxcbiAgICAgICAgcGljdHVyZSxcbiAgICAgICAgdmlkZW8sXG4gICAgICAgIGNhbnZhcyxcbiAgICAgICAgc3ZnIHtcbiAgICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICAgIH1cbiAgICAgICAgLypcbiAgICAgICAgICA3LiBSZW1vdmUgYnVpbHQtaW4gZm9ybSB0eXBvZ3JhcGh5IHN0eWxlc1xuICAgICAgICAqL1xuICAgICAgICBpbnB1dCxcbiAgICAgICAgYnV0dG9uLFxuICAgICAgICB0ZXh0YXJlYSxcbiAgICAgICAgc2VsZWN0IHtcbiAgICAgICAgICBmb250OiBpbmhlcml0O1xuICAgICAgICB9XG4gICAgICAgIC8qXG4gICAgICAgICAgOC4gQXZvaWQgdGV4dCBvdmVyZmxvd3NcbiAgICAgICAgKi9cbiAgICAgICAgcCxcbiAgICAgICAgaDEsXG4gICAgICAgIGgyLFxuICAgICAgICBoMyxcbiAgICAgICAgaDQsXG4gICAgICAgIGg1LFxuICAgICAgICBoNiB7XG4gICAgICAgICAgb3ZlcmZsb3ctd3JhcDogYnJlYWstd29yZDtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAvPlxuICApXG59XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var ResetStyles = function ResetStyles() {
+  return ___EmotionJSX(Global, {
+    styles: _ref
+  });
+};

package/index.d.ts

@@ -1,5 +1,6 @@
 export { default as elevation } from './elevation';
 export { default as media } from './media';
+export { ResetStyles } from './global-styles/ResetStyles';
 export { GlobalStyles, DfdsFontFace } from './global-styles/GlobalStyles';
 export * from './accordion';
 export * from './app-bar';

package/index.js

@@ -1,5 +1,6 @@
 export { default as elevation } from './elevation';
 export { default as media } from './media';
+export { ResetStyles } from './global-styles/ResetStyles';
 export { GlobalStyles, DfdsFontFace } from './global-styles/GlobalStyles';
 export * from './accordion';
 export * from './app-bar';

package/package.json

@@ -3,7 +3,7 @@
   "description": "Shared react components within DFDS",
   "license": "MIT",
   "private": false,
-  "version": "0.9.11-alpha.ca6fd903",
+  "version": "0.9.11-alpha.d0bfdd42",
   "sideEffects": false,
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -18,13 +18,13 @@
     "react-select": "^4.0.0"
   },
   "dependencies": {
-    "@dfds-ui/colors": "0.9.11-alpha.ca6fd903",
-    "@dfds-ui/fonts": "0.9.11-alpha.ca6fd903",
-    "@dfds-ui/hooks": "0.9.11-alpha.ca6fd903",
-    "@dfds-ui/icons": "0.9.11-alpha.ca6fd903",
-    "@dfds-ui/spacing": "0.9.11-alpha.ca6fd903",
-    "@dfds-ui/theme": "0.9.11-alpha.ca6fd903",
-    "@dfds-ui/typography": "0.9.11-alpha.ca6fd903",
+    "@dfds-ui/colors": "0.9.11-alpha.d0bfdd42",
+    "@dfds-ui/fonts": "0.9.11-alpha.d0bfdd42",
+    "@dfds-ui/hooks": "0.9.11-alpha.d0bfdd42",
+    "@dfds-ui/icons": "0.9.11-alpha.d0bfdd42",
+    "@dfds-ui/spacing": "0.9.11-alpha.d0bfdd42",
+    "@dfds-ui/theme": "0.9.11-alpha.d0bfdd42",
+    "@dfds-ui/typography": "0.9.11-alpha.d0bfdd42",
     "@kunukn/react-collapse": "^2.2.9",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "4.0.0-alpha.60",
@@ -34,7 +34,7 @@
     "react-hook-intersection-observer": "^0.1.0",
     "uuid": "^3.3.2"
   },
-  "gitHead": "ca6fd903c2a63ca8045821ee2650cb1a979fffc3",
+  "gitHead": "d0bfdd42d757f2f255a6c71cfee953dbfa3a8f3e",
   "publishConfig": {
     "access": "public"
   }

package/stepper/Step.d.ts

@@ -1,41 +1,9 @@
-import React from 'react';
-export declare type StepContextType = {
-    index: number;
-    active?: boolean;
-    completed?: boolean;
-    disabled?: boolean;
-    editable?: boolean;
-};
+import React, { ReactNode } from 'react';
+import { ListItemProps } from './../lists/ListItem';
 declare type StepProps = {
-    /**
-     * Step index
-     */
-    index: number;
-    /**
-     * Step label
-     */
-    label?: string;
-    /**
-     * Active step
-     */
-    active?: boolean;
-    /**
-     * Optional step
-     */
-    optional?: boolean;
-    /**
-     * Completed step
-     */
-    completed?: boolean;
-    /**
-     * Disabled step
-     */
-    disabled?: boolean;
-    /**
-     * editable step
-     */
-    editable?: boolean;
+    label: ReactNode;
+    children: ReactNode;
+    listItemProps?: ListItemProps;
 };
-export declare const StepContext: React.Context<StepContextType>;
 declare const _default: React.NamedExoticComponent<StepProps>;
 export default _default;

package/stepper/Step.js

@@ -1,70 +1,76 @@
-var _excluded = ["editable", "index", "label", "active", "completed", "disabled"];
+var _excluded = ["children", "label", "listItemProps"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { memo, useContext, createContext } from 'react';
-import { stepWrapperStyles } from './Stepper.styles';
-import { StepperContext } from './Stepper';
-import StepButton from './StepButton';
-import StepLabel from './StepLabel';
+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 React, { useEffect, useState, memo } from 'react';
+import { css } from '@emotion/react';
+import { Step as StepWrapper, StepContent } from '@material-ui/core';
+import { useStepperContext } from './Stepper';
+import ListItem from './../lists/ListItem';
+import uuid from 'uuid/v4';
+import { theme } from '@dfds-ui/theme';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var StepContext = /*#__PURE__*/createContext({
-  completed: false,
-  active: false,
-  disabled: false,
-  editable: true,
-  index: 0
-});
-
-var Step = function Step(_ref) {
-  var _ref$editable = _ref.editable,
-      editable = _ref$editable === void 0 ? true : _ref$editable,
-      index = _ref.index,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? '' : _ref$label,
-      activeProp = _ref.active,
-      completedProp = _ref.completed,
-      disabledProp = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useContext = useContext(StepperContext),
-      activeStep = _useContext.activeStep,
-      orientation = _useContext.orientation,
-      nonSequential = _useContext.nonSequential;
-
-  var _activeProp = activeProp,
-      active = _activeProp === void 0 ? false : _activeProp,
-      _completedProp = completedProp,
-      completed = _completedProp === void 0 ? false : _completedProp,
-      _disabledProp = disabledProp,
-      disabled = _disabledProp === void 0 ? false : _disabledProp;
-
-  if (activeStep === index) {
-    active = activeProp !== undefined ? activeProp : true;
-  } else if (!nonSequential && activeStep > index) {
-    completed = completedProp !== undefined ? completedProp : true;
-  } else if (!nonSequential && activeStep < index) {
-    disabled = disabledProp !== undefined ? disabledProp : true;
-  }
-
-  var contextValue = React.useMemo(function () {
-    return {
-      index: index,
-      active: active,
-      completed: completed,
-      disabled: disabled,
-      editable: editable
-    };
-  }, [index, active, completed, disabled, editable]);
-  return ___EmotionJSX(StepContext.Provider, {
-    value: contextValue
-  }, ___EmotionJSX("div", _extends({
-    css: stepWrapperStyles
-  }, props), ___EmotionJSX(StepButton, null), label && ___EmotionJSX(StepLabel, null, label)));
+
+var listItemStyles = function listItemStyles(_ref) {
+  var isActive = _ref.isActive;
+  return /*#__PURE__*/css("background-color:", isActive ? theme.colors.secondary.light : theme.colors.surface.secondary, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:listItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdGVwcGVyL1N0ZXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdtRSIsImZpbGUiOiIuLi8uLi9zcmMvc3RlcHBlci9TdGVwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIEZ1bmN0aW9uQ29tcG9uZW50LCB1c2VFZmZlY3QsIHVzZVN0YXRlLCBtZW1vIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IFN0ZXAgYXMgU3RlcFdyYXBwZXIsIFN0ZXBDb250ZW50IH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUnXG5pbXBvcnQgeyB1c2VTdGVwcGVyQ29udGV4dCB9IGZyb20gJy4vU3RlcHBlcidcbmltcG9ydCBMaXN0SXRlbSwgeyBMaXN0SXRlbVByb3BzIH0gZnJvbSAnLi8uLi9saXN0cy9MaXN0SXRlbSdcbmltcG9ydCB1dWlkIGZyb20gJ3V1aWQvdjQnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG50eXBlIFN0ZXBQcm9wcyA9IHsgbGFiZWw6IFJlYWN0Tm9kZTsgY2hpbGRyZW46IFJlYWN0Tm9kZTsgbGlzdEl0ZW1Qcm9wcz86IExpc3RJdGVtUHJvcHMgfVxudHlwZSBTdGVwQ29tcG9uZW50ID0gRnVuY3Rpb25Db21wb25lbnQ8U3RlcFByb3BzPlxuXG5jb25zdCBsaXN0SXRlbVN0eWxlcyA9ICh7IGlzQWN0aXZlIH06IHsgaXNBY3RpdmU6IGJvb2xlYW4gfSkgPT4gY3NzYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2lzQWN0aXZlID8gdGhlbWUuY29sb3JzLnNlY29uZGFyeS5saWdodCA6IHRoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG5gXG5cbmNvbnN0IHN0ZXBDb250ZW50U3R5bGVzID0gY3NzYFxuICAuTXVpU3RlcENvbnRlbnQtcm9vdCB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIG1hcmdpbjogMHB4O1xuICAgIHBhZGRpbmc6IDBweDtcbiAgfVxuYFxuXG5jb25zdCBTdGVwOiBTdGVwQ29tcG9uZW50ID0gKHsgY2hpbGRyZW4sIGxhYmVsLCBsaXN0SXRlbVByb3BzLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IFtzdGVwSWRdID0gdXNlU3RhdGUodXVpZCgpKVxuICBjb25zdCB7IHNldFN0ZXAsIGFjdGl2ZVN0ZXAgfSA9IHVzZVN0ZXBwZXJDb250ZXh0KClcbiAgY29uc3QgaXNBY3RpdmUgPSBzdGVwSWQgPT09IGFjdGl2ZVN0ZXBcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB1c2VFZmZlY3QoKCkgPT4gc2V0U3RlcChzdGVwSWQpLCBbXSlcbiAgcmV0dXJuIChcbiAgICA8U3RlcFdyYXBwZXIgey4uLnByb3BzfSBjc3M9e3N0ZXBDb250ZW50U3R5bGVzfT5cbiAgICAgIDxMaXN0SXRlbSBhcz1cImRpdlwiIGNzcz17bGlzdEl0ZW1TdHlsZXMoeyBpc0FjdGl2ZSB9KX0gey4uLmxpc3RJdGVtUHJvcHN9PlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L0xpc3RJdGVtPlxuICAgICAgPFN0ZXBDb250ZW50PntjaGlsZHJlbn08L1N0ZXBDb250ZW50PlxuICAgIDwvU3RlcFdyYXBwZXI+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgbWVtbyhTdGVwKVxuIl19 */");
+};
+
+var stepContentStyles = process.env.NODE_ENV === "production" ? {
+  name: "1nyoacf",
+  styles: ".MuiStepContent-root{border:none;margin:0px;padding:0px;}"
+} : {
+  name: "ndmke3-stepContentStyles",
+  styles: ".MuiStepContent-root{border:none;margin:0px;padding:0px;};label:stepContentStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdGVwcGVyL1N0ZXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWU2QiIsImZpbGUiOiIuLi8uLi9zcmMvc3RlcHBlci9TdGVwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIEZ1bmN0aW9uQ29tcG9uZW50LCB1c2VFZmZlY3QsIHVzZVN0YXRlLCBtZW1vIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IFN0ZXAgYXMgU3RlcFdyYXBwZXIsIFN0ZXBDb250ZW50IH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUnXG5pbXBvcnQgeyB1c2VTdGVwcGVyQ29udGV4dCB9IGZyb20gJy4vU3RlcHBlcidcbmltcG9ydCBMaXN0SXRlbSwgeyBMaXN0SXRlbVByb3BzIH0gZnJvbSAnLi8uLi9saXN0cy9MaXN0SXRlbSdcbmltcG9ydCB1dWlkIGZyb20gJ3V1aWQvdjQnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG50eXBlIFN0ZXBQcm9wcyA9IHsgbGFiZWw6IFJlYWN0Tm9kZTsgY2hpbGRyZW46IFJlYWN0Tm9kZTsgbGlzdEl0ZW1Qcm9wcz86IExpc3RJdGVtUHJvcHMgfVxudHlwZSBTdGVwQ29tcG9uZW50ID0gRnVuY3Rpb25Db21wb25lbnQ8U3RlcFByb3BzPlxuXG5jb25zdCBsaXN0SXRlbVN0eWxlcyA9ICh7IGlzQWN0aXZlIH06IHsgaXNBY3RpdmU6IGJvb2xlYW4gfSkgPT4gY3NzYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2lzQWN0aXZlID8gdGhlbWUuY29sb3JzLnNlY29uZGFyeS5saWdodCA6IHRoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG5gXG5cbmNvbnN0IHN0ZXBDb250ZW50U3R5bGVzID0gY3NzYFxuICAuTXVpU3RlcENvbnRlbnQtcm9vdCB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIG1hcmdpbjogMHB4O1xuICAgIHBhZGRpbmc6IDBweDtcbiAgfVxuYFxuXG5jb25zdCBTdGVwOiBTdGVwQ29tcG9uZW50ID0gKHsgY2hpbGRyZW4sIGxhYmVsLCBsaXN0SXRlbVByb3BzLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IFtzdGVwSWRdID0gdXNlU3RhdGUodXVpZCgpKVxuICBjb25zdCB7IHNldFN0ZXAsIGFjdGl2ZVN0ZXAgfSA9IHVzZVN0ZXBwZXJDb250ZXh0KClcbiAgY29uc3QgaXNBY3RpdmUgPSBzdGVwSWQgPT09IGFjdGl2ZVN0ZXBcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB1c2VFZmZlY3QoKCkgPT4gc2V0U3RlcChzdGVwSWQpLCBbXSlcbiAgcmV0dXJuIChcbiAgICA8U3RlcFdyYXBwZXIgey4uLnByb3BzfSBjc3M9e3N0ZXBDb250ZW50U3R5bGVzfT5cbiAgICAgIDxMaXN0SXRlbSBhcz1cImRpdlwiIGNzcz17bGlzdEl0ZW1TdHlsZXMoeyBpc0FjdGl2ZSB9KX0gey4uLmxpc3RJdGVtUHJvcHN9PlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L0xpc3RJdGVtPlxuICAgICAgPFN0ZXBDb250ZW50PntjaGlsZHJlbn08L1N0ZXBDb250ZW50PlxuICAgIDwvU3RlcFdyYXBwZXI+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgbWVtbyhTdGVwKVxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var Step = function Step(_ref2) {
+  var children = _ref2.children,
+      label = _ref2.label,
+      listItemProps = _ref2.listItemProps,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useState = useState(uuid()),
+      _useState2 = _slicedToArray(_useState, 1),
+      stepId = _useState2[0];
+
+  var _useStepperContext = useStepperContext(),
+      setStep = _useStepperContext.setStep,
+      activeStep = _useStepperContext.activeStep;
+
+  var isActive = stepId === activeStep; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  useEffect(function () {
+    return setStep(stepId);
+  }, []);
+  return ___EmotionJSX(StepWrapper, _extends({}, props, {
+    css: stepContentStyles
+  }), ___EmotionJSX(ListItem, _extends({
+    as: "div",
+    css: listItemStyles({
+      isActive: isActive
+    })
+  }, listItemProps), label), ___EmotionJSX(StepContent, null, children));
 };
 
 export default /*#__PURE__*/memo(Step);