@opentrons/components 0.1.6-alpha.6 → 0.1.6-alpha.8

package/lib/styles/borders.d.ts

@@ -0,0 +1,8 @@
+export declare const BORDER_WIDTH_DEFAULT = "1px";
+export declare const BORDER_RADIUS_DEFAULT = "2px";
+export declare const BORDER_RADIUS_1 = "5px";
+export declare const BORDER_STYLE_NONE = "none";
+export declare const BORDER_STYLE_SOLID = "solid";
+export declare const BORDER_SOLID_LIGHT = "1px solid #e6e6e6";
+export declare const BORDER_SOLID_MEDIUM = "1px solid #9b9b9b";
+export declare const SHADOW_LIGHT = "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2)";

package/lib/styles/colors.d.ts

@@ -0,0 +1,37 @@
+export declare const C_BLACK = "#000000";
+export declare const C_DARK_GRAY = "#4a4a4a";
+export declare const C_MED_DARK_GRAY = "#6c6c6c";
+export declare const C_MED_GRAY = "#9b9b9b";
+export declare const C_SILVER_GRAY = "#e3e3e3";
+export declare const C_MED_LIGHT_GRAY = "#d2d2d2";
+export declare const C_LIGHT_GRAY = "#e6e6e6";
+export declare const C_BRIGHT_GRAY = "#f8f8f8";
+export declare const C_HARBOR_GRAY = "#8a8c8e";
+export declare const C_NEAR_WHITE = "#fafafa";
+export declare const C_WHITE = "#ffffff";
+export declare const C_TRANSPARENT = "transparent";
+export declare const C_DARK_BLACK = "#16212d";
+export declare const C_BLUE = "#006cfa";
+export declare const C_MINT = "#00bfa8";
+export declare const C_AQUAMARINE = "#eefff8";
+export declare const C_POWDER_BLUE = "#f1f8ff";
+export declare const C_SKY_BLUE = "#accfff80";
+export declare const C_BLUE_PRESSED = "#0050b8";
+export declare const COLOR_WARNING = "#e28200";
+export declare const COLOR_WARNING_LIGHT = "#ffd58f";
+export declare const COLOR_WARNING_DARK = "#9e5e00";
+export declare const COLOR_ERROR = "#d12929";
+export declare const COLOR_SUCCESS = "#60b120";
+export declare const C_DISABLED = "#9c9c9c";
+export declare const C_SELECTED_DARK = "#00c3e6";
+export declare const C_BG_SELECTED = "#f0f3ff";
+export declare const C_ERROR_DARK = "#ac0505";
+export declare const C_ERROR_LIGHT = "#ffc0c0";
+export declare const OVERLAY_WHITE_10 = "rgba(255, 255, 255, 0.1)";
+export declare const OVERLAY_WHITE_20 = "rgba(255, 255, 255, 0.2)";
+export declare const OVERLAY_LIGHT_GRAY_50 = "rgba(230, 230, 230, 0.4)";
+export declare const OVERLAY_GRAY_90 = "rgba(127, 127, 127, 0.9)";
+export declare const OVERLAY_BLACK_90 = "rgba(0, 0, 0, 0.9)";
+export declare const OVERLAY_BLACK_80 = "rgba(0, 0, 0, 0.8)";
+export declare const OPACITY_DISABLED = 0.3;
+export declare const C_FONT_DISABLED = "#9c9c9c";

package/lib/styles/cursor.d.ts

@@ -0,0 +1,10 @@
+export declare const CURSOR_AUTO = "auto";
+export declare const CURSOR_CROSSHAIR = "crosshair";
+export declare const CURSOR_DEFAULT = "default";
+export declare const CURSOR_GRAB = "grab";
+export declare const CURSOR_GRABBING = "grabbing";
+export declare const CURSOR_HELP = "help";
+export declare const CURSOR_NOT_ALLOWED = "not-allowed";
+export declare const CURSOR_POINTER = "pointer";
+export declare const CURSOR_ZOOM_IN = "zoom-in";
+export declare const CURSOR_WAIT = "wait";

package/lib/styles/flexbox.d.ts

