@orfium/ictinus 5.43.0 → 5.43.2

package/dist/vanilla/index.js

@@ -1,3 +1,8 @@
+export { DataTable } from './src/data-table/DataTable.js';
+export { DataTableBody } from './src/data-table/DataTableBody.js';
+export { DataTableCheckbox } from './src/data-table/DataTableCheckbox.js';
+export { DataTableEditColumns } from './src/data-table/DataTableEditColumns.js';
+export { DataTableHeader } from './src/data-table/DataTableHeader.js';
 export { ICONS, Icon } from './src/icon/Icon.js';
 export { AccountIcon } from './src/icons/AccountIcon.js';
 export { AlbumIcon } from './src/icons/AlbumIcon.js';

package/dist/vanilla/package.json.js

@@ -1,3 +1,3 @@
-var version = "5.43.0";
+var version = "5.43.2";
 
 export { version };

package/dist/vanilla/src/actions/ActionsContent-css.js

@@ -0,0 +1,10 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
+import './../../assets/src/vanilla-extract/global.css.ts.vanilla-BHTgxO8_.css';
+import './../../assets/src/sprinkles/properties.css.ts.vanilla-C8hqLKur.css';
+import './../../assets/src/actions/ActionsRoot.css.ts.vanilla-B5JvX1-v.css';
+import './../../assets/src/actions/ActionsContent.css.ts.vanilla-BVxWvGVF.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var content = createRuntimeFn({defaultClassName:'_146hxcf4 _146hxcf2g _146hxcf1k gfg8xi0',variantClassNames:{visible:{always:'gfg8xi1','if-needed':'gfg8xi2'}},defaultVariants:{},compoundVariants:[]});
+
+export { content };

package/dist/vanilla/src/actions/ActionsContent.js

@@ -0,0 +1,15 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../utils/cn.js';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { content } from './ActionsContent-css.js';
+
+const ActionsContent = forwardRef(
+  ({ children, className, visible = "if-needed", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, className: cn(content({ visible }), className), ...props, children });
+  }
+);
+ActionsContent.displayName = "ActionsContent";
+
+export { ActionsContent };

package/dist/vanilla/src/actions/ActionsRoot-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
+import './../../assets/src/actions/ActionsRoot.css.ts.vanilla-B5JvX1-v.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var root = createRuntimeFn({defaultClassName:'_17y19ri1 _17y19ri0',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+
+export { root };

package/dist/vanilla/src/actions/ActionsRoot.js

@@ -0,0 +1,15 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../utils/cn.js';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { root } from './ActionsRoot-css.js';
+
+const ActionsRoot = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, className: cn(root({}), className), ...props, children });
+  }
+);
+ActionsRoot.displayName = "ActionsRoot";
+
+export { ActionsRoot };

package/dist/vanilla/src/components/Avatar/Avatar.js

