@scaleflex/ui-tw 0.0.1

package/utils/functions/set-ref.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * passes {value} to {ref}
+ * Useful if you want to expose the ref of an inner component to the public API
+ * while still using it inside the component.
+ * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
+ */
+export default function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;

package/utils/functions/set-ref.js

@@ -0,0 +1,13 @@
+/**
+ * passes {value} to {ref}
+ * Useful if you want to expose the ref of an inner component to the public API
+ * while still using it inside the component.
+ * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
+ */
+export default function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}

package/utils/functions/shadcn-utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/utils/functions/shadcn-utils.js

@@ -0,0 +1,8 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn() {
+  for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
+    inputs[_key] = arguments[_key];
+  }
+  return twMerge(clsx(inputs));
+}

package/utils/functions/slider/utils.d.ts

@@ -0,0 +1,47 @@
+export declare function asc(a: number, b: number): number;
+export declare function valueToPercent(value: number, min: number, max: number): number;
+export declare function percentToValue(percent: number, min: number, max: number): number;
+export declare function roundValueToStep(value: number, step: number, min: number): number;
+export declare function setValueIndex({ values, newValue, index, }: {
+    values: number[];
+    newValue: number;
+    index: number;
+}): number | number[];
+export declare function findClosest(values: number[], currentValue: number): number;
+export declare function ownerDocument(node: Node | null | undefined): Document;
+export declare function clamp(value: number | null, min: number, max: number): number;
+export declare function trackFinger(event: any, touchId: any): {
+    x: number | null;
+    y: number | null;
+} | boolean;
+export declare const axisProps: {
+    horizontal: {
+        offset: (percent: number) => {
+            left: string;
+        };
+        leap: (percent: number) => {
+            width: string;
+        };
+    };
+    'horizontal-reverse': {
+        offset: (percent: number) => {
+            right: string;
+        };
+        leap: (percent: number) => {
+            width: string;
+        };
+    };
+    vertical: {
+        offset: (percent: number) => {
+            bottom: string;
+        };
+        leap: (percent: number) => {
+            height: string;
+        };
+    };
+};
+export declare function focusThumb({ sliderRef, activeIndex, setActive, }: {
+    sliderRef: any;
+    activeIndex: number;
+    setActive?: any;
+}): void;

package/utils/functions/slider/utils.js

@@ -0,0 +1,124 @@
+export function asc(a, b) {
+  return a - b;
+}
+export function valueToPercent(value, min, max) {
+  return (value - min) * 100 / (max - min);
+}
+export function percentToValue(percent, min, max) {
+  return (max - min) * percent + min;
+}
+function getDecimalPrecision(num) {
+  // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
+  // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
+  if (Math.abs(num) < 1) {
+    var parts = num.toExponential().split('e-');
+    var matissaDecimalPart = parts[0].split('.')[1];
+    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + Number.parseInt(parts[1], 10);
+  }
+  var decimalPart = num.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+export function roundValueToStep(value, step, min) {
+  var nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+export function setValueIndex(_ref) {
+  var values = _ref.values,
+    newValue = _ref.newValue,
+    index = _ref.index;
+  var output = values.slice();
+  output[index] = newValue;
+  return output.sort(asc);
+}
+export function findClosest(values, currentValue) {
+  var _values$reduce = values.reduce(function (acc, value, index) {
+      var distance = Math.abs(currentValue - value);
+      if (acc === null || distance < acc.distance || distance === acc.distance) {
+        return {
+          distance: distance,
+          index: index
+        };
+      }
+      return acc;
+    }, null),
+    closestIndex = _values$reduce.index;
+  return closestIndex;
+}
+export function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}
+export function clamp(value, min, max) {
+  if (value == null) {
+    return min;
+  }
+  return Math.min(Math.max(min, value), max);
+}
+export function trackFinger(event, touchId) {
+  if (touchId.current !== undefined && event.changedTouches) {
+    for (var i = 0; i < event.changedTouches.length; i += 1) {
+      var touch = event.changedTouches[i];
+      if (touch.identifier === touchId.current) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY
+        };
+      }
+    }
+    return false;
+  }
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+export var axisProps = {
+  horizontal: {
+    offset: function offset(percent) {
+      return {
+        left: "".concat(percent, "%")
+      };
+    },
+    leap: function leap(percent) {
+      return {
+        width: "".concat(percent, "%")
+      };
+    }
+  },
+  'horizontal-reverse': {
+    offset: function offset(percent) {
+      return {
+        right: "".concat(percent, "%")
+      };
+    },
+    leap: function leap(percent) {
+      return {
+        width: "".concat(percent, "%")
+      };
+    }
+  },
+  vertical: {
+    offset: function offset(percent) {
+      return {
+        bottom: "".concat(percent, "%")
+      };
+    },
+    leap: function leap(percent) {
+      return {
+        height: "".concat(percent, "%")
+      };
+    }
+  }
+};
+export function focusThumb(_ref2) {
+  var sliderRef = _ref2.sliderRef,
+    activeIndex = _ref2.activeIndex,
+    setActive = _ref2.setActive;
+  var doc = ownerDocument(sliderRef.current);
+  if (!sliderRef.current.contains(doc.activeElement) || Number(doc.activeElement.getAttribute('data-index')) !== activeIndex) {
+    var _sliderRef$current$qu;
+    (_sliderRef$current$qu = sliderRef.current.querySelector("[type=\"range\"][data-index=\"".concat(activeIndex, "\"]"))) === null || _sliderRef$current$qu === void 0 || _sliderRef$current$qu.focus();
+  }
+  if (setActive) {
+    setActive(activeIndex);
+  }
+}

