@cloudscape-design/components 3.0.0

package/segmented-control/internal-segmented-control.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlProps } from './interfaces';
+export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, }: SegmentedControlProps): JSX.Element;
+//# sourceMappingURL=internal-segmented-control.d.ts.map

package/segmented-control/internal-segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB,eAmEvB"}

package/segmented-control/internal-segmented-control.js

@@ -0,0 +1,54 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { KeyCode } from '../internal/keycode';
+import { fireNonCancelableEvent } from '../internal/events';
+import { Segment } from './segment';
+import styles from './styles.css.js';
+export default function InternalSegmentedControl(_a) {
+    var selectedId = _a.selectedId, options = _a.options, label = _a.label, ariaLabelledby = _a.ariaLabelledby, onChange = _a.onChange;
+    var segmentByIdRef = useRef({});
+    var selectedOptions = (options || []).filter(function (option) {
+        return option.id === selectedId;
+    });
+    var currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;
+    var enabledSegments = (options || []).filter(function (option) { return !option.disabled; });
+    var moveHighlight = function (event, activeIndex) {
+        var _a;
+        if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {
+            return;
+        }
+        var nextIndex = activeIndex;
+        if (event.keyCode === KeyCode.right) {
+            nextIndex = activeIndex + 1 === enabledSegments.length ? 0 : activeIndex + 1;
+        }
+        else if (event.keyCode === KeyCode.left) {
+            nextIndex = activeIndex === 0 ? enabledSegments.length - 1 : activeIndex - 1;
+        }
+        var nextSegmentId = enabledSegments[nextIndex].id;
+        (_a = segmentByIdRef.current[nextSegmentId]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (React.createElement("div", { className: clsx(styles['segment-part'], styles["segment-count-".concat(options === null || options === void 0 ? void 0 : options.length)]), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
+        options.map(function (option, index) {
+            var isActive = selectedId === option.id;
+            var enabledSegmentIndex = enabledSegments.indexOf(option);
+            var tabIndex = isActive ? 0 : -1;
+            if (currentSelectedOption === null && enabledSegmentIndex === 0) {
+                tabIndex = 0;
+            }
+            return (React.createElement(Segment, { key: index, id: option.id, disabled: !!option.disabled, iconName: option.iconName, iconAlt: option.iconAlt, iconUrl: option.iconUrl, iconSvg: option.iconSvg, text: option.text, isActive: isActive, tabIndex: tabIndex, ref: function (node) {
+                    if (node) {
+                        segmentByIdRef.current[option.id] = node;
+                    }
+                    else {
+                        delete segmentByIdRef.current[option.id];
+                    }
+                }, onClick: function () {
+                    if (selectedId !== option.id) {
+                        fireNonCancelableEvent(onChange, { selectedId: option.id });
+                    }
+                }, onKeyDown: function (event) { return moveHighlight(event, enabledSegmentIndex); } }));
+        })));
+}
+//# sourceMappingURL=internal-segmented-control.js.map

package/segmented-control/internal-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n}: SegmentedControlProps) {\n  const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n  const selectedOptions = (options || []).filter(option => {\n    return option.id === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n  const enabledSegments = (options || []).filter(option => !option.disabled);\n\n  const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n    if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n      return;\n    }\n    let nextIndex = activeIndex;\n    if (event.keyCode === KeyCode.right) {\n      nextIndex = activeIndex + 1 === enabledSegments.length ? 0 : activeIndex + 1;\n    } else if (event.keyCode === KeyCode.left) {\n      nextIndex = activeIndex === 0 ? enabledSegments.length - 1 : activeIndex - 1;\n    }\n    const nextSegmentId = enabledSegments[nextIndex].id;\n    segmentByIdRef.current[nextSegmentId]?.focus();\n  };\n\n  return (\n    <div\n      className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`])}\n      aria-label={label}\n      aria-labelledby={ariaLabelledby}\n      role=\"toolbar\"\n    >\n      {options &&\n        options.map((option: SegmentedControlProps.Option, index) => {\n          const isActive = selectedId === option.id;\n          const enabledSegmentIndex = enabledSegments.indexOf(option);\n          let tabIndex = isActive ? 0 : -1;\n          if (currentSelectedOption === null && enabledSegmentIndex === 0) {\n            tabIndex = 0;\n          }\n          return (\n            <Segment\n              key={index}\n              id={option.id}\n              disabled={!!option.disabled}\n              iconName={option.iconName}\n              iconAlt={option.iconAlt}\n              iconUrl={option.iconUrl}\n              iconSvg={option.iconSvg}\n              text={option.text}\n              isActive={isActive}\n              tabIndex={tabIndex}\n              ref={node => {\n                if (node) {\n                  segmentByIdRef.current[option.id] = node;\n                } else {\n                  delete segmentByIdRef.current[option.id];\n                }\n              }}\n              onClick={() => {\n                if (selectedId !== option.id) {\n                  fireNonCancelableEvent(onChange, { selectedId: option.id });\n                }\n              }}\n              onKeyDown={event => moveHighlight(event, enabledSegmentIndex)}\n            />\n          );\n        })}\n    </div>\n  );\n}\n"]}

package/segmented-control/internal.d.ts

@@ -0,0 +1,6 @@
+import { SegmentedControlProps } from './interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+declare type InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;
+export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, __internalRootRef, ...props }: InternalSegmentedControlProps): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/segmented-control/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,aAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAwB,EACxB,GAAG,KAAK,EACT,EAAE,6BAA6B,eAwC/B"}

package/segmented-control/internal.js

@@ -0,0 +1,37 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import InternalSelect from '../select/internal';
+import InternalFormField from '../form-field/internal';
+import InternalSegmentedControlComponent from './internal-segmented-control';
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+import styles from './styles.css.js';
+export default function InternalSegmentedControl(_a) {
+    var selectedId = _a.selectedId, options = _a.options, label = _a.label, ariaLabelledby = _a.ariaLabelledby, onChange = _a.onChange, _b = _a.__internalRootRef, __internalRootRef = _b === void 0 ? null : _b, props = __rest(_a, ["selectedId", "options", "label", "ariaLabelledby", "onChange", "__internalRootRef"]);
+    var baseProps = getBaseProps(props);
+    var selectOptions = (options || []).map(function (option) {
+        var label = option.text || option.iconAlt;
+        return __assign(__assign({}, option), { label: label, value: option.id });
+    });
+    var selectedOptions = selectOptions.filter(function (option) {
+        return option.value === selectedId;
+    });
+    var currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;
+    var selectProps = {
+        options: selectOptions,
+        selectedOption: currentSelectedOption,
+        triggerVariant: 'option',
+        onChange: function (event) { return fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value }); }
+    };
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
+        React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange }),
+        React.createElement("div", { className: styles.select },
+            ariaLabelledby && React.createElement(InternalSelect, __assign({}, selectProps, { ariaLabelledby: ariaLabelledby })),
+            !ariaLabelledby && label && (React.createElement(InternalFormField, { label: label, stretch: true },
+                React.createElement(InternalSelect, __assign({}, selectProps)))),
+            !ariaLabelledby && !label && React.createElement(InternalSelect, __assign({}, selectProps)))));
+}
+//# sourceMappingURL=internal.js.map

package/segmented-control/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAuC,MAAM,oBAAoB,CAAC;AACzE,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,OAAO,iCAAiC,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAKrC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAQjB;IAP9B,IAAA,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,KAAK,WAAA,EACL,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACrB,KAAK,cAPuC,qFAQhD,CADS;IAER,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,IAAM,aAAa,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAA,MAAM;QAC9C,IAAM,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;QAC5C,6BAAY,MAAM,KAAE,KAAK,OAAA,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,IAAG;IAChD,CAAC,CAAC,CAAC;IAEH,IAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,UAAA,MAAM;QACjD,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,IAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,IAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,aAAa;QACtB,cAAc,EAAE,qBAAqB;QACrC,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,sBAAsB,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,KAAM,EAAE,CAAC,EAApF,CAAoF;KACxG,CAAC;IAEF,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC3F,oBAAC,iCAAiC,IAChC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,GAClB;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1B,cAAc,IAAI,oBAAC,cAAc,eAAK,WAAW,IAAE,cAAc,EAAE,cAAc,IAAI;YACrF,CAAC,cAAc,IAAI,KAAK,IAAI,CAC3B,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI;gBAC5C,oBAAC,cAAc,eAAK,WAAW,EAAI,CACjB,CACrB;YACA,CAAC,cAAc,IAAI,CAAC,KAAK,IAAI,oBAAC,cAAc,eAAK,WAAW,EAAI,CAC7D,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport InternalSelect, { InternalSelectProps } from '../select/internal';\nimport InternalFormField from '../form-field/internal';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControlComponent from './internal-segmented-control';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n  __internalRootRef = null,\n  ...props\n}: InternalSegmentedControlProps) {\n  const baseProps = getBaseProps(props);\n\n  const selectOptions = (options || []).map(option => {\n    const label = option.text || option.iconAlt;\n    return { ...option, label, value: option.id };\n  });\n\n  const selectedOptions = selectOptions.filter(option => {\n    return option.value === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n\n  const selectProps: InternalSelectProps = {\n    options: selectOptions,\n    selectedOption: currentSelectedOption,\n    triggerVariant: 'option',\n    onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value! }),\n  };\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalSegmentedControlComponent\n        selectedId={selectedId}\n        options={options}\n        label={label}\n        ariaLabelledby={ariaLabelledby}\n        onChange={onChange}\n      />\n      <div className={styles.select}>\n        {ariaLabelledby && <InternalSelect {...selectProps} ariaLabelledby={ariaLabelledby} />}\n        {!ariaLabelledby && label && (\n          <InternalFormField label={label} stretch={true}>\n            <InternalSelect {...selectProps} />\n          </InternalFormField>\n        )}\n        {!ariaLabelledby && !label && <InternalSelect {...selectProps} />}\n      </div>\n    </div>\n  );\n}\n"]}

package/segmented-control/segment.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SegmentedControlProps } from './interfaces';
+export interface SegmentProps extends SegmentedControlProps.Option {
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    isActive: boolean;
+    tabIndex: number;
+}
+export declare const Segment: React.ForwardRefExoticComponent<SegmentProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=segment.d.ts.map

package/segmented-control/segment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IAChE,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,wFAiCnB,CAAC"}

package/segmented-control/segment.js

@@ -0,0 +1,17 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import InternalIcon from '../icon/internal';
+import styles from './styles.css.js';
+import useFocusVisible from '../internal/hooks/focus-visible';
+export var Segment = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var disabled = _a.disabled, text = _a.text, iconName = _a.iconName, iconAlt = _a.iconAlt, iconUrl = _a.iconUrl, iconSvg = _a.iconSvg, isActive = _a.isActive, onClick = _a.onClick, onKeyDown = _a.onKeyDown, tabIndex = _a.tabIndex;
+    var focusVisible = useFocusVisible();
+    return (React.createElement("button", __assign({ className: clsx(styles.segment, (_b = {}, _b[styles.disabled] = !!disabled, _b), (_c = {}, _c[styles.selected] = isActive, _c)) }, focusVisible, { ref: ref, onClick: onClick, onKeyDown: onKeyDown, disabled: disabled, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined }),
+        (iconName || iconUrl || iconSvg) && (React.createElement(InternalIcon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, svg: iconSvg, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
+        React.createElement("span", null, text)));
+});
+//# sourceMappingURL=segment.js.map

package/segmented-control/segment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAS9D,MAAM,CAAC,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,UACE,EAA6G,EAC7G,GAAiC;;QAD/B,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IAG7F,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,OAAO,CACL,yCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,QAAQ,iBAAM,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,MAAG,IAC/F,YAAY,IAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC7B,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QAEtC,CAAC,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CACnC,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EACjF,IAAI,EAAE,QAAQ,EACd,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,GACzC,CACH;QACD,kCAAO,IAAI,CAAQ,CACZ,CACV,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport useFocusVisible from '../internal/hooks/focus-visible';\n\nexport interface SegmentProps extends SegmentedControlProps.Option {\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isActive: boolean;\n  tabIndex: number;\n}\n\nexport const Segment = React.forwardRef(\n  (\n    { disabled, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex }: SegmentProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n    return (\n      <button\n        className={clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive })}\n        {...focusVisible}\n        ref={ref}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        disabled={disabled}\n        type=\"button\"\n        tabIndex={tabIndex}\n        aria-pressed={isActive ? 'true' : 'false'}\n        aria-label={!text ? iconAlt : undefined}\n      >\n        {(iconName || iconUrl || iconSvg) && (\n          <InternalIcon\n            className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n            name={iconName}\n            url={iconUrl}\n            svg={iconSvg}\n            alt={iconAlt}\n            variant={disabled ? 'disabled' : 'normal'}\n          />\n        )}\n        <span>{text}</span>\n      </button>\n    );\n  }\n);\n"]}

package/segmented-control/styles.css.js

@@ -0,0 +1,19 @@
+
+    import './styles.scoped.css';
+    export default {
+  "segment": "awsui_segment_8cbea_l5avo_97",
+  "disabled": "awsui_disabled_8cbea_l5avo_164",
+  "selected": "awsui_selected_8cbea_l5avo_172",
+  "icon": "awsui_icon_8cbea_l5avo_193",
+  "with-text": "awsui_with-text_8cbea_l5avo_197",
+  "with-no-text": "awsui_with-no-text_8cbea_l5avo_203",
+  "root": "awsui_root_8cbea_l5avo_214",
+  "segment-part": "awsui_segment-part_8cbea_l5avo_225",
+  "select": "awsui_select_8cbea_l5avo_172",
+  "segment-count-2": "awsui_segment-count-2_8cbea_l5avo_244",
+  "segment-count-3": "awsui_segment-count-3_8cbea_l5avo_249",
+  "segment-count-4": "awsui_segment-count-4_8cbea_l5avo_254",
+  "segment-count-5": "awsui_segment-count-5_8cbea_l5avo_259",
+  "segment-count-6": "awsui_segment-count-6_8cbea_l5avo_264"
+};
+  

package/segmented-control/styles.scoped.css

@@ -0,0 +1,330 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_segment_8cbea_l5avo_97:not(#\9) {
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  word-wrap: break-word;
+  max-width: 100%;
+  overflow: hidden;
+  border: 2px solid #414d5c;
+  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-segment-default-091088, #414d5c);
+  padding: 4px 20px;
+  padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-l-4vl6xu, 20px);
+  border-right-width: 0;
+  font-weight: 800;
+  font-weight: var(--font-button-weight-7rj5fx, 800);
+  letter-spacing: 0.25px;
+  background: #ffffff;
+  background: var(--color-background-segment-default-5k37bj, #ffffff);
+  color: #414d5c;
+  color: var(--color-text-segment-default-bf7rka, #414d5c);
+  overflow: visible;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):focus {
+  outline: none;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):nth-child(1) {
+  grid-column: 1;
+  -ms-grid-column: 1;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):nth-child(2) {
+  grid-column: 2;
+  -ms-grid-column: 2;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):nth-child(3) {
+  grid-column: 3;
+  -ms-grid-column: 3;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):nth-child(4) {
+  grid-column: 4;
+  -ms-grid-column: 4;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):nth-child(5) {
+  grid-column: 5;
+  -ms-grid-column: 5;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):nth-child(6) {
+  grid-column: 6;
+  -ms-grid-column: 6;
+}
+.awsui_segment_8cbea_l5avo_97[data-awsui-focus-visible=true]:not(#\9):focus {
+  position: relative;
+}
+.awsui_segment_8cbea_l5avo_97[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(4px - 1px);
+  outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-99x5b9, 4px) - 1px);
+}
+.awsui_segment_8cbea_l5avo_97[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * 4px);
+  left: calc(-1 * var(--space-segmented-control-focus-outline-gutter-99x5b9, 4px));
+  top: calc(-1 * 4px);
+  top: calc(-1 * var(--space-segmented-control-focus-outline-gutter-99x5b9, 4px));
+  width: calc(100% + 2 * 4px);
+  width: calc(100% + 2 * var(--space-segmented-control-focus-outline-gutter-99x5b9, 4px));
+  height: calc(100% + 2 * 4px);
+  height: calc(100% + 2 * var(--space-segmented-control-focus-outline-gutter-99x5b9, 4px));
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):last-child {
+  border-right-width: 2px;
+  border-right-width: var(--border-field-width-idlekx, 2px);
+  border-radius: 0 20px 20px 0;
+  border-radius: 0 var(--border-button-radius-gc2v6s, 20px) var(--border-button-radius-gc2v6s, 20px) 0;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):first-child {
+  border-radius: 20px 0 0 20px;
+  border-radius: var(--border-button-radius-gc2v6s, 20px) 0 0 var(--border-button-radius-gc2v6s, 20px);
+}
+.awsui_segment_8cbea_l5avo_97.awsui_disabled_8cbea_l5avo_164:not(#\9) {
+  background: #ffffff;
+  background: var(--color-background-segment-disabled-hgka10, #ffffff);
+  border-color: #414d5c;
+  border-color: var(--color-border-segment-disabled-6v5zlt, #414d5c);
+  color: #9ba7b6;
+  color: var(--color-text-interactive-disabled-3pbb07, #9ba7b6);
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):not(.awsui_disabled_8cbea_l5avo_164) + .awsui_segment_8cbea_l5avo_97.awsui_disabled_8cbea_l5avo_164 {
+  border-left-color: #414d5c;
+  border-left-color: var(--color-border-segment-default-091088, #414d5c);
+}
+.awsui_segment_8cbea_l5avo_97.awsui_selected_8cbea_l5avo_172:not(#\9) {
+  background: #0972d3;
+  background: var(--color-background-segment-active-bl0u6r, #0972d3);
+  border-color: #414d5c;
+  border-color: var(--color-border-segment-active-kdy5tm, #414d5c);
+  color: #ffffff;
+  color: var(--color-text-segment-active-gc2jjl, #ffffff);
+}
+.awsui_segment_8cbea_l5avo_97.awsui_selected_8cbea_l5avo_172 + .awsui_segment_8cbea_l5avo_97:not(#\9), .awsui_segment_8cbea_l5avo_97.awsui_selected_8cbea_l5avo_172 + .awsui_segment_8cbea_l5avo_97.awsui_disabled_8cbea_l5avo_164:not(#\9) {
+  border-left-color: #414d5c;
+  border-left-color: var(--color-border-segment-active-kdy5tm, #414d5c);
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):hover:not(.awsui_selected_8cbea_l5avo_172):not(.awsui_disabled_8cbea_l5avo_164):not(:focus) {
+  background: #ffffff;
+  background: var(--color-background-segment-hover-s3f27a, #ffffff);
+  color: #0972d3;
+  color: var(--color-text-segment-hover-5pccvg, #0972d3);
+  border-color: #414d5c;
+  border-color: var(--color-border-segment-hover-9notuw, #414d5c);
+  cursor: pointer;
+}
+.awsui_segment_8cbea_l5avo_97:not(#\9):hover:not(.awsui_selected_8cbea_l5avo_172):not(.awsui_disabled_8cbea_l5avo_164):not(:focus) + .awsui_segment_8cbea_l5avo_97:not(.awsui_selected_8cbea_l5avo_172) {
+  border-left-color: #414d5c;
+  border-left-color: var(--color-border-segment-hover-9notuw, #414d5c);
+}
+.awsui_segment_8cbea_l5avo_97.awsui_selected_8cbea_l5avo_172 + .awsui_segment_8cbea_l5avo_97:not(#\9):hover:not(.awsui_selected_8cbea_l5avo_172):not(.awsui_disabled_8cbea_l5avo_164):not(:focus) {
+  border-left-color: #414d5c;
+  border-left-color: var(--color-border-segment-active-kdy5tm, #414d5c);
+}
+
+.awsui_icon_8cbea_l5avo_193:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_with-text_8cbea_l5avo_197:not(#\9) {
+  position: relative;
+  left: calc(-1 * 4px);
+  left: calc(-1 * var(--space-xxs-ynfts5, 4px));
+  margin-right: 4px;
+  margin-right: var(--space-xxs-ynfts5, 4px);
+}
+
+.awsui_with-no-text_8cbea_l5avo_203:not(#\9) {
+  margin-right: auto;
+  margin-left: auto;
+  right: 0;
+  left: 0;
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_8cbea_l5avo_214:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+}
+
+.awsui_segment-part_8cbea_l5avo_225:not(#\9) {
+  display: -ms-inline-grid;
+  display: inline-grid;
+}
+@media (max-width: 688px) {
+  .awsui_segment-part_8cbea_l5avo_225:not(#\9) {
+    display: none;
+  }
+}
+
+.awsui_select_8cbea_l5avo_172:not(#\9) {
+  display: none;
+}
+@media (max-width: 688px) {
+  .awsui_select_8cbea_l5avo_172:not(#\9) {
+    display: block;
+  }
+}
+
+.awsui_segment-count-2_8cbea_l5avo_244:not(#\9) {
+  -ms-grid-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+}
+
+.awsui_segment-count-3_8cbea_l5avo_249:not(#\9) {
+  -ms-grid-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.awsui_segment-count-4_8cbea_l5avo_254:not(#\9) {
+  -ms-grid-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.awsui_segment-count-5_8cbea_l5avo_259:not(#\9) {
+  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+
+.awsui_segment-count-6_8cbea_l5avo_264:not(#\9) {
+  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+}

package/segmented-control/styles.selectors.js

@@ -0,0 +1,20 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "segment": "awsui_segment_8cbea_l5avo_97",
+  "disabled": "awsui_disabled_8cbea_l5avo_164",
+  "selected": "awsui_selected_8cbea_l5avo_172",
+  "icon": "awsui_icon_8cbea_l5avo_193",
+  "with-text": "awsui_with-text_8cbea_l5avo_197",
+  "with-no-text": "awsui_with-no-text_8cbea_l5avo_203",
+  "root": "awsui_root_8cbea_l5avo_214",
+  "segment-part": "awsui_segment-part_8cbea_l5avo_225",
+  "select": "awsui_select_8cbea_l5avo_172",
+  "segment-count-2": "awsui_segment-count-2_8cbea_l5avo_244",
+  "segment-count-3": "awsui_segment-count-3_8cbea_l5avo_249",
+  "segment-count-4": "awsui_segment-count-4_8cbea_l5avo_254",
+  "segment-count-5": "awsui_segment-count-5_8cbea_l5avo_259",
+  "segment-count-6": "awsui_segment-count-6_8cbea_l5avo_264"
+};
+  

package/select/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SelectProps } from './interfaces';
+export { SelectProps };
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectProps.Ref>>;
+export default Select;
+//# sourceMappingURL=index.d.ts.map

package/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,QAAA,MAAM,MAAM,qFAyBX,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/select/index.js

@@ -0,0 +1,17 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalSelect from './internal';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { getExternalProps } from '../internal/utils/external-props';
+var Select = React.forwardRef(function (_a, ref) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.filteringType, filteringType = _c === void 0 ? 'none' : _c, _d = _a.statusType, statusType = _d === void 0 ? 'finished' : _d, _e = _a.triggerVariant, triggerVariant = _e === void 0 ? 'label' : _e, restProps = __rest(_a, ["options", "filteringType", "statusType", "triggerVariant"]);
+    var baseComponentProps = useBaseComponent('Select');
+    var externalProps = getExternalProps(restProps);
+    return (React.createElement(InternalSelect, __assign({ options: options, filteringType: filteringType, statusType: statusType, triggerVariant: triggerVariant }, externalProps, baseComponentProps, { ref: ref })));
+});
+applyDisplayName(Select, 'Select');
+export default Select;
+//# sourceMappingURL=index.js.map

package/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAc,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,UACE,EAMc,EACd,GAA+B;IAN7B,IAAA,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,qBAAsB,EAAtB,aAAa,mBAAG,MAAM,KAAA,EACtB,kBAAuB,EAAvB,UAAU,mBAAG,UAAU,KAAA,EACvB,sBAAwB,EAAxB,cAAc,mBAAG,OAAO,KAAA,EACrB,SAAS,cALd,4DAMC,CADa;IAId,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACtD,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAClD,OAAO,CACL,oBAAC,cAAc,aACb,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,IAC1B,aAAa,EACb,kBAAkB,IACtB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { SelectProps } from './interfaces';\nimport InternalSelect from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { getExternalProps } from '../internal/utils/external-props';\n\nexport { SelectProps };\n\nconst Select = React.forwardRef(\n  (\n    {\n      options = [],\n      filteringType = 'none',\n      statusType = 'finished',\n      triggerVariant = 'label',\n      ...restProps\n    }: SelectProps,\n    ref: React.Ref<SelectProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('Select');\n    const externalProps = getExternalProps(restProps);\n    return (\n      <InternalSelect\n        options={options}\n        filteringType={filteringType}\n        statusType={statusType}\n        triggerVariant={triggerVariant}\n        {...externalProps}\n        {...baseComponentProps}\n        ref={ref}\n      />\n    );\n  }\n);\n\napplyDisplayName(Select, 'Select');\nexport default Select;\n"]}