@ntbjs/react-components 2.0.14 → 3.0.0-rc.1

package/types/components/widgets/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,134 @@
+import React from 'react';
+type ContextMenuOwnProps = {
+    /**
+     * An array containing nodes of the `ContextMenuItem` component
+     */
+    children?: any;
+    /**
+     * Marks this menu as the sublevel/submenu of another context menu.
+     *
+     * NOT DECLARED BY THE OLD propTypes, so the codemod could not emit it; the widening
+     * pass reported it as a `(dynamic key)` undeclared read but cannot type it, because
+     * `S.ContextMenu` is a `styled.div` and `sublevel` is not an HTML attribute. Declared
+     * by hand so the documented usage in this file's own JSDoc and in
+     * `ContextMenu.stories.tsx:103` keeps compiling.
+     *
+     * PRE-EXISTING FINDING, DELIBERATELY NOT FIXED HERE: nothing reads it. The component
+     * strips it out of the spread —
+     * `Object.entries(props).filter(([key]) => key !== 'sublevel')` — so it reaches
+     * neither the DOM nor `ContextMenu.styled.ts`, which reads no prop at all. The
+     * sublevel placement it appears to request is actually driven by the *`Popover`*'s
+     * `contextMenuSublevel`, which the stories set on the same element. So this is a
+     * documented public prop that is a no-op. Removing it is an API break and belongs in
+     * its own commit with its own decision; keeping the declaration records the API as it
+     * is published today rather than as we wish it were.
+     */
+    sublevel?: boolean;
+};
+/**
+ * This component wraps around an array of `ContextMenuItems` to display a context menu.
+ *
+ * In most use-cases, the `ContextMenu` will be wrapped in a `Popover` to provide the functionality for opening/closing and placing the menu.
+ * In such cases, send the `ContextMenu` to the `Popover` as its `content` prop.
+ *
+ * The context menu and sublevels will automatically adjust their placement in relation to the element that opens it
+ * based on available space if the provided placement doesn't work. See the `Popover` documentation for further instructions on placement.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { ContextMenu } from '@ntbjs/react-components/widgets'
+ * // or
+ * import ContextMenu from '@ntbjs/react-components/widgets/ContextMenu'
+ * ```
+ *
+ * ### Usage examples
+ * #### Plain context menu
+ *
+ * ``` js
+
+const item1 = <ContextMenuItem title="Download" onClick={onClickEffect} key="item-1" />;
+const item2 = <ContextMenuItem title="Delete" icon={<IconDelete />} onClick={onClickEffect} key="item-2" />;
+
+<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>
+  Click here to open
+</Popover>
+```
+ *
+ * #### Context menu with grouped items
+ * Use the `ContextMenuItemsGroup` component to group menu items together. Grouped items will not show borders
+ * between themselves, indicating that their actions are related.
+ *
+ * ``` js
+
+const item1 = <ContextMenuItem title="Download" onClick={onClickEffect} key="item-1" />;
+const item2 = <ContextMenuItem title="Delete" icon={<IconDelete />} onClick={onClickEffect} key="item-2" />;
+
+const groupItem1 = <ContextMenuItem title="Edit in Mediebank" icon={<IconDesignServices />} onClick={onClickEffect} key="group-item-1" />:
+const groupItem2 = <ContextMenuItem title="Edit in Photoshop" icon={<IconDesignServices />} onClick={onClickEffect} key="group-item-2" />;
+const groupItem3 = <ContextMenuItem title="Edit in Illustrator" icon={<IconDesignServices />} onClick={onClickEffect} key="group-item-3" />;
+
+const itemGroup1 = <ContextMenuItemsGroup key="item-group-1">{[groupItem1, groupItem2, groupItem3]}</ContextMenuItemsGroup>;
+
+<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>
+  Click here to open
+</Popover>
+```
+ *
+ * #### Context menu with sublevels
+ * Wrap a `ContextMenuItem` in a `Popover` and pass it a `ContextMenu` as child to create a sublevel/submenu.
+ * A sublevel will by default be placed adjacent and aligned with the `ContextMenuItem` which opens it,
+ * and adjust automatically based on available space.
+ *
+ * Set the `contextMenu` and `contextMenuSublevel` props of the `Popover` containing the sublevel to `true`.
+ *
+ * Set the `opensSublevel` prop of the `ContextMenuItem` containing the sublevel to `true`.
+ *
+ * ``` js
+
+const item1 = <ContextMenuItem title="Download" onClick={onClickEffect} key="item-1" />;
+const item2 = <ContextMenuItem title="Delete" icon={<IconDelete />} onClick={onClickEffect} hoverBackgroundColors={['#fbeae6', '#fbeae6']} key="item-2" />;
+
+const subItem1 = <ContextMenuItem title="Edit in Mediebank" icon={<IconDesignServices />} onClick={onClickEffect} key="sub-item-1" />
+const subItem2 = <ContextMenuItem title="Edit in Photoshop" icon={<IconDesignServices />} onClick={onClickEffect} key="sub-item-2" />
+const subItem3 = <ContextMenuItem title="Edit in Illustrator" icon={<IconDesignServices />} onClick={onClickEffect} key="sub-item-3" />
+
+const itemWithSublevel = (
+  <Popover
+    content={
+      <ContextMenu sublevel={true}>
+        {[subItem1, subItem2, subItem3, subItem4, subItem5]}
+      </ContextMenu>
+    }
+    contextMenu={true}
+    contextMenuSublevel={true}
+    key="item-3"
+  >
+    <ContextMenuItem title="Open level 2" opensSublevel={true} />
+  </Popover>
+);
+
+<Popover content={<ContextMenu {...args}>{[item1, item2, itemWithSublevel]}</ContextMenu>} contextMenu={true}>
+  Click here to open
+</Popover>
+```
+ *
+ *
+ * #### Context menu from a dropdown button
+ * When used with a dropdown button, the `Button` component takes care of wrapping the menu items in a `Popover`.
+ * Just pass the array of `ContextMenuItems` directly into the `Button` as its children.
+ *
+ * ``` js
+
+const item1 = <ContextMenuItem title="Edit in Mediebank" icon={<IconDesignServices />} onClick={onClickEffect} key="item-1" />;
+const item2 = <ContextMenuItem title="Edit in Photoshop" icon={<IconDesignServices />} onClick={onClickEffect} key="item-2" />;
+const item3 = <ContextMenuItem title="Edit in Illustrator" icon={<IconDesignServices />} onClick={onClickEffect} key="item-3" />;
+
+<Button onClick={onClickEffect} dropdownItems={<ContextMenu {...args}>{[item1, item2, item3, item4, item5]}</ContextMenu>}>
+  Button text
+</Button>
+```
+ *
+ */
+declare const ContextMenu: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>, "ref">, keyof ContextMenuOwnProps> & ContextMenuOwnProps & React.RefAttributes<any>>;
+export default ContextMenu;

