gd-design-library 0.7.0 → 0.7.2

package/tokens/defaultTheme.js

@@ -1,123 +0,0 @@
-import { separator as r } from "./separator.js";
-import { draganddrop as o } from "./draganddrop.js";
-import { avatar as m } from "./avatar.js";
-import { chatbubble as t } from "./chatbubble.js";
-import { radiogroup as i } from "./radiogroup.js";
-import { draganddropfiles as p } from "./draganddropfiles.js";
-import { searchModal as f } from "./searchModal.js";
-import { inputfile as a } from "./inputfile.js";
-import { carousel as e } from "./carousel.js";
-import { progressbar as s } from "./progressbar.js";
-import { card as l } from "./card.js";
-import { counter as n } from "./counter.js";
-import { typography as c } from "./typography.js";
-import { button as d } from "./button.js";
-import { input as u } from "./input.js";
-import { label as b } from "./label.js";
-import { link as g } from "./link.js";
-import { form as h } from "./form.js";
-import { wrapper as k } from "./wrapper.js";
-import { loader as w } from "./loader.js";
-import { flexAlignItems as x, display as y } from "./display.js";
-import { cursors as T } from "./cursors.js";
-import { values as v } from "./values.js";
-import { textarea as A } from "./textarea.js";
-import { flexContainer as C } from "./flexContainer.js";
-import { row as I } from "./row.js";
-import { column as M } from "./column.js";
-import { switchToggle as N } from "./toggle.js";
-import { switchToken as j } from "./switch.js";
-import { tooltip as q } from "./tooltip.js";
-import { animations as z } from "./animations.js";
-import { modal as B } from "./modal.js";
-import { image as D } from "./image.js";
-import { snackbar as E } from "./snackbar.js";
-import { skeleton as F } from "./skeleton.js";
-import { list as G } from "./list.js";
-import { select as H } from "./select.js";
-import { search as J } from "./search.js";
-import { breadcrumbs as K } from "./breadcrumbs.js";
-import { icon as L } from "./icon.js";
-import { reset as O } from "./reset.js";
-import { tabs as P } from "./tabs.js";
-import { stepper as Q } from "./stepper.js";
-import { colors as R } from "./colors.js";
-import { price as S } from "./price.js";
-import { header as U } from "./header.js";
-import { rating as V } from "./rating.js";
-import { accordion as W } from "./accordion.js";
-import { inlineNotification as X } from "./inlineNotification.js";
-import { chat as Y } from "./chat.js";
-import { slider as Z } from "./slider.js";
-import { menu as _ } from "./menu.js";
-import { scroll as $ } from "./scroll.js";
-import { spacing as rr } from "./spacing.js";
-import { font as or } from "./font.js";
-import { radius as mr } from "./radius.js";
-import { shadows as tr } from "./shadow.js";
-import { breakpoints as ir } from "./breakpoints.js";
-const so = {
-  separator: r,
-  draganddrop: o,
-  avatar: m,
-  chatbubble: t,
-  draganddropfiles: p,
-  searchModal: f,
-  inputfile: a,
-  carousel: e,
-  progressbar: s,
-  card: l,
-  counter: n,
-  name: "default",
-  spacing: rr,
-  reset: O,
-  typography: c,
-  button: d,
-  input: u,
-  label: b,
-  flexContainer: C,
-  link: g,
-  form: h,
-  wrapper: k,
-  loader: w,
-  display: y,
-  cursors: T,
-  values: v,
-  flexAlignItems: x,
-  textarea: A,
-  image: D,
-  row: I,
-  switchToggle: N,
-  column: M,
-  tooltip: q,
-  animations: z,
-  modal: B,
-  snackbar: E,
-  skeleton: F,
-  list: G,
-  select: H,
-  search: J,
-  breadcrumbs: K,
-  scroll: $,
-  icon: L,
-  tabs: P,
-  stepper: Q,
-  colors: R,
-  menu: _,
-  price: S,
-  header: U,
-  rating: V,
-  accordion: W,
-  inlineNotification: X,
-  switchToken: j,
-  chat: Y,
-  slider: Z,
-  radiogroup: i,
-  font: or,
-  radius: mr,
-  shadows: tr,
-  breakpoints: ir
-};
-export {
-  so as defaultTheme
-};

package/tokens/display.d.ts

