pallote-react 0.15.5 → 0.15.7

package/dist/index.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef, createContext, useContext } from 'react';
+import * as React from 'react';
+import React__default, { useState, useEffect, createContext, useRef, useContext } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
-import { X, CalendarBlank, Clock, CaretUpDown, ArrowSquareOut, CaretDoubleLeft, CaretLeft, CaretRight, CaretDoubleRight } from '@phosphor-icons/react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 const Color = ({
@@ -26,7 +26,7 @@ const Color = ({
     [`fill-${fill}`]: fill,
     [`stroke-${stroke}`]: stroke
   });
-  return /*#__PURE__*/React.cloneElement(children, {
+  return /*#__PURE__*/React__default.cloneElement(children, {
     className: childClassName,
     style: {
       ...children.props.style,
@@ -76,7 +76,7 @@ const Display = ({
     window.addEventListener('resize', updateMedia);
     return () => window.removeEventListener('resize', updateMedia);
   }, [show, hide]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isDisplayed ? children : null);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isDisplayed ? children : null);
 };
 Display.propTypes = {
   show: PropTypes.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop', 'touch']),
@@ -112,7 +112,7 @@ const Grid = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames('flex', {
       'flex-wrap': wrap,
       [`direction-${direction}`]: direction,
@@ -163,7 +163,7 @@ const Text = ({
   ...props
 }) => {
   const Component = component || 'p';
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React__default.createElement(Component, _extends({
     className: classnames([{
       [`${variant}`]: variant,
       [`text-${align}`]: align,
@@ -192,6 +192,69 @@ Text.propTypes = {
   children: PropTypes.node
 };
 
+const o$3 = /*#__PURE__*/createContext({
+  color: "currentColor",
+  size: "1em",
+  weight: "regular",
+  mirrored: false
+});
+
+const p = /*#__PURE__*/React.forwardRef((s, a) => {
+  const {
+      alt: n,
+      color: r,
+      size: t,
+      weight: o,
+      mirrored: c,
+      children: i,
+      weights: m,
+      ...x
+    } = s,
+    {
+      color: d = "currentColor",
+      size: l,
+      weight: f = "regular",
+      mirrored: g = false,
+      ...w
+    } = React.useContext(o$3);
+  return /* @__PURE__ */React.createElement("svg", {
+    ref: a,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: t != null ? t : l,
+    height: t != null ? t : l,
+    fill: r != null ? r : d,
+    viewBox: "0 0 256 256",
+    transform: c || g ? "scale(-1, 1)" : void 0,
+    ...w,
+    ...x
+  }, !!n && /* @__PURE__ */React.createElement("title", null, n), i, m.get(o != null ? o : f));
+});
+p.displayName = "IconBase";
+
+const a$4 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M216,56V200a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V56A16,16,0,0,1,56,40H200A16,16,0,0,1,216,56Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM181.66,170.34a8,8,0,0,1-11.32,11.32L128,139.31,85.66,181.66a8,8,0,0,1-11.32-11.32L116.69,128,74.34,85.66A8,8,0,0,1,85.66,74.34L128,116.69l42.34-42.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M202.83,197.17a4,4,0,0,1-5.66,5.66L128,133.66,58.83,202.83a4,4,0,0,1-5.66-5.66L122.34,128,53.17,58.83a4,4,0,0,1,5.66-5.66L128,122.34l69.17-69.17a4,4,0,1,1,5.66,5.66L133.66,128Z"
+}))]]);
+
+const e$6 = /*#__PURE__*/React.forwardRef((r, t) => /* @__PURE__ */React.createElement(p, {
+  ref: t,
+  ...r,
+  weights: a$4
+}));
+e$6.displayName = "XIcon";
+
 const Alert = ({
   color = 'success',
   variant = 'toast',
@@ -220,7 +283,7 @@ const Alert = ({
   const onAnimationEnd = () => {
     if (!show) setRender(false);
   };
-  let alert = /*#__PURE__*/React.createElement("div", _extends({
+  let alert = /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['alert', {
       [`alert-${color}`]: color,
       [`alert-${variant}`]: variant,
@@ -230,22 +293,22 @@ const Alert = ({
       'alert-noIcon': noIcon
     }, className]),
     onAnimationEnd: onAnimationEnd
-  }, props), /*#__PURE__*/React.createElement("div", {
+  }, props), /*#__PURE__*/React__default.createElement("div", {
     className: classnames('alert_content')
-  }, title ? /*#__PURE__*/React.createElement(Text, {
+  }, title ? /*#__PURE__*/React__default.createElement(Text, {
     className: classnames('alert_title'),
     variant: dense ? 'caption' : 'body',
     weight: "bold"
-  }, title) : null, subtitle ? /*#__PURE__*/React.createElement(Text, {
+  }, title) : null, subtitle ? /*#__PURE__*/React__default.createElement(Text, {
     variant: dense ? 'overline' : 'caption',
     className: classnames('alert_subtitle')
-  }, subtitle) : null), onClose ? /*#__PURE__*/React.createElement(X, {
+  }, subtitle) : null), onClose ? /*#__PURE__*/React__default.createElement(e$6, {
     className: classnames('alert_close'),
     onClick: onClose,
     size: dense ? 14 : 16
   }) : null);
   if (variant === 'notice') {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, alert);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, alert);
   } else {
     return /*#__PURE__*/createPortal(shouldRender && alert, container);
   }
@@ -266,17 +329,17 @@ const Breadcrumbs = ({
   items,
   separator = "slash",
   className
-}) => /*#__PURE__*/React.createElement("nav", {
+}) => /*#__PURE__*/React__default.createElement("nav", {
   "aria-label": "breadcrumbs",
   className: classnames(['breadcrumbs', {
     [`breadcrumbs-${separator}`]: separator
   }, className])
-}, /*#__PURE__*/React.createElement("ol", null, items.map((item, index) => /*#__PURE__*/React.createElement("li", {
+}, /*#__PURE__*/React__default.createElement("ol", null, items.map((item, index) => /*#__PURE__*/React__default.createElement("li", {
   key: index,
   className: "breadcrumbs_item"
-}, index === items.length - 1 ? /*#__PURE__*/React.createElement("p", {
+}, index === items.length - 1 ? /*#__PURE__*/React__default.createElement("p", {
   "aria-current": "page"
-}, item.label) : /*#__PURE__*/React.createElement("a", {
+}, item.label) : /*#__PURE__*/React__default.createElement("a", {
   href: item.href
 }, item.label)))));
 Breadcrumbs.propTypes = {
@@ -285,7 +348,7 @@ Breadcrumbs.propTypes = {
   className: PropTypes.node
 };
 
-const Button = /*#__PURE__*/React.forwardRef(({
+const Button = /*#__PURE__*/React__default.forwardRef(({
   component = 'button',
   kind,
   variant = 'fill',
@@ -304,9 +367,9 @@ const Button = /*#__PURE__*/React.forwardRef(({
   if (kind === 'icon') {
     content = children;
   } else {
-    content = /*#__PURE__*/React.createElement(React.Fragment, null, iconLeft && iconLeft, children, iconRight && iconRight);
+    content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, iconLeft && iconLeft, children, iconRight && iconRight);
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React__default.createElement(Component, _extends({
     className: classnames(['button', {
       [`button-${size}`]: size,
       [`button-${color}`]: color,
@@ -342,7 +405,7 @@ const Buttons = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['buttons', {
       [`buttons-${direction}`]: direction,
       'buttons-fullWidth': fullWidth,
@@ -369,9 +432,9 @@ const Card = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(Color, {
+  return /*#__PURE__*/React__default.createElement(Color, {
     fill: transparent ? null : fill
-  }, /*#__PURE__*/React.createElement("div", _extends({
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['card', {
       [`card-${size}`]: size,
       [`card-${direction}`]: direction,
@@ -398,7 +461,7 @@ const CardActions = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['card_actions', {
       [`card_actions-${direction}`]: direction
     }, className])
@@ -416,7 +479,7 @@ const CardContent = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['card_content', {
       'card_content-fullWidth': fullWidth
     }, className])
@@ -429,6 +492,7 @@ CardContent.propTypes = {
 };
 
 const CardHeader = ({
+  icon,
   label,
   title,
   subtitle,
@@ -436,19 +500,22 @@ const CardHeader = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['card_header', className])
-  }, props), actions && /*#__PURE__*/React.createElement("div", {
+  }, props), actions && /*#__PURE__*/React__default.createElement("div", {
     className: "card_headerActions"
-  }, actions), label ? /*#__PURE__*/React.createElement(Text, {
+  }, actions), icon ? /*#__PURE__*/React__default.cloneElement(icon, {
+    className: `${icon.props.className ?? ''} card_icon`
+  }) : null, label ? /*#__PURE__*/React__default.createElement(Text, {
     className: classnames('card_label')
-  }, label) : null, /*#__PURE__*/React.createElement(Text, {
+  }, label) : null, /*#__PURE__*/React__default.createElement(Text, {
     className: classnames('card_title')
-  }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
+  }, title), subtitle ? /*#__PURE__*/React__default.createElement(Text, {
     className: classnames('card_subtitle')
   }, subtitle) : null);
 };
 CardHeader.propTypes = {
+  icon: PropTypes.node,
   label: PropTypes.string,
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
@@ -465,11 +532,11 @@ const CardMedia = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['card_media', {
       'card_media-fullWidth': fullWidth
     }, className])
-  }, props), /*#__PURE__*/React.createElement("div", {
+  }, props), /*#__PURE__*/React__default.createElement("div", {
     className: 'card_mediaInner',
     style: {
       width: width + 'px',
@@ -496,11 +563,11 @@ const Checkbox = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['checkbox', {
       'checkbox-disabled': disabled
     }, className])
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
     className: classnames('checkbox_control'),
     type: "checkbox",
     name: id,
@@ -510,7 +577,7 @@ const Checkbox = ({
     "aria-checked": checked,
     disabled: disabled,
     required: !(disabled || optional)
-  }, props)), /*#__PURE__*/React.createElement("label", {
+  }, props)), /*#__PURE__*/React__default.createElement("label", {
     className: classnames('checkbox_label'),
     htmlFor: id
   }, label));
@@ -533,14 +600,14 @@ const InputLabel = ({
   error
 }) => {
   const LabelTag = isLegend ? 'legend' : 'label';
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelTag, _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement(LabelTag, _extends({
     className: 'input_label'
   }, !isLegend && {
     htmlFor
-  }), label), hint && /*#__PURE__*/React.createElement("p", {
+  }), label), hint && /*#__PURE__*/React__default.createElement("p", {
     id: htmlFor + '-hint',
     className: 'input_hint'
-  }, hint), error && /*#__PURE__*/React.createElement("p", {
+  }, hint), error && /*#__PURE__*/React__default.createElement("p", {
     id: htmlFor + '-error',
     className: 'input_error'
   }, error));
@@ -569,7 +636,7 @@ const Checkboxes = ({
   children,
   className
 }) => {
-  return /*#__PURE__*/React.createElement("fieldset", _extends({
+  return /*#__PURE__*/React__default.createElement("fieldset", _extends({
     className: classnames(['input', {
       'js-error': error,
       'input-disabled': disabled,
@@ -578,16 +645,16 @@ const Checkboxes = ({
     onChange: onChange
   }, hint || error ? {
     'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
-  } : null), /*#__PURE__*/React.createElement(InputLabel, {
+  } : null), /*#__PURE__*/React__default.createElement(InputLabel, {
     isLegend: true,
     label: label,
     hint: hint,
     error: error
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['input_control', 'radios', {
       [`radios-${direction}`]: direction
     }])
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+  }, React__default.Children.map(children, child => /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.cloneElement(child, {
     optional,
     disabled
   }) : child)));
@@ -611,7 +678,7 @@ const Divider = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['divider', {
       [`divider-${direction}`]: direction,
       [`divider-${padding}`]: padding
@@ -624,6 +691,78 @@ Divider.propTypes = {
   className: PropTypes.node
 };
 
+const e$5 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208,28H188V24a12,12,0,0,0-24,0v4H92V24a12,12,0,0,0-24,0v4H48A20,20,0,0,0,28,48V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V48A20,20,0,0,0,208,28ZM68,52a12,12,0,0,0,24,0h72a12,12,0,0,0,24,0h16V76H52V52ZM52,204V100H204V204Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M216,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,48H48V48H72v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208,36H180V24a4,4,0,0,0-8,0V36H84V24a4,4,0,0,0-8,0V36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36ZM48,44H76V56a4,4,0,0,0,8,0V44h88V56a4,4,0,0,0,8,0V44h28a4,4,0,0,1,4,4V84H44V48A4,4,0,0,1,48,44ZM208,212H48a4,4,0,0,1-4-4V92H212V208A4,4,0,0,1,208,212Z"
+}))]]);
+
+const e$4 = /*#__PURE__*/React.forwardRef((o, r) => /* @__PURE__ */React.createElement(p, {
+  ref: r,
+  ...o,
+  weights: e$5
+}));
+e$4.displayName = "CalendarBlankIcon";
+
+const a$3 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M184.49,167.51a12,12,0,0,1,0,17l-48,48a12,12,0,0,1-17,0l-48-48a12,12,0,0,1,17-17L128,207l39.51-39.52A12,12,0,0,1,184.49,167.51Zm-96-79L128,49l39.51,39.52a12,12,0,0,0,17-17l-48-48a12,12,0,0,0-17,0l-48,48a12,12,0,0,0,17,17Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M80,176h96l-48,48ZM128,32,80,80h96Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M176,168H80a8,8,0,0,0-5.66,13.66l48,48a8,8,0,0,0,11.32,0l48-48A8,8,0,0,0,176,168Zm-48,44.69L99.31,184h57.38ZM80,88h96a8,8,0,0,0,5.66-13.66l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,80,88Zm48-44.69L156.69,72H99.31Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M72.61,83.06a8,8,0,0,1,1.73-8.72l48-48a8,8,0,0,1,11.32,0l48,48A8,8,0,0,1,176,88H80A8,8,0,0,1,72.61,83.06ZM176,168H80a8,8,0,0,0-5.66,13.66l48,48a8,8,0,0,0,11.32,0l48-48A8,8,0,0,0,176,168Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M180.24,171.76a6,6,0,0,1,0,8.48l-48,48a6,6,0,0,1-8.48,0l-48-48a6,6,0,0,1,8.48-8.48L128,215.51l43.76-43.75A6,6,0,0,1,180.24,171.76Zm-96-87.52L128,40.49l43.76,43.75a6,6,0,0,0,8.48-8.48l-48-48a6,6,0,0,0-8.48,0l-48,48a6,6,0,0,0,8.48,8.48Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M178.83,173.17a4,4,0,0,1,0,5.66l-48,48a4,4,0,0,1-5.66,0l-48-48a4,4,0,0,1,5.66-5.66L128,218.34l45.17-45.17A4,4,0,0,1,178.83,173.17Zm-96-90.34L128,37.66l45.17,45.17a4,4,0,1,0,5.66-5.66l-48-48a4,4,0,0,0-5.66,0l-48,48a4,4,0,0,0,5.66,5.66Z"
+}))]]);
+
+const e$3 = /*#__PURE__*/React.forwardRef((r, t) => /* @__PURE__ */React.createElement(p, {
+  ref: t,
+  ...r,
+  weights: a$3
+}));
+e$3.displayName = "CaretUpDownIcon";
+
+const a$2 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Zm68-84a12,12,0,0,1-12,12H128a12,12,0,0,1-12-12V72a12,12,0,0,1,24,0v44h44A12,12,0,0,1,196,128Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm56,112H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48a8,8,0,0,1,0,16Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm62-90a6,6,0,0,1-6,6H128a6,6,0,0,1-6-6V72a6,6,0,0,1,12,0v50h50A6,6,0,0,1,190,128Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm60-92a4,4,0,0,1-4,4H128a4,4,0,0,1-4-4V72a4,4,0,0,1,8,0v52h52A4,4,0,0,1,188,128Z"
+}))]]);
+
+const c = /*#__PURE__*/React.forwardRef((e, r) => /* @__PURE__ */React.createElement(p, {
+  ref: r,
+  ...e,
+  weights: a$2
+}));
+c.displayName = "ClockIcon";
+
 const Input = ({
   onChange,
   type = 'text',
@@ -645,8 +784,8 @@ const Input = ({
       inputRef.current.focus();
     }
   }, [isFocused]);
-  const customIcon = icon || type === 'date' && /*#__PURE__*/React.createElement(CalendarBlank, null) || type === 'time' && /*#__PURE__*/React.createElement(Clock, null) || type === 'number' && /*#__PURE__*/React.createElement(CaretUpDown, null);
-  return /*#__PURE__*/React.createElement("div", {
+  const customIcon = icon || type === 'date' && /*#__PURE__*/React__default.createElement(e$4, null) || type === 'time' && /*#__PURE__*/React__default.createElement(c, null) || type === 'number' && /*#__PURE__*/React__default.createElement(e$3, null);
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['input', {
       'js-error': error,
       'input-disabled': disabled,
@@ -654,14 +793,14 @@ const Input = ({
       'input-withIcon': icon
     }, className]),
     onChange: onChange
-  }, /*#__PURE__*/React.createElement(InputLabel, {
+  }, /*#__PURE__*/React__default.createElement(InputLabel, {
     htmlFor: id,
     label: label,
     hint: hint,
     error: error
-  }), customIcon && /*#__PURE__*/React.createElement("div", {
+  }), customIcon && /*#__PURE__*/React__default.createElement("div", {
     className: 'input_icon'
-  }, customIcon), /*#__PURE__*/React.createElement("input", _extends({
+  }, customIcon), /*#__PURE__*/React__default.createElement("input", _extends({
     ref: inputRef,
     type: type,
     className: 'input_control',
@@ -689,6 +828,30 @@ Input.propTypes = {
   className: PropTypes.node
 };
 
+const e$2 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M184,80V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H176A8,8,0,0,1,184,80Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M192,136v72a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V80A16,16,0,0,1,48,64h72a8,8,0,0,1,0,16H48V208H176V136a8,8,0,0,1,16,0Zm32-96a8,8,0,0,0-8-8H152a8,8,0,0,0-5.66,13.66L172.69,72l-42.35,42.34a8,8,0,0,0,11.32,11.32L184,83.31l26.34,26.35A8,8,0,0,0,224,104Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M222,104a6,6,0,0,1-12,0V54.49l-69.75,69.75a6,6,0,0,1-8.48-8.48L201.51,46H152a6,6,0,0,1,0-12h64a6,6,0,0,1,6,6Zm-38,26a6,6,0,0,0-6,6v72a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V80a2,2,0,0,1,2-2h72a6,6,0,0,0,0-12H48A14,14,0,0,0,34,80V208a14,14,0,0,0,14,14H176a14,14,0,0,0,14-14V136A6,6,0,0,0,184,130Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M220,104a4,4,0,0,1-8,0V49.66l-73.16,73.17a4,4,0,0,1-5.66-5.66L206.34,44H152a4,4,0,0,1,0-8h64a4,4,0,0,1,4,4Zm-36,28a4,4,0,0,0-4,4v72a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4h72a4,4,0,0,0,0-8H48A12,12,0,0,0,36,80V208a12,12,0,0,0,12,12H176a12,12,0,0,0,12-12V136A4,4,0,0,0,184,132Z"
+}))]]);
+
+const o$2 = /*#__PURE__*/React.forwardRef((e, t) => /* @__PURE__ */React.createElement(p, {
+  ref: t,
+  ...e,
+  weights: e$2
+}));
+o$2.displayName = "ArrowSquareOutIcon";
+
 const Link = ({
   component = 'a',
   icon,
@@ -700,18 +863,18 @@ const Link = ({
   ...props
 }) => {
   const Component = component || 'a';
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React__default.createElement(Component, _extends({
     className: classnames(['link', {
       [`text-${color}`]: color
     }, className]),
     href: isExternal ? href : undefined,
     target: isExternal ? '_blank' : undefined,
     rel: isExternal ? 'noopener noreferrer' : undefined
-  }, props), children, icon && !isExternal && /*#__PURE__*/React.createElement("span", {
+  }, props), children, icon && !isExternal && /*#__PURE__*/React__default.createElement("span", {
     className: 'link_icon'
-  }, icon), isExternal && /*#__PURE__*/React.createElement("span", {
+  }, icon), isExternal && /*#__PURE__*/React__default.createElement("span", {
     className: 'link_icon'
-  }, /*#__PURE__*/React.createElement(ArrowSquareOut, null)));
+  }, /*#__PURE__*/React__default.createElement(o$2, null)));
 };
 Link.propTypes = {
   component: PropTypes.oneOfType(['a', PropTypes.elementType]),
@@ -728,7 +891,7 @@ const List = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['list', {
       'list-dense': dense
     }, className])
@@ -747,11 +910,11 @@ const ListItem = ({
   children = 'List item',
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return /*#__PURE__*/React__default.createElement(Text, _extends({
     className: classnames(['list_item', {
       'list_item-bold': bold
     }, className])
-  }, props), icon ? /*#__PURE__*/React.cloneElement(icon, {
+  }, props), icon ? /*#__PURE__*/React__default.cloneElement(icon, {
     className: `${icon.props.className ?? ''} list_itemIcon`
   }) : null, children);
 };
@@ -769,12 +932,12 @@ const Nav = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("nav", _extends({
+  return /*#__PURE__*/React__default.createElement("nav", _extends({
     className: classnames(['nav', {
       [`nav-${direction}`]: direction,
       'nav-dense': dense
     }, className])
-  }, props), /*#__PURE__*/React.createElement("div", {
+  }, props), /*#__PURE__*/React__default.createElement("div", {
     className: "nav_container"
   }, children));
 };
@@ -795,16 +958,16 @@ const SectionHeader = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['section_header', className])
-  }, props), label ? /*#__PURE__*/React.createElement(Text, {
+  }, props), label ? /*#__PURE__*/React__default.createElement(Text, {
     className: classnames('section_label')
-  }, label) : null, /*#__PURE__*/React.createElement(Text, {
+  }, label) : null, /*#__PURE__*/React__default.createElement(Text, {
     className: "section_title",
     component: titleComponent || (promoteTitle ? 'h1' : 'h2')
-  }, title), subtitle ? /*#__PURE__*/React.createElement("div", {
+  }, title), subtitle ? /*#__PURE__*/React__default.createElement("div", {
     className: classnames('section_subtitle')
-  }, subtitle) : null, actions ? /*#__PURE__*/React.createElement("div", {
+  }, subtitle) : null, actions ? /*#__PURE__*/React__default.createElement("div", {
     className: "section_actions"
   }, actions) : null);
 };
@@ -819,6 +982,7 @@ SectionHeader.propTypes = {
 };
 
 const Section = ({
+  component = 'div',
   align = 'left',
   color = 'default',
   landing,
@@ -827,18 +991,19 @@ const Section = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  const Component = component || 'div';
+  return /*#__PURE__*/React__default.createElement(Component, _extends({
     className: classnames(['section', {
       [`section-${align}`]: align,
       [`section-${color}`]: color,
       'section-landing': landing,
       'section-header': header
     }, className])
-  }, props), /*#__PURE__*/React.createElement("div", {
+  }, props), /*#__PURE__*/React__default.createElement("div", {
     className: 'section_container'
-  }, React.Children.map(children, child => {
-    if (/*#__PURE__*/React.isValidElement(child) && child.type === SectionHeader) {
-      return /*#__PURE__*/React.cloneElement(child, {
+  }, React__default.Children.map(children, child => {
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.type === SectionHeader) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
         promoteTitle: landing || header
       });
     }
@@ -846,6 +1011,7 @@ const Section = ({
   })));
 };
 Section.propTypes = {
+  component: PropTypes.oneOf(['div', 'footer', 'header', 'section']),
   align: PropTypes.oneOf(['left', 'center', 'right']),
   color: PropTypes.oneOf(['default', 'paper', 'primary', 'primaryLight']),
   landing: PropTypes.bool,
@@ -866,29 +1032,30 @@ const NavBar = ({
     setIsOpen(!isOpen);
     document.body.classList.toggle('js-navbar', !isOpen);
   };
-  return /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Section, _extends({
+  return /*#__PURE__*/React__default.createElement(Section, _extends({
+    component: "header",
     className: classnames(['navbar', {
       [`navbar-${align}`]: align,
       'js-opened': isOpen
     }, className])
-  }, props), /*#__PURE__*/React.createElement("div", {
+  }, props), /*#__PURE__*/React__default.createElement("div", {
     className: "navbar_main"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "navbar_logo"
-  }, logo), /*#__PURE__*/React.createElement("button", {
+  }, logo), /*#__PURE__*/React__default.createElement("button", {
     "aria-label": "Open mobile menu",
     className: classnames('navbar_button', {
       'js-opened': isOpen
     }),
     onClick: toggleNav
-  }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("nav", {
+  }, /*#__PURE__*/React__default.createElement("span", null))), /*#__PURE__*/React__default.createElement("nav", {
     "aria-label": "main-nav",
     className: classnames('navbar_nav nav', {
       'js-opened': isOpen
     })
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "nav_container"
-  }, children))));
+  }, children)));
 };
 NavBar.propTypes = {
   logo: PropTypes.node,
@@ -917,21 +1084,21 @@ const NavItem = ({
   } else {
     Component = component || "a";
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['nav_item', {
       'nav_item-dropdown': dropdown,
       'js-show': isExpanded
     }, className])
-  }, /*#__PURE__*/React.createElement(Component, _extends({
+  }, /*#__PURE__*/React__default.createElement(Component, _extends({
     end: end,
     to: to,
     className: classnames(['nav_trigger', {
       'nav_trigger-active': active
     }]),
     onClick: onClick
-  }, props), icon ? /*#__PURE__*/React.createElement("span", {
+  }, props), icon ? /*#__PURE__*/React__default.createElement("span", {
     className: classnames('nav_icon')
-  }, icon) : null, label), dropdown ? /*#__PURE__*/React.createElement("div", {
+  }, icon) : null, label), dropdown ? /*#__PURE__*/React__default.createElement("div", {
     ref: dropdownRef,
     className: "nav_target"
   }, dropdown) : null);
@@ -957,11 +1124,11 @@ const Radio = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['radio', {
       'radio-disabled': disabled
     }, className])
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
     className: classnames('radio_control'),
     type: "radio",
     id: id,
@@ -971,7 +1138,7 @@ const Radio = ({
     "aria-checked": checked,
     disabled: disabled,
     required: !(disabled || optional)
-  }, props)), /*#__PURE__*/React.createElement("label", {
+  }, props)), /*#__PURE__*/React__default.createElement("label", {
     className: classnames('radio_label'),
     htmlFor: id
   }, label));
@@ -999,7 +1166,7 @@ const RadioButtons = ({
   children,
   className
 }) => {
-  return /*#__PURE__*/React.createElement("fieldset", _extends({
+  return /*#__PURE__*/React__default.createElement("fieldset", _extends({
     className: classnames(['input', {
       'js-error': error,
       'input-disabled': disabled,
@@ -1008,16 +1175,16 @@ const RadioButtons = ({
     onChange: onChange
   }, hint || error ? {
     'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
-  } : null), /*#__PURE__*/React.createElement(InputLabel, {
+  } : null), /*#__PURE__*/React__default.createElement(InputLabel, {
     isLegend: true,
     label: label,
     hint: hint,
     error: error
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['input_control', 'radios', {
       [`radios-${direction}`]: direction
     }])
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+  }, React__default.Children.map(children, child => /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.cloneElement(child, {
     optional,
     disabled
   }) : child)));
@@ -1041,7 +1208,7 @@ const SectionContent = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['section_content', {
       [`section_content-${align}`]: align
     }, className])
@@ -1073,7 +1240,7 @@ const Select = ({
       inputRef.current.focus();
     }
   }, [isFocused]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['input', 'select', {
       'input-focused': isFocused,
       'js-error': error,
@@ -1082,12 +1249,12 @@ const Select = ({
       'input-dense': dense
     }, className]),
     onChange: onChange
-  }, /*#__PURE__*/React.createElement(InputLabel, {
+  }, /*#__PURE__*/React__default.createElement(InputLabel, {
     htmlFor: id,
     label: label,
     hint: hint,
     error: error
-  }), /*#__PURE__*/React.createElement("select", _extends({
+  }), /*#__PURE__*/React__default.createElement("select", _extends({
     ref: inputRef,
     className: 'input_control',
     name: id,
@@ -1236,9 +1403,9 @@ const Snippet = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classnames('snippet_wrapper')
-  }, /*#__PURE__*/React.createElement(SyntaxHighlighter, _extends({
+  }, /*#__PURE__*/React__default.createElement(SyntaxHighlighter, _extends({
     language: "javascript",
     style: nnfxDark,
     className: classnames(['snippet', {
@@ -1262,7 +1429,7 @@ const Status = ({
   children = 'Status',
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return /*#__PURE__*/React__default.createElement(Text, _extends({
     className: classnames(['status', {
       [`status-${color}`]: color,
       'status-dense': dense
@@ -1284,25 +1451,25 @@ const Switch = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['switch', {
       'switch-disabled': disabled
     }, className])
-  }, startLabel ? /*#__PURE__*/React.createElement(Text, {
+  }, startLabel ? /*#__PURE__*/React__default.createElement(Text, {
     className: classnames('switch_label'),
     variant: "body"
-  }, startLabel) : null, /*#__PURE__*/React.createElement("input", _extends({
+  }, startLabel) : null, /*#__PURE__*/React__default.createElement("input", _extends({
     className: classnames('switch_input'),
     type: "checkbox",
     name: id,
     id: id,
     disabled: disabled
-  }, props)), /*#__PURE__*/React.createElement("label", {
+  }, props)), /*#__PURE__*/React__default.createElement("label", {
     className: classnames('switch_switch'),
     htmlFor: id
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: classnames('switch_toggle')
-  })), endLabel ? /*#__PURE__*/React.createElement(Text, {
+  })), endLabel ? /*#__PURE__*/React__default.createElement(Text, {
     className: classnames('switch_label'),
     variant: "body"
   }, endLabel) : null);
@@ -1324,12 +1491,12 @@ const Tabs = ({
   children
 }) => {
   const [activeIndex, setActiveIndex] = useState(0);
-  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(TabsContext.Provider, {
     value: {
       activeIndex,
       setActiveIndex
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['tabs', {
       [`tabs-${direction}`]: direction,
       'tabs-dense': dense,
@@ -1355,7 +1522,7 @@ const Tab = ({
     setActiveIndex
   } = useContext(TabsContext);
   const isSelected = activeIndex === index;
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React__default.createElement("button", {
     className: classnames(['tab', {
       'tab-active': isSelected
     }, className]),
@@ -1372,64 +1539,160 @@ Tab.propTypes = {
   className: PropTypes.node.isRequired
 };
 
+const a$1 = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M160,48V208L80,128Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M163.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,168,208V48A8,8,0,0,0,163.06,40.61ZM152,188.69,91.31,128,152,67.31Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M164.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L88.49,128Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M162.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L85.66,128Z"
+}))]]);
+
+const t$1 = /*#__PURE__*/React.forwardRef((o, r) => /* @__PURE__ */React.createElement(p, {
+  ref: r,
+  ...o,
+  weights: a$1
+}));
+t$1.displayName = "CaretLeftIcon";
+
+const t = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M176,128,96,208V48Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34ZM104,188.69V67.31L164.69,128Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M178.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L170.34,128,93.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,178.83,130.83Z"
+}))]]);
+
+const e$1 = /*#__PURE__*/React.forwardRef((o, r) => /* @__PURE__ */React.createElement(p, {
+  ref: r,
+  ...o,
+  weights: t
+}));
+e$1.displayName = "CaretRightIcon";
+
+const e = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L137,128ZM57,128l71.52-71.51a12,12,0,0,0-17-17l-80,80a12,12,0,0,0,0,17l80,80a12,12,0,0,0,17-17Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M200,48V208l-80-80Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M203.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,208,208V48A8,8,0,0,0,203.06,40.61ZM192,188.69,131.31,128,192,67.31Zm-66.34,13.65a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L51.31,128Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M208,48V208a8,8,0,0,1-13.66,5.66L128,147.31V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,128,48v60.69l66.34-66.35A8,8,0,0,1,208,48Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M204.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L128.49,128ZM48.49,128l75.75-75.76a6,6,0,0,0-8.48-8.48l-80,80a6,6,0,0,0,0,8.48l80,80a6,6,0,1,0,8.48-8.48Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M202.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L125.66,128ZM45.66,128l77.17-77.17a4,4,0,0,0-5.66-5.66l-80,80a4,4,0,0,0,0,5.66l80,80a4,4,0,1,0,5.66-5.66Z"
+}))]]);
+
+const o$1 = /*#__PURE__*/React.forwardRef((t, r) => /* @__PURE__ */React.createElement(p, {
+  ref: r,
+  ...t,
+  weights: e
+}));
+o$1.displayName = "CaretDoubleLeftIcon";
+
+const a = /* @__PURE__ */new Map([["bold", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M144.49,136.49l-80,80a12,12,0,0,1-17-17L119,128,47.51,56.49a12,12,0,0,1,17-17l80,80A12,12,0,0,1,144.49,136.49Zm80-17-80-80a12,12,0,1,0-17,17L199,128l-71.52,71.51a12,12,0,0,0,17,17l80-80A12,12,0,0,0,224.49,119.51Z"
+}))], ["duotone", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M136,128,56,208V48Z",
+  opacity: "0.2"
+}), /* @__PURE__ */React.createElement("path", {
+  d: "M141.66,122.34l-80-80A8,8,0,0,0,48,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,141.66,122.34ZM64,188.69V67.31L124.69,128Zm157.66-55-80,80a8,8,0,0,1-11.32-11.32L204.69,128,130.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,221.66,133.66Z"
+}))], ["fill", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M221.66,133.66l-80,80A8,8,0,0,1,128,208V147.31L61.66,213.66A8,8,0,0,1,48,208V48a8,8,0,0,1,13.66-5.66L128,108.69V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,221.66,133.66Z"
+}))], ["light", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M140.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L127.51,128,51.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,140.24,132.24Zm80-8.48-80-80a6,6,0,0,0-8.48,8.48L207.51,128l-75.75,75.76a6,6,0,1,0,8.48,8.48l80-80A6,6,0,0,0,220.24,123.76Z"
+}))], ["regular", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
+}))], ["thin", /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("path", {
+  d: "M138.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L130.34,128,53.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,138.83,130.83Zm80-5.66-80-80a4,4,0,0,0-5.66,5.66L210.34,128l-77.17,77.17a4,4,0,0,0,5.66,5.66l80-80A4,4,0,0,0,218.83,125.17Z"
+}))]]);
+
+const o = /*#__PURE__*/React.forwardRef((t, r) => /* @__PURE__ */React.createElement(p, {
+  ref: r,
+  ...t,
+  weights: a
+}));
+o.displayName = "CaretDoubleRightIcon";
+
 const TableFooter = ({
   className,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classnames(['table_footer', className])
-  }, props), /*#__PURE__*/React.createElement(Select, {
+  }, props), /*#__PURE__*/React__default.createElement(Select, {
     dense: true,
     id: "rows",
     className: "table_rowSelect"
-  }, /*#__PURE__*/React.createElement("option", {
+  }, /*#__PURE__*/React__default.createElement("option", {
     value: "1"
-  }, "10"), /*#__PURE__*/React.createElement("option", {
+  }, "10"), /*#__PURE__*/React__default.createElement("option", {
     value: "2"
-  }, "25"), /*#__PURE__*/React.createElement("option", {
+  }, "25"), /*#__PURE__*/React__default.createElement("option", {
     value: "2"
-  }, "50"), /*#__PURE__*/React.createElement("option", {
+  }, "50"), /*#__PURE__*/React__default.createElement("option", {
     value: "2"
-  }, "100"), /*#__PURE__*/React.createElement("option", {
+  }, "100"), /*#__PURE__*/React__default.createElement("option", {
     value: "2"
-  }, "All")), /*#__PURE__*/React.createElement(Buttons, {
+  }, "All")), /*#__PURE__*/React__default.createElement(Buttons, {
     className: "table_pagination"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     variant: "transparent",
     size: "sm"
-  }, /*#__PURE__*/React.createElement(CaretDoubleLeft, null)), /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(o$1, null)), /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     variant: "transparent",
     size: "sm"
-  }, /*#__PURE__*/React.createElement(CaretLeft, null)), /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(t$1, null)), /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     size: "sm"
-  }, "1"), /*#__PURE__*/React.createElement(Button, {
+  }, "1"), /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     variant: "transparent",
     size: "sm"
-  }, "2"), /*#__PURE__*/React.createElement(Button, {
+  }, "2"), /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     variant: "transparent",
     size: "sm"
-  }, "3"), /*#__PURE__*/React.createElement(Button, {
+  }, "3"), /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     variant: "transparent",
     size: "sm"
-  }, "\u2026"), /*#__PURE__*/React.createElement(Button, {
+  }, "\u2026"), /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     variant: "transparent",
     size: "sm"
-  }, "8"), /*#__PURE__*/React.createElement(Button, {
+  }, "8"), /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     variant: "transparent",
     size: "sm"
-  }, /*#__PURE__*/React.createElement(CaretRight, null)), /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(e$1, null)), /*#__PURE__*/React__default.createElement(Button, {
     kind: "icon",
     variant: "transparent",
     size: "sm"
-  }, /*#__PURE__*/React.createElement(CaretDoubleRight, null))));
+  }, /*#__PURE__*/React__default.createElement(o, null))));
 };
 TableFooter.propTypes = {
   className: PropTypes.node
@@ -1446,20 +1709,20 @@ const Table = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(DenseContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(DenseContext.Provider, {
     value: dense
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['table', {
       'table-striped': striped,
       'table-hasHover': hasHover,
       'table-dense': dense,
       'table-border': border
     }, className])
-  }, /*#__PURE__*/React.createElement("table", _extends({
+  }, /*#__PURE__*/React__default.createElement("table", _extends({
     cellPadding: 0,
     cellSpacing: 0,
     className: classnames('table_content')
-  }, props), children), withFooter ? /*#__PURE__*/React.createElement(TableFooter, {
+  }, props), children), withFooter ? /*#__PURE__*/React__default.createElement(TableFooter, {
     dense: dense ? dense : null
   }) : null));
 };
