@zonos/amino 4.4.12 → 4.4.15

package/components/input/input-type/_FloatLabelInput.d.ts

@@ -4,64 +4,64 @@ import type { Size } from "../../../types/Size";
 export declare const InputValuePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
 export type InputMode = 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url';
 type FloatLabelInputType = {
+    autoFocus?: boolean;
+    className?: string;
+    disabled?: boolean;
+    inputMode?: InputMode;
     /** A label that will be displayed above the input */
     label?: string;
-    /** Input value. Required since all inputs must be fully controlled */
-    value: string | null;
     /** Input on changed. Required since all inputs must be fully controlled */
     onChange: ChangeEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    pattern?: string;
     /** Placeholder text to be displayed in the input */
     placeholder?: string;
-    /** Determines if the input is required for form validation */
-    required?: boolean;
+    /** A short string displayed at the beginning of the input */
+    prefix?: ReactNode;
     /** Determines if the input is editable or not */
     readOnly?: boolean;
+    /** Determines if the input is required for form validation */
+    required?: boolean;
+    size?: Size;
+    /** A short string displayed at the end of the input */
+    suffix?: ReactNode;
+    tabIndex?: number;
     /** Determines input type (email, password, etc.) */
     type?: HTMLInputTypeAttribute;
-    /** A short string displayed at the beginning of the input */
-    prefix?: ReactNode;
+    /** Input value. Required since all inputs must be fully controlled */
+    value: string | null;
     /** An additional value that appears next to the input but cannot be changed by the input */
     valuePrefix?: ReactNode;
-    /** A short string displayed at the end of the input */
-    suffix?: ReactNode;
-    className?: string;
-    disabled?: boolean;
-    tabIndex?: number;
-    inputMode?: InputMode;
-    pattern?: string;
-    autoFocus?: boolean;
-    size?: Size;
-    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
 } & Pick<HelpTextProps, 'error'>;
 export type FloatLabelInputProps = FloatLabelInputType & Omit<InputHTMLAttributes<HTMLInputElement>, keyof FloatLabelInputType>;
 export declare const FloatLabelInput: import("react").ForwardRefExoticComponent<{
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    inputMode?: InputMode | undefined;
     /** A label that will be displayed above the input */
     label?: string | undefined;
-    /** Input value. Required since all inputs must be fully controlled */
-    value: string | null;
     /** Input on changed. Required since all inputs must be fully controlled */
     onChange: ChangeEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
+    pattern?: string | undefined;
     /** Placeholder text to be displayed in the input */
     placeholder?: string | undefined;
-    /** Determines if the input is required for form validation */
-    required?: boolean | undefined;
+    /** A short string displayed at the beginning of the input */
+    prefix?: ReactNode;
     /** Determines if the input is editable or not */
     readOnly?: boolean | undefined;
+    /** Determines if the input is required for form validation */
+    required?: boolean | undefined;
+    size?: Size | undefined;
+    /** A short string displayed at the end of the input */
+    suffix?: ReactNode;
+    tabIndex?: number | undefined;
     /** Determines input type (email, password, etc.) */
     type?: HTMLInputTypeAttribute | undefined;
-    /** A short string displayed at the beginning of the input */
-    prefix?: ReactNode;
+    /** Input value. Required since all inputs must be fully controlled */
+    value: string | null;
     /** An additional value that appears next to the input but cannot be changed by the input */
     valuePrefix?: ReactNode;
-    /** A short string displayed at the end of the input */
-    suffix?: ReactNode;
-    className?: string | undefined;
-    disabled?: boolean | undefined;
-    tabIndex?: number | undefined;
-    inputMode?: InputMode | undefined;
-    pattern?: string | undefined;
-    autoFocus?: boolean | undefined;
-    size?: Size | undefined;
-    onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
-} & Pick<HelpTextProps, "error"> & Omit<InputHTMLAttributes<HTMLInputElement>, "label" | "pattern" | "error" | "className" | "type" | "placeholder" | "tabIndex" | "prefix" | "inputMode" | "onChange" | "onKeyDown" | "size" | "disabled" | "autoFocus" | "value" | "readOnly" | "required" | "valuePrefix" | "suffix"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<HelpTextProps, "error"> & Omit<InputHTMLAttributes<HTMLInputElement>, "label" | "pattern" | "error" | "className" | "type" | "placeholder" | "tabIndex" | "prefix" | "inputMode" | "onChange" | "onKeyDown" | "size" | "disabled" | "autoFocus" | "value" | "readOnly" | "required" | "suffix" | "valuePrefix"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/input/input-type/_FloatLabelInput.js