@@ -1,16 +0,0 @@
-export declare const display: {
-    flex: string;
-    inlineFlex: string;
-    grid: string;
-    block: string;
-    inline: string;
-    inlineBlock: string;
-    none: string;
-};
-export declare const flexAlignItems: {
-    start: string;
-    center: string;
-    end: string;
-    baseline: string;
-    stretch: string;
-};

package/tokens/display.js

@@ -1,19 +0,0 @@
-const e = {
-  flex: "flex",
-  inlineFlex: "inline-flex",
-  grid: "grid",
-  block: "block",
-  inline: "inline",
-  inlineBlock: "inline-block",
-  none: "none"
-}, n = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  baseline: "baseline",
-  stretch: "stretch"
-};
-export {
-  e as display,
-  n as flexAlignItems
-};

package/tokens/draganddrop.d.ts

@@ -1,61 +0,0 @@
-export declare const draganddrop: {
-    default: {
-        position: string;
-    };
-    dragAndDropArea: {
-        default: {
-            backgroundColor: string;
-            border: string;
-            borderRadius: string;
-            padding: string;
-        };
-        hover: {
-            '&:hover': {
-                backgroundColor: string;
-                border: string;
-                borderRadius: string;
-            };
-        };
-        disabled: {
-            cursor: string;
-            backgroundColor: string;
-        };
-        error: {
-            border: string;
-        };
-        loading: {
-            backgroundColor: string;
-            cursor: string;
-        };
-    };
-    dragOverContent: {
-        default: {
-            backgroundColor: string;
-            width: string;
-            height: string;
-            display: string;
-            justifyContent: string;
-            alignItems: string;
-            border: string;
-            borderRadius: string;
-        };
-    };
-    uploadIcon: {
-        default: {
-            name: string;
-            width: number;
-            height: number;
-        };
-        disabled: {
-            fill: string;
-        };
-    };
-    contentTypography: {
-        default: {
-            margin: number;
-        };
-        disabled: {
-            color: string;
-        };
-    };
-};

package/tokens/draganddrop.js

@@ -1,87 +0,0 @@
-import { spacing as o } from "./spacing.js";
-import { colors as r } from "./colors.js";
-import { borders as e } from "./borders.js";
-import { radius as d } from "./radius.js";
-import { cursors as i } from "./cursors.js";
-import { flexAlignItems as a, display as t } from "./display.js";
-import { icon as l } from "./icon.js";
-const h = {
-  default: {
-    position: "relative"
-  },
-  dragAndDropArea: {
-    default: {
-      backgroundColor: r.bg.surface,
-      border: e.generic({
-        width: "1px",
-        color: r.border.default,
-        type: "dashed"
-      }),
-      borderRadius: d.default,
-      padding: `${o.xxl} ${o.md} ${o.xxl} ${o.md}`
-    },
-    hover: {
-      "&:hover": {
-        backgroundColor: r.bg.fill.secondary.hover,
-        border: e.generic({
-          width: "1px",
-          color: r.border.primary.hover,
-          type: "dashed"
-        }),
-        borderRadius: d.default
-      }
-    },
-    disabled: {
-      cursor: i.notAllowed,
-      backgroundColor: r.bg.input.disabled
-    },
-    error: {
-      border: e.generic({
-        width: "2px",
-        color: r.border.error,
-        type: "dashed"
-      })
-    },
-    loading: {
-      backgroundColor: r.bg.fill.secondary.hover,
-      cursor: i.notAllowed
-    }
-  },
-  dragOverContent: {
-    default: {
-      backgroundColor: r.bg.fill.secondary.hover,
-      width: "100%",
-      height: "100%",
-      display: t.flex,
-      justifyContent: a.center,
-      alignItems: a.center,
-      border: e.generic({
-        width: "1px",
-        color: r.border.primary.hover,
-        type: "dashed"
-      }),
-      borderRadius: d.default
-    }
-  },
-  uploadIcon: {
-    default: {
-      name: "upload",
-      width: l.size.lg.width,
-      height: l.size.lg.height
-    },
-    disabled: {
-      fill: r.icon.primary.disabled
-    }
-  },
-  contentTypography: {
-    default: {
-      margin: o.none
-    },
-    disabled: {
-      color: r.text.disabled
-    }
-  }
-};
-export {
-  h as draganddrop
-};

package/tokens/draganddropfiles.d.ts