@@ -0,0 +1,34 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { iconStyles, avatarStyle } from './Avatar.style.js';
+import { UserAvatar } from './UserAvatar.js';
+
+const Avatar = forwardRef(
+  ({ src = "", size = 1, color = "blue", className, dataTestPrefixId = "", children }, ref) => {
+    const avatarContent = useMemo(() => {
+      if (src) {
+        return /* @__PURE__ */ jsx("img", { src });
+      }
+      if (!src && children) {
+        return children;
+      }
+      return /* @__PURE__ */ jsx(UserAvatar, { css: iconStyles({ size, color }) });
+    }, [children, color, size, src]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className,
+        css: avatarStyle({
+          size,
+          color
+        }),
+        "data-testid": `${dataTestPrefixId}_avatar`,
+        children: avatarContent
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+export { Avatar as default };

package/dist/vanilla/src/components/Avatar/Avatar.style.js

@@ -0,0 +1,116 @@
+import { css } from '@emotion/react';
+import { vars } from '@orfium/tokens';
+import { flex } from '../../theme/functions.js';
+
+const AVATAR_COLOR = {
+  blue: {
+    border: vars.color.palette["primary-alt"].contrast,
+    fill: vars.color.palette["primary-alt"].base,
+    text: vars.color.text.default.active
+  },
+  red: {
+    border: vars.color.palette.error.contrast,
+    fill: vars.color.palette.error.base,
+    text: vars.color.text.default.error
+  },
+  purple: {
+    border: vars.color.palette.upsell.contrast,
+    fill: vars.color.palette.upsell.base,
+    text: vars.color.text.default.visited
+  },
+  teal: {
+    border: vars.color.palette.success.contrast,
+    fill: vars.color.palette.success.base,
+    text: vars.color.text.default.success
+  },
+  orange: {
+    border: vars.color.palette.warning.contrast,
+    fill: vars.color.palette.warning.base,
+    text: vars.color.text.default.warning
+  }
+};
+const AVATAR_SIZE = {
+  "1": vars.sizing["5"],
+  "2": vars.sizing["6"],
+  "3": vars.sizing["8"],
+  "4": vars.sizing["12"],
+  "5": vars.sizing["15"],
+  "6": vars.sizing["18"]
+};
+const AVATAR_TYPOGRAPHY = {
+  "1": {
+    fontSize: vars["font-size"]["1"],
+    lineHeight: vars["line-height"]["1"],
+    letterSpacing: vars["letter-spacing"]["1"]
+  },
+  "2": {
+    fontSize: vars["font-size"]["2"],
+    lineHeight: vars["line-height"]["3"],
+    letterSpacing: vars["letter-spacing"]["2"]
+  },
+  "3": {
+    fontSize: vars["font-size"]["3"],
+    lineHeight: vars["line-height"]["4"],
+    letterSpacing: vars["letter-spacing"]["2"]
+  },
+  "4": {
+    fontSize: vars["font-size"]["4"],
+    lineHeight: vars["line-height"]["5"],
+    letterSpacing: vars["letter-spacing"]["1"]
+  },
+  "5": {
+    fontSize: vars["font-size"]["8"],
+    lineHeight: vars["line-height"]["8"],
+    letterSpacing: vars["letter-spacing"]["0"]
+  },
+  "6": {
+    fontSize: vars["font-size"]["10"],
+    lineHeight: vars["line-height"]["10"],
+    letterSpacing: vars["letter-spacing"]["0"]
+  }
+};
+const iconStyles = ({ size = 1, color = "blue" }) => {
+  return css`
+    width: calc(${AVATAR_SIZE[size]} * 0.8);
+    height: calc(${AVATAR_SIZE[size]} * 0.8);
+    path {
+      fill: ${AVATAR_COLOR[color].text};
+    }
+  `;
+};
+const avatarStyle = ({
+  size,
+  color
+}) => {
+  return css`
+    ${flex};
+    width: ${AVATAR_SIZE[size]};
+    height: ${AVATAR_SIZE[size]};
+    border-radius: ${vars["border-radius"][7]};
+    border: ${vars["border-width"]["1"]} solid;
+    border-color: ${AVATAR_COLOR[color].border};
+    box-sizing: border-box;
+    background-color: ${AVATAR_COLOR[color].fill};
+    color: ${AVATAR_COLOR[color].text};
+    overflow: hidden;
+    position: relative;
+    align-items: center;
+    flex-shrink: 0;
+    user-select: none;
+    justify-content: center;
+
+    // avatar has custom typography styles
+    font-family: ${vars.weight.medium};
+    font-size: ${AVATAR_TYPOGRAPHY[size].fontSize};
+    line-height: ${AVATAR_TYPOGRAPHY[size].lineHeight};
+    letter-spacing: ${AVATAR_TYPOGRAPHY[size].letterSpacing};
+
+    img {
+      border-radius: ${vars["border-radius"][7]};
+      width: 100%;
+      height: 100%;
+    }
+  `;
+};
+
+export { AVATAR_COLOR, AVATAR_SIZE, AVATAR_TYPOGRAPHY, avatarStyle, iconStyles };

package/dist/vanilla/src/components/Avatar/UserAvatar.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { Box } from '../../../Box/Box.js';
+import '../../sprinkles/sprinkles.js';
+
+function UserAvatar(props) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 17", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6.96625 6.55647C8.77677 6.55647 10.2445 5.08876 10.2445 3.27824C10.2445 1.46772 8.77677 0 6.96625 0C5.15573 0 3.68801 1.46772 3.68801 3.27824C3.68801 5.08876 5.15573 6.55647 6.96625 6.55647Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M0 12.2113C0 12.1401 0.0171683 12.0699 0.0515269 12.0076C1.31285 9.7198 3.95046 8.09435 7 8.09435C10.0495 8.09435 12.6872 9.7198 13.9485 12.0076C13.9828 12.0699 14 12.1401 14 12.2113C14 12.2824 13.9828 12.3528 13.9483 12.4151C12.687 14.6941 10.0518 16.0044 7.00244 16.0044C3.95304 16.0044 1.31314 14.6941 0.0516988 12.4151C0.0172363 12.3528 0 12.2824 0 12.2113Z",
+        fill: "currentColor"
+      }
+    )
+  ] }) });
+}
+
+export { UserAvatar };

