@indico-data/design-system 1.0.4 → 1.0.6

package/lib/styles/globals/buttons.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Buttons: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/styles/globals/forms.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Forms: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/styles/globals/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GlobalStyles: () => React.JSX.Element;

package/lib/styles/globals/layout.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Layout: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/styles/globals/lists.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Lists: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/styles/globals/margin-padding.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MarginPadding: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/styles/globals/media.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Media: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/styles/globals/tables.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Tables: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/styles/globals/typography.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Typography: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/styles/globals/utility-classes.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const UtilityClasses: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/tokens/animation.d.ts

@@ -0,0 +1,4 @@
+export declare const animation: {
+    readonly duration: "200ms";
+    readonly timing: "ease";
+};

package/lib/tokens/breakpoints.d.ts

@@ -0,0 +1,10 @@
+export declare const breakpoints: {
+    readonly mediumScreen: "600px";
+    readonly largeScreen: "900px";
+    readonly maxScreen: "1300px";
+};
+export declare const mediaQueries: {
+    mediumScreen: string;
+    largeScreen: string;
+    maxScreen: string;
+};

package/lib/tokens/colors.d.ts

@@ -0,0 +1,130 @@
+export declare const allColors: {
+    readonly akaroa: "#cbc98f";
+    readonly amber: "#f4c401";
+    readonly amethyst: "#8e57b3";
+    readonly aqua: "#10e4fe";
+    readonly astralBlue: "#2f7ca2";
+    readonly ateneoBlue: "#0d466a";
+    readonly avocado: "#81b12f";
+    readonly azure: "#108cf7";
+    readonly baliHai: "#8498b6";
+    readonly black: "#000";
+    readonly blueBayoux: "#4f5e74";
+    readonly blueMagenta: "#542f9d";
+    readonly blueRibbon: "#0b35ff";
+    readonly blueYonder: "#586fd2";
+    readonly bouqet: "#a35c9a";
+    readonly brick: "#c62828";
+    readonly brown: "#785349";
+    readonly candyCorn: "#fcef4d";
+    readonly carnation: "#ff8adf";
+    readonly carrot: "#f29a2d";
+    readonly cerise: "#d52a96";
+    readonly cerulean: "#008b9e";
+    readonly chantilly: "#f7b0eb";
+    readonly charcoal: "#474b4b";
+    readonly chartreuse: "#34ff01";
+    readonly clay: "#283243";
+    readonly cocoaBean: "#5c1200";
+    readonly comet: "#5a6982";
+    readonly cornflower: "#2060ff";
+    readonly crimson: "#e53126";
+    readonly curiousBlue: "#178ee0";
+    readonly cyan: "#0cf";
+    readonly darkFontColor: "#0d151d";
+    readonly darkGray: "#333";
+    readonly darkPurple: "#6f3eae";
+    readonly darkRed: "#b30000";
+    readonly defaultFontColor: "#bbbfc5";
+    readonly dodgerBlue: "#1774ff";
+    readonly eagleGreen: "#005557";
+    readonly ebony: "#101a26";
+    readonly eggplant: "#7a0074";
+    readonly electricGreen: "#00ff0a";
+    readonly emerald: "#09c199";
+    readonly espresso: "#5a3627";
+    readonly fieldPromptError: "#fd9693";
+    readonly fieldPromptInfo: "#00bfff";
+    readonly flamingo: "#f861b6";
+    readonly flirt: "#910870";
+    readonly forestGreen: "#1f7f1f";
+    readonly geraldine: "#fe9486";
+    readonly grannysmith: "#92e959";
+    readonly green: "#4caf50";
+    readonly harlequin: "#20cb00";
+    readonly harvestGold: "#e6c079";
+    readonly hemlock: "#626740";
+    readonly imperial: "#4b0134";
+    readonly iron: "#d9dee0";
+    readonly japaneseIndigo: "#264359";
+    readonly juniper: "#6d9292";
+    readonly khaki: "#bba44b";
+    readonly koamaru: "#2f346a";
+    readonly korma: "#90370e";
+    readonly lavender: "#B086E3";
+    readonly lavenderRose: "#fb9fda";
+    readonly lightGray: "#eee";
+    readonly lightPurple: "#b43be4";
+    readonly lilac: "#a195d4";
+    readonly lincolnGreen: "#254600";
+    readonly magenta: "#ff15e0";
+    readonly malibu: "#68C2FB";
+    readonly mantis: "#4fa83d";
+    readonly maroon: "#ad3349";
+    readonly mauve: "#e06cfb";
+    readonly mediumGray: "#999";
+    readonly midFontColor: "#8593b3";
+    readonly mint: "#3ac999";
+    readonly mirage: "#182432";
+    readonly mulberry: "#5c0536";
+    readonly olive: "#807300";
+    readonly orange: "#ff7200";
+    readonly orchid: "#ab00ff";
+    readonly oxfordBlue: "#384558";
+    readonly pacific: "#00b5b6";
+    readonly palm: "#1aa511";
+    readonly persian: "#1717cf";
+    readonly persianLight: "#0327ce";
+    readonly pine: "#017074";
+    readonly pink: "#f74f8a";
+    readonly pistachio: "#aac609";
+    readonly raspberry: "#990030";
+    readonly red: "#f95359";
+    readonly robinsEggBlue: "#00bcd4";
+    readonly romanSilver: "#7d888d";
+    readonly salem: "#03832e";
+    readonly sapGreen: "#5f7e20";
+    readonly seaGreen: "#0b8a51";
+    readonly seance: "#7f1f82";
+    readonly shiraz: "#c61021";
+    readonly sinopia: "#D14200";
+    readonly tangerine: "#ff9900";
+    readonly teal: "#008285";
+    readonly toast: "#997862";
+    readonly trueBlue: "#066CC6";
+    readonly turquoise: "#00b5b6";
+    readonly vermilion: "#b95555";
+    readonly viking: "#59cfe0";
+    readonly violet: "#3e4eb8";
+    readonly violetBlue: "#8060d2";
+    readonly walnut: "#783f00";
+    readonly white: "#fff";
+    readonly windsorTan: "#b35c00";
+    readonly yellow: "#ffca28";
+    readonly zucchini: "#016422";
+    readonly hiliteFontColor: "#fff";
+    readonly lightFontColor: "#eee";
+    readonly borderColor: "#eee";
+    readonly actionColor: "#8593b3";
+    readonly backgroundColor: "#182432";
+};
+export type ColorName = keyof typeof allColors;
+export declare const baseColors: string[];
+export declare const layoutColors: string[];
+export declare const grayColors: string[];
+export declare const fontColors: string[];
+export declare const buttonColors: string[];
+export declare const newButtonColors: string[];
+export declare const vizColors: string[];
+export declare const vizColorsArray: string[];
+export declare const fieldColors: string[];