package/types/components/widgets/ContextMenu/ContextMenu.styled.d.ts

@@ -0,0 +1 @@
+export declare const ContextMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;

package/types/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import * as S from './ContextMenuItem.styled';
+type ContextMenuItemOwnProps = {
+    /**
+     * Menu item text
+     */
+    title: string;
+    /**
+     * Optional icon (left side)
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Function to trigger when the item is clicked
+     */
+    onClickEffect?: (...args: any[]) => any;
+    /**
+     * Whether the `ContextMenuItem` opens another `ContextMenu`
+     */
+    opensSublevel?: boolean;
+    /**
+     * Array of custom hover text/icon color in the form of hex-strings (e.g. `'#FFFFFF'`).
+     * Must contain two colors, where the first is for dark-mode and the second is for light-mode.
+     */
+    hoverColors?: string[];
+    /**
+     * Array of custom hover background colors in the form of hex-strings (e.g. `'#FFFFFF'`).
+     * Must contain two colors, where the first is for dark-mode and the second is for light-mode.
+     */
+    hoverBackgroundColors?: string[];
+};
+/**
+ * Single context menu item.
+ *
+ * See the documentation for `ContextMenu` for usage examples.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'
+ * // or
+ * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'
+ * ```
+ */
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, S.ContextMenuItemStyleProps>, never>, "ref">, keyof ContextMenuItemOwnProps> & ContextMenuItemOwnProps & React.RefAttributes<any>>;
+export default ContextMenuItem;

