@spaced-out/ui-design-system 0.3.45 → 0.3.46

package/lib/styles/variables/_font.d.ts

@@ -1,30 +0,0 @@
-export const fontFamilyCentra = '"Centra No 2"';
-export const fontWeightBook = '400';
-export const fontWeightMedium = '500';
-export const fontSize12 = '12px';
-export const fontSize13 = '13px';
-export const fontSize14 = '14px';
-export const fontSize16 = '16px';
-export const fontSize18 = '18px';
-export const fontSize24 = '24px';
-export const fontSize26 = '26px';
-export const fontSize36 = '36px';
-export const fontSize46 = '46px';
-export const fontLetterSpacing0 = '0em';
-export const fontLetterSpacing1 = '0.01em';
-export const fontLetterSpacing2 = '0.02em';
-export const fontLetterSpacing4 = '0.04em';
-export const fontLetterSpacingMinus1 = '-0.01em';
-export const fontLetterSpacingMinus2 = '-0.02em';
-export const fontLetterSpacingMinus3 = '-0.03em';
-export const fontLetterSpacingMinus4 = '-0.04em';
-export const fontLineHeight100 = '100%';
-export const fontLineHeight120 = '120%';
-export const fontLineHeight125 = '125%';
-export const fontLineHeight130 = '130%';
-export const fontLineHeight140 = '140%';
-export const fontLineHeight150 = '150%';
-export const fontLineHeight170 = '170%';
-export const fontParagraphSpacing0 = '0';
-export const fontTextCaseNone = 'none';
-export const fontTextDecorationNone = 'none';

package/lib/styles/variables/_motion.d.ts

@@ -1,6 +0,0 @@
-export const motionDurationFast = '100ms';
-export const motionDurationNormal = '200ms';
-export const motionDurationSlow = '300ms';
-export const motionDurationSlower = '500ms';
-export const motionDurationSlowest = '1000ms';
-export const motionEaseInEaseOut = 'ease-in-out';

package/lib/styles/variables/_opacity.d.ts

@@ -1,15 +0,0 @@
-export const opacity100 = '100%';
-export const opacity95 = '95%';
-export const opacity90 = '90%';
-export const opacity85 = '85%';
-export const opacity80 = '80%';
-export const opacity70 = '70%';
-export const opacity60 = '60%';
-export const opacity50 = '50%';
-export const opacity40 = '40%';
-export const opacity30 = '30%';
-export const opacity20 = '20%';
-export const opacity15 = '15%';
-export const opacity10 = '10%';
-export const opacity5 = '5%';
-export const opacity0 = '0%';

package/lib/styles/variables/_shadow.d.ts

@@ -1,24 +0,0 @@
-export const shadowBoxShadow1Color = '#12121214';
-export const shadowBoxShadow1Type = 'dropShadow';
-export const shadowBoxShadow1X = '0px';
-export const shadowBoxShadow1Y = '4px';
-export const shadowBoxShadow1Blur = '4px';
-export const shadowBoxShadow1Spread = '0px';
-export const shadowBoxShadow2Color = '#12121214';
-export const shadowBoxShadow2Type = 'dropShadow';
-export const shadowBoxShadow2X = '0px';
-export const shadowBoxShadow2Y = '8px';
-export const shadowBoxShadow2Blur = '8px';
-export const shadowBoxShadow2Spread = '0px';
-export const shadowBoxShadow3Color = '#1212121f';
-export const shadowBoxShadow3Type = 'dropShadow';
-export const shadowBoxShadow3X = '0px';
-export const shadowBoxShadow3Y = '12px';
-export const shadowBoxShadow3Blur = '12px';
-export const shadowBoxShadow3Spread = '0px';
-export const shadowBoxShadow4Color = '#12121233';
-export const shadowBoxShadow4Type = 'dropShadow';
-export const shadowBoxShadow4X = '0px';
-export const shadowBoxShadow4Y = '20px';
-export const shadowBoxShadow4Blur = '20px';
-export const shadowBoxShadow4Spread = '0px';

package/lib/styles/variables/_size.d.ts