package/lib/tokens/index.d.ts

@@ -0,0 +1,8 @@
+export { animation as ANIMATION } from './animation';
+export { breakpoints as BREAKPOINT, mediaQueries as MEDIA_QUERIES } from './breakpoints';
+export { typography as TYPOGRAPHY, fontSize as FONT_SIZE } from './typography';
+export { padding as PADDINGS } from './padding';
+export { spacings as SPACING } from './spacings';
+export { margin as MARGINS } from './margin';
+export { MATH } from './numbers';
+export { allColors as COLORS, baseColors as BASE_COLORS, fieldColors as FIELD_COLORS, layoutColors as LAYOUT_COLORS, grayColors as GRAY_COLORS, fontColors as FONT_COLORS, buttonColors as BUTTON_COLORS, newButtonColors as NEW_BUTTON_COLORS, vizColors as VIZ_COLORS, vizColorsArray as VIZ_COLORS_ARRAY, } from './colors';

package/lib/tokens/margin.d.ts

@@ -0,0 +1,4 @@
+export declare const margin: {
+    readonly sm: "15px";
+    readonly md: "20px";
+};

package/lib/tokens/numbers.d.ts

@@ -0,0 +1,10 @@
+export function decimalAdjust(type: any, value: any, exp: any): any;
+export function round10(value: any, exp: any): any;
+export function clamp(value: any, min: any, max: any): any;
+export function numberWithCommas(x: any): any;
+export namespace MATH {
+    export { decimalAdjust };
+    export { round10 };
+    export { clamp };
+    export { numberWithCommas };
+}

package/lib/tokens/padding.d.ts

@@ -0,0 +1,4 @@
+export declare const padding: {
+    readonly sm: "15px";
+    readonly md: "20px";
+};

package/lib/tokens/spacings.d.ts

@@ -0,0 +1,5 @@
+export declare const spacings: {
+    readonly xs: "8px";
+    readonly sm: "12px";
+    readonly md: "24px";
+};

package/lib/tokens/typography.d.ts

