@onepercentio/one-ui 1.3.3 → 1.3.5

package/dist/components/ProgressTexts/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ProgressTexts_1 = require("./ProgressTexts");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ProgressTexts_1).default; } });
+__exportStar(require("./ProgressTexts"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/ProgressTexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ProgressTexts/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,iDAA0C;AAAjC,yHAAA,OAAO,OAAA;AAChB,kDAAgC"}

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A custom radio button component that allows users to select one option from a group.
+ * It displays a label and can be customized with different sizes and styling.
+ */
+import React, { PropsWithChildren } from "react";
+export default function Radio({ checked, onToggle, label, className, size, groupId, value, ...props }: PropsWithChildren<{
+    checked: boolean;
+    onToggle: (checked: boolean) => void;
+    label: React.ReactNode;
+    className?: string;
+    size?: number;
+    groupId: string;
+    value: string;
+    "data-testid"?: string;
+}> & React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const Radio_module_scss_1 = __importDefault(require("./Radio.module.scss"));
+const Checkmark_1 = require("./variants/Checkmark/Checkmark");
+function Radio(_a) {
+    var { checked, onToggle, label, className = "", size = undefined, groupId, value } = _a, props = __rest(_a, ["checked", "onToggle", "label", "className", "size", "groupId", "value"]);
+    const Checkbox = (0, OneUIProvider_1.useOneUIConfig)("component.radio.Component", Checkmark_1.Checkmark);
+    return ((0, jsx_runtime_1.jsxs)("label", { className: `${Radio_module_scss_1.default.container} ${className}`, style: { fontSize: size }, onClick: (e) => {
+            onToggle(!checked);
+            e.preventDefault();
+        }, children: [(0, jsx_runtime_1.jsx)(Checkbox, Object.assign({ checked: checked, hasContent: !!label }, props)), (0, jsx_runtime_1.jsx)("input", { type: "radio", name: groupId, id: value, value: value, checked: checked, readOnly: true, "data-testid": props["data-testid"] }), label] }));
+}
+exports.default = Radio;
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAKA,+DAA6D;AAC7D,4EAAyC;AACzC,8DAA2D;AAE3D,SAAwB,KAAK,CAAC,EAsB3B;QAtB2B,EAC5B,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,SAAS,EAChB,OAAO,EACP,KAAK,OAeJ,EAdE,KAAK,cARoB,yEAS7B,CADS;IAeR,MAAM,QAAQ,GAAG,IAAA,8BAAc,EAC7B,2BAA2B,EAC3B,qBAAgB,CACV,CAAC;IAET,OAAO,CACL,mCACE,SAAS,EAAE,GAAG,2BAAM,CAAC,SAAS,IAAI,SAAS,EAAE,EAC7C,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EACzB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;YACnB,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,aAED,uBAAC,QAAQ,kBAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,IAAM,KAAK,EAAI,EAC9D,kCACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,OAAO,EACb,EAAE,EAAE,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,uBACK,KAAK,CAAC,aAAa,CAAC,GACjC,EACD,KAAK,IACA,CACT,CAAC;AACJ,CAAC;AAlDD,wBAkDC"}

package/dist/components/Radio/Radio.module.scss

@@ -0,0 +1,20 @@
+@use "../../assets/styles/index.scss" as *;
+
+.container {
+  display: flex;
+  line-height: 1.5em;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  input {
+    max-width: 0px;
+    max-height: 0px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
+  > span:first-child {
+    flex-shrink: 0;
+  }
+}

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Radio";
+export * from "./Radio";

package/dist/components/Radio/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Radio_1).default; } });
+__exportStar(require("./Radio"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,iCAAkC;AAAzB,iHAAA,OAAO,OAAA;AAChB,0CAAwB"}

package/dist/components/Radio/variants/Checkmark/Checkmark.d.ts

@@ -0,0 +1,7 @@
+export type CheckmarkProps = {
+    checked: boolean;
+    hasContent?: boolean;
+    className?: string;
+};
+export default function Checkmark({ checked, hasContent, className, }: CheckmarkProps): import("react/jsx-runtime").JSX.Element;
+export { Checkmark };

package/dist/components/Radio/variants/Checkmark/Checkmark.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkmark = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkmark_module_scss_1 = __importDefault(require("./Checkmark.module.scss"));
+function Checkmark({ checked, hasContent = false, className = "", }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: `${Checkmark_module_scss_1.default.checkmark} ${checked ? Checkmark_module_scss_1.default.checked : ""} ${hasContent ? `${Checkmark_module_scss_1.default.wContent}` : ""} ${className}` }));
+}
+exports.default = Checkmark;
+exports.Checkmark = Checkmark;
+//# sourceMappingURL=Checkmark.js.map