package/dist/vanilla/src/components/Box/Box.js

@@ -0,0 +1,42 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import useTheme from '../../hooks/useTheme.js';
+import { omit } from 'lodash-es';
+import { forwardRef } from 'react';
+import { BoxWrapper } from './Box.style.js';
+import { pickCSSProperties, pickNonCSSProps, cssResolver, omitedCSSprops } from './Box.utilities.js';
+
+const Box = forwardRef(({ children, ...rest }, ref) => {
+  const theme = useTheme();
+  const cssPropsOnly = pickCSSProperties(rest);
+  const props = pickNonCSSProps(rest);
+  const resolver = cssResolver(theme, cssPropsOnly);
+  const propsToCss = {
+    ...omit(cssPropsOnly, omitedCSSprops),
+    ...resolver("padding", "p", "spacing"),
+    ...resolver("paddingTop", "pt", "spacing"),
+    ...resolver("paddingRight", "pr", "spacing"),
+    ...resolver("paddingLeft", "pl", "spacing"),
+    ...resolver("paddingBottom", "pb", "spacing"),
+    ...resolver("padding", "py", "spacing"),
+    ...resolver("padding", "px", "spacing"),
+    ...resolver("margin", "m", "spacing"),
+    ...resolver("marginTop", "mt", "spacing"),
+    ...resolver("marginRight", "mr", "spacing"),
+    ...resolver("marginLeft", "ml", "spacing"),
+    ...resolver("marginBottom", "mb", "spacing"),
+    ...resolver("margin", "my", "spacing"),
+    ...resolver("margin", "mx", "spacing"),
+    ...resolver("top", "top", "spacing"),
+    ...resolver("right", "right", "spacing"),
+    ...resolver("left", "left", "spacing"),
+    ...resolver("bottom", "bottom", "spacing"),
+    ...resolver("color", "color", "color"),
+    ...resolver("gap", "gap", "spacing"),
+    ...resolver("backgroundColor", "backgroundColor", "backgroundColor")
+  };
+  return /* @__PURE__ */ jsx(BoxWrapper, { ref, css: [css(propsToCss)], ...props, children });
+});
+Box.displayName = "Box";
+
+export { Box as default };

package/dist/vanilla/src/components/Box/Box.style.js

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+const BoxWrapper = styled.div``;
+
+export { BoxWrapper };

package/dist/vanilla/src/components/Box/Box.utilities.js

@@ -0,0 +1,132 @@
+import { vars } from '@orfium/tokens';
+import { curry, get, pick, omit } from 'lodash-es';
+
+const omitedCSSprops = [
+  "p",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "px",
+  "py",
+  "m",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "mx",
+  "my"
+];
+const styledBoxPropsKeys = [
+  "color",
+  "backgroundAttachment",
+  "backgroundClip",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundOrigin",
+  "backgroundPosition",
+  "backgroundRepeat",
+  "backgroundSize",
+  "alignContent",
+  "alignItems",
+  "alignSelf",
+  "flexDirection",
+  "display",
+  "flex",
+  "grid",
+  "gap",
+  "gridArea",
+  "gridAutoColumns",
+  "gridAutoFlow",
+  "gridAutoRows",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnGap",
+  "gridColumnStart",
+  "gridGap",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowGap",
+  "gridRowStart",
+  "gridTemplate",
+  "gridTemplateAreas",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "justifyContent",
+  "justifyItems",
+  "justifySelf",
+  "position",
+  "width",
+  "minWidth",
+  "maxWidth",
+  "height",
+  "minHeight",
+  "maxHeight",
+  "overflow",
+  "m",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "mx",
+  "my",
+  "p",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "px",
+  "py",
+  "placeContent",
+  "placeItems",
+  "placeSelf",
+  "flexWrap",
+  "left",
+  "top",
+  "right",
+  "bottom",
+  "textOverflow",
+  "whiteSpace"
+];
+const pickCSSProperties = (obj) => {
+  return pick(obj, styledBoxPropsKeys);
+};
+const pickNonCSSProps = (obj) => {
+  return omit(obj, styledBoxPropsKeys);
+};
+const cssResolver = curry(
+  (theme, obj, cssKey, key, type) => {
+    if (!obj[key]) {
+      return void 0;
+    }
+    if (type === "spacing") {
+      if (key === "px" || key === "py") {
+        const horizontalValue = obj["px"] ? theme.globals[type].get(obj["px"]) : "0";
+        const verticalValue = obj["py"] ? theme.globals[type].get(obj["py"]) : "0";
+        return {
+          [cssKey]: `${verticalValue} ${horizontalValue}`
+        };
+      }
+      if (key === "mx" || key === "my") {
+        const horizontalValue = obj["mx"] ? theme.globals[type].get(obj["mx"]) : "0";
+        const verticalValue = obj["my"] ? theme.globals[type].get(obj["my"]) : "0";
+        return {
+          [cssKey]: `${verticalValue} ${horizontalValue}`
+        };
+      }
+      return {
+        [cssKey]: theme.globals[type].get(obj[key])
+      };
+    }
+    if (type === "color") {
+      return {
+        [cssKey]: get(vars.color.text, obj[key])
+      };
+    }
+    return {
+      [cssKey]: get(vars.color.background, obj[key])
+    };
+  }
+);
+
+export { cssResolver, omitedCSSprops, pickCSSProperties, pickNonCSSProps, styledBoxPropsKeys };