@@ -0,0 +1,34 @@
+export declare const FLEX_NONE = "none";
+export declare const FLEX_AUTO = "auto";
+export declare const FLEX_MIN_CONTENT = "min-content";
+export declare const FLEX_MAX_CONTENT = "max-content";
+export declare const ALIGN_NORMAL = "normal";
+export declare const ALIGN_START = "start";
+export declare const ALIGN_END = "end";
+export declare const ALIGN_FLEX_START = "flex-start";
+export declare const ALIGN_FLEX_END = "flex-end";
+export declare const ALIGN_CENTER = "center";
+export declare const ALIGN_BASELINE = "baseline";
+export declare const ALIGN_STRETCH = "stretch";
+export declare const JUSTIFY_NORMAL = "normal";
+export declare const JUSTIFY_START = "start";
+export declare const JUSTIFY_END = "end";
+export declare const JUSTIFY_FLEX_START = "flex-start";
+export declare const JUSTIFY_FLEX_END = "flex-end";
+export declare const JUSTIFY_CENTER = "center";
+export declare const JUSTIFY_SPACE_BETWEEN = "space-between";
+export declare const JUSTIFY_SPACE_AROUND = "space-around";
+export declare const JUSTIFY_SPACE_EVENLY = "space-evenly";
+export declare const JUSTIFY_STRETCH = "stretch";
+export declare const DIRECTION_ROW = "row";
+export declare const DIRECTION_ROW_REVERSE = "row-reverse";
+export declare const DIRECTION_COLUMN = "column";
+export declare const DIRECTION_COLUMN_REVERSE = "column-reverse";
+export declare const WRAP = "wrap";
+export declare const NO_WRAP = "nowrap";
+export declare const WRAP_REVERSE = "wrap-reverse";
+export declare const WHITE_SPACE_NORMAL = "normal";
+export declare const WHITE_SPACE_PRE = "pre";
+export declare const WHITE_SPACE_PRE_WRAP = "pre-wrap";
+export declare const WHITE_SPACE_PRE_LINE = "pre-line";
+export declare const WHITE_SPACE_BREAK_SPACES = "break-spaces";

package/lib/styles/index.d.ts

@@ -0,0 +1,8 @@
+export * from './borders';
+export * from './colors';
+export * from './cursor';
+export * from './flexbox';
+export * from './layout';
+export * from './position';
+export * from './spacing';
+export * from './typography';

package/lib/styles/layout.d.ts

@@ -0,0 +1,24 @@
+export declare const DISPLAY_NONE = "none";
+export declare const DISPLAY_INLINE = "inline";
+export declare const DISPLAY_BLOCK = "block";
+export declare const DISPLAY_INLINE_BLOCK = "inline-block";
+export declare const DISPLAY_FLEX = "flex";
+export declare const DISPLAY_TABLE = "table";
+export declare const DISPLAY_TABLE_ROW = "table-row";
+export declare const DISPLAY_TABLE_CELL = "table-cell";
+export declare const DISPLAY_GRID = "grid";
+export declare const SIZE_AUTO = "auto";
+export declare const SIZE_1 = "1rem";
+export declare const SIZE_2 = "2rem";
+export declare const SIZE_3 = "4rem";
+export declare const SIZE_4 = "8rem";
+export declare const SIZE_5 = "16rem";
+export declare const SIZE_6 = "32rem";
+export declare const OVERFLOW_VISIBLE = "visible";
+export declare const OVERFLOW_HIDDEN = "hidden";
+export declare const OVERFLOW_CLIP = "clip";
+export declare const OVERFLOW_SCROLL = "scroll";
+export declare const OVERFLOW_AUTO = "auto";
+export declare const OVERFLOW_WRAP_ANYWHERE = "anywhere";
+export declare const OVERFLOW_WRAP_BREAK_WORD = "break-word";
+export declare const OVERFLOW_WRAP_NORMAL = "normal";

package/lib/styles/position.d.ts

@@ -0,0 +1,5 @@
+export declare const POSITION_STATIC: 'static';
+export declare const POSITION_RELATIVE: 'relative';
+export declare const POSITION_ABSOLUTE: 'absolute';
+export declare const POSITION_FIXED: 'fixed';
+export declare const POSITION_STICKY: 'sticky';

package/lib/styles/spacing.d.ts

