@channel.io/bezier-react 1.6.2 → 1.7.1

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,35 @@
+'use strict';
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+exports.defineProperty = _defineProperty;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;
+//# sourceMappingURL=_rollupPluginBabelHelpers.js.map

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/Banner/Banner.const.js

@@ -41,9 +41,11 @@ const TEXT_COLORS = {
   [Banner_types.BannerVariant.Alt]: 'txt-black-darker'
 };
 const ELEVATIONS = {
-  [Banner_types.BannerVariant.Alt]: FoundationStyledComponent.css(["", ""], ({
+  [Banner_types.BannerVariant.Alt]: FoundationStyledComponent.css`
+    ${({
     foundation
-  }) => foundation?.elevation?.ev2())
+  }) => foundation?.elevation?.ev2()}
+  `
 };
 
 exports.ACTION_BUTTON_COLOR_VARIANTS = ACTION_BUTTON_COLOR_VARIANTS;

package/dist/cjs/components/Banner/Banner.const.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.const.js","sources":["../../../../src/components/Banner/Banner.const.ts"],"sourcesContent":["import {\n  type SemanticNames,\n  css,\n} from '~/src/foundation'\n\nimport type { InjectedInterpolation } from '~/src/types/Foundation'\n\nimport { ButtonColorVariant } from '~/src/components/Button'\n\nimport { BannerVariant } from './Banner.types'\n\nexport const BACKGROUND_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'bg-black-lighter',\n  [BannerVariant.Blue]: 'bgtxt-blue-lightest',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-lightest',\n  [BannerVariant.Green]: 'bgtxt-green-lightest',\n  [BannerVariant.Orange]: 'bgtxt-orange-lightest',\n  [BannerVariant.Red]: 'bgtxt-red-lightest',\n  [BannerVariant.Alt]: 'bg-grey-lighter',\n}\n\nexport const DEFAULT_ICON_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'txt-black-darker',\n  [BannerVariant.Blue]: 'bgtxt-blue-normal',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n  [BannerVariant.Green]: 'bgtxt-green-normal',\n  [BannerVariant.Orange]: 'bgtxt-orange-normal',\n  [BannerVariant.Red]: 'bgtxt-red-normal',\n  [BannerVariant.Alt]: 'bgtxt-red-normal',\n}\n\nexport const ACTION_BUTTON_COLOR_VARIANTS: Record<BannerVariant, ButtonColorVariant> = {\n  [BannerVariant.Default]: ButtonColorVariant.MonochromeDark,\n  [BannerVariant.Blue]: ButtonColorVariant.Blue,\n  [BannerVariant.Cobalt]: ButtonColorVariant.Cobalt,\n  [BannerVariant.Green]: ButtonColorVariant.Green,\n  [BannerVariant.Orange]: ButtonColorVariant.Orange,\n  [BannerVariant.Red]: ButtonColorVariant.Red,\n  [BannerVariant.Alt]: ButtonColorVariant.MonochromeDark,\n}\n\nexport const TEXT_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'txt-black-darker',\n  [BannerVariant.Blue]: 'bgtxt-blue-normal',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n  [BannerVariant.Green]: 'bgtxt-green-normal',\n  [BannerVariant.Orange]: 'bgtxt-orange-normal',\n  [BannerVariant.Red]: 'bgtxt-red-normal',\n  [BannerVariant.Alt]: 'txt-black-darker',\n}\n\nexport const ELEVATIONS: { [key in BannerVariant]?: InjectedInterpolation } = {\n  [BannerVariant.Alt]: css`\n    ${({ foundation }) => foundation?.elevation?.ev2()}\n  `,\n}\n"],"names":["BACKGROUND_COLORS","BannerVariant","Default","Blue","Cobalt","Green","Orange","Red","Alt","DEFAULT_ICON_COLORS","ACTION_BUTTON_COLOR_VARIANTS","ButtonColorVariant","MonochromeDark","TEXT_COLORS","ELEVATIONS","css","foundation","elevation","ev2"],"mappings":";;;;;;AAWO,MAAMA,iBAAuD,GAAG;AACrE,EAAA,CAACC,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,qBAAqB;AAC3C,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,sBAAsB;AAC7C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,oBAAoB;EACzC,CAACN,0BAAa,CAACO,GAAG,GAAG,iBAAA;AACvB,EAAC;AAEM,MAAMC,mBAAyD,GAAG;AACvE,EAAA,CAACR,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,0BAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAME,4BAAuE,GAAG;AACrF,EAAA,CAACT,0BAAa,CAACC,OAAO,GAAGS,+BAAkB,CAACC,cAAc;AAC1D,EAAA,CAACX,0BAAa,CAACE,IAAI,GAAGQ,+BAAkB,CAACR,IAAI;AAC7C,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAGO,+BAAkB,CAACP,MAAM;AACjD,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAGM,+BAAkB,CAACN,KAAK;AAC/C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAGK,+BAAkB,CAACL,MAAM;AACjD,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAGI,+BAAkB,CAACJ,GAAG;AAC3C,EAAA,CAACN,0BAAa,CAACO,GAAG,GAAGG,+BAAkB,CAACC,cAAAA;AAC1C,EAAC;AAEM,MAAMC,WAAiD,GAAG;AAC/D,EAAA,CAACZ,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,0BAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAMM,UAA8D,GAAG;AAC5E,EAAA,CAACb,0BAAa,CAACO,GAAG,GAAGO,6BAAG,WACpB,CAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,KAAKA,UAAU,EAAEC,SAAS,EAAEC,GAAG,EAAE,CAAA;AAEtD;;;;;;;;"}
+{"version":3,"file":"Banner.const.js","sources":["../../../../src/components/Banner/Banner.const.ts"],"sourcesContent":["import {\n  type SemanticNames,\n  css,\n} from '~/src/foundation'\n\nimport type { InjectedInterpolation } from '~/src/types/Foundation'\n\nimport { ButtonColorVariant } from '~/src/components/Button'\n\nimport { BannerVariant } from './Banner.types'\n\nexport const BACKGROUND_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'bg-black-lighter',\n  [BannerVariant.Blue]: 'bgtxt-blue-lightest',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-lightest',\n  [BannerVariant.Green]: 'bgtxt-green-lightest',\n  [BannerVariant.Orange]: 'bgtxt-orange-lightest',\n  [BannerVariant.Red]: 'bgtxt-red-lightest',\n  [BannerVariant.Alt]: 'bg-grey-lighter',\n}\n\nexport const DEFAULT_ICON_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'txt-black-darker',\n  [BannerVariant.Blue]: 'bgtxt-blue-normal',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n  [BannerVariant.Green]: 'bgtxt-green-normal',\n  [BannerVariant.Orange]: 'bgtxt-orange-normal',\n  [BannerVariant.Red]: 'bgtxt-red-normal',\n  [BannerVariant.Alt]: 'bgtxt-red-normal',\n}\n\nexport const ACTION_BUTTON_COLOR_VARIANTS: Record<BannerVariant, ButtonColorVariant> = {\n  [BannerVariant.Default]: ButtonColorVariant.MonochromeDark,\n  [BannerVariant.Blue]: ButtonColorVariant.Blue,\n  [BannerVariant.Cobalt]: ButtonColorVariant.Cobalt,\n  [BannerVariant.Green]: ButtonColorVariant.Green,\n  [BannerVariant.Orange]: ButtonColorVariant.Orange,\n  [BannerVariant.Red]: ButtonColorVariant.Red,\n  [BannerVariant.Alt]: ButtonColorVariant.MonochromeDark,\n}\n\nexport const TEXT_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'txt-black-darker',\n  [BannerVariant.Blue]: 'bgtxt-blue-normal',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n  [BannerVariant.Green]: 'bgtxt-green-normal',\n  [BannerVariant.Orange]: 'bgtxt-orange-normal',\n  [BannerVariant.Red]: 'bgtxt-red-normal',\n  [BannerVariant.Alt]: 'txt-black-darker',\n}\n\nexport const ELEVATIONS: { [key in BannerVariant]?: InjectedInterpolation } = {\n  [BannerVariant.Alt]: css`\n    ${({ foundation }) => foundation?.elevation?.ev2()}\n  `,\n}\n"],"names":["BACKGROUND_COLORS","BannerVariant","Default","Blue","Cobalt","Green","Orange","Red","Alt","DEFAULT_ICON_COLORS","ACTION_BUTTON_COLOR_VARIANTS","ButtonColorVariant","MonochromeDark","TEXT_COLORS","ELEVATIONS","css","foundation","elevation","ev2"],"mappings":";;;;;;AAWO,MAAMA,iBAAuD,GAAG;AACrE,EAAA,CAACC,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,qBAAqB;AAC3C,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,sBAAsB;AAC7C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,oBAAoB;EACzC,CAACN,0BAAa,CAACO,GAAG,GAAG,iBAAA;AACvB,EAAC;AAEM,MAAMC,mBAAyD,GAAG;AACvE,EAAA,CAACR,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,0BAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAME,4BAAuE,GAAG;AACrF,EAAA,CAACT,0BAAa,CAACC,OAAO,GAAGS,+BAAkB,CAACC,cAAc;AAC1D,EAAA,CAACX,0BAAa,CAACE,IAAI,GAAGQ,+BAAkB,CAACR,IAAI;AAC7C,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAGO,+BAAkB,CAACP,MAAM;AACjD,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAGM,+BAAkB,CAACN,KAAK;AAC/C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAGK,+BAAkB,CAACL,MAAM;AACjD,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAGI,+BAAkB,CAACJ,GAAG;AAC3C,EAAA,CAACN,0BAAa,CAACO,GAAG,GAAGG,+BAAkB,CAACC,cAAAA;AAC1C,EAAC;AAEM,MAAMC,WAAiD,GAAG;AAC/D,EAAA,CAACZ,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,0BAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAMM,UAA8D,GAAG;AAC5E,EAAA,CAACb,0BAAa,CAACO,GAAG,GAAGO,6BAAI,CAAA;AAC3B,IAAA,EAAM,CAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,KAAKA,UAAU,EAAEC,SAAS,EAAEC,GAAG,EAAG,CAAA;AACvD,EAAA,CAAA;AACA;;;;;;;;"}

package/dist/cjs/components/Forms/Inputs/mixins.js

@@ -2,29 +2,48 @@
 
 var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
 
-const inputTextStyle = /*#__PURE__*/FoundationStyledComponent.css(["color:", ";", ""], ({
+const inputTextStyle = FoundationStyledComponent.css`
+  color: ${({
   foundation
-}) => foundation?.theme?.['txt-black-darkest'], props => props?.readOnly && FoundationStyledComponent.css(["color:", ";"], ({
-  foundation
-}) => foundation?.theme?.['txt-black-darker']));
-const inputPlaceholderStyle = /*#__PURE__*/FoundationStyledComponent.css(["&::placeholder{color:", ";}"], ({
-  foundation
-}) => foundation?.theme?.['txt-black-dark']);
-const inputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 1px 2px ", ",inset 0 0 0 1px ", ";"], ({
-  foundation
-}) => foundation?.theme?.['bg-black-lighter'], ({
-  foundation
-}) => foundation?.theme?.['bg-black-dark']);
-const focusedInputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 0 0 3px ", ",inset 0 0 0 1px ", ";"], ({
-  foundation
-}) => foundation?.theme?.['bgtxt-blue-light'], ({
-  foundation
-}) => foundation?.theme?.['bgtxt-blue-normal']);
-const erroredInputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 0 0 3px ", ",inset 0 0 0 1px ", ";"], ({
-  foundation
-}) => foundation?.theme?.['bgtxt-orange-light'], ({
-  foundation
-}) => foundation?.theme?.['bgtxt-orange-normal']);
+}) => foundation?.theme?.['txt-black-darkest']};
+
+  ${props => props?.readOnly && FoundationStyledComponent.css`
+    color: ${({
+  foundation
+}) => foundation?.theme?.['txt-black-darker']};
+  `}
+`;
+const inputPlaceholderStyle = FoundationStyledComponent.css`
+  &::placeholder {
+    color: ${({
+  foundation
+}) => foundation?.theme?.['txt-black-dark']};
+  }
+`;
+const inputWrapperStyle = FoundationStyledComponent.css`
+  box-shadow: 0 1px 2px ${({
+  foundation
+}) => foundation?.theme?.['bg-black-lighter']},
+    inset 0 0 0 1px ${({
+  foundation
+}) => foundation?.theme?.['bg-black-dark']};
+`;
+const focusedInputWrapperStyle = FoundationStyledComponent.css`
+  box-shadow: 0 0 0 3px ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-light']},
+    inset 0 0 0 1px ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-normal']};
+`;
+const erroredInputWrapperStyle = FoundationStyledComponent.css`
+  box-shadow: 0 0 0 3px ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-orange-light']},
+    inset 0 0 0 1px ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-orange-normal']};
+`;
 
 exports.erroredInputWrapperStyle = erroredInputWrapperStyle;
 exports.focusedInputWrapperStyle = focusedInputWrapperStyle;

package/dist/cjs/components/Forms/Inputs/mixins.js.map

@@ -1 +1 @@
-{"version":3,"file":"mixins.js","sources":["../../../../../src/components/Forms/Inputs/mixins.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { type FormComponentProps } from '~/src/components/Forms/Form.types'\n\nexport const inputTextStyle = css`\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n\n  ${(props: FormComponentProps) => props?.readOnly && css`\n    color: ${({ foundation }) => foundation?.theme?.['txt-black-darker']};\n  `}\n`\n\nexport const inputPlaceholderStyle = css`\n  &::placeholder {\n    color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n  }\n`\n\nexport const inputWrapperStyle = css`\n  box-shadow: 0 1px 2px ${({ foundation }) => foundation?.theme?.['bg-black-lighter']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n`\n\nexport const focusedInputWrapperStyle = css`\n  box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-light']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-normal']};\n`\n\nexport const erroredInputWrapperStyle = css`\n  box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-light']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-normal']};\n`\n"],"names":["inputTextStyle","css","foundation","theme","props","readOnly","inputPlaceholderStyle","inputWrapperStyle","focusedInputWrapperStyle","erroredInputWrapperStyle"],"mappings":";;;;AAIaA,MAAAA,cAAc,gBAAGC,6BAAG,sBACtB,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAC,EAElEC,KAAyB,IAAKA,KAAK,EAAEC,QAAQ,IAAIJ,6BAAG,kBAC5C,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAC,CACrE,EACF;AAEYG,MAAAA,qBAAqB,gBAAGL,6BAAG,kCAE3B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,gBAAgB,CAAC,EAErE;AAEYI,MAAAA,iBAAiB,gBAAGN,6BAAG,sDACV,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAC,EAC/D,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,eAAe,CAAC,EAC7E;AAEYK,MAAAA,wBAAwB,gBAAGP,6BAAG,sDACjB,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAC,EAC/D,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAC,EACjF;AAEYM,MAAAA,wBAAwB,gBAAGR,6BAAG,sDACjB,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,oBAAoB,CAAC,EACjE,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,qBAAqB,CAAC;;;;;;;;"}
+{"version":3,"file":"mixins.js","sources":["../../../../../src/components/Forms/Inputs/mixins.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { type FormComponentProps } from '~/src/components/Forms/Form.types'\n\nexport const inputTextStyle = css`\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n\n  ${(props: FormComponentProps) => props?.readOnly && css`\n    color: ${({ foundation }) => foundation?.theme?.['txt-black-darker']};\n  `}\n`\n\nexport const inputPlaceholderStyle = css`\n  &::placeholder {\n    color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n  }\n`\n\nexport const inputWrapperStyle = css`\n  box-shadow: 0 1px 2px ${({ foundation }) => foundation?.theme?.['bg-black-lighter']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n`\n\nexport const focusedInputWrapperStyle = css`\n  box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-light']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-normal']};\n`\n\nexport const erroredInputWrapperStyle = css`\n  box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-light']},\n    inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-normal']};\n`\n"],"names":["inputTextStyle","css","foundation","theme","props","readOnly","inputPlaceholderStyle","inputWrapperStyle","focusedInputWrapperStyle","erroredInputWrapperStyle"],"mappings":";;;;AAIO,MAAMA,cAAc,GAAGC,6BAAI,CAAA;AAClC,SAAA,EAAW,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACxE;AACA,EAAA,EAAKC,KAAyB,IAAKA,KAAK,EAAEC,QAAQ,IAAIJ,6BAAI,CAAA;AAC1D,WAAA,EAAa,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACzE,EAAI,CAAA,CAAA;AACJ,EAAC;AAEM,MAAMG,qBAAqB,GAAGL,6BAAI,CAAA;AACzC;AACA,WAAA,EAAa,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,gBAAgB,CAAE,CAAA;AACvE;AACA,EAAC;AAEM,MAAMI,iBAAiB,GAAGN,6BAAI,CAAA;AACrC,wBAAA,EAA0B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACtF,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,eAAe,CAAE,CAAA;AAC/E,EAAC;AAEM,MAAMK,wBAAwB,GAAGP,6BAAI,CAAA;AAC5C,wBAAA,EAA0B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACtF,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACnF,EAAC;AAEM,MAAMM,wBAAwB,GAAGR,6BAAI,CAAA;AAC5C,wBAAA,EAA0B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,oBAAoB,CAAE,CAAA;AACxF,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,qBAAqB,CAAE,CAAA;AACrF;;;;;;;;"}

package/dist/cjs/components/Forms/Slider/Slider.js

@@ -2,84 +2,106 @@
 
 var React = require('react');
 var index = require('../../../node_modules/@radix-ui/react-slider/dist/index.js');
-var functionUtils = require('../../../utils/functionUtils.js');
+var typeUtils = require('../../../utils/typeUtils.js');
 var Slider_styled = require('./Slider.styled.js');
+var Tooltip = require('../../Tooltip/Tooltip.js');
+var Tooltip_types = require('../../Tooltip/Tooltip.types.js');
 
 const SLIDER_TEST_ID = 'bezier-react-slider';
-const SLIDER_THUMB_TEST_ID = 'bezier-react-slider-thumb';
+const SliderGuide = /*#__PURE__*/React.memo(function SliderGuide({
+  min,
+  max,
+  value
+}) {
+  return /*#__PURE__*/React.createElement(Slider_styled.SliderGuide, {
+    style: {
+      '--bezier-slider-guide-left': `${value / (max - min) * 100}%`
+    }
+  });
+});
+
+/* NOTE: Props are injected at runtime by `SliderPrimitive.Thumb`. */
+const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb({
+  disableTooltip,
+  ...rest
+}, forwardedRef) {
+  const value = rest?.['aria-valuenow'];
+  if (disableTooltip) {
+    return /*#__PURE__*/React.createElement(Slider_styled.SliderThumb, Object.assign({
+      ref: forwardedRef
+    }, rest));
+  }
+  return /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
+    content: value,
+    offset: 6,
+    placement: Tooltip_types.TooltipPosition.TopCenter,
+    onPointerDownOutside: e => e.preventDefault()
+  }, /*#__PURE__*/React.createElement(Slider_styled.SliderThumb, Object.assign({
+    ref: forwardedRef
+  }, rest)));
+});
+
+/**
+ * An input component where the user selects a value from within a given range.
+ * The value of the slider is shown in a tooltip, and in some cases you can add a guide scale.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [value, setValue] = useState([1])
+ * // Controlled
+ * <Slider
+ *   value={value}
+ *   onValueChange={setValue}
+ * />
+ * // Uncontrolled
+ * <Slider defaultValue={[1]} />
+ * ```
+ */
 const Slider = /*#__PURE__*/React.forwardRef(function Slider({
+  style,
   width = 36,
   guide,
-  onThumbPointerDown = functionUtils.noop,
-  onThumbPointerUp = functionUtils.noop,
-  defaultValue = [5],
+  defaultValue = [0],
   value,
   disabled = false,
   min = 0,
   max = 10,
   step = 1,
-  onValueChange = functionUtils.noop,
   minStepsBetweenThumbs = 0,
+  disableTooltip = false,
   ...rest
 }, forwardedRef) {
-  const [currentValue, setCurrentValue] = React.useState(value ?? defaultValue);
-  React.useEffect(function updateCurrentValue() {
-    if (value) {
-      setCurrentValue(value);
-      onValueChange(value);
-    }
-  }, [value, onValueChange]);
-  const handleValueChange = React.useCallback(_value => {
-    setCurrentValue(_value);
-    onValueChange(_value);
-  }, [onValueChange]);
-  const handlePointerDown = React.useCallback(() => {
-    if (!disabled) {
-      onThumbPointerDown(currentValue);
-    }
-  }, [disabled, onThumbPointerDown, currentValue]);
-  const handlePointerUp = React.useCallback(() => {
-    if (!disabled) {
-      onThumbPointerUp(currentValue);
-    }
-  }, [disabled, onThumbPointerUp, currentValue]);
-  return /*#__PURE__*/React.createElement(index.Root, {
-    asChild: true,
+  const targetValue = value || defaultValue;
+  return /*#__PURE__*/React.createElement(Slider_styled.SliderPrimitiveRoot, Object.assign({
+    style: {
+      ...style,
+      '--bezier-slider-width': typeUtils.isNumber(width) ? `${width}px` : width
+    },
+    "data-testid": SLIDER_TEST_ID,
+    ref: forwardedRef,
+    orientation: "horizontal",
     defaultValue: defaultValue,
-    value: currentValue,
+    value: value,
     disabled: disabled,
     min: min,
     max: max,
     step: step,
-    onValueChange: handleValueChange,
     minStepsBetweenThumbs: minStepsBetweenThumbs
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderRoot, Object.assign({
-    width: width,
-    disabled: disabled,
-    ref: forwardedRef,
-    "data-testid": SLIDER_TEST_ID
-  }, rest), /*#__PURE__*/React.createElement(index.Track, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderTrack, null, /*#__PURE__*/React.createElement(index.Range, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderRange, null)))), guide?.map(guideValue => /*#__PURE__*/React.createElement(Slider_styled.SliderGuide, {
+  }, rest), /*#__PURE__*/React.createElement(Slider_styled.SliderPrimitiveTrack, null, /*#__PURE__*/React.createElement(Slider_styled.SliderPrimitiveRange, null), guide && /*#__PURE__*/React.createElement(Slider_styled.GuideContainer, null, guide.map(guideValue => /*#__PURE__*/React.createElement(SliderGuide, {
     key: `slider-guide-${guideValue}`,
     min: min,
     max: max,
-    guideValue: guideValue
-  })), currentValue.map((v, i) => /*#__PURE__*/React.createElement(index.Thumb, {
-    asChild: true
+    value: guideValue
+  })))), targetValue.map((_, i) => /*#__PURE__*/React.createElement(index.Thumb, {
     // eslint-disable-next-line react/no-array-index-key
-    ,
     key: `slider-thumb-${i}`,
-    onPointerDown: handlePointerDown,
-    onPointerUp: handlePointerUp
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderThumb, {
-    "data-testid": SLIDER_THUMB_TEST_ID
-  })))));
+    asChild: true
+  }, /*#__PURE__*/React.createElement(SliderThumb, {
+    disableTooltip: disableTooltip
+  }))));
 });
 
 exports.SLIDER_TEST_ID = SLIDER_TEST_ID;
-exports.SLIDER_THUMB_TEST_ID = SLIDER_THUMB_TEST_ID;
 exports.Slider = Slider;
 //# sourceMappingURL=Slider.js.map

package/dist/cjs/components/Forms/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../../src/components/Forms/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type SliderProps from './Slider.types'\n\nimport * as Styled from './Slider.styled'\n\nexport const SLIDER_TEST_ID = 'bezier-react-slider'\nexport const SLIDER_THUMB_TEST_ID = 'bezier-react-slider-thumb'\n\nexport const Slider = forwardRef(function Slider(\n  {\n    width = 36,\n    guide,\n    onThumbPointerDown = noop,\n    onThumbPointerUp = noop,\n    defaultValue = [5],\n    value,\n    disabled = false,\n    min = 0,\n    max = 10,\n    step = 1,\n    onValueChange = noop,\n    minStepsBetweenThumbs = 0,\n    ...rest\n  }: SliderProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [currentValue, setCurrentValue] = useState<number[]>(value ?? defaultValue)\n\n  useEffect(function updateCurrentValue() {\n    if (value) {\n      setCurrentValue(value)\n      onValueChange(value)\n    }\n  }, [\n    value,\n    onValueChange,\n  ])\n\n  const handleValueChange: (value: number[]) => void = useCallback((_value) => {\n    setCurrentValue(_value)\n    onValueChange(_value)\n  }, [onValueChange])\n\n  const handlePointerDown: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerDown(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerDown,\n    currentValue,\n  ])\n\n  const handlePointerUp: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerUp(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerUp,\n    currentValue,\n  ])\n\n  return (\n    <SliderPrimitive.Root\n      asChild\n      defaultValue={defaultValue}\n      value={currentValue}\n      disabled={disabled}\n      min={min}\n      max={max}\n      step={step}\n      onValueChange={handleValueChange}\n      minStepsBetweenThumbs={minStepsBetweenThumbs}\n    >\n      <Styled.SliderRoot\n        width={width}\n        disabled={disabled}\n        ref={forwardedRef}\n        data-testid={SLIDER_TEST_ID}\n        {...rest}\n      >\n        <SliderPrimitive.Track asChild>\n          <Styled.SliderTrack>\n            <SliderPrimitive.Range asChild>\n              <Styled.SliderRange />\n            </SliderPrimitive.Range>\n          </Styled.SliderTrack>\n        </SliderPrimitive.Track>\n        { guide?.map((guideValue) => (\n          <Styled.SliderGuide\n            key={`slider-guide-${guideValue}`}\n            min={min}\n            max={max}\n            guideValue={guideValue}\n          />\n        )) }\n        { currentValue.map((v, i) => (\n          <SliderPrimitive.Thumb\n            asChild\n            // eslint-disable-next-line react/no-array-index-key\n            key={`slider-thumb-${i}`}\n            onPointerDown={handlePointerDown}\n            onPointerUp={handlePointerUp}\n          >\n            <Styled.SliderThumb\n              data-testid={SLIDER_THUMB_TEST_ID}\n            />\n          </SliderPrimitive.Thumb>\n        )) }\n      </Styled.SliderRoot>\n    </SliderPrimitive.Root>\n  )\n})\n"],"names":["SLIDER_TEST_ID","SLIDER_THUMB_TEST_ID","Slider","forwardRef","width","guide","onThumbPointerDown","noop","onThumbPointerUp","defaultValue","value","disabled","min","max","step","onValueChange","minStepsBetweenThumbs","rest","forwardedRef","currentValue","setCurrentValue","useState","useEffect","updateCurrentValue","handleValueChange","useCallback","_value","handlePointerDown","handlePointerUp","React","createElement","SliderPrimitive","asChild","Styled","Object","assign","ref","map","guideValue","key","v","i","onPointerDown","onPointerUp"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../../src/components/Forms/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  memo,\n} from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport {\n  Tooltip,\n  TooltipPosition,\n} from '~/src/components/Tooltip'\n\nimport type SliderProps from './Slider.types'\n\nimport * as Styled from './Slider.styled'\n\nexport const SLIDER_TEST_ID = 'bezier-react-slider'\n\nconst SliderGuide = memo<Record<'min' | 'max' | 'value', number>>(function SliderGuide({\n  min,\n  max,\n  value,\n}) {\n  return (\n    <Styled.SliderGuide\n      style={{\n        '--bezier-slider-guide-left': `${(value / (max - min)) * 100}%`,\n      } as React.CSSProperties}\n    />\n  )\n})\n\n/* NOTE: Props are injected at runtime by `SliderPrimitive.Thumb`. */\nconst SliderThumb = forwardRef<HTMLDivElement, Pick<SliderProps, 'disableTooltip'> & React.HTMLAttributes<HTMLDivElement>>(function SliderThumb({\n  disableTooltip,\n  ...rest\n}, forwardedRef) {\n  const value = rest?.['aria-valuenow']\n\n  if (disableTooltip) {\n    return (\n      <Styled.SliderThumb\n        ref={forwardedRef}\n        {...rest}\n      />\n    )\n  }\n\n  return (\n    <Tooltip\n      content={value}\n      offset={6}\n      placement={TooltipPosition.TopCenter}\n      onPointerDownOutside={e => e.preventDefault()}\n    >\n      <Styled.SliderThumb\n        ref={forwardedRef}\n        {...rest}\n      />\n    </Tooltip>\n  )\n})\n\n/**\n * An input component where the user selects a value from within a given range.\n * The value of the slider is shown in a tooltip, and in some cases you can add a guide scale.\n *\n * @example\n *\n * ```tsx\n * const [value, setValue] = useState([1])\n * // Controlled\n * <Slider\n *   value={value}\n *   onValueChange={setValue}\n * />\n * // Uncontrolled\n * <Slider defaultValue={[1]} />\n * ```\n */\nexport const Slider = forwardRef<HTMLSpanElement, SliderProps>(function Slider({\n  style,\n  width = 36,\n  guide,\n  defaultValue = [0],\n  value,\n  disabled = false,\n  min = 0,\n  max = 10,\n  step = 1,\n  minStepsBetweenThumbs = 0,\n  disableTooltip = false,\n  ...rest\n}, forwardedRef) {\n  const targetValue = value || defaultValue\n\n  return (\n    <Styled.SliderPrimitiveRoot\n      style={{\n        ...style,\n        '--bezier-slider-width': isNumber(width) ? `${width}px` : width,\n      }}\n      data-testid={SLIDER_TEST_ID}\n      ref={forwardedRef}\n      orientation=\"horizontal\"\n      defaultValue={defaultValue}\n      value={value}\n      disabled={disabled}\n      min={min}\n      max={max}\n      step={step}\n      minStepsBetweenThumbs={minStepsBetweenThumbs}\n      {...rest}\n    >\n      <Styled.SliderPrimitiveTrack>\n        <Styled.SliderPrimitiveRange />\n\n        { guide && (\n          <Styled.GuideContainer>\n            { guide.map((guideValue) => (\n              <SliderGuide\n                key={`slider-guide-${guideValue}`}\n                min={min}\n                max={max}\n                value={guideValue}\n              />\n            )) }\n          </Styled.GuideContainer>\n        ) }\n      </Styled.SliderPrimitiveTrack>\n\n      { targetValue.map((_, i) => (\n        <SliderPrimitive.Thumb\n          // eslint-disable-next-line react/no-array-index-key\n          key={`slider-thumb-${i}`}\n          asChild\n        >\n          <SliderThumb disableTooltip={disableTooltip} />\n        </SliderPrimitive.Thumb>\n      )) }\n    </Styled.SliderPrimitiveRoot>\n  )\n})\n"],"names":["SLIDER_TEST_ID","SliderGuide","memo","min","max","value","React","createElement","Styled","style","SliderThumb","forwardRef","disableTooltip","rest","forwardedRef","Object","assign","ref","Tooltip","content","offset","placement","TooltipPosition","TopCenter","onPointerDownOutside","e","preventDefault","Slider","width","guide","defaultValue","disabled","step","minStepsBetweenThumbs","targetValue","isNumber","orientation","map","guideValue","key","_","i","SliderPrimitive","asChild"],"mappings":"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"}

package/dist/cjs/components/Forms/Slider/Slider.styled.js

@@ -1,108 +1,49 @@
 'use strict';
 
+var index = require('../../../node_modules/@radix-ui/react-slider/dist/index.js');
 var DisabledOpacity = require('../../../constants/DisabledOpacity.js');
-var styleUtils = require('../../../utils/styleUtils.js');
 var mixins = require('../Inputs/mixins.js');
 var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
 
-const SLIDER_TRACK_RANGE_HEIGHT = 6;
-const SLIDER_THUMB_SIZE = 20;
-const SLIDER_GUIDE_WIDTH = 2;
-const SLIDER_GUIDE_HEIGHT = 8;
-function calculateGuideBottomPosition({
-  gap
-}) {
-  return FoundationStyledComponent.css`
-    bottom: calc(${SLIDER_GUIDE_HEIGHT}px + ${SLIDER_GUIDE_HEIGHT / 2}px + ${gap}px);
-  `;
-}
-function calculateGuideLeftPosition({
-  min,
-  max,
-  guideValue
-}) {
-  const relativePositionPercentage = guideValue / (max - min) * 100;
-  const thumbOffsetPx = ((max + min) / 2 - guideValue) * (SLIDER_THUMB_SIZE / (max - min));
-  return FoundationStyledComponent.css`
-    left: calc(${relativePositionPercentage}% - ${SLIDER_GUIDE_WIDTH / 2}px + ${thumbOffsetPx}px);
-  `;
-}
-const SliderRoot = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Sliderstyled__SliderRoot",
+const SliderPrimitiveRoot = /*#__PURE__*/FoundationStyledComponent.styled(index.Root).withConfig({
+  displayName: "Sliderstyled__SliderPrimitiveRoot",
   componentId: "sc-k2r47n-0"
-})(["position:relative;display:flex;align-items:center;width:", ";height:", "px;touch-action:none;cursor:", ";user-select:none;opacity:", ";", ";", ""], ({
-  width
-}) => styleUtils.toLength(width, '36px'), SLIDER_THUMB_SIZE, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  disabled
-}) => disabled ? DisabledOpacity.default : 'initial', ({
+})(["--bezier-slider-width:auto;--bezier-slider-thumb-size:20px;position:relative;display:flex;align-items:center;width:var(--bezier-slider-width);height:var(--bezier-slider-thumb-size);touch-action:none;cursor:pointer;user-select:none;&[data-disabled]{cursor:not-allowed;opacity:", ";}", ";", ""], DisabledOpacity.default, ({
   foundation
 }) => foundation?.transition?.getTransitionsCSS(['opacity']), ({
   interpolation
 }) => interpolation);
-const SliderTrack = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Sliderstyled__SliderTrack",
+const SliderPrimitiveTrack = /*#__PURE__*/FoundationStyledComponent.styled(index.Track).withConfig({
+  displayName: "Sliderstyled__SliderPrimitiveTrack",
   componentId: "sc-k2r47n-1"
-})(["position:relative;flex:1;height:", "px;", " background-color:", ";", ""], SLIDER_TRACK_RANGE_HEIGHT, ({
-  foundation
-}) => foundation?.rounding?.round3, ({
-  foundation
-}) => foundation?.theme?.['bg-black-dark'], ({
-  interpolation
-}) => interpolation);
-const SliderRange = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Sliderstyled__SliderRange",
+})(["position:relative;flex:1;height:6px;background-color:var(--bg-black-dark);border-radius:3px;"]);
+const SliderPrimitiveRange = /*#__PURE__*/FoundationStyledComponent.styled(index.Range).withConfig({
+  displayName: "Sliderstyled__SliderPrimitiveRange",
   componentId: "sc-k2r47n-2"
-})(["position:absolute;height:100%;", " background-color:", ";", ""], ({
-  foundation
-}) => foundation?.rounding?.round3, ({
-  foundation
-}) => foundation?.theme?.['bgtxt-green-normal'], ({
-  interpolation
-}) => interpolation);
+})(["position:absolute;height:100%;background-color:var(--bgtxt-green-normal);border-radius:3px;"]);
+const GuideContainer = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Sliderstyled__GuideContainer",
+  componentId: "sc-k2r47n-3"
+})(["--bezier-slider-guide-height:8px;position:absolute;top:calc(-1 * (var(--bezier-slider-guide-height) + 3px));left:calc(var(--bezier-slider-thumb-size) / 2);width:calc(100% - var(--bezier-slider-thumb-size));"]);
 const SliderGuide = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "Sliderstyled__SliderGuide",