@@ -1,3 +0,0 @@
-export declare const draganddropfiles: {
-    default: {};
-};

package/tokens/draganddropfiles.js

@@ -1,6 +0,0 @@
-const d = {
-  default: {}
-};
-export {
-  d as draganddropfiles
-};

package/tokens/flexContainer.d.ts

@@ -1,9 +0,0 @@
-import { FlexDirection } from '../types';
-export declare const flexContainer: {
-    default: {
-        display: string;
-        width: string;
-        margin: string;
-        flexDirection: FlexDirection;
-    };
-};

package/tokens/flexContainer.js

@@ -1,13 +0,0 @@
-import { display as i } from "./display.js";
-import { FlexDirection as o } from "../types/layout.js";
-const r = {
-  default: {
-    display: i.flex,
-    width: "100%",
-    margin: "0 auto",
-    flexDirection: o.Column
-  }
-};
-export {
-  r as flexContainer
-};

package/tokens/font.d.ts

@@ -1,47 +0,0 @@
-export declare const font: {
-    family: string;
-    weight: {
-        light: number;
-        normal: number;
-        medium: number;
-        bold: number;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        h1: string;
-        h2: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h6: string;
-        p: string;
-        small: string;
-        caption: string;
-        sub: string;
-        sup: string;
-    };
-    line: {
-        height: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            h1: string;
-            h2: string;
-            h3: string;
-            h4: string;
-            h5: string;
-            h6: string;
-            p: string;
-            small: string;
-            caption: string;
-            sub: string;
-            sup: string;
-        };
-    };
-};

package/tokens/font.js

@@ -1,52 +0,0 @@
-import { TypographyVariant as p } from "../types/typography.js";
-import { SizeVariant as x } from "../types/common.js";
-const a = {
-  family: '"Fira Sans", sans-serif',
-  weight: {
-    light: 300,
-    normal: 400,
-    medium: 500,
-    bold: 700
-  },
-  size: {
-    [x.Xs]: "32px",
-    [x.Sm]: "36px",
-    [x.Md]: "40px",
-    [x.Lg]: "48px",
-    [x.Xl]: "64px",
-    [p.H1]: "48px",
-    [p.H2]: "32px",
-    [p.H3]: "28px",
-    [p.H4]: "24px",
-    [p.H5]: "20px",
-    [p.H6]: "18px",
-    [p.Body1]: "16px",
-    [p.Body2]: "14px",
-    [p.Caption]: "12px",
-    [p.Sub]: "12px",
-    [p.Sup]: "12px"
-  },
-  line: {
-    height: {
-      [x.Xs]: "38px",
-      [x.Sm]: "44px",
-      [x.Md]: "48px",
-      [x.Lg]: "58px",
-      [x.Xl]: "77px",
-      [p.H1]: "56px",
-      [p.H2]: "36px",
-      [p.H3]: "34px",
-      [p.H4]: "28px",
-      [p.H5]: "26px",
-      [p.H6]: "24px",
-      [p.Body1]: "24px",
-      [p.Body2]: "20px",
-      [p.Caption]: "16px",
-      [p.Sub]: "16px",
-      [p.Sup]: "16px"
-    }
-  }
-};
-export {
-  a as font
-};

package/tokens/form.d.ts

@@ -1,3 +0,0 @@
-export declare const form: {
-    default: {};
-};

package/tokens/form.js

@@ -1,6 +0,0 @@
-const o = {
-  default: {}
-};
-export {
-  o as form
-};

package/tokens/header.d.ts