@@ -1478,7 +1741,7 @@ const TableBody = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("tbody", _extends({
+  return /*#__PURE__*/React__default.createElement("tbody", _extends({
     className: classnames(['table_body', className])
   }, props), children);
 };
@@ -1493,9 +1756,9 @@ const TableHead = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(TableCellComponentContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(TableCellComponentContext.Provider, {
     value: "th"
-  }, /*#__PURE__*/React.createElement("thead", _extends({
+  }, /*#__PURE__*/React__default.createElement("thead", _extends({
     className: classnames(['table_head', className])
   }, props), children));
 };
@@ -1512,7 +1775,7 @@ const TableCell = ({
 }) => {
   const useTableCellComponent = () => useContext(TableCellComponentContext);
   const Component = useTableCellComponent();
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React__default.createElement(Component, _extends({
     className: classnames(['table_cell', {
       [`table_cell-${kind}`]: kind
     }, className])
@@ -1529,7 +1792,7 @@ const TableRow = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("tr", _extends({
+  return /*#__PURE__*/React__default.createElement("tr", _extends({
     className: classnames(['table_row', className])
   }, props), children);
 };
@@ -1542,7 +1805,7 @@ const TabsControl = ({
   className,
   children
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     role: "tablist",
     className: classnames(['tabs_controls', className])
   }, children);
@@ -1561,7 +1824,7 @@ const TabsPanel = ({
     activeIndex
   } = useContext(TabsContext);
   const isActive = activeIndex === index;
-  return isActive ? /*#__PURE__*/React.createElement("div", {
+  return isActive ? /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['tabs_panel', className]),
     role: "tabpanel",
     id: `tabpanel-${index}`,
@@ -1581,7 +1844,7 @@ const Tag = ({
   children = 'Tag',
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return /*#__PURE__*/React__default.createElement(Text, _extends({
     className: classnames(['tag', {
       [`tag-${color}`]: color,
       'tag-dense': dense
@@ -1614,19 +1877,19 @@ const Textarea = ({
       inputRef.current.focus();
     }
   }, [isFocused]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classnames(['input', {
       'js-error': error,
       'input-disabled': disabled,
       'input-optional': optional
     }, className]),
     onChange: onChange
-  }, /*#__PURE__*/React.createElement(InputLabel, {
+  }, /*#__PURE__*/React__default.createElement(InputLabel, {
     htmlFor: id,
     label: label,
     hint: hint,
     error: error
-  }), /*#__PURE__*/React.createElement("textarea", _extends({
+  }), /*#__PURE__*/React__default.createElement("textarea", _extends({
     ref: inputRef,
     className: 'input_control',
     name: id,

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.15.5",
+  "version": "0.15.7",
   "description": "",
   "main": "dist/index.js",
   "styles": "dist/index.css",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@babel/preset-react": "^7.26.3",
-    "@phosphor-icons/react": "^2.1.7",
+    "@phosphor-icons/react": "^2.1.10",
     "@rollup/plugin-json": "^6.1.0",
     "classnames": "^2.5.1",
     "pallote-css": "workspace:^",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.15.5",
+  "version": "0.15.7",
   "description": "",
   "main": "dist/index.js",
   "styles": "dist/index.css",
@@ -18,12 +18,12 @@
   },
   "dependencies": {
     "@babel/preset-react": "^7.26.3",
-    "@phosphor-icons/react": "^2.1.7",
+    "@phosphor-icons/react": "^2.1.10",
     "@rollup/plugin-json": "^6.1.0",
     "classnames": "^2.5.1",
     "react-syntax-highlighter": "^15.6.1",
     "sass": "^1.71.1",
-    "pallote-css": "^0.9.7"
+    "pallote-css": "^0.9.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",