@@ -0,0 +1,9 @@
+export declare const SPACING_AUTO = "auto";
+export declare const SPACING_1 = "0.25rem";
+export declare const SPACING_2 = "0.5rem";
+export declare const SPACING_3 = "1rem";
+export declare const SPACING_4 = "2rem";
+export declare const SPACING_5 = "4rem";
+export declare const SPACING_6 = "8rem";
+export declare const SPACING_7 = "16rem";
+export declare const SPACING_8 = "32rem";

package/lib/styles/typography.d.ts

@@ -0,0 +1,36 @@
+import type { FlattenSimpleInterpolation } from 'styled-components';
+export declare const FONT_SIZE_HUGE = "3rem";
+export declare const FONT_SIZE_BIG = "1.5rem";
+export declare const FONT_SIZE_HEADER = "1.125rem";
+export declare const FONT_SIZE_DEFAULT = "1rem";
+export declare const FONT_SIZE_BODY_2 = "0.875rem";
+export declare const FONT_SIZE_BODY_1 = "0.75rem";
+export declare const FONT_SIZE_CAPTION = "0.625rem";
+export declare const FONT_SIZE_TINY = "0.325rem";
+export declare const FONT_SIZE_MICRO = "0.2rem";
+export declare const FONT_SIZE_INHERIT = "inherit";
+export declare const LINE_HEIGHT_SOLID = 1;
+export declare const LINE_HEIGHT_TITLE = 1.25;
+export declare const LINE_HEIGHT_COPY = 1.5;
+export declare const FONT_WEIGHT_LIGHT = 300;
+export declare const FONT_WEIGHT_REGULAR = 400;
+export declare const FONT_WEIGHT_SEMIBOLD = 600;
+export declare const FONT_WEIGHT_BOLD = 800;
+export declare const FONT_STYLE_NORMAL = "normal";
+export declare const FONT_STYLE_ITALIC = "italic";
+export declare const TEXT_ALIGN_LEFT = "left";
+export declare const TEXT_ALIGN_CENTER = "center";
+export declare const TEXT_ALIGN_RIGHT = "right";
+export declare const TEXT_ALIGN_JUSTIFY = "justify";
+export declare const TEXT_TRANSFORM_NONE = "none";
+export declare const TEXT_TRANSFORM_CAPITALIZE = "capitalize";
+export declare const TEXT_TRANSFORM_UPPERCASE = "uppercase";
+export declare const TEXT_TRANSFORM_LOWERCASE = "lowercase";
+export declare const TEXT_DECORATION_UNDERLINE = "underline";
+export declare const FONT_HEADER_DARK: FlattenSimpleInterpolation;
+export declare const FONT_HEADER_THIN: FlattenSimpleInterpolation;
+export declare const FONT_BODY_1_DARK: FlattenSimpleInterpolation;
+export declare const FONT_BODY_1_LIGHT: FlattenSimpleInterpolation;
+export declare const FONT_BODY_2_DARK: FlattenSimpleInterpolation;
+export declare const FONT_BODY_1_DARK_SEMIBOLD: FlattenSimpleInterpolation;
+export declare const FONT_HUGE_DARK_SEMIBOLD: FlattenSimpleInterpolation;

package/lib/testing/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './renderWithProviders';
+export * from './matchers';

package/lib/testing/utils/matchers.d.ts

@@ -0,0 +1,3 @@
+import type { Matcher } from '@testing-library/react';
+export declare const partialComponentPropsMatcher: (argsToMatch: unknown) => any;
+export declare const nestedTextMatcher: (textMatch: string | RegExp) => Matcher;

package/lib/testing/utils/renderWithProviders.d.ts

@@ -0,0 +1,9 @@
+import type * as React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import type { RenderResult, RenderOptions } from '@testing-library/react';
+import type { Store } from 'redux';
+export interface RenderWithProvidersOptions<State> extends RenderOptions {
+    initialState?: State;
+    i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n'];
+}
+export declare function renderWithProviders<State>(Component: React.ReactElement, options?: RenderWithProvidersOptions<State>): [RenderResult, Store<State>];

