@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.0

package/src/structure/structure.module.css

@@ -3,10 +3,10 @@
 
 .title_bar {
   display: flex;
-  align-items: center;
   height: 3rem;
-  text-transform: uppercase;
+  align-items: center;
   background-color: var(--c-dark-gray);
+  text-transform: uppercase;
 }
 
 .title_bar,
@@ -17,8 +17,8 @@
 .title,
 .subtitle,
 .separator {
-  font-size: var(--fs-header);
   margin: 0;
+  font-size: var(--fs-header);
 }
 
 .title,
@@ -27,11 +27,11 @@
 }
 
 .title {
-  white-space: nowrap; /* from legacy --truncate */
   overflow: hidden; /* from legacy --truncate */
-  text-overflow: ellipsis; /* from legacy --truncate */
   min-width: 0; /* from legacy --truncate */
   padding: 0 1.5rem;
+  text-overflow: ellipsis; /* from legacy --truncate */
+  white-space: nowrap; /* from legacy --truncate */
 }
 
 .subtitle {
@@ -56,10 +56,10 @@
   display: inline-block;
   width: 50%;
   padding: 0.25rem 0;
-  font-size: var(--fs-huge);
-  opacity: 0.2;
   background-color: var(--c-med-gray);
   color: white;
+  font-size: var(--fs-huge);
+  opacity: 0.2;
   text-transform: uppercase;
 }
 