@@ -1 +1 @@
-"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react"),a=require("../../../styles/constants/theme.js"),o=require("../../../utils/getTestId.js");function r(n){return n&&n.__esModule?n:{default:n}}var i,l,s,d,p,c,u,f=r(require("styled-components")),h=f.default.label(i||(i=n.__makeTemplateObject(["\n  display: block;\n  max-height: 0;\n  pointer-events: none;\n  order: 1;\n  &::before {\n    content: attr(data-label);\n    color: ",";\n    position: absolute;\n    font-size: ",";\n    line-height: ",";\n    display: inline-block;\n    filter: blur(0);\n    transform-origin: left top;\n    transition: ",";\n    margin-left: ",";\n    top: calc(50% - "," / 2);\n    z-index: 1;\n  }\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n  /** disabled state */\n  .disabled & {\n    pointer-events: inherit;\n    ::after {\n      cursor: not-allowed;\n      z-index: 1;\n    }\n  }\n"],["\n  display: block;\n  max-height: 0;\n  pointer-events: none;\n  order: 1;\n  &::before {\n    content: attr(data-label);\n    color: ",";\n    position: absolute;\n    font-size: ",";\n    line-height: ",";\n    display: inline-block;\n    filter: blur(0);\n    transform-origin: left top;\n    transition: ",";\n    margin-left: ",";\n    top: calc(50% - "," / 2);\n    z-index: 1;\n  }\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n  /** disabled state */\n  .disabled & {\n    pointer-events: inherit;\n    ::after {\n      cursor: not-allowed;\n      z-index: 1;\n    }\n  }\n"])),a.theme.gray800,a.theme.fontSizeBase,a.theme.fontSizeBase,a.theme.transition,a.theme.space16,a.theme.fontSizeBase,a.theme.radius6),b=f.default.div(l||(l=n.__makeTemplateObject(["\n  font-size: ",";\n  line-height: ",";\n  font-weight: 500;\n  background: transparent;\n  padding: 0 ",";\n  font-weight: 700;\n  flex-basis: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"],["\n  font-size: ",";\n  line-height: ",";\n  font-weight: 500;\n  background: transparent;\n  padding: 0 ",";\n  font-weight: 700;\n  flex-basis: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])),a.theme.fontSizeS,a.theme.fontSizeS,a.theme.space16),m=f.default(b)(s||(s=n.__makeTemplateObject(["\n  border-top-left-radius: ",";\n  border-bottom-left-radius: ",";\n"],["\n  border-top-left-radius: ",";\n  border-bottom-left-radius: ",";\n"])),a.theme.radius6,a.theme.radius6),g=f.default(b)(d||(d=n.__makeTemplateObject(["\n  order: 3;\n  border-top-right-radius: ",";\n  border-bottom-right-radius: ",";\n"],["\n  order: 3;\n  border-top-right-radius: ",";\n  border-bottom-right-radius: ",";\n"])),a.theme.radius6,a.theme.radius6),x=f.default.div(p||(p=n.__makeTemplateObject(["\n  display: flex;\n  order: 2;\n  align-items: flex-end;\n  padding-left: ",";\n  padding-right: ",";\n  padding-bottom: calc(",");\n  color: ",";\n  white-space: nowrap;\n"],["\n  display: flex;\n  order: 2;\n  align-items: flex-end;\n  padding-left: ",";\n  padding-right: ",";\n  padding-bottom: calc(",");\n  color: ",";\n  white-space: nowrap;\n"])),a.theme.space16,a.theme.space4,a.theme.space8,a.theme.gray800),y=f.default.input(c||(c=n.__makeTemplateObject(["\n  height: ",";\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  outline: none;\n  transition: ",";\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  order: 2;\n  font-weight: 500;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n    &.has-input-prefix {\n      padding-left: 0;\n      & + ","::before {\n        margin-left: 0;\n      }\n    }\n  }\n  &:not(.has-label) {\n    ::placeholder {\n      opacity: 0.6;\n    }\n  }\n\n  &.has-value-prefix {\n    padding-left: 8px;\n  }\n\n  ::placeholder {\n    transition: ",";\n    opacity: 0;\n  }\n\n  :focus {\n    outline: none;\n    & + ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error + ","::after {\n    box-shadow: ",";\n  }\n\n  &.has-content,\n  &:focus {\n    &::placeholder {\n      opacity: 0.6;\n    }\n    & + ","::before {\n      top: 11px;\n      transform: scale(0.8);\n    }\n  }\n\n  &:-webkit-autofill,\n  &:-moz-autofill {\n    background-color: ",";\n    color: ",";\n  }\n"],["\n  height: ",";\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  outline: none;\n  transition: ",";\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  order: 2;\n  font-weight: 500;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n    &.has-input-prefix {\n      padding-left: 0;\n      & + ","::before {\n        margin-left: 0;\n      }\n    }\n  }\n  &:not(.has-label) {\n    ::placeholder {\n      opacity: 0.6;\n    }\n  }\n\n  &.has-value-prefix {\n    padding-left: 8px;\n  }\n\n  ::placeholder {\n    transition: ",";\n    opacity: 0;\n  }\n\n  :focus {\n    outline: none;\n    & + ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error + ","::after {\n    box-shadow: ",";\n  }\n\n  &.has-content,\n  &:focus {\n    &::placeholder {\n      opacity: 0.6;\n    }\n    & + ","::before {\n      top: 11px;\n      transform: scale(0.8);\n    }\n  }\n\n  &:-webkit-autofill,\n  &:-moz-autofill {\n    background-color: ",";\n    color: ",";\n  }\n"])),(function(n){return"calc(var(--amino-size-".concat(n.$size,") - 2px)")}),a.theme.space16,a.theme.transition,a.theme.radius6,a.theme.inputBackground,a.theme.radius6,a.theme.radius6,a.theme.space16,a.theme.space8,a.theme.space16,h,a.theme.transition,h,a.theme.glowBlue,h,a.theme.glowError,h,a.theme.inputBackground,a.theme.textColor),w=f.default.div(u||(u=n.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  background: ",";\n  border-radius: ",";\n\n  &.sm ",".has-label {\n    padding-top: 13px;\n    padding-bottom: 0;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 2px;\n      }\n    }\n  }\n\n  &.md ",".has-label {\n    padding-top: 20px;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 6px;\n      }\n    }\n  }\n\n  &.lg ",".has-label {\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 10px;\n      }\n    }\n  }\n  &.xl ",".has-label {\n    padding-bottom: 2px;\n  }\n"],["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  background: ",";\n  border-radius: ",";\n\n  &.sm ",".has-label {\n    padding-top: 13px;\n    padding-bottom: 0;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 2px;\n      }\n    }\n  }\n\n  &.md ",".has-label {\n    padding-top: 20px;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 6px;\n      }\n    }\n  }\n\n  &.lg ",".has-label {\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 10px;\n      }\n    }\n  }\n  &.xl ",".has-label {\n    padding-bottom: 2px;\n  }\n"])),a.theme.inputBackground,a.theme.radius6,y,h,y,h,y,h,y),k=t.forwardRef((function(a,r){var i=a.autoFocus,l=a.className,s=a.disabled,d=a.error,p=a.inputMode,c=a.label,u=a.onChange,f=a.onKeyDown,b=a.pattern,k=a.placeholder,v=a.prefix,_=a.readOnly,z=a.required,j=a.size,O=void 0===j?"xl":j,q=a.suffix,T=a.tabIndex,S=a.type,B=a.value,I=a.valuePrefix,M=n.__rest(a,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","size","suffix","tabIndex","type","value","valuePrefix"]),N=t.useMemo((function(){return o.getTestId({componentName:"input",name:c})}),[c]),P=!!v||!!I,C=!!B||!!I;return e.jsxs(w,n.__assign({className:"".concat(l||""," ").concat(O)},{children:[v&&e.jsx(m,{children:v}),I&&e.jsx(x,{children:I}),e.jsx(y,n.__assign({"aria-label":c,className:[d?"has-error":"",c?"has-label":"",C?"has-content":"",v?"has-input-prefix":"",I?"has-value-prefix":""].join(" "),hasPrefix:!!v,hasSuffix:!!q,autoFocus:i,disabled:s,inputMode:p,onChange:u,onKeyDown:f,pattern:b,placeholder:k,readOnly:_,ref:r,required:z,$size:O,tabIndex:T,type:S||"text",value:B||"","data-testid":N},M)),e.jsx(h,{hasPrefix:P,"data-label":c}),q&&e.jsx(g,{children:q})]}))}));exports.FloatLabelInput=k,exports.InputValuePrefix=x;
+"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react"),a=require("../../../styles/constants/theme.js"),o=require("../../../utils/getTestId.js");function r(n){return n&&n.__esModule?n:{default:n}}var i,l,s,d,p,c,u,f=r(require("styled-components")),h=f.default.label(i||(i=n.__makeTemplateObject(["\n  display: block;\n  max-height: 0;\n  pointer-events: none;\n  order: 1;\n  &::before {\n    content: attr(data-label);\n    color: ",";\n    position: absolute;\n    font-size: ",";\n    line-height: ",";\n    display: inline-block;\n    filter: blur(0);\n    transform-origin: left top;\n    transition: ",";\n    margin-left: ",";\n    top: calc(50% - "," / 2);\n    z-index: 1;\n  }\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n  /** disabled state */\n  .disabled & {\n    pointer-events: inherit;\n    ::after {\n      cursor: not-allowed;\n      z-index: 1;\n    }\n  }\n"],["\n  display: block;\n  max-height: 0;\n  pointer-events: none;\n  order: 1;\n  &::before {\n    content: attr(data-label);\n    color: ",";\n    position: absolute;\n    font-size: ",";\n    line-height: ",";\n    display: inline-block;\n    filter: blur(0);\n    transform-origin: left top;\n    transition: ",";\n    margin-left: ",";\n    top: calc(50% - "," / 2);\n    z-index: 1;\n  }\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n  /** disabled state */\n  .disabled & {\n    pointer-events: inherit;\n    ::after {\n      cursor: not-allowed;\n      z-index: 1;\n    }\n  }\n"])),a.theme.gray800,a.theme.fontSizeBase,a.theme.fontSizeBase,a.theme.transition,a.theme.space16,a.theme.fontSizeBase,a.theme.radius6),b=f.default.div(l||(l=n.__makeTemplateObject(["\n  font-size: ",";\n  line-height: ",";\n  font-weight: 500;\n  background: transparent;\n  padding: 0 ",";\n  font-weight: 700;\n  flex-basis: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"],["\n  font-size: ",";\n  line-height: ",";\n  font-weight: 500;\n  background: transparent;\n  padding: 0 ",";\n  font-weight: 700;\n  flex-basis: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])),a.theme.fontSizeS,a.theme.fontSizeS,a.theme.space16),m=f.default(b)(s||(s=n.__makeTemplateObject(["\n  border-top-left-radius: ",";\n  border-bottom-left-radius: ",";\n"],["\n  border-top-left-radius: ",";\n  border-bottom-left-radius: ",";\n"])),a.theme.radius6,a.theme.radius6),g=f.default(b)(d||(d=n.__makeTemplateObject(["\n  order: 3;\n  border-top-right-radius: ",";\n  border-bottom-right-radius: ",";\n"],["\n  order: 3;\n  border-top-right-radius: ",";\n  border-bottom-right-radius: ",";\n"])),a.theme.radius6,a.theme.radius6),x=f.default.div(p||(p=n.__makeTemplateObject(["\n  display: flex;\n  order: 2;\n  align-items: flex-end;\n  padding-left: ",";\n  padding-right: ",";\n  padding-bottom: calc(",");\n  color: ",";\n  white-space: nowrap;\n"],["\n  display: flex;\n  order: 2;\n  align-items: flex-end;\n  padding-left: ",";\n  padding-right: ",";\n  padding-bottom: calc(",");\n  color: ",";\n  white-space: nowrap;\n"])),a.theme.space16,a.theme.space4,a.theme.space8,a.theme.gray800),y=f.default.input(c||(c=n.__makeTemplateObject(["\n  height: ",";\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  outline: none;\n  transition: ",";\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  order: 2;\n  font-weight: 500;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n    &.has-input-prefix {\n      padding-left: 0;\n      & + ","::before {\n        margin-left: 0;\n      }\n    }\n  }\n  &:not(.has-label) {\n    ::placeholder {\n      opacity: 0.6;\n    }\n  }\n\n  &.has-value-prefix {\n    padding-left: 8px;\n  }\n\n  ::placeholder {\n    transition: ",";\n    opacity: 0;\n  }\n\n  :focus {\n    outline: none;\n    & + ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error + ","::after {\n    box-shadow: ",";\n  }\n\n  &.has-content,\n  &:focus {\n    &::placeholder {\n      opacity: 0.6;\n    }\n    & + ","::before {\n      top: 11px;\n      transform: scale(0.8);\n    }\n  }\n\n  &:-webkit-autofill,\n  &:-moz-autofill {\n    background-color: ",";\n    color: ",";\n  }\n"],["\n  height: ",";\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  outline: none;\n  transition: ",";\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  order: 2;\n  font-weight: 500;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n    &.has-input-prefix {\n      padding-left: 0;\n      & + ","::before {\n        margin-left: 0;\n      }\n    }\n  }\n  &:not(.has-label) {\n    ::placeholder {\n      opacity: 0.6;\n    }\n  }\n\n  &.has-value-prefix {\n    padding-left: 8px;\n  }\n\n  ::placeholder {\n    transition: ",";\n    opacity: 0;\n  }\n\n  :focus {\n    outline: none;\n    & + ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error + ","::after {\n    box-shadow: ",";\n  }\n\n  &.has-content,\n  &:focus {\n    &::placeholder {\n      opacity: 0.6;\n    }\n    & + ","::before {\n      top: 11px;\n      transform: scale(0.8);\n    }\n  }\n\n  &:-webkit-autofill,\n  &:-moz-autofill {\n    background-color: ",";\n    color: ",";\n  }\n"])),(function(n){return"calc(var(--amino-size-".concat(n.$size,") - 2px)")}),a.theme.space16,a.theme.transition,a.theme.radius6,a.theme.inputBackground,a.theme.radius6,a.theme.radius6,a.theme.space16,a.theme.space8,a.theme.space16,h,a.theme.transition,h,a.theme.glowBlue,h,a.theme.glowError,h,a.theme.inputBackground,a.theme.textColor),w=f.default.div(u||(u=n.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  background: ",";\n  border-radius: ",";\n\n  &.sm ",".has-label {\n    padding-top: 13px;\n    padding-bottom: 0;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 2px;\n      }\n    }\n  }\n\n  &.md ",".has-label {\n    padding-top: 20px;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 6px;\n      }\n    }\n  }\n\n  &.lg ",".has-label {\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 10px;\n      }\n    }\n  }\n  &.xl ",".has-label {\n    padding-bottom: 2px;\n  }\n"],["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  background: ",";\n  border-radius: ",";\n\n  &.sm ",".has-label {\n    padding-top: 13px;\n    padding-bottom: 0;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 2px;\n      }\n    }\n  }\n\n  &.md ",".has-label {\n    padding-top: 20px;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 6px;\n      }\n    }\n  }\n\n  &.lg ",".has-label {\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 10px;\n      }\n    }\n  }\n  &.xl ",".has-label {\n    padding-bottom: 2px;\n  }\n"])),a.theme.inputBackground,a.theme.radius6,y,h,y,h,y,h,y),k=t.forwardRef((function(a,r){var i=a.autoFocus,l=a.className,s=a.disabled,d=a.error,p=a.inputMode,c=a.label,u=a.onChange,f=a.onKeyDown,b=a.pattern,k=a.placeholder,v=a.prefix,_=a.readOnly,z=a.required,j=a.size,O=void 0===j?"xl":j,q=a.suffix,T=a.tabIndex,S=a.type,B=a.value,I=a.valuePrefix,M=n.__rest(a,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","size","suffix","tabIndex","type","value","valuePrefix"]),N=t.useMemo((function(){return o.getTestId({componentName:"input",name:c})}),[c]),P=!!v||!!I,C=!!B||!!I;return e.jsxs(w,n.__assign({className:"".concat(l||""," ").concat(O)},{children:[v&&e.jsx(m,{children:v}),I&&e.jsx(x,{children:I}),e.jsx(y,n.__assign({ref:r,$size:O,"aria-label":c,autoFocus:i,className:[d?"has-error":"",c?"has-label":"",C?"has-content":"",v?"has-input-prefix":"",I?"has-value-prefix":""].join(" "),"data-testid":N,disabled:s,hasPrefix:!!v,hasSuffix:!!q,inputMode:p,onChange:u,onKeyDown:f,pattern:b,placeholder:k,readOnly:_,required:z,tabIndex:T,type:S||"text",value:B||""},M)),e.jsx(h,{"data-label":c,hasPrefix:P}),q&&e.jsx(g,{children:q})]}))}));exports.FloatLabelInput=k,exports.InputValuePrefix=x;

package/components/input/input-type/_NumberInput.js

@@ -1 +1 @@
-"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react"),r=require("../../../icons/ChevronDownIcon.js"),i=require("../../../icons/ChevronUpIcon.js"),a=require("../../../styles/constants/theme.js"),o=require("styled-components"),u=require("./_FloatLabelInput.js");function s(n){return n&&n.__esModule?n:{default:n}}require("../../../icons/icon-base/_IconBase.js"),require("../../../utils/getTestId.js");var l,d,c,p,b=s(o),f=b.default.div(l||(l=n.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),v=b.default.div(d||(d=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"]))),h=b.default.button(c||(c=n.__makeTemplateObject(["\n  padding: ",";\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: ",";\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),a.theme.radius4,a.theme.radius4,a.theme.transition),x=b.default(u.FloatLabelInput)(p||(p=n.__makeTemplateObject(["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n    }\n  }\n"],["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n    }\n  }\n"])),a.theme.space40);exports.NumberInput=function(a){var o=a.autoFocus,u=a.className,s=a.disabled,l=a.error,d=a.inputMode,c=a.label,p=a.onChange,b=a.onKeyDown,_=a.pattern,g=a.placeholder,m=a.prefix,j=a.readOnly,k=a.required,w=a.suffix,y=a.tabIndex,q=a.value,I=n.__rest(a,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","value"]),C=t.useRef(null);return e.jsx(f,n.__assign({className:u},{children:e.jsx(x,n.__assign({"aria-label":c,autoFocus:o,disabled:s,error:l,inputMode:d,label:c,onChange:p,onKeyDown:b,pattern:_,placeholder:g,prefix:m,readOnly:j,ref:C,required:k,suffix:w||e.jsxs(v,{children:[e.jsx(h,n.__assign({type:"button",onClick:function(){var n,e;null===(n=C.current)||void 0===n||n.stepUp(),null===(e=C.current)||void 0===e||e.dispatchEvent(new Event("input",{bubbles:!0}))}},{children:e.jsx(i.ChevronUpIcon,{size:16})})),e.jsx(h,n.__assign({type:"button",onClick:function(){var n,e;null===(n=C.current)||void 0===n||n.stepDown(),null===(e=C.current)||void 0===e||e.dispatchEvent(new Event("input",{bubbles:!0}))}},{children:e.jsx(r.ChevronDownIcon,{size:16})}))]}),tabIndex:y,type:"number",value:q},I))}))};
+"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react"),r=require("../../../icons/ChevronDownIcon.js"),i=require("../../../icons/ChevronUpIcon.js"),a=require("../../../styles/constants/theme.js"),o=require("styled-components"),u=require("./_FloatLabelInput.js");function s(n){return n&&n.__esModule?n:{default:n}}require("../../../icons/icon-base/_IconBase.js"),require("../../../utils/getTestId.js");var l,d,c,p,b=s(o),f=b.default.div(l||(l=n.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),v=b.default.div(d||(d=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"]))),h=b.default.button(c||(c=n.__makeTemplateObject(["\n  padding: ",";\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: ",";\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),a.theme.radius4,a.theme.radius4,a.theme.transition),x=b.default(u.FloatLabelInput)(p||(p=n.__makeTemplateObject(["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n    }\n  }\n"],["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n    }\n  }\n"])),a.theme.space40);exports.NumberInput=function(a){var o=a.autoFocus,u=a.className,s=a.disabled,l=a.error,d=a.inputMode,c=a.label,p=a.onChange,b=a.onKeyDown,_=a.pattern,g=a.placeholder,m=a.prefix,j=a.readOnly,k=a.required,w=a.suffix,y=a.tabIndex,q=a.value,I=n.__rest(a,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","value"]),C=t.useRef(null);return e.jsx(f,n.__assign({className:u},{children:e.jsx(x,n.__assign({ref:C,"aria-label":c,autoFocus:o,disabled:s,error:l,inputMode:d,label:c,onChange:p,onKeyDown:b,pattern:_,placeholder:g,prefix:m,readOnly:j,required:k,suffix:w||e.jsxs(v,{children:[e.jsx(h,n.__assign({onClick:function(){var n,e;null===(n=C.current)||void 0===n||n.stepUp(),null===(e=C.current)||void 0===e||e.dispatchEvent(new Event("input",{bubbles:!0}))},type:"button"},{children:e.jsx(i.ChevronUpIcon,{size:16})})),e.jsx(h,n.__assign({onClick:function(){var n,e;null===(n=C.current)||void 0===n||n.stepDown(),null===(e=C.current)||void 0===e||e.dispatchEvent(new Event("input",{bubbles:!0}))},type:"button"},{children:e.jsx(r.ChevronDownIcon,{size:16})}))]}),tabIndex:y,type:"number",value:q},I))}))};

package/components/input/input-type/_PasswordInput.js

@@ -1 +1 @@
-"use strict";var e=require("../../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("react"),a=require("../../../icons/EyeIcon.js"),t=require("../../../icons/EyeOffIcon.js"),s=require("../../../styles/constants/theme.js"),i=require("styled-components"),o=require("./_FloatLabelInput.js");function u(e){return e&&e.__esModule?e:{default:e}}require("../../../icons/icon-base/_IconBase.js"),require("../../../utils/getTestId.js");var d,l,c,p=u(i),b=p.default.div(d||(d=e.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),f=p.default.button(l||(l=e.__makeTemplateObject(["\n  padding: 6px;\n  border-radius: 50%;\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: 6px;\n  border-radius: 50%;\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),s.theme.transition),g=p.default(o.FloatLabelInput)(c||(c=e.__makeTemplateObject(["\n  input {\n    padding-right: ",";\n  }\n"],["\n  input {\n    padding-right: ",";\n  }\n"])),s.theme.space40);exports.PasswordInput=function(s){var i=s.autoFocus,o=s.className,u=s.disabled,d=s.error,l=s.inputMode,c=s.label,p=s.onChange,_=s.onKeyDown,x=s.pattern,h=s.placeholder,j=s.prefix,m=s.readOnly,y=s.required,q=s.suffix,v=s.tabIndex,I=s.value,w=e.__rest(s,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","value"]),k=e.__read(r.useState("password"),2),O=k[0],F=k[1];return n.jsx(b,e.__assign({className:o},{children:n.jsx(g,e.__assign({"aria-label":c,autoFocus:i,disabled:u,error:d,inputMode:l,label:c,onChange:p,onKeyDown:_,pattern:x,placeholder:h,prefix:j,readOnly:m,required:y,suffix:q||n.jsx(f,e.__assign({type:"button",onClick:function(){return F("password"===O?"text":"password")}},{children:"password"===O?n.jsx(a.EyeIcon,{size:20}):n.jsx(t.EyeOffIcon,{size:20})})),tabIndex:v,type:O,value:I},w))}))};
+"use strict";var e=require("../../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("react"),a=require("../../../icons/EyeIcon.js"),t=require("../../../icons/EyeOffIcon.js"),s=require("../../../styles/constants/theme.js"),i=require("styled-components"),o=require("./_FloatLabelInput.js");function u(e){return e&&e.__esModule?e:{default:e}}require("../../../icons/icon-base/_IconBase.js"),require("../../../utils/getTestId.js");var d,l,c,p=u(i),b=p.default.div(d||(d=e.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),f=p.default.button(l||(l=e.__makeTemplateObject(["\n  padding: 6px;\n  border-radius: 50%;\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: 6px;\n  border-radius: 50%;\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),s.theme.transition),g=p.default(o.FloatLabelInput)(c||(c=e.__makeTemplateObject(["\n  input {\n    padding-right: ",";\n  }\n"],["\n  input {\n    padding-right: ",";\n  }\n"])),s.theme.space40);exports.PasswordInput=function(s){var i=s.autoFocus,o=s.className,u=s.disabled,d=s.error,l=s.inputMode,c=s.label,p=s.onChange,_=s.onKeyDown,x=s.pattern,h=s.placeholder,j=s.prefix,m=s.readOnly,y=s.required,q=s.suffix,v=s.tabIndex,I=s.value,w=e.__rest(s,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","value"]),k=e.__read(r.useState("password"),2),O=k[0],F=k[1];return n.jsx(b,e.__assign({className:o},{children:n.jsx(g,e.__assign({"aria-label":c,autoFocus:i,disabled:u,error:d,inputMode:l,label:c,onChange:p,onKeyDown:_,pattern:x,placeholder:h,prefix:j,readOnly:m,required:y,suffix:q||n.jsx(f,e.__assign({onClick:function(){return F("password"===O?"text":"password")},type:"button"},{children:"password"===O?n.jsx(a.EyeIcon,{size:20}):n.jsx(t.EyeOffIcon,{size:20})})),tabIndex:v,type:O,value:I},w))}))};

package/components/input/input-type/_TimeInput.js

@@ -1 +1 @@
-"use strict";var e=require("../../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),a=require("../../../icons/ClockIcon.js"),i=require("../../../styles/constants/theme.js"),r=require("styled-components"),o=require("./_FloatLabelInput.js");function s(e){return e&&e.__esModule?e:{default:e}}require("../../../icons/icon-base/_IconBase.js"),require("../../../utils/getTestId.js");var l,d,u,c,p=s(r),b=p.default.div(l||(l=e.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),f=p.default.div(d||(d=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"]))),k=p.default.button(u||(u=e.__makeTemplateObject(["\n  padding: 6px;\n  border-radius: 50%;\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: 6px;\n  border-radius: 50%;\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),i.theme.transition),m=p.default(o.FloatLabelInput)(c||(c=e.__makeTemplateObject(["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n    &::-webkit-inner-spin-button,\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n      -webkit-appearance: none;\n    }\n\n    &::-webkit-datetime-edit-fields-wrapper {\n      transition: 0.5s all ease;\n    }\n    &:not(:focus):not(.has-content) {\n      &::-webkit-datetime-edit-fields-wrapper {\n        color: transparent;\n      }\n    }\n  }\n"],["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n    &::-webkit-inner-spin-button,\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n      -webkit-appearance: none;\n    }\n\n    &::-webkit-datetime-edit-fields-wrapper {\n      transition: 0.5s all ease;\n    }\n    &:not(:focus):not(.has-content) {\n      &::-webkit-datetime-edit-fields-wrapper {\n        color: transparent;\n      }\n    }\n  }\n"])),i.theme.space40);exports.TimeInput=function(i){var r=i.autoFocus,o=i.className,s=i.disabled,l=i.error,d=i.inputMode,u=i.label,c=i.onChange,p=i.onKeyDown,x=i.pattern,h=i.placeholder,g=i.prefix,w=i.readOnly,_=i.required,v=i.suffix,j=i.tabIndex,y=i.value,q=e.__rest(i,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","value"]),I=t.useRef(null);return n.jsx(b,e.__assign({className:o},{children:n.jsx(m,e.__assign({"aria-label":u,autoFocus:r,disabled:s,error:l,inputMode:d,label:u,onChange:c,onKeyDown:p,pattern:x,placeholder:h,prefix:g,readOnly:w,ref:I,required:_,suffix:v||n.jsx(f,{children:n.jsx(k,e.__assign({type:"button",onClick:function(){var e,n;null===(e=I.current)||void 0===e||e.showPicker(),null===(n=I.current)||void 0===n||n.dispatchEvent(new Event("input",{bubbles:!0}))}},{children:n.jsx(a.ClockIcon,{size:20})}))}),tabIndex:j,type:"time",value:y},q))}))};
+"use strict";var e=require("../../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),a=require("../../../icons/ClockIcon.js"),i=require("../../../styles/constants/theme.js"),r=require("styled-components"),o=require("./_FloatLabelInput.js");function s(e){return e&&e.__esModule?e:{default:e}}require("../../../icons/icon-base/_IconBase.js"),require("../../../utils/getTestId.js");var l,d,u,c,p=s(r),b=p.default.div(l||(l=e.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),f=p.default.div(d||(d=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"]))),k=p.default.button(u||(u=e.__makeTemplateObject(["\n  padding: 6px;\n  border-radius: 50%;\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: 6px;\n  border-radius: 50%;\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),i.theme.transition),m=p.default(o.FloatLabelInput)(c||(c=e.__makeTemplateObject(["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n    &::-webkit-inner-spin-button,\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n      -webkit-appearance: none;\n    }\n\n    &::-webkit-datetime-edit-fields-wrapper {\n      transition: 0.5s all ease;\n    }\n    &:not(:focus):not(.has-content) {\n      &::-webkit-datetime-edit-fields-wrapper {\n        color: transparent;\n      }\n    }\n  }\n"],["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n    &::-webkit-inner-spin-button,\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n      -webkit-appearance: none;\n    }\n\n    &::-webkit-datetime-edit-fields-wrapper {\n      transition: 0.5s all ease;\n    }\n    &:not(:focus):not(.has-content) {\n      &::-webkit-datetime-edit-fields-wrapper {\n        color: transparent;\n      }\n    }\n  }\n"])),i.theme.space40);exports.TimeInput=function(i){var r=i.autoFocus,o=i.className,s=i.disabled,l=i.error,d=i.inputMode,u=i.label,c=i.onChange,p=i.onKeyDown,x=i.pattern,h=i.placeholder,g=i.prefix,w=i.readOnly,_=i.required,v=i.suffix,j=i.tabIndex,y=i.value,q=e.__rest(i,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","value"]),I=t.useRef(null);return n.jsx(b,e.__assign({className:o},{children:n.jsx(m,e.__assign({ref:I,"aria-label":u,autoFocus:r,disabled:s,error:l,inputMode:d,label:u,onChange:c,onKeyDown:p,pattern:x,placeholder:h,prefix:g,readOnly:w,required:_,suffix:v||n.jsx(f,{children:n.jsx(k,e.__assign({onClick:function(){var e,n;null===(e=I.current)||void 0===e||e.showPicker(),null===(n=I.current)||void 0===n||n.dispatchEvent(new Event("input",{bubbles:!0}))},type:"button"},{children:n.jsx(a.ClockIcon,{size:20})}))}),tabIndex:j,type:"time",value:y},q))}))};

package/components/layout/Layout.d.ts

@@ -1,16 +1,16 @@
 import type { ChangeEventHandler, ReactElement, ReactNode } from 'react';
 import { type NavigationGroupProps } from './NavigationGroup';
 type SearchInputProps = {
-    value: string;
     onChange: ChangeEventHandler<HTMLInputElement>;
+    value: string;
 };
 export type LayoutProps = {
+    content: ReactNode;
     footer: ReactNode;
+    headerContent?: ReactNode;
     logoSidebar?: ReactNode;
-    sidebar: ReactElement<NavigationGroupProps[] | NavigationGroupProps>;
     searchInput?: SearchInputProps;
-    content: ReactNode;
-    headerContent?: ReactNode;
+    sidebar: ReactElement<NavigationGroupProps[] | NavigationGroupProps>;
 };
-export declare const Layout: ({ content, footer, sidebar, logoSidebar, searchInput, headerContent, }: LayoutProps) => JSX.Element;
+export declare const Layout: ({ content, footer, headerContent, logoSidebar, searchInput, sidebar, }: LayoutProps) => JSX.Element;
 export {};

package/components/layout/Layout.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("../input/SearchInput.js"),t=require("../../styles/constants/theme.js"),i=require("styled-components");function o(e){return e&&e.__esModule?e:{default:e}}require("./NavigationGroup.js"),require("../../icons/SearchIcon.js"),require("react"),require("../../icons/icon-base/_IconBase.js"),require("../collapse/Collapse.js");var a,d,h,l,s,c,b,m,p,g,u=o(i),x=u.default.div(a||(a=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  width: ",";\n"],["\n  box-sizing: border-box;\n  width: ",";\n"])),t.theme.sidebarWidth),f=u.default.div(d||(d=e.__makeTemplateObject(["\n  padding: ",";\n  box-sizing: border-box;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"],["\n  padding: ",";\n  box-sizing: border-box;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])),t.theme.space24),j=u.default.div(h||(h=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),t.theme.space40),v=u.default.div(l||(l=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),t.theme.space24),_=u.default(r.SearchInput)(s||(s=e.__makeTemplateObject(["\n  border: 0;\n  svg {\n    color: ",";\n  }\n  input {\n    background-color: ",";\n    border: 0;\n    ::placeholder {\n      color: ",";\n    }\n  }\n"],["\n  border: 0;\n  svg {\n    color: ",";\n  }\n  input {\n    background-color: ",";\n    border: 0;\n    ::placeholder {\n      color: ",";\n    }\n  }\n"])),t.theme.gray1200,t.theme.gray100,t.theme.gray1200),y=u.default.nav(c||(c=e.__makeTemplateObject(["\n  border-right: ",";\n  width: ",";\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 1fr calc(39px + "," * 2);\n  height: inherit;\n  background: ",";\n"],["\n  border-right: ",";\n  width: ",";\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 1fr calc(39px + "," * 2);\n  height: inherit;\n  background: ",";\n"])),t.theme.border,t.theme.sidebarWidth,t.theme.space24,t.theme.sidebarColor),k=u.default.div(b||(b=e.__makeTemplateObject(["\n  height: ",";\n  display: grid;\n  grid-template-columns: "," 1fr;\n"],["\n  height: ",";\n  display: grid;\n  grid-template-columns: "," 1fr;\n"])),(function(e){return e.hasHeader?"calc(100vh - ".concat(t.theme.appbarHeight,")"):"100vh"}),t.theme.sidebarWidth),w=u.default.main(m||(m=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: hidden;\n"],["\n  height: 100vh;\n  overflow: hidden;\n"]))),z=u.default.div(p||(p=e.__makeTemplateObject(["\n  height: inherit;\n  overflow-y: auto;\n  padding: "," "," calc(39px + "," * 2);\n  box-sizing: border-box;\n"],["\n  height: inherit;\n  overflow-y: auto;\n  padding: "," "," calc(39px + "," * 2);\n  box-sizing: border-box;\n"])),t.theme.space24,t.theme.space24,t.theme.space24),q=u.default.header(g||(g=e.__makeTemplateObject(["\n  background: ",";\n  box-shadow: ",";\n  border-bottom: ",";\n  height: ",";\n  z-index: ",";\n  position: sticky;\n  top: 0;\n  box-sizing: border-box;\n  display: flex;\n"],["\n  background: ",";\n  box-shadow: ",";\n  border-bottom: ",";\n  height: ",";\n  z-index: ",";\n  position: sticky;\n  top: 0;\n  box-sizing: border-box;\n  display: flex;\n"])),t.theme.headerColor,t.theme.v3ShadowBase,t.theme.border,t.theme.appbarHeight,t.theme.appbarElevation);exports.Layout=function(r){var t=r.content,i=r.footer,o=r.sidebar,a=r.logoSidebar,d=r.searchInput,h=r.headerContent;return n.jsxs(w,{children:[!!h&&n.jsx(q,{children:h}),n.jsxs(k,e.__assign({hasHeader:!!h},{children:[n.jsxs(y,{children:[n.jsxs(f,{children:[!!a&&n.jsx(v,{children:a}),!!d&&n.jsx(j,{children:n.jsx(_,{value:d.value,onChange:d.onChange})}),o]}),n.jsx(x,{children:i})]}),n.jsx(z,{children:t})]}))]})};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("../input/SearchInput.js"),t=require("../../styles/constants/theme.js"),i=require("styled-components");function o(e){return e&&e.__esModule?e:{default:e}}require("./NavigationGroup.js"),require("../../icons/SearchIcon.js"),require("react"),require("../../icons/icon-base/_IconBase.js"),require("../collapse/Collapse.js");var a,d,h,l,s,c,b,m,p,g,u=o(i),x=u.default.div(a||(a=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  width: ",";\n"],["\n  box-sizing: border-box;\n  width: ",";\n"])),t.theme.sidebarWidth),f=u.default.div(d||(d=e.__makeTemplateObject(["\n  padding: ",";\n  box-sizing: border-box;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"],["\n  padding: ",";\n  box-sizing: border-box;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])),t.theme.space24),j=u.default.div(h||(h=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),t.theme.space40),v=u.default.div(l||(l=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),t.theme.space24),_=u.default(r.SearchInput)(s||(s=e.__makeTemplateObject(["\n  border: 0;\n  svg {\n    color: ",";\n  }\n  input {\n    background-color: ",";\n    border: 0;\n    ::placeholder {\n      color: ",";\n    }\n  }\n"],["\n  border: 0;\n  svg {\n    color: ",";\n  }\n  input {\n    background-color: ",";\n    border: 0;\n    ::placeholder {\n      color: ",";\n    }\n  }\n"])),t.theme.gray1200,t.theme.gray100,t.theme.gray1200),y=u.default.nav(c||(c=e.__makeTemplateObject(["\n  border-right: ",";\n  width: ",";\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 1fr calc(39px + "," * 2);\n  height: inherit;\n  background: ",";\n"],["\n  border-right: ",";\n  width: ",";\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 1fr calc(39px + "," * 2);\n  height: inherit;\n  background: ",";\n"])),t.theme.border,t.theme.sidebarWidth,t.theme.space24,t.theme.sidebarColor),k=u.default.div(b||(b=e.__makeTemplateObject(["\n  height: ",";\n  display: grid;\n  grid-template-columns: "," 1fr;\n"],["\n  height: ",";\n  display: grid;\n  grid-template-columns: "," 1fr;\n"])),(function(e){return e.hasHeader?"calc(100vh - ".concat(t.theme.appbarHeight,")"):"100vh"}),t.theme.sidebarWidth),w=u.default.main(m||(m=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: hidden;\n"],["\n  height: 100vh;\n  overflow: hidden;\n"]))),z=u.default.div(p||(p=e.__makeTemplateObject(["\n  height: inherit;\n  overflow-y: auto;\n  padding: "," "," calc(39px + "," * 2);\n  box-sizing: border-box;\n"],["\n  height: inherit;\n  overflow-y: auto;\n  padding: "," "," calc(39px + "," * 2);\n  box-sizing: border-box;\n"])),t.theme.space24,t.theme.space24,t.theme.space24),q=u.default.header(g||(g=e.__makeTemplateObject(["\n  background: ",";\n  box-shadow: ",";\n  border-bottom: ",";\n  height: ",";\n  z-index: ",";\n  position: sticky;\n  top: 0;\n  box-sizing: border-box;\n  display: flex;\n"],["\n  background: ",";\n  box-shadow: ",";\n  border-bottom: ",";\n  height: ",";\n  z-index: ",";\n  position: sticky;\n  top: 0;\n  box-sizing: border-box;\n  display: flex;\n"])),t.theme.headerColor,t.theme.v3ShadowBase,t.theme.border,t.theme.appbarHeight,t.theme.appbarElevation);exports.Layout=function(r){var t=r.content,i=r.footer,o=r.headerContent,a=r.logoSidebar,d=r.searchInput,h=r.sidebar;return n.jsxs(w,{children:[!!o&&n.jsx(q,{children:o}),n.jsxs(k,e.__assign({hasHeader:!!o},{children:[n.jsxs(y,{children:[n.jsxs(f,{children:[!!a&&n.jsx(v,{children:a}),!!d&&n.jsx(j,{children:n.jsx(_,{onChange:d.onChange,value:d.value})}),h]}),n.jsx(x,{children:i})]}),n.jsx(z,{children:t})]}))]})};