package/lib/tooltips/DeprecatedTooltip.d.ts

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+import { Popper } from 'react-popper';
+type PopperProps = React.ComponentProps<typeof Popper>;
+export interface DeprecatedTooltipProps {
+    /** show or hide the tooltip */
+    open?: boolean;
+    /** contents of the tooltip */
+    tooltipComponent: React.ReactNode;
+    /** optional portal to place the tooltipComponent inside */
+    portal?: React.ComponentType<any>;
+    /** <https://github.com/FezVrasta/react-popper#placement> */
+    placement?: PopperProps['placement'];
+    /** <https://github.com/FezVrasta/react-popper#positionfixed> */
+    positionFixed?: PopperProps['positionFixed'];
+    /** <https://github.com/FezVrasta/react-popper#modifiers> */
+    modifiers?: PopperProps['modifiers'];
+    /** render function for tooltip'd component */
+    children: (props?: React.PropsWithRef<any>) => JSX.Element | null;
+    /** extra props to pass to the children render function */
+    childProps?: React.PropsWithRef<any>;
+}
+/**
+ *  Basic, fully controlled Tooltip component.
+ *
+ * `props.children` is a function that receives the following props object:
+ * ```js
+ * type TooltipChildProps = {
+ *   ref: React.Ref<*>,
+ * }
+ * ```
+ *
+ * `props.childProps` can be used to add extra fields to the child props object
+ *
+ * @deprecated Use `Tooltip` and `useTooltip` instead
+ */
+export declare function DeprecatedTooltip(props: DeprecatedTooltipProps): JSX.Element | null;
+export {};

package/lib/tooltips/HoverTooltip.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { DeprecatedTooltipProps } from './DeprecatedTooltip';
+interface MouseHandlers {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}
+export type HoverTooltipHandlers = React.PropsWithRef<MouseHandlers>;
+export type HoverTooltipProps = DeprecatedTooltipProps;
+interface HoverTooltipState {
+    isOpen: boolean;
+}
+/**
+ * Tooltip component that triggers on `MouseEnter` and `MouseLeave`. See
+ * `Tooltip` for full props list.
+ *
+ * `props.children` is a function that receives the following props object:
+ * ```js
+ * type HoverTooltipHandlers = {
+ *   ref: React.Ref<*>,
+ *   onMouseEnter: (React.MouseEvent) => void,
+ *   onMouseLeave: (React.MouseEvent) => void,
+ * }
+ * ```
+ *
+ * @deprecated Use `Tooltip` and `useHoverTooltip` instead
+ */
+export declare class HoverTooltip extends React.Component<HoverTooltipProps, HoverTooltipState> {
+    openTimeout: number | null;
+    closeTimeout: number | null;
+    constructor(props: HoverTooltipProps);
+    componentWillUnmount(): void;
+    delayedOpen: () => void;
+    delayedClose: () => void;
+    render(): JSX.Element;
+}
+export {};

package/lib/tooltips/LegacyTooltip.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { CSSProperties } from 'react';
+import type { Placement } from './types';
+import type { StyleProps } from '../primitives';
+export interface LegacyTooltipProps extends StyleProps {
+    /** Whether or not the tooltip should be rendered */
+    visible: boolean;
+    /** Contents of the tooltip */
+    children?: React.ReactNode;
+    /**
+     * Tooltip element ID (provided by useTooltip). Will match
+     * targetProps.aria-describedby
+     */
+    id: string;
+    /** Actual tooltip placement, if known (provided by useTooltip) */
+    placement: Placement | null;
+    /** Inline styles to apply to the tooltip element (provided by useTooltip) */
+    style: CSSProperties;
+    /** React function ref for tooltip's arrow element (provided by useTooltip) */
+    arrowRef: React.RefCallback<HTMLElement | null>;
+    /** Inline styles to apply to arrow element (provided by useTooltip) */
+    arrowStyle: CSSProperties;
+}
+/**
+ * Tooltip component that renders based on its `visible` prop. For use with the
+ * `useTooltip` and `useHoverTooltip` hooks. See examples in `Tooltip.md`.
+ */
+export declare const LegacyTooltip: React.ForwardRefExoticComponent<LegacyTooltipProps & React.RefAttributes<HTMLDivElement>>;
+export interface ArrowProps {
+    placement: Placement | null;
+    arrowRef: React.RefCallback<HTMLElement>;
+    arrowStyle: CSSProperties;
+    backgroundColor: string;
+}
+export declare function Arrow(props: ArrowProps): JSX.Element;

