@midas-ds/components 1.0.2

package/search-field/SearchField.d.ts

@@ -0,0 +1,13 @@
+import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
+import * as React from 'react';
+export interface SearchFieldProps extends AriaSearchFieldProps {
+    /** Placeholder text */
+    placeholder: string;
+    /**
+     *  Text displayed on the 'search' button
+     *  @default
+     *  'Sök'
+     */
+    buttonText?: string;
+}
+export declare const SearchField: React.FC<SearchFieldProps>;

package/search-field/index.d.ts

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

package/select/Select.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ListBoxItemProps, SelectProps as AriaSelectProps, ValidationResult } from 'react-aria-components';
+export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children'> {
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    items?: Iterable<T>;
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+}
+export declare function Select<T extends object>({ label, description, errorMessage, children, items, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Item(props: ListBoxItemProps): import("react/jsx-runtime").JSX.Element;

package/select/index.d.ts

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

package/spinner/Spinner.d.ts

@@ -0,0 +1,11 @@
+export interface SpinnerProps {
+    /** Displays a smaller when set to true
+     * @default false
+     * */
+    small?: boolean;
+    /** For use on dark background
+     * @default false
+     * */
+    dark?: boolean;
+}
+export declare const Spinner: React.FC<SpinnerProps>;

package/spinner/index.d.ts

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

package/table/Table.d.ts

@@ -0,0 +1,12 @@
+import { RowProps, TableHeaderProps, ColumnProps, TableProps as AriaTableProps, CellProps, TableBody } from 'react-aria-components';
+export interface TableProps<T> extends AriaTableProps {
+    narrow?: boolean;
+    striped?: boolean;
+    rows: T[];
+}
+export declare const Table: <T extends object>({ narrow, striped, ...rest }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T extends object>({ columns, children }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: <T extends object>({ id, columns, children, ...rest }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Column: ({ children, ...rest }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Cell: ({ ...rest }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export { TableBody };

package/table/index.d.ts

@@ -0,0 +1 @@
+export { Table, TableHeader, TableBody, Row, Cell, Column } from './Table';

package/tabs/Tabs.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface TabsProps<T extends string> {
+    /** An array of tab titles */
+    tabs: T[];
+    /** Lable for accecibility */
+    label: string;
+    /** Choose another than the first tab to be selected by default. Name must match one of the tabs */
+    defaultSelected?: T;
+    /** Amount of children must match the amount of tabs */
+    children: React.ReactNode;
+}
+export declare const Tabs: <T extends string>({ tabs, label, defaultSelected, children }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/tabs/index.d.ts

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

package/tag/Tag.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TagGroupProps as AriaTagGroupProps, TagProps as AriaTagProps } from 'react-aria-components';
+export interface TagGroupProp extends AriaTagGroupProps {
+    children: React.ReactNode;
+}
+export interface TagProps extends AriaTagProps {
+    children: React.ReactNode;
+    dismissable?: boolean;
+}
+export declare const TagGroup: React.FC<TagGroupProp>;
+export declare const Tag: React.FC<TagProps>;

package/tag/index.d.ts

@@ -0,0 +1 @@
+export { Tag, TagGroup } from './Tag';

package/textarea/TextArea.d.ts

@@ -0,0 +1,20 @@
+import { ValidationResult, TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+import * as React from 'react';
+export interface TextAreaProps extends AriaTextFieldProps {
+    /** Specify label displayed above the TextArea*/
+    label?: string;
+    /** Specify description displayed below the label */
+    description?: string;
+    /** Set number of rows for the TextArea */
+    rows?: number;
+    /** Set number of characters that are allowed before the TextArea is put in an invalid state */
+    maxCharacters?: number;
+    /**
+     * Whether to show the character counter or not
+     * @default
+     * false
+     */
+    showCounter?: boolean;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+}
+export declare const TextArea: React.FC<TextAreaProps>;

package/textarea/index.d.ts

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

package/textfield/TextField.d.ts

@@ -0,0 +1,16 @@
+import { default as React, ReactNode } from 'react';
+import { TextFieldProps as AriaTextFieldProps, ValidationResult } from 'react-aria-components';
+export interface TextFieldProps extends AriaTextFieldProps {
+    children?: ReactNode;
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string) | undefined;
+    validationType?: 'ssn' | RegExp;
+    maxCharacters?: number;
+    showCounter?: boolean;
+}
+export declare const TextField: React.FC<TextFieldProps>;
+type InputWrapperProps = Pick<TextFieldProps, 'label' | 'description' | 'errorMessage' | 'children'>;
+export declare const InputWrapper: ({ label, description, errorMessage, children }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ssnRegEx: RegExp;
+export {};

package/textfield/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TextFieldStyles } from './TextField.module.css';
+export * from './TextField';
+export { TextFieldStyles };

package/theme/index.d.ts

@@ -0,0 +1,138 @@
+export * from './tokens';
+export declare const theme: {
+    baseColors: {
+        white: string;
+        black: string;
+        gray10: string;
+        gray20: string;
+        gray30: string;
+        gray40: string;
+        gray50: string;
+        gray60: string;
+        gray70: string;
+        gray80: string;
+        gray90: string;
+        gray100: string;
+        gray130: string;
+        gray150: string;
+        red10: string;
+        red20: string;
+        red30: string;
+        red40: string;
+        red50: string;
+        red60: string;
+        red70: string;
+        red80: string;
+        red90: string;
+        red100: string;
+        red130: string;
+        red150: string;
+        blue10: string;
+        blue20: string;
+        blue30: string;
+        blue40: string;
+        blue50: string;
+        blue60: string;
+        blue70: string;
+        blue80: string;
+        blue90: string;
+        blue100: string;
+        blue130: string;
+        blue150: string;
+    };
+    buttonColors: {
+        outline: string;
+        primaryBackground: string;
+        primaryText: string;
+        primaryHover: string;
+        primaryFocus: string;
+        primaryActive: string;
+        secondaryBackground: string;
+        secondaryText: string;
+        secondaryHover: string;
+        secondaryActive: string;
+    };
+    inputColor: {
+        inputText: string;
+    };
+    signalColors: {
+        signalGreen10: string;
+        signalGreen100: string;
+        signalBlue10: string;
+        signalBlue100: string;
+        signalYellow10: string;
+        signalYellow100: string;
+        signalRed10: string;
+        signalRed100: string;
+        signalRed130: string;
+        signalRed150: string;
+    };
+    borderRadius: {
+        sRadius: string;
+        mRadius: string;
+    };
+    borderWidths: {
+        xsWidth: string;
+        sWidth: string;
+        mWidth: string;
+    };
+    fontWeights: {
+        lightWeight: string;
+        regularWeight: string;
+        mediumWeight: string;
+        semiBoldWeight: string;
+        boldWeight: string;
+        blackWeight: string;
+    };
+    fontSizes: {
+        desktopSize: string;
+        mobileSize: string;
+        largeSize: string;
+        inputNormalSize: string;
+        inputMessageSize: string;
+        inputLabelSize: string;
+        inputDescriptionSize: string;
+    };
+    midasColors: {
+        logoPrimary: string;
+        logoSecondary: string;
+        textPrimary: string;
+        textSecondary: string;
+        textTertiary: string;
+        link: string;
+        linkVisited: string;
+        backgroundPrimary: string;
+        backgroundSecondary: string;
+        backgroundFooter1: string;
+        backgroundFooter2: string;
+        backgroundInfo: string;
+        backgroundImportant: string;
+        borderPrimary: string;
+        borderSecondary: string;
+        borderFocusOuter: string;
+        borderFocusInner: string;
+        iconPrimary: string;
+        iconInverted: string;
+    };
+    midasTransitions: {
+        slowTransition: string;
+        normalTransition: string;
+        fastTransition: string;
+    };
+    breakpoints: {
+        smBreakpoint: string;
+        mdBreakpoint: string;
+        lgBreakpoint: string;
+        xlBreakpoint: string;
+    };
+    accessibility: {
+        forcedColorsMode: string;
+        prefersReducedMotion: string;
+    };
+    font: {
+        display: string;
+    };
+    boxShadow: {
+        focus: string;
+    };
+};

package/theme/tokens.d.ts

@@ -0,0 +1,135 @@
+export declare const baseColors: {
+    white: string;
+    black: string;
+    gray10: string;
+    gray20: string;
+    gray30: string;
+    gray40: string;
+    gray50: string;
+    gray60: string;
+    gray70: string;
+    gray80: string;
+    gray90: string;
+    gray100: string;
+    gray130: string;
+    gray150: string;
+    red10: string;
+    red20: string;
+    red30: string;
+    red40: string;
+    red50: string;
+    red60: string;
+    red70: string;
+    red80: string;
+    red90: string;
+    red100: string;
+    red130: string;
+    red150: string;
+    blue10: string;
+    blue20: string;
+    blue30: string;
+    blue40: string;
+    blue50: string;
+    blue60: string;
+    blue70: string;
+    blue80: string;
+    blue90: string;
+    blue100: string;
+    blue130: string;
+    blue150: string;
+};
+export declare const buttonColors: {
+    outline: string;
+    primaryBackground: string;
+    primaryText: string;
+    primaryHover: string;
+    primaryFocus: string;
+    primaryActive: string;
+    secondaryBackground: string;
+    secondaryText: string;
+    secondaryHover: string;
+    secondaryActive: string;
+};
+export declare const inputColor: {
+    inputText: string;
+};
+export declare const signalColors: {
+    signalGreen10: string;
+    signalGreen100: string;
+    signalBlue10: string;
+    signalBlue100: string;
+    signalYellow10: string;
+    signalYellow100: string;
+    signalRed10: string;
+    signalRed100: string;
+    signalRed130: string;
+    signalRed150: string;
+};
+export declare const borderRadius: {
+    sRadius: string;
+    mRadius: string;
+};
+export declare const borderWidths: {
+    xsWidth: string;
+    sWidth: string;
+    mWidth: string;
+};
+export declare const fontWeights: {
+    lightWeight: string;
+    regularWeight: string;
+    mediumWeight: string;
+    semiBoldWeight: string;
+    boldWeight: string;
+    blackWeight: string;
+};
+export declare const fontSizes: {
+    desktopSize: string;
+    mobileSize: string;
+    largeSize: string;
+    inputNormalSize: string;
+    inputMessageSize: string;
+    inputLabelSize: string;
+    inputDescriptionSize: string;
+};
+export declare const midasColors: {
+    logoPrimary: string;
+    logoSecondary: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    link: string;
+    linkVisited: string;
+    backgroundPrimary: string;
+    backgroundSecondary: string;
+    backgroundFooter1: string;
+    backgroundFooter2: string;
+    backgroundInfo: string;
+    backgroundImportant: string;
+    borderPrimary: string;
+    borderSecondary: string;
+    borderFocusOuter: string;
+    borderFocusInner: string;
+    iconPrimary: string;
+    iconInverted: string;
+};
+export declare const midasTransitions: {
+    slowTransition: string;
+    normalTransition: string;
+    fastTransition: string;
+};
+export declare const breakpoints: {
+    smBreakpoint: string;
+    mdBreakpoint: string;
+    lgBreakpoint: string;
+    xlBreakpoint: string;
+};
+export declare const accessibility: {
+    forcedColorsMode: string;
+    prefersReducedMotion: string;
+};
+export declare const font: {
+    display: string;
+};
+export declare const boxShadow: {
+    focus: string;
+};

package/toast/Toast.d.ts

@@ -0,0 +1,25 @@
+import { AriaToastProps, AriaToastRegionProps } from '@react-aria/toast';
+import { QueuedToast, ToastQueue, ToastState } from '@react-stately/toast';
+import { default as React } from 'react';
+export interface MidasToast {
+    message: string;
+    type: 'success' | 'info' | 'warning' | 'important';
+    children?: React.ReactNode;
+}
+interface ToastRegionProps<T> extends AriaToastRegionProps {
+    state: ToastState<T>;
+}
+export interface ToastProps<T> extends AriaToastProps<T> {
+    state: ToastState<T>;
+    toast: QueuedToast<T>;
+    children?: React.ReactNode;
+}
+interface ToastProviderProps extends AriaToastRegionProps {
+    children?: ((state: ToastState<MidasToast>) => React.ReactNode) | React.ReactNode;
+}
+export declare const toastQueue: ToastQueue<MidasToast>;
+export declare const GlobalToastRegion: (props: ToastProviderProps) => React.ReactPortal | null;
+export declare const ToastProvider: ({ children, ...props }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare function ToastRegion<T extends MidasToast>({ state, ...props }: ToastRegionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Toast<T extends MidasToast>({ state, ...props }: ToastProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/toast/index.d.ts

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

package/tokens-CjXmpXTi.js

@@ -0,0 +1,160 @@
+const e = {
+  white: "#ffffff",
+  black: "#000000",
+  gray10: "#f2f2f2",
+  gray20: "#e6e6e6",
+  gray30: "#d9d9d9",
+  gray40: "#cccccc",
+  gray50: "#bfbfbf",
+  gray60: "#b3b3b3",
+  gray70: "#a6a6a6",
+  gray80: "#999999",
+  gray90: "#8c8c8c",
+  gray100: "#808080",
+  gray130: "#5d5d5d",
+  gray150: "#1f1f1f",
+  red10: "#f7e9e7",
+  red20: "#f1d4d1",
+  red30: "#e9beba",
+  red40: "#e2a8a4",
+  red50: "#d9918e",
+  red60: "#d37a7a",
+  red70: "#cc6467",
+  red80: "#c54c56",
+  red90: "#be3345",
+  red100: "#b90835",
+  red130: "#8b1327",
+  red150: "#641018",
+  blue10: "#eaf2f6",
+  blue20: "#d5e5ed",
+  blue30: "#c0d7e4",
+  blue40: "#abcbdb",
+  blue50: "#94bcd1",
+  blue60: "#82b0c9",
+  blue70: "#6ca3c0",
+  blue80: "#5897b8",
+  blue90: "#4289ad",
+  blue100: "#2e7ca5",
+  blue130: "#25607f",
+  blue150: "#143c50"
+}, a = {
+  outline: "#303030",
+  primaryBackground: e.blue150,
+  primaryText: "#303030",
+  primaryHover: e.blue130,
+  primaryFocus: e.black,
+  primaryActive: "#4289ae",
+  secondaryBackground: e.gray130,
+  secondaryText: e.white,
+  secondaryHover: "#303030",
+  secondaryActive: "#303030"
+}, o = {
+  inputText: e.gray150
+}, r = {
+  signalGreen10: "#d5f2d9",
+  signalGreen100: "#008d3c",
+  signalBlue10: e.blue10,
+  signalBlue100: "#0066cc",
+  signalYellow10: "#fff8e1",
+  signalYellow100: "#f1c21b",
+  signalRed10: "#ffdfdf",
+  signalRed100: "#e62323",
+  signalRed130: "#b31b1b",
+  signalRed150: "#801313"
+}, i = {
+  sRadius: " 0.125rem",
+  // 2px
+  mRadius: " 0.25rem"
+  // 4px
+}, d = {
+  xsWidth: " 0.0625rem",
+  // 1px
+  sWidth: " 0.125rem",
+  // 2px
+  mWidth: " 0.25rem"
+  // 4px
+}, s = {
+  lightWeight: "300",
+  regularWeight: "400",
+  mediumWeight: "500",
+  semiBoldWeight: "600",
+  boldWeight: "700",
+  blackWeight: "900"
+}, t = {
+  desktopSize: "1rem",
+  mobileSize: "1rem",
+  largeSize: "1.5rem",
+  inputNormalSize: "0.875rem",
+  inputMessageSize: "0.75rem",
+  inputLabelSize: "1rem",
+  inputDescriptionSize: "0.875rem"
+}, n = {
+  logoPrimary: e.red100,
+  logoSecondary: e.white,
+  textPrimary: e.gray150,
+  textSecondary: e.white,
+  textTertiary: e.red100,
+  link: e.blue130,
+  linkVisited: "#663366",
+  backgroundPrimary: e.white,
+  backgroundSecondary: e.gray10,
+  backgroundFooter1: e.red100,
+  backgroundFooter2: e.red130,
+  backgroundInfo: e.blue10,
+  backgroundImportant: r.signalYellow10,
+  borderPrimary: e.black,
+  borderSecondary: e.gray60,
+  borderFocusOuter: e.black,
+  borderFocusInner: e.white,
+  iconPrimary: e.black,
+  iconInverted: e.white
+}, c = {
+  slowTransition: "500ms",
+  normalTransition: "300ms",
+  fastTransition: "250ms"
+}, l = {
+  smBreakpoint: "(max-width: 767px)",
+  mdBreakpoint: "(min-width: 768px)",
+  lgBreakpoint: "(min-width: 1200px)",
+  xlBreakpoint: "(min-width: 1440px)"
+}, b = {
+  forcedColorsMode: "(forced-colors: active)",
+  prefersReducedMotion: "(prefers-reduced-motion: reduced)"
+}, g = {
+  display: '"Inter", sans-serif'
+}, u = {
+  focus: "0 0 0 2px white, 0 0 0 4px black"
+}, m = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  accessibility: b,
+  baseColors: e,
+  borderRadius: i,
+  borderWidths: d,
+  boxShadow: u,
+  breakpoints: l,
+  buttonColors: a,
+  font: g,
+  fontSizes: t,
+  fontWeights: s,
+  inputColor: o,
+  midasColors: n,
+  midasTransitions: c,
+  signalColors: r
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  a,
+  e as b,
+  i as c,
+  d,
+  t as e,
+  s as f,
+  c as g,
+  l as h,
+  o as i,
+  b as j,
+  g as k,
+  u as l,
+  n as m,
+  r as s,
+  m as t
+};

package/triangle-alert-1OYl9KWz.js

@@ -0,0 +1,56 @@
+import { c as e } from "./createLucideIcon-DeWljiyi.js";
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const y = e("CircleAlert", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+]);
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const a = e("CircleCheck", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+]);
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const r = e("Info", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+]);
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const l = e("TriangleAlert", [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+]);
+export {
+  a as C,
+  r as I,
+  l as T,
+  y as a
+};