package/dist/vanilla/src/components/Button/Button.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React__default from 'react';
+import Avatar from '../Avatar/Avatar.js';
+import { BUTTON_ICON_COLOR } from '../ButtonBase/constants.js';
+import { Icon } from '../../icon/Icon.js';
+import { Text } from '../../../Text/Text.js';
+import ButtonBase from '../ButtonBase/ButtonBase.js';
+
+const Button = React__default.forwardRef((props, ref) => {
+  const {
+    type = "primary",
+    size = "normal",
+    iconLeftName,
+    iconRightName,
+    avatar,
+    children,
+    onClick,
+    isLoading
+  } = props;
+  const hasAvatar = ["primary", "secondary", "tertiary"].includes(type) && avatar;
+  const isCompact = size === "compact";
+  const iconSize = isCompact ? "sm" : "md";
+  return /* @__PURE__ */ jsxs(ButtonBase, { ...props, ref, isLoading, onClick, children: [
+    hasAvatar && /* @__PURE__ */ jsx(Avatar, { src: avatar?.src, children: avatar?.label }),
+    iconLeftName && !hasAvatar && /* @__PURE__ */ jsx(Icon, { name: iconLeftName, color: BUTTON_ICON_COLOR[type], size: iconSize }),
+    /* @__PURE__ */ jsx(Text, { children }),
+    iconRightName && /* @__PURE__ */ jsx(Icon, { name: iconRightName, color: BUTTON_ICON_COLOR[type], size: iconSize })
+  ] });
+});
+Button.displayName = "Button";
+
+export { Button as default };

package/dist/vanilla/src/components/Button/ButtonLoader/ButtonLoader.js

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { loaderWrapperStyle, barWrapperStyle, barStyle } from './ButtonLoader.style.js';
+
+const ButtonLoader = ({ dataTestId }) => {
+  return /* @__PURE__ */ jsx("div", { css: loaderWrapperStyle(), "data-testid": dataTestId, children: /* @__PURE__ */ jsx("div", { css: barWrapperStyle(), children: /* @__PURE__ */ jsx("div", { css: barStyle() }) }) });
+};
+ButtonLoader.displayName = "ButtonLoader";
+
+export { ButtonLoader as default };

package/dist/vanilla/src/components/Button/ButtonLoader/ButtonLoader.style.js

@@ -0,0 +1,46 @@
+import { css, keyframes } from '@emotion/react';
+import { rem, vars } from '@orfium/tokens';
+
+const loaderWrapperStyle = () => {
+  return css({
+    width: "100%",
+    position: "absolute"
+  });
+};
+const barWrapperStyle = () => {
+  return css({
+    width: "100%",
+    height: rem(4),
+    overflow: "hidden",
+    borderTopLeftRadius: vars["border-radius"]["2"],
+    borderTopRightRadius: vars["border-radius"]["2"],
+    position: "relative",
+    ":before": {
+      content: '""',
+      width: "100%",
+      height: rem(2),
+      display: "block"
+    }
+  });
+};
+const barStyle = () => {
+  const barAnimation = keyframes({
+    from: {
+      left: "-50%"
+    },
+    to: {
+      left: "100%"
+    }
+  });
+  return css({
+    width: "50%",
+    background: "linear-gradient(270deg, #F814E1 0.02%, #4945EE 100%)",
+    height: rem(2),
+    position: "absolute",
+    bottom: "0",
+    top: "0",
+    animation: `${barAnimation} 1.5s infinite`
+  });
+};
+
+export { barStyle, barWrapperStyle, loaderWrapperStyle };