package/components/layout/NavigationGroup.d.ts

@@ -1,19 +1,19 @@
 import type { ReactElement, ReactNode } from 'react';
 export type NavigationItemProps = {
-    content: ReactNode;
     className?: string;
+    content: ReactNode;
     icon?: ReactNode;
     isActive?: boolean;
 };
 export type NavigationGroupProps = {
-    /** **NOTE**: Should be `NavigationItem` component in order to have proper styling. If you want to use `href`, WRAP the `anchor` tag outside of the `NavigationItem` component. */
-    content: ReactElement<NavigationItemProps> | HTMLAnchorElement;
-    className?: string;
     children: ReactNode;
+    className?: string;
     /**
      * @default false
      */
     collapsed?: boolean;
+    /** **NOTE**: Should be `NavigationItem` component in order to have proper styling. If you want to use `href`, WRAP the `anchor` tag outside of the `NavigationItem` component. */
+    content: ReactElement<NavigationItemProps> | HTMLAnchorElement;
 };
-export declare const NavigationItem: ({ content, className, icon, isActive, }: NavigationItemProps) => JSX.Element;
-export declare const NavigationGroup: ({ content, children, className, collapsed, }: NavigationGroupProps) => JSX.Element;
+export declare const NavigationItem: ({ className, content, icon, isActive, }: NavigationItemProps) => JSX.Element;
+export declare const NavigationGroup: ({ children, className, collapsed, content, }: NavigationGroupProps) => JSX.Element;