package/utils/functions/use-fork-ref.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useForkRef<T>(refA: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, refB: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined): any;

package/utils/functions/use-fork-ref.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import setRef from './set-ref';
+export function useForkRef(refA, refB) {
+  /**
+   * This will create a new function if the ref props change and are defined.
+   * This means react will call the old forkRef with `null` and the new forkRef
+   * with the ref. Cleanup naturally emerges from this behavior.
+   */
+  return React.useMemo(function () {
+    if (refA == null && refB == null) {
+      return null;
+    }
+    return function (refValue) {
+      setRef(refA, refValue);
+      setRef(refB, refValue);
+    };
+  }, [refA, refB]);
+}

package/utils/types/color/icon-button-color.d.ts

@@ -0,0 +1,5 @@
+export declare const IconButtonColor: {
+    readonly Primary: "primary";
+    readonly Secondary: "secondary";
+    readonly Basic: "basic";
+};

package/utils/types/color/icon-button-color.js

@@ -0,0 +1,5 @@
+export var IconButtonColor = {
+  Primary: 'primary',
+  Secondary: 'secondary',
+  Basic: 'basic'
+};

package/utils/types/color/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButtonColor } from './icon-button-color';
+export { InputBackgroundColor } from './input-background-color';

package/utils/types/color/index.js

@@ -0,0 +1,2 @@
+export { IconButtonColor } from './icon-button-color';
+export { InputBackgroundColor } from './input-background-color';

package/utils/types/color/input-background-color.d.ts

@@ -0,0 +1,4 @@
+export declare const InputBackgroundColor: {
+    readonly Primary: "primary";
+    readonly Secondary: "secondary";
+};

package/utils/types/color/input-background-color.js

@@ -0,0 +1,4 @@
+export var InputBackgroundColor = {
+  Primary: 'primary',
+  Secondary: 'secondary'
+};

package/utils/types/css/align.d.ts

@@ -0,0 +1,11 @@
+export declare const Align: {
+    readonly Start: "start";
+    readonly End: "end";
+    readonly Center: "center";
+    readonly Baseline: "baseline";
+    readonly Stretch: "stretch";
+    readonly Initial: "initial";
+    readonly SpaceBetween: "space-between";
+    readonly SpaceAround: "space-around";
+    readonly SpaceEvenly: "space-evenly";
+};

package/utils/types/css/align.js

@@ -0,0 +1,11 @@
+export var Align = {
+  Start: 'start',
+  End: 'end',
+  Center: 'center',
+  Baseline: 'baseline',
+  Stretch: 'stretch',
+  Initial: 'initial',
+  SpaceBetween: 'space-between',
+  SpaceAround: 'space-around',
+  SpaceEvenly: 'space-evenly'
+};

package/utils/types/css/breakpoint.d.ts

