@bolio-ui/core 2.0.0-alpha.2 → 3.0.0-alpha.1

package/dist/chunk-6ZBFUZSL.js

@@ -0,0 +1,363 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+
+
+
+
+
+var _chunkTKIUVNKPjs = require('./chunk-TKIUVNKP.js');
+
+
+var _chunkF3AL4TQZjs = require('./chunk-F3AL4TQZ.js');
+
+
+var _chunkLDTDMDE6js = require('./chunk-LDTDMDE6.js');
+
+
+var _chunkBXDUHMWSjs = require('./chunk-BXDUHMWS.js');
+
+
+var _chunkDXHNQANXjs = require('./chunk-DXHNQANX.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Modal/Modal.tsx
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactdom = require('react-dom');
+
+// core/Modal/ModalWrapper.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalWrapper.module.css.bolio-css-module-source
+var ModalWrapper_module_css_default = { "wrapper": "ModalWrapper-module_wrapper__DGcJw", "hideTab": "ModalWrapper-module_hideTab__PCR9O" };
+
+// core/Modal/ModalWrapper.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ModalWrapper = _react2.default.forwardRef(({ className = "", children, visible = false, style, ...props }, ref) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const modalContent = _react.useRef.call(void 0, null);
+  _react.useImperativeHandle.call(void 0, ref, () => modalContent.current);
+  const tabStart = _react.useRef.call(void 0, null);
+  const tabEnd = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!visible) return;
+    const activeElement = document.activeElement;
+    const isChild = _chunkUX2B3G6Ujs.isChildElement.call(void 0, modalContent.current, activeElement);
+    if (isChild) return;
+    if (tabStart.current) tabStart.current.focus();
+  }, [visible]);
+  const onKeyDown = (event) => {
+    const isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    const activeElement = document.activeElement;
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        if (tabEnd.current) tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        if (tabStart.current) tabStart.current.focus();
+      }
+    }
+  };
+  const wrapperStyle = {
+    backgroundColor: theme.palette.background,
+    color: theme.palette.foreground,
+    borderRadius: theme.layout.radius,
+    boxShadow: theme.expressiveness.shadowLarge,
+    fontSize: SCALES.font(1),
+    height: SCALES.height(1, "auto"),
+    "--modal-wrapper-padding-left": SCALES.pl(1.3125),
+    "--modal-wrapper-padding-right": SCALES.pr(1.3125),
+    padding: `${SCALES.pt(1.3125)} var(--modal-wrapper-padding-right) ${SCALES.pb(1.3125)} var(--modal-wrapper-padding-left)`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLDTDMDE6js.css_transition_default, { name: "wrapper", visible, clearTime: 300, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ModalWrapper_module_css_default.wrapper, className),
+      role: "dialog",
+      "aria-modal": "true",
+      tabIndex: -1,
+      onKeyDown,
+      ref: modalContent,
+      ...props,
+      style: wrapperStyle,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            tabIndex: 0,
+            className: ModalWrapper_module_css_default.hideTab,
+            "aria-hidden": "true",
+            ref: tabStart
+          }
+        ),
+        children,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            tabIndex: 0,
+            className: ModalWrapper_module_css_default.hideTab,
+            "aria-hidden": "true",
+            ref: tabEnd
+          }
+        )
+      ]
+    }
+  ) });
+});
+ModalWrapper.displayName = "BolioUIModalWrapper";
+var ModalWrapper_default = ModalWrapper;
+
+// core/Modal/ModalAction.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalAction.module.css.bolio-css-module-source
+var ModalAction_module_css_default = { "action": "ModalAction-module_action__hEtmQ", "btn": "ModalAction-module_btn__If5jI" };
+
+// core/Modal/ModalAction.tsx
+
+var ModalActionComponent = _react2.default.forwardRef(function({
+  className = "",
+  children,
+  onClick,
+  passive = false,
+  disabled = false,
+  ...props
+}, ref) {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const btnRef = _react.useRef.call(void 0, null);
+  const { close } = _chunkTKIUVNKPjs.useModalContext.call(void 0, );
+  _react.useImperativeHandle.call(void 0, ref, () => btnRef.current);
+  const clickHandler = (event) => {
+    if (disabled) return;
+    const actionEvent = Object.assign({}, event, {
+      close: () => close && close()
+    });
+    if (onClick) onClick(actionEvent);
+  };
+  const color = _react.useMemo.call(void 0, () => {
+    return passive ? theme.palette.accents_5 : theme.palette.foreground;
+  }, [theme.palette, passive]);
+  const bgColor = _react.useMemo.call(void 0, () => {
+    return disabled ? theme.palette.accents_1 : theme.palette.background;
+  }, [theme.palette, disabled]);
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, ModalAction_module_css_default.action, className);
+  const actionStyle = {
+    fontSize: SCALES.font(0.75),
+    border: "none",
+    color,
+    backgroundColor: theme.palette.background,
+    display: "flex",
+    WebkitBoxAlign: "center",
+    alignItems: "center",
+    WebkitBoxPack: "center",
+    justifyContent: "center",
+    flex: 1,
+    height: SCALES.height(3.5625),
+    borderRadius: 0,
+    minWidth: 0,
+    "--modal-action-hover-color": disabled ? color : theme.palette.foreground,
+    "--modal-action-hover-bg": disabled ? bgColor : theme.palette.accents_1
+  };
+  const overrideProps = {
+    ...props,
+    effect: false,
+    ref: btnRef
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkDXHNQANXjs.Button_default,
+    {
+      className: classes,
+      onClick: clickHandler,
+      disabled,
+      ...overrideProps,
+      style: {
+        ...actionStyle,
+        ...overrideProps.style
+      },
+      children
+    }
+  );
+});
+ModalActionComponent.displayName = "BolioUIModalAction";
+var ModalAction = _chunkMAICNLTYjs.with_scale_default.call(void 0, ModalActionComponent);
+var ModalAction_default = ModalAction;
+
+// core/Modal/ModalActions.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalActions.module.css.bolio-css-module-source
+var ModalActions_module_css_default = { "footer": "ModalActions-module_footer__gDr-2", "spacer": "ModalActions-module_spacer__zek5w" };
+
+// core/Modal/ModalActions.tsx
+
+var ModalActionsComponent = ({
+  children,
+  ...props
+}) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const ref = _react.useRef.call(void 0, null);
+  const [height, setHeight] = _react.useState.call(void 0, "auto");
+  _react.useEffect.call(void 0, () => {
+    if (!ref.current) return;
+    setHeight(`${ref.current.clientHeight}px`);
+  }, [ref]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ModalActions_module_css_default.spacer, style: { height } }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "footer",
+      {
+        ref,
+        ...props,
+        className: ModalActions_module_css_default.footer,
+        style: {
+          borderTop: `1px solid ${theme.palette.border}`,
+          borderBottomLeftRadius: theme.layout.radius,
+          borderBottomRightRadius: theme.layout.radius,
+          "--modal-actions-border": theme.palette.border
+        },
+        children
+      }
+    )
+  ] });
+};
+ModalActionsComponent.displayName = "BolioUIModalActions";
+var ModalActions = _react2.default.memo(ModalActionsComponent);
+var ModalActions_default = ModalActions;
+
+// core/Modal/Modal.tsx
+
+var ModalComponent = _react2.default.forwardRef(
+  ({
+    visible: customVisible,
+    onClose,
+    children,
+    keyboard = true,
+    wrapClassName = "",
+    onContentClick,
+    disableBackdropClick = false,
+    positionClassName = "",
+    backdropClassName = "",
+    layerClassName = "",
+    role = "dialog",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby
+  }, ref) => {
+    const portal = _chunkBXDUHMWSjs.use_portal_default.call(void 0, "modal");
+    const baseId = _react.useId.call(void 0, );
+    const titleId = `${baseId}-title`;
+    const descriptionId = `${baseId}-description`;
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const [, setBodyHidden] = _chunkTKIUVNKPjs.use_body_scroll_default.call(void 0, null, { delayReset: 300 });
+    const [visible, setVisible] = _react.useState.call(void 0, false);
+    const [withoutActionsChildren, ActionsChildren] = _chunkUX2B3G6Ujs.pickChild.call(void 0, 
+      children,
+      ModalAction_default
+    );
+    const hasActions = ActionsChildren && _react2.default.Children.count(ActionsChildren) > 0;
+    const closeModal = _react.useCallback.call(void 0, () => {
+      if (onClose) onClose();
+      setVisible(false);
+      setBodyHidden(false);
+    }, [onClose, setBodyHidden]);
+    _react.useEffect.call(void 0, () => {
+      if (typeof customVisible === "undefined") return;
+      setVisible(customVisible);
+      setBodyHidden(customVisible);
+    }, [customVisible, setBodyHidden]);
+    const { bindings } = _chunkF3AL4TQZjs.use_keyboard_default.call(void 0, 
+      () => {
+        if (keyboard) closeModal();
+      },
+      27 /* Escape */,
+      {
+        disableGlobalEvent: true
+      }
+    );
+    const closeFromBackdrop = () => {
+      if (disableBackdropClick) return;
+      closeModal();
+    };
+    const modalConfig = _react.useMemo.call(void 0, 
+      () => ({
+        close: closeModal,
+        titleId,
+        descriptionId
+      }),
+      [closeModal, titleId, descriptionId]
+    );
+    if (!portal) return null;
+    return _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTKIUVNKPjs.ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkTKIUVNKPjs.backdrop_default,
+        {
+          onClick: closeFromBackdrop,
+          onContentClick,
+          visible,
+          width: SCALES.width(26),
+          positionClassName,
+          backdropClassName,
+          layerClassName,
+          ...bindings,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            ModalWrapper_default,
+            {
+              ref,
+              visible,
+              className: wrapClassName,
+              role,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkTKIUVNKPjs.ModalTitle_default) ? titleId : void 0),
+              "aria-describedby": ariaDescribedby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkTKIUVNKPjs.ModalSubtitle_default) ? descriptionId : void 0),
+              children: [
+                withoutActionsChildren,
+                hasActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalActions_default, { children: ActionsChildren })
+              ]
+            }
+          )
+        }
+      ) }),
+      portal
+    );
+  }
+);
+ModalComponent.displayName = "BolioUIModal";
+var Modal = _chunkMAICNLTYjs.with_scale_default.call(void 0, ModalComponent);
+var Modal_default = Modal;
+
+// core/Modal/index.ts
+Modal_default.Title = _chunkTKIUVNKPjs.ModalTitle_default;
+Modal_default.Subtitle = _chunkTKIUVNKPjs.ModalSubtitle_default;
+Modal_default.Content = _chunkTKIUVNKPjs.ModalContent_default;
+Modal_default.Action = ModalAction_default;
+var Modal_default2 = Modal_default;
+
+
+
+exports.Modal_default = Modal_default2;

