@veeqo/ui 9.0.0-beta-3 → 9.0.0

package/dist/components/Toggle/Toggle.cjs

@@ -1,2 +1,21 @@
-"use strict";var e=require("react"),a=require("./styled.cjs"),t=require("../Choice/Choice.cjs");function i(e){return e&&e.__esModule?e:{default:e}}var l=i(e);const d=e.forwardRef((({id:e="testid",className:i,name:d,switched:r,small:s,onClick:c=(()=>{}),disabled:n,ariaLabel:o,inputPosition:u="right",...m},h)=>l.default.createElement(t.Choice,{id:e,inputPosition:u,...m},l.default.createElement(a.Wrapper,{className:i,disabled:n},l.default.createElement(a.Switch,{small:s,disabled:n,className:i},l.default.createElement(a.Input,{id:e,role:"switch",type:"checkbox",name:d,"aria-label":o,checked:!!r,onChange:e=>n?void 0:c(e),disabled:n,ref:h}),l.default.createElement(a.Slider,{switched:r,disabled:n}))))));exports.Toggle=d;
+'use strict';
+
+var React = require('react');
+var styled = require('./styled.cjs');
+var Choice = require('../Choice/Choice.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
+ */
+const Toggle = React.forwardRef(({ id = 'testid', className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => (React__default.default.createElement(Choice.Choice, { id: id, inputPosition: inputPosition, ...choiceProps },
+    React__default.default.createElement(styled.Wrapper, { className: className, disabled: disabled },
+        React__default.default.createElement(styled.Switch, { small: small, disabled: disabled, className: className },
+            React__default.default.createElement(styled.Input, { id: id, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
+            React__default.default.createElement(styled.Slider, { switched: switched, disabled: disabled }))))));
+
+exports.Toggle = Toggle;
 //# sourceMappingURL=Toggle.cjs.map

package/dist/components/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":[null],"names":["forwardRef","React","Choice","Wrapper","Switch","Input","Slider"],"mappings":";;;;;;;;;;AAMA;;AAEG;AACU,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,GAAG,QAAQ,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,GAAG,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,MAEHC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAAa,EAAA,GAAO,WAAoC,EAAA;IACrFD,sBAAC,CAAA,aAAA,CAAAE,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,QAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;YAC5DH,sBAAC,CAAA,aAAA,CAAAI,YAAK,EACJ,EAAA,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,YAAAJ,sBAAA,CAAA,aAAA,CAACK,aAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC3C,CACD,CACH,CACV;;;;"}

package/dist/components/Toggle/Toggle.d.ts

@@ -4,4 +4,3 @@ import { ToggleProps } from './types';
  * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
  */
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Toggle/Toggle.js

@@ -1,2 +1,15 @@
-import e,{forwardRef as a}from"react";import{Wrapper as i,Switch as t,Input as l,Slider as s}from"./styled.js";import{Choice as c}from"../Choice/Choice.js";const d=a((({id:a="testid",className:d,name:o,switched:m,small:r,onClick:n=(()=>{}),disabled:h,ariaLabel:b,inputPosition:p="right",...E},f)=>e.createElement(c,{id:a,inputPosition:p,...E},e.createElement(i,{className:d,disabled:h},e.createElement(t,{small:r,disabled:h,className:d},e.createElement(l,{id:a,role:"switch",type:"checkbox",name:o,"aria-label":b,checked:!!m,onChange:e=>h?void 0:n(e),disabled:h,ref:f}),e.createElement(s,{switched:m,disabled:h}))))));export{d as Toggle};
+import React, { forwardRef } from 'react';
+import { Wrapper, Switch, Input, Slider } from './styled.js';
+import { Choice } from '../Choice/Choice.js';
+
+/**
+ * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
+ */
+const Toggle = forwardRef(({ id = 'testid', className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => (React.createElement(Choice, { id: id, inputPosition: inputPosition, ...choiceProps },
+    React.createElement(Wrapper, { className: className, disabled: disabled },
+        React.createElement(Switch, { small: small, disabled: disabled, className: className },
+            React.createElement(Input, { id: id, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
+            React.createElement(Slider, { switched: switched, disabled: disabled }))))));
+
+export { Toggle };
 //# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAMA;;AAEG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,GAAG,QAAQ,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,GAAG,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,MAEH,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAAa,EAAA,GAAO,WAAoC,EAAA;IACrF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;YAC5D,KAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC3C,CACD,CACH,CACV;;;;"}

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

@@ -1,2 +1 @@
 export { Toggle } from './Toggle';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Toggle/styled.cjs

@@ -1,77 +1,20 @@
-"use strict";var e=require("styled-components"),t=require("../BaseContainer/BaseContainer.cjs"),o=require("../../theme/index.cjs");function s(e){return e&&e.__esModule?e:{default:e}}var r=s(e);const a=r.default.span`
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 18px;
-  background-color: #cdd1d5;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
+'use strict';
 
-  &:after {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-    background-color: ${({disabled:e,switched:t})=>e&&t?o.theme.colors.secondary.blue.lightest:"white"};
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-  }
-`,i=r.default.input`
-  width: 100%;
-  height: 100%;
-  border-radius: ${o.theme.radius.base};
-  z-index: 2;
-  margin: 0;
+var styled = require('styled-components');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var index = require('../../theme/index.cjs');
 
-  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  &:focus-visible + ${a} {
-    box-shadow: 0 0 0 4px ${o.theme.colors.brand.blue.light};
-  }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  &:checked + ${a} {
-    background-color: #0079d1;
-  }
+const Slider = styled__default.default.span.withConfig({ displayName: "vui--Slider", componentId: "vui--x03mdi" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? index.theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
+const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1ccelw2" }) `width:100%;height:100%;border-radius:${index.theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${index.theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${index.theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${index.theme.colors.secondary.blue.light};}`;
+const Switch = styled__default.default.span.withConfig({ displayName: "vui--Switch", componentId: "vui--13yy1uj" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
+const Wrapper = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--69792q" }) `display:inline-block;user-select:none;`;
 
-  &:disabled + ${a} {
-    background-color: ${o.theme.colors.neutral.grey.base};
-  }
-
-  &:checked:disabled + ${a} {
-    background-color: ${o.theme.colors.secondary.blue.light};
-  }
-`,l=r.default.span`
-  display: flex;
-  position: relative;
-  height: ${({small:e})=>e?"28px":"36px"};
-  width: ${({small:e})=>e?"56px":"72px"};
-  z-index: 1;
-
-  input {
-    position: absolute;
-    opacity: 0;
-  }
-
-  // configure size and animation
-  ${a}:after {
-    height: ${({small:e})=>e?"22px":"28px"};
-    width: ${({small:e})=>e?"22px":"28px"};
-    left: ${({small:e})=>e?"3px":"4px"};
-    bottom: ${({small:e})=>e?"3px":"4px"};
-  }
-
-  ${i}:checked + ${a} {
-    &:after,
-    svg {
-      -webkit-transform: translateX(${({small:e})=>e?"28px":"36px"});
-      -ms-transform: translateX(${({small:e})=>e?"28px":"36px"});
-      transform: translateX(${({small:e})=>e?"28px":"36px"});
-    }
-  }
-`,n=r.default(t.BaseContainer)`
-  display: inline-block;
-  user-select: none;
-`;exports.Input=i,exports.Slider=a,exports.Switch=l,exports.Wrapper=n;
+exports.Input = Input;
+exports.Slider = Slider;
+exports.Switch = Switch;
+exports.Wrapper = Wrapper;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Toggle/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":[null],"names":["styled","theme","BaseContainer"],"mappings":";;;;;;;;;;AAMA,MAAM,MAAM,GAAGA,uBAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACPA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAGD,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAGA,uBAAM,CAACE,2BAAa,CAAC;;;;;;;"}

package/dist/components/Toggle/styled.d.ts

@@ -9,4 +9,3 @@ declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
 export { Switch, Slider, Input, Wrapper };
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Toggle/styled.js

@@ -1,77 +1,11 @@
-import o from"styled-components";import{BaseContainer as t}from"../BaseContainer/BaseContainer.js";import{theme as e}from"../../theme/index.js";const s=o.span`
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 18px;
-  background-color: #cdd1d5;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
+import styled from 'styled-components';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { theme } from '../../theme/index.js';
 
-  &:after {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-    background-color: ${({disabled:o,switched:t})=>o&&t?e.colors.secondary.blue.lightest:"white"};
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-  }
-`,a=o.input`
-  width: 100%;
-  height: 100%;
-  border-radius: ${e.radius.base};
-  z-index: 2;
-  margin: 0;
+const Slider = styled.span.withConfig({ displayName: "vui--Slider", componentId: "vui--x03mdi" }) `content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:18px;background-color:#cdd1d5;-webkit-transition:0.3s;transition:0.3s;&:after{content:'';position:absolute;border-radius:50%;background-color:${({ disabled, switched }) => disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};-webkit-transition:0.3s;transition:0.3s;}`;
+const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1ccelw2" }) `width:100%;height:100%;border-radius:${theme.radius.base};z-index:2;margin:0;cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};&:focus-visible + ${Slider}{box-shadow:0 0 0 4px ${theme.colors.brand.blue.light};}&:checked + ${Slider}{background-color:#0079d1;}&:disabled + ${Slider}{background-color:${theme.colors.neutral.grey.base};}&:checked:disabled + ${Slider}{background-color:${theme.colors.secondary.blue.light};}`;
+const Switch = styled.span.withConfig({ displayName: "vui--Switch", componentId: "vui--13yy1uj" }) `display:flex;position:relative;height:${({ small }) => (small ? '28px' : '36px')};width:${({ small }) => (small ? '56px' : '72px')};z-index:1;input{position:absolute;opacity:0;}${Slider}:after{height:${({ small }) => (small ? '22px' : '28px')};width:${({ small }) => (small ? '22px' : '28px')};left:${({ small }) => (small ? '3px' : '4px')};bottom:${({ small }) => (small ? '3px' : '4px')};}${Input}:checked + ${Slider}{&:after,svg{-webkit-transform:translateX(${({ small }) => (small ? '28px' : '36px')});-ms-transform:translateX(${({ small }) => (small ? '28px' : '36px')});transform:translateX(${({ small }) => (small ? '28px' : '36px')});}}`;
+const Wrapper = styled(BaseContainer).withConfig({ displayName: "vui--Wrapper", componentId: "vui--69792q" }) `display:inline-block;user-select:none;`;
 
-  cursor: ${({disabled:o})=>o?"not-allowed":"pointer"};
-
-  &:focus-visible + ${s} {
-    box-shadow: 0 0 0 4px ${e.colors.brand.blue.light};
-  }
-
-  &:checked + ${s} {
-    background-color: #0079d1;
-  }
-
-  &:disabled + ${s} {
-    background-color: ${e.colors.neutral.grey.base};
-  }
-
-  &:checked:disabled + ${s} {
-    background-color: ${e.colors.secondary.blue.light};
-  }
-`,i=o.span`
-  display: flex;
-  position: relative;
-  height: ${({small:o})=>o?"28px":"36px"};
-  width: ${({small:o})=>o?"56px":"72px"};
-  z-index: 1;
-
-  input {
-    position: absolute;
-    opacity: 0;
-  }
-
-  // configure size and animation
-  ${s}:after {
-    height: ${({small:o})=>o?"22px":"28px"};
-    width: ${({small:o})=>o?"22px":"28px"};
-    left: ${({small:o})=>o?"3px":"4px"};
-    bottom: ${({small:o})=>o?"3px":"4px"};
-  }
-
-  ${a}:checked + ${s} {
-    &:after,
-    svg {
-      -webkit-transform: translateX(${({small:o})=>o?"28px":"36px"});
-      -ms-transform: translateX(${({small:o})=>o?"28px":"36px"});
-      transform: translateX(${({small:o})=>o?"28px":"36px"});
-    }
-  }
-`,r=o(t)`
-  display: inline-block;
-  user-select: none;
-`;export{a as Input,s as Slider,i as Switch,r as Wrapper};
+export { Input, Slider, Switch, Wrapper };
 //# sourceMappingURL=styled.js.map

package/dist/components/Toggle/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Toggle/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAMA,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAgBF,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uNAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KACzC,QAAQ,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AAM3E,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAGP,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAIxB,2BAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA,mBAAA,EAE9C,MAAM,CACA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAGzC,MAAM,CAAA,wCAAA,EAIL,MAAM,CAAA,kBAAA,EACC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAG7B,uBAAA,EAAA,MAAM,qBACP,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIzD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAGd,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,OAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,8CAAA,EAS/C,MAAM,CAAA,cAAA,EACI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,UACzC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CACzC,MAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,WACpC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAGhD,EAAA,EAAA,KAAK,cAAc,MAAM,CAAA,0CAAA,EAGS,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAC5C,2BAAA,EAAA,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA,uBAAA,EAC5C,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAKtE,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;;;;"}

package/dist/components/Toggle/types.d.ts

@@ -9,4 +9,3 @@ export interface ToggleProps extends EventHandlerProps, ForwardedChoiceProps {
     disabled?: boolean;
     ariaLabel?: string;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/components/ToggleButton/ToggleButton.cjs

@@ -1,2 +1,13 @@
-"use strict";var e=require("react"),t=require("./styled.cjs");function r(e){return e&&e.__esModule?e:{default:e}}var d=r(e);exports.ToggleButton=({children:e,checked:r,size:a="base",disabled:s=!1,onChange:n})=>d.default.createElement(t.StyledButton,{type:"button",checked:r,size:a,disabled:s,"aria-pressed":r,tabIndex:"0",onClick:()=>n(!r)},e);
+'use strict';
+
+var React = require('react');
+var styled = require('./styled.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ToggleButton = ({ children, checked, size = 'base', disabled = false, onChange, }) => (React__default.default.createElement(styled.StyledButton, { type: "button", checked: checked, size: size, disabled: disabled, "aria-pressed": checked, tabIndex: "0", onClick: () => onChange(!checked) }, children));
+
+exports.ToggleButton = ToggleButton;
 //# sourceMappingURL=ToggleButton.cjs.map

package/dist/components/ToggleButton/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":[null],"names":["children","checked","size","disabled","onChange","React","createElement","StyledButton","type","tabIndex","onClick"],"mappings":"iJAKsB,EAAAA,WAAAC,UAAAC,OAAA,OAAAC,YAAA,EAAAC,cAAAC,EAAAA,QAAAC,cAAAC,EAAAA,aAAA,CAAAC,KAAA,SAAAP,QAAAA,EAAAC,KAAAA,EAAAC,SAAAA,EAAA,eAAAF,EAAAQ,SAAA,IAAAC,QAAA,IAAAN,GAAAH,IAAAD"}
+{"version":3,"file":"ToggleButton.cjs","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":[null],"names":["React","StyledButton"],"mappings":";;;;;;;;;AAYO,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACU,MAClBA,sBAAC,CAAA,aAAA,CAAAC,mBAAY,EACX,EAAA,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,EACrB,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,MAAM,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAA,EAEhC,QAAQ,CACI;;;;"}

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -7,4 +7,3 @@ export interface ToggleButtonProps {
     onChange: (checked: boolean) => void;
 }
 export declare const ToggleButton: ({ children, checked, size, disabled, onChange, }: ToggleButtonProps) => React.JSX.Element;
-//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,2 +1,7 @@
-import e from"react";import{StyledButton as t}from"./styled.js";const d=({children:d,checked:r,size:s="base",disabled:a=!1,onChange:c})=>e.createElement(t,{type:"button",checked:r,size:s,disabled:a,"aria-pressed":r,tabIndex:"0",onClick:()=>c(!r)},d);export{d as ToggleButton};
+import React from 'react';
+import { StyledButton } from './styled.js';
+
+const ToggleButton = ({ children, checked, size = 'base', disabled = false, onChange, }) => (React.createElement(StyledButton, { type: "button", checked: checked, size: size, disabled: disabled, "aria-pressed": checked, tabIndex: "0", onClick: () => onChange(!checked) }, children));
+
+export { ToggleButton };
 //# sourceMappingURL=ToggleButton.js.map

package/dist/components/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":[null],"names":["ToggleButton","children","checked","size","disabled","onChange","React","createElement","StyledButton","type","tabIndex","onClick"],"mappings":"gEAKU,MAAAA,EAAY,EAAAC,WAAAC,UAAAC,OAAA,OAAAC,YAAA,EAAAC,cAAAC,EAAAC,cAAAC,EAAA,CAAAC,KAAA,SAAAP,QAAAA,EAAAC,KAAAA,EAAAC,SAAAA,EAAA,eAAAF,EAAAQ,SAAA,IAAAC,QAAA,IAAAN,GAAAH,IAAAD"}
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAYO,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACU,MAClB,KAAC,CAAA,aAAA,CAAA,YAAY,EACX,EAAA,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,EACrB,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,MAAM,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAA,EAEhC,QAAQ,CACI;;;;"}

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

@@ -1,2 +1 @@
 export { ToggleButton } from './ToggleButton';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ToggleButton/styled.cjs

@@ -1,49 +1,49 @@
-"use strict";var e=require("styled-components"),o=require("../../theme/index.cjs");function n(e){return e&&e.__esModule?e:{default:e}}const r=n(e).default.button`
-  user-select: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-family: ${o.theme.fontFamily};
-  font-weight: 400;
-  border: 1px solid;
-  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);
+'use strict';
 
-  ${({size:e,checked:o})=>{let n="40px",r="24px",t="24px",i="8px",d="16px",c="4px",s="white",l="#CDD1D5",a="#37424D";return"sm"===e&&(n="32px",r="16px",t="16px",i="4px",d="14px",c="2px"),o&&(s="#0079D1",l="#0079D1",a="white"),`\n      --outline-width: ${c};\n\n      height: ${n};\n      padding-left: ${r};\n      padding-right: ${t};\n      border-radius: ${i};\n      font-size: ${d};\n\n      background-color: ${s};\n      border-color: ${l};\n      color: ${a};\n    `}}
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
 
-  & > * + * {
-    margin-left: 8px;
-  }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  &:hover {
-    cursor: pointer;
-    background-color: ${({checked:e})=>e?"#005A9C":"#FAFAFB"};
-  }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  &:active {
-    background-color: ${({checked:e})=>e?"#005A9C":"#FAFAFB"};
-    border-color: ${({checked:e})=>e?"#005A9C":"#0079D1"};
-    box-shadow: 0 0 0 var(--outline-width) #80bce8;
-  }
+const StyledButton = styled__default.default.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--x718nd" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
+    let height = '40px';
+    let paddingLeft = '24px';
+    let paddingRight = '24px';
+    let borderRadius = '8px';
+    let fontSize = '16px';
+    let outlineWidth = '4px';
+    let backgroundColor = 'white';
+    let borderColor = '#CDD1D5';
+    let color = '#37424D';
+    if (size === 'sm') {
+        height = '32px';
+        paddingLeft = '16px';
+        paddingRight = '16px';
+        borderRadius = '4px';
+        fontSize = '14px';
+        outlineWidth = '2px';
+    }
+    if (checked) {
+        backgroundColor = '#0079D1';
+        borderColor = '#0079D1';
+        color = 'white';
+    }
+    return `
+      --outline-width: ${outlineWidth};
 
-  &:focus {
-    box-shadow: 0 0 0 var(--outline-width) #80bce8;
-    outline: 0;
-  }
+      height: ${height};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      border-radius: ${borderRadius};
+      font-size: ${fontSize};
 
-  &:disabled {
-    cursor: unset;
-    box-shadow: none;
-    background-color: #dfe3e8;
-    border-color: #dfe3e8;
-    color: #637381;
-  }
+      background-color: ${backgroundColor};
+      border-color: ${borderColor};
+      color: ${color};
+    `;
+}} & > * + *{margin-left:8px;}&:hover{cursor:pointer;background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};}&:active{background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};border-color:${({ checked }) => (checked ? '#005A9C' : '#0079D1')};box-shadow:0 0 0 var(--outline-width)#80bce8;}&:focus{box-shadow:0 0 0 var(--outline-width)#80bce8;outline:0;}&:disabled{cursor:unset;box-shadow:none;background-color:#dfe3e8;border-color:#dfe3e8;color:#637381;}& > span{position:relative;top:-1px;}`;
 
-  /* TODO: - Fix typography so these hacks aren't needed */
-  & > span {
-    position: relative;
-    top: -1px;
-  }
-`;exports.StyledButton=r;
+exports.StyledButton = StyledButton;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/ToggleButton/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ToggleButton/styled.ts"],"sourcesContent":[null],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,YAAY,GAAGA,uBAAM,CAAC,MAAM,CAOxB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+HAAA,EAAAC,WAAK,CAAC,UAAU,CAAA,8EAAA,EAK7B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAI;IACtB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,WAAW,GAAG,MAAM;IACxB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,KAAK;IACxB,IAAI,QAAQ,GAAG,MAAM;IACrB,IAAI,YAAY,GAAG,KAAK;IAExB,IAAI,eAAe,GAAG,OAAO;IAC7B,IAAI,WAAW,GAAG,SAAS;IAC3B,IAAI,KAAK,GAAG,SAAS;IAErB,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,MAAM,GAAG,MAAM;QACf,WAAW,GAAG,MAAM;QACpB,YAAY,GAAG,MAAM;QACrB,YAAY,GAAG,KAAK;QACpB,QAAQ,GAAG,MAAM;QACjB,YAAY,GAAG,KAAK;AACrB;AAED,IAAA,IAAI,OAAO,EAAE;QACX,eAAe,GAAG,SAAS;QAC3B,WAAW,GAAG,SAAS;QACvB,KAAK,GAAG,OAAO;AAChB;IAED,OAAO;yBACc,YAAY,CAAA;;gBAErB,MAAM,CAAA;sBACA,WAAW,CAAA;uBACV,YAAY,CAAA;uBACZ,YAAY,CAAA;mBAChB,QAAQ,CAAA;;0BAED,eAAe,CAAA;sBACnB,WAAW,CAAA;eAClB,KAAK,CAAA;KACf;AACH,CAAC,CAAA,oEAAA,EAQqB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAIlD,4BAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CACtD,cAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,yPAAA;;;;"}

package/dist/components/ToggleButton/styled.d.ts

@@ -1,2 +1 @@
 export declare const StyledButton: import("styled-components").StyledComponent<"button", any, any, never>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/ToggleButton/styled.js

@@ -1,49 +1,43 @@
-import o from"styled-components";import{theme as e}from"../../theme/index.js";const n=o.button`
-  user-select: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-family: ${e.fontFamily};
-  font-weight: 400;
-  border: 1px solid;
-  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
 
-  ${({size:o,checked:e})=>{let n="40px",r="24px",t="24px",i="8px",d="16px",c="4px",p="white",s="#CDD1D5",l="#37424D";return"sm"===o&&(n="32px",r="16px",t="16px",i="4px",d="14px",c="2px"),e&&(p="#0079D1",s="#0079D1",l="white"),`\n      --outline-width: ${c};\n\n      height: ${n};\n      padding-left: ${r};\n      padding-right: ${t};\n      border-radius: ${i};\n      font-size: ${d};\n\n      background-color: ${p};\n      border-color: ${s};\n      color: ${l};\n    `}}
+const StyledButton = styled.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--x718nd" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
+    let height = '40px';
+    let paddingLeft = '24px';
+    let paddingRight = '24px';
+    let borderRadius = '8px';
+    let fontSize = '16px';
+    let outlineWidth = '4px';
+    let backgroundColor = 'white';
+    let borderColor = '#CDD1D5';
+    let color = '#37424D';
+    if (size === 'sm') {
+        height = '32px';
+        paddingLeft = '16px';
+        paddingRight = '16px';
+        borderRadius = '4px';
+        fontSize = '14px';
+        outlineWidth = '2px';
+    }
+    if (checked) {
+        backgroundColor = '#0079D1';
+        borderColor = '#0079D1';
+        color = 'white';
+    }
+    return `
+      --outline-width: ${outlineWidth};
 
-  & > * + * {
-    margin-left: 8px;
-  }
+      height: ${height};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      border-radius: ${borderRadius};
+      font-size: ${fontSize};
 
-  &:hover {
-    cursor: pointer;
-    background-color: ${({checked:o})=>o?"#005A9C":"#FAFAFB"};
-  }
+      background-color: ${backgroundColor};
+      border-color: ${borderColor};
+      color: ${color};
+    `;
+}} & > * + *{margin-left:8px;}&:hover{cursor:pointer;background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};}&:active{background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};border-color:${({ checked }) => (checked ? '#005A9C' : '#0079D1')};box-shadow:0 0 0 var(--outline-width)#80bce8;}&:focus{box-shadow:0 0 0 var(--outline-width)#80bce8;outline:0;}&:disabled{cursor:unset;box-shadow:none;background-color:#dfe3e8;border-color:#dfe3e8;color:#637381;}& > span{position:relative;top:-1px;}`;
 
-  &:active {
-    background-color: ${({checked:o})=>o?"#005A9C":"#FAFAFB"};
-    border-color: ${({checked:o})=>o?"#005A9C":"#0079D1"};
-    box-shadow: 0 0 0 var(--outline-width) #80bce8;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 var(--outline-width) #80bce8;
-    outline: 0;
-  }
-
-  &:disabled {
-    cursor: unset;
-    box-shadow: none;
-    background-color: #dfe3e8;
-    border-color: #dfe3e8;
-    color: #637381;
-  }
-
-  /* TODO: - Fix typography so these hacks aren't needed */
-  & > span {
-    position: relative;
-    top: -1px;
-  }
-`;export{n as StyledButton};
+export { StyledButton };
 //# sourceMappingURL=styled.js.map

package/dist/components/ToggleButton/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ToggleButton/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIa,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAOxB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+HAAA,EAAA,KAAK,CAAC,UAAU,CAAA,8EAAA,EAK7B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAI;IACtB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,WAAW,GAAG,MAAM;IACxB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,KAAK;IACxB,IAAI,QAAQ,GAAG,MAAM;IACrB,IAAI,YAAY,GAAG,KAAK;IAExB,IAAI,eAAe,GAAG,OAAO;IAC7B,IAAI,WAAW,GAAG,SAAS;IAC3B,IAAI,KAAK,GAAG,SAAS;IAErB,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,MAAM,GAAG,MAAM;QACf,WAAW,GAAG,MAAM;QACpB,YAAY,GAAG,MAAM;QACrB,YAAY,GAAG,KAAK;QACpB,QAAQ,GAAG,MAAM;QACjB,YAAY,GAAG,KAAK;AACrB;AAED,IAAA,IAAI,OAAO,EAAE;QACX,eAAe,GAAG,SAAS;QAC3B,WAAW,GAAG,SAAS;QACvB,KAAK,GAAG,OAAO;AAChB;IAED,OAAO;yBACc,YAAY,CAAA;;gBAErB,MAAM,CAAA;sBACA,WAAW,CAAA;uBACV,YAAY,CAAA;uBACZ,YAAY,CAAA;mBAChB,QAAQ,CAAA;;0BAED,eAAe,CAAA;sBACnB,WAAW,CAAA;eAClB,KAAK,CAAA;KACf;AACH,CAAC,CAAA,oEAAA,EAQqB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAIlD,4BAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CACtD,cAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,yPAAA;;;;"}

package/dist/components/Tooltip/Tooltip.cjs

@@ -1,2 +1,36 @@
-"use strict";var e=require("react"),t=require("react-dom"),r=require("./components/styled.cjs"),a=require("./components/TooltipPopover.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var n=o(e),l=o(t);exports.Tooltip=({children:t,text:o,content:i,config:c,reversed:s=!1,className:u,withTriangle:d,initialShouldShow:m=!1,useReactPortal:p=!0})=>{const[v,f]=e.useState(m),[h,g]=e.useState(null),b=!!o&&o.trim().length>0,$={container:u&&`${u} ${u}-container`,tip:u&&`${u}-tip`,wrap:u&&`${u}-wrap`,triangle:u&&`${u}-triangle`,hoverable:u&&`${u}-hoverable`},w=!(!i&&!b);if(!w)return t;const E=v&&w&&n.default.createElement(a.TooltipPopover,{classNames:$,hoverableElement:h,config:c,reversed:s,withTriangle:d,text:o,content:i});return n.default.createElement(r.Container,{className:$.container},p?l.default.createPortal(E,document.body):E,n.default.createElement(r.Hoverable,{ref:g,className:$.hoverable,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1)},t))};
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var styled = require('./components/styled.cjs');
+var TooltipPopover = require('./components/TooltipPopover.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
+
+const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+    const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
+    const [hoverableElement, setHoverableElement] = React.useState(null);
+    const hasText = text ? text.trim().length > 0 : false;
+    const classNames = {
+        container: className && `${className} ${className}-container`,
+        tip: className && `${className}-tip`,
+        wrap: className && `${className}-wrap`,
+        triangle: className && `${className}-triangle`,
+        hoverable: className && `${className}-hoverable`,
+    };
+    const hasContent = !!(content || hasText);
+    if (!hasContent)
+        return children;
+    const show = () => setShouldShow(true);
+    const hide = () => setShouldShow(false);
+    const tooltipMarkup = shouldShow && hasContent && (React__default.default.createElement(TooltipPopover.TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
+    return (React__default.default.createElement(styled.Container, { className: classNames.container },
+        useReactPortal ? ReactDOM__default.default.createPortal(tooltipMarkup, document.body) : tooltipMarkup,
+        React__default.default.createElement(styled.Hoverable, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+};
+
+exports.Tooltip = Tooltip;
 //# sourceMappingURL=Tooltip.cjs.map

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[null],"names":["useState","React","TooltipPopover","Container","ReactDOM","Hoverable"],"mappings":";;;;;;;;;;;;AAQO,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;AAErD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AACzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,MAAM,aAAa,GAAG,UAAU,IAAI,UAAU,KAC5CC,sBAAA,CAAA,aAAA,CAACC,6BAAc,EAAA,EACb,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACH;IAED,QACED,qCAACE,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AACvC,QAAA,cAAc,GAAGC,yBAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,aAAa;QACrFH,sBAAC,CAAA,aAAA,CAAAI,gBAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,2 @@
 import { TooltipProps } from './types';
 export declare const Tooltip: ({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;
-//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.js

@@ -1,2 +1,29 @@
-import e,{useState as t}from"react";import r from"react-dom";import{Container as o,Hoverable as n}from"./components/styled.js";import{TooltipPopover as a}from"./components/TooltipPopover.js";const l=({children:l,text:c,content:i,config:s,reversed:m=!1,className:p,withTriangle:h,initialShouldShow:d=!1,useReactPortal:f=!0})=>{const[u,v]=t(d),[g,$]=t(null),b=!!c&&c.trim().length>0,w={container:p&&`${p} ${p}-container`,tip:p&&`${p}-tip`,wrap:p&&`${p}-wrap`,triangle:p&&`${p}-triangle`,hoverable:p&&`${p}-hoverable`},E=!(!i&&!b);if(!E)return l;const N=u&&E&&e.createElement(a,{classNames:w,hoverableElement:g,config:s,reversed:m,withTriangle:h,text:c,content:i});return e.createElement(o,{className:w.container},f?r.createPortal(N,document.body):N,e.createElement(n,{ref:$,className:w.hoverable,onMouseEnter:()=>v(!0),onMouseLeave:()=>v(!1)},l))};export{l as Tooltip};
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Hoverable } from './components/styled.js';
+import { TooltipPopover } from './components/TooltipPopover.js';
+
+const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+    const [shouldShow, setShouldShow] = useState(initialShouldShow);
+    const [hoverableElement, setHoverableElement] = useState(null);
+    const hasText = text ? text.trim().length > 0 : false;
+    const classNames = {
+        container: className && `${className} ${className}-container`,
+        tip: className && `${className}-tip`,
+        wrap: className && `${className}-wrap`,
+        triangle: className && `${className}-triangle`,
+        hoverable: className && `${className}-hoverable`,
+    };
+    const hasContent = !!(content || hasText);
+    if (!hasContent)
+        return children;
+    const show = () => setShouldShow(true);
+    const hide = () => setShouldShow(false);
+    const tooltipMarkup = shouldShow && hasContent && (React.createElement(TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
+    return (React.createElement(Container, { className: classNames.container },
+        useReactPortal ? ReactDOM.createPortal(tooltipMarkup, document.body) : tooltipMarkup,
+        React.createElement(Hoverable, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+};
+
+export { Tooltip };
 //# sourceMappingURL=Tooltip.js.map