package/components/layout/NavigationGroup.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("../collapse/Collapse.js"),t=require("../../styles/constants/theme.js"),o=require("styled-components");function l(n){return n&&n.__esModule?n:{default:n}}require("react");var a,c,s,i,d,g,m,u,p,h=l(o),f=h.default.div(a||(a=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"],["\n  display: flex;\n  flex-direction: column;\n"]))),x=h.default.div(c||(c=n.__makeTemplateObject([""],[""]))),_=h.default.div(s||(s=n.__makeTemplateObject([""],[""]))),v=h.default.div(g||(g=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 36px;\n  padding: 0 ",";\n  color: ",";\n  font-weight: 500;\n  border-radius: ",";\n  &:hover {\n    background-color: ",";\n    color: ",";\n    svg {\n      color: ",";\n    }\n  }\n  svg {\n    color: ",";\n  }\n  "," {\n    flex-grow: 1;\n    & > * {\n      height: 100%;\n    }\n  }\n  ","\n  ","\n"],["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 36px;\n  padding: 0 ",";\n  color: ",";\n  font-weight: 500;\n  border-radius: ",";\n  &:hover {\n    background-color: ",";\n    color: ",";\n    svg {\n      color: ",";\n    }\n  }\n  svg {\n    color: ",";\n  }\n  "," {\n    flex-grow: 1;\n    & > * {\n      height: 100%;\n    }\n  }\n  ","\n  ","\n"])),t.theme.space16,t.theme.gray800,t.theme.radius6,t.theme.gray50,t.theme.gray1200,t.theme.gray700,t.theme.gray600,_,(function(e){return!!e.$icon&&o.css(i||(i=n.__makeTemplateObject(["\n      "," {\n        flex-basis: 31px;\n        flex-grow: 0;\n        flex-shrink: 0;\n      }\n    "],["\n      "," {\n        flex-basis: 31px;\n        flex-grow: 0;\n        flex-shrink: 0;\n      }\n    "])),x)}),(function(e){return e.$isActive&&o.css(d||(d=n.__makeTemplateObject(["\n      && {\n        background-color: ",";\n        color: ",";\n        svg {\n          color: ",";\n        }\n      }\n    "],["\n      && {\n        background-color: ",";\n        color: ",";\n        svg {\n          color: ",";\n        }\n      }\n    "])),t.theme.gray200,t.theme.gray1200,t.theme.gray1200)})),b=h.default.div(u||(u=n.__makeTemplateObject(["\n  ","\n"],["\n  ","\n"])),(function(e){return!e.$collapsed&&o.css(m||(m=n.__makeTemplateObject(["\n      "," {\n        color: ",";\n        &:hover {\n          background-color: transparent;\n        }\n        svg {\n          color: ",";\n        }\n      }\n    "],["\n      "," {\n        color: ",";\n        &:hover {\n          background-color: transparent;\n        }\n        svg {\n          color: ",";\n        }\n      }\n    "])),v,t.theme.gray1200,t.theme.gray1200)})),j=h.default(r.Collapse)(p||(p=n.__makeTemplateObject(["\n  padding-left: ",";\n  margin-left: ",";\n  border-left: 1px solid ",";\n"],["\n  padding-left: ",";\n  margin-left: ",";\n  border-left: 1px solid ",";\n"])),t.theme.space24,t.theme.space24,t.theme.gray200);exports.NavigationGroup=function(r){var t=r.content,o=r.children,l=r.className,a=r.collapsed,c=void 0!==a&&a;return e.jsxs(f,n.__assign({className:l},{children:[e.jsx(b,n.__assign({$collapsed:c},{children:t})),e.jsx(j,n.__assign({collapsed:c},{children:o}))]}))},exports.NavigationItem=function(r){var t=r.content,o=r.className,l=r.icon,a=r.isActive;return e.jsxs(v,n.__assign({className:o,$content:t,$icon:l,$isActive:a},{children:[l&&e.jsx(x,{children:l}),t]}))};
+"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("../collapse/Collapse.js"),t=require("../../styles/constants/theme.js"),o=require("styled-components");function l(n){return n&&n.__esModule?n:{default:n}}require("react");var a,c,s,i,d,g,m,u,p,h=l(o),f=h.default.div(a||(a=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"],["\n  display: flex;\n  flex-direction: column;\n"]))),x=h.default.div(c||(c=n.__makeTemplateObject([""],[""]))),_=h.default.div(s||(s=n.__makeTemplateObject([""],[""]))),v=h.default.div(g||(g=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 36px;\n  padding: 0 ",";\n  color: ",";\n  font-weight: 500;\n  border-radius: ",";\n  &:hover {\n    background-color: ",";\n    color: ",";\n    svg {\n      color: ",";\n    }\n  }\n  svg {\n    color: ",";\n  }\n  "," {\n    flex-grow: 1;\n    & > * {\n      height: 100%;\n    }\n  }\n  ","\n  ","\n"],["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 36px;\n  padding: 0 ",";\n  color: ",";\n  font-weight: 500;\n  border-radius: ",";\n  &:hover {\n    background-color: ",";\n    color: ",";\n    svg {\n      color: ",";\n    }\n  }\n  svg {\n    color: ",";\n  }\n  "," {\n    flex-grow: 1;\n    & > * {\n      height: 100%;\n    }\n  }\n  ","\n  ","\n"])),t.theme.space16,t.theme.gray800,t.theme.radius6,t.theme.gray50,t.theme.gray1200,t.theme.gray700,t.theme.gray600,_,(function(e){return!!e.$icon&&o.css(i||(i=n.__makeTemplateObject(["\n      "," {\n        flex-basis: 31px;\n        flex-grow: 0;\n        flex-shrink: 0;\n      }\n    "],["\n      "," {\n        flex-basis: 31px;\n        flex-grow: 0;\n        flex-shrink: 0;\n      }\n    "])),x)}),(function(e){return e.$isActive&&o.css(d||(d=n.__makeTemplateObject(["\n      && {\n        background-color: ",";\n        color: ",";\n        svg {\n          color: ",";\n        }\n      }\n    "],["\n      && {\n        background-color: ",";\n        color: ",";\n        svg {\n          color: ",";\n        }\n      }\n    "])),t.theme.gray200,t.theme.gray1200,t.theme.gray1200)})),b=h.default.div(u||(u=n.__makeTemplateObject(["\n  ","\n"],["\n  ","\n"])),(function(e){return!e.$collapsed&&o.css(m||(m=n.__makeTemplateObject(["\n      "," {\n        color: ",";\n        &:hover {\n          background-color: transparent;\n        }\n        svg {\n          color: ",";\n        }\n      }\n    "],["\n      "," {\n        color: ",";\n        &:hover {\n          background-color: transparent;\n        }\n        svg {\n          color: ",";\n        }\n      }\n    "])),v,t.theme.gray1200,t.theme.gray1200)})),j=h.default(r.Collapse)(p||(p=n.__makeTemplateObject(["\n  padding-left: ",";\n  margin-left: ",";\n  border-left: 1px solid ",";\n"],["\n  padding-left: ",";\n  margin-left: ",";\n  border-left: 1px solid ",";\n"])),t.theme.space24,t.theme.space24,t.theme.gray200);exports.NavigationGroup=function(r){var t=r.children,o=r.className,l=r.collapsed,a=void 0!==l&&l,c=r.content;return e.jsxs(f,n.__assign({className:o},{children:[e.jsx(b,n.__assign({$collapsed:a},{children:c})),e.jsx(j,n.__assign({collapsed:a},{children:t}))]}))},exports.NavigationItem=function(r){var t=r.className,o=r.content,l=r.icon,a=r.isActive;return e.jsxs(v,n.__assign({$content:o,$icon:l,$isActive:a,className:t},{children:[l&&e.jsx(x,{children:l}),o]}))};

package/components/lightbox/LightBox.d.ts

@@ -1,13 +1,8 @@
 import type { ReactNode } from 'react';
 import type { Theme } from "../../types/Theme";
 export type LightBoxProps = {
-    className?: string;
     children: ReactNode;
-    onClose: () => void;
-    open: boolean;
-    themeOverride?: Theme;
-    width?: number;
-    withBorder?: boolean;
+    className?: string;
     /** Close when clicking outside dialog (on the backdrop)
      * @param closeOnBlur
      * @default true
@@ -19,5 +14,10 @@ export type LightBoxProps = {
      * @default true
      */
     closeOnEsc?: boolean;
+    open: boolean;
+    themeOverride?: Theme;
+    width?: number;
+    withBorder?: boolean;
+    onClose: () => void;
 };
-export declare const LightBox: ({ children, className, onClose, open, themeOverride, width, withBorder, closeOnBlur, closeOnEsc, }: LightBoxProps) => JSX.Element;
+export declare const LightBox: ({ children, className, closeOnBlur, closeOnEsc, onClose, open, themeOverride, width, withBorder, }: LightBoxProps) => JSX.Element;

package/components/lightbox/LightBox.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),s=require("../dialog/_BaseDialog.js");require("react"),require("react-dom"),require("framer-motion"),require("../backdrop/Backdrop.js"),require("../../styles/constants/theme.js"),require("styled-components"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js");exports.LightBox=function(o){var i=o.children,t=o.className,u=o.onClose,a=o.open,l=o.themeOverride,n=o.width,c=o.withBorder,d=void 0!==c&&c,q=o.closeOnBlur,h=o.closeOnEsc;return r.jsx(s.BaseDialog,e.__assign({className:t,"data-theme":l,open:a,width:n,noBorder:!d,onClose:u,closeOnBlur:q,closeOnEsc:h},{children:i}))};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),s=require("../dialog/_BaseDialog.js");require("react"),require("react-dom"),require("framer-motion"),require("../backdrop/Backdrop.js"),require("../../styles/constants/theme.js"),require("styled-components"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js");exports.LightBox=function(o){var i=o.children,t=o.className,u=o.closeOnBlur,a=o.closeOnEsc,l=o.onClose,n=o.open,c=o.themeOverride,d=o.width,q=o.withBorder,h=void 0!==q&&q;return r.jsx(s.BaseDialog,e.__assign({className:t,closeOnBlur:u,closeOnEsc:a,"data-theme":c,noBorder:!h,onClose:l,open:n,width:d},{children:i}))};

package/components/list/CollapsibleList.d.ts

@@ -2,11 +2,11 @@ import { type ReactNode } from 'react';
 import { type ListProps } from './List';
 export type CollapsibleListProps = ListProps & {
     icon?: ReactNode;
-    title: ReactNode;
     /**
      * Whether to start expanded
      * @default false
      */
     startExpanded?: boolean;
+    title: ReactNode;
 };
-export declare const CollapsibleList: ({ className, children, startExpanded, icon, title, withBorder, withNegativeMargin, }: CollapsibleListProps) => JSX.Element;
+export declare const CollapsibleList: ({ children, className, icon, startExpanded, title, withBorder, withNegativeMargin, }: CollapsibleListProps) => JSX.Element;

package/components/list/CollapsibleList.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),r=require("../../icons/ChevronUpIcon.js"),a=require("../../styles/constants/theme.js"),i=require("styled-components"),s=require("../collapse/Collapse.js"),o=require("../list-item/ListItem.js"),c=require("./List.js");function l(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../text/Text.js");var p,d,u,_,m,h,g,j=l(i),x=j.default(s.Collapse)(d||(d=e.__makeTemplateObject(["\n  ","\n"],["\n  ","\n"])),(function(n){return n.$hasIcon&&i.css(p||(p=e.__makeTemplateObject(["\n      .___icon-wrapper {\n        width: 32px;\n        display: inline-block;\n      }\n    "],["\n      .___icon-wrapper {\n        width: 32px;\n        display: inline-block;\n      }\n    "])))})),b=j.default(o.ListItem)(_||(_=e.__makeTemplateObject(["\n  ","\n\n  svg {\n    transition: ",";\n\n    &.collapsed {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n"],["\n  ","\n\n  svg {\n    transition: ",";\n\n    &.collapsed {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n"])),(function(n){return!n.$hasIcon&&i.css(u||(u=e.__makeTemplateObject(["\n      .___icon-wrapper {\n        display: none;\n      }\n    "],["\n      .___icon-wrapper {\n        display: none;\n      }\n    "])))}),a.theme.transition),f=j.default(c.List)(g||(g=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n\n  ","\n\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n\n  ","\n\n  ","\n"])),(function(n){return n.withBorder&&i.css(m||(m=e.__makeTemplateObject(["\n      padding: ",";\n      border: 1px solid ",";\n      border-radius: ",";\n    "],["\n      padding: ",";\n      border: 1px solid ",";\n      border-radius: ",";\n    "])),a.theme.space8,a.theme.gray200,a.theme.radius12)}),(function(n){return n.withNegativeMargin&&i.css(h||(h=e.__makeTemplateObject(["\n      margin: ",";\n    "],["\n      margin: ",";\n    "])),a.theme.spaceNegative24)}));exports.CollapsibleList=function(a){var i=a.className,s=a.children,o=a.startExpanded,c=a.icon,l=a.title,p=a.withBorder,d=a.withNegativeMargin,u=e.__read(t.useState(!o),2),_=u[0],m=u[1];return n.jsxs(f,e.__assign({className:i,withBorder:p,withNegativeMargin:d},{children:[n.jsx(b,{$hasIcon:!!c,decorator:c,label:l,onClick:function(){return m(!_)},rightDecorator:n.jsx(r.ChevronUpIcon,{className:_?"collapsed":""})}),n.jsx(x,e.__assign({$hasIcon:!!c,collapsed:_},{children:s}))]}))};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),r=require("../../icons/ChevronUpIcon.js"),a=require("../../styles/constants/theme.js"),i=require("styled-components"),s=require("../collapse/Collapse.js"),o=require("../list-item/ListItem.js"),c=require("./List.js");function l(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../text/Text.js");var p,d,u,_,m,h,g,j=l(i),x=j.default(s.Collapse)(d||(d=e.__makeTemplateObject(["\n  ","\n"],["\n  ","\n"])),(function(n){return n.$hasIcon&&i.css(p||(p=e.__makeTemplateObject(["\n      .___icon-wrapper {\n        width: 32px;\n        display: inline-block;\n      }\n    "],["\n      .___icon-wrapper {\n        width: 32px;\n        display: inline-block;\n      }\n    "])))})),b=j.default(o.ListItem)(_||(_=e.__makeTemplateObject(["\n  ","\n\n  svg {\n    transition: ",";\n\n    &.collapsed {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n"],["\n  ","\n\n  svg {\n    transition: ",";\n\n    &.collapsed {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n"])),(function(n){return!n.$hasIcon&&i.css(u||(u=e.__makeTemplateObject(["\n      .___icon-wrapper {\n        display: none;\n      }\n    "],["\n      .___icon-wrapper {\n        display: none;\n      }\n    "])))}),a.theme.transition),f=j.default(c.List)(g||(g=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n\n  ","\n\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n\n  ","\n\n  ","\n"])),(function(n){return n.withBorder&&i.css(m||(m=e.__makeTemplateObject(["\n      padding: ",";\n      border: 1px solid ",";\n      border-radius: ",";\n    "],["\n      padding: ",";\n      border: 1px solid ",";\n      border-radius: ",";\n    "])),a.theme.space8,a.theme.gray200,a.theme.radius12)}),(function(n){return n.withNegativeMargin&&i.css(h||(h=e.__makeTemplateObject(["\n      margin: ",";\n    "],["\n      margin: ",";\n    "])),a.theme.spaceNegative24)}));exports.CollapsibleList=function(a){var i=a.children,s=a.className,o=a.icon,c=a.startExpanded,l=a.title,p=a.withBorder,d=a.withNegativeMargin,u=e.__read(t.useState(!c),2),_=u[0],m=u[1];return n.jsxs(f,e.__assign({className:s,withBorder:p,withNegativeMargin:d},{children:[n.jsx(b,{$hasIcon:!!o,decorator:o,label:l,onClick:function(){return m(!_)},rightDecorator:n.jsx(r.ChevronUpIcon,{className:_?"collapsed":""})}),n.jsx(x,e.__assign({$hasIcon:!!o,collapsed:_},{children:i}))]}))};

package/components/list/List.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 export type ListProps = {
+    children?: ReactNode;
     className?: string;
     withBorder?: boolean;
     withNegativeMargin?: boolean;
-    children?: ReactNode;
 };
-export declare const List: ({ className, withBorder, withNegativeMargin, children, }: ListProps) => JSX.Element;
+export declare const List: ({ children, className, withBorder, withNegativeMargin, }: ListProps) => JSX.Element;

package/components/list/List.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("../../styles/constants/theme.js"),t=require("styled-components");function i(e){return e&&e.__esModule?e:{default:e}}var a,s,d,c=i(t).default.section(d||(d=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n\n  ","\n\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n\n  ","\n\n  ","\n"])),(function(n){return n.withBorder&&t.css(a||(a=e.__makeTemplateObject(["\n      padding: ",";\n      border: 1px solid ",";\n      border-radius: ",";\n    "],["\n      padding: ",";\n      border: 1px solid ",";\n      border-radius: ",";\n    "])),r.theme.space8,r.theme.gray200,r.theme.radius12)}),(function(n){return n.withNegativeMargin&&t.css(s||(s=e.__makeTemplateObject(["\n      margin: ",";\n    "],["\n      margin: ",";\n    "])),r.theme.spaceNegative24)}));exports.List=function(r){var t=r.className,i=r.withBorder,a=r.withNegativeMargin,s=r.children;return n.jsx(c,e.__assign({className:t,withBorder:i,withNegativeMargin:a},{children:s}))};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("../../styles/constants/theme.js"),t=require("styled-components");function i(e){return e&&e.__esModule?e:{default:e}}var a,s,d,c=i(t).default.section(d||(d=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n\n  ","\n\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n\n  ","\n\n  ","\n"])),(function(n){return n.withBorder&&t.css(a||(a=e.__makeTemplateObject(["\n      padding: ",";\n      border: 1px solid ",";\n      border-radius: ",";\n    "],["\n      padding: ",";\n      border: 1px solid ",";\n      border-radius: ",";\n    "])),r.theme.space8,r.theme.gray200,r.theme.radius12)}),(function(n){return n.withNegativeMargin&&t.css(s||(s=e.__makeTemplateObject(["\n      margin: ",";\n    "],["\n      margin: ",";\n    "])),r.theme.spaceNegative24)}));exports.List=function(r){var t=r.children,i=r.className,a=r.withBorder,s=r.withNegativeMargin;return n.jsx(c,e.__assign({className:i,withBorder:a,withNegativeMargin:s},{children:t}))};

