@synergy-design-system/react 2.4.3 → 2.6.0

package/dist/chunks/chunk.3OAYVNPH.js

@@ -0,0 +1,24 @@
+// ../react/src/components/file.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/file/file.component.js";
+var tagName = "syn-file";
+Component.define("syn-file");
+var SynFile = createComponent({
+  displayName: "SynFile",
+  elementClass: Component,
+  events: {
+    onSynBlur: "syn-blur",
+    onSynChange: "syn-change",
+    onSynError: "syn-error",
+    onSynFocus: "syn-focus",
+    onSynInput: "syn-input"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynFile
+};
+//# sourceMappingURL=chunk.3OAYVNPH.js.map

package/dist/chunks/chunk.3OAYVNPH.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/file.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/file/file.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynBlurEvent, SynChangeEvent, SynErrorEvent, SynFocusEvent, SynInputEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-file';\nComponent.define('syn-file');\n\n/**\n * @summary File controls allow selecting an arbitrary number of files for uploading.\n * @status stable\n *\n * @dependency syn-button\n * @dependency syn-icon\n *\n * @slot label - The file control's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the file control.\n *    Alternatively, you can use the `help-text` attribute.\n * @slot droparea-icon - Optional droparea icon to use instead of the default.\n *    Works best with `<syn-icon>`.\n * @slot trigger - Optional content to be used as trigger instead of the default content.\n *    Opening the file dialog on click and as well as drag and drop will work for this content.\n *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,\n *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be\n *    applied and must be taken care of yourself.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-error - Emitted when multiple files are selected via drag and drop, without\n * the `multiple` property being set.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-wrapper - The wrapper around the button and text value.\n * @csspart button - The syn-button acting as a file input.\n * @csspart button__base - The syn-button's exported `base` part.\n * @csspart value - The chosen files or placeholder text for the file input.\n * @csspart droparea - The element wrapping the drop zone.\n * @csspart droparea-background - The background of the drop zone.\n * @csspart droparea-icon - The container that wraps the icon for the drop zone.\n * @csspart droparea-value - The text for the drop zone.\n * @csspart trigger - The container that wraps the trigger.\n *\n * @animation file.iconDrop - The animation to use for the file icon\n * when a file is dropped\n * @animation file.text.disappear - The disappear animation to use for the file placeholder text\n * when a file is dropped\n * @animation file.text.appear - The appear animation to use for the file placeholder text\n * when a file is dropped\n */\nexport const SynFile = createComponent({\n  displayName: 'SynFile',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynError: 'syn-error' as EventName<SynErrorEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynErrorEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,UAAU;AAgDpB,IAAM,UAAU,gBAAgB;AAAA,EACrC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.7ZGCZSWN.js

@@ -0,0 +1,18 @@
+// ../react/src/components/range-tick.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/range-tick/range-tick.component.js";
+var tagName = "syn-range-tick";
+Component.define("syn-range-tick");
+var SynRangeTick = createComponent({
+  displayName: "SynRangeTick",
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName
+});
+
+export {
+  SynRangeTick
+};
+//# sourceMappingURL=chunk.7ZGCZSWN.js.map

package/dist/chunks/chunk.7ZGCZSWN.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/range-tick.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/range-tick/range-tick.component.js';\n\nconst tagName = 'syn-range-tick';\nComponent.define('syn-range-tick');\n\n/**\n * @summary Ticks visually improve positioning on range sliders.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @slot - The tick's label\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label.\n * @csspart line - The component's tick line.\n *\n * @cssproperty --tick-height - The height of the tick marker.\n * @cssproperty --tick-label-top - The top offset of the tick label.\n */\nexport const SynRangeTick = createComponent({\n  displayName: 'SynRangeTick',\n  elementClass: Component,\n  events: {\n\n  },\n  react: React,\n  tagName,\n});\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,gBAAgB;AAgB1B,IAAM,eAAe,gBAAgB;AAAA,EAC1C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.NDDVIALI.js

@@ -0,0 +1,25 @@
+// ../react/src/components/range.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/range/range.component.js";
+var tagName = "syn-range";
+Component.define("syn-range");
+var SynRange = createComponent({
+  displayName: "SynRange",
+  elementClass: Component,
+  events: {
+    onSynBlur: "syn-blur",
+    onSynChange: "syn-change",
+    onSynFocus: "syn-focus",
+    onSynInput: "syn-input",
+    onSynInvalid: "syn-invalid",
+    onSynMove: "syn-move"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynRange
+};
+//# sourceMappingURL=chunk.NDDVIALI.js.map

package/dist/chunks/chunk.NDDVIALI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/range.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/range/range.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-range';\nComponent.define('syn-range');\n\n/**\n * @summary Ranges allow the user to select values within a given range using one or two thumbs.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @dependency syn-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the range.\n * @slot suffix - Used to append a presentational icon or similar element to the range.\n * @slot help-text - Text that describes how to use the range.\n * Alternatively, you can use the `help-text` attribute.\n * @slot ticks - Used to display tick marks at specific intervals along the range.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n * and its constraints aren't satisfied.\n * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.\n * Use `Event.preventDefault()` to prevent movement.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the input track and ticks.\n * @csspart track-wrapper - The wrapper for the track.\n * @csspart track - The inactive track.\n * @csspart active-track - The active track.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart ticks - The container that wraps the tick marks.\n * @csspart thumb - The thumb(s) that the user can drag to change the range.\n *\n * @cssproperty --thumb-size - The size of a thumb.\n * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.\n * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).\n * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).\n * @cssproperty --track-color-active - Color of the track representing the current value.\n * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The point of origin of the active track,\n * starting at the left side of the range.\n */\nexport const SynRange = createComponent({\n  displayName: 'SynRange',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n    onSynMove: 'syn-move' as EventName<SynMoveEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\nexport type { SynMoveEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,WAAW;AAgDrB,IAAM,WAAW,gBAAgB;AAAA,EACtC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/file.d.ts

@@ -0,0 +1,61 @@
+import Component from '@synergy-design-system/components/components/file/file.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynChangeEvent, SynErrorEvent, SynFocusEvent, SynInputEvent } from '@synergy-design-system/components';
+/**
+ * @summary File controls allow selecting an arbitrary number of files for uploading.
+ * @status stable
+ *
+ * @dependency syn-button
+ * @dependency syn-icon
+ *
+ * @slot label - The file control's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the file control.
+ *    Alternatively, you can use the `help-text` attribute.
+ * @slot droparea-icon - Optional droparea icon to use instead of the default.
+ *    Works best with `<syn-icon>`.
+ * @slot trigger - Optional content to be used as trigger instead of the default content.
+ *    Opening the file dialog on click and as well as drag and drop will work for this content.
+ *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
+ *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be
+ *    applied and must be taken care of yourself.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-error - Emitted when multiple files are selected via drag and drop, without
+ * the `multiple` property being set.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart button-wrapper - The wrapper around the button and text value.
+ * @csspart button - The syn-button acting as a file input.
+ * @csspart button__base - The syn-button's exported `base` part.
+ * @csspart value - The chosen files or placeholder text for the file input.
+ * @csspart droparea - The element wrapping the drop zone.
+ * @csspart droparea-background - The background of the drop zone.
+ * @csspart droparea-icon - The container that wraps the icon for the drop zone.
+ * @csspart droparea-value - The text for the drop zone.
+ * @csspart trigger - The container that wraps the trigger.
+ *
+ * @animation file.iconDrop - The animation to use for the file icon
+ * when a file is dropped
+ * @animation file.text.disappear - The disappear animation to use for the file placeholder text
+ * when a file is dropped
+ * @animation file.text.appear - The appear animation to use for the file placeholder text
+ * when a file is dropped
+ */
+export declare const SynFile: import("@lit/react").ReactWebComponent<Component, {
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynChange: EventName<SynChangeEvent>;
+    onSynError: EventName<SynErrorEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+    onSynInput: EventName<SynInputEvent>;
+}>;
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynErrorEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';

package/dist/components/file.js

@@ -0,0 +1,7 @@
+import {
+  SynFile
+} from "../chunks/chunk.3OAYVNPH.js";
+export {
+  SynFile
+};
+//# sourceMappingURL=file.js.map

package/dist/components/file.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/range-tick.d.ts

@@ -0,0 +1,16 @@
+import Component from '@synergy-design-system/components/components/range-tick/range-tick.component.js';
+/**
+ * @summary Ticks visually improve positioning on range sliders.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @slot - The tick's label
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The component's label.
+ * @csspart line - The component's tick line.
+ *
+ * @cssproperty --tick-height - The height of the tick marker.
+ * @cssproperty --tick-label-top - The top offset of the tick label.
+ */
+export declare const SynRangeTick: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/range-tick.js

@@ -0,0 +1,7 @@
+import {
+  SynRangeTick
+} from "../chunks/chunk.7ZGCZSWN.js";
+export {
+  SynRangeTick
+};
+//# sourceMappingURL=range-tick.js.map

package/dist/components/range-tick.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/range.d.ts

@@ -0,0 +1,63 @@
+import Component from '@synergy-design-system/components/components/range/range.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent } from '@synergy-design-system/components';
+/**
+ * @summary Ranges allow the user to select values within a given range using one or two thumbs.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @dependency syn-tooltip
+ *
+ * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the range.
+ * @slot suffix - Used to append a presentational icon or similar element to the range.
+ * @slot help-text - Text that describes how to use the range.
+ * Alternatively, you can use the `help-text` attribute.
+ * @slot ticks - Used to display tick marks at specific intervals along the range.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity
+ * and its constraints aren't satisfied.
+ * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
+ * Use `Event.preventDefault()` to prevent movement.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the input track and ticks.
+ * @csspart track-wrapper - The wrapper for the track.
+ * @csspart track - The inactive track.
+ * @csspart active-track - The active track.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart ticks - The container that wraps the tick marks.
+ * @csspart thumb - The thumb(s) that the user can drag to change the range.
+ *
+ * @cssproperty --thumb-size - The size of a thumb.
+ * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
+ * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
+ * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
+ * @cssproperty --track-color-active - Color of the track representing the current value.
+ * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ * @cssproperty --track-active-offset - The point of origin of the active track,
+ * starting at the left side of the range.
+ */
+export declare const SynRange: import("@lit/react").ReactWebComponent<Component, {
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynChange: EventName<SynChangeEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+    onSynInput: EventName<SynInputEvent>;
+    onSynInvalid: EventName<SynInvalidEvent>;
+    onSynMove: EventName<SynMoveEvent>;
+}>;
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynMoveEvent } from '@synergy-design-system/components';

package/dist/components/range.js

@@ -0,0 +1,7 @@
+import {
+  SynRange
+} from "../chunks/chunk.NDDVIALI.js";
+export {
+  SynRange
+};
+//# sourceMappingURL=range.js.map

package/dist/components/range.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { SynDialog } from './components/dialog.js';
 export { SynDivider } from './components/divider.js';
 export { SynDrawer } from './components/drawer.js';
 export { SynDropdown } from './components/dropdown.js';
+export { SynFile } from './components/file.js';
 export { SynHeader } from './components/header.js';
 export { SynIcon } from './components/icon.js';
 export { SynIconButton } from './components/icon-button.js';
@@ -29,6 +30,8 @@ export { SynProgressRing } from './components/progress-ring.js';
 export { SynRadio } from './components/radio.js';
 export { SynRadioButton } from './components/radio-button.js';
 export { SynRadioGroup } from './components/radio-group.js';
+export { SynRange } from './components/range.js';
+export { SynRangeTick } from './components/range-tick.js';
 export { SynSelect } from './components/select.js';
 export { SynSideNav } from './components/side-nav.js';
 export { SynSpinner } from './components/spinner.js';

package/dist/index.js

@@ -1,9 +1,27 @@
+import {
+  SynTabPanel
+} from "./chunks/chunk.CKKXGN4F.js";
+import {
+  SynTab
+} from "./chunks/chunk.XNCRUJQI.js";
+import {
+  SynTag
+} from "./chunks/chunk.7T7PO2AE.js";
 import {
   SynTextarea
 } from "./chunks/chunk.4YY6TGIA.js";
 import {
   SynTooltip
 } from "./chunks/chunk.BU4SKSAF.js";
+import {
+  SynRadio
+} from "./chunks/chunk.AFCMSVBY.js";
+import {
+  SynRangeTick
+} from "./chunks/chunk.7ZGCZSWN.js";
+import {
+  SynRange
+} from "./chunks/chunk.NDDVIALI.js";
 import {
   SynSelect
 } from "./chunks/chunk.FB24BPQZ.js";
@@ -20,14 +38,8 @@ import {
   SynTabGroup
 } from "./chunks/chunk.VLHZNU3B.js";
 import {
-  SynTabPanel
-} from "./chunks/chunk.CKKXGN4F.js";
-import {
-  SynTab
-} from "./chunks/chunk.XNCRUJQI.js";
-import {
-  SynTag
-} from "./chunks/chunk.7T7PO2AE.js";
+  SynOptgroup
+} from "./chunks/chunk.DLAIDGSD.js";
 import {
   SynOption
 } from "./chunks/chunk.CJKK63W2.js";
@@ -50,8 +62,8 @@ import {
   SynRadioGroup
 } from "./chunks/chunk.PCXGVEBP.js";
 import {
-  SynRadio
-} from "./chunks/chunk.AFCMSVBY.js";
+  SynHeader
+} from "./chunks/chunk.RY2WG25R.js";
 import {
   SynIconButton
 } from "./chunks/chunk.W4YO4ERO.js";
@@ -73,9 +85,6 @@ import {
 import {
   SynNavItem
 } from "./chunks/chunk.Y2KBRBDX.js";
-import {
-  SynOptgroup
-} from "./chunks/chunk.DLAIDGSD.js";
 import {
   SynCard
 } from "./chunks/chunk.JTJSVPDC.js";
@@ -98,8 +107,8 @@ import {
   SynDropdown
 } from "./chunks/chunk.E3427YBK.js";
 import {
-  SynHeader
-} from "./chunks/chunk.RY2WG25R.js";
+  SynFile
+} from "./chunks/chunk.3OAYVNPH.js";
 import {
   SynAccordion
 } from "./chunks/chunk.W6NG3JOO.js";
@@ -136,6 +145,7 @@ export {
   SynDivider,
   SynDrawer,
   SynDropdown,
+  SynFile,
   SynHeader,
   SynIcon,
   SynIconButton,
@@ -153,6 +163,8 @@ export {
   SynRadio,
   SynRadioButton,
   SynRadioGroup,
+  SynRange,
+  SynRangeTick,
   SynSelect,
   SynSideNav,
   SynSpinner,

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.4",
-    "@synergy-design-system/components": "^2.4.3"
+    "@synergy-design-system/components": "^2.6.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -40,12 +40,12 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "2.4.3",
+  "version": "2.6.0",
   "devDependencies": {
     "@types/react": "^18.2.79",
     "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.5.0"
+    "@synergy-design-system/tokens": "^2.7.0"
   }
 }