package/dist/chunk-7N7PEBRB.js

@@ -0,0 +1,82 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Dot/Dot.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Dot/Dot.module.css.bolio-css-module-source
+var Dot_module_css_default = { "dot": "Dot-module_dot__SGd5d", "icon": "Dot-module_icon__Mc0hA", "label": "Dot-module_label__haoc8" };
+
+// core/Dot/Dot.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var getColor = (type, theme) => {
+  const colors = {
+    default: theme.palette.accents_2,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error,
+    info: theme.palette.info
+  };
+  return colors[type] || colors.default;
+};
+var DotComponent = _react2.default.forwardRef(
+  ({
+    type = "default",
+    children,
+    className = "",
+    color = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const typeColor = _react.useMemo.call(void 0, () => getColor(type, theme), [type, theme]);
+    const dotStyle = {
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "span",
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, "dot", Dot_module_css_default.dot, className),
+        ...props,
+        style: dotStyle,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: Dot_module_css_default.icon,
+              style: { backgroundColor: color ? color : typeColor }
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Dot_module_css_default.label, children })
+        ]
+      }
+    );
+  }
+);
+DotComponent.displayName = "BolioUIDot";
+var Dot = _chunkMAICNLTYjs.with_scale_default.call(void 0, DotComponent);
+var Dot_default = Dot;
+
+// core/Dot/index.ts
+var Dot_default2 = Dot_default;
+
+
+
+exports.Dot_default = Dot_default2;