@@ -76,20 +76,20 @@
 }
 
 .disabled {
-  pointer-events: none;
   background-color: transparent;
+  pointer-events: none;
 
   & * {
+    background-color: transparent;
     color: var(--c-font-disabled);
     fill: var(--c-font-disabled);
-    background-color: transparent;
   }
 }
 
 .labeled_value {
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
   font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
   font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
   line-height: 1.5;
 
   & svg {
@@ -98,9 +98,9 @@
 }
 
 .labeled_value_label {
-  font-weight: var(--fw-semibold);
   margin-top: 0;
   margin-bottom: 0.25rem;
+  font-weight: var(--fw-semibold);
 }
 
 .labeled_value_value {

package/src/styles/colors.module.css

@@ -1,3 +1,4 @@
+/* ToDo this file will be removed once the labware library, designer, and creator are updated */
 :root {
   /* ot brand */
   --c-mustard: #ffd252;

package/src/styles/global.css

@@ -0,0 +1,179 @@
+/* this is global CSS for the components package and all other opentrons projects */
+:root {
+  /* colors */
+
+  /* currently we follow the order of colors.ts file */
+
+  /* green */
+  --green-60: #03683e;
+  --green-35: #afedd3;
+  --green-20: #e8f7ed;
+  --green-50-non-touchscreen: #04aa65;
+  --green-50-touchscreen: #1ca850;
+  --green-50: var(--green-50-non-touchscreen);
+  --green-40-non-touchscreen: #91e2c0;
+  --green-40-touchscreen: #8ef3a8;
+  --green-40: var(--green-40-non-touchscreen);
+  --green-30-non-touchscreen: #c4f6e0;
+  --green-30-touchscreen: #8afbab;
+  --green-30: var(--green-30-non-touchscreen);
+
+  /* red */
+  --red-60: #941313;
+  --red-55: #c71a1b;
+  --red-50: #de1b1b;
+  --red-40: #f5b2b3;
+  --red-35: #f8c8c9;
+  --red-30: #fad6d6;
+  --red-20: #fce9e9;
+
+  /* yellow */
+  --yellow-60: #825512;
+  --yellow-50: #f09d20;
+  --yellow-40: #fcd48b;
+  --yellow-35: #ffe1a4;
+  --yellow-30: #ffe9be;
+  --yellow-20: #fdf3e2;
+
+  /* purple */
+  --purple-60-non-touchscreen: #562566;
+  --purple-60-touchscreen: #612367;
+  --purple-60: var(--purple-60-non-touchscreen);
+  --purple-55-non-touchscreen: #713187;
+  --purple-55-touchscreen: #822e89;
+  --purple-55: var(--purple-55-non-touchscreen);
+  --purple-50-non-touchscreen: #893ba4;
+  --purple-50-touchscreen: #9e39a8;
+  --purple-50: var(--purple-50-non-touchscreen);
+  --purple-40-non-touchscreen: #cea4df;
+  --purple-40-touchscreen: #e2a9ea;
+  --purple-40: var(--purple-40-non-touchscreen);
+  --purple-35-non-touchscreen: #dbbce7;
+  --purple-35-touchscreen: #ecc2f2;
+  --purple-35: var(--purple-35-non-touchscreen);
+  --purple-30-non-touchscreen: #e6d5ec;
+  --purple-30-touchscreen: #f4def7;
+  --purple-30: var(--purple-30-non-touchscreen);
+  --purple-20-non-touchscreen: #f1e8f5;
+  --purple-20-touchscreen: #fff3fe;
+  --purple-20: var(--purple-20-non-touchscreen);
+
+  /* blue */
+  --blue-60: #004196;
+  --blue-55: #0056c8;
+  --blue-40: #a9cefd;
+  --blue-35: #bfdcfd;
+  --blue-30: #d0e6fe;
+  --blue-20: #e1efff;
+  --blue-10: #f1f8ff;
+
+  /* gray */
+  --grey-60: #4a4c4e;
+  --grey-55: #626467;
+  --grey-50: #737578;
+  --grey-40: #b7b8b9;
+  --grey-35: #cbcccc;
+  --grey-30: #dedede;
+  --grey-20: #e9e9e9;
+  --grey-10: #f3f3f3;
+
+  /* core */
+  --black-90: #16212d;
+  --black-80: #24313f;
+  --black-70: #39495b;
+  --white: #fff;
+  --blue-50: #006cfa;
+
+  /* semi-opaques */
+  --transparent-white-80: #fffc;
+  --transparent-white-50: #ffffff80;
+  --transparent-black-80: #16212d80;
+
+  /* flex */
+  --flex-55: #0297cc;
+  --flex-50: #00bdff;
+  --flex-40: #aae3fc;
+
+  /* extras */
+  --transparent: #0000;
+
+  /* spacing */
+  --spacing-2: 0.125rem; /* 2px */
+  --spacing-4: 0.25rem; /* 4px */
+  --spacing-6: 0.375rem; /* 6px */
+  --spacing-8: 0.5rem; /* 8px */
+  --spacing-10: 0.625rem; /* 10px */
+  --spacing-12: 0.75rem; /* 12px */
+  --spacing-16: 1rem; /* 16px */
+  --spacing-20: 1.25rem; /* 20px */
+  --spacing-24: 1.5rem; /* 24px */
+  --spacing-32: 2rem; /* 32px */
+  --spacing-40: 2.5rem; /* 40px */
+  --spacing-44: 2.75rem; /* 44px */
+  --spacing-48: 3rem; /* 48px */
+  --spacing-60: 3.75rem; /* 60px */
+  --spacing-68: 4.25rem; /* 68px */
+  --spacing-80: 5rem; /* 80px */
+  --spacing-120: 7.5rem; /* 120px */
+
+  /* border-radius */
+  --border-radius-2: 0.125rem; /* 2px */
+  --border-radius-4: 0.25rem; /* 4px */
+  --border-radius-8: 0.5rem; /* 8px */
+  --border-radius-12: 0.75rem; /* 12px */
+  --border-radius-16: 1rem; /* 16px */
+  --border-radius-40: 2.5rem; /* 40px */
+  --border-radius-200: 50rem; /* 200px */
+
+  /* font-size */
+  --font-size-80: 5rem; /* 80px */
+  --font-size-38: 2.375rem; /* 38px */
+  --font-size-32: 2rem; /* 32px */
+  --font-size-28: 1.75rem; /* 28px */
+  --font-size-22: 1.375rem; /* 22px */
+  --font-size-20: 1.25rem; /* 20px */
+  --font-size-h1: 1.1875rem; /* H1 19px */
+  --font-size-h2: 0.9375rem; /* H2 15px */
+  --font-size-h3: 0.875rem; /* H3 14px */
+  --font-size-h4: 0.8125rem; /* H4 13px */
+  --font-size-h6: 0.5625rem; /* H6 9px */
+  --font-size-p: 0.8125rem; /* P 13px */
+  --font-size-label: 0.6875rem; /* Label 11px */
+  --font-size-caption: 0.625rem; /* Caption 10px */
+
+  /* line-height */
+  --line-height-96: 6rem; /* 96px */
+  --line-height-48: 3rem; /* 48px */
+  --line-height-42: 2.625rem; /* 42px */
+  --line-height-36: 2.25rem; /* 36px */
+  --line-height-28: 1.75rem; /* 28px */
+  --line-height-24: 1.5rem; /* 24px */
+  --line-height-20: 1.25rem; /* 20px */
+  --line-height-18: 1.125rem; /* 18px */
+  --line-height-16: 1rem; /* 16px */
+  --line-height-12: 0.75rem; /* 12px */
+
+  /* font-weight */
+
+  /* this might be removed. that depends on what StyledText looks like */
+  --font-weight-bold: 700;
+  --font-weight-semi-bold: 600;
+  --font-weight-regular: 400;
+  --font-weight-light: 300;
+}
+
+.enable_touchscreen_colors {
+  /* green */
+  --green-50: var(--green-50-touchscreen);
+  --green-40: var(--green-40-touchscreen);
+  --green-30: var(--green-30-touchscreen);
+
+  /* purple */
+  --purple-60: var(--purple-60-touchscreen);
+  --purple-55: var(--purple-55-touchscreen);
+  --purple-50: var(--purple-50-touchscreen);
+  --purple-40: var(--purple-40-touchscreen);
+  --purple-35: var(--purple-35-touchscreen);
+  --purple-30: var(--purple-30-touchscreen);
+  --purple-20: var(--purple-20-touchscreen);
+}

package/src/styles/index.module.css

@@ -3,6 +3,6 @@
 }
 
 .rotated {
-  transform-origin: center;
   transform: rotate(180deg);
+  transform-origin: center;
 }

package/src/styles/typography.module.css

@@ -1,3 +1,4 @@
+/* ToDo this file will be removed once the labware library, designer, and creator are updated */
 :root {
   --c-font-dark: #4a4a4a;
   --c-font-icon: #6f6f6f;

package/src/testing/utils/renderWithProviders.tsx

@@ -5,11 +5,11 @@ import { I18nextProvider } from 'react-i18next'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 import { render } from '@testing-library/react'
-import { createStore } from 'redux'
+import { legacy_createStore } from 'redux'
 import { vi } from 'vitest'
 
 import type { RenderOptions, RenderResult } from '@testing-library/react'
-import type { PreloadedState, Store } from 'redux'
+import type { Store } from 'redux'
 import type {
   ComponentProps,
   ComponentType,
@@ -29,10 +29,7 @@ export function renderWithProviders<State>(
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   const { initialState = {}, i18nInstance = null } = options || {}
 
-  const store: Store<State> = createStore(
-    vi.fn(),
-    initialState as PreloadedState<State>
-  )
+  const store: Store<State> = legacy_createStore(vi.fn(), initialState)
   store.dispatch = vi.fn()
   store.getState = vi.fn(() => initialState) as () => State
 

package/src/tooltips/tooltips.module.css

@@ -2,42 +2,42 @@
 @import '../index.module.css';
 
 .tooltip_box {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-light */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-light */
-  color: var(--c-font-light); /* from legacy --font-body-1-light */
+  z-index: 9001;
+  padding: 8px;
   background-color: var(--c-bg-dark);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
-  padding: 8px;
+  color: var(--c-font-light); /* from legacy --font-body-1-light */
   cursor: pointer;
-  z-index: 9001;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-light */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-light */
 }
 
 .arrow {
   position: absolute;
   bottom: 0;
   left: 0;
-  margin-bottom: -0.5em;
   width: 1em;
   height: 0.5em;
+  margin-bottom: -0.5em;
 
   &::before {
-    border-width: 0.5em 0.5em 0 0.5em;
-    content: '';
-    margin: auto;
     display: block;
     width: 0;
     height: 0;
+    border-width: 0.5em 0.5em 0 0.5em;
     border-style: solid;
     border-color: var(--c-bg-dark) transparent transparent transparent;
+    margin: auto;
+    content: '';
   }
 }
 
 .arrow.bottom {
   top: 0;
   left: 0;
-  margin-top: -0.5em;
   width: 1em;
   height: 0.5em;
+  margin-top: -0.5em;
 
   &::before {
     border-width: 0 0.5em 0.5em 0.5em;
@@ -48,9 +48,9 @@
 .arrow.right {
   top: 0;
   left: 0;
-  margin-left: -0.5em;
-  height: 1em;
   width: 0.5em;
+  height: 1em;
+  margin-left: -0.5em;
 
   &::before {
     border-width: 0.5em 0.5em 0.5em 0;
@@ -61,9 +61,9 @@
 .arrow.left {
   top: 0;
   right: 0;
-  margin-right: -0.5em;
-  height: 1em;
   width: 0.5em;
+  height: 1em;
+  margin-right: -0.5em;
 
   &::before {
     border-width: 0.5em 0 0.5em 0.5em;

package/vite.config.mts

@@ -1,11 +1,13 @@
 import path from 'path'
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import postCssImport from 'postcss-import'
+import lostCss from 'lost'
 import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
+import postCssImport from 'postcss-import'
 import postCssPresetEnv from 'postcss-preset-env'
-import lostCss from 'lost'
+import { defineConfig } from 'vite'
+
+import { cssModuleSideEffect } from './cssModuleSideEffect'
 
 export default defineConfig({
   build: {
@@ -31,6 +33,7 @@ export default defineConfig({
         configFile: true,
       },
     }),
+    cssModuleSideEffect(),
   ],
   optimizeDeps: {
     esbuildOptions: {

package/lib/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.d.ts

@@ -1,14 +0,0 @@
-import type { ChangeEventHandler } from 'react';
-import type { StyleProps } from '../../../primitives';
-interface ListButtonRadioButtonProps extends StyleProps {
-    buttonText: string;
-    buttonValue: string | number;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    setNoHover?: () => void;
-    setHovered?: () => void;
-    disabled?: boolean;
-    isSelected?: boolean;
-    id?: string;
-}
-export declare function ListButtonRadioButton(props: ListButtonRadioButtonProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/AbsorbanceReaderFixture.d.ts

@@ -1,10 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface AbsorbanceReaderFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    selected?: boolean;
-}
-export declare function AbsorbanceReaderFixture(props: AbsorbanceReaderFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/EmptyConfigFixture.d.ts

@@ -1,8 +0,0 @@
-import type { CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface EmptyConfigFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    handleClickAdd: (fixtureLocation: CutoutId) => void;
-}
-export declare function EmptyConfigFixture(props: EmptyConfigFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/FlexStackerFixture.d.ts

@@ -1,11 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface FlexStackerFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    hasWasteChute: boolean;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    selected?: boolean;
-}
-export declare function FlexStackerFixture(props: FlexStackerFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/HeaterShakerFixture.d.ts

@@ -1,10 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface HeaterShakerFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    selected?: boolean;
-}
-export declare function HeaterShakerFixture(props: HeaterShakerFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/MagneticBlockFixture.d.ts

@@ -1,11 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface MagneticBlockFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    hasStagingArea?: boolean;
-    selected?: boolean;
-}
-export declare function MagneticBlockFixture(props: MagneticBlockFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.d.ts

@@ -1,10 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface StagingAreaConfigFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    selected?: boolean;
-}
-export declare function StagingAreaConfigFixture(props: StagingAreaConfigFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/TemperatureModuleFixture.d.ts

@@ -1,10 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface TemperatureModuleFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    selected?: boolean;
-}
-export declare function TemperatureModuleFixture(props: TemperatureModuleFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/ThermocyclerFixture.d.ts

@@ -1,10 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface ThermocyclerFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    selected?: boolean;
-}
-export declare function ThermocyclerFixture(props: ThermocyclerFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/TrashBinConfigFixture.d.ts

@@ -1,10 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface TrashBinConfigFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    selected?: boolean;
-}
-export declare function TrashBinConfigFixture(props: TrashBinConfigFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.d.ts

@@ -1,11 +0,0 @@
-import type { CutoutFixtureId, CutoutId, DeckDefinition } from '@opentrons/shared-data';
-interface WasteChuteConfigFixtureProps {
-    deckDefinition: DeckDefinition;
-    fixtureLocation: CutoutId;
-    cutoutFixtureId: CutoutFixtureId;
-    handleClickRemove?: (fixtureLocation: CutoutId, cutoutFixtureId: CutoutFixtureId) => void;
-    hasStagingAreas?: boolean;
-    selected?: boolean;
-}
-export declare function WasteChuteConfigFixture(props: WasteChuteConfigFixtureProps): JSX.Element;
-export {};

package/lib/hardware-sim/utils.d.ts

@@ -1,3 +0,0 @@
-import type { AffineTransformMatrix } from '@opentrons/shared-data';
-export declare const IDENTITY_AFFINE_TRANSFORM: AffineTransformMatrix;
-export declare function multiplyMatrices(a: number[][], b: number[][]): number[][];

package/lib/instrument/InstrumentGroup.d.ts

@@ -1,11 +0,0 @@
-import type { InstrumentInfoProps } from './InstrumentInfo';
-export interface InstrumentGroupProps {
-    showMountLabel?: boolean | null | undefined;
-    left?: InstrumentInfoProps | null | undefined;
-    right?: InstrumentInfoProps | null | undefined;
-}
-/**
- * Renders a left and right pipette diagram & info.
- * Takes child `InstrumentInfo` props in `right` and `left` props.
- */
-export declare function InstrumentGroup(props: InstrumentGroupProps): JSX.Element;

package/lib/instrument/InstrumentInfo.d.ts

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Mount } from '../robot-types';
-import type { InstrumentDiagramProps } from './InstrumentDiagram';
-export interface InstrumentInfoProps {
-    /** 'left' or 'right' */
-    mount: Mount;
-    /** human-readable description, eg 'p300 Single-channel' */
-    description: string;
-    /** specs of mounted pipette */
-    pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null;
-    /** paired tiprack models */
-    tiprackModels?: string[];
-    /** children to display under the info */
-    children?: ReactNode;
-    /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
-    showMountLabel?: boolean | null;
-}
-export declare function InstrumentInfo(props: InstrumentInfoProps): JSX.Element;

package/lib/legacy-hardware-sim/ModuleItem.d.ts

@@ -1,17 +0,0 @@
-import type { DeckSlot, ModuleModel } from '@opentrons/shared-data';
-export interface ModuleProps {
-    /** module model */
-    model: ModuleModel;
-    /** display mode: 'default', 'present', 'missing', or 'info' */
-    mode: 'default' | 'present' | 'missing' | 'info';
-    /** slot details of the location of this module */
-    slot: DeckSlot;
-    /** USB port detail of the connected module */
-    usbInfoString?: string;
-}
-/**
- * Legacy App-specific Module Rendering. Removable after Protocol Upload Revamp release
- *
- * @deprecated Use {@link Module}
- */
-export declare function ModuleItem(props: ModuleProps): JSX.Element;

package/lib/lists/TitledList.d.ts

@@ -1,44 +0,0 @@
-import type { MouseEvent, ReactNode } from 'react';
-import type { IconName, IconProps } from '../icons';
-export interface TitledListProps {
-    /** id attribute */
-    id?: string;
-    /** text of title */
-    title: string;
-    /** optional icon left of the title */
-    iconName?: IconName | null | undefined;
-    /** props passed down to icon (`className` and `name` are ignored) */
-    iconProps?: Omit<IconProps, 'name'>;
-    /** optional data test id for the container */
-    'data-test'?: string;
-    /** children must all be `<li>` */
-    children?: ReactNode;
-    /** additional classnames */
-    className?: string;
-    /** component with descriptive text about the list */
-    description?: ReactNode;
-    /** optional click action (on title div, not children) */
-    onClick?: (event: MouseEvent) => unknown;
-    /** optional right click action (on wrapping div) */
-    onContextMenu?: (event: MouseEvent) => unknown;
-    /** optional mouseEnter action */
-    onMouseEnter?: (event: MouseEvent) => unknown;
-    /** optional mouseLeave action */
-    onMouseLeave?: (event: MouseEvent) => unknown;
-    /** caret click action; if defined, list is expandable and carat is visible */
-    onCollapseToggle?: (event: MouseEvent) => unknown;
-    /** collapse the list if true (false by default) */
-    collapsed?: boolean;
-    /** set to true when TitledList is selected (eg, user clicked it) */
-    selected?: boolean;
-    /** set to true when TitledList is hovered (but not when its contents are hovered) */
-    hovered?: boolean;
-    /** disables the whole TitledList if true */
-    disabled?: boolean;
-    /** appear disabled, but preserve collapsibility */
-    inert?: boolean;
-}
-/**
- * An ordered list with optional title, icon, and description.
- */
-export declare function TitledList(props: TitledListProps): JSX.Element;

package/lib/structure/Card.d.ts

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react';
-import type { StyleProps } from '../primitives';
-export interface CardProps extends StyleProps {
-    /** Title for card, all cards should receive a title. */
-    title?: ReactNode;
-    /** Card contents */
-    children?: ReactNode;
-    /** If card can not be used, gray it out and remove pointer events */
-    disabled?: boolean;
-    /** Additional class names */
-    className?: string;
-}
-/**
- * Renders a basic card element with a white background, dropshadow, and zero padding.
- *
- * Titles and other children handle their own styles and layout.
- */
-export declare function Card(props: CardProps): JSX.Element;