package/types/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+/**
+ * `ContextMenuItem`'s props, i.e. what `ContextMenuItem.tsx` passes to
+ * `<S.ContextMenuItem>`: `$icon`, `$hoverColors`, `$hoverBackgroundColors` and
+ * `$openssublevel`. Value types from that file's propTypes; all optional per §J.5.
+ */
+export interface ContextMenuItemStyleProps {
+    /** `icon` — `PropTypes.element`, so a React element and not a `ReactNode`. Read only
+     *  as `!props.$icon`, i.e. for presence. */
+    $icon?: ReactElement<any>;
+    /** `opensSublevel` — `PropTypes.bool`. Selects the right-hand padding, since a
+     *  sublevel item has its own chevron in that space. Lower-case by existing convention
+     *  at both ends; renaming it would be a two-file change for no type benefit. */
+    $openssublevel?: boolean;
+    /** `hoverColors` — `PropTypes.arrayOf(PropTypes.string)`, documented as exactly
+     *  `[darkModeColor, lightModeColor]` hex strings. `string[]` and not
+     *  `[string, string]`: the propTypes say an array of any length, which is why the
+     *  template guards the array's presence and then `[0]` and `[1]` individually. */
+    $hoverColors?: string[];
+    /** `hoverBackgroundColors` — same shape as `$hoverColors`. */
+    $hoverBackgroundColors?: string[];
+}
+export declare const ContextMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, ContextMenuItemStyleProps>, never>> & string;
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, never>, never>> & string;
+export declare const SublevelIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, never>, never>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/types/components/widgets/ContextMenu/ContextMenuItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ContextMenuItem';

package/types/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+type ContextMenuItemsGroupOwnProps = {
+    /**
+     * Nodes of the `ContextMenuItem` component — one, or an array.
+     *
+     * DEFECT FIXED, NOT TRANSCRIBED. The propTypes said
+     * `children: PropTypes.arrayOf(PropTypes.node)`, and the codemod faithfully rendered
+     * that as `React.ReactNode[]` — which REJECTS A SINGLE JSX CHILD, because React does not
+     * wrap one child in an array:
+     *
+     *     <ContextMenuItemsGroup><ContextMenuItem title="Edit" /></ContextMenuItemsGroup>
+     *
+     * gives `children` as one element. On React 16 this was a dev-time propTypes warning
+     * only, which is how it survived — the React 16 gate is what surfaced it. Under the
+     * generated closed type it became a hard COMPILE error at every such call site, in the
+     * consumer as well as here, so faithfully reproducing the propTypes would have shipped a
+     * type that forbids the component's most obvious usage.
+     *
+     * `React.ReactNode` is the accurate type and it still admits the array form, since
+     * `ReactNode` includes `Iterable<ReactNode>`. The component only forwards `children` to
+     * `S.ContextMenuItemsGroup`, so nothing here depends on it being an array. Zero runtime
+     * change: the propTypes this replaces were already deleted by the codemod.
+     */
+    children?: React.ReactNode;
+};
+/**
+ * Simple wrapper for a group of context menu items. These will be displayed without a border between each item.
+ *
+ * See the documentation for `ContextMenu` for an example.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { ContextMenuItemsGroup } from '@ntbjs/react-components/widgets/ContextMenu'
+ * // or
+ * import ContextMenuItemsGroup from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItemsGroup'
+ * ```
+ *
+ */
+declare const ContextMenuItemsGroup: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>, "ref">, "children"> & ContextMenuItemsGroupOwnProps & React.RefAttributes<any>>;
+export default ContextMenuItemsGroup;

package/types/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.d.ts

@@ -0,0 +1 @@
+export declare const ContextMenuItemsGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;

package/types/components/widgets/ContextMenu/ContextMenuItemsGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ContextMenuItemsGroup';

package/types/components/widgets/ContextMenu/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ContextMenu';

package/types/components/widgets/InfoCard/InfoCard.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import * as S from './InfoCard.styled';
+type InfoCardOwnProps = {
+    icon: React.ReactElement<any>;
+    total: number;
+    label: string;
+    linkLabel?: string;
+    onClick?: (...args: any[]) => any;
+    height?: number;
+};
+/**
+ * Info Card
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { InfoCard } from '@ntbjs/react-components/widgets'
+ * // or
+ * import InfoCard from '@ntbjs/react-components/widgets/InfoCard'
+ * ```
+ *
+ * ### Props
+ * ```
+ * Pass `icon={<svg></svg>}` to display an icon.
+ * Pass `total={100}` to display number.
+ * Pass `label={"this is a label"}` to display a label.
+ * Pass `linkLabel={"this is a label"}` to display a link next to the arrow icon.
+ * Pass `height={50}` to adjust the card´s height.
+ * Pass `onClick={function}` to handle click event.
+ * ```
+ */
+declare const InfoCard: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, S.InfoCardContainerStyleProps>, never>, "ref">, keyof InfoCardOwnProps> & InfoCardOwnProps & React.RefAttributes<any>>;
+export default InfoCard;