@@ -0,0 +1,18 @@
+export declare const Breakpoint: {
+    readonly Xs: "xs";
+    readonly Sm: "sm";
+    readonly Md: "md";
+    readonly Lg: "lg";
+    readonly Xl: "xl";
+    readonly Xxl: "xxl";
+    readonly Xxxl: "xxxl";
+};
+export declare const BreakpointClass: {
+    Xs: string;
+    Sm: string;
+    Md: string;
+    Lg: string;
+    Xl: string;
+    Xxl: string;
+    Xxxl: string;
+};

package/utils/types/css/breakpoint.js

@@ -0,0 +1,18 @@
+export var Breakpoint = {
+  Xs: 'xs',
+  Sm: 'sm',
+  Md: 'md',
+  Lg: 'lg',
+  Xl: 'xl',
+  Xxl: 'xxl',
+  Xxxl: 'xxxl'
+};
+export var BreakpointClass = {
+  Xs: '.sfx-breakpoint-xs',
+  Sm: '.sfx-breakpoint-sm',
+  Md: '.sfx-breakpoint-md',
+  Lg: '.sfx-breakpoint-lg',
+  Xl: '.sfx-breakpoint-xl',
+  Xxl: '.sfx-breakpoint-xxl',
+  Xxxl: '.sfx-breakpoint-xxxl'
+};

package/utils/types/css/direction.d.ts

@@ -0,0 +1,8 @@
+import { Values, With } from '..';
+export declare const Direction: {
+    readonly Row: "row";
+    readonly Column: "column";
+};
+export type WithDirection<T = undefined> = With<T, {
+    direction?: Values<typeof Direction>;
+}>;

package/utils/types/css/direction.js

@@ -0,0 +1,4 @@
+export var Direction = {
+  Row: 'row',
+  Column: 'column'
+};

package/utils/types/css/index.d.ts

@@ -0,0 +1,4 @@
+export * from './align';
+export * from './position';
+export * from './direction';
+export * from './breakpoint';

package/utils/types/css/index.js

@@ -0,0 +1,4 @@
+export * from './align';
+export * from './position';
+export * from './direction';
+export * from './breakpoint';

package/utils/types/css/position.d.ts

@@ -0,0 +1,6 @@
+export declare const Position: {
+    readonly Top: "top";
+    readonly Right: "right";
+    readonly Bottom: "bottom";
+    readonly Left: "left";
+};

package/utils/types/css/position.js

@@ -0,0 +1,6 @@
+export var Position = {
+  Top: 'top',
+  Right: 'right',
+  Bottom: 'bottom',
+  Left: 'left'
+};

package/utils/types/index.d.ts

@@ -0,0 +1,8 @@
+export type { StylableComponent } from './stylable-component';
+export type { IntrinsicComponent } from './intrinsic-component';
+export type { With } from './with';
+export type { Keys } from './keys';
+export type { Values } from './values';
+export { Position } from './position';
+export * from './color';
+export * from './size';

package/utils/types/index.js

@@ -0,0 +1,3 @@
+export { Position } from './position';
+export * from './color';
+export * from './size';

package/utils/types/intrinsic-component.d.ts

@@ -0,0 +1 @@
+export type IntrinsicComponent<P> = Omit<P, 'style' | 'children'>

package/utils/types/keys.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Type-only Object.keys
+ */
+export type Keys<T> = keyof T

package/utils/types/palette/color.d.ts

