@aivenio/aquarium 1.70.0 → 1.72.0

package/dist/src/molecules/Section/Section.js

@@ -9,7 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useRef } from 'react';
+import { useButton } from '@react-aria/button';
 import { useId } from '@react-aria/utils';
 import { animated, useSpring } from '@react-spring/web';
 import castArray from 'lodash/castArray';
@@ -40,6 +41,7 @@ export const Section = (props) => {
     const _defaultCollapsed = title ? (_b = props.defaultCollapsed) !== null && _b !== void 0 ? _b : false : false;
     const [isCollapsed, setCollapsed] = React.useState(_collapsed !== null && _collapsed !== void 0 ? _collapsed : _defaultCollapsed);
     const [ref, { height }] = useMeasure();
+    const toggleAreaRef = useRef(null);
     // contextual menu related props
     const menu = title ? (_c = props.menu) !== null && _c !== void 0 ? _c : undefined : undefined;
     const menuAriaLabel = title ? (_e = (_d = props.menuAriaLabel) !== null && _d !== void 0 ? _d : props.menuLabel) !== null && _e !== void 0 ? _e : 'Context menu' : undefined;
@@ -76,10 +78,15 @@ export const Section = (props) => {
     const regionId = useId();
     const titleId = useId();
     const hasTabs = isComponentType(children, Tabs);
+    const { buttonProps } = useButton({ 'elementType': 'div', 'onPress': handleTitleClick, 'aria-expanded': !isCollapsed, 'aria-controls': regionId }, toggleAreaRef);
     return (React.createElement(BaseSection, { "aria-label": title, className: "Aquarium-Section" },
         title && (React.createElement(React.Fragment, null,
             React.createElement(BaseSection.Header, { expanded: _collapsible && !isCollapsed },
-                React.createElement(BaseSection.TitleContainer, { role: _collapsible ? 'button' : undefined, id: toggleId, collapsible: _collapsible, onClick: handleTitleClick, "aria-expanded": _collapsible ? !isCollapsed : undefined, "aria-controls": _collapsible ? regionId : undefined },
+                React.createElement(BaseSection.TitleContainer, Object.assign({}, (_collapsible
+                    ? Object.assign(Object.assign({}, buttonProps), { onPointerDown: (e) => {
+                            e.preventDefault();
+                            handleTitleClick(); // the event handler provided by useButton triggers focus-visible style to shown when clicking on it which isn't desired. Only keyboard events should triggers focus-visible style.
+                        } }) : { onClick: handleTitleClick }), { ref: _collapsible ? toggleAreaRef : undefined, id: toggleId, collapsible: _collapsible }),
                     _collapsible && (React.createElement(animated.div, { style: { transform } },
                         React.createElement(BaseSection.Toggle, null))),
                     React.createElement(BaseSection.Title, { id: titleId },
@@ -101,9 +108,9 @@ export const Section = (props) => {
                             .map((action) => renderAction({ kind: 'secondary', action })),
                     props.switch && React.createElement(Switch, Object.assign({}, props.switch)),
                     props.select && React.createElement(SelectBase, Object.assign({ "aria-labelledby": titleId }, props.select))))),
-            !hasTabs && React.createElement(animated.div, { className: tw(`h-[1px]`), style: { backgroundColor } }))),
+            !hasTabs && !isCollapsed && React.createElement(animated.div, { className: tw(`h-[1px]`), style: { backgroundColor } }))),
         React.createElement(animated.div, { id: regionId, "aria-hidden": _collapsible ? (isCollapsed ? true : undefined) : undefined, style: spring, className: tw({ 'overflow-hidden': _collapsible }) },
             React.createElement("div", { ref: ref }, hasTabs ? (React.createElement(SectionTabs, Object.assign({}, children.props, { className: tw('[&>div:first-child]:px-3 grow flex flex-col overflow-y-auto', { 'mt-4': _collapsible }) }))) : (React.createElement(BaseSection.Body, null, children))))));
 };
 const SectionTabs = createTabsComponent(ModalTab, TabItem, 'SectionTabs', (children, selected) => (React.createElement(BaseSection.Body, null, children.find((node, index) => (node === null || node === void 0 ? void 0 : node.props.value) === selected || index === selected))));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUN4RCxPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQztBQUN6QyxPQUFPLFdBQVcsTUFBTSxvQkFBb0IsQ0FBQztBQUM3QyxPQUFPLFlBQVksTUFBTSxxQkFBcUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUF3QixNQUFNLHlCQUF5QixDQUFDO0FBQ2pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUN2RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDOUQsT0FBTyxFQUFtQixVQUFVLEVBQXdCLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFFLE1BQU0sRUFBb0IsTUFBTSw2QkFBNkIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBaUIsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEcsT0FBTyxFQUFFLFFBQVEsRUFBc0IsTUFBTSxpQ0FBaUMsQ0FBQztBQUUvRSxPQUFPLEVBQUUsT0FBTyxJQUFJLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBR25FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsTUFBTSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUMvQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUN4RCxPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQztBQUN6QyxPQUFPLFdBQVcsTUFBTSxvQkFBb0IsQ0FBQztBQUM3QyxPQUFPLFlBQVksTUFBTSxxQkFBcUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUF3QixNQUFNLHlCQUF5QixDQUFDO0FBQ2pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUN2RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDOUQsT0FBTyxFQUFtQixVQUFVLEVBQXdCLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFFLE1BQU0sRUFBb0IsTUFBTSw2QkFBNkIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBaUIsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEcsT0FBTyxFQUFFLFFBQVEsRUFBc0IsTUFBTSxpQ0FBaUMsQ0FBQztBQUUvRSxPQUFPLEVBQUUsT0FBTyxJQUFJLFdBQVcsRUFB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

package/dist/src/molecules/SegmentedControl/SegmentedControl.d.ts

@@ -7,16 +7,28 @@ declare type SegmentedControlProvidedProps<V> = {
 declare type SegmentedControlInheritedProps = {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     selected?: boolean;
+    /**
+     * @deprecated Use the default size instead
+     */
     dense?: boolean;
+    /**
+     * @deprecated Use the default variant instead
+     */
     variant?: Variant;
 };
 export declare type SegmentedControlProps<V = unknown> = React.ButtonHTMLAttributes<HTMLButtonElement> & SegmentedControlInheritedProps & SegmentedControlProvidedProps<V>;
-export declare const SegmentedControl: <V extends Value>({ children, value, dense, variant, selected, className, ...rest }: SegmentedControlProps<V>) => JSX.Element;
+export declare const SegmentedControl: <V extends Value>({ children, value, dense: _dense, variant: _variant, selected, className, ...rest }: SegmentedControlProps<V>) => JSX.Element;
 export declare type SegmentedControlGroupProps<V = unknown> = Omit<React.HTMLProps<HTMLUListElement>, 'onChange'> & {
     value: V;
     onChange: (value: V) => void;
     children: Array<React.ReactElement<SegmentedControlProps<V>>>;
+    /**
+     * @deprecated Use the default variant instead
+     */
     variant?: Variant;
+    /**
+     * @deprecated Use the default size instead
+     */
     dense?: boolean;
     /**
      * Text describing the control group for user with
@@ -26,5 +38,5 @@ export declare type SegmentedControlGroupProps<V = unknown> = Omit<React.HTMLPro
      */
     ariaLabel?: string;
 };
-export declare const SegmentedControlGroup: <V extends Value>({ value, onChange, variant, dense, children, className, ariaLabel, ...rest }: SegmentedControlGroupProps<V>) => JSX.Element;
+export declare const SegmentedControlGroup: <V extends Value>({ value, onChange, variant: _variant, dense: _dense, children, className, ariaLabel, ...rest }: SegmentedControlGroupProps<V>) => JSX.Element;
 export {};

package/dist/src/molecules/SegmentedControl/SegmentedControl.js

@@ -12,41 +12,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { classNames, tw } from '../../../src/utils/tailwind';
 export const SegmentedControl = (_a) => {
-    var { children, value, dense = false, variant = 'filled', selected = false, className } = _a, rest = __rest(_a, ["children", "value", "dense", "variant", "selected", "className"]);
+    var { children, value, dense: _dense = false, variant: _variant = 'filled', selected = false, className } = _a, rest = __rest(_a, ["children", "value", "dense", "variant", "selected", "className"]);
     return (React.createElement("li", null,
-        React.createElement("button", Object.assign({ type: "button" }, rest, { className: classNames(getCommonClassNames(dense, selected), !rest.disabled && getHoverClassNames(variant), selected && getSelectedClassNames(variant), className), "aria-pressed": selected }), children)));
+        React.createElement("button", Object.assign({ type: "button" }, rest, { className: classNames(getBaseSegmentedControlClassNames(selected), className), "aria-pressed": selected }), children)));
 };
 export const SegmentedControlGroup = (_a) => {
-    var { value, onChange, variant = 'filled', dense = false, children, className, ariaLabel } = _a, rest = __rest(_a, ["value", "onChange", "variant", "dense", "children", "className", "ariaLabel"]);
-    const classes = tw('rounded flex', {
-        'border border-default text-muted': variant === 'outlined',
-        'bg-muted': variant === 'raised',
-    });
-    return (React.createElement("ul", Object.assign({}, rest, { "aria-label": ariaLabel, className: classNames('Aquarium-SegmentedControl', classes, className) }), React.Children.map(children, (child) => React.cloneElement(child, {
-        dense,
-        variant,
+    var { value, onChange, variant: _variant = 'filled', dense: _dense = false, children, className, ariaLabel } = _a, rest = __rest(_a, ["value", "onChange", "variant", "dense", "children", "className", "ariaLabel"]);
+    return (React.createElement("ul", Object.assign({}, rest, { "aria-label": ariaLabel, className: classNames('Aquarium-SegmentedControl', 'flex border border-default rounded-sm divide-x divide-grey-20', className) }), React.Children.map(children, (child) => React.cloneElement(child, {
         onClick: () => onChange(child.props.value),
         selected: child.props.value === value,
     }))));
 };
 /* </SegmentedControlGroup> */
-const getHoverClassNames = (variant) => tw('hover:text-intense', {
-    'hover:bg-muted': variant !== 'raised',
-    'hover:bg-default': variant === 'raised',
-}, {
-    'active:bg-default': variant !== 'raised',
-    'active:bg-intense': variant === 'raised',
+const getBaseSegmentedControlClassNames = (selected) => tw('transition whitespace-nowrap rounded-sm px-4 py-[10px] hover:bg-primary-hover', 'focus-visible:outline-none focus-visible:relative focus-visible:z-50 focus-visible:ring-1 focus-visible:ring-offset-0 focusable', 'disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted', {
+    'typography-small text-default bg-body': !selected,
+    'typography-small-strong text-primary-intense relative z-40 ring-1 ring-offset-0 ring-primary-80': selected,
 });
-const getSelectedClassNames = (variant) => tw('relative z-40 text-intense', {
-    'bg-white ring-2 ring-offset-0 ring-grey-30 focus:ring-2': variant === 'outlined',
-    'bg-white shadow-2dp': variant === 'raised',
-    'bg-default': variant === 'filled',
-});
-const getCommonClassNames = (dense, selected) => tw('transition whitespace-nowrap rounded mr-1', 'focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-grey-60', 'disabled:cursor-not-allowed disabled:text-inactive', {
-    'py-4 px-5': !dense,
-    'py-2 px-4': dense,
-    'typography-default-strong': !dense,
-    'typography-small-strong': dense,
-    'text-muted': !selected,
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudGVkQ29udHJvbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VnbWVudGVkQ29udHJvbC9TZWdtZW50ZWRDb250cm9sLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBc0JwRCxNQUFNLENBQUMsTUFBTSxnQkFBZ0IsR0FBRyxDQUFrQixFQVF2QixFQUFlLEVBQUU7UUFSTSxFQUNoRCxRQUFRLEVBQ1IsS0FBSyxFQUNMLEtBQUssR0FBRyxLQUFLLEVBQ2IsT0FBTyxHQUFHLFFBQVEsRUFDbEIsUUFBUSxHQUFHLEtBQUssRUFDaEIsU0FBUyxPQUVnQixFQUR0QixJQUFJLGNBUHlDLGtFQVFqRCxDQURRO0lBQ29DLE9BQUEsQ0FDM0M7UUFDRSw4Q0FDRSxJQUFJLEVBQUMsUUFBUSxJQUNULElBQUksSUFDUixTQUFTLEVBQUUsVUFBVSxDQUNuQixtQkFBbUIsQ0FBQyxLQUFLLEVBQUUsUUFBUSxDQUFDLEVBQ3BDLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxrQkFBa0IsQ0FBQyxPQUFPLENBQUMsRUFDN0MsUUFBUSxJQUFJLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxFQUMxQyxTQUFTLENBQ1Ysa0JBQ2EsUUFBUSxLQUVyQixRQUFRLENBQ0YsQ0FDTixDQUNOLENBQUE7Q0FBQSxDQUFDO0FBcUJGLE1BQU0sQ0FBQyxNQUFNLHFCQUFxQixHQUFHLENBQWtCLEVBU3ZCLEVBQWUsRUFBRTtRQVRNLEVBQ3JELEtBQUssRUFDTCxRQUFRLEVBQ1IsT0FBTyxHQUFHLFFBQVEsRUFDbEIsS0FBSyxHQUFHLEtBQUssRUFDYixRQUFRLEVBQ1IsU0FBUyxFQUNULFNBQVMsT0FFcUIsRUFEM0IsSUFBSSxjQVI4QywrRUFTdEQsQ0FEUTtJQUVQLE1BQU0sT0FBTyxHQUFHLEVBQUUsQ0FBQyxjQUFjLEVBQUU7UUFDakMsa0NBQWtDLEVBQUUsT0FBTyxLQUFLLFVBQVU7UUFDMUQsVUFBVSxFQUFFLE9BQU8sS0FBSyxRQUFRO0tBQ2pDLENBQUMsQ0FBQztJQUNILE9BQU8sQ0FDTCw0Q0FBUSxJQUFJLGtCQUFjLFNBQVMsRUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLDJCQUEyQixFQUFFLE9BQU8sRUFBRSxTQUFTLENBQUMsS0FDeEcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FDdEMsS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUU7UUFDeEIsS0FBSztRQUNMLE9BQU87UUFDUCxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1FBQzFDLFFBQVEsRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLEtBQUssS0FBSyxLQUFLO0tBQ3RDLENBQUMsQ0FDSCxDQUNFLENBQ04sQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLDhCQUE4QjtBQUU5QixNQUFNLGtCQUFrQixHQUFHLENBQUMsT0FBZ0IsRUFBRSxFQUFFLENBQzlDLEVBQUUsQ0FDQSxvQkFBb0IsRUFDcEI7SUFDRSxnQkFBZ0IsRUFBRSxPQUFPLEtBQUssUUFBUTtJQUN0QyxrQkFBa0IsRUFBRSxPQUFPLEtBQUssUUFBUTtDQUN6QyxFQUNEO0lBQ0UsbUJBQW1CLEVBQUUsT0FBTyxLQUFLLFFBQVE7SUFDekMsbUJBQW1CLEVBQUUsT0FBTyxLQUFLLFFBQVE7Q0FDMUMsQ0FDRixDQUFDO0FBRUosTUFBTSxxQkFBcUIsR0FBRyxDQUFDLE9BQWdCLEVBQUUsRUFBRSxDQUNqRCxFQUFFLENBQUMsNEJBQTRCLEVBQUU7SUFDL0IseURBQXlELEVBQUUsT0FBTyxLQUFLLFVBQVU7SUFDakYscUJBQXFCLEVBQUUsT0FBTyxLQUFLLFFBQVE7SUFDM0MsWUFBWSxFQUFFLE9BQU8sS0FBSyxRQUFRO0NBQ25DLENBQUMsQ0FBQztBQUVMLE1BQU0sbUJBQW1CLEdBQUcsQ0FBQyxLQUFjLEVBQUUsUUFBaUIsRUFBRSxFQUFFLENBQ2hFLEVBQUUsQ0FDQSwyQ0FBMkMsRUFDM0Msd0VBQXdFLEVBQ3hFLG9EQUFvRCxFQUNwRDtJQUNFLFdBQVcsRUFBRSxDQUFDLEtBQUs7SUFDbkIsV0FBVyxFQUFFLEtBQUs7SUFDbEIsMkJBQTJCLEVBQUUsQ0FBQyxLQUFLO0lBQ25DLHlCQUF5QixFQUFFLEtBQUs7SUFDaEMsWUFBWSxFQUFFLENBQUMsUUFBUTtDQUN4QixDQUNGLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudGVkQ29udHJvbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VnbWVudGVkQ29udHJvbC9TZWdtZW50ZWRDb250cm9sLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBNEJwRCxNQUFNLENBQUMsTUFBTSxnQkFBZ0IsR0FBRyxDQUFrQixFQVF2QixFQUFlLEVBQUU7UUFSTSxFQUNoRCxRQUFRLEVBQ1IsS0FBSyxFQUNMLEtBQUssRUFBRSxNQUFNLEdBQUcsS0FBSyxFQUNyQixPQUFPLEVBQUUsUUFBUSxHQUFHLFFBQVEsRUFDNUIsUUFBUSxHQUFHLEtBQUssRUFDaEIsU0FBUyxPQUVnQixFQUR0QixJQUFJLGNBUHlDLGtFQVFqRCxDQURRO0lBQ29DLE9BQUEsQ0FDM0M7UUFDRSw4Q0FDRSxJQUFJLEVBQUMsUUFBUSxJQUNULElBQUksSUFDUixTQUFTLEVBQUUsVUFBVSxDQUFDLGlDQUFpQyxDQUFDLFFBQVEsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxrQkFDL0QsUUFBUSxLQUVyQixRQUFRLENBQ0YsQ0FDTixDQUNOLENBQUE7Q0FBQSxDQUFDO0FBMkJGLE1BQU0sQ0FBQyxNQUFNLHFCQUFxQixHQUFHLENBQWtCLEVBU3ZCLEVBQWUsRUFBRTtRQVRNLEVBQ3JELEtBQUssRUFDTCxRQUFRLEVBQ1IsT0FBTyxFQUFFLFFBQVEsR0FBRyxRQUFRLEVBQzVCLEtBQUssRUFBRSxNQUFNLEdBQUcsS0FBSyxFQUNyQixRQUFRLEVBQ1IsU0FBUyxFQUNULFNBQVMsT0FFcUIsRUFEM0IsSUFBSSxjQVI4QywrRUFTdEQsQ0FEUTtJQUVQLE9BQU8sQ0FDTCw0Q0FDTSxJQUFJLGtCQUNJLFNBQVMsRUFDckIsU0FBUyxFQUFFLFVBQVUsQ0FDbkIsMkJBQTJCLEVBQzNCLCtEQUErRCxFQUMvRCxTQUFTLENBQ1YsS0FFQSxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUN0QyxLQUFLLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRTtRQUN4QixPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1FBQzFDLFFBQVEsRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLEtBQUssS0FBSyxLQUFLO0tBQ3RDLENBQUMsQ0FDSCxDQUNFLENBQ04sQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLDhCQUE4QjtBQUU5QixNQUFNLGlDQUFpQyxHQUFHLENBQUMsUUFBaUIsRUFBRSxFQUFFLENBQzlELEVBQUUsQ0FDQSwrRUFBK0UsRUFDL0UsaUlBQWlJLEVBQ2pJLHNFQUFzRSxFQUN0RTtJQUNFLHVDQUF1QyxFQUFFLENBQUMsUUFBUTtJQUNsRCxpR0FBaUcsRUFBRSxRQUFRO0NBQzVHLENBQ0YsQ0FBQyJ9

package/dist/styles.css

@@ -1230,9 +1230,6 @@ input[type='number'].no-arrows {
 .ml-3{
   margin-left: 8px;
 }
-.mr-1{
-  margin-right: 2px;
-}
 .mb-\[-2px\]{
   margin-bottom: -2px;
 }
@@ -1673,6 +1670,15 @@ input[type='number'].no-arrows {
   -moz-column-gap: 24px;
        column-gap: 24px;
 }
+.divide-x>:not([hidden])~:not([hidden]){
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+.divide-grey-20>:not([hidden])~:not([hidden]){
+  border-color: #d2d2d6;
+  border-color: var(--aquarium-colors-grey-20, #d2d2d6);
+}
 .self-start{
   align-self: flex-start;
 }
@@ -2075,6 +2081,10 @@ input[type='number'].no-arrows {
   padding-left: 0;
   padding-right: 0;
 }
+.py-\[10px\]{
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
 .pt-3{
   padding-top: 8px;
 }
@@ -2626,12 +2636,6 @@ input[type='number'].no-arrows {
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.shadow-2dp{
-  --tw-shadow: var(--aquarium-box-shadow-2dp, 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24));
-  --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
-}
 .outline-none{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2648,12 +2652,6 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
-.ring-2{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
-}
 .ring{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2666,9 +2664,6 @@ input[type='number'].no-arrows {
 .ring-primary-80{
   --tw-ring-color: var(--aquarium-colors-primary-80, #3545be);
 }
-.ring-grey-30{
-  --tw-ring-color: var(--aquarium-colors-grey-30, #b4b4bb);
-}
 .ring-offset-0{
   --tw-ring-offset-width: 0px;
 }
@@ -2919,23 +2914,17 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
-.focus\:ring-2:focus{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+.focus-visible\:relative.focus-visible{
+  position: relative;
 }
-.focus\:ring-1:focus{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+.focus-visible\:relative:focus-visible{
+  position: relative;
 }
-.focus\:ring-grey-60:focus{
-  --tw-ring-color: var(--aquarium-colors-grey-60, #5a5b6a);
+.focus-visible\:z-50.focus-visible{
+  z-index: 50;
 }
-.focus\:ring-offset-0:focus{
-  --tw-ring-offset-width: 0px;
+.focus-visible\:z-50:focus-visible{
+  z-index: 50;
 }
 .focus-visible\:border-info-default.focus-visible{
   border-color: #0399e3;
@@ -2977,6 +2966,14 @@ input[type='number'].no-arrows {
   color: #292a31;
   color: var(--aquarium-text-color-intense);
 }
+.focus-visible\:outline-none.focus-visible{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.focus-visible\:outline-none:focus-visible{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .focus-visible\:outline-0.focus-visible{
   outline-width: 0px;
 }
@@ -3031,6 +3028,12 @@ input[type='number'].no-arrows {
 .focus-visible\:ring-info-70:focus-visible{
   --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
 }
+.focus-visible\:ring-offset-0.focus-visible{
+  --tw-ring-offset-width: 0px;
+}
+.focus-visible\:ring-offset-0:focus-visible{
+  --tw-ring-offset-width: 0px;
+}
 .active\:bg-body:active{
   background-color: white;
   background-color: var(--aquarium-background-color-body);
@@ -3047,14 +3050,6 @@ input[type='number'].no-arrows {
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
-.active\:bg-default:active{
-  background-color: #ededf0;
-  background-color: var(--aquarium-background-color-default);
-}
-.active\:bg-intense:active{
-  background-color: #d2d2d6;
-  background-color: var(--aquarium-background-color-intense);
-}
 .active\:text-primary-active:active{
   color: #222f95;
   color: var(--aquarium-text-color-primary-active);
@@ -3103,6 +3098,10 @@ input[type='number'].no-arrows {
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
+.disabled\:bg-muted:disabled{
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-background-color-muted);
+}
 .disabled\:text-inactive:disabled{
   color: #9696a0;
   color: var(--aquarium-text-color-inactive);

package/dist/system.cjs

@@ -2706,6 +2706,22 @@ var require_googleLogo = __commonJS({
   }
 });
 
+// src/icons/governance.js
+var require_governance = __commonJS({
+  "src/icons/governance.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M18.333 10V7.517c0-.985 0-1.477-.151-1.826a1.6 1.6 0 00-.625-.768c-.31-.22-.92-.346-2.14-.6-1.345-.28-2.378-.785-3.322-1.515-.453-.35-.68-.525-.856-.573a.772.772 0 00-.478 0c-.177.048-.403.223-.856.573-.944.73-1.977 1.235-3.321 1.515-1.22.254-1.83.38-2.141.6a1.6 1.6 0 00-.625.768c-.151.349-.151.841-.151 1.826V11c0 4.5 4.907 7.772 6.693 8.814.203.118.305.177.448.208.11.024.273.024.384 0 .143-.03.245-.09.448-.208"/><path d="m19.25 19.25-1.772-1.772m.957-2.302a3.26 3.26 0 11-6.518 0 3.26 3.26 0 016.518 0Z"/></g>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/grid.js
 var require_grid = __commonJS({
   "src/icons/grid.js"(exports) {
@@ -4514,6 +4530,22 @@ var require_ticket = __commonJS({
   }
 });
 
+// src/icons/tiered.js
+var require_tiered = __commonJS({
+  "src/icons/tiered.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m20 16.288-8.678 4.11c-.118.056-.177.084-.239.095a.477.477 0 01-.166 0c-.062-.011-.12-.04-.239-.095L2 16.288m0-3.901 4.339 2.055 4.339 2.054c.118.056.177.084.239.095.055.01.111.01.166 0 .062-.01.12-.039.239-.095L20 12.386 17 11M5.7 10C4.209 10 3 8.849 3 7.429c0-1.34 1.075-2.44 2.448-2.56C5.728 3.24 7.212 2 9 2s3.271 1.241 3.552 2.868C13.925 4.99 15 6.09 15 7.428 15 8.849 13.791 10 12.3 10H5.7Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/time.js
 var require_time = __commonJS({
   "src/icons/time.js"(exports) {
@@ -6467,6 +6499,7 @@ var import_githubLogo = __toESM(require_githubLogo());
 var import_globeNetwork = __toESM(require_globeNetwork());
 var import_globe = __toESM(require_globe());
 var import_googleLogo = __toESM(require_googleLogo());
+var import_governance = __toESM(require_governance());
 var import_grid = __toESM(require_grid());
 var import_groupedBarChart = __toESM(require_groupedBarChart());
 var import_heart = __toESM(require_heart());
@@ -6582,6 +6615,7 @@ var import_thumbsUp = __toESM(require_thumbsUp());
 var import_tickCircle = __toESM(require_tickCircle());
 var import_tick2 = __toESM(require_tick());
 var import_ticket = __toESM(require_ticket());
+var import_tiered = __toESM(require_tiered());
 var import_time = __toESM(require_time());
 var import_timelineAreaChart = __toESM(require_timelineAreaChart());
 var import_timelineBarChart = __toESM(require_timelineBarChart());
@@ -10017,6 +10051,7 @@ var import_isFunction3 = __toESM(require("lodash/isFunction"));
 // src/molecules/Accordion/Accordion.tsx
 var import_react60 = __toESM(require("react"));
 var import_react61 = require("@iconify/react");
+var import_button3 = require("@react-aria/button");
 var import_utils8 = require("@react-aria/utils");
 var import_web3 = require("@react-spring/web");
 var import_isUndefined8 = __toESM(require("lodash/isUndefined"));
@@ -10116,6 +10151,7 @@ var Accordion = ({ children, openPanelId: panelId }) => {
 };
 var AccordionToggle = (_a) => {
   var _b = _a, { panelId, onChange } = _b, rest = __objRest(_b, ["panelId", "onChange"]);
+  const ref = (0, import_react60.useRef)(null);
   const id = usePanelContext(panelId);
   const [openPanelId, setOpenPanelId] = useAccordionContext();
   const isOpen = openPanelId === id;
@@ -10128,14 +10164,19 @@ var AccordionToggle = (_a) => {
       duration: 150
     }
   });
-  return /* @__PURE__ */ import_react60.default.createElement(import_web3.animated.div, __spreadProps(__spreadValues({}, rest), {
-    role: "button",
-    tabIndex: 0,
+  const { buttonProps } = (0, import_button3.useButton)({ elementType: "div", onPress: handleClick }, ref);
+  return /* @__PURE__ */ import_react60.default.createElement(import_web3.animated.div, __spreadProps(__spreadValues(__spreadValues({}, rest), __spreadProps(__spreadValues({}, buttonProps), {
+    onPointerDown: (e) => {
+      e.preventDefault();
+      handleClick();
+    }
+  })), {
+    ref,
     "aria-label": "accordion toggle",
     "aria-expanded": openPanelId === id,
     "aria-controls": `${id}-content`,
-    onClick: handleClick,
-    style: { transform }
+    style: { transform },
+    className: tw("focus:outline-none focusable")
   }), /* @__PURE__ */ import_react60.default.createElement(import_react61.Icon, {
     icon: import_caretUp.default,
     height: 22,
@@ -14935,6 +14976,7 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
 var import_react119 = __toESM(require("react"));
+var import_button4 = require("@react-aria/button");
 var import_utils31 = require("@react-aria/utils");
 var import_web6 = require("@react-spring/web");
 var import_castArray7 = __toESM(require("lodash/castArray"));
@@ -15085,20 +15127,27 @@ Section3.Header = (_a) => {
   var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
   return /* @__PURE__ */ import_react118.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-muted": expanded }),
-      className
-    )
-  }), children);
-};
-Section3.TitleContainer = (_a) => {
-  var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
-  return /* @__PURE__ */ import_react118.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      tw("grow grid grid-cols-[auto_1fr] gap-x-3 items-center", { "cursor-pointer": collapsible }),
+      tw("px-6 flex gap-5 justify-between items-center h-[72px]", {
+        "bg-muted": expanded
+      }),
       className
     )
   }), children);
 };
+Section3.TitleContainer = import_react118.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
+    return /* @__PURE__ */ import_react118.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+      ref,
+      className: classNames(
+        tw("grow grid grid-cols-[auto_1fr] gap-x-3 items-center", {
+          "cursor-pointer focus:outline-none focusable": collapsible
+        }),
+        className
+      )
+    }), children);
+  }
+);
 Section3.Toggle = (props) => /* @__PURE__ */ import_react118.default.createElement(Icon, __spreadProps(__spreadValues({}, props), {
   icon: import_caretUp2.default,
   height: 22,
@@ -15144,6 +15193,7 @@ var Section4 = (props) => {
   const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
   const [isCollapsed, setCollapsed] = import_react119.default.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
   const [ref, { height }] = useMeasure();
+  const toggleAreaRef = (0, import_react119.useRef)(null);
   const menu = title ? (_c = props.menu) != null ? _c : void 0 : void 0;
   const menuAriaLabel = title ? (_e = (_d = props.menuAriaLabel) != null ? _d : props.menuLabel) != null ? _e : "Context menu" : void 0;
   const onAction = title ? props.onAction : void 0;
@@ -15177,19 +15227,25 @@ var Section4 = (props) => {
   const regionId = (0, import_utils31.useId)();
   const titleId = (0, import_utils31.useId)();
   const hasTabs = isComponentType(children, Tabs);
+  const { buttonProps } = (0, import_button4.useButton)(
+    { "elementType": "div", "onPress": handleTitleClick, "aria-expanded": !isCollapsed, "aria-controls": regionId },
+    toggleAreaRef
+  );
   return /* @__PURE__ */ import_react119.default.createElement(Section3, {
     "aria-label": title,
     className: "Aquarium-Section"
   }, title && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, /* @__PURE__ */ import_react119.default.createElement(Section3.Header, {
     expanded: _collapsible && !isCollapsed
-  }, /* @__PURE__ */ import_react119.default.createElement(Section3.TitleContainer, {
-    role: _collapsible ? "button" : void 0,
+  }, /* @__PURE__ */ import_react119.default.createElement(Section3.TitleContainer, __spreadProps(__spreadValues({}, _collapsible ? __spreadProps(__spreadValues({}, buttonProps), {
+    onPointerDown: (e) => {
+      e.preventDefault();
+      handleTitleClick();
+    }
+  }) : { onClick: handleTitleClick }), {
+    ref: _collapsible ? toggleAreaRef : void 0,
     id: toggleId,
-    collapsible: _collapsible,
-    onClick: handleTitleClick,
-    "aria-expanded": _collapsible ? !isCollapsed : void 0,
-    "aria-controls": _collapsible ? regionId : void 0
-  }, _collapsible && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
+    collapsible: _collapsible
+  }), _collapsible && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
     style: { transform }
   }, /* @__PURE__ */ import_react119.default.createElement(Section3.Toggle, null)), /* @__PURE__ */ import_react119.default.createElement(Section3.Title, {
     id: titleId
@@ -15212,7 +15268,7 @@ var Section4 = (props) => {
     icon: import_more6.default
   })), menu)), props.actions && (0, import_castArray7.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react119.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react119.default.createElement(SelectBase, __spreadValues({
     "aria-labelledby": titleId
-  }, props.select)))), !hasTabs && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
+  }, props.select)))), !hasTabs && !isCollapsed && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
     className: tw(`h-[1px]`),
     style: { backgroundColor }
   })), /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
@@ -15236,8 +15292,8 @@ var SegmentedControl = (_a) => {
   var _b = _a, {
     children,
     value,
-    dense = false,
-    variant = "filled",
+    dense: _dense = false,
+    variant: _variant = "filled",
     selected = false,
     className
   } = _b, rest = __objRest(_b, [
@@ -15251,12 +15307,7 @@ var SegmentedControl = (_a) => {
   return /* @__PURE__ */ import_react120.default.createElement("li", null, /* @__PURE__ */ import_react120.default.createElement("button", __spreadProps(__spreadValues({
     type: "button"
   }, rest), {
-    className: classNames(
-      getCommonClassNames(dense, selected),
-      !rest.disabled && getHoverClassNames(variant),
-      selected && getSelectedClassNames(variant),
-      className
-    ),
+    className: classNames(getBaseSegmentedControlClassNames(selected), className),
     "aria-pressed": selected
   }), children));
 };
@@ -15264,8 +15315,8 @@ var SegmentedControlGroup = (_a) => {
   var _b = _a, {
     value,
     onChange,
-    variant = "filled",
-    dense = false,
+    variant: _variant = "filled",
+    dense: _dense = false,
     children,
     className,
     ariaLabel
@@ -15278,49 +15329,28 @@ var SegmentedControlGroup = (_a) => {
     "className",
     "ariaLabel"
   ]);
-  const classes2 = tw("rounded flex", {
-    "border border-default text-muted": variant === "outlined",
-    "bg-muted": variant === "raised"
-  });
   return /* @__PURE__ */ import_react120.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     "aria-label": ariaLabel,
-    className: classNames("Aquarium-SegmentedControl", classes2, className)
+    className: classNames(
+      "Aquarium-SegmentedControl",
+      "flex border border-default rounded-sm divide-x divide-grey-20",
+      className
+    )
   }), import_react120.default.Children.map(
     children,
     (child) => import_react120.default.cloneElement(child, {
-      dense,
-      variant,
       onClick: () => onChange(child.props.value),
       selected: child.props.value === value
     })
   ));
 };
-var getHoverClassNames = (variant) => tw(
-  "hover:text-intense",
-  {
-    "hover:bg-muted": variant !== "raised",
-    "hover:bg-default": variant === "raised"
-  },
-  {
-    "active:bg-default": variant !== "raised",
-    "active:bg-intense": variant === "raised"
-  }
-);
-var getSelectedClassNames = (variant) => tw("relative z-40 text-intense", {
-  "bg-white ring-2 ring-offset-0 ring-grey-30 focus:ring-2": variant === "outlined",
-  "bg-white shadow-2dp": variant === "raised",
-  "bg-default": variant === "filled"
-});
-var getCommonClassNames = (dense, selected) => tw(
-  "transition whitespace-nowrap rounded mr-1",
-  "focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-grey-60",
-  "disabled:cursor-not-allowed disabled:text-inactive",
+var getBaseSegmentedControlClassNames = (selected) => tw(
+  "transition whitespace-nowrap rounded-sm px-4 py-[10px] hover:bg-primary-hover",
+  "focus-visible:outline-none focus-visible:relative focus-visible:z-50 focus-visible:ring-1 focus-visible:ring-offset-0 focusable",
+  "disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted",
   {
-    "py-4 px-5": !dense,
-    "py-2 px-4": dense,
-    "typography-default-strong": !dense,
-    "typography-small-strong": dense,
-    "text-muted": !selected
+    "typography-small text-default bg-body": !selected,
+    "typography-small-strong text-primary-intense relative z-40 ring-1 ring-offset-0 ring-primary-80": selected
   }
 );