package/types/components/widgets/InfoCard/InfoCard.styled.d.ts

@@ -0,0 +1,45 @@
+/**
+ * `height` — `PropTypes.number`, px, interpolated as `${props.height}px` with a `50px`
+ * fallback. `number` and not `number | string`: a string here would already render
+ * `height: 60pxpx`.
+ *
+ * NO `$`, AND THAT IS A DEFECT THAT IS ALREADY IN THE RENDER BASELINE. `height` is not a
+ * member of `HTMLAttributes<HTMLDivElement>` (which is why the read needs this
+ * declaration at all) but React DOES recognise it and renders it, so `widgets/InfoCard`
+ * in `scripts/r19-harness/baseline.json` opens with `<div height="60" class="…">`.
+ * Renaming it `$height` removes that attribute and therefore MOVES the baseline — C10
+ * work, §E.4.
+ */
+export interface InfoCardContainerStyleProps {
+    height?: number;
+}
+/**
+ * `$isHovered` — the `Link`'s hover state, held in `InfoCard.tsx`'s `useState`, so
+ * genuinely `boolean` and not derived from any prop.
+ *
+ * NOT COVERABLE BY THE RENDER GATE, and the fixture says so: it comes from `useState`, so
+ * it is `false` in every static render whatever props are passed. Both of its hosts
+ * therefore have rule blocks the baseline can never exercise — which is exactly why the
+ * type matters here more than it would on a prop a fixture pins.
+ *
+ * Hosts: `ButtonLink` and `StyledArrowIcon`.
+ */
+interface InfoCardHoverStyleProps {
+    $isHovered?: boolean;
+}
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, InfoCardContainerStyleProps>, never>> & string;
+export declare const MetricsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const IconTotalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const Total: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const ButtonLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, InfoCardHoverStyleProps>, never>> & string;
+export declare const StyledArrowIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement> & {
+    title?: string;
+}, import("react").SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, InfoCardHoverStyleProps>, never>> & string & Omit<import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, keyof import("react").Component<any, {}, any>>;
+export {};

package/types/components/widgets/InfoCard/index.d.ts

@@ -0,0 +1 @@
+export { default } from './InfoCard';

package/types/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import * as S from './InstructionSeverityDisplay.styled';
+type InstructionSeverityDisplayOwnProps = {
+    /** Severity level (1-5). 1=Info, 3=Limited use, 5=Highly restricted. */
+    severity?: 1 | 2 | 3 | 4 | 5;
+    /** The instruction text to display. Component returns null if empty. */
+    instructionText?: string;
+    /** Override the default badge label for the severity level. */
+    severityLabel?: string;
+    /** Map of severity level to translated label string, e.g. { 1: 'Info', 3: 'Begrenset bruk', 5: 'Svært begrenset' }. */
+    labels?: {
+        [key: string]: string;
+    };
+    /** Override the default icon element. */
+    icon?: React.ReactElement<any>;
+    /** Whether to show card styling (border-radius, shadow, border). Defaults to true. */
+    showCard?: boolean;
+    /** Custom card padding, e.g. "8px 6px" or "20px". Defaults to "14px 10px". */
+    padding?: string;
+    /** Custom font size for the badge text, e.g. "10px" or "0.75rem". Defaults to "12px". */
+    badgeFontSize?: string;
+    /** Custom font size for the details/instruction text, e.g. "12px" or "0.875rem". Defaults to "14px". */
+    detailsFontSize?: string;
+    /** Override card background color in light mode, e.g. "#ffffff" or "transparent". */
+    bgLight?: string;
+    /** Override card background color in dark mode, e.g. "#1a1a1a" or "transparent". */
+    bgDark?: string;
+    /** Max number of lines for instruction text before clamping with ellipsis. */
+    maxLines?: number;
+    /** URL of a thumbnail image to display on the left side of the card. Pass null to show a placeholder. Omit to show no thumbnail. */
+    thumbnail?: string;
+};
+/**
+ * InstructionSeverityDisplay communicates the usage restrictions or
+ * severity levels associated with a specific instruction or asset.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { InstructionSeverityDisplay } from '@ntbjs/react-components/widgets'
+ * // or
+ * import InstructionSeverityDisplay from '@ntbjs/react-components/widgets/InstructionSeverityDisplay'
+ * ```
+ */
+declare const InstructionSeverityDisplay: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, S.CardStyleProps>, never>, "ref">, keyof InstructionSeverityDisplayOwnProps> & InstructionSeverityDisplayOwnProps & React.RefAttributes<any>>;
+export default InstructionSeverityDisplay;