@@ -0,0 +1,133 @@
+export declare const Color: {
+    readonly TextPrimary: "txt-primary";
+    readonly TextSecondary: "txt-secondary";
+    readonly TextSecondaryInvert: "txt-secondary-invert";
+    readonly TextPlaceholder: "txt-placeholder";
+    readonly TextWarning: "txt-warning";
+    readonly TextError: "txt-error";
+    readonly TextInfo: "txt-info";
+    readonly AccentPrimary: "accent-primary";
+    readonly AccentPrimaryHover: "accent-primary-hover";
+    readonly AccentPrimaryActive: "accent-primary-active";
+    readonly AccentPrimaryDisabled: "accent-primary-disabled";
+    readonly AccentSecondaryDisabled: "accent-secondary-disabled";
+    readonly AccentStateless: "accent-stateless";
+    readonly AccentStateless_0_4_Opacity: "accent-stateless_0_4_opacity";
+    readonly Accent_0_5_5_Opacity: "accent_0_5_5_opacity";
+    readonly Accent_0_5_Opacity: "accent_0_5_opacity";
+    readonly Accent_0_7_Opacity: "accent_0_7_opacity";
+    readonly Accent_1_2_Opacity: "accent_1_2_opacity";
+    readonly Accent_1_8_Opacity: "accent_1_8_opacity";
+    readonly Accent_2_8_Opacity: "accent_2_8_opacity";
+    readonly Accent_4_0_Opacity: "accent_4_0_opacity";
+    readonly BackgroundGrey: "bg-grey";
+    readonly BackgroundStateless: "bg-stateless";
+    readonly BackgroundActive: "bg-active";
+    readonly BackgroundBaseLight: "bg-base-light";
+    readonly BackgroundBaseMedium: "bg-base-medium";
+    readonly BackgroundPrimary: "bg-primary";
+    readonly BackgroundPrimaryLight: "bg-primary-light";
+    readonly BackgroundPrimaryHover: "bg-primary-hover";
+    readonly BackgroundPrimaryActive: "bg-primary-active";
+    readonly BackgroundPrimaryStateless: "bg-primary-stateless";
+    readonly BackgroundPrimary_0_5_Opacity: "bg-primary-0-5-opacity";
+    readonly BackgroundSecondary: "bg-secondary";
+    readonly BackgroundHover: "bg-hover";
+    readonly BackgroundGreen: "bg-green";
+    readonly BackgroundGreenMedium: "bg-green-medium";
+    readonly BackgroundBlue: "bg-blue";
+    readonly BackgroundRed: "bg-red";
+    readonly BackgroundRedLight: "bg-red-light";
+    readonly BackgroundRedMedium: "background-red-medium";
+    readonly BackgroundOrange: "bg-orange";
+    readonly BackgroundTooltip: "bg-tooltip";
+    readonly IconsPrimary: "icon-primary";
+    readonly IconsPrimaryOpacity_0_6: "icons-primary-opacity-0-6";
+    readonly IconsSecondary: "icons-secondary";
+    readonly IconsPlaceholder: "icons-placeholder";
+    readonly IconsInvert: "icons-invert";
+    readonly IconsMuted: "icons-muted";
+    readonly IconsPrimaryHover: "icons-primary-hover";
+    readonly IconsSecondaryHover: "icons-secondary-hover";
+    readonly ButtonPrimaryText: "btn-primary-text";
+    readonly ButtonPrimaryText_0_6: "btn-primary-text-0-6";
+    readonly ButtonPrimaryText_0_4: "btn-primary-text-0-4";
+    readonly ButtonDisabledText: "btn-disabled-text";
+    readonly ButtonSecondaryText: "btn-secondary-text";
+    readonly LinkPrimary: "link-primary";
+    readonly LinkStateless: "link-stateless";
+    readonly LinkHover: "link-hover";
+    readonly LinkActive: "link-active";
+    readonly LinkMuted: "link-muted";
+    readonly LinkPressed: "link-pressed";
+    readonly BordersPrimary: "borders-primary";
+    readonly BordersPrimaryHover: "borders-primary-hover";
+    readonly BordersSecondary: "borders-secondary";
+    readonly BordersStrong: "borders-strong";
+    readonly BordersInvert: "borders-invert";
+    readonly BorderHoverBottom: "border-hover-bottom";
+    readonly BorderActiveBottom: "border-active-bottom";
+    readonly BorderPrimaryStateless: "border-primary-stateless";
+    readonly BordersDisabled: "borders-disabled";
+    readonly BordersButton: "borders-button";
+    readonly BordersItem: "borders-item";
+    readonly BordersBaseLight: "borders-base-light";
+    readonly BordersBaseMedium: "borders-base-medium";
+    readonly BordersGreen: "borders-green";
+    readonly BordersGreenMedium: "borders-green-medium";
+    readonly BordersRed: "borders-red";
+    readonly ActiveSecondary: "active-secondary";
+    readonly ActiveSecondaryHover: "active-secondary-hover";
+    readonly Tag: "tag";
+    readonly StatesErrorDisabledText: "states-error-disabled-text";
+    readonly Error: "error";
+    readonly Error_0_28_Opacity: "error-0-28-opacity";
+    readonly Error_0_12_Opacity: "error-0-12-opacity";
+    readonly ErrorHover: "error-hover";
+    readonly ErrorActive: "error-active";
+    readonly Success: "success";
+    readonly SuccessHover: "success-hover";
+    readonly SuccessActive: "success-Active";
+    readonly Warning: "warning";
+    readonly WarningHover: "warning-hover";
+    readonly WarningActive: "warning-active";
+    readonly Info: "info";
+    readonly Modified: "modified";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Salad: "salad";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Indigo: "indigo";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+    readonly GradientRight: "gradient-right";
+    readonly Extra_0_3_Overlay: "extra-0-3-overlay";
+    readonly GradientRightActive: "gradient-right-active";
+    readonly GradientRightHover: "gradient-right-hover";
+    readonly Extra_0_5_Overlay: "extra-0-5-overlay";
+    readonly Extra_0_7_Overlay: "extra-0-7-overlay";
+    readonly Extra_0_9_Overlay: "extra-0-9-overlay";
+    readonly Red_0_1_Overlay: "red-0-1-overlay";
+    readonly Orange_0_1_Overlay: "orange-0-1-overlay";
+    readonly Accent_0_8_Overlay: "accent-0-8-overlay";
+    readonly Green_0_2_Overlay: "green-0-2-Overlay";
+    readonly WHITE_0_7_8_Overlay: "white-0-7-8-overlay";
+    readonly Link: "link";
+    readonly Camera: "camera";
+    readonly GoogleDrive: "google-drive";
+    readonly Dropbox: "dropbox";
+    readonly OneDrive: "one-drive";
+    readonly Device: "device";
+    readonly Instagram: "instagram";
+    readonly FreeImages: "free-images";
+    readonly FreeIcons: "free-icons";
+    readonly Canvas: "canvas";
+    readonly Box: "box";
+    readonly ScreenCast: "screen-cast";
+    readonly Unsplash: "unsplash";
+    readonly LightShadow: "light-shadow";
+    readonly MediumShadow: "medium-shadow";
+    readonly LargeShadow: "large-shadow";
+    readonly XLargeShadow: "x-large-shadow";
+};