package/components/list-item/ListItem.d.ts

@@ -1,13 +1,13 @@
 import { type MouseEventHandler, type ReactNode } from 'react';
 export type Props = {
     className?: string;
+    /** @description Decorater takes a React node, preferably an icon or an avatar */
+    decorator?: ReactNode;
     disabled?: boolean;
-    selected?: boolean;
     label: ReactNode;
-    subtitle?: ReactNode;
-    rightDecorator?: ReactNode;
     onClick?: MouseEventHandler<HTMLDivElement>;
-    /** @description Decorater takes a React node, preferably an icon or an avatar */
-    decorator?: ReactNode;
+    rightDecorator?: ReactNode;
+    selected?: boolean;
+    subtitle?: ReactNode;
 };
 export declare const ListItem: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;

package/components/list-item/ListItem.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),i=require("../text/Text.js"),t=require("../../styles/constants/theme.js"),a=require("styled-components");function l(n){return n&&n.__esModule?n:{default:n}}var s,o,c,d,p,u,m=l(a),h=m.default.div(d||(d=n.__makeTemplateObject(["\n  padding: "," ",";\n  display: flex;\n  flex-direction: row;\n  gap: ",";\n  align-items: center;\n  min-height: ",";\n  border-radius: ",";\n  line-height: 16px;\n\n  .___icon-wrapper {\n    display: none;\n    &.has-icon {\n      display: inline-block;\n    }\n  }\n\n  ","\n\n  ","\n\n  :hover {\n    ","\n  }\n"],["\n  padding: "," ",";\n  display: flex;\n  flex-direction: row;\n  gap: ",";\n  align-items: center;\n  min-height: ",";\n  border-radius: ",";\n  line-height: 16px;\n\n  .___icon-wrapper {\n    display: none;\n    &.has-icon {\n      display: inline-block;\n    }\n  }\n\n  ","\n\n  ","\n\n  :hover {\n    ","\n  }\n"])),t.theme.space8,t.theme.space16,t.theme.space16,t.theme.sizeXl,t.theme.radius8,(function(e){var r=e.selected;return!e.disabled&&r&&a.css(s||(s=n.__makeTemplateObject(["\n      background-color: ",";\n      * {\n        color: ",";\n      }\n    "],["\n      background-color: ",";\n      * {\n        color: ",";\n      }\n    "])),t.theme.blue100,t.theme.blue800)}),(function(e){return e.disabled&&a.css(o||(o=n.__makeTemplateObject(["\n      * {\n        color: ",";\n      }\n      cursor: not-allowed;\n    "],["\n      * {\n        color: ",";\n      }\n      cursor: not-allowed;\n    "])),t.theme.gray600)}),(function(e){var r=e.disabled,i=e.withClick,l=e.selected;return!r&&i&&!l&&a.css(c||(c=n.__makeTemplateObject(["\n        background-color: ",";\n        cursor: pointer;\n      "],["\n        background-color: ",";\n        cursor: pointer;\n      "])),t.theme.gray100)})),g=m.default.div(p||(p=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  flex-grow: 1;\n"],["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  flex-grow: 1;\n"]))),x=m.default.img(u||(u=n.__makeTemplateObject(["\n  margin-right: ",";\n  width: 32px;\n  height: 32px;\n  border-radius: ",";\n"],["\n  margin-right: ",";\n  width: 32px;\n  height: 32px;\n  border-radius: ",";\n"])),t.theme.space16,t.theme.radius6),_=function(n){var r=n.icon,i=n.iconComponent,t=n.label;return r?e.jsx(x,{src:r,alt:t}):i?e.jsx(e.Fragment,{children:i}):null},b=r.forwardRef((function(r,t){var a=r.className,l=r.disabled,s=r.decorator,o=r.selected,c=r.label,d=r.subtitle,p=r.rightDecorator,u=r.onClick;return e.jsxs(h,n.__assign({className:a,disabled:l,selected:o,withClick:!!u,onClick:function(n){return!l&&u&&u(n)},ref:t},{children:[e.jsxs("div",n.__assign({className:["___icon-wrapper",s?"has-icon":""].join(" ")},{children:[s,e.jsx(_,{label:"string"==typeof c?c:""})]})),e.jsxs(g,{children:[e.jsx(i.Text,n.__assign({type:"label"},{children:c})),d&&e.jsx(i.Text,n.__assign({type:"caption"},{children:d}))]}),p]}))}));exports.ListItem=b;
+"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),i=require("../text/Text.js"),t=require("../../styles/constants/theme.js"),a=require("styled-components");function l(n){return n&&n.__esModule?n:{default:n}}var s,o,c,d,p,u,m=l(a),h=m.default.div(d||(d=n.__makeTemplateObject(["\n  padding: "," ",";\n  display: flex;\n  flex-direction: row;\n  gap: ",";\n  align-items: center;\n  min-height: ",";\n  border-radius: ",";\n  line-height: 16px;\n\n  .___icon-wrapper {\n    display: none;\n    &.has-icon {\n      display: inline-block;\n    }\n  }\n\n  ","\n\n  ","\n\n  :hover {\n    ","\n  }\n"],["\n  padding: "," ",";\n  display: flex;\n  flex-direction: row;\n  gap: ",";\n  align-items: center;\n  min-height: ",";\n  border-radius: ",";\n  line-height: 16px;\n\n  .___icon-wrapper {\n    display: none;\n    &.has-icon {\n      display: inline-block;\n    }\n  }\n\n  ","\n\n  ","\n\n  :hover {\n    ","\n  }\n"])),t.theme.space8,t.theme.space16,t.theme.space16,t.theme.sizeXl,t.theme.radius8,(function(e){var r=e.disabled,i=e.selected;return!r&&i&&a.css(s||(s=n.__makeTemplateObject(["\n      background-color: ",";\n      * {\n        color: ",";\n      }\n    "],["\n      background-color: ",";\n      * {\n        color: ",";\n      }\n    "])),t.theme.blue100,t.theme.blue800)}),(function(e){return e.disabled&&a.css(o||(o=n.__makeTemplateObject(["\n      * {\n        color: ",";\n      }\n      cursor: not-allowed;\n    "],["\n      * {\n        color: ",";\n      }\n      cursor: not-allowed;\n    "])),t.theme.gray600)}),(function(e){var r=e.disabled,i=e.selected,l=e.withClick;return!r&&l&&!i&&a.css(c||(c=n.__makeTemplateObject(["\n        background-color: ",";\n        cursor: pointer;\n      "],["\n        background-color: ",";\n        cursor: pointer;\n      "])),t.theme.gray100)})),g=m.default.div(p||(p=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  flex-grow: 1;\n"],["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  flex-grow: 1;\n"]))),x=m.default.img(u||(u=n.__makeTemplateObject(["\n  margin-right: ",";\n  width: 32px;\n  height: 32px;\n  border-radius: ",";\n"],["\n  margin-right: ",";\n  width: 32px;\n  height: 32px;\n  border-radius: ",";\n"])),t.theme.space16,t.theme.radius6),_=function(n){var r=n.icon,i=n.iconComponent,t=n.label;return r?e.jsx(x,{alt:t,src:r}):i?e.jsx(e.Fragment,{children:i}):null},b=r.forwardRef((function(r,t){var a=r.className,l=r.decorator,s=r.disabled,o=r.label,c=r.onClick,d=r.rightDecorator,p=r.selected,u=r.subtitle;return e.jsxs(h,n.__assign({ref:t,className:a,disabled:s,onClick:function(n){return!s&&c&&c(n)},selected:p,withClick:!!c},{children:[e.jsxs("div",n.__assign({className:["___icon-wrapper",l?"has-icon":""].join(" ")},{children:[l,e.jsx(_,{label:"string"==typeof o?o:""})]})),e.jsxs(g,{children:[e.jsx(i.Text,n.__assign({type:"label"},{children:o})),u&&e.jsx(i.Text,n.__assign({type:"caption"},{children:u}))]}),d]}))}));exports.ListItem=b;