package/types/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Card's props, i.e. what `InstructionSeverityDisplay.tsx` passes to `S.Card`.
+ * Value types from that file's propTypes; all optional per §J.5.
+ */
+export interface CardStyleProps {
+    /** `severity` — `PropTypes.oneOf([1, 2, 3, 4, 5])`. Closed on purpose: the template
+     *  compares `=== 5`, and a comparison against a value outside the union is TS2367
+     *  rather than a branch that never fires. */
+    $severity?: 1 | 2 | 3 | 4 | 5;
+    /** `showCard` — component defaults it to `true`, but see §J.5: a default in the
+     *  COMPONENT is not a default here, so this stays optional. */
+    $showCard?: boolean;
+    /** `padding` — a whole CSS padding shorthand, e.g. `'8px 6px'`. `string`, not
+     *  `number`: the template uses it raw (`padding: ${props.$padding}`) with a
+     *  `'14px 10px'` fallback, so a number would emit a unitless `padding: 8`. */
+    $padding?: string;
+    /** `bgLight` — CSS colour applied under `body.light-theme`. */
+    $bgLight?: string;
+    /** `bgDark` — CSS colour applied under `body.dark-theme`. */
+    $bgDark?: string;
+    /** Derived in the component as `thumbnail !== undefined`, so genuinely `boolean`
+     *  and not the `string` the `thumbnail` prop is. */
+    $hasThumbnail?: boolean;
+}
+/** InstructionText's props. */
+interface InstructionTextStyleProps {
+    /** `detailsFontSize` — a font-size with its unit, e.g. `'12px'`, `'0.875rem'`.
+     *  `string` for the same reason as `$padding`: it is interpolated raw. */
+    $fontSize?: string;
+    /** `maxLines` — `PropTypes.number`, the `-webkit-line-clamp` count. Read only
+     *  behind `props.$maxLines &&`, which is what keeps it valid when
+     *  `strictNullChecks` is eventually turned on. */
+    $maxLines?: number;
+}
+export declare const Card: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, CardStyleProps>, never>> & string;
+export declare const ThumbnailWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const ThumbnailImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InstructionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, InstructionTextStyleProps>, never>> & string;
+export {};

package/types/components/widgets/InstructionSeverityDisplay/index.d.ts

@@ -0,0 +1 @@
+export { default } from './InstructionSeverityDisplay';

package/types/components/widgets/Instructions/Instructions.d.ts