@@ -0,0 +1,49 @@
+export declare const fontStack: readonly ["Noto Sans", "Avenir Next", "Avenir", "Noto", "sans-serif"];
+export declare const fontFamily: {
+    base: string;
+    heading: string;
+};
+export declare const fontSize: {
+    readonly caption: "12px";
+    readonly base: "14px";
+    readonly subheadSmall: "16px";
+    readonly subheadLarge: "18px";
+    readonly subheadXl: "22px";
+    readonly display: "30px";
+};
+export declare const lineHeight: {
+    readonly base: 1.25;
+    readonly heading: 1.2;
+};
+export declare const spacing: {
+    base: string;
+    half: string;
+    quarter: string;
+    third: string;
+};
+export declare const ellipsis: import("styled-components").RuleSet<object>;
+export declare const typography: {
+    fontFamily: {
+        base: string;
+        heading: string;
+    };
+    fontSize: {
+        readonly caption: "12px";
+        readonly base: "14px";
+        readonly subheadSmall: "16px";
+        readonly subheadLarge: "18px";
+        readonly subheadXl: "22px";
+        readonly display: "30px";
+    };
+    lineHeight: {
+        readonly base: 1.25;
+        readonly heading: 1.2;
+    };
+    spacing: {
+        base: string;
+        half: string;
+        quarter: string;
+        third: string;
+    };
+    ellipsis: import("styled-components").RuleSet<object>;
+};

package/lib/types.d.ts

