@lolmath/ui 0.0.0-20240810205542

package/dist/lib/components/search-field/search-field.js

@@ -0,0 +1,97 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var search_field_exports = {};
+__export(search_field_exports, {
+  SearchField: () => SearchField
+});
+module.exports = __toCommonJS(search_field_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cva = require("cva");
+var import_react_aria_components = require("react-aria-components");
+var import_resolve_class_name = require("../../utilities/resolve-class-name.js");
+var import_search_field = __toESM(require("./search-field.module"));
+const searchFieldInput = (0, import_cva.cva)({
+  base: import_search_field.default.input,
+  variants: {
+    isDisabled: {
+      true: import_search_field.default.disabled
+    },
+    isFocused: {
+      true: import_search_field.default.focus
+    }
+  }
+});
+const searchFieldButton = (0, import_cva.cva)({
+  base: import_search_field.default.button,
+  variants: {
+    isHovered: { true: import_search_field.default.hover },
+    isPressed: { true: import_search_field.default.press },
+    isDisabled: { true: import_search_field.default.disabled },
+    isEmpty: { true: import_search_field.default.empty }
+  }
+});
+function SearchField({
+  inputProps = {},
+  borderProps = {},
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.SearchField, { ...props, className: (0, import_cva.cx)(import_search_field.default.searchField, className), children: (values) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_aria_components.Input,
+      {
+        ...inputProps,
+        className: (values2) => searchFieldInput({
+          ...values2,
+          className: (0, import_resolve_class_name.resolveClassName)(inputProps.className, values2)
+        }),
+        type: "text"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_aria_components.Button,
+      {
+        className: (buttonValues) => searchFieldButton({
+          ...buttonValues,
+          isDisabled: values.isDisabled,
+          isEmpty: values.isEmpty
+        }),
+        children: "✕"
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SearchField
+});
+
+//# sourceMappingURL=search-field.js.map

package/dist/lib/components/search-field/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CI;AA9CJ,iBAAwB;AAExB,mCAKO;AACP,gCAAiC;AACjC,0BAAoB;AAEpB,MAAM,uBAAmB,gBAAI;AAAA,EAC5B,MAAM,oBAAAA,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,oBAAAA,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,oBAAAA,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAED,MAAM,wBAAoB,gBAAI;AAAA,EAC7B,MAAM,oBAAAA,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW,EAAE,MAAM,oBAAAA,QAAQ,MAAM;AAAA,IACjC,WAAW,EAAE,MAAM,oBAAAA,QAAQ,MAAM;AAAA,IACjC,YAAY,EAAE,MAAM,oBAAAA,QAAQ,SAAS;AAAA,IACrC,SAAS,EAAE,MAAM,oBAAAA,QAAQ,MAAM;AAAA,EAChC;AACD,CAAC;AAEM,SAAS,YAAY;AAAA,EAC3B,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAGG;AACF,SACC,4CAAC,6BAAAC,aAAA,EAAiB,GAAG,OAAO,eAAW,eAAG,oBAAAD,QAAQ,aAAa,SAAS,GACtE,WAAC,WACD,4EACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC,6BAAAE;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,CAACC,YACX,iBAAiB;AAAA,UAChB,GAAGA;AAAA,UACH,eAAW,4CAAiB,WAAW,WAAWA,OAAM;AAAA,QACzD,CAAC;AAAA,QAEF,MAAK;AAAA;AAAA,IACN;AAAA,IACA;AAAA,MAAC,6BAAAC;AAAA;AAAA,QACA,WAAW,CAAC,iBACX,kBAAkB;AAAA,UACjB,GAAG;AAAA,UACH,YAAY,OAAO;AAAA,UACnB,SAAS,OAAO;AAAA,QACjB,CAAC;AAAA,QAEF;AAAA;AAAA,IAED;AAAA,KACD,GAEF;AAEF","names":["classes","AriaSearchField","AriaInput","values","AriaButton"],"ignoreList":[],"sources":["../../../../src/components/search-field/search-field.tsx"],"sourcesContent":["import { cva, cx } from \"cva\";\nimport type { ComponentProps } from \"react\";\nimport {\n\tButton as AriaButton,\n\tInput as AriaInput,\n\tSearchField as AriaSearchField,\n\ttype SearchFieldProps as AriaSearchFieldProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport classes from \"./search-field.module\";\n\nconst searchFieldInput = cva({\n\tbase: classes.input,\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: classes.focus,\n\t\t},\n\t},\n});\n\nconst searchFieldButton = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tisHovered: { true: classes.hover },\n\t\tisPressed: { true: classes.press },\n\t\tisDisabled: { true: classes.disabled },\n\t\tisEmpty: { true: classes.empty },\n\t},\n});\n\nexport function SearchField({\n\tinputProps = {},\n\tborderProps = {},\n\tchildren,\n\tclassName,\n\t...props\n}: AriaSearchFieldProps & {\n\tinputProps?: ComponentProps<typeof AriaInput>;\n\tborderProps?: ComponentProps<\"div\">;\n}) {\n\treturn (\n\t\t<AriaSearchField {...props} className={cx(classes.searchField, className)}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<AriaInput\n\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\tclassName={(values) =>\n\t\t\t\t\t\t\tsearchFieldInput({\n\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\tclassName: resolveClassName(inputProps.className, values),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t/>\n\t\t\t\t\t<AriaButton\n\t\t\t\t\t\tclassName={(buttonValues) =>\n\t\t\t\t\t\t\tsearchFieldButton({\n\t\t\t\t\t\t\t\t...buttonValues,\n\t\t\t\t\t\t\t\tisDisabled: values.isDisabled,\n\t\t\t\t\t\t\t\tisEmpty: values.isEmpty,\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t✕\n\t\t\t\t\t</AriaButton>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaSearchField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/lib/components/search-field/search-field.module.js

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var search_field_exports = {};
+__export(search_field_exports, {
+  default: () => search_field_default
+});
+module.exports = __toCommonJS(search_field_exports);
+var import_search_field_module = require("./search-field_module.css");
+var search_field_default = { "searchField": "searchField_72b2d", "input": "input_72b2d", "disabled": "disabled_72b2d", "focus": "focus_72b2d", "button": "button_72b2d", "hover": "hover_72b2d", "press": "press_72b2d", "empty": "empty_72b2d" };
+
+//# sourceMappingURL=search-field.module.js.map

package/dist/lib/components/search-field/search-field.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAO;AAA4B,IAAO,uBAAQ,EAAC,eAAc,qBAAoB,SAAQ,eAAc,YAAW,kBAAiB,SAAQ,eAAc,UAAS,gBAAe,SAAQ,eAAc,SAAQ,eAAc,SAAQ,cAAa","names":[],"ignoreList":[],"sources":["../../../../src/components/search-field/search-field.module.css"],"sourcesContent":["import \"./search-field_module.css\";export default {\"searchField\":\"searchField_72b2d\",\"input\":\"input_72b2d\",\"disabled\":\"disabled_72b2d\",\"focus\":\"focus_72b2d\",\"button\":\"button_72b2d\",\"hover\":\"hover_72b2d\",\"press\":\"press_72b2d\",\"empty\":\"empty_72b2d\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/lib/components/search-field/search-field_module.css

@@ -0,0 +1,78 @@
+@layer lol {
+	.searchField_72b2d {
+		display: grid;
+		grid-template-areas:
+			"label label"
+			"input button"
+			"help  help";
+		grid-template-columns: 1fr auto;
+		align-items: center;
+
+		color: var(--lol-color-gold-100);
+	}
+
+	.input_72b2d {
+		background: url('../../assets/search.c15f1e1d.png') no-repeat 5px center,
+			var(--lol-search-field-background-gradient) padding-box,
+			var(--lol-search-field-border-gradient) border-box;
+
+		--lol-search-field-border-gradient: var(--lol-gradient-gold);
+		--lol-search-field-background-gradient: var(--lol-gradient-hextech-black);
+
+		background-size: 16px, auto, auto;
+		border: 1px solid transparent;
+		grid-area: input;
+		padding: 0.5rem 2.5rem 0.5rem 1.5rem;
+		margin: 0;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		color: var(--field-text-color);
+		outline: none;
+		font-family: var(--lol-font-family-spiegel);
+		font-weight: 500;
+		letter-spacing: 0.025em;
+	}
+
+		.input_72b2d::-webkit-search-cancel-button,
+		.input_72b2d::-webkit-search-decoration {
+			-webkit-appearance: none;
+		}
+
+		.input_72b2d.disabled_72b2d {
+			--lol-search-field-border-gradient: var(--lol-gradient-disabled);
+			color: var(--lol-color-grey-150);
+		}
+
+		.input_72b2d.focus_72b2d {
+			--lol-search-field-border-gradient: var(--lol-gradient-gold-hover);
+			--lol-search-field-background-gradient: var(--lol-gradient-grey-focus);
+		}
+
+	.button_72b2d {
+		grid-area: button;
+
+		font-size: 0.75rem;
+		line-height: 1rem;
+		font-weight: 900;
+
+		margin-left: -2.5rem;
+		width: 2.5rem;
+		align-self: stretch;
+		text-align: center;
+
+		color: var(--lol-color-gold-300);
+	}
+
+		.button_72b2d.hover_72b2d {
+			color: var(--lol-color-gold-100);
+		}
+
+		.button_72b2d.press_72b2d {
+			color: var(--lol-color-gold-600);
+		}
+
+		.button_72b2d.empty_72b2d,
+		.button_72b2d.disabled_72b2d {
+			display: none;
+		}
+}

package/dist/lib/components/select/select.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import type { SelectProps as AriaSelectProps, ListBoxItemProps } from "react-aria-components";
+interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, "children"> {
+    label?: string;
+    description?: string;
+    errorMessage?: string;
+    children?: ReactNode | ((item: T) => ReactNode);
+}
+export declare function Select<T extends object>({ description, errorMessage, children, className, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Item({ className, ...props }: ListBoxItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/select/select.js

@@ -0,0 +1,104 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var select_exports = {};
+__export(select_exports, {
+  Item: () => Item,
+  Select: () => Select
+});
+module.exports = __toCommonJS(select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cva = require("cva");
+var import_react_aria_components = require("react-aria-components");
+var import_resolve_class_name = require("../../utilities/resolve-class-name.js");
+var import_select = __toESM(require("./select.module"));
+const selectButtonBorder = (0, import_cva.cva)({
+  base: import_select.default.button,
+  variants: {
+    isHovered: { true: import_select.default.hover },
+    isPressed: { true: import_select.default.press },
+    isOpen: { true: import_select.default.open },
+    isDisabled: { true: import_select.default.disabled }
+  }
+});
+function Select({
+  description,
+  errorMessage,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.Select,
+    {
+      ...props,
+      className: (values) => (0, import_resolve_class_name.resolveClassName)(className, values),
+      children: (values) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_aria_components.Button,
+          {
+            className: (buttonValues) => selectButtonBorder({ ...buttonValues, isOpen: values.isOpen }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.SelectValue, {})
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Text, { slot: "description", children: description }),
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Text, { slot: "errorMessage", children: errorMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Popover, { offset: 4, className: "w-[--trigger-width]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ListBox, { className: import_select.default.listBox, children }) })
+      ] })
+    }
+  );
+}
+const item = (0, import_cva.cva)({
+  base: import_select.default.item,
+  variants: {
+    isHovered: { true: import_select.default.hover },
+    isPressed: { true: import_select.default.press },
+    isSelected: { true: import_select.default.selected }
+  }
+});
+function Item({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.ListBoxItem,
+    {
+      ...props,
+      className: (values) => {
+        return item({
+          ...values,
+          className: (0, import_resolve_class_name.resolveClassName)(className, values)
+        });
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Item,
+  Select
+});
+
+//# sourceMappingURL=select.js.map

package/dist/lib/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDI;AAjDJ,iBAAoB;AAMpB,mCAQO;AACP,gCAAiC;AACjC,oBAAoB;AAEpB,MAAM,yBAAqB,gBAAI;AAAA,EAC9B,MAAM,cAAAA,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW,EAAE,MAAM,cAAAA,QAAQ,MAAM;AAAA,IACjC,WAAW,EAAE,MAAM,cAAAA,QAAQ,MAAM;AAAA,IACjC,QAAQ,EAAE,MAAM,cAAAA,QAAQ,KAAK;AAAA,IAC7B,YAAY,EAAE,MAAM,cAAAA,QAAQ,SAAS;AAAA,EACtC;AACD,CAAC;AAUM,SAAS,OAAyB;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAmB;AAClB,SACC;AAAA,IAAC,6BAAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,eAAW,4CAAiB,WAAW,MAAM;AAAA,MAExD,WAAC,WACD,4EACC;AAAA;AAAA,UAAC,6BAAAC;AAAA;AAAA,YACA,WAAW,CAAC,iBACX,mBAAmB,EAAE,GAAG,cAAc,QAAQ,OAAO,OAAO,CAAC;AAAA,YAG9D,sDAAC,6BAAAC,aAAA,EAAgB;AAAA;AAAA,QAClB;AAAA,QACC,eAAe,4CAAC,6BAAAC,MAAA,EAAS,MAAK,eAAe,uBAAY;AAAA,QACzD,gBACA,4CAAC,6BAAAA,MAAA,EAAS,MAAK,gBAAgB,wBAAa;AAAA,QAE7C,4CAAC,6BAAAC,SAAA,EAAY,QAAQ,GAAG,WAAU,uBACjC,sDAAC,6BAAAC,SAAA,EAAY,WAAW,cAAAN,QAAQ,SAAU,UAAS,GACpD;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,MAAM,WAAO,gBAAI;AAAA,EAChB,MAAM,cAAAA,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW,EAAE,MAAM,cAAAA,QAAQ,MAAM;AAAA,IACjC,WAAW,EAAE,MAAM,cAAAA,QAAQ,MAAM;AAAA,IACjC,YAAY,EAAE,MAAM,cAAAA,QAAQ,SAAS;AAAA,EACtC;AACD,CAAC;AAEM,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC/D,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACtB,eAAO,KAAK;AAAA,UACX,GAAG;AAAA,UACH,eAAW,4CAAiB,WAAW,MAAM;AAAA,QAC9C,CAAC;AAAA,MACF;AAAA;AAAA,EACD;AAEF","names":["classes","AriaSelect","AriaButton","AriaSelectValue","AriaText","AriaPopover","AriaListBox"],"ignoreList":[],"sources":["../../../../src/components/select/select.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport type { ReactNode } from \"react\";\nimport type {\n\tSelectProps as AriaSelectProps,\n\tListBoxItemProps,\n} from \"react-aria-components\";\nimport {\n\tButton as AriaButton,\n\tListBox as AriaListBox,\n\tPopover as AriaPopover,\n\tSelect as AriaSelect,\n\tSelectValue as AriaSelectValue,\n\tText as AriaText,\n\tListBoxItem,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport classes from \"./select.module\";\n\nconst selectButtonBorder = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tisHovered: { true: classes.hover },\n\t\tisPressed: { true: classes.press },\n\t\tisOpen: { true: classes.open },\n\t\tisDisabled: { true: classes.disabled },\n\t},\n});\n\ninterface SelectProps<T extends object>\n\textends Omit<AriaSelectProps<T>, \"children\"> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n\tchildren?: ReactNode | ((item: T) => ReactNode);\n}\n\nexport function Select<T extends object>({\n\tdescription,\n\terrorMessage,\n\tchildren,\n\tclassName,\n\t...props\n}: SelectProps<T>) {\n\treturn (\n\t\t<AriaSelect\n\t\t\t{...props}\n\t\t\tclassName={(values) => resolveClassName(className, values)}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t<AriaButton\n\t\t\t\t\t\tclassName={(buttonValues) =>\n\t\t\t\t\t\t\tselectButtonBorder({ ...buttonValues, isOpen: values.isOpen })\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AriaSelectValue />\n\t\t\t\t\t</AriaButton>\n\t\t\t\t\t{description && <AriaText slot=\"description\">{description}</AriaText>}\n\t\t\t\t\t{errorMessage && (\n\t\t\t\t\t\t<AriaText slot=\"errorMessage\">{errorMessage}</AriaText>\n\t\t\t\t\t)}\n\t\t\t\t\t<AriaPopover offset={4} className=\"w-[--trigger-width]\">\n\t\t\t\t\t\t<AriaListBox className={classes.listBox}>{children}</AriaListBox>\n\t\t\t\t\t</AriaPopover>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaSelect>\n\t);\n}\n\nconst item = cva({\n\tbase: classes.item,\n\tvariants: {\n\t\tisHovered: { true: classes.hover },\n\t\tisPressed: { true: classes.press },\n\t\tisSelected: { true: classes.selected },\n\t},\n});\n\nexport function Item({ className, ...props }: ListBoxItemProps) {\n\treturn (\n\t\t<ListBoxItem\n\t\t\t{...props}\n\t\t\tclassName={(values) => {\n\t\t\t\treturn item({\n\t\t\t\t\t...values,\n\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t});\n\t\t\t}}\n\t\t/>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/lib/components/select/select.module.js

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var select_exports = {};
+__export(select_exports, {
+  default: () => select_default
+});
+module.exports = __toCommonJS(select_exports);
+var import_select_module = require("./select_module.css");
+var select_default = { "button": "button_de70c", "open": "open_de70c", "press": "press_de70c", "hover": "hover_de70c", "disabled": "disabled_de70c", "listBox": "listBox_de70c", "item": "item_de70c", "selected": "selected_de70c" };
+
+//# sourceMappingURL=select.module.js.map

package/dist/lib/components/select/select.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAO;AAAsB,IAAO,iBAAQ,EAAC,UAAS,gBAAe,QAAO,cAAa,SAAQ,eAAc,SAAQ,eAAc,YAAW,kBAAiB,WAAU,iBAAgB,QAAO,cAAa,YAAW,iBAAgB","names":[],"ignoreList":[],"sources":["../../../../src/components/select/select.module.css"],"sourcesContent":["import \"./select_module.css\";export default {\"button\":\"button_de70c\",\"open\":\"open_de70c\",\"press\":\"press_de70c\",\"hover\":\"hover_de70c\",\"disabled\":\"disabled_de70c\",\"listBox\":\"listBox_de70c\",\"item\":\"item_de70c\",\"selected\":\"selected_de70c\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/lib/components/select/select_module.css

@@ -0,0 +1,82 @@
+@layer lol {
+	.button_de70c {
+		font-family: var(--lol-font-family-spiegel);
+		display: inline-block;
+		width: 200px;
+		outline: none;
+
+		border: 1px solid transparent;
+
+		color: var(--lol-color-grey-100);
+		padding: 0.375rem 1.5rem 0.375rem 0.5rem;
+
+		font-size: 0.75rem;
+		font-weight: 500;
+		line-height: 1rem;
+		letter-spacing: 0.025em;
+		text-align: left;
+
+		background: var(--lol-select-image) no-repeat right 0.5rem center,
+			var(--lol-select-background-gradient) padding-box,
+			var(--lol-select-border-gradient) border-box;
+
+		--lol-select-border-gradient: var(--lol-gradient-gold);
+		--lol-select-background-gradient: var(--lol-gradient-hextech-black);
+
+		--lol-select-image: url('../../assets/closed.484c8084.png');
+	}
+
+		.button_de70c.open_de70c {
+			--lol-select-image: url('../../assets/open.a8643ee6.png');
+			color: var(--lol-color-gold-600);
+			--lol-select-background-gradient: var(--lol-gradient-grey-300);
+			--lol-select-border-gradient: var(--lol-gradient-gold-press);
+		}
+
+		.button_de70c.press_de70c {
+			--lol-select-border-gradient: var(--lol-gradient-gold-press);
+		}
+
+		.button_de70c.hover_de70c {
+			--lol-select-border-gradient: var(--lol-gradient-gold-hover);
+		}
+
+		.button_de70c.disabled_de70c {
+			--lol-select-border-gradient: var(--lol-gradient-disabled);
+		}
+
+	.listBox_de70c {
+		background-color: var(--lol-color-hextech-black);
+		border: 1px solid var(--lol-color-gold-600);
+		outline: none;
+	}
+
+
+	.item_de70c {
+		border-bottom: 1px solid var(--lol-color-grey-300);
+		color: var(--lol-color-gold-300);
+		font-size: var(--lol-font-size-sm);
+		font-weight: var(--lol-font-weight-sm);
+		line-height: var(--lol-line-height-sm);
+		letter-spacing: var(--lol-letter-spacing-sm);
+		padding: 0.375rem 0.5rem;
+		outline: none;
+		cursor: pointer;
+	}
+
+		.item_de70c.hover_de70c {
+			background-color: var(--lol-color-grey-300);
+			color: var(--lol-color-gold-100);
+		}
+
+		.item_de70c.press_de70c {
+			background-color: color-mix(in srgb, var(--lol-color-grey-300), transparent 50%);
+			color: var(--lol-color-gold-600);
+		}
+
+		.item_de70c.selected_de70c {
+			background-image: url(../../assets/dropdown-check.bed4dc45.png);
+			background-position: right 0.5rem center;
+			background-repeat: no-repeat;
+		}
+}

package/dist/lib/components/slider/slider.d.ts

@@ -0,0 +1,8 @@
+import type { SliderProps as AriaSliderProps, SliderOutputProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps } from "react-aria-components";
+export declare function Slider<T extends number | number[]>({ children, className, sliderThumbProps, sliderTrackProps, sliderTrackBackgroundClassName, sliderTrackForegroundClassName, ...props }: AriaSliderProps<T> & {
+    sliderTrackProps?: SliderTrackProps;
+    sliderThumbProps?: SliderThumbProps;
+    sliderTrackBackgroundClassName?: string | ((values: SliderTrackRenderProps) => string);
+    sliderTrackForegroundClassName?: string | ((values: SliderTrackRenderProps) => string);
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SliderOutput(props: SliderOutputProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/slider/slider.js

@@ -0,0 +1,176 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var slider_exports = {};
+__export(slider_exports, {
+  Slider: () => Slider,
+  SliderOutput: () => SliderOutput
+});
+module.exports = __toCommonJS(slider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cva = require("cva");
+var import_react_aria_components = require("react-aria-components");
+var import_resolve_class_name = require("../../utilities/resolve-class-name.js");
+var import_text = __toESM(require("../typography/text.module"));
+var import_slider = __toESM(require("./slider.module"));
+const sliderTrackForeground = (0, import_cva.cva)({
+  base: import_slider.default.foreground,
+  variants: {
+    isDisabled: {
+      true: import_slider.default.disabled
+    }
+  }
+});
+const sliderThumb = (0, import_cva.cva)({
+  base: import_slider.default.thumb,
+  variants: {
+    isThumbDragging: {
+      true: import_slider.default.thumbDragging
+    },
+    isOtherThumbDragging: {
+      true: import_slider.default.otherThumbDragging
+    },
+    isDisabled: {
+      true: import_slider.default.disabled
+    },
+    isHovered: {
+      true: import_slider.default.hovered
+    }
+  }
+});
+function Slider({
+  children,
+  className,
+  sliderThumbProps = {},
+  sliderTrackProps = {},
+  sliderTrackBackgroundClassName,
+  sliderTrackForegroundClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.Slider,
+    {
+      ...props,
+      className: (values) => (0, import_resolve_class_name.resolveClassName)(className, values),
+      children: (values) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        typeof children === "function" ? children(values) : children,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_aria_components.SliderTrack,
+          {
+            ...sliderTrackProps,
+            className: (sliderTrackRenderProps) => (0, import_cva.cx)(
+              import_slider.default.track,
+              (0, import_resolve_class_name.resolveClassName)(
+                sliderTrackProps.className,
+                sliderTrackRenderProps
+              )
+            ),
+            children: (values2) => {
+              const left = values2.state.values.length === 1 ? 0 : values2.state.getThumbPercent(0) * 100;
+              const width = values2.state.values.length === 1 ? values2.state.getThumbPercent(0) * 100 : (values2.state.getThumbPercent(1) - values2.state.getThumbPercent(0)) * 100;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: (0, import_cva.cx)(
+                      import_slider.default.background,
+                      (0, import_resolve_class_name.resolveClassName)(sliderTrackBackgroundClassName, values2)
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: sliderTrackForeground({
+                      ...values2.state,
+                      className: (0, import_resolve_class_name.resolveClassName)(
+                        sliderTrackForegroundClassName,
+                        values2
+                      )
+                    }),
+                    style: { left: `${left}%`, width: `${width}%` }
+                  }
+                ),
+                values2.state.values.map((_, i) => {
+                  const zIndex = values2.state.getThumbPercent(i === 1 ? 0 : 1) === (i === 1 ? 0 : 1) ? 2 : void 0;
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_aria_components.SliderThumb,
+                    {
+                      index: i,
+                      ...sliderThumbProps,
+                      className: (sliderThumbRenderProps) => {
+                        sliderThumbRenderProps.isDragging;
+                        return sliderThumb({
+                          isDisabled: sliderThumbRenderProps.isDisabled,
+                          isThumbDragging: sliderThumbRenderProps.state.isThumbDragging(i),
+                          isOtherThumbDragging: sliderThumbRenderProps.state.isThumbDragging(
+                            i === 1 ? 0 : 1
+                          ),
+                          className: (0, import_resolve_class_name.resolveClassName)(
+                            sliderThumbProps.className,
+                            sliderThumbRenderProps
+                          )
+                        });
+                      },
+                      style: {
+                        zIndex
+                      }
+                    },
+                    i
+                  ) });
+                })
+              ] });
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+function SliderOutput(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.SliderOutput,
+    {
+      className: (values) => (0, import_cva.cx)(
+        import_text.default.text,
+        import_text.default.sm,
+        import_text.default.grey100,
+        (0, import_resolve_class_name.resolveClassName)(props.className, values)
+      ),
+      children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" – "),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slider,
+  SliderOutput
+});
+
+//# sourceMappingURL=slider.js.map

package/dist/lib/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":["classes","AriaSlider","AriaSliderTrack","values","AriaSliderThumb","AriaSliderOutput","textClasses"],"ignoreList":[],"sources":["../../../../src/components/slider/slider.tsx"],"sourcesContent":["import { cva, cx } from \"cva\";\nimport type {\n\tSliderProps as AriaSliderProps,\n\tSliderOutputProps,\n\tSliderThumbProps,\n\tSliderTrackProps,\n\tSliderTrackRenderProps,\n} from \"react-aria-components\";\nimport {\n\tSlider as AriaSlider,\n\tSliderOutput as AriaSliderOutput,\n\tSliderThumb as AriaSliderThumb,\n\tSliderTrack as AriaSliderTrack,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport textClasses from \"../typography/text.module\";\nimport classes from \"./slider.module\";\n\nconst sliderTrackForeground = cva({\n\tbase: classes.foreground,\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t},\n});\n\nconst sliderThumb = cva({\n\tbase: classes.thumb,\n\tvariants: {\n\t\tisThumbDragging: {\n\t\t\ttrue: classes.thumbDragging,\n\t\t},\n\t\tisOtherThumbDragging: {\n\t\t\ttrue: classes.otherThumbDragging,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisHovered: {\n\t\t\ttrue: classes.hovered,\n\t\t},\n\t},\n});\n\nexport function Slider<T extends number | number[]>({\n\tchildren,\n\tclassName,\n\tsliderThumbProps = {},\n\tsliderTrackProps = {},\n\tsliderTrackBackgroundClassName,\n\tsliderTrackForegroundClassName,\n\t...props\n}: AriaSliderProps<T> & {\n\tsliderTrackProps?: SliderTrackProps;\n\tsliderThumbProps?: SliderThumbProps;\n\tsliderTrackBackgroundClassName?:\n\t\t| string\n\t\t| ((values: SliderTrackRenderProps) => string);\n\tsliderTrackForegroundClassName?:\n\t\t| string\n\t\t| ((values: SliderTrackRenderProps) => string);\n}) {\n\treturn (\n\t\t<AriaSlider<T>\n\t\t\t{...props}\n\t\t\tclassName={(values) => resolveClassName(className, values)}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<AriaSliderTrack\n\t\t\t\t\t\t{...sliderTrackProps}\n\t\t\t\t\t\tclassName={(sliderTrackRenderProps) =>\n\t\t\t\t\t\t\tcx(\n\t\t\t\t\t\t\t\tclasses.track,\n\t\t\t\t\t\t\t\tresolveClassName(\n\t\t\t\t\t\t\t\t\tsliderTrackProps.className,\n\t\t\t\t\t\t\t\t\tsliderTrackRenderProps,\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(values) => {\n\t\t\t\t\t\t\tconst left =\n\t\t\t\t\t\t\t\tvalues.state.values.length === 1\n\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t: values.state.getThumbPercent(0) * 100;\n\n\t\t\t\t\t\t\tconst width =\n\t\t\t\t\t\t\t\tvalues.state.values.length === 1\n\t\t\t\t\t\t\t\t\t? values.state.getThumbPercent(0) * 100\n\t\t\t\t\t\t\t\t\t: (values.state.getThumbPercent(1) -\n\t\t\t\t\t\t\t\t\t\t\tvalues.state.getThumbPercent(0)) *\n\t\t\t\t\t\t\t\t\t\t100;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\t\t\t\t\tclasses.background,\n\t\t\t\t\t\t\t\t\t\t\tresolveClassName(sliderTrackBackgroundClassName, values),\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={sliderTrackForeground({\n\t\t\t\t\t\t\t\t\t\t\t...values.state,\n\t\t\t\t\t\t\t\t\t\t\tclassName: resolveClassName(\n\t\t\t\t\t\t\t\t\t\t\t\tsliderTrackForegroundClassName,\n\t\t\t\t\t\t\t\t\t\t\t\tvalues,\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\tstyle={{ left: `${left}%`, width: `${width}%` }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{values.state.values.map((_, i) => {\n\t\t\t\t\t\t\t\t\t\tconst zIndex =\n\t\t\t\t\t\t\t\t\t\t\tvalues.state.getThumbPercent(i === 1 ? 0 : 1) ===\n\t\t\t\t\t\t\t\t\t\t\t(i === 1 ? 0 : 1)\n\t\t\t\t\t\t\t\t\t\t\t\t? 2\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t<AriaSliderThumb\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{...sliderThumbProps}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={(sliderThumbRenderProps) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbRenderProps.isDragging;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn sliderThumb({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisDisabled: sliderThumbRenderProps.isDisabled,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisThumbDragging:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbRenderProps.state.isThumbDragging(i),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisOtherThumbDragging:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbRenderProps.state.isThumbDragging(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti === 1 ? 0 : 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: resolveClassName(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbProps.className,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbRenderProps,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tzIndex,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}}\n\t\t\t\t\t</AriaSliderTrack>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaSlider>\n\t);\n}\n\nexport function SliderOutput(props: SliderOutputProps) {\n\treturn (\n\t\t<AriaSliderOutput\n\t\t\tclassName={(values) =>\n\t\t\t\tcx(\n\t\t\t\t\ttextClasses.text,\n\t\t\t\t\ttextClasses.sm,\n\t\t\t\t\ttextClasses.grey100,\n\t\t\t\t\tresolveClassName(props.className, values),\n\t\t\t\t)\n\t\t\t}\n\t\t\tchildren={(sliderRenderProps) =>\n\t\t\t\tsliderRenderProps.state.values\n\t\t\t\t\t.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i))\n\t\t\t\t\t.join(\" – \")\n\t\t\t}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}