package/lib/tooltips/__tests__/Tooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tooltips/__tests__/useHoverTooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tooltips/__tests__/usePopper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tooltips/__tests__/useTooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tooltips/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const TOOLTIP_AUTO: 'auto';
+export declare const TOOLTIP_AUTO_START: 'auto-start';
+export declare const TOOLTIP_AUTO_END: 'auto-end';
+export declare const TOOLTIP_TOP: 'top';
+export declare const TOOLTIP_TOP_START: 'top-start';
+export declare const TOOLTIP_TOP_END: 'top-end';
+export declare const TOOLTIP_RIGHT: 'right';
+export declare const TOOLTIP_RIGHT_START: 'right-start';
+export declare const TOOLTIP_RIGHT_END: 'right-end';
+export declare const TOOLTIP_BOTTOM: 'bottom';
+export declare const TOOLTIP_BOTTOM_START: 'bottom-start';
+export declare const TOOLTIP_BOTTOM_END: 'bottom-end';
+export declare const TOOLTIP_LEFT: 'left';
+export declare const TOOLTIP_LEFT_START: 'left-start';
+export declare const TOOLTIP_LEFT_END: 'left-end';
+export declare const TOOLTIP_ABSOLUTE: 'absolute';
+export declare const TOOLTIP_FIXED: 'fixed';

package/lib/tooltips/index.d.ts

@@ -0,0 +1,8 @@
+export * from './DeprecatedTooltip';
+export * from './HoverTooltip';
+export * from './LegacyTooltip';
+export * from './useTooltip';
+export * from './useHoverTooltip';
+export * from './usePopper';
+export * from './constants';
+export * from './types';

package/lib/tooltips/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const INITIAL_TOOLTIP_STYLE: {
+    readonly position: "absolute";
+    readonly left: "0";
+    readonly top: "0";
+    readonly margin: "0";
+};
+export declare const INITIAL_ARROW_STYLE: {
+    readonly position: "absolute";
+};
+export declare const TOOLTIP_OFFSET_PX = 8;
+export declare const ARROW_OFFSET_PX = 4;
+export declare const ARROW_SIZE_PX: number;

package/lib/tooltips/types.d.ts

@@ -0,0 +1,52 @@
+import type { CSSProperties } from 'react';
+import type { Instance, Options, Modifier } from '@popperjs/core/lib/types';
+import type { UseHoverOptions, HoverHandlers } from '../interaction-enhancers';
+export type Placement = Options['placement'];
+export type Strategy = Options['strategy'];
+export type PopperInstance = Instance;
+export type PopperOptions = Options;
+export type PopperModifer<T> = Modifier<T>;
+export type HandleStateUpdate = (placement: Placement, styles: {
+    popper?: CSSProperties;
+    arrow?: CSSProperties;
+}) => void;
+export interface UsePopperOptions {
+    target: Element | null;
+    tooltip: HTMLElement | null;
+    arrow: HTMLElement | null;
+    onStateUpdate: HandleStateUpdate;
+    placement?: Placement | null;
+    strategy?: Strategy | null;
+    offset?: number;
+}
+export type UsePopperResult = Instance | null;
+export interface UseTooltipOptions {
+    placement?: Placement;
+    strategy?: Strategy;
+    offset?: number;
+}
+export interface UseTooltipResultTargetProps {
+    ref: React.RefCallback<Element | null>;
+    'aria-describedby': string;
+}
+export interface UseTooltipResultTooltipProps {
+    id: string;
+    ref: React.RefCallback<HTMLElement | null>;
+    placement: Placement | null;
+    style: CSSProperties;
+    arrowRef: React.RefCallback<HTMLElement | null>;
+    arrowStyle: CSSProperties;
+}
+export type UseTooltipResult = [
+    UseTooltipResultTargetProps,
+    UseTooltipResultTooltipProps
+];
+export type UseHoverTooltipOptions = Partial<UseTooltipOptions & UseHoverOptions>;
+export interface UseHoverTooltipTargetProps extends UseTooltipResultTargetProps, HoverHandlers {
+}
+export type UseHoverTooltipResult = [
+    UseHoverTooltipTargetProps,
+    UseTooltipResultTooltipProps & {
+        visible: boolean;
+    }
+];

