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

package/esm/chunk-6BHDVSPB.js

@@ -1,226 +0,0 @@
-import {
-  log_warning_default
-} from "./chunk-AXYDJGTN.js";
-import {
-  use_current_state_default
-} from "./chunk-33BUV2RX.js";
-import {
-  use_scale_default,
-  with_scale_default
-} from "./chunk-S62PPQHN.js";
-import {
-  hasChild,
-  pickChild
-} from "./chunk-UX2B3G6U.js";
-import {
-  use_theme_default
-} from "./chunk-45MVPPJN.js";
-import {
-  use_classes_default
-} from "./chunk-5KUROAEP.js";
-
-// core/Fieldset/Fieldset.tsx
-import _JSXStyle5 from "styled-jsx/style";
-import React2, { useEffect, useMemo, useState } from "react";
-
-// core/Fieldset/FieldsetTitle.tsx
-import _JSXStyle from "styled-jsx/style";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function FieldsetTitle({
-  className = "",
-  children,
-  ...props
-}) {
-  const classes = use_classes_default("title", className);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { ...props, className: "jsx-4105044205 " + (props && props.className != null && props.className || classes || ""), children }),
-    /* @__PURE__ */ jsx(_JSXStyle, { id: "4105044205", children: ".title.jsx-4105044205{line-height:1.5;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;word-break:break-word;font-weight:600;-webkit-letter-spacing:-0.020625em;-moz-letter-spacing:-0.020625em;-ms-letter-spacing:-0.020625em;letter-spacing:-0.020625em;font-size:1.25em;width:auto;}" })
-  ] });
-}
-FieldsetTitle.displayName = "BolioUIFieldsetTitle";
-var FieldsetTitle_default = FieldsetTitle;
-
-// core/Fieldset/FieldsetSubtitle.tsx
-import _JSXStyle2 from "styled-jsx/style";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function FieldsetSubtitle({
-  className = "",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("div", { ...props, className: "jsx-2265168013 " + (props && props.className != null && props.className || className || ""), children }),
-    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "2265168013", children: "div.jsx-2265168013{font-size:0.875em;line-height:1.6;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;margin:0.75em 0;}" })
-  ] });
-}
-FieldsetSubtitle.displayName = "BolioUIFieldsetSubtitle";
-var FieldsetSubtitle_default = FieldsetSubtitle;
-
-// core/Fieldset/FieldsetFooter.tsx
-import _JSXStyle3 from "styled-jsx/style";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function FieldsetFooterComponent({
-  className = "",
-  children,
-  ...props
-}) {
-  const theme = use_theme_default();
-  const {
-    SCALES
-  } = use_scale_default();
-  return /* @__PURE__ */ jsxs3("footer", { ...props, className: _JSXStyle3.dynamic([["4117809613", [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
-    children,
-    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "4117809613", dynamic: [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `footer.__jsx-style-dynamic-selector{background-color:${theme.palette.accents_1};border-top:1px solid ${theme.palette.border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:${theme.palette.accents_6};padding:${theme.layout.gapHalf} ${theme.layout.gap};box-sizing:border-box;font-size:${SCALES.font(0.875)};width:${SCALES.width(1, "auto")};height:${SCALES.height(2.875)};padding:${SCALES.pt(0.625)} ${SCALES.pr(1.31)} ${SCALES.pb(0.625)} ${SCALES.pl(1.31)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}` })
-  ] });
-}
-FieldsetFooterComponent.displayName = "BolioUIFieldsetFooter";
-var FieldsetFooter = with_scale_default(FieldsetFooterComponent);
-var FieldsetFooter_default = FieldsetFooter;
-
-// core/Fieldset/FieldsetContent.tsx
-import _JSXStyle4 from "styled-jsx/style";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function FieldsetContentComponent({
-  className = "",
-  children,
-  ...props
-}) {
-  const {
-    SCALES
-  } = use_scale_default();
-  const classes = use_classes_default("content", className);
-  return /* @__PURE__ */ jsxs4("div", { ...props, className: _JSXStyle4.dynamic([["1553218241", [SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
-    children,
-    /* @__PURE__ */ jsx4(_JSXStyle4, { id: "1553218241", dynamic: [SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `.content.__jsx-style-dynamic-selector{width:${SCALES.width(1, "100%")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(1.3)} ${SCALES.pr(1.3)} ${SCALES.pb(1.3)} ${SCALES.pl(1.3)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.content.__jsx-style-dynamic-selector > *:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector > *:last-child{margin-bottom:0;}` })
-  ] });
-}
-FieldsetContentComponent.displayName = "BolioUIFieldsetContent";
-var FieldsetContent = with_scale_default(FieldsetContentComponent);
-var FieldsetContent_default = FieldsetContent;
-
-// core/Fieldset/FieldsetContext.ts
-import React from "react";
-var defaultContext = {
-  inGroup: false,
-  currentValue: ""
-};
-var FieldsetContext = React.createContext(defaultContext);
-var useFieldset = () => React.useContext(FieldsetContext);
-
-// core/Fieldset/Fieldset.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var FieldsetComponent = React2.forwardRef(({
-  className = "",
-  title = "",
-  subtitle = "",
-  children,
-  value = "",
-  label = "",
-  ...props
-}, ref) => {
-  const theme = use_theme_default();
-  const {
-    SCALES
-  } = use_scale_default();
-  const {
-    inGroup,
-    currentValue,
-    register
-  } = useFieldset();
-  const [hidden, setHidden] = useState(inGroup);
-  const classes = use_classes_default("fieldset", className);
-  const [withoutFooterChildren, FooterChildren] = pickChild(children, FieldsetFooter_default);
-  const hasTitle = hasChild(withoutFooterChildren, FieldsetTitle_default);
-  const hasSubtitle = hasChild(withoutFooterChildren, FieldsetSubtitle_default);
-  const hasContent = hasChild(withoutFooterChildren, FieldsetContent_default);
-  if (inGroup) {
-    if (!label) {
-      log_warning_default('Props "label" is required when in a group.', "Fieldset Group");
-    }
-    if (!value || value === "") {
-      value = label;
-    }
-  }
-  useEffect(() => {
-    if (!inGroup) return;
-    if (register) register({
-      value,
-      label
-    });
-  }, []);
-  useEffect(() => {
-    if (!inGroup) return;
-    if (!currentValue || currentValue === "") return;
-    setHidden(currentValue !== value);
-  }, [inGroup, currentValue, value]);
-  const content = useMemo(() => /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    withoutFooterChildren,
-    !hasTitle && title && /* @__PURE__ */ jsx5(FieldsetTitle_default, { children: title }),
-    !hasSubtitle && subtitle && /* @__PURE__ */ jsx5(FieldsetSubtitle_default, { children: subtitle })
-  ] }), [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle]);
-  return /* @__PURE__ */ jsxs5("div", { ref, ...props, className: _JSXStyle5.dynamic([["1598137352", [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? "none" : "block", SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
-    hasContent ? content : /* @__PURE__ */ jsx5(FieldsetContent_default, { children: content }),
-    FooterChildren && FooterChildren,
-    /* @__PURE__ */ jsx5(_JSXStyle5, { id: "1598137352", dynamic: [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? "none" : "block", SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `.fieldset.__jsx-style-dynamic-selector{background-color:${theme.palette.background};border:1px solid ${theme.palette.border};border-radius:${theme.layout.radius};overflow:hidden;display:${hidden ? "none" : "block"};font-size:${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)};}` })
-  ] });
-});
-FieldsetComponent.displayName = "BolioUIFieldset";
-var Fieldset = with_scale_default(FieldsetComponent);
-var Fieldset_default = Fieldset;
-
-// core/Fieldset/FieldsetGroup.tsx
-import _JSXStyle6 from "styled-jsx/style";
-import { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function FieldsetGroupComponent({
-  className = "",
-  children,
-  value,
-  onChange,
-  ...props
-}) {
-  const theme = use_theme_default();
-  const {
-    SCALES
-  } = use_scale_default();
-  const [selfVal, setSelfVal] = useState2(value);
-  const [items, setItems, ref] = use_current_state_default([]);
-  const classes = use_classes_default("group", className);
-  const register = useCallback((newItem) => {
-    const hasItem = ref.current.find((item) => item.value === newItem.value);
-    if (hasItem) {
-      log_warning_default('The "value" of each "Fieldset" must be unique.', "Fieldset");
-    }
-    setItems([...ref.current, newItem]);
-  }, [ref, setItems]);
-  const providerValue = useMemo2(() => ({
-    currentValue: selfVal,
-    inGroup: true,
-    register
-  }), [selfVal, register]);
-  const clickHandle = useCallback((nextValue) => {
-    setSelfVal(nextValue);
-    if (onChange) onChange(nextValue);
-  }, [onChange]);
-  return /* @__PURE__ */ jsx6(FieldsetContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsxs6("div", { ...props, className: _JSXStyle6.dynamic([["4025768429", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
-    /* @__PURE__ */ jsx6("div", { className: _JSXStyle6.dynamic([["4025768429", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " group-tabs", children: items.map((item) => /* @__PURE__ */ jsx6("button", { onClick: () => clickHandle(item.value), className: _JSXStyle6.dynamic([["4025768429", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + ((selfVal === item.value ? "active" : "") || ""), children: item.label }, item.value)) }),
-    /* @__PURE__ */ jsx6("div", { className: _JSXStyle6.dynamic([["4025768429", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " group-content", children }),
-    /* @__PURE__ */ jsx6(_JSXStyle6, { id: "4025768429", dynamic: [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius], children: `.group.__jsx-style-dynamic-selector{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, 0)} ${SCALES.ml(0)};}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:${SCALES.font(1)};margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${theme.palette.accents_3};background-color:${theme.palette.accents_1};font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ${theme.palette.border};-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:${theme.palette.background};color:${theme.palette.foreground};cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:${theme.layout.radius};}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:${theme.layout.radius};}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}` })
-  ] }) });
-}
-FieldsetGroupComponent.displayName = "BolioUIFieldsetGroup";
-var FieldsetGroup = with_scale_default(FieldsetGroupComponent);
-var FieldsetGroup_default = FieldsetGroup;
-
-// core/Fieldset/index.ts
-Fieldset_default.Title = FieldsetTitle_default;
-Fieldset_default.Subtitle = FieldsetSubtitle_default;
-Fieldset_default.Footer = FieldsetFooter_default;
-Fieldset_default.Group = FieldsetGroup_default;
-Fieldset_default.Content = FieldsetContent_default;
-Fieldset_default.Body = FieldsetContent_default;
-var Fieldset_default2 = Fieldset_default;
-
-export {
-  Fieldset_default2 as Fieldset_default
-};

package/esm/chunk-6XJS3KMW.js

@@ -1,436 +0,0 @@
-import {
-  use_default_props_default
-} from "./chunk-BSDZWWUS.js";
-import {
-  getVariantColors,
-  isSemanticColorType
-} from "./chunk-GJZT47MP.js";
-import {
-  addColorAlpha
-} from "./chunk-RZBEZ26A.js";
-import {
-  Loading_default
-} from "./chunk-BDEBNBW6.js";
-import {
-  useButtonGroupContext
-} from "./chunk-NDERASK2.js";
-import {
-  use_scale_default,
-  with_scale_default
-} from "./chunk-S62PPQHN.js";
-import {
-  use_theme_default
-} from "./chunk-45MVPPJN.js";
-import {
-  use_classes_default
-} from "./chunk-5KUROAEP.js";
-
-// core/Button/Button.tsx
-import _JSXStyle5 from "styled-jsx/style";
-import React3, { useRef as useRef2, useState, useMemo, useImperativeHandle } from "react";
-
-// core/Button/ButtonDrip.tsx
-import _JSXStyle from "styled-jsx/style";
-import { useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ButtonDrip = ({
-  x = 0,
-  y = 0,
-  color,
-  onCompleted
-}) => {
-  const dripRef = useRef(null);
-  const top = Number.isNaN(+y) ? 0 : y - 10;
-  const left = Number.isNaN(+x) ? 0 : x - 10;
-  useEffect(() => {
-    const drip = dripRef.current;
-    if (!drip) return;
-    drip.addEventListener("animationend", onCompleted);
-    return () => drip.removeEventListener("animationend", onCompleted);
-  });
-  return /* @__PURE__ */ jsxs("div", { ref: dripRef, className: "jsx-3424889537 drip", children: [
-    /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", style: {
-      top,
-      left
-    }, className: "jsx-3424889537", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", className: "jsx-3424889537", children: /* @__PURE__ */ jsx("g", { fill: color, className: "jsx-3424889537", children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", rx: "10", className: "jsx-3424889537" }) }) }) }),
-    /* @__PURE__ */ jsx(_JSXStyle, { id: "3424889537", children: ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}" })
-  ] });
-};
-ButtonDrip.displayName = "BolioUItButtonDrip";
-var ButtonDrip_default = ButtonDrip;
-
-// core/Button/ButtonLoading.tsx
-import _JSXStyle2 from "styled-jsx/style";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function ButtonLoading({
-  color
-}) {
-  return /* @__PURE__ */ jsxs2("div", { className: "jsx-412966635 btn-loading", children: [
-    /* @__PURE__ */ jsx2(Loading_default, { color }),
-    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "412966635", children: ".btn-loading.jsx-412966635{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--bolio-ui-button-bg);}" })
-  ] });
-}
-ButtonLoading.displayName = "BolioUIButtonLoading";
-var ButtonLoading_default = ButtonLoading;
-
-// core/Button/utils.tsx
-import _JSXStyle4 from "styled-jsx/style";
-import React2 from "react";
-
-// core/Button/ButtonIcon.tsx
-import _JSXStyle3 from "styled-jsx/style";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ButtonIcon({
-  isRight = false,
-  isSingle,
-  children,
-  className = "",
-  ...props
-}) {
-  const classes = use_classes_default("icon", {
-    right: isRight,
-    single: isSingle
-  }, className);
-  return /* @__PURE__ */ jsxs3("span", { ...props, className: "jsx-2499243154 " + (props && props.className != null && props.className || classes || ""), children: [
-    children,
-    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "2499243154", children: ".icon.jsx-2499243154{position:absolute;left:var(--bolio-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--bolio-ui-button-color);z-index:1;}.right.jsx-2499243154{right:var(--bolio-ui-button-icon-padding);left:auto;}.icon.jsx-2499243154 svg{background:transparent;height:calc(var(--bolio-ui-button-height) / 2.35);width:calc(var(--bolio-ui-button-height) / 2.35);}.single.jsx-2499243154{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}" })
-  ] });
-}
-ButtonIcon.displayName = "BolioUIButtonIcon";
-var ButtonIcon_default = ButtonIcon;
-
-// core/Button/utils.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var getButtonChildrenWithIcon = (auto = false, children, icons) => {
-  const {
-    icon,
-    iconRight
-  } = icons;
-  const hasIcon = icon || iconRight;
-  const isRight = Boolean(iconRight);
-  const paddingForAutoMode = auto ? `calc(var(--bolio-ui-button-height) / 2 + var(--bolio-ui-button-icon-padding) * .5)` : 0;
-  const classes = use_classes_default("text", isRight ? "right" : "left");
-  if (!hasIcon) return /* @__PURE__ */ jsx4("div", { className: "text", children });
-  if (React2.Children.count(children) === 0) {
-    return /* @__PURE__ */ jsx4(ButtonIcon_default, { isRight, isSingle: true, children: hasIcon });
-  }
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx4(ButtonIcon_default, { isRight, children: hasIcon }),
-    /* @__PURE__ */ jsxs4("div", { className: _JSXStyle4.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || ""), children: [
-      children,
-      /* @__PURE__ */ jsx4(_JSXStyle4, { id: "3568181479", dynamic: [paddingForAutoMode, paddingForAutoMode], children: `.left.__jsx-style-dynamic-selector{padding-left:${paddingForAutoMode};}.right.__jsx-style-dynamic-selector{padding-right:${paddingForAutoMode};}` })
-    ] })
-  ] });
-};
-var filterPropsWithGroup = (props, config) => {
-  if (!config.isButtonGroup) return props;
-  return {
-    ...props,
-    auto: true,
-    shadow: false,
-    ghost: config.ghost || props.ghost,
-    type: config.type || props.type,
-    disabled: config.disabled || props.disabled
-  };
-};
-
-// core/Button/styles.ts
-var getButtonGhostColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "outline") : null;
-var getButtonLightColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "light") : null;
-var getButtonSubtleColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "subtle") : null;
-var getButtonColors = (palette, props) => {
-  const { type, disabled, ghost, subtle } = props;
-  const colors = {
-    default: {
-      bg: palette.accents_2,
-      border: palette.accents_2,
-      color: palette.foreground
-    },
-    primary: {
-      bg: palette.primary,
-      border: palette.primary,
-      color: "#fff"
-    },
-    secondary: {
-      bg: palette.secondary,
-      border: palette.secondary,
-      color: "#fff"
-    },
-    success: {
-      bg: palette.success,
-      border: palette.success,
-      color: "#fff"
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.warning,
-      color: "#fff"
-    },
-    error: {
-      bg: palette.error,
-      border: palette.error,
-      color: "#fff"
-    },
-    info: {
-      bg: palette.info,
-      border: palette.info,
-      color: "#fff"
-    },
-    abort: {
-      bg: "transparent",
-      border: "transparent",
-      color: palette.accents_5
-    }
-  };
-  if (disabled)
-    return {
-      bg: palette.accents_2,
-      border: palette.accents_2,
-      color: palette.accents_4
-    };
-  const withoutLightType = type == null ? void 0 : type.replace("-light", "");
-  const isLight = type == null ? void 0 : type.endsWith("-light");
-  const defaultColor = colors.default;
-  if (ghost)
-    return getButtonGhostColors(palette, withoutLightType) || defaultColor;
-  if (subtle)
-    return getButtonSubtleColors(palette, withoutLightType) || defaultColor;
-  if (isLight)
-    return getButtonLightColors(palette, withoutLightType) || defaultColor;
-  return colors[withoutLightType] || defaultColor;
-};
-var getButtonGhostHoverColors = (palette, type) => {
-  const colors = {
-    primary: {
-      bg: palette.primary,
-      border: palette.background,
-      color: "white"
-    },
-    secondary: {
-      bg: palette.secondary,
-      border: palette.background,
-      color: "white"
-    },
-    success: {
-      bg: palette.success,
-      border: palette.background,
-      color: "white"
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.background,
-      color: "white"
-    },
-    error: {
-      bg: palette.error,
-      border: palette.background,
-      color: "white"
-    },
-    info: {
-      bg: palette.info,
-      border: palette.background,
-      color: "white"
-    }
-  };
-  const withoutLightType = type.replace("-light", "");
-  return colors[withoutLightType] || null;
-};
-var getButtonHoverColors = (palette, props) => {
-  const { type, disabled, loading, shadow, ghost } = props;
-  const defaultColor = getButtonColors(palette, props);
-  const alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
-  const colors = {
-    default: {
-      bg: palette.background,
-      border: palette.foreground
-    },
-    primary: {
-      bg: palette.background,
-      border: palette.primary
-    },
-    secondary: {
-      bg: palette.background,
-      border: palette.secondary
-    },
-    success: {
-      bg: palette.background,
-      border: palette.success
-    },
-    warning: {
-      bg: palette.background,
-      border: palette.warning
-    },
-    error: {
-      bg: palette.background,
-      border: palette.error
-    },
-    info: {
-      bg: palette.background,
-      border: palette.info
-    },
-    abort: {
-      bg: "transparent",
-      border: "transparent",
-      color: palette.accents_5
-    },
-    "primary-light": {
-      ...defaultColor,
-      bg: alphaBackground
-    },
-    "secondary-light": {
-      ...defaultColor,
-      bg: alphaBackground
-    },
-    "success-light": {
-      ...defaultColor,
-      bg: alphaBackground
-    },
-    "warning-light": {
-      ...defaultColor,
-      bg: alphaBackground
-    },
-    "error-light": {
-      ...defaultColor,
-      bg: alphaBackground
-    },
-    "info-light": {
-      ...defaultColor,
-      bg: alphaBackground
-    }
-  };
-  if (disabled)
-    return {
-      bg: palette.accents_2,
-      border: palette.accents_2,
-      color: "#ccc"
-    };
-  if (loading)
-    return {
-      ...defaultColor,
-      color: "transparent"
-    };
-  if (shadow) return defaultColor;
-  const hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors.default;
-  return {
-    ...hoverColor,
-    color: hoverColor.color || hoverColor.border
-  };
-};
-var getButtonCursor = (disabled, loading) => {
-  if (disabled)
-    return {
-      cursor: "not-allowed",
-      events: "auto"
-    };
-  if (loading)
-    return {
-      cursor: "default",
-      events: "none"
-    };
-  return {
-    cursor: "pointer",
-    events: "auto"
-  };
-};
-var getButtonDripColor = (palette, props) => {
-  const { type, subtle } = props;
-  if (subtle) return addColorAlpha(getButtonColors(palette, props).color, 0.25);
-  const isLightHover = type == null ? void 0 : type.endsWith("light");
-  const hoverColors = getButtonHoverColors(palette, props);
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_3, 0.65);
-};
-
-// core/Button/Button.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var defaultProps = {
-  type: "default",
-  htmlType: "button",
-  ghost: false,
-  subtle: false,
-  rounded: false,
-  loading: false,
-  shadow: false,
-  auto: false,
-  effect: true,
-  disabled: false,
-  className: ""
-};
-var ButtonComponent = React3.forwardRef((btnProps, ref) => {
-  const theme = use_theme_default();
-  const {
-    SCALES
-  } = use_scale_default();
-  const buttonRef = useRef2(null);
-  useImperativeHandle(ref, () => buttonRef.current);
-  const [dripShow, setDripShow] = useState(false);
-  const [dripX, setDripX] = useState(0);
-  const [dripY, setDripY] = useState(0);
-  const groupConfig = useButtonGroupContext();
-  const filteredProps = filterPropsWithGroup(use_default_props_default(btnProps, defaultProps), groupConfig);
-  const {
-    children,
-    disabled,
-    type,
-    loading,
-    shadow,
-    ghost,
-    subtle,
-    rounded,
-    effect,
-    onClick,
-    auto,
-    icon,
-    htmlType,
-    iconRight,
-    className,
-    ...props
-  } = filteredProps;
-  const {
-    bg,
-    border,
-    color
-  } = useMemo(() => getButtonColors(theme.palette, filteredProps), [theme.palette, filteredProps]);
-  const hover = useMemo(() => getButtonHoverColors(theme.palette, filteredProps), [theme.palette, filteredProps]);
-  const {
-    cursor,
-    events
-  } = useMemo(() => getButtonCursor(disabled, loading), [disabled, loading]);
-  const dripColor = useMemo(() => getButtonDripColor(theme.palette, filteredProps), [theme.palette, filteredProps]);
-  const dripCompletedHandle = () => {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-  const clickHandler = (event) => {
-    if (disabled || loading) return;
-    const showDrip = effect;
-    if (showDrip && buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      setDripShow(true);
-      setDripX(event.clientX - rect.left);
-      setDripY(event.clientY - rect.top);
-    }
-    if (onClick) onClick(event);
-  };
-  const childrenWithIcon = useMemo(() => getButtonChildrenWithIcon(auto, children, {
-    icon,
-    iconRight
-  }), [auto, children, icon, iconRight]);
-  const [paddingLeft, paddingRight] = [auto ? SCALES.pl(1.15) : SCALES.pl(1.15), auto ? SCALES.pr(1.15) : SCALES.pr(1.15)];
-  return /* @__PURE__ */ jsxs5("button", { ref: buttonRef, type: htmlType, disabled, onClick: clickHandler, ...props, className: _JSXStyle5.dynamic([["2171430373", [rounded ? "25px" : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? "0 4px 10px 0" + bg : "none", SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? "min-content" : SCALES.width(10.5), auto ? "auto" : "initial", SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]]]) + " " + (props && props.className != null && props.className || use_classes_default("btn", className) || ""), children: [
-    loading && /* @__PURE__ */ jsx5(ButtonLoading_default, { color }),
-    childrenWithIcon,
-    dripShow && /* @__PURE__ */ jsx5(ButtonDrip_default, { x: dripX, y: dripY, color: dripColor, onCompleted: dripCompletedHandle }),
-    /* @__PURE__ */ jsx5(_JSXStyle5, { id: "2171430373", dynamic: [rounded ? "25px" : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? "0 4px 10px 0" + bg : "none", SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? "min-content" : SCALES.width(10.5), auto ? "auto" : "initial", SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events], children: `.btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:${rounded ? "25px" : theme.layout.radius};font-weight:bold;font-size:${SCALES.font(0.875)};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms;transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms;position:relative;overflow:hidden;color:${color};background-color:${bg};border:1px solid ${border};cursor:${cursor};pointer-events:${events};box-shadow:${shadow ? "0 4px 10px 0" + bg : "none"};--bolio-ui-button-icon-padding:${SCALES.pl(0.75)};--bolio-ui-button-height:${SCALES.height(2.5)};--bolio-ui-button-color:${color};--bolio-ui-button-bg:${bg};min-width:${auto ? "min-content" : SCALES.width(10.5)};width:${auto ? "auto" : "initial"};height:${SCALES.height(2.5)};padding:${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{cursor:${cursor};pointer-events:${events};}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}` })
-  ] });
-});
-ButtonComponent.displayName = "BolioUIButton";
-var Button = with_scale_default(ButtonComponent);
-var Button_default = Button;
-
-// core/Button/index.ts
-var Button_default2 = Button_default;
-
-export {
-  Button_default2 as Button_default
-};