package/dist/vanilla/src/components/ButtonBase/ButtonBase.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { omit } from 'lodash-es';
+import React__default from 'react';
+import { generateTestDataId } from '../../utils/helpers.js';
+import ButtonLoader from '../Button/ButtonLoader/ButtonLoader.js';
+import { useSlotProps } from '../utils/Slots.js';
+import { buttonWrapperStyle, buttonBaseStyle } from './ButtonBase.style.js';
+
+const ButtonBase = React__default.forwardRef((props, ref) => {
+  props = useSlotProps(props, "button");
+  const {
+    type = "primary",
+    size = "normal",
+    isBlock = false,
+    isDisabled = false,
+    isLoading = false,
+    isIconButton = false,
+    shape = "circle",
+    children,
+    dataTestId = "",
+    dataTestPrefixId = "",
+    htmlType = "button",
+    onClick,
+    onBlur,
+    sx,
+    ...rest
+  } = props;
+  const testIdName = `${dataTestPrefixId}button`;
+  return /* @__PURE__ */ jsxs("div", { css: buttonWrapperStyle({ isBlock }), children: [
+    isLoading && !isDisabled && /* @__PURE__ */ jsx(ButtonLoader, { dataTestId: testIdName }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...omit(rest, ["avatar", "iconRightName", "iconLeftName", "iconName"]),
+        ref,
+        type: htmlType,
+        "data-testid": generateTestDataId(testIdName, dataTestId),
+        css: buttonBaseStyle({
+          type,
+          size,
+          isLoading,
+          isBlock,
+          isDisabled,
+          isIconButton,
+          shape,
+          sx
+        }),
+        onClick: (event) => {
+          if (onClick) {
+            onClick(event);
+          }
+        },
+        onBlur,
+        disabled: isDisabled,
+        children
+      }
+    )
+  ] });
+});
+ButtonBase.displayName = "ButtonBase";
+
+export { ButtonBase as default };

package/dist/vanilla/src/components/ButtonBase/ButtonBase.style.js

@@ -0,0 +1,74 @@
+import { css } from '@emotion/react';
+import { vars } from '@orfium/tokens';
+import { generateStylesFromTokens } from '../Typography/utils.js';
+import { BUTTON_COLOR, typographySizes } from './constants.js';
+
+const BUTTON_SIZE = {
+  compact: {
+    size: vars.sizing["7"],
+    padding: `${vars.spacing["0"]} ${vars.spacing["4"]} ${vars.spacing["0"]} ${vars.spacing["4"]}`
+  },
+  normal: {
+    size: vars.sizing["9"],
+    padding: `${vars.spacing["0"]} ${vars.spacing["6"]} ${vars.spacing["0"]} ${vars.spacing["6"]}`
+  }
+};
+const buttonWrapperStyle = ({
+  isBlock
+}) => css({ position: "relative", width: isBlock ? "100%" : "fit-content" });
+const buttonBaseStyle = ({
+  type = "primary",
+  size = "normal",
+  isBlock,
+  isLoading,
+  isDisabled,
+  isIconButton,
+  shape,
+  sx
+}) => (theme) => {
+  const getButtonWidth = () => {
+    if (isBlock) return "100%";
+    if (isIconButton) return BUTTON_SIZE[size].size;
+    return void 0;
+  };
+  const baseButtonStyles = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    gap: vars.spacing["4"],
+    color: BUTTON_COLOR[type].text,
+    width: getButtonWidth(),
+    height: BUTTON_SIZE[size].size,
+    backgroundColor: BUTTON_COLOR[type][isLoading ? "activeFill" : "defaultFill"],
+    padding: isIconButton ? 0 : BUTTON_SIZE[size].padding,
+    borderRadius: isIconButton && shape === "circle" ? vars["border-radius"]["7"] : vars["border-radius"]["2"],
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color,border 150ms linear",
+    ":focus-visible:not(:disabled)": {
+      backgroundColor: BUTTON_COLOR[type].hoverFill
+    },
+    ":disabled": {
+      opacity: theme.tokens.disabledState.get("default"),
+      cursor: "not-allowed"
+    },
+    ":hover:not(:disabled)": {
+      backgroundColor: BUTTON_COLOR[type].hoverFill
+    },
+    ':active:not(:disabled), &[aria-expanded="true"]': {
+      backgroundColor: BUTTON_COLOR[type].activeFill
+    }
+  };
+  const loadingStyles = isLoading && !isDisabled ? {
+    pointerEvents: "none"
+  } : {};
+  return css`
+      ${generateStylesFromTokens(theme.tokens.typography.get(typographySizes[size]))};
+      ${baseButtonStyles};
+      ${loadingStyles};
+      ${sx?.container};
+    `;
+};
+
+export { buttonBaseStyle, buttonWrapperStyle };