@czi-sds/components 15.1.1 → 15.3.0

package/dist/src/core/InputText/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-text-field/
+ */
+var InputText = (0, react_1.forwardRef)(function InputText(props, ref) {
+    var id = props.id, _a = props.intent, intent = _a === void 0 ? "default" : _a, label = props.label, placeholder = props.placeholder, sdsType = props.sdsType, hideLabel = props.hideLabel, rest = __rest(props, ["id", "intent", "label", "placeholder", "sdsType", "hideLabel"]);
+    var _b = (0, react_1.useState)(false), hasValue = _b[0], setHasValue = _b[1];
+    var handleChange = function (event) {
+        if (event.target.value) {
+            setHasValue(true);
+        }
+        else {
+            setHasValue(false);
+        }
+    };
+    var inputProps = {
+        "aria-label": "".concat(label),
+    };
+    if (!id || !label) {
+        // eslint-disable-next-line no-console
+        console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideLabel && (0, jsx_runtime_1.jsx)(style_1.StyledLabel, { htmlFor: id, children: label }), (0, jsx_runtime_1.jsx)(style_1.StyledInputBase, __assign({ ref: ref, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsStage: hasValue ? "userInput" : "default", sdsType: sdsType, onChange: handleChange }, rest))] }));
+});
+exports.default = InputText;

package/dist/src/core/InputText/index.stories.d.ts

@@ -0,0 +1,29 @@
+import { Args } from "@storybook/react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
+export default _default;
+export declare const Default: {
+    args: {
+        disabled: boolean;
+        hideLabel: boolean;
+        id: string;
+        label: string;
+        placeholder: string;
+        sdsType: string;
+    };
+};
+export declare const LivePreview: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const Test: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};

package/dist/src/core/InputText/index.stories.js

@@ -0,0 +1,100 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Test = exports.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var index_1 = __importDefault(require("./index"));
+var InputText = function (props) {
+    var id = props.id, intent = props.intent, disabled = props.disabled, hideLabel = props.hideLabel, placeholder = props.placeholder, label = props.label, sdsType = props.sdsType;
+    return ((0, jsx_runtime_1.jsx)(index_1.default, { id: id, sdsType: sdsType, label: label, placeholder: placeholder, intent: intent, hideLabel: hideLabel, disabled: disabled, name: "input-text-name" }));
+};
+exports.default = {
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+        },
+        hideLabel: {
+            control: { type: "boolean" },
+        },
+        id: {
+            control: { type: "text" },
+            required: true,
+        },
+        intent: {
+            control: { type: "radio" },
+            options: ["default", "error", "warning"],
+        },
+        label: {
+            control: { type: "text" },
+            required: true,
+        },
+        placeholder: {
+            control: { type: "text" },
+        },
+        sdsStage: {
+            control: { type: "radio" },
+            options: ["default", "userInput"],
+        },
+        sdsType: {
+            control: { type: "radio" },
+            options: ["textField", "textArea"],
+        },
+    },
+    component: InputText,
+    title: "Inputs/InputText",
+};
+// Default
+exports.Default = {
+    args: {
+        disabled: false,
+        hideLabel: false,
+        id: "Test",
+        label: "Label",
+        placeholder: "Value",
+        sdsType: "textField",
+    },
+};
+// Live Preview
+var storyRow = {
+    alignItems: "flex-start",
+    display: "flex",
+    flexDirection: "row",
+    gap: "24px",
+};
+var LivePreviewDemo = function (props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: storyRow, children: [(0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { id: "textFieldPreview", sdsType: "textField", label: "Label", hideLabel: true, placeholder: "Value", style: { width: "200px" } })), (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { id: "textAreaPreview", sdsType: "textArea", label: "Label", hideLabel: true, placeholder: "Value", style: { minWidth: "200px" }, inputProps: { style: { minWidth: "200px" } } }))] }));
+};
+exports.LivePreview = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Test
+var TestDemo = function (props) {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { id: "test-textField", sdsType: "textField", label: "Label", hideLabel: false, placeholder: "Value", "data-testid": "inputTextBase" })), (0, jsx_runtime_1.jsx)(index_1.default, { sdsType: "textField", hideLabel: false, "data-testid": "inputTextFail" }), (0, jsx_runtime_1.jsx)(index_1.default, { id: "test-hide-label", sdsType: "textField", label: "Hidden Label", hideLabel: true, "data-testid": "inputTextHideLabel" }), (0, jsx_runtime_1.jsx)(index_1.default, { id: "test-textArea", sdsType: "textArea", label: "Label", hideLabel: false, placeholder: "Value", "data-testid": "inputTextArea" })] }));
+};
+exports.Test = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
+};