@@ -0,0 +1,156 @@
+import React from 'react';
+type InstructionsOwnProps = {
+    /**
+     * Name of the text area (used when sending form data)
+     */
+    name?: string;
+    /**
+     * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. "Search categories..."
+     */
+    placeholder?: string;
+    /**
+     * How many rows/lines of text to be displayed by default
+     */
+    rows?: number | string;
+    /**
+     * Selected option
+     */
+    selectedOption?: any;
+    /**
+     * Function with a `Promise` returning filtered options.
+     *
+     * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)
+     * for details.
+     *
+     * **Note:**
+     * <br />This will override the `availableOptions` prop if both props are set.
+     */
+    loadOptions?: (...args: any[]) => any;
+    /**
+     * Function for custom "Loading..." message while waiting for the first page
+     * from `loadOptions` to resolve. Defaults to "Loading..." if no function is provided.
+     */
+    loadingMessageFunc?: (...args: any[]) => any;
+    /**
+      /**
+        * Whether the components displays an initial custom message.
+        */
+    clickToAdd?: boolean;
+    /**
+     * Add initial custom message. i.e: `No instructions (click to add)`.
+     */
+    customAddMessage?: string;
+    /**
+     * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode
+     */
+    autoSelect?: boolean;
+    /**
+     * Whether the instruction is read only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the intruction is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component is hidden or visible.
+     */
+    hidden?: boolean;
+    /**
+     * `Array` of `objects` that populate the select menu. This is only needed
+     * when asynchronous option fetching with the `loadOptions` prop is not used.
+     *
+     * **Note:**
+     * <br />This will be overridden by the `loadOptions` prop if both props are set.
+     */
+    availableOptions?: any[];
+    /**
+     * `LightBackground color
+     */
+    lightBackground?: boolean;
+    /**
+     * Displays a light-yellow background to show that instruction value is editable
+     */
+    edit?: boolean;
+    /**
+     * Function with a `Promise` returning filtered options.
+     *
+     * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)
+     * for details.
+     *
+     * **Note:**
+     * <br /> `options`should be passed as an `array`of `objects`
+     * <br />This will override the `availableOptions` prop if both props are set.
+     */
+    options?: any[];
+    /**
+     * Callback for `onChange`
+     */
+    subscribeCurrentValue?: (...args: any[]) => any;
+    /**
+     * Callback for `onChange`
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * Callback for `onFocus`
+     */
+    onFocus?: (...args: any[]) => any;
+    /**
+     * Callback for `onBlur`
+     */
+    onBlur?: (...args: any[]) => any;
+    /**
+     * Callback for `onUpdateCallback`: register to AutocompleteSelect label and value
+     */
+    onUpdateCallback?: (...args: any[]) => any;
+    /**
+     * Define the type based on error,error-border , warning, loading and success.
+     */
+    type?: '' | 'error' | 'error-border' | 'warning' | 'instructions-warning' | 'loading' | 'success';
+    /**
+     * Define the type AutoCompleteSelect based on error,error-border , warning, loading and success.
+     */
+    selectType?: '' | 'error' | 'warning' | 'instructions-warning' | 'loading' | 'success';
+    isExpanded?: (...args: any[]) => any;
+    /**
+     * Icon element – E.g: `icon={<Spinner />}`
+     */
+    loadingIcon?: React.ReactElement<any>;
+    /**
+     * Icon element – E.g: `icon={<Check />}`
+     */
+    successIcon?: React.ReactElement<any>;
+    /**
+     * Add padding (small-medium-large)
+     */
+    padding?: '' | 'small' | 'medium' | 'large';
+};
+/**
+ * Instructions that let you display Terms & Conditions
+ *
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Instructions } from '@ntbjs/react-components/widgets/Instructions'
+ * // or
+ * import Instructions from '@ntbjs/react-components/widgets/Instructions'
+ * ```
+ *
+ * ### AutocompleteSelect
+ * `AutocompleteSelect` is integrated within Instructions in order to implement the Drop-down Menu (check out the `Autocomplete` component documentation).
+ *
+ *
+ *  <br /> ## Options `object` format
+ * Options are represented by an `Array` of `objects` with the following format:
+ *
+ * ``` js
+ * {
+ *   value: "Example",
+ *   label: "Example"
+ * }
+ * ```
+ *
+ */
+declare const Instructions: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>, "ref">, keyof InstructionsOwnProps> & InstructionsOwnProps & React.RefAttributes<any>>;
+export default Instructions;

package/types/components/widgets/Instructions/Instructions.styled.d.ts

@@ -0,0 +1,26 @@
+/**
+ * `TopBarContainer`, the only component in this file that reads a prop.
+ */
+interface InstructionsTopBarStyleProps {
+    /**
+     * `initialHover` — `Instructions.tsx`'s `useState(true)`, so genuinely `boolean` and not
+     * derived from any prop. Transient, so it never reaches the DOM.
+     *
+     * READ, PASSED, AND NEVERTHELESS INERT — recorded, not fixed. The rule it guards is
+     * `themeProp('background', '#634E01', getColor('signal-yellow-400'))`, character for
+     * character the same declaration as the UNCONDITIONAL one three lines above it. So
+     * whichever way `$initialHover` goes, the emitted background is identical and the
+     * conditional only ever adds a duplicate of the rule that precedes it.
+     *
+     * Deleting it is the fix, and it is not a type-only change: removing the block removes a
+     * duplicate declaration from the generated CSS and therefore moves the render baseline
+     * (§J.8). Whether the intent was a DIFFERENT hover colour is a question for whoever owns
+     * the design, not for this commit.
+     */
+    $initialHover?: boolean;
+}
+export declare const Instructions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const TopBarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, InstructionsTopBarStyleProps>, never>> & string;
+export declare const SelectContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const InstructionsArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export {};

package/types/components/widgets/Instructions/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Instructions';