@@ -1,57 +0,0 @@
-export const size2 = '2px';
-export const size4 = '4px';
-export const size5 = '5px';
-export const size8 = '8px';
-export const size10 = '10px';
-export const size12 = '12px';
-export const size18 = '18px';
-export const size20 = '20px';
-export const size22 = '22px';
-export const size24 = '24px';
-export const size26 = '26px';
-export const size28 = '28px';
-export const size30 = '30px';
-export const size32 = '32px';
-export const size34 = '34px';
-export const size36 = '36px';
-export const size38 = '38px';
-export const size40 = '40px';
-export const size42 = '42px';
-export const size44 = '44px';
-export const size48 = '48px';
-export const size50 = '50px';
-export const size58 = '58px';
-export const size60 = '60px';
-export const size66 = '66px';
-export const size70 = '70px';
-export const size90 = '90px';
-export const size100 = '100px';
-export const size110 = '110px';
-export const size125 = '125px';
-export const size140 = '140px';
-export const size160 = '160px';
-export const size180 = '180px';
-export const size200 = '200px';
-export const size228 = '228px';
-export const size240 = '240px';
-export const size252 = '252px';
-export const size260 = '260px';
-export const size276 = '276px';
-export const size300 = '300px';
-export const size320 = '320px';
-export const size380 = '380px';
-export const size400 = '400px';
-export const size480 = '480px';
-export const size500 = '500px';
-export const size540 = '540px';
-export const size580 = '580px';
-export const size640 = '640px';
-export const size660 = '660px';
-export const size720 = '720px';
-export const size800 = '800px';
-export const size880 = '880px';
-export const size960 = '960px';
-export const size1280 = '1280px';
-export const sizeFluid = '100%';
-export const sizeFullViewportHeight = '100vh';
-export const sizeFullViewportWidth = '100vw';

package/lib/styles/variables/_space.d.ts

@@ -1,12 +0,0 @@
-export const spaceNone = '0px';
-export const spaceXXSmall = '4px';
-export const spaceXSmall = '8px';
-export const spaceSmall = '12px';
-export const spaceMedium = '20px';
-export const spaceLarge = '32px';
-export const spaceXLarge = '52px';
-export const spaceXXLarge = '84px';
-export const spaceFluid = '100%';
-export const spaceNegFluid = '-100%';
-export const spaceHalfFluid = '50%';
-export const spaceNegHalfFluid = '-50%';

package/lib/types/charts.d.ts