package/utils/types/palette/color.js

@@ -0,0 +1,133 @@
+export var Color = {
+  TextPrimary: 'txt-primary',
+  TextSecondary: 'txt-secondary',
+  TextSecondaryInvert: 'txt-secondary-invert',
+  TextPlaceholder: 'txt-placeholder',
+  TextWarning: 'txt-warning',
+  TextError: 'txt-error',
+  TextInfo: 'txt-info',
+  AccentPrimary: 'accent-primary',
+  AccentPrimaryHover: 'accent-primary-hover',
+  AccentPrimaryActive: 'accent-primary-active',
+  AccentPrimaryDisabled: 'accent-primary-disabled',
+  AccentSecondaryDisabled: 'accent-secondary-disabled',
+  AccentStateless: 'accent-stateless',
+  AccentStateless_0_4_Opacity: 'accent-stateless_0_4_opacity',
+  Accent_0_5_5_Opacity: 'accent_0_5_5_opacity',
+  Accent_0_5_Opacity: 'accent_0_5_opacity',
+  Accent_0_7_Opacity: 'accent_0_7_opacity',
+  Accent_1_2_Opacity: 'accent_1_2_opacity',
+  Accent_1_8_Opacity: 'accent_1_8_opacity',
+  Accent_2_8_Opacity: 'accent_2_8_opacity',
+  Accent_4_0_Opacity: 'accent_4_0_opacity',
+  BackgroundGrey: 'bg-grey',
+  BackgroundStateless: 'bg-stateless',
+  BackgroundActive: 'bg-active',
+  BackgroundBaseLight: 'bg-base-light',
+  BackgroundBaseMedium: 'bg-base-medium',
+  BackgroundPrimary: 'bg-primary',
+  BackgroundPrimaryLight: 'bg-primary-light',
+  BackgroundPrimaryHover: 'bg-primary-hover',
+  BackgroundPrimaryActive: 'bg-primary-active',
+  BackgroundPrimaryStateless: 'bg-primary-stateless',
+  BackgroundPrimary_0_5_Opacity: 'bg-primary-0-5-opacity',
+  BackgroundSecondary: 'bg-secondary',
+  BackgroundHover: 'bg-hover',
+  BackgroundGreen: 'bg-green',
+  BackgroundGreenMedium: 'bg-green-medium',
+  BackgroundBlue: 'bg-blue',
+  BackgroundRed: 'bg-red',
+  BackgroundRedLight: 'bg-red-light',
+  BackgroundRedMedium: 'background-red-medium',
+  BackgroundOrange: 'bg-orange',
+  BackgroundTooltip: 'bg-tooltip',
+  IconsPrimary: 'icon-primary',
+  IconsPrimaryOpacity_0_6: 'icons-primary-opacity-0-6',
+  IconsSecondary: 'icons-secondary',
+  IconsPlaceholder: 'icons-placeholder',
+  IconsInvert: 'icons-invert',
+  IconsMuted: 'icons-muted',
+  IconsPrimaryHover: 'icons-primary-hover',
+  IconsSecondaryHover: 'icons-secondary-hover',
+  ButtonPrimaryText: 'btn-primary-text',
+  ButtonPrimaryText_0_6: 'btn-primary-text-0-6',
+  ButtonPrimaryText_0_4: 'btn-primary-text-0-4',
+  ButtonDisabledText: 'btn-disabled-text',
+  ButtonSecondaryText: 'btn-secondary-text',
+  LinkPrimary: 'link-primary',
+  LinkStateless: 'link-stateless',
+  LinkHover: 'link-hover',
+  LinkActive: 'link-active',
+  LinkMuted: 'link-muted',
+  LinkPressed: 'link-pressed',
+  BordersPrimary: 'borders-primary',
+  BordersPrimaryHover: 'borders-primary-hover',
+  BordersSecondary: 'borders-secondary',
+  BordersStrong: 'borders-strong',
+  BordersInvert: 'borders-invert',
+  BorderHoverBottom: 'border-hover-bottom',
+  BorderActiveBottom: 'border-active-bottom',
+  BorderPrimaryStateless: 'border-primary-stateless',
+  BordersDisabled: 'borders-disabled',
+  BordersButton: 'borders-button',
+  BordersItem: 'borders-item',
+  BordersBaseLight: 'borders-base-light',
+  BordersBaseMedium: 'borders-base-medium',
+  BordersGreen: 'borders-green',
+  BordersGreenMedium: 'borders-green-medium',
+  BordersRed: 'borders-red',
+  ActiveSecondary: 'active-secondary',
+  ActiveSecondaryHover: 'active-secondary-hover',
+  Tag: 'tag',
+  StatesErrorDisabledText: 'states-error-disabled-text',
+  Error: 'error',
+  Error_0_28_Opacity: 'error-0-28-opacity',
+  Error_0_12_Opacity: 'error-0-12-opacity',
+  ErrorHover: 'error-hover',
+  ErrorActive: 'error-active',
+  Success: 'success',
+  SuccessHover: 'success-hover',
+  SuccessActive: 'success-Active',
+  Warning: 'warning',
+  WarningHover: 'warning-hover',
+  WarningActive: 'warning-active',
+  Info: 'info',
+  Modified: 'modified',
+  Red: 'red',
+  Orange: 'orange',
+  Salad: 'salad',
+  Green: 'green',
+  Blue: 'blue',
+  Indigo: 'indigo',
+  Violet: 'violet',
+  Pink: 'pink',
+  GradientRight: 'gradient-right',
+  Extra_0_3_Overlay: 'extra-0-3-overlay',
+  GradientRightActive: 'gradient-right-active',
+  GradientRightHover: 'gradient-right-hover',
+  Extra_0_5_Overlay: 'extra-0-5-overlay',
+  Extra_0_7_Overlay: 'extra-0-7-overlay',
+  Extra_0_9_Overlay: 'extra-0-9-overlay',
+  Red_0_1_Overlay: 'red-0-1-overlay',
+  Orange_0_1_Overlay: 'orange-0-1-overlay',
+  Accent_0_8_Overlay: 'accent-0-8-overlay',
+  Green_0_2_Overlay: 'green-0-2-Overlay',
+  WHITE_0_7_8_Overlay: 'white-0-7-8-overlay',
+  Link: 'link',
+  Camera: 'camera',
+  GoogleDrive: 'google-drive',
+  Dropbox: 'dropbox',
+  OneDrive: 'one-drive',
+  Device: 'device',
+  Instagram: 'instagram',
+  FreeImages: 'free-images',
+  FreeIcons: 'free-icons',
+  Canvas: 'canvas',
+  Box: 'box',
+  ScreenCast: 'screen-cast',
+  Unsplash: 'unsplash',
+  LightShadow: 'light-shadow',
+  MediumShadow: 'medium-shadow',
+  LargeShadow: 'large-shadow',
+  XLargeShadow: 'x-large-shadow'
+};