-  componentId: "sc-k2r47n-3"
-})(["position:absolute;", " ", " width:", "px;height:", "px;", " background-color:", ";", ""], calculateGuideBottomPosition({
-  gap: 3
-}), ({
-  min,
-  max,
-  guideValue
-}) => calculateGuideLeftPosition({
-  min,
-  max,
-  guideValue
-}), SLIDER_GUIDE_WIDTH, SLIDER_GUIDE_HEIGHT, ({
-  foundation
-}) => foundation?.rounding?.round1, ({
-  foundation
-}) => foundation?.theme?.['bg-black-light'], ({
-  interpolation
-}) => interpolation);
+  componentId: "sc-k2r47n-4"
+})(["--bezier-slider-guide-left:0;position:absolute;top:0;left:var(--bezier-slider-guide-left);width:2px;height:var(--bezier-slider-guide-height);background-color:var(--bg-black-light);border-radius:1px;transform:translateX(-50%);"]);
 const SliderThumb = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "Sliderstyled__SliderThumb",
-  componentId: "sc-k2r47n-4"
-})(["all:unset;display:block;width:", "px;height:", "px;", " ", " background-color:", ";&:hover{", " background-color:", ";}&:focus-visible{", "}", " ", ""], SLIDER_THUMB_SIZE, SLIDER_THUMB_SIZE, ({
-  foundation
-}) => foundation?.rounding?.round12, ({
+  componentId: "sc-k2r47n-5"
+})(["all:unset;display:block;width:var(--bezier-slider-thumb-size);height:var(--bezier-slider-thumb-size);border-radius:12px;", " background-color:var(--bgtxt-absolute-white-dark);&:hover{", " background-color:var(--bgtxt-absolute-white-dark);}&:focus-visible{", "}", ""], ({
   foundation
 }) => foundation?.elevation?.ev2(), ({
   foundation
-}) => foundation?.theme?.['bgtxt-absolute-white-dark'], ({
-  foundation
-}) => foundation?.elevation?.ev3(), ({
-  foundation
-}) => foundation?.theme?.['bgtxt-absolute-white-dark'], mixins.focusedInputWrapperStyle, ({
+}) => foundation?.elevation?.ev3(), mixins.focusedInputWrapperStyle, ({
   foundation
-}) => foundation?.transition?.getTransitionsCSS(['box-shadow']), ({
-  interpolation
-}) => interpolation);
+}) => foundation?.transition?.getTransitionsCSS(['box-shadow']));
 