@@ -1,225 +0,0 @@
-export type ChartOptions = {
-  chart?: {
-    polar?: boolean;
-    type?: string;
-    spacing?: Array<number>;
-    margin?: Array<number>;
-    style?: CSSObject;
-    spacing?: [number, number, number, number];
-    spacingBottom?: number;
-    spacingLeft?: number;
-    spacingRight?: number;
-    spacingTop?: number;
-  };
-  title?: {
-    align?: string;
-    floating?: boolean;
-    margin?: number;
-    style?: {
-      color?: string;
-      fontWeight?: string;
-    };
-    text?: string | null;
-    useHTML?: boolean;
-    verticalAlign?: 'top' | 'middle' | 'bottom';
-    widthAdjust?: number;
-    x?: number;
-    y?: number;
-  };
-  exporting?: {
-    allowHTML?: boolean;
-    allowTableSorting?: boolean;
-    buttons?: {
-      contextButton?: {
-        enabled?: boolean;
-      };
-    };
-    enabled?: boolean;
-    filename?: string;
-    showExportInProgress?: boolean;
-    showTable?: boolean;
-    sourceHeight?: number;
-    sourceWidth?: number;
-    useRowspanHeaders?: boolean;
-    width?: number;
-  };
-  credits?: Credits;
-  tooltip?: Tooltip;
-  xAxis?: AxisOptions;
-  yAxis?: AxisOptions;
-  zAxis?: AxisOptions;
-  drilldown?: Drilldown;
-  legend?: LegendOptionsType;
-  plotOptions?: PlotOptionsType;
-  series?: Array<SeriesOptionsType>;
-  subtitle?: {
-    useHTML: boolean;
-    text?: string;
-    verticalAlign?: 'middle';
-    align?: string;
-    style?: CSSObject;
-    x?: number;
-  };
-  pane?: {
-    center?: [string, string];
-    size?: string;
-  };
-  legend?: Legend;
-  navigation?: Navigation;
-};
-export type AxisOptions = {
-  categories?: Array<string>;
-  gridLineInterpolation?: 'circle' | 'polygon';
-  lineWidth?: number;
-  tickmarkPlacement?: string;
-  labels?: {
-    align?: string;
-    distance?: number;
-    style?: CSSObject;
-  };
-  title?: {
-    text?: string;
-    margin?: number;
-    style?: CSSObject;
-  };
-  type?: string;
-};
-export type BreadcrumbsOptions = {
-  floating?: boolean;
-  style?: CSSObject;
-};
-export type LegendOptionsType = {
-  layout?: string;
-  align?: string;
-  verticalAlign?: string;
-  itemMarginBottom?: number;
-  padding?: number;
-  itemStyle?: CSSObject;
-  enabled?: boolean;
-  symbolHeight?: number;
-  symbolWidth?: number;
-};
-export type CSSObject = {
-  alignItems?: string;
-  color?: string;
-  display?: string;
-  fontFamily?: string;
-  fontSize?: string;
-  fontStyle?: string;
-  fontWeight?: string;
-  letterSpacing?: string;
-  lineHeight?: string;
-  margin?: number;
-  textAlign?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  minHeight?: string;
-  maxHeight?: string;
-  alignContent?: string;
-  overflow?: string;
-  textOverflow?: string;
-  zIndex?: number;
-};
-export type DataOptionsType = {
-  y?: number;
-  name?: string;
-  color?: string;
-  drilldown?: string;
-  id?: string;
-};
-export type SeriesOptionsType = {
-  id?: string;
-  name?: string;
-  data: Array<DataOptionsType>;
-};
-export type Drilldown = {
-  activeAxisLabelStyle?: CSSObject;
-  activeDataLabelStyle?: CSSObject;
-  series?: Array<SeriesOptionsType>;
-  breadcrumbs?: BreadcrumbsOptions;
-};
-export type PlotOptionsType = {
-  [key in 'pie' | 'line' | 'funnel']?: {
-    innerSize?: string;
-    allowPointSelect?: boolean;
-    cursor?: 'pointer';
-    dataLabels?: {
-      enabled?: boolean;
-      distance?: number;
-      connectorColor?: string;
-      useHTML?: boolean;
-      format?: string;
-      style?: CSSObject;
-    };
-    showInLegend?: boolean;
-    center?: [string, string];
-    size?: string;
-    minSize?: number | string;
-    borderWidth?: number;
-    borderRadius?: number;
-    neckWidth?: string | number;
-    neckHeight?: string | number;
-    minSize?: string | number;
-    width?: string | number;
-  };
-};
-export type Tooltip = {
-  useHTML?: boolean;
-  followPointer?: boolean;
-  backgroundColor?: string;
-  style?: CSSObject;
-  outside?: boolean;
-  headerFormat?: string;
-  pointFormat?: string;
-  shared?: boolean;
-};
-export type Legend = {
-  align?: 'left' | 'center' | 'right';
-  alignColumns?: boolean;
-  backgroundColor?: string;
-  borderColor?: string;
-  borderRadius?: number;
-  borderWidth?: number;
-  className?: string;
-  enabled?: boolean;
-  floating?: boolean;
-  itemDistance?: number;
-  itemMarginBottom?: number;
-  itemMarginBottom?: number;
-  itemMarginBottom?: number;
-  labelFormat?: string;
-  layout?: 'horizontal' | 'vertical' | 'proximate';
-  margin?: number;
-  maxHeight?: number;
-  padding?: number;
-  reversed?: boolean;
-  x?: number;
-  y?: number;
-};
-export type Credits = {
-  enabled?: boolean;
-  href?: string;
-  position?: {
-    align?: 'right' | 'left';
-    verticalAlign?: 'bottom' | 'top';
-    x?: number;
-    y?: number;
-  };
-};
-export type Navigation = {
-  breadcrumbs?: Breadcrumbs;
-};
-export type Breadcrumbs = {
-  position?: Position;
-  style?: CSSObject;
-  buttonTheme?: ButtonTheme;
-};
-export type ButtonTheme = {
-  style?: CSSObject;
-};
-export type Position = {
-  align?: string;
-  verticalAlign?: string;
-  x?: number;
-  y?: number;
-};

package/lib/types/common.d.ts

@@ -1,10 +0,0 @@
-import {$Values} from 'utility-types';
-export type GroupAlign = 'vertical' | 'horizontal-fixed' | 'horizontal-fluid';
-export const ALERT_SEMANTIC = Object.freeze({
-  neutral: 'neutral',
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger',
-});
-export type AlertSemanticType = $Values<typeof ALERT_SEMANTIC>;