package/dist/components/Radio/variants/Checkmark/Checkmark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkmark.js","sourceRoot":"","sources":["../../../../../src/components/Radio/variants/Checkmark/Checkmark.tsx"],"names":[],"mappings":";;;;;;;AACA,oFAA6C;AAQ7C,SAAwB,SAAS,CAAC,EAChC,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,EAAE,GACC;IACf,OAAO,CACL,iCACE,SAAS,EAAE,GAAG,+BAAM,CAAC,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,+BAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAC7D,UAAU,CAAC,CAAC,CAAC,GAAG,+BAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EACtC,IAAI,SAAS,EAAE,GACf,CACH,CAAC;AACJ,CAAC;AAZD,4BAYC;AAEQ,8BAAS"}

package/dist/components/Radio/variants/Checkmark/Checkmark.module.scss

@@ -0,0 +1,24 @@
+@use "../../../../assets/styles/index.scss" as *;
+
+.checkmark {
+  visibility: visible;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 0.8em;
+  background-image: url("../../../../assets/img/svg/checkbox.svg");
+  background-color: transparent;
+  transition: background-color 250ms, border 250ms, box-shadow 250ms;
+  border: 1px solid rgb(40, 43, 53);
+  box-shadow: 0px 0px 0px -4px $digitalBlue;
+  flex-shrink: 0;
+
+  &.wContent {
+    margin-right: 0.8em;
+  }
+
+  &.checked {
+    background-color: $digitalBlue;
+    border: 1px solid $digitalBlue;
+    box-shadow: 0px 0px 12px -4px $digitalBlue;
+  }
+}

package/dist/components/Radio/variants/Checkmark/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Checkmark";
+export * from "./Checkmark";

package/dist/components/Radio/variants/Checkmark/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Checkmark_1 = require("./Checkmark");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Checkmark_1).default; } });
+__exportStar(require("./Checkmark"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Radio/variants/Checkmark/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Radio/variants/Checkmark/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,yCAAsC;AAA7B,qHAAA,OAAO,OAAA;AAChB,8CAA4B"}

package/dist/components/Radio/variants/Generic/Generic.d.ts

@@ -0,0 +1,7 @@
+export type GenericProps = {
+    checked: boolean;
+    hasContent?: boolean;
+    className?: string;
+};
+export default function Generic({ checked, hasContent, className, }: GenericProps): import("react/jsx-runtime").JSX.Element;
+export { Generic };

package/dist/components/Radio/variants/Generic/Generic.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Generic = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Generic_module_scss_1 = __importDefault(require("./Generic.module.scss"));
+function Generic({ checked, hasContent = false, className = "", }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: `${Generic_module_scss_1.default.generic} ${checked ? Generic_module_scss_1.default.checked : ""} ${hasContent ? `${Generic_module_scss_1.default.wContent}` : ""} ${className}`, children: (0, jsx_runtime_1.jsx)("span", { className: Generic_module_scss_1.default.inner }) }));
+}
+exports.default = Generic;
+exports.Generic = Generic;
+//# sourceMappingURL=Generic.js.map

package/dist/components/Radio/variants/Generic/Generic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Generic.js","sourceRoot":"","sources":["../../../../../src/components/Radio/variants/Generic/Generic.tsx"],"names":[],"mappings":";;;;;;;AACA,gFAA2C;AAQ3C,SAAwB,OAAO,CAAC,EAC9B,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,EAAE,GACD;IACb,OAAO,CACL,iCACE,SAAS,EAAE,GAAG,6BAAM,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,6BAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAC3D,UAAU,CAAC,CAAC,CAAC,GAAG,6BAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EACtC,IAAI,SAAS,EAAE,YAEf,iCAAM,SAAS,EAAE,6BAAM,CAAC,KAAK,GAAI,GAC5B,CACR,CAAC;AACJ,CAAC;AAdD,0BAcC;AAEQ,0BAAO"}