@@ -0,0 +1,206 @@
+/// <reference types="react" />
+declare const allIcons: {
+    readonly 'indico-o-white': import("react").JSX.Element;
+    readonly account: import("react").JSX.Element;
+    readonly address: import("react").JSX.Element;
+    readonly 'api-doc': import("react").JSX.Element;
+    readonly 'arrow-dots': import("react").JSX.Element;
+    readonly 'arrow-down': import("react").JSX.Element;
+    readonly 'arrow-up-circle': import("react").JSX.Element;
+    readonly 'arrows-cursor': import("react").JSX.Element;
+    readonly branch: import("react").JSX.Element;
+    readonly 'check-circle': import("react").JSX.Element;
+    readonly check: import("react").JSX.Element;
+    readonly checkbox: import("react").JSX.Element;
+    readonly 'chevron-down': import("react").JSX.Element;
+    readonly 'chevron-left': import("react").JSX.Element;
+    readonly 'chevron-right': import("react").JSX.Element;
+    readonly 'chevron-up': import("react").JSX.Element;
+    readonly 'classification-document': import("react").JSX.Element;
+    readonly 'classification-image': import("react").JSX.Element;
+    readonly 'classification-page': import("react").JSX.Element;
+    readonly 'classify-and-unbundle': import("react").JSX.Element;
+    readonly clipboard: import("react").JSX.Element;
+    readonly 'coffee-1': import("react").JSX.Element;
+    readonly 'coffee-2': import("react").JSX.Element;
+    readonly 'coffee-fail': import("react").JSX.Element;
+    readonly coffeecup: import("react").JSX.Element;
+    readonly coffeesteam: import("react").JSX.Element;
+    readonly 'company-name': import("react").JSX.Element;
+    readonly 'confidence-bar-1': import("react").JSX.Element;
+    readonly 'confidence-bar-2': import("react").JSX.Element;
+    readonly 'confidence-bar-3': import("react").JSX.Element;
+    readonly 'confidence-bar-4': import("react").JSX.Element;
+    readonly 'confidence-bars': import("react").JSX.Element;
+    readonly configure: import("react").JSX.Element;
+    readonly crowdlabel: import("react").JSX.Element;
+    readonly currency: import("react").JSX.Element;
+    readonly dashboard: import("react").JSX.Element;
+    readonly 'data-and-access': import("react").JSX.Element;
+    readonly database: import("react").JSX.Element;
+    readonly date: import("react").JSX.Element;
+    readonly draggable: import("react").JSX.Element;
+    readonly droplet: import("react").JSX.Element;
+    readonly edit: import("react").JSX.Element;
+    readonly education: import("react").JSX.Element;
+    readonly ellipsis: import("react").JSX.Element;
+    readonly 'elmos-fire': import("react").JSX.Element;
+    readonly email: import("react").JSX.Element;
+    readonly enterprise: import("react").JSX.Element;
+    readonly extraction: import("react").JSX.Element;
+    readonly eye: import("react").JSX.Element;
+    readonly file: import("react").JSX.Element;
+    readonly fileHappy: import("react").JSX.Element;
+    readonly filter: import("react").JSX.Element;
+    readonly 'filter-outline': import("react").JSX.Element;
+    readonly folder: import("react").JSX.Element;
+    readonly form: import("react").JSX.Element;
+    readonly gallery: import("react").JSX.Element;
+    readonly graphiql: import("react").JSX.Element;
+    readonly happy: import("react").JSX.Element;
+    readonly 'help-solid': import("react").JSX.Element;
+    readonly help: import("react").JSX.Element;
+    readonly highlight: import("react").JSX.Element;
+    readonly 'highlight-outline': import("react").JSX.Element;
+    readonly 'indico-logo-white': import("react").JSX.Element;
+    readonly 'indico-o': import("react").JSX.Element;
+    readonly info: import("react").JSX.Element;
+    readonly kabob: import("react").JSX.Element;
+    readonly key: import("react").JSX.Element;
+    readonly label: import("react").JSX.Element;
+    readonly 'layout-complex': import("react").JSX.Element;
+    readonly 'layout-simple': import("react").JSX.Element;
+    readonly location: import("react").JSX.Element;
+    readonly lock: import("react").JSX.Element;
+    readonly menu: import("react").JSX.Element;
+    readonly 'model-import': import("react").JSX.Element;
+    readonly 'model-starter': import("react").JSX.Element;
+    readonly moon: import("react").JSX.Element;
+    readonly moonbow: import("react").JSX.Element;
+    readonly 'no-format': import("react").JSX.Element;
+    readonly 'object-detection': import("react").JSX.Element;
+    readonly organizations: import("react").JSX.Element;
+    readonly output: import("react").JSX.Element;
+    readonly 'page-thumbnail': import("react").JSX.Element;
+    readonly 'pay-as-you-go': import("react").JSX.Element;
+    readonly person: import("react").JSX.Element;
+    readonly phone: import("react").JSX.Element;
+    readonly pin: import("react").JSX.Element;
+    readonly plus: import("react").JSX.Element;
+    readonly pointer: import("react").JSX.Element;
+    readonly popup: import("react").JSX.Element;
+    readonly price: import("react").JSX.Element;
+    readonly 'radio-button': import("react").JSX.Element;
+    readonly recruiter: import("react").JSX.Element;
+    readonly regex: import("react").JSX.Element;
+    readonly reject: import("react").JSX.Element;
+    readonly repair: import("react").JSX.Element;
+    readonly research: import("react").JSX.Element;
+    readonly retrain: import("react").JSX.Element;
+    readonly sad: import("react").JSX.Element;
+    readonly search: import("react").JSX.Element;
+    readonly shrug: import("react").JSX.Element;
+    readonly signature: import("react").JSX.Element;
+    readonly 'sort-down': import("react").JSX.Element;
+    readonly split: import("react").JSX.Element;
+    readonly 'step-forward': import("react").JSX.Element;
+    readonly sun: import("react").JSX.Element;
+    readonly surround: import("react").JSX.Element;
+    readonly 'surround-outline': import("react").JSX.Element;
+    readonly swagger: import("react").JSX.Element;
+    readonly text: import("react").JSX.Element;
+    readonly 'thumbs-down': import("react").JSX.Element;
+    readonly 'thumbs-up': import("react").JSX.Element;
+    readonly time: import("react").JSX.Element;
+    readonly trash: import("react").JSX.Element;
+    readonly unlock: import("react").JSX.Element;
+    readonly upload: import("react").JSX.Element;
+    readonly url: import("react").JSX.Element;
+    readonly user: import("react").JSX.Element;
+    readonly wand: import("react").JSX.Element;
+    readonly warning: import("react").JSX.Element;
+    readonly workflows: import("react").JSX.Element;
+    readonly 'x-close': import("react").JSX.Element;
+    readonly 'zoom-in': import("react").JSX.Element;
+    readonly 'zoom-out': import("react").JSX.Element;
+    readonly 'fa-dot-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-file': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-file-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-file-pdf': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-file-word': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-check-square': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-square': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-angle-double-left': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-arrow-circle-right': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-arrow-down': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-arrow-left': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-arrow-right': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-arrow-up': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-ban': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-caret-down': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-caret-up': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-chart-bar': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-check': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-check-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-circle-notch': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-clipboard': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-clock': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-clone': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-cloud': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-cog': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-cogs': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-coins': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-cube': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-cut': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-download': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-exclamation-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-exclamation-triangle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-external-link-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-eye-dropper': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-file-download': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-file-export': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-file-upload': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-filter': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-ghost': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-hat-wizard': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-info-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-key': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-keyboard': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-layer-group': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-pencil-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-plus': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-plus-square': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-question-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-robot': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-search': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-sign-out-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-sliders-h': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-sync-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-tag': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-times': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-times-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-tint': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-toggle-off': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-toggle-on': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-trash': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-trash-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-undo': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-user': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-users': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-mouse-pointer': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-step-forward': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-search-minus': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-search-plus': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-table': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-image': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-link': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly 'fa-list': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+};
+export type IconName = keyof typeof allIcons;
+export type PermafrostComponent = {
+    id?: string;
+    className?: string;
+    'data-cy'?: string;
+    'data-testid'?: string;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "",
   "private": false,
   "author": "",
@@ -9,6 +9,7 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "dev": "storybook dev -p 6006",
+    "lint": "yarn eslint src --ext ts,js,tsx,jsx",
     "build": "rollup -c",
     "build storybook": "storybook build",
     "test-storybook": "test-storybook",
@@ -43,13 +44,16 @@
     "styled-components": "^6.1.1",
     "svgo": "^3.0.3",
     "typescript": "^5.2.2",
+    "uuid": "^9.0.1",
     "webpack": "^5",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "@storybook/addon-a11y": "^7.5.3",
     "@storybook/addon-docs": "^7.5.3",
@@ -66,11 +70,13 @@
     "@storybook/test": "^7.6.0-alpha.4",
     "@storybook/test-runner": "^0.15.1",
     "@types/styled-components": "^5.1.30",
+    "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.53.0",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.1.0",
     "postcss": "^8.4.31",

package/rollup.config.mjs

@@ -41,6 +41,6 @@ export default [
     input: 'lib/index.d.ts',
     output: [{ file: 'lib/index.d.ts', format: 'es' }],
     plugins: [dts()],
-    external: [/\.css$/],
+    external: [/\.css$/, 'react', 'react-dom', 'react-router-dom', 'styled-components', 'lodash'],
   },
 ];

package/src/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Icon } from '@/components';
+import { Icon } from '@/components/Icon';
 import { PermafrostComponent } from '@/types';
 
 import { StyledAccordion } from './Accordion.styles';

