@televet/kibble-ui 1.1.0-beta.1 → 1.1.0-beta.2

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 })));
@@ -660,8 +636,7 @@ var IconMap = {
     collapse: ForwardRef$1H,
     colorPicker: ForwardRef$Y,
     compose: ForwardRef$c,
-    conversationClinicians: ForwardRef$1a,
-    conversationParents: ForwardRef$1d,
+    conversation: ForwardRef$1d,
     conversations: ForwardRef$1q,
     conversationsOutlined: ForwardRef$1p,
     cow: ForwardRef$1M,
@@ -774,468 +749,26 @@ var Icon = React.forwardRef(function (_a, ref) {
 });
 Icon.displayName = 'Icon';
 
-var camelCaseToLabel = function (s) {
-    return s.replace(/([A-Z])/g, ' $1').replace(/^\w/, function (c) { return c.toUpperCase(); });
+var _path$k, _path2$7;
+
+function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+
+var SvgTeal = function SvgTeal(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+    width: 200,
+    height: 44,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M176.773 35.166c-2.461 4.878-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.842 0 1.03-.045 1.79-.135 2.149h-21.749c.313 3.49 3.49 5.996 7.115 5.996 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.563-11.009c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247ZM192.482 3.929v8.682H200v7.205h-7.518v10.875c0 3.178 1.387 4.43 4.251 4.43 1.074 0 2.282-.313 3.222-.894v7.563c-1.298.671-3.311 1.208-6.131 1.208-6.221 0-10.069-3.849-10.069-10.427V19.86h-4.207v-7.205h4.207V3.974h8.727v-.045ZM139.047.035c-3.715.18-6.713 3.178-6.892 6.892-.179 4.162 3.133 7.564 7.205 7.564h.179l.134 5.236c0 .492.716.671.94.224 0 0 4.699-8.862 4.744-8.951.895-1.79 1.253-2.327 1.253-3.76 0-4.072-3.446-7.384-7.563-7.205ZM129.022 23.396h-.045L117.521.037h-10.696l17.23 33.52 4.878 9.442 4.922-9.622-4.833-9.98Z",
+    fill: "#050E5F"
+  })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 .26h31.193v8.413H20.139v33.564h-9.04V8.673H0V.259ZM58.537 35.166c-2.462 4.879-7.25 7.877-13.74 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.843 0 1.029-.045 1.79-.134 2.148h-21.75c.313 3.49 3.49 5.997 7.115 5.997 3.223 0 4.968-1.388 6.355-3.58l7.385 2.863Zm-7.564-11.009c-.358-3.177-3.043-5.46-6.578-5.46-3.491 0-6.31 2.64-6.668 5.46h13.246ZM73.216.26v41.977h-8.772V.26h8.772ZM107.675 35.166c-2.461 4.879-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.126 6.534 15.126 15.843 0 1.029-.044 1.79-.134 2.148H86.82c.314 3.49 3.491 5.997 7.116 5.997 3.222 0 4.968-1.388 6.355-3.58l7.384 2.863Zm-7.518-11.009c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247Z",
+    fill: "#39ADC3"
+  })));
 };
 
-var Button = React.forwardRef(function (props, ref) {
-    var components = useTheme().components;
-    var _a = components.Button[props.variant || 'primary'], 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 = __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({ ref: ref, _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({ ref: ref, _hover: hoverClass, _active: activeClass }, p), props.children));
-});
-Button.displayName = 'Button';
-
-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 _path$k, _path2$7;
-
-function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
-
-var SvgTeal = function SvgTeal(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
-    width: 200,
-    height: 44,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M176.773 35.166c-2.461 4.878-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.842 0 1.03-.045 1.79-.135 2.149h-21.749c.313 3.49 3.49 5.996 7.115 5.996 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.563-11.009c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247ZM192.482 3.929v8.682H200v7.205h-7.518v10.875c0 3.178 1.387 4.43 4.251 4.43 1.074 0 2.282-.313 3.222-.894v7.563c-1.298.671-3.311 1.208-6.131 1.208-6.221 0-10.069-3.849-10.069-10.427V19.86h-4.207v-7.205h4.207V3.974h8.727v-.045ZM139.047.035c-3.715.18-6.713 3.178-6.892 6.892-.179 4.162 3.133 7.564 7.205 7.564h.179l.134 5.236c0 .492.716.671.94.224 0 0 4.699-8.862 4.744-8.951.895-1.79 1.253-2.327 1.253-3.76 0-4.072-3.446-7.384-7.563-7.205ZM129.022 23.396h-.045L117.521.037h-10.696l17.23 33.52 4.878 9.442 4.922-9.622-4.833-9.98Z",
-    fill: "#050E5F"
-  })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M0 .26h31.193v8.413H20.139v33.564h-9.04V8.673H0V.259ZM58.537 35.166c-2.462 4.879-7.25 7.877-13.74 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.843 0 1.029-.045 1.79-.134 2.148h-21.75c.313 3.49 3.49 5.997 7.115 5.997 3.223 0 4.968-1.388 6.355-3.58l7.385 2.863Zm-7.564-11.009c-.358-3.177-3.043-5.46-6.578-5.46-3.491 0-6.31 2.64-6.668 5.46h13.246ZM73.216.26v41.977h-8.772V.26h8.772ZM107.675 35.166c-2.461 4.879-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.126 6.534 15.126 15.843 0 1.029-.044 1.79-.134 2.148H86.82c.314 3.49 3.491 5.997 7.116 5.997 3.222 0 4.968-1.388 6.355-3.58l7.384 2.863Zm-7.518-11.009c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247Z",
-    fill: "#39ADC3"
-  })));
-};
-
-var _path$j;
+var _path$j;
 
 function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 
@@ -2592,6 +2125,44 @@ var Logo = function (_a) {
 };
 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;
@@ -2701,6 +2272,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',
@@ -2874,26 +2650,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, 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 }));
@@ -2940,11 +2696,231 @@ var TextareaConfig = {
     },
 };
 
+var camelCaseToLabel = function (s) {
+    return s.replace(/([A-Z])/g, ' $1').replace(/^\w/, function (c) { return c.toUpperCase(); });
+};
+
+var Button = React.forwardRef(function (props, ref) {
+    var components = useTheme().components;
+    var _a = components.Button[props.variant || 'primary'], 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 = __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({ ref: ref, _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({ ref: ref, _hover: hoverClass, _active: activeClass }, p), props.children));
+});
+Button.displayName = 'Button';
+
+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,
+        },
+    },
+};
+
 // @ts-ignore
 var theme = react.extendTheme({
-    styles: {
-        global: __assign({}, TooltipGlobalStyle),
-    },
     blur: blur,
     borders: borders,
     colors: colors,
@@ -2967,9 +2943,8 @@ var theme = react.extendTheme({
         Text: TextConfig,
         Heading: HeadingConfig,
         Textarea: TextareaConfig,
-        Button: ButtonConfig,
         Drawer: DrawerConfig,
-        Tooltip: TooltipConfig,
+        Button: ButtonConfig,
     },
 });
 
@@ -2991,9 +2966,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