package/dist/components/Radio/variants/Generic/Generic.module.scss

@@ -0,0 +1,38 @@
+@use "../../../../assets/styles/index.scss" as *;
+
+.generic {
+  visibility: visible;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 0.8em;
+  position: relative;
+  background-color: transparent;
+  border: 1px solid rgb(40, 43, 53);
+  flex-shrink: 0;
+
+  &.wContent {
+    margin-right: 0.8em;
+  }
+
+  > .inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 90%;
+    height: 90%;
+    margin-top: -45%;
+    margin-left: -45%;
+    border-radius: 0.8em;
+    background-color: $digitalBlue;
+    opacity: 0;
+    transform: scale(0.1);
+    transition: background-color 250ms, border 250ms, box-shadow 250ms, opacity 150ms ease-in-out, transform 150ms ease-in-out;
+  }
+
+  &.checked {
+    .inner {
+      opacity: 1;
+      transform: scale(0.7);
+    }
+  }
+}

package/dist/components/Radio/variants/Generic/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Generic";
+export * from "./Generic";

package/dist/components/Radio/variants/Generic/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Generic_1 = require("./Generic");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Generic_1).default; } });
+__exportStar(require("./Generic"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/Radio/variants/Generic/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Radio/variants/Generic/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,qCAAoC;AAA3B,mHAAA,OAAO,OAAA;AAChB,4CAA0B"}

package/dist/components/SectionContainer/SectionContainer.d.ts

@@ -0,0 +1,19 @@
+import React, { JSX } from "react";
+export declare function createId(...args: string[]): string;
+/**
+ * This component wraps a section and limits the width of it's content as well as requiring an id to reference to this section
+ **/
+/**
+ * A reusable container component that wraps content with consistent styling
+ * and optional decorative elements. It helps organize page sections with
+ * controlled width and visual enhancements.
+ */
+declare const SectionContainer: React.ForwardRefExoticComponent<{
+    decoration?: "dark" | "light" | undefined;
+    section?: string | undefined;
+    className?: string | undefined;
+    onClick?: JSX.IntrinsicElements["div"]["onClick"];
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SectionContainer;

package/dist/components/SectionContainer/SectionContainer.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createId = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SectionContainer_module_scss_1 = __importDefault(require("./SectionContainer.module.scss"));
+function createId(...args) {
+    return args.join("-");
+}
+exports.createId = createId;
+function _SectionContainer({ children, section, className = "", decoration, onClick }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onClick: onClick, className: `${SectionContainer_module_scss_1.default.root} ${className}`, id: section, children: (0, jsx_runtime_1.jsxs)("div", { className: `${SectionContainer_module_scss_1.default.content} ${decoration ? SectionContainer_module_scss_1.default.decorated : ""}`, children: [children, decoration && ((0, jsx_runtime_1.jsx)("div", { className: `${SectionContainer_module_scss_1.default.decoration} ${SectionContainer_module_scss_1.default[decoration]}` }))] }) }));
+}
+/**
+ * This component wraps a section and limits the width of it's content as well as requiring an id to reference to this section
+ **/
+/**
+ * A reusable container component that wraps content with consistent styling
+ * and optional decorative elements. It helps organize page sections with
+ * controlled width and visual enhancements.
+ */
+const SectionContainer = (0, react_1.forwardRef)(_SectionContainer);
+exports.default = SectionContainer;
+//# sourceMappingURL=SectionContainer.js.map