package/components/mdx/mdx-anchor/MdxAnchor.d.ts

@@ -1,9 +1,9 @@
 import { type ReactNode } from 'react';
 export type MdxAnchorProps = {
-    className?: string;
     children?: ReactNode;
+    className?: string;
     href?: string;
-    title?: string;
     internalPaths: string[];
+    title?: string;
 };
 export declare const MdxAnchor: import("react").ForwardRefExoticComponent<MdxAnchorProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/components/mdx/mdx-anchor/MdxAnchor.js

@@ -1 +1 @@
-"use strict";var e=require("../../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),n=require("react"),t=require("../../../utils/getIsInternalLink.js"),s=n.forwardRef((function(n,s){var a=n.className,i=n.children,l=n.href,c=n.title,f=n.internalPaths;return t.getIsInternalLink({href:l,internalPaths:f}).isInternalLink?r.jsx("a",e.__assign({className:a||"",ref:s,title:c,href:l},{children:i})):r.jsx("a",e.__assign({className:a||"",href:l,ref:s,rel:"nofollow noopener noreferrer",target:"_blank",title:c},{children:i}))}));exports.MdxAnchor=s;
+"use strict";var e=require("../../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),n=require("react"),t=require("../../../utils/getIsInternalLink.js"),s=n.forwardRef((function(n,s){var a=n.children,i=n.className,l=n.href,c=n.internalPaths,f=n.title;return t.getIsInternalLink({href:l,internalPaths:c}).isInternalLink?r.jsx("a",e.__assign({ref:s,className:i||"",href:l,title:f},{children:a})):r.jsx("a",e.__assign({ref:s,className:i||"",href:l,rel:"nofollow noopener noreferrer",target:"_blank",title:f},{children:a}))}));exports.MdxAnchor=s;

package/components/mdx/mdx-button/MdxButton.d.ts

@@ -4,6 +4,6 @@ export type MdxButtonProps = ButtonProps<'a'> & {
     internalPaths?: string[];
 };
 export declare const MdxButton: {
-    ({ intent, href, children, className, internalPaths, ...props }: MdxButtonProps): JSX.Element;
+    ({ children, className, href, intent, internalPaths, ...props }: MdxButtonProps): JSX.Element;
     stableName: string;
 };

package/components/mdx/mdx-button/MdxButton.js

@@ -1 +1 @@
-"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("../../button/Button.js"),t=require("../../../icons/ArrowRightIcon.js"),i=require("../../../styles/constants/theme.js"),o=require("../../../utils/getIsInternalLink.js"),a=require("styled-components");function s(n){return n&&n.__esModule?n:{default:n}}require("react"),require("../../spinner/Spinner.js"),require("../../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../../button/_Ripple.js"),require("../../button/useRipple.js"),require("../../../icons/icon-base/_IconBase.js");var u,c=s(a).default.div(u||(u=n.__makeTemplateObject(["\n  margin-bottom: 8px;\n  max-width: fit-content;\n  a {\n    color: ",";\n  }\n  p {\n    margin: 0 !important;\n  }\n"],["\n  margin-bottom: 8px;\n  max-width: fit-content;\n  a {\n    color: ",";\n  }\n  p {\n    margin: 0 !important;\n  }\n"])),(function(n){return n.isPrimary?"".concat(i.theme.gray0," !important"):"".concat(i.theme.gray900,"  !important")})),l=function(i){var a=i.intent,s=i.href,u=i.children,l=i.className,m=i.internalPaths,p=n.__rest(i,["intent","href","children","className","internalPaths"]),h="primary"===a,d=o.getIsInternalLink({href:s,internalPaths:m}).isInternalLink;if(!s)throw new Error("<MdxButton>".concat(u,"</MdxButton> requires an href"));return e.jsx(c,n.__assign({isPrimary:h},{children:e.jsx(r.Button,n.__assign({tag:"a",intent:a,icon:h&&e.jsx(t.ArrowRightIcon,{size:20}),iconRight:h,href:s,target:d?void 0:"_blank",rel:d?void 0:"nofollow noopener noreferrer",className:["link-button",l].join(" ")},p,{children:u}))}))};l.stableName="MdxButton",exports.MdxButton=l;
+"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("../../button/Button.js"),t=require("../../../icons/ArrowRightIcon.js"),i=require("../../../styles/constants/theme.js"),o=require("../../../utils/getIsInternalLink.js"),a=require("styled-components");function s(n){return n&&n.__esModule?n:{default:n}}require("react"),require("../../spinner/Spinner.js"),require("../../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../../button/_Ripple.js"),require("../../button/useRipple.js"),require("../../../icons/icon-base/_IconBase.js");var u,c=s(a).default.div(u||(u=n.__makeTemplateObject(["\n  margin-bottom: 8px;\n  max-width: fit-content;\n  a {\n    color: ",";\n  }\n  p {\n    margin: 0 !important;\n  }\n"],["\n  margin-bottom: 8px;\n  max-width: fit-content;\n  a {\n    color: ",";\n  }\n  p {\n    margin: 0 !important;\n  }\n"])),(function(n){return n.isPrimary?"".concat(i.theme.gray0," !important"):"".concat(i.theme.gray900,"  !important")})),l=function(i){var a=i.children,s=i.className,u=i.href,l=i.intent,m=i.internalPaths,p=n.__rest(i,["children","className","href","intent","internalPaths"]),h="primary"===l,d=o.getIsInternalLink({href:u,internalPaths:m}).isInternalLink;if(!u)throw new Error("<MdxButton>".concat(a,"</MdxButton> requires an href"));return e.jsx(c,n.__assign({isPrimary:h},{children:e.jsx(r.Button,n.__assign({className:["link-button",s].join(" "),href:u,icon:h&&e.jsx(t.ArrowRightIcon,{size:20}),iconRight:h,intent:l,rel:d?void 0:"nofollow noopener noreferrer",tag:"a",target:d?void 0:"_blank"},p,{children:a}))}))};l.stableName="MdxButton",exports.MdxButton=l;

package/components/mdx/mdx-card/MdxCard.d.ts

@@ -2,17 +2,17 @@
 import type { ColorPrefix } from "../../../types/Color";
 import { type Products } from "../../../utils/getProductDetails";
 export type Props = {
-    product?: Products;
-    /**
-     * @default false
-     */
-    noGlowOnHover?: boolean;
+    children?: JSX.Element;
     /**
      * @default gray
      */
     glowingColor?: ColorPrefix;
+    /**
+     * @default false
+     */
+    noGlowOnHover?: boolean;
+    product?: Products;
     xlabel: string;
     xsubLabel: string;
-    children?: JSX.Element;
 };
-export declare const MdxCard: ({ product, glowingColor, noGlowOnHover, xlabel, xsubLabel, children, }: Props) => JSX.Element;
+export declare const MdxCard: ({ children, glowingColor, noGlowOnHover, product, xlabel, xsubLabel, }: Props) => JSX.Element;

package/components/mdx/mdx-card/MdxCard.js

@@ -1 +1 @@
-"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),t=require("../../../styles/constants/theme.js"),o=require("../../../utils/getProductDetails.js"),i=require("styled-components"),s=require("../mdx-anchor/MdxAnchor.js");function c(n){return n&&n.__esModule?n:{default:n}}require("../../../icons/custom/products/CheckoutIcon.js"),require("../../../icons/icon-base/_IconBase.js"),require("../../../icons/custom/products/ClassifyIcon.js"),require("../../../icons/custom/products/ClearIcon.js"),require("../../../icons/custom/products/DashboardIcon.js"),require("../../../icons/custom/products/HelloIcon.js"),require("../../../icons/custom/products/LandedCostIcon.js"),require("../../../icons/custom/products/RateIcon.js"),require("../../../icons/custom/products/RestrictIcon.js"),require("../../../icons/custom/products/ScreenIcon.js"),require("../../../utils/getIsInternalLink.js");var a,l,p,d,u=c(i),x=u.default(s.MdxAnchor)(a||(a=n.__makeTemplateObject([""],[""]))),g=u.default.div(p||(p=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 1px;\n  box-shadow: inset 0px 0px 1px 1px ",";\n  border-radius: 12px;\n  position: relative;\n  font-size: 14px;\n  gap: 4px;\n  line-height: 24px;\n  overflow: hidden;\n  cursor: pointer;\n  z-index: 0;\n\n  ",""," {\n    background: ",";\n    height: 100%;\n    border-radius: 11px;\n    padding: 20px 24px;\n  }\n  ","\n\n  b {\n    color: ",";\n    font-weight: 700;\n  }\n  p {\n    font-weight: 400;\n    color: ",";\n    margin: 0;\n  }\n\n  > div {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    span {\n      color: ",";\n      font-size: 12px;\n      margin-bottom: 0;\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 1px;\n  box-shadow: inset 0px 0px 1px 1px ",";\n  border-radius: 12px;\n  position: relative;\n  font-size: 14px;\n  gap: 4px;\n  line-height: 24px;\n  overflow: hidden;\n  cursor: pointer;\n  z-index: 0;\n\n  ",""," {\n    background: ",";\n    height: 100%;\n    border-radius: 11px;\n    padding: 20px 24px;\n  }\n  ","\n\n  b {\n    color: ",";\n    font-weight: 700;\n  }\n  p {\n    font-weight: 400;\n    color: ",";\n    margin: 0;\n  }\n\n  > div {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    span {\n      color: ",";\n      font-size: 12px;\n      margin-bottom: 0;\n    }\n  }\n"])),t.theme.gray200,x,x,t.theme.gray0,(function(e){return!e.noGlowOnHover&&e.glowingColor&&i.css(l||(l=n.__makeTemplateObject(["\n      &::after {\n        content: '';\n        position: absolute;\n        opacity: 0;\n        width: 100%;\n        height: 100%;\n        top: calc(var(--y, 0) * 1px - 50%);\n        left: calc(var(--x, 0) * 1px - 50%);\n        background: radial-gradient(\n          circle,\n          "," 0%,\n          transparent 70%\n        );\n        filter: blur(20px);\n        transition: opacity 0.5s;\n        z-index: -1;\n      }\n      :hover {\n        &::after {\n          opacity: 1;\n        }\n      }\n    "],["\n      &::after {\n        content: '';\n        position: absolute;\n        opacity: 0;\n        width: 100%;\n        height: 100%;\n        top: calc(var(--y, 0) * 1px - 50%);\n        left: calc(var(--x, 0) * 1px - 50%);\n        background: radial-gradient(\n          circle,\n          "," 0%,\n          transparent 70%\n        );\n        filter: blur(20px);\n        transition: opacity 0.5s;\n        z-index: -1;\n      }\n      :hover {\n        &::after {\n          opacity: 1;\n        }\n      }\n    "])),t.theme["".concat(e.glowingColor,"600")])}),t.theme.primary,t.theme.gray700,t.theme.gray800),h=u.default.div(d||(d=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n"],["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n"])));exports.MdxCard=function(t){var i=t.product,s=t.glowingColor,c=void 0===s?"gray":s,a=t.noGlowOnHover,l=void 0!==a&&a,p=t.xlabel,d=t.xsubLabel,u=t.children,f=r.useRef(null);r.useEffect((function(){var n=f.current,e=function(e){if(n){var r=n.getBoundingClientRect(),t=r.x,o=r.y;n.style.setProperty("--x",(e.clientX-t).toString()),n.style.setProperty("--y",(e.clientY-o).toString())}};return l||null==n||n.addEventListener("mousemove",e),function(){l||null==n||n.removeEventListener("mousemove",e)}}),[l]);var m=function(){if(u){var n=(u.props||u.props.children.props).href;if(n)return n;throw new Error("MdxCard will only accept one link as a child.")}return null}(),v=o.getProductDetails(i),b=i?v.color:c;return e.jsx(g,n.__assign({ref:f,glowingColor:b,noGlowOnHover:l},{children:e.jsx(x,n.__assign({as:m?"a":"div",href:m||void 0,title:p,className:"link-button"},{children:e.jsxs(h,{children:[i&&e.jsx("div",{children:v.icon}),e.jsxs("div",{children:[e.jsx("b",{children:p}),e.jsx("p",{children:d})]})]})}))}))};
+"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),t=require("../../../styles/constants/theme.js"),o=require("../../../utils/getProductDetails.js"),i=require("styled-components"),s=require("../mdx-anchor/MdxAnchor.js");function c(n){return n&&n.__esModule?n:{default:n}}require("../../../icons/custom/products/CheckoutIcon.js"),require("../../../icons/icon-base/_IconBase.js"),require("../../../icons/custom/products/ClassifyIcon.js"),require("../../../icons/custom/products/ClearIcon.js"),require("../../../icons/custom/products/DashboardIcon.js"),require("../../../icons/custom/products/HelloIcon.js"),require("../../../icons/custom/products/LandedCostIcon.js"),require("../../../icons/custom/products/RateIcon.js"),require("../../../icons/custom/products/RestrictIcon.js"),require("../../../icons/custom/products/ScreenIcon.js"),require("../../../utils/getIsInternalLink.js");var a,l,p,d,u=c(i),x=u.default(s.MdxAnchor)(a||(a=n.__makeTemplateObject([""],[""]))),g=u.default.div(p||(p=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 1px;\n  box-shadow: inset 0px 0px 1px 1px ",";\n  border-radius: 12px;\n  position: relative;\n  font-size: 14px;\n  gap: 4px;\n  line-height: 24px;\n  overflow: hidden;\n  cursor: pointer;\n  z-index: 0;\n\n  ",""," {\n    background: ",";\n    height: 100%;\n    border-radius: 11px;\n    padding: 20px 24px;\n  }\n  ","\n\n  b {\n    color: ",";\n    font-weight: 700;\n  }\n  p {\n    font-weight: 400;\n    color: ",";\n    margin: 0;\n  }\n\n  > div {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    span {\n      color: ",";\n      font-size: 12px;\n      margin-bottom: 0;\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 1px;\n  box-shadow: inset 0px 0px 1px 1px ",";\n  border-radius: 12px;\n  position: relative;\n  font-size: 14px;\n  gap: 4px;\n  line-height: 24px;\n  overflow: hidden;\n  cursor: pointer;\n  z-index: 0;\n\n  ",""," {\n    background: ",";\n    height: 100%;\n    border-radius: 11px;\n    padding: 20px 24px;\n  }\n  ","\n\n  b {\n    color: ",";\n    font-weight: 700;\n  }\n  p {\n    font-weight: 400;\n    color: ",";\n    margin: 0;\n  }\n\n  > div {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    span {\n      color: ",";\n      font-size: 12px;\n      margin-bottom: 0;\n    }\n  }\n"])),t.theme.gray200,x,x,t.theme.gray0,(function(e){return!e.noGlowOnHover&&e.glowingColor&&i.css(l||(l=n.__makeTemplateObject(["\n      &::after {\n        content: '';\n        position: absolute;\n        opacity: 0;\n        width: 100%;\n        height: 100%;\n        top: calc(var(--y, 0) * 1px - 50%);\n        left: calc(var(--x, 0) * 1px - 50%);\n        background: radial-gradient(\n          circle,\n          "," 0%,\n          transparent 70%\n        );\n        filter: blur(20px);\n        transition: opacity 0.5s;\n        z-index: -1;\n      }\n      :hover {\n        &::after {\n          opacity: 1;\n        }\n      }\n    "],["\n      &::after {\n        content: '';\n        position: absolute;\n        opacity: 0;\n        width: 100%;\n        height: 100%;\n        top: calc(var(--y, 0) * 1px - 50%);\n        left: calc(var(--x, 0) * 1px - 50%);\n        background: radial-gradient(\n          circle,\n          "," 0%,\n          transparent 70%\n        );\n        filter: blur(20px);\n        transition: opacity 0.5s;\n        z-index: -1;\n      }\n      :hover {\n        &::after {\n          opacity: 1;\n        }\n      }\n    "])),t.theme["".concat(e.glowingColor,"600")])}),t.theme.primary,t.theme.gray700,t.theme.gray800),h=u.default.div(d||(d=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n"],["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n"])));exports.MdxCard=function(t){var i=t.children,s=t.glowingColor,c=void 0===s?"gray":s,a=t.noGlowOnHover,l=void 0!==a&&a,p=t.product,d=t.xlabel,u=t.xsubLabel,f=r.useRef(null);r.useEffect((function(){var n=f.current,e=function(e){if(n){var r=n.getBoundingClientRect(),t=r.x,o=r.y;n.style.setProperty("--x",(e.clientX-t).toString()),n.style.setProperty("--y",(e.clientY-o).toString())}};return l||null==n||n.addEventListener("mousemove",e),function(){l||null==n||n.removeEventListener("mousemove",e)}}),[l]);var m=function(){if(i){var n=(i.props||i.props.children.props).href;if(n)return n;throw new Error("MdxCard will only accept one link as a child.")}return null}(),v=o.getProductDetails(p),b=p?v.color:c;return e.jsx(g,n.__assign({ref:f,glowingColor:b,noGlowOnHover:l},{children:e.jsx(x,n.__assign({as:m?"a":"div",className:"link-button",href:m||void 0,title:d},{children:e.jsxs(h,{children:[p&&e.jsx("div",{children:v.icon}),e.jsxs("div",{children:[e.jsx("b",{children:d}),e.jsx("p",{children:u})]})]})}))}))};

package/components/mdx/mdx-card-grid/MdxCardGrid.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 export type Props = {
-    twoColumn?: boolean;
     children: ReactNode;
+    twoColumn?: boolean;
 };
-export declare const MdxCardGrid: ({ twoColumn, children }: Props) => JSX.Element;
+export declare const MdxCardGrid: ({ children, twoColumn }: Props) => JSX.Element;

package/components/mdx/mdx-card-grid/MdxCardGrid.js

@@ -1 +1 @@
-"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime");function t(n){return n&&n.__esModule?n:{default:n}}var i,r=t(require("styled-components")).default.div(i||(i=n.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ",";\n  gap: 16px;\n  margin-top: 24px;\n\n  > a > div,\n  > div {\n    height: 100%;\n  }\n\n  @media (max-width: 1510px) {\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  }\n"],["\n  display: grid;\n  grid-template-columns: ",";\n  gap: 16px;\n  margin-top: 24px;\n\n  > a > div,\n  > div {\n    height: 100%;\n  }\n\n  @media (max-width: 1510px) {\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  }\n"])),(function(n){return n.twoColumn?"repeat(2, minmax(240px, 1fr))":"repeat(3, minmax(240px, 1fr))"}));exports.MdxCardGrid=function(t){var i=t.twoColumn,a=t.children;return e.jsx(r,n.__assign({twoColumn:i},{children:a}))};
+"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime");function t(n){return n&&n.__esModule?n:{default:n}}var i,r=t(require("styled-components")).default.div(i||(i=n.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ",";\n  gap: 16px;\n  margin-top: 24px;\n\n  > a > div,\n  > div {\n    height: 100%;\n  }\n\n  @media (max-width: 1510px) {\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  }\n"],["\n  display: grid;\n  grid-template-columns: ",";\n  gap: 16px;\n  margin-top: 24px;\n\n  > a > div,\n  > div {\n    height: 100%;\n  }\n\n  @media (max-width: 1510px) {\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  }\n"])),(function(n){return n.twoColumn?"repeat(2, minmax(240px, 1fr))":"repeat(3, minmax(240px, 1fr))"}));exports.MdxCardGrid=function(t){var i=t.children,a=t.twoColumn;return e.jsx(r,n.__assign({twoColumn:a},{children:i}))};

package/components/mdx/mdx-code-block/MdxCodeBlock.d.ts

@@ -2,9 +2,9 @@ import { type ReactElement } from 'react';
 import type { Theme } from "../../../types";
 export type Props = {
     children?: ReactElement;
-    xlabel: string;
-    type: 'JSON' | 'GraphQL';
     maxHeight?: number;
     themeOverride?: Theme;
+    type: 'JSON' | 'GraphQL';
+    xlabel: string;
 };
-export declare const MdxCodeBlock: ({ children, xlabel, type, maxHeight, themeOverride, }: Props) => JSX.Element;
+export declare const MdxCodeBlock: ({ children, maxHeight, themeOverride, type, xlabel, }: Props) => JSX.Element;