package/dist/chunk-A2NLRQ55.js

@@ -0,0 +1,177 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkRZBEZ26Ajs = require('./chunk-RZBEZ26A.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Code/Code.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Code/Code.module.css.bolio-css-module-source
+var Code_module_css_default = { "pre": "Code-module_pre__UgdQp", "dark": "Code-module_dark__kv7y4", "traffic": "Code-module_traffic__CuA-Q", "close": "Code-module_close__BGiX8", "mini": "Code-module_mini__XcXfx", "full": "Code-module_full__yJFy9", "tabs": "Code-module_tabs__SP22o", "tab": "Code-module_tab__536h1", "name": "Code-module_name__bFwLB", "active": "Code-module_active__f48Hh" };
+
+// core/Code/Code.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var CodeComponent = _react2.default.forwardRef(
+  ({
+    children,
+    block = false,
+    className = "",
+    name = "",
+    classic = false,
+    tabs = [],
+    activeTab = 0,
+    onTabChange,
+    ...props
+  }, ref) => {
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const id = _react2.default.useId();
+    const tabRefs = _react2.default.useRef([]);
+    const { background, border, tab } = _react.useMemo.call(void 0, () => {
+      if (!classic)
+        return {
+          border: theme.palette.accents_2,
+          background: _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, theme.palette.accents_1, 0.75),
+          tab: theme.palette.accents_1
+        };
+      return {
+        border: theme.palette.accents_2,
+        background: theme.palette.background,
+        tab: theme.palette.background
+      };
+    }, [classic, theme.palette]);
+    const hasTabs = tabs.length > 0;
+    const moveTab = (event, index) => {
+      var _a;
+      const last = tabs.length - 1;
+      const target = {
+        ArrowRight: index === last ? 0 : index + 1,
+        ArrowLeft: index === 0 ? last : index - 1,
+        Home: 0,
+        End: last
+      }[event.key];
+      if (target === void 0) return;
+      event.preventDefault();
+      onTabChange == null ? void 0 : onTabChange(target);
+      (_a = tabRefs.current[target]) == null ? void 0 : _a.focus();
+    };
+    if (!block)
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "code", { ref, ...props, children });
+    const nameStyle = {
+      borderRight: `1px solid ${theme.palette.accents_2}`,
+      color: theme.palette.accents_5,
+      fontSize: SCALES.font(0.8125),
+      padding: `${SCALES.font(0.32)} ${SCALES.font(0.5)} ${SCALES.font(0.32)} ${SCALES.font(0.5)}`
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        className: Code_module_css_default.pre,
+        style: {
+          border: `1px solid ${border}`,
+          fontSize: SCALES.font(0.875),
+          width: SCALES.width(1, "initial"),
+          height: SCALES.height(1, "auto"),
+          margin: `${SCALES.mt(1.3)} ${SCALES.mr(0)} ${SCALES.mb(1.3)} ${SCALES.ml(0)}`,
+          borderRadius: theme.layout.radius,
+          backgroundColor: background,
+          "--code-tab-hover-color": theme.palette.foreground,
+          "--code-tab-focus-color": theme.palette.accents_5
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "header",
+            {
+              style: {
+                borderBottom: `1px solid ${theme.palette.accents_2}`,
+                backgroundColor: theme.palette.border
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "div",
+                  {
+                    className: Code_module_css_default.traffic,
+                    style: { padding: `0 ${theme.layout.gapHalf}` },
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Code_module_css_default.close }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Code_module_css_default.mini }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Code_module_css_default.full })
+                    ]
+                  }
+                ),
+                hasTabs ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "tablist", className: Code_module_css_default.tabs, children: tabs.map((label, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    ref: (element) => {
+                      tabRefs.current[index] = element;
+                    },
+                    type: "button",
+                    role: "tab",
+                    id: `${id}-tab-${index}`,
+                    "aria-selected": index === activeTab,
+                    "aria-controls": `${id}-panel`,
+                    tabIndex: index === activeTab ? 0 : -1,
+                    className: _chunk5KUROAEPjs.joinClasses.call(void 0, Code_module_css_default.name, Code_module_css_default.tab, {
+                      [Code_module_css_default.active]: index === activeTab
+                    }),
+                    style: {
+                      ...nameStyle,
+                      backgroundColor: index === activeTab ? tab : void 0
+                    },
+                    onClick: () => onTabChange == null ? void 0 : onTabChange(index),
+                    onKeyDown: (event) => moveTab(event, index),
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: label })
+                  },
+                  `${label}-${index}`
+                )) }) : name && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    className: _chunk5KUROAEPjs.joinClasses.call(void 0, Code_module_css_default.name, Code_module_css_default.active),
+                    style: { ...nameStyle, backgroundColor: tab },
+                    children: name
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "pre",
+            {
+              className,
+              style: {
+                padding: `${SCALES.pt(1.1)} ${SCALES.pr(1)} ${SCALES.pb(1.1)} ${SCALES.pl(1)}`
+              },
+              ...hasTabs && {
+                role: "tabpanel",
+                id: `${id}-panel`,
+                "aria-labelledby": `${id}-tab-${activeTab}`
+              },
+              ...props,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CodeComponent.displayName = "BolioUICode";
+var Code = _chunkMAICNLTYjs.with_scale_default.call(void 0, CodeComponent);
+var Code_default = Code;
+
+// core/Code/index.ts
+var Code_default2 = Code_default;
+
+
+
+exports.Code_default = Code_default2;