package/dist/components/SectionContainer/SectionContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainer.js","sourceRoot":"","sources":["../../../src/components/SectionContainer/SectionContainer.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAOe;AACf,kGAAoD;AAGpD,SAAgB,QAAQ,CAAC,GAAG,IAAc;IACxC,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAFD,4BAEC;AAQD,SAAS,iBAAiB,CACxB,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,GAAG,EAAE,EAAE,UAAU,EAAE,OAAO,EAAY,EACpE,GAAiC;IAEjC,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,GAAG,sCAAM,CAAC,IAAI,IAAI,SAAS,EAAE,EACxC,EAAE,EAAE,OAAO,YAEX,iCACE,SAAS,EAAE,GAAG,sCAAM,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,sCAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,aAEnE,QAAQ,EACR,UAAU,IAAI,CACb,gCAAK,SAAS,EAAE,GAAG,sCAAM,CAAC,UAAU,IAAI,sCAAM,CAAC,UAAU,CAAC,EAAE,GAAI,CACjE,IACG,GACF,CACP,CAAC;AACJ,CAAC;AAED;;IAEI;AACJ;;;;GAIG;AACH,MAAM,gBAAgB,GACpB,IAAA,kBAAU,EAAgC,iBAAiB,CAAC,CAAC;AAC/D,kBAAe,gBAAgB,CAAC"}

package/dist/components/SectionContainer/SectionContainer.module.scss

@@ -0,0 +1,30 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .content {
+    width: 100%;
+    max-width: 1200px;
+    &.decorated {
+      position: relative;
+    }
+  }
+  .decoration {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 16px;
+    height: 16px;
+    &.light {
+      background-color: white;
+    }
+    &.dark {
+      background-color: black;
+    }
+  }
+  h1 {
+    margin-bottom: 24px;
+  }
+}

package/dist/components/SectionContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./SectionContainer";
+export * from "./SectionContainer";