package/lib/types/date-range-picker.d.ts

@@ -1,17 +0,0 @@
-import {$Keys} from 'utility-types';
-import {DATE_RANGE_PICKER_ERRORS} from '../utils/date-range-picker';
-export type TimeUnit = 'years' | 'months' | 'days' | 'd' | 'M' | 'y';
-export type DateRange = {
-  startDate?: string | null | undefined;
-  endDate?: string | null | undefined;
-};
-export type DateRangePickerErrorTypes = $Keys<typeof DATE_RANGE_PICKER_ERRORS>;
-export type DateRangePickerError = {
-  type: string;
-  description: string;
-};
-export type DateRangeWithTimezone = DateRange & {
-  startDateUTC?: string | null | undefined;
-  endDateUTC?: string | null | undefined;
-  timezone?: string;
-};

package/lib/types/index.d.ts

@@ -1,6 +0,0 @@
-export * from './charts';
-export * from './common';
-export * from './date-range-picker';
-export * from './menu';
-export * from './toast';
-export * from './typography';

package/lib/types/menu.d.ts

@@ -1,13 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-export type MenuClassNames = $ReadOnly<{
-  wrapper?: string;
-  option?: string;
-  groupTitle?: string;
-  optionTextContainer?: string;
-  optionTextLabel?: string;
-  header?: string;
-  footer?: string;
-}>;
-export type MenuLabelTooltip = {
-  maxLines?: number;
-};

package/lib/types/toast.d.ts

@@ -1,32 +0,0 @@
-import {$Values} from 'utility-types';
-import * as React from 'react';
-export const POSITIONS = {
-  TOP_CENTER: 'topCenter',
-  TOP_LEFT: 'topLeft',
-  TOP_RIGHT: 'topRight',
-  BOTTOM_LEFT: 'bottomLeft',
-  BOTTOM_RIGHT: 'bottomRight',
-  BOTTOM_CENTER: 'bottomCenter',
-};
-export const ACTIONS = {
-  ADD: 'ADD',
-  REMOVE: 'REMOVE',
-};
-export type positionTypes = $Values<typeof POSITIONS>;
-export type actionTypes = $Values<typeof ACTIONS>;
-export type contentTypes = React.ReactNode;
-export type ToastOptions = {
-  timeout?: number;
-  position?: positionTypes;
-  autoClose?: boolean;
-  uniqueCode?: string | number;
-};
-export type optionTypes = ToastOptions & {
-  id: string;
-  key?: string;
-};
-export type callbackFuncTypes = (
-  type: actionTypes,
-  content: contentTypes,
-  options: optionTypes,
-) => void;

package/lib/types/typography.d.ts

@@ -1,17 +0,0 @@
-import {$Values} from 'utility-types';
-export const TEXT_COLORS = Object.freeze({
-  primary: 'primary',
-  secondary: 'secondary',
-  tertiary: 'tertiary',
-  disabled: 'disabled',
-  clickable: 'clickable',
-  neutral: 'neutral',
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger',
-  inversePrimary: 'inversePrimary',
-  inverseSecondary: 'inverseSecondary',
-  favorite: 'favorite',
-});
-export type ColorTypes = $Values<typeof TEXT_COLORS>;

package/lib/utils/array/are-arrays-equal.d.ts

@@ -1,11 +0,0 @@
-type ItemComparer<Item> = (a: Item, b: Item) => boolean;
-export function areArraysEqual<Item>(
-  array1: Item[],
-  array2: Item[],
-  itemComparer: ItemComparer<Item> = (a, b) => a === b,
-): boolean {
-  return (
-    array1.length === array2.length &&
-    array1.every((value, index) => itemComparer(value, array2[index]))
-  );
-}

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

@@ -1 +0,0 @@
-export * from './are-arrays-equal';

package/lib/utils/charts/charts.d.ts