package/lib/tooltips/useHoverTooltip.d.ts

@@ -0,0 +1,24 @@
+import type { UseHoverTooltipOptions, UseHoverTooltipResult } from './types';
+/**
+ * Hook to position a tooltip component relative to a target component on hover.
+ * Adds a default `enterDelay` of 300 ms before the tooltip will show
+ *
+ * @param {UseHoverTooltipOptions} [options={}] (change default options (see `useTooltip` and `useHover`))
+ * @returns {UseHoverTooltipResult}
+ * @example
+ * ```js
+ * import { useHoverTooltip, Tooltip } from '@opentrons/components'
+ *
+ * export function HelloWorld() {
+ *   const [targetProps, tooltipProps] = useHoverTooltip()
+ *
+ *   return (
+ *     <>
+ *       <span {...targetProps}>Hello</span>
+ *       <Tooltip {...tooltipProps}>World</Tooltip>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export declare function useHoverTooltip(options?: UseHoverTooltipOptions): UseHoverTooltipResult;

package/lib/tooltips/usePopper.d.ts

@@ -0,0 +1,2 @@
+import type { UsePopperOptions, UsePopperResult } from './types';
+export declare function usePopper(options: UsePopperOptions): UsePopperResult;

package/lib/tooltips/useTooltip.d.ts

@@ -0,0 +1,31 @@
+import type { UseTooltipOptions, UseTooltipResult } from './types';
+/**
+ * Hook to position a tooltip component relative to a target component
+ *
+ * @param {UseTooltipOptions} [options={}] (change the default `position`, `strategy`, or `offset` of the tooltip)
+ * @returns {UseTooltipResult}
+ * @example
+ * ```js
+ * import {
+ *   useTooltip,
+ *   Tooltip,
+ *   TOOLTIP_TOP,
+ *   TOOLTIP_FIXED
+ * } from '@opentrons/components'
+ *
+ * export function HelloWorld() {
+ *   const [targetProps, tooltipProps] = useTooltip({
+ *     position: TOOLTIP_TOP,
+ *     strategy: TOOLTIP_FIXED
+ *   })
+ *
+ *   return (
+ *     <>
+ *       <span {...targetProps}>Hello</span>
+ *       <Tooltip visible={true} {...tooltipProps}>World</Tooltip>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export declare function useTooltip(options?: UseTooltipOptions): UseTooltipResult;

package/lib/ui-style-constants/index.d.ts

@@ -0,0 +1,4 @@
+export * as RESPONSIVENESS from './responsiveness';
+export * as SPACING from './spacing';
+export * as TYPOGRAPHY from './typography';
+export * as VIEWPORT from './viewport';

package/lib/ui-style-constants/responsiveness.d.ts

@@ -0,0 +1,3 @@
+export declare const touchscreenMediaQuerySpecs = "(height: 600px) and (width: 1024px)";
+export declare const isTouchscreenDynamic: () => boolean;
+export declare const isTouchscreen: boolean;

package/lib/ui-style-constants/spacing.d.ts

@@ -0,0 +1,18 @@
+export declare const spacing2: "0.125rem";
+export declare const spacing4: "0.25rem";
+export declare const spacing6: "0.375rem";
+export declare const spacing8: "0.5rem";
+export declare const spacing10: "0.625rem";
+export declare const spacing12: "0.75rem";
+export declare const spacing16: "1rem";
+export declare const spacing20: "1.25rem";
+export declare const spacing24: "1.5rem";
+export declare const spacing32: "2rem";
+export declare const spacing40: "2.5rem";
+export declare const spacing44: "2.75rem";
+export declare const spacing48: "3rem";
+export declare const spacing60: "3.75rem";
+export declare const spacing68: "4.25rem";
+export declare const spacing80: "5rem";
+export declare const spacing120: "7.5rem";
+export declare const spacingAuto: "auto";

package/lib/ui-style-constants/typography.d.ts

@@ -0,0 +1,71 @@
+export declare const fontSize80 = "5rem";
+export declare const fontSize38 = "2.375rem";
+export declare const fontSize32 = "2rem";
+export declare const fontSize28 = "1.75rem";
+export declare const fontSize22 = "1.375rem";
+export declare const fontSize20 = "1.25rem";
+export declare const fontSizeH1 = "1.188rem";
+export declare const fontSizeH2 = "0.9375rem";
+export declare const fontSizeH3 = "0.875rem";
+export declare const fontSizeH4 = "0.813rem";
+export declare const fontSizeH6 = "0.563rem";
+export declare const fontSizeP = "0.8125rem";
+export declare const fontSizeLabel = "0.6875rem";
+export declare const fontSizeCaption = "0.625rem";
+export declare const fontWeightBold = 700;
+export declare const fontWeightSemiBold = 600;
+export declare const fontWeightRegular = 400;
+export declare const fontWeightLight = 300;
+export declare const lineHeight96 = "6rem";
+export declare const lineHeight48 = "3rem";
+export declare const lineHeight42 = "2.625rem";
+export declare const lineHeight36 = "2.25rem";
+export declare const lineHeight28 = "1.75rem";
+export declare const lineHeight24 = "1.5rem";
+export declare const lineHeight20 = "1.25rem";
+export declare const lineHeight18 = "1.125rem";
+export declare const lineHeight16 = "1rem";
+export declare const lineHeight12 = "0.75rem";
+export declare const lineHeightNormal = "normal";
+export declare const fontStyleNormal = "normal";
+export declare const fontStyleItalic = "italic";
+export declare const textTransformNone = "none";
+export declare const textTransformCapitalize = "capitalize";
+export declare const textTransformUppercase = "uppercase";
+export declare const textTransformLowercase = "lowercase";
+export declare const textAlignLeft = "left";
+export declare const textAlignRight = "right";
+export declare const textAlignCenter = "center";
+export declare const textAlignJustify = "justify";
+export declare const textDecorationUnderline = "underline";
+export declare const h1Default: import("styled-components").FlattenSimpleInterpolation;
+export declare const h2Regular: import("styled-components").FlattenSimpleInterpolation;
+export declare const h2SemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const h3Regular: import("styled-components").FlattenSimpleInterpolation;
+export declare const h3SemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const h6Default: import("styled-components").FlattenSimpleInterpolation;
+export declare const h6SemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const pRegular: import("styled-components").FlattenSimpleInterpolation;
+export declare const pSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const labelRegular: import("styled-components").FlattenSimpleInterpolation;
+export declare const labelSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const linkPSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const level1Header: import("styled-components").FlattenSimpleInterpolation;
+export declare const level2HeaderBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const level2HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const level2HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
+export declare const level3HeaderBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const level3HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const level3HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
+export declare const level4HeaderBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const level4HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const level4HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
+export declare const bodyTextBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const bodyTextSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const bodyTextRegular: import("styled-components").FlattenSimpleInterpolation;
+export declare const smallBodyTextBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const smallBodyTextSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const smallBodyTextRegular: import("styled-components").FlattenSimpleInterpolation;
+export declare const darkLinkH4SemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const darkLinkLabelSemiBold: import("styled-components").FlattenSimpleInterpolation;
+export declare const darkLinkLabelSemiBoldDisabled: import("styled-components").FlattenSimpleInterpolation;

package/lib/ui-style-constants/viewport.d.ts

@@ -0,0 +1,15 @@
+export declare const touchScreenViewport: {
+    viewport: {
+        viewports: {
+            onDeviceDisplay: {
+                name: string;
+                type: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+        defaultViewport: string;
+    };
+};

package/lib/utils.d.ts

@@ -0,0 +1,15 @@
+export declare const humanizeLabwareType: (labwareType: string) => string;
+export declare const wellNameSplit: (wellName: string) => [string, string];
+/**
+ * Truncate a long string to display it
+ * @example
+ * truncateString('Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up, Amplify Tagmlo1234567ted', 88, 66);
+ * Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up...fy Tagmlo1234567ted
+ *
+ * @param {string} text - A string param
+ * @param {number} maxLength - A maximum length of display
+ * @param {number} breakPoint - Optional A point to insert three dots
+ *
+ * @returns {string} Returns the truncated string
+ */
+export declare function truncateString(text: string, maxLength: number, breakPoint?: number): string;