@televet/kibble-ui 1.0.17-beta.6 → 1.0.17

package/build/index.js

@@ -9,63 +9,39 @@ var styledComponents = require('styled-components');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
+var DrawerConfig = {
+    variants: {
+        alwaysOpen: {
+            parts: ['dialog, dialogContainer'],
+            dialog: {
+                pointerEvents: 'auto',
+            },
+            dialogContainer: {
+                pointerEvents: 'none',
+            },
+        },
+    },
+};
 
 const SvgAlertCircle = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
     React__namespace.createElement("path", { d: "M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Zm.9 12.6a.9.9 0 1 1-1.8 0 .9.9 0 0 1 1.8 0Zm0-3.15a.9.9 0 1 1-1.8 0V8.4a.9.9 0 1 1 1.8 0v4.05Z", fill: color })));
@@ -766,450 +742,9 @@ var Icon = function (_a) {
     var name = _a.name, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c;
     var colors = useTheme().colors;
     var c = useAdaptiveColorMap(colors.icon, color);
-    var MappedIcon = IconMap[name];
-    var d = IconSizeMap[size] + 'px';
-    return React__default["default"].createElement(MappedIcon, { width: d, height: d, color: c });
-};
-
-var camelCaseToLabel = function (s) {
-    return s.replace(/([A-Z])/g, ' $1').replace(/^\w/, function (c) { return c.toUpperCase(); });
-};
-
-var Button = function (props) {
-    var components = useTheme().components;
-    var _a = components.Button[props.variant], variant = _a.variant, light = _a.light, dark = _a.dark;
-    var bg = react.useColorModeValue(light.default, dark.default);
-    var color = react.useColorModeValue(light.content, dark.content);
-    var borderColor = react.useColorModeValue(light.border, dark.border);
-    var p = structuredClone(__assign(__assign({}, props), { variant: variant, bg: bg, color: color, borderColor: borderColor }));
-    var hoverClass = {
-        bg: react.useColorModeValue(light.hover, dark.hover),
-    };
-    var activeClass = {
-        bg: react.useColorModeValue(light.active, dark.active),
-        transform: 'scale(0.98)',
-    };
-    if (p.iconName) {
-        var ButtonIcon = React__default["default"].createElement(Icon, { size: p.size, name: p.iconName });
-        if (!p.children) {
-            var label = camelCaseToLabel(p.iconName);
-            return React__default["default"].createElement(react.IconButton, __assign({ _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon }, p));
-        }
-        else {
-            var position = p.iconPosition === 'right' ? 'rightIcon' : 'leftIcon';
-            p[position] = ButtonIcon;
-        }
-    }
-    return (React__default["default"].createElement(react.Button, __assign({ _hover: hoverClass, _active: activeClass }, p), props.children));
-};
-
-var baseColors = {
-    comet: {
-        50: '#F0F1F5',
-        100: '#D5D7E2',
-        200: '#BABECF',
-        300: '#9FA5BC',
-        400: '#838BA9',
-        500: '#687297',
-        600: '#575D7C',
-        700: '#3F445A',
-        800: '#2A2D3C',
-        900: '#15171E',
-    },
-    teal: {
-        50: '#F7FAFC',
-        100: '#EBF9FB',
-        200: '#DCF6FB',
-        300: '#AFE1EC',
-        400: '#78CBDC',
-        500: '#39ADC3',
-        600: '#3CA0B4',
-        700: '#2E8C9E',
-        800: '#236976',
-        900: '#17464F',
-    },
-    blue: {
-        50: '#E7E9FE',
-        100: '#BBC2FB',
-        200: '#909AF9',
-        300: '#6473F7',
-        400: '#384BF5',
-        500: '#0D24F2',
-        600: '#0A1DC2',
-        700: '#000B8E',
-        800: '#050E5F',
-        900: '#030730',
-    },
-    red: {
-        50: '#FFF5F5',
-        100: '#FED7D7',
-        200: '#FEB2B2',
-        300: '#FC8181',
-        400: '#F56565',
-        500: '#E01F1F',
-        600: '#C53030',
-        700: '#9B2C2C',
-        800: '#822727',
-        900: '#63171B',
-    },
-    orange: {
-        50: '#FFFAF0',
-        100: '#FEEBC8',
-        200: '#FBD38D',
-        300: '#F6AD55',
-        400: '#ED8936',
-        500: '#DD6B20',
-        600: '#C05621',
-        700: '#9C4221',
-        800: '#7B341E',
-        900: '#652B19',
-    },
-    yellow: {
-        50: '#FFFFF0',
-        100: '#FEEBCB',
-        200: '#FAF089',
-        300: '#F6E05E',
-        400: '#ECC94B',
-        500: '#D69E2E',
-        600: '#B7791F',
-        700: '#975A16',
-        800: '#744210',
-        900: '#5F370E',
-    },
-    green: {
-        50: '#F0FFF4',
-        100: '#C6F6D5',
-        200: '#9AE6B4',
-        300: '#68D391',
-        400: '#48BB78',
-        500: '#38A169',
-        600: '#25855A',
-        700: '#276749',
-        800: '#22543D',
-        900: '#1C4532',
-    },
-    transparent: 'transparent',
-    current: 'currentColor',
-    black: '#000000',
-    white: '#FFFFFF',
-    whiteAlpha: {
-        50: 'rgba(255, 255, 255, 0.04)',
-        100: 'rgba(255, 255, 255, 0.06)',
-        200: 'rgba(255, 255, 255, 0.08)',
-        300: 'rgba(255, 255, 255, 0.16)',
-        400: 'rgba(255, 255, 255, 0.24)',
-        500: 'rgba(255, 255, 255, 0.36)',
-        600: 'rgba(255, 255, 255, 0.48)',
-        700: 'rgba(255, 255, 255, 0.64)',
-        800: 'rgba(255, 255, 255, 0.80)',
-        900: 'rgba(255, 255, 255, 0.92)',
-    },
-    blackAlpha: {
-        50: 'rgba(0, 0, 0, 0.04)',
-        100: 'rgba(0, 0, 0, 0.06)',
-        200: 'rgba(0, 0, 0, 0.08)',
-        300: 'rgba(0, 0, 0, 0.16)',
-        400: 'rgba(0, 0, 0, 0.24)',
-        500: 'rgba(0, 0, 0, 0.36)',
-        600: 'rgba(0, 0, 0, 0.48)',
-        700: 'rgba(0, 0, 0, 0.64)',
-        800: 'rgba(0, 0, 0, 0.80)',
-        900: 'rgba(0, 0, 0, 0.92)',
-    },
-    gray: {
-        50: '#F9F9FA',
-        100: '#EBEEEF',
-        200: '#DDE2E3',
-        300: '#CDD4D6',
-        400: '#BCC5C8',
-        500: '#A9B5B8',
-        600: '#94A2A6',
-        700: '#7A8C90',
-        800: '#5B7074',
-        900: '#354144',
-    },
-};
-var semanticTokens = {
-    text: {
-        onLight: baseColors.comet[700],
-        linkOnLight: baseColors.teal[600],
-        onLightSubtle: baseColors.gray[800],
-        onDark: baseColors.white,
-        headline: baseColors.blue[800],
-        placeholder: baseColors.blackAlpha[500],
-        success: baseColors.green[600],
-        warning: baseColors.yellow[600],
-        error: baseColors.red[600],
-    },
-    background: {
-        light: baseColors.gray[300],
-        grayLight: baseColors.gray[50],
-        grayDark: baseColors.gray[300],
-        tealLight: baseColors.teal[50],
-        dark: baseColors.blue[800],
-        table: baseColors.comet[50],
-        overlay: baseColors.blackAlpha[300],
-        info: baseColors.teal[200],
-        error: baseColors.red[100],
-        warning: baseColors.yellow[100],
-        success: baseColors.green[100],
-    },
-    border: {
-        default: baseColors.gray[200],
-        dark: baseColors.comet[700],
-        focus: baseColors.teal[600],
-        info: baseColors.teal[600],
-        error: baseColors.red[500],
-        warning: baseColors.yellow[500],
-        success: baseColors.green[400],
-    },
-    divider: {
-        onLight: baseColors.gray[100],
-    },
-    status: {
-        open: baseColors.blue[300],
-        confirmed: baseColors.teal[500],
-        success: baseColors.green[400],
-        warning: baseColors.yellow[400],
-        action: baseColors.orange[400],
-        negative: baseColors.red[300],
-        error: baseColors.red[500],
-        archived: baseColors.gray[800],
-        closed: baseColors.gray[900],
-    },
-    general: {
-        brand: baseColors.teal[500],
-        error: baseColors.red[500],
-    },
-};
-var adaptiveColorTokens = {
-    icon: {
-        light: {
-            currentColor: 'currentColor',
-            default: baseColors.comet[700],
-            subtle: baseColors.gray[800],
-            inactive: baseColors.gray[700],
-            active: baseColors.teal[600],
-            success: baseColors.green[600],
-            warning: baseColors.yellow[600],
-            error: baseColors.red[600],
-        },
-        dark: {
-            currentColor: 'currentColor',
-            default: baseColors.white,
-            subtle: baseColors.gray[200],
-            inactive: baseColors.gray[400],
-            active: baseColors.teal[400],
-            success: baseColors.green[400],
-            warning: baseColors.yellow[300],
-            error: baseColors.red[300],
-        },
-    },
-};
-var colors = __assign(__assign(__assign({}, baseColors), semanticTokens), adaptiveColorTokens);
-
-var ButtonConfig = {
-    primary: {
-        variant: 'solid',
-        light: {
-            content: semanticTokens.text.onDark,
-            default: baseColors.teal['600'],
-            hover: baseColors.teal['700'],
-            active: baseColors.teal['800'],
-            border: baseColors.transparent,
-        },
-        dark: {
-            content: semanticTokens.text.onLight,
-            default: baseColors.white,
-            hover: baseColors.teal['100'],
-            active: baseColors.teal['200'],
-            border: baseColors.transparent,
-        },
-    },
-    primaryDestructive: {
-        variant: 'solid',
-        light: {
-            content: semanticTokens.text.onDark,
-            default: baseColors.red['500'],
-            hover: baseColors.red['600'],
-            active: baseColors.red['700'],
-            border: baseColors.transparent,
-        },
-        dark: {
-            content: semanticTokens.text.onLight,
-            default: baseColors.red['200'],
-            hover: baseColors.red['100'],
-            active: baseColors.red['50'],
-            border: baseColors.transparent,
-        },
-    },
-    secondary: {
-        variant: 'outline',
-        light: {
-            content: semanticTokens.text.onLight,
-            default: baseColors.transparent,
-            hover: baseColors.teal['100'],
-            active: baseColors.teal['200'],
-            border: semanticTokens.border.dark,
-        },
-        dark: {
-            content: semanticTokens.text.onDark,
-            default: baseColors.transparent,
-            hover: baseColors.whiteAlpha['200'],
-            active: baseColors.whiteAlpha['300'],
-            border: semanticTokens.text.onDark,
-        },
-    },
-    secondaryDestructive: {
-        variant: 'outline',
-        light: {
-            content: semanticTokens.text.error,
-            default: baseColors.transparent,
-            hover: baseColors.red['100'],
-            active: baseColors.red['200'],
-            border: semanticTokens.border.error,
-        },
-        dark: {
-            content: baseColors.red['200'],
-            default: baseColors.transparent,
-            hover: baseColors.whiteAlpha['200'],
-            active: baseColors.whiteAlpha['300'],
-            border: baseColors.red['200'],
-        },
-    },
-    secondarySubtle: {
-        variant: 'outline',
-        light: {
-            content: semanticTokens.text.onLight,
-            default: baseColors.white,
-            hover: baseColors.gray['50'],
-            active: baseColors.gray['100'],
-            border: semanticTokens.border.default,
-        },
-        dark: {
-            content: semanticTokens.text.onDark,
-            default: baseColors.whiteAlpha['200'],
-            hover: baseColors.whiteAlpha['300'],
-            active: baseColors.whiteAlpha['400'],
-            border: semanticTokens.text.onDark,
-        },
-    },
-    secondarySubtleDestructive: {
-        variant: 'outline',
-        light: {
-            content: semanticTokens.text.error,
-            default: baseColors.white,
-            hover: baseColors.red['50'],
-            active: baseColors.red['100'],
-            border: semanticTokens.border.default,
-        },
-        dark: {
-            content: baseColors.red['300'],
-            default: baseColors.transparent,
-            hover: baseColors.whiteAlpha['200'],
-            active: baseColors.whiteAlpha['300'],
-            border: baseColors.whiteAlpha['500'],
-        },
-    },
-    tertiary: {
-        variant: 'solid',
-        light: {
-            content: semanticTokens.text.onLight,
-            default: baseColors.gray['100'],
-            hover: baseColors.gray['200'],
-            active: baseColors.gray['300'],
-            border: baseColors.transparent,
-        },
-        dark: {
-            content: semanticTokens.text.onDark,
-            default: baseColors.gray['700'],
-            hover: baseColors.gray['600'],
-            active: baseColors.gray['700'],
-            border: baseColors.transparent,
-        },
-    },
-    tertiaryDestructive: {
-        variant: 'solid',
-        light: {
-            content: semanticTokens.text.error,
-            default: baseColors.red['100'],
-            hover: baseColors.red['200'],
-            active: baseColors.red['300'],
-            border: baseColors.transparent,
-        },
-        dark: {
-            content: baseColors.red['300'],
-            default: baseColors.whiteAlpha['200'],
-            hover: baseColors.whiteAlpha['300'],
-            active: baseColors.whiteAlpha['400'],
-            border: baseColors.transparent,
-        },
-    },
-    ghost: {
-        variant: 'ghost',
-        light: {
-            content: semanticTokens.text.linkOnLight,
-            default: baseColors.transparent,
-            hover: baseColors.teal['100'],
-            active: baseColors.teal['200'],
-            border: baseColors.transparent,
-        },
-        dark: {
-            content: baseColors.teal['400'],
-            default: baseColors.transparent,
-            hover: baseColors.whiteAlpha['200'],
-            active: baseColors.whiteAlpha['300'],
-            border: baseColors.transparent,
-        },
-    },
-    ghostNeutral: {
-        variant: 'ghost',
-        light: {
-            content: semanticTokens.text.onLight,
-            default: baseColors.transparent,
-            hover: baseColors.blackAlpha['100'],
-            active: baseColors.blackAlpha['200'],
-            border: baseColors.transparent,
-        },
-        dark: {
-            content: semanticTokens.text.onDark,
-            default: baseColors.transparent,
-            hover: baseColors.whiteAlpha['200'],
-            active: baseColors.whiteAlpha['300'],
-            border: baseColors.transparent,
-        },
-    },
-    ghostDestructive: {
-        variant: 'ghost',
-        light: {
-            content: semanticTokens.text.error,
-            default: baseColors.transparent,
-            hover: baseColors.red['100'],
-            active: baseColors.red['200'],
-            border: baseColors.transparent,
-        },
-        dark: {
-            content: baseColors.red['300'],
-            default: baseColors.transparent,
-            hover: baseColors.whiteAlpha['200'],
-            active: baseColors.whiteAlpha['300'],
-            border: baseColors.transparent,
-        },
-    },
-};
-
-var DrawerConfig = {
-    variants: {
-        alwaysOpen: {
-            parts: ['dialog, dialogContainer'],
-            dialog: {
-                pointerEvents: 'auto',
-            },
-            dialogContainer: {
-                pointerEvents: 'none',
-            },
-        },
-    },
+    var MappedIcon = IconMap[name];
+    var d = IconSizeMap[size] + 'px';
+    return React__default["default"].createElement(MappedIcon, { width: d, height: d, color: c });
 };
 
 var _path$k, _path2$7;