@@ -1,107 +0,0 @@
-export declare const header: {
-    container: {
-        fontFamily: string;
-        alignItems: string;
-        backgroundColor: string;
-        maxWidth: string;
-    };
-    topBannerRow: {
-        width: string;
-        backgroundColor: string;
-        color: string;
-    };
-    searchColumn: {
-        default: {
-            flexDirection: string;
-            justifyContent: string;
-            '& a': {
-                margin: string;
-            };
-        };
-    };
-    navigationRow: {
-        default: {
-            width: string;
-            padding: string;
-            alignItems: string;
-        };
-    };
-    actionsColumn: {
-        default: {
-            flexDirection: string;
-            '& > button': {
-                margin: string;
-            };
-        };
-    };
-    menuRow: {
-        default: {
-            width: string;
-            justifyContent: string;
-        };
-        column: {
-            flexDirection: string;
-            '& a': {
-                margin: string;
-            };
-        };
-    };
-    children: {
-        default: {
-            margin: string;
-        };
-    };
-    mobile: {
-        openedDropdownWrapper: {
-            position: string;
-            top: number;
-            left: number;
-            zIndex: number;
-            background: string;
-            width: string;
-            height: string;
-            padding: string;
-            overflowY: string;
-        };
-        closeMenuIconWrapper: {
-            width: string;
-            height: string;
-            display: string;
-            justifyContent: string;
-            alignItems: string;
-        };
-        openMenuIconWrapper: {
-            width: string;
-            height: string;
-            display: string;
-            justifyContent: string;
-            alignItems: string;
-        };
-        menuWrapper: {
-            margin: string;
-            borderTop: string;
-        };
-        menuItemWrapper: {
-            padding: string;
-            borderBottom: string;
-            cursor: string;
-        };
-    };
-    icons: {
-        close: {
-            name: string;
-            width: number;
-            height: number;
-        };
-        right: {
-            name: string;
-            width: number;
-            height: number;
-        };
-        menu: {
-            name: string;
-            width: number;
-            height: number;
-        };
-    };
-};

package/tokens/header.js

@@ -1,123 +0,0 @@
-import { spacing as e } from "./spacing.js";
-import { font as i } from "./font.js";
-import { colors as o } from "./colors.js";
-import { flexAlignItems as n, display as r } from "./display.js";
-import { borders as t } from "./borders.js";
-import { cursors as a } from "./cursors.js";
-import { Z_INDEX as l } from "../constants/positioning.js";
-const u = {
-  container: {
-    fontFamily: i.family,
-    alignItems: n.center,
-    backgroundColor: o.bg.surface,
-    maxWidth: "100%"
-  },
-  topBannerRow: {
-    width: "100%",
-    backgroundColor: o.neutral.black,
-    color: o.bg.surface
-  },
-  searchColumn: {
-    default: {
-      flexDirection: "row",
-      justifyContent: n.center,
-      "& a": {
-        margin: `${e.none} ${e.md}`
-      }
-    }
-  },
-  navigationRow: {
-    default: {
-      width: "100%",
-      padding: `${e.md} ${e.lg}`,
-      alignItems: n.center
-    }
-  },
-  actionsColumn: {
-    default: {
-      flexDirection: "row",
-      "& > button": {
-        margin: `${e.none} calc(${e.lg}/2)`
-      }
-    }
-  },
-  menuRow: {
-    default: {
-      width: "100%",
-      justifyContent: n.center
-    },
-    column: {
-      flexDirection: "row",
-      "& a": {
-        margin: `${e.none} ${e.md}`
-      }
-    }
-  },
-  children: {
-    default: {
-      margin: `${e.md} ${e.lg}`
-    }
-  },
-  mobile: {
-    openedDropdownWrapper: {
-      position: "fixed",
-      top: e.none,
-      left: e.none,
-      zIndex: l.HIGH,
-      background: o.neutral.white,
-      width: "100vw",
-      height: "100vh",
-      padding: `${e.xxl} ${e.lg} ${e.md}`,
-      overflowY: "auto"
-    },
-    closeMenuIconWrapper: {
-      width: "40px",
-      height: "40px",
-      display: r.flex,
-      justifyContent: "center",
-      alignItems: n.center
-    },
-    openMenuIconWrapper: {
-      width: "40px",
-      height: "40px",
-      display: r.flex,
-      justifyContent: "center",
-      alignItems: n.center
-    },
-    menuWrapper: {
-      margin: `${e.lg} ${e.none}`,
-      borderTop: t.generic({
-        width: "1px",
-        color: o.border.default
-      })
-    },
-    menuItemWrapper: {
-      padding: `calc(${e.xs}*3) ${e.none}`,
-      borderBottom: t.generic({
-        width: "1px",
-        color: o.border.default
-      }),
-      cursor: a.pointer
-    }
-  },
-  icons: {
-    close: {
-      name: "cross",
-      width: 24,
-      height: 24
-    },
-    right: {
-      name: "chevronRight",
-      width: 16,
-      height: 16
-    },
-    menu: {
-      name: "mobileMenu",
-      width: 40,
-      height: 40
-    }
-  }
-};
-export {
-  u as header
-};