package/dist/src/core/InputText/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/InputText/index.test.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var story_utils_1 = require("@chanzuckerberg/story-utils");
+var react_1 = require("@storybook/react");
+var react_2 = require("@testing-library/react");
+var snapshotTestStoryFile = __importStar(require("./index.stories"));
+var index_stories_1 = __importStar(require("./index.stories"));
+// Returns a component that already contain all decorators from story level, meta level and global level.
+var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
+describe("<InputText />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    it("renders inputText component", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
+        var inputTextElement = react_2.screen.getByTestId("inputTextBase");
+        expect(inputTextElement).not.toBeNull();
+    });
+    it("component fails if missing id or label prop", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var inputTextElement = react_2.screen.queryByTestId("inputTextFail");
+        expect(inputTextElement).toBeNull();
+    });
+    it("hides label is hideLabel is true, but aria-label is still set", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var inputTextElement = react_2.screen.getByLabelText("Hidden Label");
+        expect(inputTextElement).not.toBeNull();
+    });
+    it("renders text area if sdsType is set to 'textArea'", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var inputTextAreaElement = react_2.screen.getByTestId("inputTextArea");
+        expect(inputTextAreaElement).not.toBeNull();
+    });
+});

package/dist/src/core/InputText/style.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CommonThemeProps } from "../styles";
+export interface InputTextExtraProps extends CommonThemeProps {
+    disabled?: boolean;
+    intent?: "default" | "error" | "warning";
+    sdsType?: "textField" | "textArea";
+    sdsStage?: "default" | "userInput";
+    hideLabel?: boolean;
+}
+export declare const StyledLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const StyledInputBase: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").OutlinedTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & InputTextExtraProps, {}, {}>;

package/dist/src/core/InputText/style.js