package/dist/components/SectionContainer/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SectionContainer_1 = require("./SectionContainer");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SectionContainer_1).default; } });
+__exportStar(require("./SectionContainer"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/SectionContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SectionContainer/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,uDAA6C;AAApC,4HAAA,OAAO,OAAA;AAChB,qDAAmC"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, DetailedHTMLProps, HTMLAttributes, ReactElement } from "react";
+import Input from "../Input";
+import { AnchoredTooltipAlignment } from "../AnchoredTooltip/AnchoredTooltip";
+export type SelectItem = ({
+    label: string;
+    value: string;
+} | {
+    label: ReactElement;
+    labelStr: string;
+    value: string;
+}) & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLElement>, "ref" | "color">;
+type SingleMode<I extends SelectItem> = {
+    mode?: "single";
+    onClick: (i: I) => void;
+} & ({
+    selected?: I["value"];
+    label: string;
+} | {
+    selected: I["value"];
+    label?: string;
+});
+type MultiMode<I extends SelectItem> = {
+    mode: "multi";
+    onClick: (i: I[]) => void;
+    selected?: I["value"][];
+};
+/**
+ * A dropdown select
+ **/
+declare function Select<I extends SelectItem>({ items, label, loading, rootClassName, dropdownClassName: _drop, alignTo, filter, ...otherProps }: {
+    loading?: boolean;
+    items: Readonly<I[]>;
+    rootClassName?: string;
+    dropdownClassName?: string;
+    alignTo?: AnchoredTooltipAlignment;
+    filter?: (item: I, term: string) => boolean;
+} & (SingleMode<I> | MultiMode<I>) & Omit<ComponentProps<typeof Input>, "selected" | "onClick" | "onSelect">): import("react/jsx-runtime").JSX.Element;
+/**
+ * A dropdown select component that lets users choose one or more options from a list.
+ * It can show a loading state and supports filtering through search.
+ */
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,105 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Collapsable_1 = __importDefault(require("../Collapsable"));
+const Text_1 = __importDefault(require("../Text"));
+const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
+const Input_1 = __importDefault(require("../Input"));
+const Loader_1 = __importDefault(require("../Loader"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const AnchoredTooltip_1 = require("../AnchoredTooltip/AnchoredTooltip");
+/**
+ * A dropdown select
+ **/
+function Select(_a) {
+    var { items, label, loading, rootClassName = "", dropdownClassName: _drop = "", alignTo = AnchoredTooltip_1.AnchoredTooltipAlignment.CENTER, filter } = _a, otherProps = __rest(_a, ["items", "label", "loading", "rootClassName", "dropdownClassName", "alignTo", "filter"]);
+    const { selected: _, onClick: __ } = otherProps, propsToSpread = __rest(otherProps, ["selected", "onClick"]);
+    const { StateIndicator } = (0, OneUIProvider_1.useOneUIContext)().component.select;
+    const collapsableRef = (0, react_1.useRef)(null);
+    const _selected = (0, react_1.useMemo)(() => {
+        if (otherProps.mode === "multi")
+            return items.filter((a) => { var _a; return (_a = otherProps.selected) === null || _a === void 0 ? void 0 : _a.includes(a.value); });
+        return items.find((a) => a.value === otherProps.selected);
+    }, [otherProps.selected, items]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [filterTerm, setFilterTerm] = (0, react_1.useState)("");
+    const filteredItems = (0, react_1.useMemo)(() => {
+        if (filter && filterTerm)
+            return items.filter((item) => filter(item, filterTerm));
+        else
+            return items;
+    }, [filterTerm, items]);
+    (0, react_1.useEffect)(() => {
+        collapsableRef.current.redimension();
+    }, [filteredItems.length]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (open)
+            setFilterTerm("");
+    }, [open]);
+    const selectClasses = _drop
+        ? {
+            dropdown: _drop,
+        }
+        : (0, OneUIProvider_1.useOneUIConfig)("component.select.className", {});
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            const close = () => {
+                setOpen(false);
+            };
+            window.addEventListener("click", close);
+            return () => window.removeEventListener("click", close);
+        }
+    }, [open]);
+    return ((0, jsx_runtime_1.jsx)(Collapsable_1.default, { title: (0, jsx_runtime_1.jsx)(Input_1.default, Object.assign({}, propsToSpread, { className: `${Select_module_scss_1.default.input} ${selectClasses.input} ${!items.length ? Select_module_scss_1.default.empty : ""} ${otherProps.disabled ? Select_module_scss_1.default.disabled : ""}`, value: Array.isArray(_selected)
+                ? _selected.length
+                    ? `(${_selected.length}) ${"labelStr" in _selected[0]
+                        ? _selected[0].labelStr
+                        : _selected[0].label}`
+                    : label || ""
+                : _selected
+                    ? "labelStr" in _selected
+                        ? _selected.labelStr
+                        : _selected.label
+                    : label || "", disabled: true, Icon: (0, jsx_runtime_1.jsx)("div", { className: `${Select_module_scss_1.default.indicator}`, children: loading ? (0, jsx_runtime_1.jsx)(Loader_1.default, {}) : (0, jsx_runtime_1.jsx)(StateIndicator, { open: !!open }) }) })), id: undefined, mode: "float", open: open, onToggleOpen: (open) => {
+            if (items.length && !otherProps.disabled)
+                setOpen(open);
+        }, className: `${otherProps.disabled ? "disabled" : ""} ${rootClassName}`, contentClassName: `${Select_module_scss_1.default.optionsContainer} ${selectClasses.dropdown}`, alignTo: alignTo, ref: collapsableRef, anchorTo: AnchoredTooltip_1.AnchoredTooltipAnchor.BOTTOM, children: (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.items, onClick: (e) => {
+                e.stopPropagation();
+                setOpen(false);
+            }, children: [filter && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.searchInput, children: (0, jsx_runtime_1.jsx)(Input_1.default, { onChange: ({ target: { value } }) => setFilterTerm(value), decoration: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDD0E\u00A0" }), containerProps: {
+                            onClick: (e) => e.stopPropagation(),
+                        }, value: filterTerm }) })), filteredItems.map((i) => ((0, jsx_runtime_1.jsx)(Text_1.default, Object.assign({ type: "caption", className: `${i === _selected
+                        ? `${Select_module_scss_1.default.selected} ${selectClasses.selectedItem}`
+                        : ""} ${selectClasses.item || ""}`, onClick: () => {
+                        if (otherProps.mode === "multi") {
+                            const curr = otherProps.selected || [];
+                            otherProps.onClick([
+                                ...curr.map((iId) => items.find((i) => i.value === iId)),
+                                i,
+                            ]);
+                        }
+                        else
+                            otherProps.onClick(i);
+                    } }, i, { children: i.label }), i.value)))] }) }));
+}
+/**
+ * A dropdown select component that lets users choose one or more options from a list.
+ * It can show a loading state and supports filtering through search.
+ */
+exports.default = Select;
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

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