package/src/components/Icon/Icon.stories.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { IconName } from '@/types';
 import { faIcons } from './faIcons';
 import { indicons } from './indicons';
-import { Icon, IconName } from './Icon';
+import { Icon } from './Icon';
 import { IconContainer, SpecifiedSizeContainer } from './storyHelpers';
 
 const indiconsOptions: IconName[] = Object.keys(indicons) as IconName[];

package/src/components/Icon/Icon.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { PermafrostComponent } from '@/types';
+import { PermafrostComponent, IconName } from '@/types';
 
 import { faIcons } from './faIcons';
 import { indicons } from './indicons';
@@ -12,8 +12,6 @@ const allIcons = {
   ...indicons,
 } as const;
 
-export type IconName = keyof typeof allIcons;
-
 type Props = PermafrostComponent & {
   ariaLabel?: string;
   fill?: string;

package/src/components/Icon/index.ts

@@ -1,2 +1 @@
 export { Icon } from './Icon';
-export { IconName } from './Icon';

package/src/components/Icon/storyHelpers.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { IconName } from '@/types';
 import { COLORS, TYPOGRAPHY } from '@/tokens';
 
-import { Icon, IconName } from './Icon';
+import { Icon } from './Icon';
 
 interface IconGroupProps {
   groupObject: any;

package/src/components/ListTable/Header/Header.tsx

@@ -4,7 +4,9 @@ import React from 'react';
 
 import { numberUtils } from '@indico-data/utils';
 
-import { BorderSelect, Button, Icon } from '@/components';
+import { BorderSelect } from '@/components/dropdowns';
+import { Button } from '@/components/buttons';
+import { Icon } from '@/components/Icon';
 
 import { StyledHeader } from './Header.styles';
 

package/src/components/ListTable/ListTable.tsx

@@ -3,7 +3,12 @@
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 
-import { Pagination, Accordion, LoadingList, Shrug, SectionBody } from '@/components';
+import { Pagination } from '@/components/Pagination';
+import { Accordion } from '@/components/Accordion';
+import { LoadingList } from '@/components/loading-indicators';
+import { Shrug } from '@/components/user-feedback';
+import { SectionBody } from '@/components/basic-section';
+
 import { PermafrostComponent } from '@/types';
 
 import { Header } from './Header';