@@ -2572,7 +2107,7 @@ var fullLogoMap = {
     teal: SvgTeal,
 };
 
-var Logo = React.forwardRef(function (_a, ref) {
+var Logo = function (_a) {
     var _b = _a.type, type = _b === void 0 ? 'full' : _b, _c = _a.color, color = _c === void 0 ? 'teal' : _c, holiday = _a.holiday, style = _a.style, handleClick = _a.handleClick;
     var LogoComponent;
     if (holiday) {
@@ -2584,10 +2119,48 @@ var Logo = React.forwardRef(function (_a, ref) {
     else {
         LogoComponent = fullLogoMap[color];
     }
-    return React__default["default"].createElement(LogoComponent, { style: style, onClick: handleClick, ref: ref });
-});
+    return React__default["default"].createElement(LogoComponent, { style: style, onClick: handleClick });
+};
 Logo.displayName = 'Logo';
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 var Heading = function (_a) {
     var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.variant, variant = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["children", "size", "variant"]);
     var components = useTheme().components;
@@ -2697,6 +2270,211 @@ var borders = {
     '8px': '8px solid',
 };
 
+var baseColors = {
+    comet: {
+        50: '#F0F1F5',
+        100: '#D5D7E2',
+        200: '#BABECF',
+        300: '#9FA5BC',
+        400: '#838BA9',
+        500: '#687297',
+        600: '#575D7C',
+        700: '#3F445A',
+        800: '#2A2D3C',
+        900: '#15171E',
+    },
+    teal: {
+        50: '#F7FAFC',
+        100: '#EBF9FB',
+        200: '#DCF6FB',
+        300: '#AFE1EC',
+        400: '#78CBDC',
+        500: '#39ADC3',
+        600: '#3CA0B4',
+        700: '#2E8C9E',
+        800: '#236976',
+        900: '#17464F',
+    },
+    blue: {
+        50: '#E7E9FE',
+        100: '#BBC2FB',
+        200: '#909AF9',
+        300: '#6473F7',
+        400: '#384BF5',
+        500: '#0D24F2',
+        600: '#0A1DC2',
+        700: '#000B8E',
+        800: '#050E5F',
+        900: '#030730',
+    },
+    red: {
+        50: '#FFF5F5',
+        100: '#FED7D7',
+        200: '#FEB2B2',
+        300: '#FC8181',
+        400: '#F56565',
+        500: '#E01F1F',
+        600: '#C53030',
+        700: '#9B2C2C',
+        800: '#822727',
+        900: '#63171B',
+    },
+    orange: {
+        50: '#FFFAF0',
+        100: '#FEEBC8',
+        200: '#FBD38D',
+        300: '#F6AD55',
+        400: '#ED8936',
+        500: '#DD6B20',
+        600: '#C05621',
+        700: '#9C4221',
+        800: '#7B341E',
+        900: '#652B19',
+    },
+    yellow: {
+        50: '#FFFFF0',
+        100: '#FEEBCB',
+        200: '#FAF089',
+        300: '#F6E05E',
+        400: '#ECC94B',
+        500: '#D69E2E',
+        600: '#B7791F',
+        700: '#975A16',
+        800: '#744210',
+        900: '#5F370E',
+    },
+    green: {
+        50: '#F0FFF4',
+        100: '#C6F6D5',
+        200: '#9AE6B4',
+        300: '#68D391',
+        400: '#48BB78',
+        500: '#38A169',
+        600: '#25855A',
+        700: '#276749',
+        800: '#22543D',
+        900: '#1C4532',
+    },
+    transparent: 'transparent',
+    current: 'currentColor',
+    black: '#000000',
+    white: '#FFFFFF',
+    whiteAlpha: {
+        50: 'rgba(255, 255, 255, 0.04)',
+        100: 'rgba(255, 255, 255, 0.06)',
+        200: 'rgba(255, 255, 255, 0.08)',
+        300: 'rgba(255, 255, 255, 0.16)',
+        400: 'rgba(255, 255, 255, 0.24)',
+        500: 'rgba(255, 255, 255, 0.36)',
+        600: 'rgba(255, 255, 255, 0.48)',
+        700: 'rgba(255, 255, 255, 0.64)',
+        800: 'rgba(255, 255, 255, 0.80)',
+        900: 'rgba(255, 255, 255, 0.92)',
+    },
+    blackAlpha: {
+        50: 'rgba(0, 0, 0, 0.04)',
+        100: 'rgba(0, 0, 0, 0.06)',
+        200: 'rgba(0, 0, 0, 0.08)',
+        300: 'rgba(0, 0, 0, 0.16)',
+        400: 'rgba(0, 0, 0, 0.24)',
+        500: 'rgba(0, 0, 0, 0.36)',
+        600: 'rgba(0, 0, 0, 0.48)',
+        700: 'rgba(0, 0, 0, 0.64)',
+        800: 'rgba(0, 0, 0, 0.80)',
+        900: 'rgba(0, 0, 0, 0.92)',
+    },
+    gray: {
+        50: '#F9F9FA',
+        100: '#EBEEEF',
+        200: '#DDE2E3',
+        300: '#CDD4D6',
+        400: '#BCC5C8',
+        500: '#A9B5B8',
+        600: '#94A2A6',
+        700: '#7A8C90',
+        800: '#5B7074',
+        900: '#354144',
+    },
+};
+var semanticTokens = {
+    text: {
+        onLight: baseColors.comet[700],
+        linkOnLight: baseColors.teal[600],
+        onLightSubtle: baseColors.gray[800],
+        onDark: baseColors.white,
+        headline: baseColors.blue[800],
+        placeholder: baseColors.blackAlpha[500],
+        success: baseColors.green[600],
+        warning: baseColors.yellow[600],
+        error: baseColors.red[600],
+    },
+    background: {
+        light: baseColors.gray[300],
+        grayLight: baseColors.gray[50],
+        grayDark: baseColors.gray[300],
+        tealLight: baseColors.teal[50],
+        dark: baseColors.blue[800],
+        table: baseColors.comet[50],
+        overlay: baseColors.blackAlpha[300],
+        info: baseColors.teal[200],
+        error: baseColors.red[100],
+        warning: baseColors.yellow[100],
+        success: baseColors.green[100],
+    },
+    border: {
+        default: baseColors.gray[200],
+        dark: baseColors.comet[700],
+        focus: baseColors.teal[600],
+        info: baseColors.teal[600],
+        error: baseColors.red[500],
+        warning: baseColors.yellow[500],
+        success: baseColors.green[400],
+    },
+    divider: {
+        onLight: baseColors.gray[100],
+    },
+    status: {
+        open: baseColors.blue[300],
+        confirmed: baseColors.teal[500],
+        success: baseColors.green[400],
+        warning: baseColors.yellow[400],
+        action: baseColors.orange[400],
+        negative: baseColors.red[300],
+        error: baseColors.red[500],
+        archived: baseColors.gray[800],
+        closed: baseColors.gray[900],
+    },
+    general: {
+        brand: baseColors.teal[500],
+        error: baseColors.red[500],
+    },
+};
+var adaptiveColorTokens = {
+    icon: {
+        light: {
+            currentColor: 'currentColor',
+            default: baseColors.comet[700],
+            subtle: baseColors.gray[800],
+            inactive: baseColors.gray[700],
+            active: baseColors.teal[600],
+            success: baseColors.green[600],
+            warning: baseColors.yellow[600],
+            error: baseColors.red[600],
+        },
+        dark: {
+            currentColor: 'currentColor',
+            default: baseColors.white,
+            subtle: baseColors.gray[200],
+            inactive: baseColors.gray[400],
+            active: baseColors.teal[400],
+            success: baseColors.green[400],
+            warning: baseColors.yellow[300],
+            error: baseColors.red[300],
+        },
+    },
+};
+var colors = __assign(__assign(__assign({}, baseColors), semanticTokens), adaptiveColorTokens);
+
 var fonts = {
     body: 'LinearSans, Noto Sans, Arial, Helvetica, sans-serif',
     heading: 'LinearSans, Noto Sans, Arial, Helvetica, sans-serif',
@@ -2870,26 +2648,6 @@ var TextConfig = {
     },
 };
 
-var useAdaptiveColor = function (color) { return react.useColorModeValue(color.light, color.dark); };
-
-var Tooltip = function (_a) {
-    var children = _a.children, label = _a.label, placement = _a.placement, isOpen = _a.isOpen, defaultIsOpen = _a.defaultIsOpen, rest = __rest(_a, ["children", "label", "placement", "isOpen", "defaultIsOpen"]);
-    var components = useTheme().components;
-    var bg = useAdaptiveColor(components.Tooltip.color);
-    return (React__default["default"].createElement(react.Tooltip, __assign({ hasArrow: true, arrowSize: 10, label: label, placement: placement, shouldWrapChildren: true, bg: bg, isOpen: isOpen, defaultIsOpen: defaultIsOpen }, rest), children));
-};
-
-var TooltipGlobalStyle = {
-    '[id^=tooltip]': {
-        padding: '4px 8px 4px 8px !important',
-        borderRadius: '4px !important',
-        textTransform: 'capitalize',
-    },
-};
-var TooltipConfig = {
-    color: { light: semanticTokens.background.dark, dark: semanticTokens.background.light },
-};
-
 var Textarea = function (props) {
     var colors = useTheme().colors;
     return React__default["default"].createElement(react.Textarea, __assign({}, props, { errorBorderColor: colors.border.error, focusBorderColor: colors.border.focus }));
@@ -2938,9 +2696,6 @@ var TextareaConfig = {
 
 // @ts-ignore
 var theme = react.extendTheme({
-    styles: {
-        global: __assign({}, TooltipGlobalStyle),
-    },
     blur: blur,
     borders: borders,
     colors: colors,
@@ -2963,9 +2718,7 @@ var theme = react.extendTheme({
         Text: TextConfig,
         Heading: HeadingConfig,
         Textarea: TextareaConfig,
-        Button: ButtonConfig,
         Drawer: DrawerConfig,
-        Tooltip: TooltipConfig,
     },
 });
 
@@ -2975,8 +2728,6 @@ var KibbleThemeProvider = function (_a) {
         React__default["default"].createElement(styledComponents.ThemeProvider, { theme: theme }, children)));
 };
 
-exports.Button = Button;
-exports.ButtonConfig = ButtonConfig;
 exports.DrawerConfig = DrawerConfig;
 exports.Heading = Heading;
 exports.HeadingConfig = HeadingConfig;
@@ -2987,9 +2738,6 @@ exports.Text = Text;
 exports.TextConfig = TextConfig;
 exports.Textarea = Textarea;
 exports.TextareaConfig = TextareaConfig;
-exports.Tooltip = Tooltip;
-exports.TooltipConfig = TooltipConfig;
-exports.TooltipGlobalStyle = TooltipGlobalStyle;
 exports.theme = theme;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map