@@ -0,0 +1,45 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledInputBase = exports.StyledLabel = void 0;
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var sdsPropNames = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
+var error = function (props) {
+    var borders = (0, styles_2.getBorders)(props);
+    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .MuiOutlinedInput-notchedOutline {\n      border: ", ";\n    }\n  "], ["\n    .MuiOutlinedInput-notchedOutline {\n      border: ", ";\n    }\n  "])), borders === null || borders === void 0 ? void 0 : borders.error[400]);
+};
+var warning = function (props) {
+    var borders = (0, styles_2.getBorders)(props);
+    return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .MuiOutlinedInput-notchedOutline {\n      border: ", ";\n    }\n  "], ["\n    .MuiOutlinedInput-notchedOutline {\n      border: ", ";\n    }\n  "])), borders === null || borders === void 0 ? void 0 : borders.warning[400]);
+};
+var disabledStyled = function (props) {
+    var borders = (0, styles_2.getBorders)(props);
+    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .Mui-disabled {\n      .MuiOutlinedInput-notchedOutline {\n        border: ", ";\n      }\n      &:hover .MuiOutlinedInput-notchedOutline {\n        border: ", ";\n      }\n    }\n  "], ["\n    .Mui-disabled {\n      .MuiOutlinedInput-notchedOutline {\n        border: ", ";\n      }\n      &:hover .MuiOutlinedInput-notchedOutline {\n        border: ", ";\n      }\n    }\n  "])), borders === null || borders === void 0 ? void 0 : borders.gray[300], borders === null || borders === void 0 ? void 0 : borders.gray[300]);
+};
+var textArea = function (props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    return (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    .MuiInputBase-multiline {\n      padding: ", "px;\n      > .MuiInputBase-inputMultiline {\n        padding: ", "px ", "px ", "px;\n        resize: both;\n      }\n    }\n  "], ["\n    .MuiInputBase-multiline {\n      padding: ", "px;\n      > .MuiInputBase-inputMultiline {\n        padding: ", "px ", "px ", "px;\n        resize: both;\n      }\n    }\n  "])), spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.m);
+};
+exports.StyledLabel = (0, styles_1.styled)("label")(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  ", "\n\n  ", "\n"], ["\n  display: block;\n  ", "\n\n  ", "\n"])), styles_2.fontBodyS, function (props) {
+    var typography = (0, styles_2.getTypography)(props);
+    var spacings = (0, styles_2.getSpaces)(props);
+    return "\n      font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n    ");
+});
+exports.StyledInputBase = (0, styles_1.styled)(material_1.TextField, {
+    shouldForwardProp: function (prop) {
+        return !sdsPropNames.includes(prop.toString());
+    },
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
+    var spacings = (0, styles_2.getSpaces)(props);
+    var borders = (0, styles_2.getBorders)(props);
+    var corners = (0, styles_2.getCorners)(props);
+    return (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 160px;\n      display: block;\n\n      .MuiInputBase-inputSizeSmall {\n        padding: ", "px ", "px;\n        height: 34px;\n        box-sizing: border-box;\n        background-color: #fff;\n\n        .MuiOutlinedInput-notchedOutline {\n          border-radius: ", "px;\n          border: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\n        border: ", ";\n      }\n\n      .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n        border: ", ";\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 160px;\n      display: block;\n\n      .MuiInputBase-inputSizeSmall {\n        padding: ", "px ", "px;\n        height: 34px;\n        box-sizing: border-box;\n        background-color: #fff;\n\n        .MuiOutlinedInput-notchedOutline {\n          border-radius: ", "px;\n          border: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\n        border: ", ";\n      }\n\n      .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n        border: ", ";\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spacings === null || spacings === void 0 ? void 0 : spacings.l, spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.l, corners === null || corners === void 0 ? void 0 : corners.m, borders === null || borders === void 0 ? void 0 : borders.gray[400], borders === null || borders === void 0 ? void 0 : borders.gray[500], borders === null || borders === void 0 ? void 0 : borders.primary[400], sdsType === "textArea" && textArea(props), intent === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled(props));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/core/InputToggle/InputToggle.namespace-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/InputToggle/InputToggle.namespace-test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var InputToggleNameSpaceTest = function (props) {
+    return (0, jsx_runtime_1.jsx)(components_1.InputToggle, { disabled: false });
+};

package/dist/src/core/InputToggle/__snapshots__/index.test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<InputToggle /> Default story renders snapshot 1`] = `
+<span
+  class="MuiSwitch-root MuiSwitch-sizeMedium css-1mglvc-MuiSwitch-root"
+>
+  <span
+    class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase"
+  >
+    <input
+      class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+      type="checkbox"
+      value="Off"
+    />
+    <span
+      class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+    />
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </span>
+  <span
+    class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+  />
+</span>
+`;

package/dist/src/core/InputToggle/index.d.ts

@@ -0,0 +1,7 @@
+import { InputToggleExtraProps } from "./style";
+/**
+ * @see https://mui.com/material-ui/react-switch/
+ */
+declare const InputToggle: (props: InputToggleExtraProps) => JSX.Element;
+export type { InputToggleExtraProps as InputToggleProps };
+export default InputToggle;

package/dist/src/core/InputToggle/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-switch/
+ */
+var InputToggle = function (props) {
+    var _a = (0, react_1.useState)(false), checked = _a[0], setChecked = _a[1];
+    var _b = props.offLabel, offLabel = _b === void 0 ? "Off" : _b, onChange = props.onChange, _c = props.onLabel, onLabel = _c === void 0 ? "On" : _c, rest = __rest(props, ["offLabel", "onChange", "onLabel"]);
+    var labelValue = checked ? onLabel : offLabel;
+    var handleChange = function (e) {
+        setChecked(!checked);
+        if (onChange)
+            onChange(e);
+    };
+    return ((0, jsx_runtime_1.jsx)(style_1.Toggle, __assign({ checked: checked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
+};
+exports.default = InputToggle;

package/dist/src/core/InputToggle/index.stories.d.ts

@@ -0,0 +1,20 @@
+import { Args } from "@storybook/react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
+export default _default;
+export declare const Default: {};
+export declare const LivePreview: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const Test: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};

package/dist/src/core/InputToggle/index.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Test = exports.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var index_1 = __importDefault(require("./index"));
+var InputToggle = function (props) {
+    return (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props));
+};
+exports.default = {
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+        },
+    },
+    component: InputToggle,
+    parameters: {
+        axe: {
+            disabledRules: [
+                // Unfortunately the MUI Switch component renders an input field without a label, which
+                // fails an axe check.
+                "label",
+            ],
+        },
+    },
+    title: "Inputs/InputToggle",
+};
+// Default
+exports.Default = {};
+// Live Preview
+var LivePreviewDemo = function (props) {
+    return (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { id: "togglePreview" }));
+};
+exports.LivePreview = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Test
+exports.Test = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({}, args, { "data-testid": "test-toggle" }))); },
+};

package/dist/src/core/InputToggle/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/InputToggle/index.test.js

@@ -0,0 +1,52 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var story_utils_1 = require("@chanzuckerberg/story-utils");
+var react_1 = require("@storybook/react");
+var react_2 = require("@testing-library/react");
+var snapshotTestStoryFile = __importStar(require("./index.stories"));
+var index_stories_1 = __importStar(require("./index.stories"));
+// Returns a component that already contain all decorators from story level, meta level and global level.
+var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
+describe("<InputToggle />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    it("renders", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
+        var InputToggleElement = react_2.screen.getByTestId("test-toggle");
+        expect(InputToggleElement).not.toBeNull();
+    });
+});

package/dist/src/core/InputToggle/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Switch, SwitchProps } from "@mui/material";
+import { CommonThemeProps } from "../styles";
+export interface InputToggleExtraProps extends Omit<SwitchProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">, CommonThemeProps {
+    offLabel?: string;
+    onChange?(e: React.ChangeEvent): void;
+    onLabel?: string;
+}
+export declare const Toggle: typeof Switch;

package/dist/src/core/InputToggle/style.js

@@ -0,0 +1,38 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var toggle = function (props) {
+    var disabled = props.disabled;
+    var corners = (0, styles_2.getCorners)(props);
+    var spaces = (0, styles_2.getSpaces)(props);
+    var TOGGLE_HEIGHT = 18;
+    return "\n    cursor: ".concat(disabled ? "default" : "pointer", ";\n    border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n    height: 26px;\n    width: 62px;\n    line-height: 18px;\n    padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n    .MuiSwitch-switchBase {\n      font: inherit;\n      margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      padding: 0;\n      transform: unset;\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    .MuiSwitch-thumb {\n      height: ").concat(TOGGLE_HEIGHT, "px;\n      width: ").concat(TOGGLE_HEIGHT, "px;\n      box-shadow: none;\n    }\n\n    .MuiSwitch-track {\n      background-color: white;\n      width: unset;\n    }\n  ");
+};
+var toggleOn = function (props) {
+    var disabled = props.disabled, value = props.value;
+    var borders = (0, styles_2.getBorders)(props);
+    var colors = (0, styles_2.getColors)(props);
+    var spaces = (0, styles_2.getSpaces)(props);
+    return "\n    outline: ".concat(disabled ? borders === null || borders === void 0 ? void 0 : borders.primary[300] : borders === null || borders === void 0 ? void 0 : borders.primary[400], ";\n\n    .MuiSwitch-thumb {\n      color: ").concat(disabled ? colors === null || colors === void 0 ? void 0 : colors.primary[300] : colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n    }\n\n    .MuiSwitch-switchBase {\n      left: unset;\n      right: 0;\n      transform: unset;\n\n      .MuiIconButton-label {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      }\n\n      &:before {\n        color: ").concat(disabled ? colors === null || colors === void 0 ? void 0 : colors.gray[300] : colors === null || colors === void 0 ? void 0 : colors.gray[600], ";\n        content: \"").concat(value, "\";\n        font: inherit;\n        font-family: 'Open sans';\n      }\n    }\n\n    ").concat(!disabled &&
+        "&:hover {\n        outline: ".concat(borders === null || borders === void 0 ? void 0 : borders.primary[500], ";\n\n        .MuiSwitch-thumb {\n          color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[500], ";\n        }\n      }"), "\n  ");
+};
+var toggleOff = function (props) {
+    var disabled = props.disabled, value = props.value;
+    var borders = (0, styles_2.getBorders)(props);
+    var colors = (0, styles_2.getColors)(props);
+    var spaces = (0, styles_2.getSpaces)(props);
+    return "\n    & {\n      outline: ".concat(disabled ? borders === null || borders === void 0 ? void 0 : borders.gray[300] : borders === null || borders === void 0 ? void 0 : borders.gray[400], ";\n    }\n\n    .MuiSwitch-thumb {\n      color: ").concat(disabled ? colors === null || colors === void 0 ? void 0 : colors.gray[300] : colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n    }\n\n    .MuiSwitch-switchBase {\n      right: unset;\n      left: 0;\n      transform: unset;\n\n      .MuiIconButton-label {\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      }\n\n      &:after {\n        color: ").concat(disabled ? colors === null || colors === void 0 ? void 0 : colors.gray[300] : colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n        content: \"").concat(value, "\";\n        font: inherit;\n        font-family: 'Open sans';\n      }\n    }\n\n    ").concat(!disabled &&
+        "&:hover {\n        outline: ".concat(borders === null || borders === void 0 ? void 0 : borders.gray[500], ";\n\n        .MuiSwitch-thumb {\n          color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n        }\n      }"), "\n  ");
+};
+exports.Toggle = (0, styles_1.styled)(material_1.Switch)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_2.fontBodyXs, function (props) {
+    var checked = props.checked;
+    return "\n      ".concat(toggle(props), "\n      ").concat(checked ? toggleOn(props) : toggleOff(props), "\n    ");
+});
+var templateObject_1;

package/dist/src/core/Link/Link.namespace-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/Link/Link.namespace-test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var LinkNameSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.Link, { href: "/", sdsStyle: "default", children: "Test Link" }));
+};

package/dist/src/core/Link/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { LinkProps as RawLinkProps } from "./style";
+export type LinkProps<C extends React.ElementType = "a"> = Omit<RawLinkProps<C>, "nonce" | "rev" | "rel" | "autoFocus" | "content">;
+/**
+ * @see https://mui.com/material-ui/react-link/
+ */
+declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps<React.ElementType<any>>, string | number | symbol> & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;