react-science 0.34.0 → 0.36.0

package/src/components/forms/radio-group/RadioGroup.tsx

@@ -6,7 +6,6 @@ import { ReactNode } from 'react';
 import { InputVariant } from '../styles';
 
 import { ButtonRadioItem } from './ButtonRadioItem';
-import { ClassicRadioItem } from './ClassicRadioItem';
 
 export interface RadioOption {
   value: string;
@@ -15,7 +14,6 @@ export interface RadioOption {
 }
 export interface RadioGroupProps {
   selected?: RadioOption;
-  type?: 'classic' | 'button';
   options?: RadioOption[];
   onSelect?: (option: RadioOption) => void;
   name?: string;
@@ -44,7 +42,6 @@ export function RadioGroup(props: RadioGroupProps) {
   const {
     id,
     selected,
-    type = 'classic',
     disabled: groupDisabled = false,
     options = [],
     onSelect,
@@ -54,12 +51,9 @@ export function RadioGroup(props: RadioGroupProps) {
   return (
     <RadioGroupRadix.Root
       id={id}
-      css={[
-        rootStyles.basic,
-        type === 'classic' ? null : rootStyles.button(variant),
-      ]}
+      css={[rootStyles.basic, rootStyles.button(variant)]}
       style={{
-        gap: type === 'classic' ? (variant === 'default' ? 10 : 5) : 0,
+        gap: 0,
       }}
       value={selected?.value}
       name={name}
@@ -67,7 +61,6 @@ export function RadioGroup(props: RadioGroupProps) {
     >
       {options?.map(({ value, label, disabled }) => {
         const childProps = {
-          key: value,
           value,
           label,
           disabled: groupDisabled || disabled,
@@ -75,11 +68,7 @@ export function RadioGroup(props: RadioGroupProps) {
           variant,
           name,
         };
-        return type === 'classic' ? (
-          <ClassicRadioItem {...childProps} />
-        ) : (
-          <ButtonRadioItem {...childProps} />
-        );
+        return <ButtonRadioItem key={value} {...childProps} />;
       })}
     </RadioGroupRadix.Root>
   );

package/src/components/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './useModifiedPopper';
 export * from './useOnClickOutside';
 export * from './useOnOff';
 export * from './useToggle';
+export * from './useSelect';

package/src/components/hooks/useSelect.tsx

@@ -0,0 +1,58 @@
+import { MenuItem } from '@blueprintjs/core';
+import { ItemRenderer } from '@blueprintjs/select';
+import { useState } from 'react';
+
+export function useSelect<T extends { label: string }>() {
+  const [value, setValue] = useState<T | null>(null);
+  const itemRenderer = getItemRenderer(value);
+  const onItemSelect = setValue;
+  const popoverProps = {
+    onOpened: (node: HTMLElement) => {
+      const firstUl = node.querySelector('ul');
+      if (firstUl) {
+        firstUl.tabIndex = 0;
+        firstUl.focus();
+      }
+    },
+  };
+  const popoverTargetProps = {
+    style: { display: 'inline-block' },
+  };
+  const itemPredicate = (query: string, item: T) => {
+    return item.label.toLowerCase().includes(query.toLowerCase());
+  };
+  const itemListPredicate = (query: string, items: T[]) => {
+    return items.filter((item) =>
+      item.label.toLowerCase().includes(query.toLowerCase()),
+    );
+  };
+  return {
+    value,
+    setValue,
+    itemRenderer,
+    onItemSelect,
+    popoverProps,
+    popoverTargetProps,
+    itemPredicate,
+    itemListPredicate,
+  };
+}
+
+function getItemRenderer<T extends { label: string }>(value: T | null) {
+  const render: ItemRenderer<T> = (
+    { label },
+    { handleClick, handleFocus, modifiers, index },
+  ) => (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      selected={value?.label === label}
+      key={index}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      roleStructure="listoption"
+      text={label}
+    />
+  );
+  return render;
+}

package/src/components/root-layout/RootLayout.tsx

@@ -18,7 +18,7 @@ interface RootLayoutProps {
 const style: CSSProperties = {
   width: '100%',
   height: '100%',
-  fontSize: '12px',
+  fontSize: '14px',
 };
 
 export function RootLayout(props: RootLayoutProps) {

package/src/components/toolbar/PanelPreferencesToolbar.tsx

@@ -4,16 +4,27 @@ import { css } from '@emotion/react';
 import { Toolbar } from './Toolbar';
 
 interface PanelPreferencesToolbarProps {
+  title?: React.ReactNode;
   onClose?: () => void;
   onSave?: () => void;
 }
 
 const styles = {
+  container: css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    borderBottom: '1px solid rgb(240, 240, 240)',
+  }),
+  title: css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: 12,
+    fontWeight: 500,
+  }),
   toolbar: css({
     display: 'flex',
     flexDirection: 'row-reverse',
-    fontSize: 16,
-    padding: 3,
     '& > button': {
       padding: 0,
       paddingLeft: 9,
@@ -23,25 +34,32 @@ const styles = {
 };
 
 export function PanelPreferencesToolbar(props: PanelPreferencesToolbarProps) {
-  const { onClose, onSave } = props;
+  const { title = '', onClose, onSave } = props;
   return (
-    <div css={styles.toolbar}>
-      <Toolbar>
-        <Toolbar.Item
-          title="close"
-          onClick={onClose}
-          intent="danger"
-          icon="cross"
-          noTooltip
-        />
-        <Toolbar.Item
-          title="save"
-          onClick={onSave}
-          intent="success"
-          icon="tick"
-          noTooltip
-        />
-      </Toolbar>
+    <div css={styles.container}>
+      <div css={styles.title}>{title}</div>
+      <div css={styles.toolbar}>
+        <Toolbar>
+          {onClose && (
+            <Toolbar.Item
+              title="close"
+              onClick={onClose}
+              intent="danger"
+              icon="cross"
+              noTooltip
+            />
+          )}
+          {onSave && (
+            <Toolbar.Item
+              title="save"
+              onClick={onSave}
+              intent="success"
+              icon="tick"
+              noTooltip
+            />
+          )}
+        </Toolbar>
+      </div>
     </div>
   );
 }

package/src/components/toolbar/Toolbar.tsx

@@ -1,7 +1,19 @@
 /** @jsxImportSource @emotion/react */
-import { ButtonGroup, Classes, Colors, Intent } from '@blueprintjs/core';
+import {
+  ButtonGroup,
+  Classes,
+  Colors,
+  Intent,
+  Popover,
+  PopoverProps,
+  TagProps,
+  Icon,
+} from '@blueprintjs/core';
+import { IconName } from '@blueprintjs/icons';
 import { css } from '@emotion/react';
 import {
+  cloneElement,
+  JSX,
   ReactElement,
   ReactNode,
   useLayoutEffect,
@@ -9,7 +21,7 @@ import {
   useRef,
 } from 'react';
 
-import { Button, ButtonProps } from '../index';
+import { Button } from '../index';
 
 import {
   ToolbarContext,
@@ -17,6 +29,12 @@ import {
   useToolbarContext,
 } from './toolbarContext';
 
+export type PopoverInteractionType =
+  | 'click'
+  | 'hover'
+  | 'click-target'
+  | 'hover-target';
+
 interface ToolbarBaseProps {
   intent?: Intent;
   disabled?: boolean;
@@ -30,26 +48,41 @@ export interface ToolbarProps extends ToolbarBaseProps {
     | Iterable<ReactNode>
     | boolean
     | null;
+  popoverInteractionKind?: PopoverInteractionType;
 }
 
 export interface ToolbarItemProps extends ToolbarBaseProps {
   id?: string;
   title: string;
-  icon: ButtonProps['icon'];
+  icon: IconName | JSX.Element;
   active?: boolean;
   onClick?: (item: ToolbarItemProps) => void;
   className?: string;
   noTooltip?: boolean;
+  isPopover?: boolean;
+  tag?: ReactNode;
+  tagProps?: Omit<TagProps, 'children'>;
+}
+
+export interface ToolbarPopoverItemProps extends PopoverProps {
+  itemProps: ToolbarItemProps;
 }
 
 const border = '1px solid rgb(247, 247, 247)';
 
 export function Toolbar(props: ToolbarProps) {
-  const { children, disabled, intent, large, vertical } = props;
+  const {
+    children,
+    disabled,
+    intent,
+    large,
+    vertical,
+    popoverInteractionKind,
+  } = props;
 
   const contextValue = useMemo(
-    () => ({ intent, large, vertical, disabled }),
-    [intent, large, vertical, disabled],
+    () => ({ intent, large, vertical, disabled, popoverInteractionKind }),
+    [intent, large, vertical, disabled, popoverInteractionKind],
   );
   const ref = useRef<HTMLDivElement>(null);
 
@@ -61,7 +94,6 @@ export function Toolbar(props: ToolbarProps) {
     if (!vertical) {
       return;
     }
-
     function update() {
       const lastElement = ref.current?.lastElementChild;
       if (!lastElement) {
@@ -87,7 +119,9 @@ export function Toolbar(props: ToolbarProps) {
   return (
     <ToolbarProvider value={contextValue}>
       <ButtonGroup
-        ref={ref}
+        // Reset because of layout effect above
+        // TODO: remove once the workaround is no longer needed
+        key={String(vertical)}
         vertical={vertical}
         large={large}
         style={{
@@ -111,6 +145,7 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
     intent: itemIntent,
     disabled: itemDisabled,
     noTooltip = false,
+    isPopover,
     ...other
   } = props;
 
@@ -122,8 +157,17 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
   } = useToolbarContext();
   const intent = itemIntent ?? toolbarIntent;
   const disabled = itemDisabled ?? toolbarDisabled;
+  const resizedIcon =
+    typeof icon === 'string'
+      ? icon
+      : cloneElement(icon, {
+          className: icon.props.className
+            ? `${icon.props.className} bp5-icon`
+            : 'bp5-icon',
+        });
   return (
     <Button
+      alignText={isPopover ? 'left' : undefined}
       minimal
       disabled={disabled}
       css={css`
@@ -134,13 +178,37 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
       intent={intent}
       style={{
         position: 'relative',
-        fontSize: '1.25em',
+        fontSize: '1.125em',
         width: 'fit-content',
         flex: 'none',
       }}
       type="button"
       active={active}
-      icon={icon}
+      icon={
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 0,
+            height: 0,
+          }}
+        >
+          <Icon icon={resizedIcon} />
+          {isPopover && (
+            <Icon
+              icon="caret-right"
+              size={large ? 14 : 9}
+              style={{
+                transform: 'rotate(45deg)',
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+              }}
+            />
+          )}
+        </div>
+      }
       onClick={() => {
         onClick?.(props);
       }}
@@ -159,6 +227,40 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
   );
 };
 
+Toolbar.PopoverItem = function ToolbarPopoverItem(
+  props: ToolbarPopoverItemProps,
+) {
+  const { itemProps, ...other } = props;
+  const { disabled, vertical, popoverInteractionKind } = useToolbarContext();
+
+  return (
+    <Popover
+      minimal
+      disabled={disabled}
+      placement={vertical ? 'right-start' : 'bottom-start'}
+      interactionKind={popoverInteractionKind}
+      hoverCloseDelay={0}
+      css={css`
+        .${Classes.ICON} {
+          color: ${Colors.DARK_GRAY3};
+        }
+      `}
+      targetProps={{
+        style: {
+          position: 'relative',
+          fontSize: '1.125em',
+          width: 'fit-content',
+          height: 'fit-content',
+          flex: 'none',
+        },
+      }}
+      {...other}
+    >
+      <Toolbar.Item noTooltip isPopover {...itemProps} />
+    </Popover>
+  );
+};
+
 function ToolbarProvider(props: {
   value: ToolbarContext;
   children: ReactNode;

package/src/components/toolbar/toolbarContext.ts

@@ -1,11 +1,14 @@
 import { Intent } from '@blueprintjs/core';
 import { createContext, useContext } from 'react';
 
+import { PopoverInteractionType } from './Toolbar';
+
 export interface ToolbarContext {
   intent?: Intent;
   large?: boolean;
   vertical?: boolean;
   disabled?: boolean;
+  popoverInteractionKind?: PopoverInteractionType;
 }
 
 export const toolbarContext = createContext<ToolbarContext | null>(null);

package/lib/components/button/ButtonGroup.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-interface ButtonGroupProps {
-    children: [ReactNode, ReactNode];
-}
-export declare function ButtonGroup(props: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ButtonGroup {
-    var Button: (props: ButtonGroupButtonProps) => import("react/jsx-runtime").JSX.Element;
-}
-interface ButtonGroupButtonProps {
-    position: 'first' | 'last';
-    label: string;
-    onClick: () => void;
-}
-export {};
-//# sourceMappingURL=ButtonGroup.d.ts.map

package/lib/components/button/ButtonGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/button/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BlC,UAAU,gBAAgB;IACxB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAGlD;yBAHe,WAAW;;;AAK3B,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/lib/components/button/ButtonGroup.js

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const ButtonGroupRoot = styled_1.default.div `
-  display: inline-flex;
-  border-radius: 0.375rem;
-  isolation: isolate;
-`;
-const ButtonGroupCustomButton = styled_1.default.button `
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  border-width: 1px;
-  border-top-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-  border-bottom-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-
-  border-top-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  border-bottom-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  margin-left: ${({ isLast }) => isLast && '-1px'};
-`;
-function ButtonGroup(props) {
-    const { children } = props;
-    return (0, jsx_runtime_1.jsx)(ButtonGroupRoot, { children: children });
-}
-exports.ButtonGroup = ButtonGroup;
-ButtonGroup.Button = function ButtonGroupButton(props) {
-    const { position, label, onClick } = props;
-    return ((0, jsx_runtime_1.jsx)(ButtonGroupCustomButton, { type: "button", onClick: onClick, isLast: position === 'last', children: label }));
-};
-//# sourceMappingURL=ButtonGroup.js.map

package/lib/components/button/ButtonGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/components/button/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,6DAAqC;AAGrC,MAAM,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,uBAAuB,GAAG,gBAAM,CAAC,MAAM,CAAqB;;;;;;;;;;;;4BAYtC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU;+BAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU;;6BAEvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,UAAU;gCACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,UAAU;iBACnD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,MAAM;CAChD,CAAC;AAMF,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,OAAO,uBAAC,eAAe,cAAE,QAAQ,GAAmB,CAAC;AACvD,CAAC;AAHD,kCAGC;AAQD,WAAW,CAAC,MAAM,GAAG,SAAS,iBAAiB,CAAC,KAA6B;IAC3E,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE3C,OAAO,CACL,uBAAC,uBAAuB,IACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,QAAQ,KAAK,MAAM,YAE1B,KAAK,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/forms/radio-group/ClassicRadioItem.d.ts

@@ -1,3 +0,0 @@
-import { RadioOption, RadioGroupProps } from './RadioGroup';
-export declare function ClassicRadioItem(props: RadioOption & Pick<RadioGroupProps, 'onSelect' | 'variant' | 'name'>): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ClassicRadioItem.d.ts.map

package/lib/components/forms/radio-group/ClassicRadioItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClassicRadioItem.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/ClassicRadioItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AA2D5D,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,oDA4B5E"}

package/lib/components/forms/radio-group/ClassicRadioItem.js

@@ -1,93 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClassicRadioItem = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
-const RadioGroup = __importStar(require("@radix-ui/react-radio-group"));
-const styles_1 = require("../styles");
-const classicStyles = {
-    container: (disabled) => (0, react_1.css)({
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row-reverse',
-        opacity: disabled ? 0.25 : 1,
-        overflow: 'hidden',
-        border: 'none',
-    }),
-    item: (disabled, variant) => (0, react_1.css)({
-        position: 'relative',
-        width: variant === 'default' ? 16 : 14,
-        height: variant === 'default' ? 16 : 14,
-        borderRadius: '50%',
-        border: '1px solid grey',
-        backgroundColor: disabled ? styles_1.disabledColor : 'white',
-        ':hover': {
-            borderColor: disabled ? 'grey' : styles_1.enabledColor,
-        },
-    }),
-    indicator: (0, react_1.css)({
-        position: 'absolute',
-        top: -1,
-        left: -1,
-        right: -1,
-        bottom: -1,
-        zIndex: 10,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: styles_1.enabledColor,
-        borderRadius: '50%',
-    }),
-    circle: (0, react_1.css)({
-        width: '40%',
-        height: '40%',
-        borderRadius: '50%',
-        backgroundColor: 'white',
-    }),
-    label: (disabled) => (0, react_1.css)({
-        cursor: 'pointer',
-        lineHeight: 1,
-        paddingLeft: 5,
-        fontSize: '12px',
-        ':hover': {
-            '& ~ button': {
-                borderColor: disabled ? 'grey' : styles_1.enabledColor,
-            },
-        },
-    }),
-};
-function ClassicRadioItem(props) {
-    const { value, label, disabled = false, onSelect, variant, name } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { css: classicStyles.container(disabled), children: [(0, jsx_runtime_1.jsx)("label", { css: classicStyles.label(disabled), style: {
-                    fontSize: variant === 'small' ? '1em' : '1.125em',
-                }, htmlFor: `${value}${name}`, children: label }), (0, jsx_runtime_1.jsx)(RadioGroup.Item, { css: classicStyles.item(disabled, variant), value: value, id: `${value}${name}`, onClick: () => {
-                    if (!disabled)
-                        onSelect?.(props);
-                }, children: (0, jsx_runtime_1.jsx)(RadioGroup.Indicator, { css: classicStyles.indicator, children: (0, jsx_runtime_1.jsx)("div", { css: classicStyles.circle }) }) })] }));
-}
-exports.ClassicRadioItem = ClassicRadioItem;
-//# sourceMappingURL=ClassicRadioItem.js.map

package/lib/components/forms/radio-group/ClassicRadioItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClassicRadioItem.js","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/ClassicRadioItem.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/button/ButtonGroup.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-interface ButtonGroupProps {
-    children: [ReactNode, ReactNode];
-}
-export declare function ButtonGroup(props: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ButtonGroup {
-    var Button: (props: ButtonGroupButtonProps) => import("react/jsx-runtime").JSX.Element;
-}
-interface ButtonGroupButtonProps {
-    position: 'first' | 'last';
-    label: string;
-    onClick: () => void;
-}
-export {};
-//# sourceMappingURL=ButtonGroup.d.ts.map

package/lib-esm/components/button/ButtonGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/button/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BlC,UAAU,gBAAgB;IACxB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAGlD;yBAHe,WAAW;;;AAK3B,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/lib-esm/components/button/ButtonGroup.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-const ButtonGroupRoot = styled.div `
-  display: inline-flex;
-  border-radius: 0.375rem;
-  isolation: isolate;
-`;
-const ButtonGroupCustomButton = styled.button `
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  border-width: 1px;
-  border-top-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-  border-bottom-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-
-  border-top-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  border-bottom-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  margin-left: ${({ isLast }) => isLast && '-1px'};
-`;
-export function ButtonGroup(props) {
-    const { children } = props;
-    return _jsx(ButtonGroupRoot, { children: children });
-}
-ButtonGroup.Button = function ButtonGroupButton(props) {
-    const { position, label, onClick } = props;
-    return (_jsx(ButtonGroupCustomButton, { type: "button", onClick: onClick, isLast: position === 'last', children: label }));
-};
-//# sourceMappingURL=ButtonGroup.js.map

package/lib-esm/components/button/ButtonGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/components/button/ButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAqB;;;;;;;;;;;;4BAYtC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU;+BAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU;;6BAEvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,UAAU;gCACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,UAAU;iBACnD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,MAAM;CAChD,CAAC;AAMF,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,OAAO,KAAC,eAAe,cAAE,QAAQ,GAAmB,CAAC;AACvD,CAAC;AAQD,WAAW,CAAC,MAAM,GAAG,SAAS,iBAAiB,CAAC,KAA6B;IAC3E,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE3C,OAAO,CACL,KAAC,uBAAuB,IACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,QAAQ,KAAK,MAAM,YAE1B,KAAK,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC"}