@@ -1,102 +0,0 @@
-import {$Shape} from 'utility-types';
-import {
-  colorDataViz1,
-  colorDataViz2,
-  colorDataViz3,
-  colorDataViz4,
-  colorDataViz5,
-  colorDataViz6,
-  colorDataViz7,
-  colorDataViz8,
-  colorFillInversePrimary,
-  colorTextSecondary,
-  colorTooltipFill,
-} from '../../styles/variables/_color';
-import type {ChartOptions} from '../../types/charts';
-import {deepMerge} from './helpers';
-import {formLabelSmall, subTitleExtraSmall} from './typography';
-import css from '../../components/Charts/ChartTooltip/ChartTooltip.module.css';
-import typographyCss from '../../styles/typography.module.css';
-export const DATA_VIZ_COLORS = [
-  colorDataViz1,
-  colorDataViz2,
-  colorDataViz3,
-  colorDataViz4,
-  colorDataViz5,
-  colorDataViz6,
-  colorDataViz7,
-  colorDataViz8,
-];
-export const getDataVizColor = (dataIndex: number): string => {
-  const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
-  return DATA_VIZ_COLORS[colorIndex];
-};
-export const breadcrumbStyle = {
-  ...subTitleExtraSmall,
-  color: colorTextSecondary,
-};
-export const commonChartOptions: $Shape<ChartOptions> = {
-  chart: {
-    spacingBottom: 0,
-    spacingLeft: 0,
-    spacingRight: 0,
-  },
-  title: {
-    text: null,
-  },
-  exporting: {
-    buttons: {
-      contextButton: {
-        enabled: false,
-      },
-    },
-  },
-  credits: {
-    enabled: false,
-  },
-  tooltip: {
-    followPointer: false,
-    backgroundColor: colorTooltipFill,
-    useHTML: true,
-    outside: true,
-    headerFormat: `<span class="${typographyCss.bodySmall} ${css.tooltipHeader}">{point.key}</span>`,
-    pointFormat: `<span class=${css.tooltipPoint}>
-        <span style="background-color:{point.color};" class=${css.indicatorCircle}></span>
-        <span class="${css.tooltipContent} ${typographyCss.bodyMedium}"> {series.name}: {point.y}</span>
-      </span>`,
-  },
-  drilldown: {
-    breadcrumbs: {
-      floating: true,
-      style: breadcrumbStyle,
-      buttonTheme: {
-        style: breadcrumbStyle,
-      },
-    },
-  },
-  legend: {
-    itemStyle: {...formLabelSmall, paddingTop: '1px'},
-    symbolHeight: 8,
-    enabled: true,
-  },
-  xAxis: {
-    type: 'category',
-    padding: 0,
-  },
-  navigation: {
-    breadcrumbs: {
-      buttonTheme: {
-        style: {
-          color: colorFillInversePrimary,
-        },
-      },
-      separator: {
-        text: '>',
-      },
-    },
-  },
-};
-export const mergeChartUserOptions = (
-  defaultoptions: ChartOptions,
-  userOptions: ChartOptions,
-): ChartOptions => deepMerge(defaultoptions, userOptions);

package/lib/utils/charts/columnChart.d.ts

@@ -1,51 +0,0 @@
-import {colorBorderPrimary} from '../../styles/variables/_color';
-import type {ChartOptions} from '../../types/charts';
-import {commonChartOptions} from './charts';
-import {
-  activeLabelStyle,
-  bottomLegendRow,
-  xAxisLabelStyle,
-  xAxisTitleStyle,
-  yAxisLabelStyle,
-  yAxisTitleStyle,
-} from './helpers';
-
-/**
- * This function modifies the the common chart behavior to column chart default behavior.
- * It will not take userPassed option into account.
- */
-export const getColumnChartOptions = (): ChartOptions => ({
-  ...commonChartOptions,
-  chart: {...commonChartOptions.chart, type: 'column'},
-  legend: {...commonChartOptions.legend, ...bottomLegendRow, symbolWidth: 18},
-  xAxis: {
-    ...commonChartOptions.xAxis,
-    labels: {
-      style: xAxisLabelStyle,
-    },
-    title: {
-      margin: 12,
-      style: xAxisTitleStyle,
-    },
-    lineColor: colorBorderPrimary,
-  },
-  yAxis: {
-    labels: {
-      align: 'right',
-      distance: 12,
-      style: yAxisLabelStyle,
-    },
-    title: {
-      margin: 12,
-      style: yAxisTitleStyle,
-    },
-  },
-  drilldown: {
-    activeAxisLabelStyle: activeLabelStyle,
-    activeDataLabelStyle: activeLabelStyle,
-    breadcrumbs: {
-      floating: true,
-    },
-  },
-});
-export const columnPlotWidth = 28;