+exports.GuideContainer = GuideContainer;
 exports.SliderGuide = SliderGuide;
-exports.SliderRange = SliderRange;
-exports.SliderRoot = SliderRoot;
+exports.SliderPrimitiveRange = SliderPrimitiveRange;
+exports.SliderPrimitiveRoot = SliderPrimitiveRoot;
+exports.SliderPrimitiveTrack = SliderPrimitiveTrack;
 exports.SliderThumb = SliderThumb;
-exports.SliderTrack = SliderTrack;
 //# sourceMappingURL=Slider.styled.js.map

package/dist/cjs/components/Forms/Slider/Slider.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styled.js","sources":["../../../../../src/components/Forms/Slider/Slider.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { toLength } from '~/src/utils/styleUtils'\n\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\n\nimport type SliderProps from './Slider.types'\n\nconst SLIDER_TRACK_RANGE_HEIGHT = 6\nconst SLIDER_THUMB_SIZE = 20\nconst SLIDER_GUIDE_WIDTH = 2\nconst SLIDER_GUIDE_HEIGHT = 8\n\ninterface CalculateGuideBottomPosition {\n  gap: number\n}\n\nfunction calculateGuideBottomPosition({\n  gap,\n}: CalculateGuideBottomPosition) {\n  return css`\n    bottom: calc(${SLIDER_GUIDE_HEIGHT}px + ${SLIDER_GUIDE_HEIGHT / 2}px + ${gap}px);\n  `\n}\n\ninterface CalculateGuideLeftPosition {\n  min: number\n  max: number\n  guideValue: number\n}\n\nfunction calculateGuideLeftPosition({\n  min,\n  max,\n  guideValue,\n}: CalculateGuideLeftPosition) {\n  const relativePositionPercentage = (guideValue / (max - min)) * 100\n  const thumbOffsetPx = (((max + min) / 2) - guideValue) * (SLIDER_THUMB_SIZE / ((max - min)))\n\n  return css`\n    left: calc(${relativePositionPercentage}% - ${SLIDER_GUIDE_WIDTH / 2}px + ${thumbOffsetPx}px);\n  `\n}\n\ninterface SliderRootProps extends SliderProps {\n  width: NonNullable<SliderProps['width']>\n}\n\nexport const SliderRoot = styled.div<SliderRootProps>`\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  width: ${({ width }) => toLength(width, '36px')};\n  height: ${SLIDER_THUMB_SIZE}px;\n\n  touch-action: none;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  user-select: none;\n\n  opacity: ${({ disabled }) => (disabled ? DisabledOpacity : 'initial')};\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['opacity'])};\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderTrackProps extends SliderProps {}\n\nexport const SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  flex: 1;\n  height: ${SLIDER_TRACK_RANGE_HEIGHT}px;\n\n  ${({ foundation }) => foundation?.rounding?.round3}\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderRangeProps extends SliderProps {}\n\nexport const SliderRange = styled.div<SliderRangeProps>`\n  position: absolute;\n  height: 100%;\n\n  ${({ foundation }) => foundation?.rounding?.round3}\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-normal']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderGuideProps extends SliderProps {\n  min: NonNullable<SliderProps['min']>\n  max: NonNullable<SliderProps['max']>\n  guideValue: number\n}\n\nexport const SliderGuide = styled.div<SliderGuideProps>`\n  position: absolute;\n  ${calculateGuideBottomPosition({ gap: 3 })}\n  ${({ min, max, guideValue }) => calculateGuideLeftPosition({ min, max, guideValue })}\n\n  width: ${SLIDER_GUIDE_WIDTH}px;\n  height: ${SLIDER_GUIDE_HEIGHT}px;\n\n  ${({ foundation }) => foundation?.rounding?.round1}\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-light']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderThumbProps extends SliderProps {}\n\nexport const SliderThumb = styled.div<SliderThumbProps>`\n  all: unset;\n  display: block;\n\n  width: ${SLIDER_THUMB_SIZE}px;\n  height: ${SLIDER_THUMB_SIZE}px;\n\n  ${({ foundation }) => foundation?.rounding?.round12}\n  ${({ foundation }) => foundation?.elevation?.ev2()}\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};\n\n  &:hover {\n    ${({ foundation }) => foundation?.elevation?.ev3()}\n    background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};\n  }\n\n  &:focus-visible {\n    ${focusedInputWrapperStyle}\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['box-shadow'])}\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["SLIDER_TRACK_RANGE_HEIGHT","SLIDER_THUMB_SIZE","SLIDER_GUIDE_WIDTH","SLIDER_GUIDE_HEIGHT","calculateGuideBottomPosition","gap","css","calculateGuideLeftPosition","min","max","guideValue","relativePositionPercentage","thumbOffsetPx","SliderRoot","styled","div","withConfig","displayName","componentId","width","toLength","disabled","DisabledOpacity","foundation","transition","getTransitionsCSS","interpolation","SliderTrack","rounding","round3","theme","SliderRange","SliderGuide","round1","SliderThumb","round12","elevation","ev2","ev3","focusedInputWrapperStyle"],"mappings":"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"}
+{"version":3,"file":"Slider.styled.js","sources":["../../../../../src/components/Forms/Slider/Slider.styled.ts"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { styled } from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\n\nexport const SliderPrimitiveRoot = styled(SliderPrimitive.Root)<InterpolationProps>`\n  --bezier-slider-width: auto;\n  --bezier-slider-thumb-size: 20px;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: var(--bezier-slider-width);\n  height: var(--bezier-slider-thumb-size);\n  touch-action: none;\n  cursor: pointer;\n  user-select: none;\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: ${DisabledOpacity};\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['opacity'])};\n  ${({ interpolation }) => interpolation}\n`\n\nexport const SliderPrimitiveTrack = styled(SliderPrimitive.Track)`\n  position: relative;\n  flex: 1;\n  height: 6px;\n  background-color: var(--bg-black-dark);\n  border-radius: 3px;\n`\n\nexport const SliderPrimitiveRange = styled(SliderPrimitive.Range)`\n  position: absolute;\n  height: 100%;\n  background-color: var(--bgtxt-green-normal);\n  border-radius: 3px;\n`\n\nexport const GuideContainer = styled.div`\n  --bezier-slider-guide-height: 8px;\n\n  position: absolute;\n  top: calc(-1 * (var(--bezier-slider-guide-height) + 3px));\n  left: calc(var(--bezier-slider-thumb-size) / 2);\n  width: calc(100% - var(--bezier-slider-thumb-size));\n`\n\nexport const SliderGuide = styled.div`\n  --bezier-slider-guide-left: 0;\n\n  position: absolute;\n  top: 0;\n  left: var(--bezier-slider-guide-left);\n  width: 2px;\n  height: var(--bezier-slider-guide-height);\n  background-color: var(--bg-black-light);\n  border-radius: 1px;\n  transform: translateX(-50%);\n`\n\nexport const SliderThumb = styled.div`\n  all: unset;\n  display: block;\n  width: var(--bezier-slider-thumb-size);\n  height: var(--bezier-slider-thumb-size);\n  border-radius: 12px;\n\n  ${({ foundation }) => foundation?.elevation?.ev2()}\n  /* stylelint-disable order/properties-order */\n  /* NOTE: Override the background-color property inside ev mixin */\n  background-color: var(--bgtxt-absolute-white-dark);\n\n  &:hover {\n    ${({ foundation }) => foundation?.elevation?.ev3()}\n    background-color: var(--bgtxt-absolute-white-dark);\n  }\n\n  &:focus-visible {\n    ${focusedInputWrapperStyle}\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['box-shadow'])}\n`\n"],"names":["SliderPrimitiveRoot","styled","SliderPrimitive","withConfig","displayName","componentId","DisabledOpacity","foundation","transition","getTransitionsCSS","interpolation","SliderPrimitiveTrack","SliderPrimitiveRange","GuideContainer","div","SliderGuide","SliderThumb","elevation","ev2","ev3","focusedInputWrapperStyle"],"mappings":";;;;;;;AASO,MAAMA,mBAAmB,gBAAGC,gCAAM,CAACC,UAAoB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAehDC,CAAAA,CAAAA,CAAAA,qRAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,uBAAe,EAG1B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAAC,EAC1E,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;AAEM,MAAMC,oBAAoB,gBAAGV,gCAAM,CAACC,WAAqB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAMhE,CAAA,CAAA,CAAA,8FAAA,CAAA,EAAA;AAEM,MAAMO,oBAAoB,gBAAGX,gCAAM,CAACC,WAAqB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAKhE,CAAA,CAAA,CAAA,6FAAA,CAAA,EAAA;MAEYQ,cAAc,gBAAGZ,gCAAM,CAACa,GAAG,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAOvC,CAAA,CAAA,CAAA,gNAAA,CAAA,EAAA;MAEYU,WAAW,gBAAGd,gCAAM,CAACa,GAAG,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAWpC,CAAA,CAAA,CAAA,mOAAA,CAAA,EAAA;MAEYW,WAAW,gBAAGf,gCAAM,CAACa,GAAG,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0HAAA,EAAA,6DAAA,EAAA,sEAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAOjC,CAAC;AAAEE,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEU,SAAS,EAAEC,GAAG,EAAE,EAM9C,CAAC;AAAEX,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEU,SAAS,EAAEE,GAAG,EAAE,EAKhDC,+BAAwB,EAG1B,CAAC;AAAEb,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,CAAC,CAAC,YAAY,CAAC,CAAC;;;;;;;;;"}

package/dist/cjs/components/Help/Help.js

@@ -6,29 +6,32 @@ var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
 var typeUtils = require('../../utils/typeUtils.js');
 var Help_styled = require('./Help.styled.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 var Icon_types = require('../Icon/Icon.types.js');
 
 const HELP_TEST_ID = 'bezier-react-help';
 const HELP_DISPLAY_NAME = 'Help';
-function Help({
+const Help = /*#__PURE__*/React.forwardRef(function Help({
   children,
   ...rest
-}) {
+}, forwardedRef) {
   if (typeUtils.isEmpty(children)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Help_styled.Tooltip, Object.assign({}, rest, {
+  return /*#__PURE__*/React.createElement(Tooltip.Tooltip, Object.assign({}, rest, {
+    ref: forwardedRef,
     content: children
-  }), /*#__PURE__*/React.createElement(Help_styled.Icon, {
+  }), /*#__PURE__*/React.createElement(Help_styled.Trigger, null, /*#__PURE__*/React.createElement(Help_styled.Icon, {
     testId: HELP_TEST_ID,
     source: bezierIcons.HelpFilledIcon,
     size: Icon_types.IconSize.XS,
     color: "txt-black-dark"
-  }));
-}
+  })));
+});
 Help.displayName = HELP_DISPLAY_NAME;
+var Help$1 = Help;
 
 exports.HELP_DISPLAY_NAME = HELP_DISPLAY_NAME;
 exports.HELP_TEST_ID = HELP_TEST_ID;
-exports.default = Help;
+exports.default = Help$1;
 //# sourceMappingURL=Help.js.map

package/dist/cjs/components/Help/Help.js.map

@@ -1 +1 @@
-{"version":3,"file":"Help.js","sources":["../../../../src/components/Help/Help.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HelpFilledIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\n\nimport type HelpProps from './Help.types'\n\nimport * as Styled from './Help.styled'\n\nexport const HELP_TEST_ID = 'bezier-react-help'\nexport const HELP_DISPLAY_NAME = 'Help'\n\nfunction Help({\n  children,\n  ...rest\n}: HelpProps) {\n  if (isEmpty(children)) { return null }\n\n  return (\n    <Styled.Tooltip {...rest} content={children}>\n      <Styled.Icon\n        testId={HELP_TEST_ID}\n        source={HelpFilledIcon}\n        size={IconSize.XS}\n        color=\"txt-black-dark\"\n      />\n    </Styled.Tooltip>\n  )\n}\n\nHelp.displayName = HELP_DISPLAY_NAME\n\nexport default Help\n"],"names":["HELP_TEST_ID","HELP_DISPLAY_NAME","Help","children","rest","isEmpty","React","createElement","Styled","Object","assign","content","testId","source","HelpFilledIcon","size","IconSize","XS","color","displayName"],"mappings":";;;;;;;;;;AAYO,MAAMA,YAAY,GAAG,oBAAmB;AACxC,MAAMC,iBAAiB,GAAG,OAAM;AAEvC,SAASC,IAAIA,CAAC;EACZC,QAAQ;EACR,GAAGC,IAAAA;AACM,CAAC,EAAE;AACZ,EAAA,IAAIC,iBAAO,CAACF,QAAQ,CAAC,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAErC,EAAA,oBACEG,KAAA,CAAAC,aAAA,CAACC,mBAAc,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAKN,IAAI,EAAA;AAAEO,IAAAA,OAAO,EAAER,QAAAA;AAAS,GAAA,CAAA,eAC1CG,KAAA,CAAAC,aAAA,CAACC,gBAAW,EAAA;AACVI,IAAAA,MAAM,EAAEZ,YAAa;AACrBa,IAAAA,MAAM,EAAEC,0BAAe;IACvBC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAC,gBAAA;AAAgB,GACvB,CACa,CAAC,CAAA;AAErB,CAAA;AAEAhB,IAAI,CAACiB,WAAW,GAAGlB,iBAAiB;;;;;;"}
+{"version":3,"file":"Help.js","sources":["../../../../src/components/Help/Help.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { HelpFilledIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport type HelpProps from './Help.types'\n\nimport * as Styled from './Help.styled'\n\nexport const HELP_TEST_ID = 'bezier-react-help'\nexport const HELP_DISPLAY_NAME = 'Help'\n\nconst Help = forwardRef<HTMLDivElement, HelpProps>(function Help({\n  children,\n  ...rest\n}, forwardedRef) {\n  if (isEmpty(children)) { return null }\n\n  return (\n    <Tooltip\n      {...rest}\n      ref={forwardedRef}\n      content={children}\n    >\n      <Styled.Trigger>\n        <Styled.Icon\n          testId={HELP_TEST_ID}\n          source={HelpFilledIcon}\n          size={IconSize.XS}\n          color=\"txt-black-dark\"\n        />\n      </Styled.Trigger>\n    </Tooltip>\n  )\n})\n\nHelp.displayName = HELP_DISPLAY_NAME\n\nexport default Help\n"],"names":["HELP_TEST_ID","HELP_DISPLAY_NAME","Help","forwardRef","children","rest","forwardedRef","isEmpty","React","createElement","Tooltip","Object","assign","ref","content","Styled","testId","source","HelpFilledIcon","size","IconSize","XS","color","displayName"],"mappings":";;;;;;;;;;;AAaO,MAAMA,YAAY,GAAG,oBAAmB;AACxC,MAAMC,iBAAiB,GAAG,OAAM;AAEvC,MAAMC,IAAI,gBAAGC,gBAAU,CAA4B,SAASD,IAAIA,CAAC;EAC/DE,QAAQ;EACR,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,IAAIC,iBAAO,CAACH,QAAQ,CAAC,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;EAErC,oBACEI,KAAA,CAAAC,aAAA,CAACC,eAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACFP,IAAI,EAAA;AACRQ,IAAAA,GAAG,EAAEP,YAAa;AAClBQ,IAAAA,OAAO,EAAEV,QAAAA;AAAS,GAAA,CAAA,eAElBI,KAAA,CAAAC,aAAA,CAACM,mBAAc,EACbP,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACM,gBAAW,EAAA;AACVC,IAAAA,MAAM,EAAEhB,YAAa;AACrBiB,IAAAA,MAAM,EAAEC,0BAAe;IACvBC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAC,gBAAA;GACP,CACa,CACT,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEFpB,IAAI,CAACqB,WAAW,GAAGtB,iBAAiB,CAAA;AAEpC,aAAeC,IAAI;;;;;;"}