@remember-web/primitive 0.1.19 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (258) hide show
  1. package/dist/src/Avatars/Avatar/index.cjs.js +2 -2
  2. package/dist/src/Avatars/Avatar/index.cjs.js.map +1 -1
  3. package/dist/src/Avatars/Avatar/index.d.ts +1 -1
  4. package/dist/src/Avatars/Avatar/index.d.ts.map +1 -1
  5. package/dist/src/Avatars/Avatar/index.esm.js +2 -2
  6. package/dist/src/Avatars/Avatar/index.esm.js.map +1 -1
  7. package/dist/src/Avatars/Avatar/styles.cjs.js.map +1 -1
  8. package/dist/src/Avatars/Avatar/styles.d.ts.map +1 -1
  9. package/dist/src/Avatars/Avatar/styles.esm.js.map +1 -1
  10. package/dist/src/Badge/style.cjs.js +1 -1
  11. package/dist/src/Badge/style.cjs.js.map +1 -1
  12. package/dist/src/Badge/style.esm.js +1 -1
  13. package/dist/src/Badge/style.esm.js.map +1 -1
  14. package/dist/src/Badge/utils.cjs.js.map +1 -1
  15. package/dist/src/Badge/utils.d.ts.map +1 -1
  16. package/dist/src/Badge/utils.esm.js.map +1 -1
  17. package/dist/src/Buttons/Button/index.cjs.js +3 -2
  18. package/dist/src/Buttons/Button/index.cjs.js.map +1 -1
  19. package/dist/src/Buttons/Button/index.d.ts +2 -3
  20. package/dist/src/Buttons/Button/index.d.ts.map +1 -1
  21. package/dist/src/Buttons/Button/index.esm.js +3 -2
  22. package/dist/src/Buttons/Button/index.esm.js.map +1 -1
  23. package/dist/src/Buttons/Button/styles.cjs.js +1 -1
  24. package/dist/src/Buttons/Button/styles.cjs.js.map +1 -1
  25. package/dist/src/Buttons/Button/styles.d.ts.map +1 -1
  26. package/dist/src/Buttons/Button/styles.esm.js +1 -1
  27. package/dist/src/Buttons/Button/styles.esm.js.map +1 -1
  28. package/dist/src/Buttons/index.d.ts +1 -1
  29. package/dist/src/Buttons/index.d.ts.map +1 -1
  30. package/dist/src/Common/Divider/index.cjs.js +10 -2
  31. package/dist/src/Common/Divider/index.cjs.js.map +1 -1
  32. package/dist/src/Common/Divider/index.d.ts +2 -0
  33. package/dist/src/Common/Divider/index.d.ts.map +1 -1
  34. package/dist/src/Common/Divider/index.esm.js +10 -2
  35. package/dist/src/Common/Divider/index.esm.js.map +1 -1
  36. package/dist/src/Common/Flex/index.cjs.js +1 -1
  37. package/dist/src/Common/Flex/index.cjs.js.map +1 -1
  38. package/dist/src/Common/Flex/index.d.ts +2 -2
  39. package/dist/src/Common/Flex/index.d.ts.map +1 -1
  40. package/dist/src/Common/Flex/index.esm.js +1 -1
  41. package/dist/src/Common/Flex/index.esm.js.map +1 -1
  42. package/dist/src/Common/Skeleton/index.cjs.js +34 -0
  43. package/dist/src/Common/Skeleton/index.cjs.js.map +1 -0
  44. package/dist/src/Common/Skeleton/index.d.ts +5 -0
  45. package/dist/src/Common/Skeleton/index.d.ts.map +1 -0
  46. package/dist/src/Common/Skeleton/index.esm.js +27 -0
  47. package/dist/src/Common/Skeleton/index.esm.js.map +1 -0
  48. package/dist/src/Common/Skeleton/styles.cjs.js +34 -0
  49. package/dist/src/Common/Skeleton/styles.cjs.js.map +1 -0
  50. package/dist/src/Common/Skeleton/styles.d.ts +10 -0
  51. package/dist/src/Common/Skeleton/styles.d.ts.map +1 -0
  52. package/dist/src/Common/Skeleton/styles.esm.js +26 -0
  53. package/dist/src/Common/Skeleton/styles.esm.js.map +1 -0
  54. package/dist/src/Common/Spinner/styles.cjs.js.map +1 -1
  55. package/dist/src/Common/Spinner/styles.d.ts.map +1 -1
  56. package/dist/src/Common/Spinner/styles.esm.js.map +1 -1
  57. package/dist/src/Common/Spinner/types.d.ts +1 -1
  58. package/dist/src/Common/Spinner/types.d.ts.map +1 -1
  59. package/dist/src/Common/Typography/index.cjs.js +1 -1
  60. package/dist/src/Common/Typography/index.cjs.js.map +1 -1
  61. package/dist/src/Common/Typography/index.d.ts +3 -3
  62. package/dist/src/Common/Typography/index.d.ts.map +1 -1
  63. package/dist/src/Common/Typography/index.esm.js +1 -1
  64. package/dist/src/Common/Typography/index.esm.js.map +1 -1
  65. package/dist/src/Common/Typography/styles.cjs.js +1 -1
  66. package/dist/src/Common/Typography/styles.cjs.js.map +1 -1
  67. package/dist/src/Common/Typography/styles.d.ts +1 -1
  68. package/dist/src/Common/Typography/styles.d.ts.map +1 -1
  69. package/dist/src/Common/Typography/styles.esm.js +1 -1
  70. package/dist/src/Common/Typography/styles.esm.js.map +1 -1
  71. package/dist/src/Common/index.d.ts +3 -2
  72. package/dist/src/Common/index.d.ts.map +1 -1
  73. package/dist/src/Control/BaseToggle/ToggleIcon/index.cjs.js.map +1 -1
  74. package/dist/src/Control/BaseToggle/ToggleIcon/index.d.ts.map +1 -1
  75. package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js.map +1 -1
  76. package/dist/src/Control/BaseToggle/index.cjs.js +2 -1
  77. package/dist/src/Control/BaseToggle/index.cjs.js.map +1 -1
  78. package/dist/src/Control/BaseToggle/index.esm.js +2 -1
  79. package/dist/src/Control/BaseToggle/index.esm.js.map +1 -1
  80. package/dist/src/Control/BaseToggle/styles.cjs.js +1 -1
  81. package/dist/src/Control/BaseToggle/styles.cjs.js.map +1 -1
  82. package/dist/src/Control/BaseToggle/styles.esm.js +1 -1
  83. package/dist/src/Control/BaseToggle/styles.esm.js.map +1 -1
  84. package/dist/src/Control/Checkbox.cjs.js.map +1 -1
  85. package/dist/src/Control/Checkbox.d.ts.map +1 -1
  86. package/dist/src/Control/Checkbox.esm.js.map +1 -1
  87. package/dist/src/Control/Radio.cjs.js.map +1 -1
  88. package/dist/src/Control/Radio.esm.js.map +1 -1
  89. package/dist/src/Control/Switch/index.cjs.js.map +1 -1
  90. package/dist/src/Control/Switch/index.esm.js.map +1 -1
  91. package/dist/src/Control/Switch/styles.cjs.js +1 -1
  92. package/dist/src/Control/Switch/styles.cjs.js.map +1 -1
  93. package/dist/src/Control/Switch/styles.esm.js +1 -1
  94. package/dist/src/Control/Switch/styles.esm.js.map +1 -1
  95. package/dist/src/Control/Toggle.cjs.js.map +1 -1
  96. package/dist/src/Control/Toggle.d.ts.map +1 -1
  97. package/dist/src/Control/Toggle.esm.js.map +1 -1
  98. package/dist/src/Floating/DropdownMenu/DropdownMenuSection.cjs.js.map +1 -1
  99. package/dist/src/Floating/DropdownMenu/DropdownMenuSection.d.ts +1 -1
  100. package/dist/src/Floating/DropdownMenu/DropdownMenuSection.d.ts.map +1 -1
  101. package/dist/src/Floating/DropdownMenu/DropdownMenuSection.esm.js.map +1 -1
  102. package/dist/src/Floating/DropdownMenu/index.cjs.js.map +1 -1
  103. package/dist/src/Floating/DropdownMenu/index.d.ts.map +1 -1
  104. package/dist/src/Floating/DropdownMenu/index.esm.js.map +1 -1
  105. package/dist/src/Floating/DropdownMenu/styles.cjs.js +1 -1
  106. package/dist/src/Floating/DropdownMenu/styles.cjs.js.map +1 -1
  107. package/dist/src/Floating/DropdownMenu/styles.d.ts.map +1 -1
  108. package/dist/src/Floating/DropdownMenu/styles.esm.js +1 -1
  109. package/dist/src/Floating/DropdownMenu/styles.esm.js.map +1 -1
  110. package/dist/src/Floating/Popover/styles.cjs.js +1 -1
  111. package/dist/src/Floating/Popover/styles.cjs.js.map +1 -1
  112. package/dist/src/Floating/Popover/styles.esm.js +1 -1
  113. package/dist/src/Floating/Popover/styles.esm.js.map +1 -1
  114. package/dist/src/Floating/Tooltip/index.cjs.js +2 -2
  115. package/dist/src/Floating/Tooltip/index.cjs.js.map +1 -1
  116. package/dist/src/Floating/Tooltip/index.d.ts.map +1 -1
  117. package/dist/src/Floating/Tooltip/index.esm.js +2 -2
  118. package/dist/src/Floating/Tooltip/index.esm.js.map +1 -1
  119. package/dist/src/Floating/Tooltip/styles.cjs.js +1 -1
  120. package/dist/src/Floating/Tooltip/styles.cjs.js.map +1 -1
  121. package/dist/src/Floating/Tooltip/styles.esm.js +1 -1
  122. package/dist/src/Floating/Tooltip/styles.esm.js.map +1 -1
  123. package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js +2 -2
  124. package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js.map +1 -1
  125. package/dist/src/Inputs/Select/DesignedSelect/index.d.ts.map +1 -1
  126. package/dist/src/Inputs/Select/DesignedSelect/index.esm.js +2 -2
  127. package/dist/src/Inputs/Select/DesignedSelect/index.esm.js.map +1 -1
  128. package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js +1 -1
  129. package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js.map +1 -1
  130. package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js +1 -1
  131. package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js.map +1 -1
  132. package/dist/src/Inputs/Select/NativeSelect/index.cjs.js +2 -2
  133. package/dist/src/Inputs/Select/NativeSelect/index.cjs.js.map +1 -1
  134. package/dist/src/Inputs/Select/NativeSelect/index.esm.js +2 -2
  135. package/dist/src/Inputs/Select/NativeSelect/index.esm.js.map +1 -1
  136. package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js +1 -1
  137. package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js.map +1 -1
  138. package/dist/src/Inputs/Select/NativeSelect/styles.esm.js +1 -1
  139. package/dist/src/Inputs/Select/NativeSelect/styles.esm.js.map +1 -1
  140. package/dist/src/Inputs/Select/NativeSelect/types.d.ts +1 -1
  141. package/dist/src/Inputs/Select/NativeSelect/types.d.ts.map +1 -1
  142. package/dist/src/Inputs/Select/Option/index.cjs.js +0 -1
  143. package/dist/src/Inputs/Select/Option/index.cjs.js.map +1 -1
  144. package/dist/src/Inputs/Select/Option/index.d.ts.map +1 -1
  145. package/dist/src/Inputs/Select/Option/index.esm.js +0 -1
  146. package/dist/src/Inputs/Select/Option/index.esm.js.map +1 -1
  147. package/dist/src/Inputs/Select/styles.cjs.js +1 -1
  148. package/dist/src/Inputs/Select/styles.cjs.js.map +1 -1
  149. package/dist/src/Inputs/Select/styles.esm.js +1 -1
  150. package/dist/src/Inputs/Select/styles.esm.js.map +1 -1
  151. package/dist/src/Inputs/TextInput/index.cjs.js +1 -1
  152. package/dist/src/Inputs/TextInput/index.cjs.js.map +1 -1
  153. package/dist/src/Inputs/TextInput/index.esm.js +1 -1
  154. package/dist/src/Inputs/TextInput/index.esm.js.map +1 -1
  155. package/dist/src/Inputs/TextInput/styles.cjs.js +1 -1
  156. package/dist/src/Inputs/TextInput/styles.cjs.js.map +1 -1
  157. package/dist/src/Inputs/TextInput/styles.esm.js +1 -1
  158. package/dist/src/Inputs/TextInput/styles.esm.js.map +1 -1
  159. package/dist/src/Inputs/TextInput/types.d.ts +1 -1
  160. package/dist/src/Inputs/TextInput/types.d.ts.map +1 -1
  161. package/dist/src/Logos/RememberServiceLogo/index.cjs.js +1 -0
  162. package/dist/src/Logos/RememberServiceLogo/index.cjs.js.map +1 -1
  163. package/dist/src/Logos/RememberServiceLogo/index.d.ts.map +1 -1
  164. package/dist/src/Logos/RememberServiceLogo/index.esm.js +1 -0
  165. package/dist/src/Logos/RememberServiceLogo/index.esm.js.map +1 -1
  166. package/dist/src/Logos/RememberServiceLogo/style.cjs.js +1 -1
  167. package/dist/src/Logos/RememberServiceLogo/style.cjs.js.map +1 -1
  168. package/dist/src/Logos/RememberServiceLogo/style.esm.js +1 -1
  169. package/dist/src/Logos/RememberServiceLogo/style.esm.js.map +1 -1
  170. package/dist/src/Modals/Dialog/index.cjs.js +1 -1
  171. package/dist/src/Modals/Dialog/index.cjs.js.map +1 -1
  172. package/dist/src/Modals/Dialog/index.esm.js +1 -1
  173. package/dist/src/Modals/Dialog/index.esm.js.map +1 -1
  174. package/dist/src/Modals/Dialog/styles.cjs.js +2 -2
  175. package/dist/src/Modals/Dialog/styles.cjs.js.map +1 -1
  176. package/dist/src/Modals/Dialog/styles.d.ts.map +1 -1
  177. package/dist/src/Modals/Dialog/styles.esm.js +1 -1
  178. package/dist/src/Modals/Dialog/styles.esm.js.map +1 -1
  179. package/dist/src/Paginations/CompactPagination/index.cjs.js +1 -1
  180. package/dist/src/Paginations/CompactPagination/index.cjs.js.map +1 -1
  181. package/dist/src/Paginations/CompactPagination/index.esm.js +1 -1
  182. package/dist/src/Paginations/CompactPagination/index.esm.js.map +1 -1
  183. package/dist/src/Paginations/styles.cjs.js +1 -1
  184. package/dist/src/Paginations/styles.cjs.js.map +1 -1
  185. package/dist/src/Paginations/styles.esm.js +1 -1
  186. package/dist/src/Paginations/styles.esm.js.map +1 -1
  187. package/dist/src/hooks/useMouseEventAway.cjs.js.map +1 -1
  188. package/dist/src/hooks/useMouseEventAway.esm.js.map +1 -1
  189. package/dist/src/index.cjs.js +40 -38
  190. package/dist/src/index.cjs.js.map +1 -1
  191. package/dist/src/index.esm.js +4 -3
  192. package/dist/src/index.esm.js.map +1 -1
  193. package/dist/src/stories/common.styles.d.ts.map +1 -1
  194. package/package.json +3 -6
  195. package/src/Avatars/Avatar/Avatar.stories.tsx +1 -1
  196. package/src/Avatars/Avatar/index.tsx +3 -3
  197. package/src/Avatars/Avatar/styles.ts +1 -1
  198. package/src/Badge/Badge.stories.tsx +2 -2
  199. package/src/Badge/style.tsx +1 -1
  200. package/src/Badge/utils.ts +1 -1
  201. package/src/Buttons/Button/Button.stories.tsx +1 -1
  202. package/src/Buttons/Button/index.tsx +19 -21
  203. package/src/Buttons/Button/styles.ts +11 -8
  204. package/src/Buttons/index.ts +1 -1
  205. package/src/Common/Divider/Divider.stories.tsx +1 -1
  206. package/src/Common/Divider/index.tsx +7 -4
  207. package/src/Common/Flex/index.tsx +17 -10
  208. package/src/Common/Skeleton/Skeleton.stories.tsx +35 -0
  209. package/src/Common/Skeleton/index.tsx +25 -0
  210. package/src/Common/Skeleton/styles.ts +46 -0
  211. package/src/Common/Spinner/Spinner.stories.tsx +1 -1
  212. package/src/Common/Spinner/styles.ts +5 -3
  213. package/src/Common/Spinner/types.ts +1 -1
  214. package/src/Common/Typography/Typography.stories.tsx +4 -5
  215. package/src/Common/Typography/index.tsx +8 -10
  216. package/src/Common/Typography/styles.ts +3 -3
  217. package/src/Common/index.ts +3 -2
  218. package/src/Control/BaseToggle/ToggleIcon/index.tsx +1 -1
  219. package/src/Control/BaseToggle/styles.ts +1 -1
  220. package/src/Control/Checkbox.stories.tsx +0 -2
  221. package/src/Control/Checkbox.tsx +1 -1
  222. package/src/Control/Radio.stories.tsx +1 -1
  223. package/src/Control/Radio.tsx +1 -1
  224. package/src/Control/Switch/Switch.stories.tsx +0 -1
  225. package/src/Control/Switch/index.tsx +1 -1
  226. package/src/Control/Switch/styles.ts +1 -1
  227. package/src/Control/Toggle.stories.tsx +1 -2
  228. package/src/Control/Toggle.tsx +1 -1
  229. package/src/Floating/DropdownMenu/DropdownMenuSection.tsx +2 -2
  230. package/src/Floating/DropdownMenu/index.tsx +1 -1
  231. package/src/Floating/DropdownMenu/styles.tsx +1 -1
  232. package/src/Floating/Popover/Popover.stories.tsx +1 -1
  233. package/src/Floating/Popover/styles.ts +1 -1
  234. package/src/Floating/Tooltip/Tooltip.stories.tsx +1 -1
  235. package/src/Floating/Tooltip/index.tsx +4 -4
  236. package/src/Floating/Tooltip/styles.ts +1 -1
  237. package/src/Inputs/Select/DesignedSelect/index.tsx +3 -3
  238. package/src/Inputs/Select/DesignedSelect/styles.ts +2 -2
  239. package/src/Inputs/Select/NativeSelect/index.tsx +2 -2
  240. package/src/Inputs/Select/NativeSelect/styles.ts +1 -1
  241. package/src/Inputs/Select/NativeSelect/types.ts +1 -1
  242. package/src/Inputs/Select/Option/index.tsx +0 -1
  243. package/src/Inputs/Select/Select.stories.tsx +0 -2
  244. package/src/Inputs/Select/styles.ts +1 -1
  245. package/src/Inputs/TextInput/index.tsx +1 -1
  246. package/src/Inputs/TextInput/styles.ts +2 -2
  247. package/src/Inputs/TextInput/types.ts +1 -1
  248. package/src/Logos/RememberServiceLogo/index.tsx +1 -1
  249. package/src/Logos/RememberServiceLogo/style.ts +1 -1
  250. package/src/Modals/Dialog/Dialog.stories.tsx +1 -1
  251. package/src/Modals/Dialog/index.tsx +2 -2
  252. package/src/Modals/Dialog/styles.ts +2 -2
  253. package/src/Paginations/CompactPagination/CompactPagination.stories.tsx +0 -1
  254. package/src/Paginations/CompactPagination/index.tsx +1 -1
  255. package/src/Paginations/Pagination/Pagination.stories.tsx +0 -1
  256. package/src/Paginations/styles.ts +2 -2
  257. package/src/hooks/useMouseEventAway.ts +1 -1
  258. package/src/stories/common.styles.tsx +2 -2
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import type { ConvertTransientProps } from '@remember-web/shared';
3
+ import type { StyledSkeletonProps } from '../../Common/Skeleton/styles';
4
+ export declare const Skeleton: import("react").ForwardRefExoticComponent<Partial<ConvertTransientProps<StyledSkeletonProps>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | null>>;
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Skeleton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAMpE,eAAO,MAAM,QAAQ,wQAcnB,CAAC"}
@@ -0,0 +1,27 @@
1
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import { forwardRef } from 'react';
4
+ import { StyledSkeleton } from './styles.esm.js';
5
+ import { jsx } from 'react/jsx-runtime';
6
+
7
+ var _excluded = ["variant", "width", "height", "animate"];
8
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
9
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
10
+ var Skeleton = /*#__PURE__*/forwardRef(function (_ref, ref) {
11
+ var variant = _ref.variant,
12
+ width = _ref.width,
13
+ height = _ref.height,
14
+ _ref$animate = _ref.animate,
15
+ animate = _ref$animate === void 0 ? true : _ref$animate,
16
+ props = _objectWithoutProperties(_ref, _excluded);
17
+ return /*#__PURE__*/jsx(StyledSkeleton, _objectSpread({
18
+ ref: ref,
19
+ $variant: variant,
20
+ $width: width,
21
+ $height: height,
22
+ $animate: animate
23
+ }, props));
24
+ });
25
+
26
+ export { Skeleton };
27
+ //# sourceMappingURL=index.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Skeleton/index.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { ConvertTransientProps } from '@remember-web/shared';\n\nimport type { StyledSkeletonProps } from '@/Common/Skeleton/styles';\nimport { StyledSkeleton } from '@/Common/Skeleton/styles';\n\ntype SkeletonProps = Partial<ConvertTransientProps<StyledSkeletonProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nexport const Skeleton = forwardRef(function (\n { variant, width, height, animate = true, ...props }: SkeletonProps,\n ref: ForwardedRef<HTMLDivElement | null>\n) {\n return (\n <StyledSkeleton\n ref={ref}\n $variant={variant}\n $width={width}\n $height={height}\n $animate={animate}\n {...props}\n />\n );\n});\n"],"names":["Skeleton","forwardRef","_ref","ref","variant","width","height","_ref$animate","animate","props","_objectWithoutProperties","_excluded","_jsx","StyledSkeleton","_objectSpread","$variant","$width","$height","$animate"],"mappings":";;;;;;;;;AAUO,IAAMA,QAAQ,gBAAGC,UAAU,CAAC,UAAAC,IAAA,EAEjCC,GAAwC,EACxC;AAAA,EAAA,IAFEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAAC,YAAA,GAAAL,IAAA,CAAEM,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,YAAA;AAAKE,IAAAA,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA,CAAA;AAGlD,EAAA,oBACEC,GAAA,CAACC,cAAc,EAAAC,aAAA,CAAA;AACbX,IAAAA,GAAG,EAAEA,GAAI;AACTY,IAAAA,QAAQ,EAAEX,OAAQ;AAClBY,IAAAA,MAAM,EAAEX,KAAM;AACdY,IAAAA,OAAO,EAAEX,MAAO;AAChBY,IAAAA,QAAQ,EAAEV,OAAAA;GACNC,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC;;;;"}
@@ -0,0 +1,34 @@
1
+ 'use strict';
2
+
3
+ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
4
+ var mixin = require('@remember-web/mixin');
5
+ var styled = require('styled-components');
6
+
7
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
8
+
9
+ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
10
+ var styled__default = /*#__PURE__*/_interopDefault(styled);
11
+
12
+ var _templateObject, _templateObject2, _templateObject3;
13
+ var shimmerAnimation = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n 0% {\n background-position: 100% 100%;\n }\n 100% {\n background-position: 0% 100%;\n }\n"])));
14
+ var skeletonShimmer = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n --from-color: rgba(255, 255, 255, 0.75);\n --to-color: rgba(255, 255, 255, 0.55);\n\n background: linear-gradient(\n 90deg,\n var(--from-color) 25%,\n var(--to-color) 37%,\n var(--from-color) 63%\n );\n background-size: 400% 100%;\n animation: ", ";\n animation-duration: 1.8s;\n animation-iteration-count: infinite;\n"])), shimmerAnimation);
15
+ var StyledSkeleton = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n width: ", ";\n height: ", ";\n border-radius: ", ";\n ", ";\n background-color: ", ";\n position: relative;\n overflow: hidden;\n"])), function (_ref) {
16
+ var _ref$$width = _ref.$width,
17
+ $width = _ref$$width === void 0 ? '100%' : _ref$$width;
18
+ return typeof $width === 'number' ? "".concat($width, "px") : $width;
19
+ }, function (_ref2) {
20
+ var _ref2$$height = _ref2.$height,
21
+ $height = _ref2$$height === void 0 ? '100%' : _ref2$$height;
22
+ return typeof $height === 'number' ? "".concat($height, "px") : $height;
23
+ }, function (_ref3) {
24
+ var _ref3$$variant = _ref3.$variant,
25
+ $variant = _ref3$$variant === void 0 ? 'rounded' : _ref3$$variant;
26
+ return $variant === 'rounded' ? '4px' : '50%';
27
+ }, function (_ref4) {
28
+ var $animate = _ref4.$animate;
29
+ return $animate ? skeletonShimmer : null;
30
+ }, mixin.contents200);
31
+
32
+ exports.StyledSkeleton = StyledSkeleton;
33
+ exports.skeletonShimmer = skeletonShimmer;
34
+ //# sourceMappingURL=styles.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Skeleton/styles.ts"],"sourcesContent":["import { contents200 } from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nconst shimmerAnimation = keyframes`\n 0% {\n background-position: 100% 100%;\n }\n 100% {\n background-position: 0% 100%;\n }\n`;\n\nexport const skeletonShimmer = css`\n --from-color: rgba(255, 255, 255, 0.75);\n --to-color: rgba(255, 255, 255, 0.55);\n\n background: linear-gradient(\n 90deg,\n var(--from-color) 25%,\n var(--to-color) 37%,\n var(--from-color) 63%\n );\n background-size: 400% 100%;\n animation: ${shimmerAnimation};\n animation-duration: 1.8s;\n animation-iteration-count: infinite;\n`;\n\nexport interface StyledSkeletonProps {\n $variant?: 'circle' | 'rounded';\n $width?: number | string;\n $height?: number | string;\n $animate?: boolean;\n}\n\nexport const StyledSkeleton = styled.div<StyledSkeletonProps>`\n width: ${({ $width = '100%' }) =>\n typeof $width === 'number' ? `${$width}px` : $width};\n height: ${({ $height = '100%' }) =>\n typeof $height === 'number' ? `${$height}px` : $height};\n border-radius: ${({ $variant = 'rounded' }) => ($variant === 'rounded' ? '4px': '50%')};\n ${({ $animate }) => ($animate ? skeletonShimmer : null)};\n background-color: ${contents200};\n position: relative;\n overflow: hidden;\n`;\n"],"names":["shimmerAnimation","keyframes","_templateObject","_taggedTemplateLiteral","skeletonShimmer","css","_templateObject2","StyledSkeleton","styled","div","_templateObject3","_ref","_ref$$width","$width","concat","_ref2","_ref2$$height","$height","_ref3","_ref3$$variant","$variant","_ref4","$animate","contents200"],"mappings":";;;;;;;;;;;;AAGA,IAAMA,gBAAgB,GAAGC,gBAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAOjC,CAAA,wGAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEYC,IAAAA,eAAe,GAAGC,UAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,uCAAA,CAWnBH,CAAAA,2QAAAA,EAAAA,0EAAAA,CAAAA,CAAAA,CAAAA,EAAAA,gBAAgB,EAG9B;AASYO,IAAAA,cAAc,GAAGC,uBAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAP,uCAAA,CAAA,CAAA,aAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,OAAA,EAAA,yBAAA,EAAA,iDAAA,CAAA,CAAA,CAAA,EAC7B,UAAAQ,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,WAAA,CAAA;EAAA,OACzB,OAAOC,MAAM,KAAK,QAAQ,MAAAC,MAAA,CAAMD,MAAM,EAAA,IAAA,CAAA,GAAOA,MAAM,CAAA;AAAA,CAAA,EAC3C,UAAAE,KAAA,EAAA;AAAA,EAAA,IAAAC,aAAA,GAAAD,KAAA,CAAGE,OAAO;AAAPA,IAAAA,OAAO,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,aAAA,CAAA;EAAA,OAC3B,OAAOC,OAAO,KAAK,QAAQ,MAAAH,MAAA,CAAMG,OAAO,EAAA,IAAA,CAAA,GAAOA,OAAO,CAAA;AAAA,CAAA,EACvC,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,KAAA,CAAGE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,cAAA,CAAA;AAAA,EAAA,OAAQC,QAAQ,KAAK,SAAS,GAAG,KAAK,GAAE,KAAK,CAAA;AAAA,CAAC,EACpF,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ,CAAA;AAAA,EAAA,OAAQA,QAAQ,GAAGlB,eAAe,GAAG,IAAI,CAAA;AAAA,CAAC,EACnCmB,iBAAW;;;;;"}
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ export declare const skeletonShimmer: import("styled-components").RuleSet<object>;
3
+ export interface StyledSkeletonProps {
4
+ $variant?: 'circle' | 'rounded';
5
+ $width?: number | string;
6
+ $height?: number | string;
7
+ $animate?: boolean;
8
+ }
9
+ export declare const StyledSkeleton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSkeletonProps>>;
10
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Common/Skeleton/styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,eAAe,6CAc3B,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,gOAU1B,CAAC"}
@@ -0,0 +1,26 @@
1
+ import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
2
+ import { contents200 } from '@remember-web/mixin';
3
+ import styled, { keyframes, css } from 'styled-components';
4
+
5
+ var _templateObject, _templateObject2, _templateObject3;
6
+ var shimmerAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n background-position: 100% 100%;\n }\n 100% {\n background-position: 0% 100%;\n }\n"])));
7
+ var skeletonShimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n --from-color: rgba(255, 255, 255, 0.75);\n --to-color: rgba(255, 255, 255, 0.55);\n\n background: linear-gradient(\n 90deg,\n var(--from-color) 25%,\n var(--to-color) 37%,\n var(--from-color) 63%\n );\n background-size: 400% 100%;\n animation: ", ";\n animation-duration: 1.8s;\n animation-iteration-count: infinite;\n"])), shimmerAnimation);
8
+ var StyledSkeleton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", ";\n height: ", ";\n border-radius: ", ";\n ", ";\n background-color: ", ";\n position: relative;\n overflow: hidden;\n"])), function (_ref) {
9
+ var _ref$$width = _ref.$width,
10
+ $width = _ref$$width === void 0 ? '100%' : _ref$$width;
11
+ return typeof $width === 'number' ? "".concat($width, "px") : $width;
12
+ }, function (_ref2) {
13
+ var _ref2$$height = _ref2.$height,
14
+ $height = _ref2$$height === void 0 ? '100%' : _ref2$$height;
15
+ return typeof $height === 'number' ? "".concat($height, "px") : $height;
16
+ }, function (_ref3) {
17
+ var _ref3$$variant = _ref3.$variant,
18
+ $variant = _ref3$$variant === void 0 ? 'rounded' : _ref3$$variant;
19
+ return $variant === 'rounded' ? '4px' : '50%';
20
+ }, function (_ref4) {
21
+ var $animate = _ref4.$animate;
22
+ return $animate ? skeletonShimmer : null;
23
+ }, contents200);
24
+
25
+ export { StyledSkeleton, skeletonShimmer };
26
+ //# sourceMappingURL=styles.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.esm.js","sources":["../../../../src/Common/Skeleton/styles.ts"],"sourcesContent":["import { contents200 } from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nconst shimmerAnimation = keyframes`\n 0% {\n background-position: 100% 100%;\n }\n 100% {\n background-position: 0% 100%;\n }\n`;\n\nexport const skeletonShimmer = css`\n --from-color: rgba(255, 255, 255, 0.75);\n --to-color: rgba(255, 255, 255, 0.55);\n\n background: linear-gradient(\n 90deg,\n var(--from-color) 25%,\n var(--to-color) 37%,\n var(--from-color) 63%\n );\n background-size: 400% 100%;\n animation: ${shimmerAnimation};\n animation-duration: 1.8s;\n animation-iteration-count: infinite;\n`;\n\nexport interface StyledSkeletonProps {\n $variant?: 'circle' | 'rounded';\n $width?: number | string;\n $height?: number | string;\n $animate?: boolean;\n}\n\nexport const StyledSkeleton = styled.div<StyledSkeletonProps>`\n width: ${({ $width = '100%' }) =>\n typeof $width === 'number' ? `${$width}px` : $width};\n height: ${({ $height = '100%' }) =>\n typeof $height === 'number' ? `${$height}px` : $height};\n border-radius: ${({ $variant = 'rounded' }) => ($variant === 'rounded' ? '4px': '50%')};\n ${({ $animate }) => ($animate ? skeletonShimmer : null)};\n background-color: ${contents200};\n position: relative;\n overflow: hidden;\n`;\n"],"names":["shimmerAnimation","keyframes","_templateObject","_taggedTemplateLiteral","skeletonShimmer","css","_templateObject2","StyledSkeleton","styled","div","_templateObject3","_ref","_ref$$width","$width","concat","_ref2","_ref2$$height","$height","_ref3","_ref3$$variant","$variant","_ref4","$animate","contents200"],"mappings":";;;;;AAGA,IAAMA,gBAAgB,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOjC,CAAA,wGAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEYC,IAAAA,eAAe,GAAGC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,CAWnBH,CAAAA,2QAAAA,EAAAA,0EAAAA,CAAAA,CAAAA,CAAAA,EAAAA,gBAAgB,EAG9B;AASYO,IAAAA,cAAc,GAAGC,MAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,CAAA,CAAA,aAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,OAAA,EAAA,yBAAA,EAAA,iDAAA,CAAA,CAAA,CAAA,EAC7B,UAAAQ,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,WAAA,CAAA;EAAA,OACzB,OAAOC,MAAM,KAAK,QAAQ,MAAAC,MAAA,CAAMD,MAAM,EAAA,IAAA,CAAA,GAAOA,MAAM,CAAA;AAAA,CAAA,EAC3C,UAAAE,KAAA,EAAA;AAAA,EAAA,IAAAC,aAAA,GAAAD,KAAA,CAAGE,OAAO;AAAPA,IAAAA,OAAO,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,aAAA,CAAA;EAAA,OAC3B,OAAOC,OAAO,KAAK,QAAQ,MAAAH,MAAA,CAAMG,OAAO,EAAA,IAAA,CAAA,GAAOA,OAAO,CAAA;AAAA,CAAA,EACvC,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,KAAA,CAAGE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,cAAA,CAAA;AAAA,EAAA,OAAQC,QAAQ,KAAK,SAAS,GAAG,KAAK,GAAE,KAAK,CAAA;AAAA,CAAC,EACpF,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ,CAAA;AAAA,EAAA,OAAQA,QAAQ,GAAGlB,eAAe,GAAG,IAAI,CAAA;AAAA,CAAC,EACnCmB,WAAW;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n ({ $color, layout }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n ${layout === 'full' &&\n css`\n width: 100%;\n height: 100%;\n `}\n\n ${$color && `color: ${$color};`};\n\n & > svg {\n animation: ${RotateAnimation} 1.5s linear infinite;\n }\n `\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAee;;"}
1
+ {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n ({ $color, layout }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n ${\n layout === 'full' &&\n css`\n width: 100%;\n height: 100%;\n `\n }\n\n ${$color && `color: ${$color};`};\n\n & > svg {\n animation: ${RotateAnimation} 1.5s linear infinite;\n }\n `\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAiBe;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Common/Spinner/styles.ts"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAMjD,eAAO,MAAM,SAAS,8NAmBrB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Common/Spinner/styles.ts"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAMjD,eAAO,MAAM,SAAS,8NAqBrB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.esm.js","sources":["../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n ({ $color, layout }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n ${layout === 'full' &&\n css`\n width: 100%;\n height: 100%;\n `}\n\n ${$color && `color: ${$color};`};\n\n & > svg {\n animation: ${RotateAnimation} 1.5s linear infinite;\n }\n `\n);\n"],"names":[],"mappings":";;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAee;;"}
1
+ {"version":3,"file":"styles.esm.js","sources":["../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n ({ $color, layout }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n ${\n layout === 'full' &&\n css`\n width: 100%;\n height: 100%;\n `\n }\n\n ${$color && `color: ${$color};`};\n\n & > svg {\n animation: ${RotateAnimation} 1.5s linear infinite;\n }\n `\n);\n"],"names":[],"mappings":";;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAiBe;;"}
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import type { ConvertTransientProps } from '@remember-web/shared';
3
2
  import type { ColorVariable } from '@remember-web/mixin';
3
+ import type { ConvertTransientProps } from '@remember-web/shared';
4
4
  export type SpinnerLayout = 'full' | 'block';
5
5
  export type SpinnerSize = 'small' | 'medium' | 'large' | number;
6
6
  export interface SpinnerStyleProps {
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Common/Spinner/types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAChC,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,iBAAiB,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Common/Spinner/types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAChC,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,iBAAiB,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB"}
@@ -33,5 +33,5 @@ var Typography = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
33
33
  }));
34
34
  });
35
35
 
36
- module.exports = Typography;
36
+ exports.Typography = Typography;
37
37
  //# sourceMappingURL=index.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport { type TypographyStyle } from '@remember-web/mixin';\nimport type {\n CSSProperties,\n ComponentProps,\n ForwardedRef,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = forwardRef(function (\n { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,\n ref: ForwardedRef<HTMLDivElement | null>\n) {\n return (\n <StyledTypography\n ref={ref}\n $variant={variant}\n $color={color}\n $ellipsis={ellipsis}\n $maxWidth={maxWidth}\n {...props}\n >\n {children}\n </StyledTypography>\n );\n}) as PolymorphicComponent<'web', TypographyProps>;\n\ntype TypographyProps = {\n variant: TypographyStyle;\n color?: string;\n children?: ReactNode;\n ellipsis?: number;\n maxWidth?: CSSProperties['maxWidth'];\n} & ComponentProps<'div'>;\n\nexport default Typography;\n"],"names":["Typography","props","ref","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAcPA;AAGJ;;;;;AAFmDC;AAGnD;AAEIC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AAGf;;"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport type {\n CSSProperties,\n ComponentProps,\n ForwardedRef,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\n\nimport { StyledTypography } from './styles';\n\nexport const Typography = forwardRef(\n (\n { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,\n ref: ForwardedRef<HTMLDivElement | null>\n ) => (\n <StyledTypography\n ref={ref}\n $variant={variant}\n $color={color}\n $ellipsis={ellipsis}\n $maxWidth={maxWidth}\n {...props}\n >\n {children}\n </StyledTypography>\n )\n) as PolymorphicComponent<'web', TypographyProps>;\n\ntype TypographyProps = {\n variant: TypographyStyle;\n color?: string;\n children?: ReactNode;\n ellipsis?: number;\n maxWidth?: CSSProperties['maxWidth'];\n} & ComponentProps<'div'>;\n"],"names":["props","ref","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAcN;AAGqC;;;;;AADWA;AAAK;AAItDC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;;"}
@@ -1,7 +1,7 @@
1
- import { type TypographyStyle } from '@remember-web/mixin';
1
+ import type { TypographyStyle } from '@remember-web/mixin';
2
2
  import type { CSSProperties, ComponentProps, ReactNode } from 'react';
3
3
  import type { PolymorphicComponent } from 'styled-components';
4
- declare const Typography: PolymorphicComponent<"web", TypographyProps>;
4
+ export declare const Typography: PolymorphicComponent<"web", TypographyProps>;
5
5
  type TypographyProps = {
6
6
  variant: TypographyStyle;
7
7
  color?: string;
@@ -9,5 +9,5 @@ type TypographyProps = {
9
9
  ellipsis?: number;
10
10
  maxWidth?: CSSProperties['maxWidth'];
11
11
  } & ComponentProps<'div'>;
12
- export default Typography;
12
+ export {};
13
13
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Typography/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EAEd,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAI9D,QAAA,MAAM,UAAU,8CAgBkC,CAAC;AAEnD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1B,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Typography/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EAEd,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAI9D,eAAO,MAAM,UAAU,8CAgB0B,CAAC;AAElD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC"}
@@ -26,5 +26,5 @@ var Typography = /*#__PURE__*/forwardRef(function (_ref, ref) {
26
26
  }));
27
27
  });
28
28
 
29
- export { Typography as default };
29
+ export { Typography };
30
30
  //# sourceMappingURL=index.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport { type TypographyStyle } from '@remember-web/mixin';\nimport type {\n CSSProperties,\n ComponentProps,\n ForwardedRef,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = forwardRef(function (\n { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,\n ref: ForwardedRef<HTMLDivElement | null>\n) {\n return (\n <StyledTypography\n ref={ref}\n $variant={variant}\n $color={color}\n $ellipsis={ellipsis}\n $maxWidth={maxWidth}\n {...props}\n >\n {children}\n </StyledTypography>\n );\n}) as PolymorphicComponent<'web', TypographyProps>;\n\ntype TypographyProps = {\n variant: TypographyStyle;\n color?: string;\n children?: ReactNode;\n ellipsis?: number;\n maxWidth?: CSSProperties['maxWidth'];\n} & ComponentProps<'div'>;\n\nexport default Typography;\n"],"names":["Typography","props","ref","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAcPA;AAGJ;;;;;AAFmDC;AAGnD;AAEIC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AAGf;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport type {\n CSSProperties,\n ComponentProps,\n ForwardedRef,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\n\nimport { StyledTypography } from './styles';\n\nexport const Typography = forwardRef(\n (\n { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,\n ref: ForwardedRef<HTMLDivElement | null>\n ) => (\n <StyledTypography\n ref={ref}\n $variant={variant}\n $color={color}\n $ellipsis={ellipsis}\n $maxWidth={maxWidth}\n {...props}\n >\n {children}\n </StyledTypography>\n )\n) as PolymorphicComponent<'web', TypographyProps>;\n\ntype TypographyProps = {\n variant: TypographyStyle;\n color?: string;\n children?: ReactNode;\n ellipsis?: number;\n maxWidth?: CSSProperties['maxWidth'];\n} & ComponentProps<'div'>;\n"],"names":["props","ref","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAcN;AAGqC;;;;;AADWA;AAAK;AAItDC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;;"}
@@ -2,8 +2,8 @@
2
2
  'use strict';
3
3
 
4
4
  var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
5
- var styled = require('styled-components');
6
5
  var mixin = require('@remember-web/mixin');
6
+ var styled = require('styled-components');
7
7
 
8
8
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
9
9
 
@@ -1 +1 @@
1
- {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport {\n ellipsis,\n getTypographyStyles,\n type TypographyStyle,\n} from '@remember-web/mixin';\n\nexport const StyledTypography = styled.div<{\n $variant: TypographyStyle;\n $color?: string;\n $ellipsis?: number;\n $maxWidth?: CSSProperties['maxWidth'];\n}>`\n ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n getTypographyStyles($variant),\n $ellipsis && ellipsis($ellipsis),\n css({ color: $color, maxWidth: $maxWidth }),\n ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;;;;;;;;AAAa;AAUAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
1
+ {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n type TypographyStyle,\n ellipsis,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const StyledTypography = styled.div<{\n $variant: TypographyStyle;\n $color?: string;\n $ellipsis?: number;\n $maxWidth?: CSSProperties['maxWidth'];\n}>`\n ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n getTypographyStyles($variant),\n $ellipsis && ellipsis($ellipsis),\n css({ color: $color, maxWidth: $maxWidth }),\n ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;;;;;;;;AAAa;AAUAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
@@ -1,5 +1,5 @@
1
- import type { CSSProperties } from 'react';
2
1
  import { type TypographyStyle } from '@remember-web/mixin';
2
+ import type { CSSProperties } from 'react';
3
3
  export declare const StyledTypography: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
4
4
  $variant: TypographyStyle;
5
5
  $color?: string | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Common/Typography/styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,gBAAgB;cACjB,eAAe;;;gBAGb,aAAa,CAAC,UAAU,CAAC;GAOtC,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Common/Typography/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,eAAO,MAAM,gBAAgB;cACjB,eAAe;;;gBAGb,aAAa,CAAC,UAAU,CAAC;GAOtC,CAAC"}
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
3
- import styled, { css } from 'styled-components';
4
3
  import { getTypographyStyles, ellipsis } from '@remember-web/mixin';
4
+ import styled, { css } from 'styled-components';
5
5
 
6
6
  var _templateObject;
7
7
  var StyledTypography = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ";\n"])), function (_ref) {
@@ -1 +1 @@
1
- {"version":3,"file":"styles.esm.js","sources":["../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport {\n ellipsis,\n getTypographyStyles,\n type TypographyStyle,\n} from '@remember-web/mixin';\n\nexport const StyledTypography = styled.div<{\n $variant: TypographyStyle;\n $color?: string;\n $ellipsis?: number;\n $maxWidth?: CSSProperties['maxWidth'];\n}>`\n ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n getTypographyStyles($variant),\n $ellipsis && ellipsis($ellipsis),\n css({ color: $color, maxWidth: $maxWidth }),\n ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;AAAa;AAUAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
1
+ {"version":3,"file":"styles.esm.js","sources":["../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n type TypographyStyle,\n ellipsis,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const StyledTypography = styled.div<{\n $variant: TypographyStyle;\n $color?: string;\n $ellipsis?: number;\n $maxWidth?: CSSProperties['maxWidth'];\n}>`\n ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n getTypographyStyles($variant),\n $ellipsis && ellipsis($ellipsis),\n css({ color: $color, maxWidth: $maxWidth }),\n ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;AAAa;AAUAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
@@ -1,8 +1,9 @@
1
1
  export * from './Divider';
2
- export { default as Flex } from './Flex';
2
+ export * from './Flex';
3
3
  export * from './Grid';
4
4
  export * from './Spinner';
5
- export { default as Typography } from './Typography';
5
+ export * from './Skeleton';
6
+ export * from './Typography';
6
7
  /** GNB에서 의존하기 때문에 export */
7
8
  export { StyledTypography } from './Typography/styles';
8
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,4BAA4B;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAE7B,4BAA4B;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxIndeterminate,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\nimport styled from 'styled-components';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: {\n on: ControlCheckOn,\n indeterminate: ControlCheckOn,\n off: ControlCheckOff,\n },\n checkbox: {\n on: ControlCheckboxOn,\n indeterminate: ControlCheckboxIndeterminate,\n off: ControlCheckboxOff,\n },\n favorite: {\n on: ControlFavoriteOn,\n indeterminate: ControlFavoriteOn,\n off: ControlFavoriteOff,\n },\n bookmark: {\n on: ControlBookmarkOn,\n indeterminate: ControlBookmarkOn,\n off: ControlBookmarkOff,\n },\n radio: {\n on: ControlRadioOn,\n indeterminate: ControlRadioOff,\n off: ControlRadioOff,\n },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n\n const Icon = ICON_NAME[variant][status];\n\n return (\n <ToggleIconContainer className={`toggleIcon ${className}`}>\n <Icon size={iconSize} />\n </ToggleIconContainer>\n );\n}\n\nconst ToggleIconContainer = styled.div`\n border-radius: 50%;\n\n > svg {\n display: block;\n }\n`;\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;;;;;;;;AAAa;AAyBb;AACEA;AACEC;AACAC;AACAC;;AAEFC;AACEH;AACAC;AACAC;;AAEFE;AACEJ;AACAC;AACAC;;AAEFG;AACEL;AACAC;AACAC;;AAEFI;AACEN;AACAC;AACAC;AACF;AACF;AAKO;AASW;;;;AAChB;;;AAMuBK;;AACbC;;AAAkB;AAG9B;AAEA;;"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxIndeterminate,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n isSvgRegularSize,\n} from '@remember-web/icon/util';\nimport styled from 'styled-components';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: {\n on: ControlCheckOn,\n indeterminate: ControlCheckOn,\n off: ControlCheckOff,\n },\n checkbox: {\n on: ControlCheckboxOn,\n indeterminate: ControlCheckboxIndeterminate,\n off: ControlCheckboxOff,\n },\n favorite: {\n on: ControlFavoriteOn,\n indeterminate: ControlFavoriteOn,\n off: ControlFavoriteOff,\n },\n bookmark: {\n on: ControlBookmarkOn,\n indeterminate: ControlBookmarkOn,\n off: ControlBookmarkOff,\n },\n radio: {\n on: ControlRadioOn,\n indeterminate: ControlRadioOff,\n off: ControlRadioOff,\n },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n\n const Icon = ICON_NAME[variant][status];\n\n return (\n <ToggleIconContainer className={`toggleIcon ${className}`}>\n <Icon size={iconSize} />\n </ToggleIconContainer>\n );\n}\n\nconst ToggleIconContainer = styled.div`\n border-radius: 50%;\n\n > svg {\n display: block;\n }\n`;\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;;;;;;;;AAAa;AAyBb;AACEA;AACEC;AACAC;AACAC;;AAEFC;AACEH;AACAC;AACAC;;AAEFE;AACEJ;AACAC;AACAC;;AAEFG;AACEL;AACAC;AACAC;;AAEFI;AACEN;AACAC;AACAC;AACF;AACF;AAKO;AASW;;;;AAChB;;;AAMuBK;;AACbC;;AAAkB;AAG9B;AAEA;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAiCpE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,2CAWf"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,YAAY,EAGlB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAiCpE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,2CAWf"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxIndeterminate,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\nimport styled from 'styled-components';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: {\n on: ControlCheckOn,\n indeterminate: ControlCheckOn,\n off: ControlCheckOff,\n },\n checkbox: {\n on: ControlCheckboxOn,\n indeterminate: ControlCheckboxIndeterminate,\n off: ControlCheckboxOff,\n },\n favorite: {\n on: ControlFavoriteOn,\n indeterminate: ControlFavoriteOn,\n off: ControlFavoriteOff,\n },\n bookmark: {\n on: ControlBookmarkOn,\n indeterminate: ControlBookmarkOn,\n off: ControlBookmarkOff,\n },\n radio: {\n on: ControlRadioOn,\n indeterminate: ControlRadioOff,\n off: ControlRadioOff,\n },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n\n const Icon = ICON_NAME[variant][status];\n\n return (\n <ToggleIconContainer className={`toggleIcon ${className}`}>\n <Icon size={iconSize} />\n </ToggleIconContainer>\n );\n}\n\nconst ToggleIconContainer = styled.div`\n border-radius: 50%;\n\n > svg {\n display: block;\n }\n`;\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;AAAa;AAyBb;AACEA;AACEC;AACAC;AACAC;;AAEFC;AACEH;AACAC;AACAC;;AAEFE;AACEJ;AACAC;AACAC;;AAEFG;AACEL;AACAC;AACAC;;AAEFI;AACEN;AACAC;AACAC;AACF;AACF;AAKO;AASW;;;;AAChB;;;AAMuBK;;AACbC;;AAAkB;AAG9B;AAEA;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxIndeterminate,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n isSvgRegularSize,\n} from '@remember-web/icon/util';\nimport styled from 'styled-components';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: {\n on: ControlCheckOn,\n indeterminate: ControlCheckOn,\n off: ControlCheckOff,\n },\n checkbox: {\n on: ControlCheckboxOn,\n indeterminate: ControlCheckboxIndeterminate,\n off: ControlCheckboxOff,\n },\n favorite: {\n on: ControlFavoriteOn,\n indeterminate: ControlFavoriteOn,\n off: ControlFavoriteOff,\n },\n bookmark: {\n on: ControlBookmarkOn,\n indeterminate: ControlBookmarkOn,\n off: ControlBookmarkOff,\n },\n radio: {\n on: ControlRadioOn,\n indeterminate: ControlRadioOff,\n off: ControlRadioOff,\n },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n\n const Icon = ICON_NAME[variant][status];\n\n return (\n <ToggleIconContainer className={`toggleIcon ${className}`}>\n <Icon size={iconSize} />\n </ToggleIconContainer>\n );\n}\n\nconst ToggleIconContainer = styled.div`\n border-radius: 50%;\n\n > svg {\n display: block;\n }\n`;\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;AAAa;AAyBb;AACEA;AACEC;AACAC;AACAC;;AAEFC;AACEH;AACAC;AACAC;;AAEFE;AACEJ;AACAC;AACAC;;AAEFG;AACEL;AACAC;AACAC;;AAEFI;AACEN;AACAC;AACAC;AACF;AACF;AAKO;AASW;;;;AAChB;;;AAMuBK;;AACbC;;AAAkB;AAG9B;AAEA;;"}
@@ -10,6 +10,7 @@ require('../../Common/Grid/index.cjs.js');
10
10
  require('@remember-web/icon');
11
11
  require('../../Common/Spinner/styles.cjs.js');
12
12
  var jsxRuntime = require('react/jsx-runtime');
13
+ require('../../Common/Skeleton/styles.cjs.js');
13
14
  var index$1 = require('../../Common/Typography/index.cjs.js');
14
15
  require('../../Common/Typography/styles.cjs.js');
15
16
  var index = require('./ToggleIcon/index.cjs.js');
@@ -41,7 +42,7 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
41
42
  indeterminate = _ref.indeterminate,
42
43
  props = _objectWithoutProperties__default.default(_ref, _excluded);
43
44
  var isStringLabel = typeof _label === 'string';
44
- var label = isStringLabel ? /*#__PURE__*/jsxRuntime.jsx(index$1, {
45
+ var label = isStringLabel ? /*#__PURE__*/jsxRuntime.jsx(index$1.Typography, {
45
46
  variant: "Body1",
46
47
  children: _label
47
48
  }) : _label;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n const refCallback = useCallback(\n (input: HTMLInputElement | null) => {\n if (ref) {\n if (typeof ref === 'function') {\n ref(input);\n } else {\n ref.current = input;\n }\n }\n\n if (input) {\n input.indeterminate = indeterminate ?? false;\n }\n },\n [indeterminate, ref]\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={refCallback}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n {type === 'checkbox' && (\n <ToggleIcon\n className=\"indeterminateIcon\"\n size={size}\n status=\"indeterminate\"\n variant={variant}\n />\n )}\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;AAK7B;AAEI;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;AACF;;AAKYC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;;AAIEE;AACAL;AACAS;AACAN;AAAiB;AAInBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n const refCallback = useCallback(\n (input: HTMLInputElement | null) => {\n if (ref) {\n if (typeof ref === 'function') {\n ref(input);\n } else {\n ref.current = input;\n }\n }\n\n if (input) {\n input.indeterminate = indeterminate ?? false;\n }\n },\n [indeterminate, ref]\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={refCallback}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n {type === 'checkbox' && (\n <ToggleIcon\n className=\"indeterminateIcon\"\n size={size}\n status=\"indeterminate\"\n variant={variant}\n />\n )}\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;AAK7B;AAEI;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;AACF;;AAKYC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;;AAIEE;AACAL;AACAS;AACAN;AAAiB;AAInBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
@@ -8,7 +8,8 @@ import '../../Common/Grid/index.esm.js';
8
8
  import '@remember-web/icon';
9
9
  import '../../Common/Spinner/styles.esm.js';
10
10
  import { jsxs, jsx } from 'react/jsx-runtime';
11
- import Typography from '../../Common/Typography/index.esm.js';
11
+ import '../../Common/Skeleton/styles.esm.js';
12
+ import { Typography } from '../../Common/Typography/index.esm.js';
12
13
  import '../../Common/Typography/styles.esm.js';
13
14
  import { ToggleIcon } from './ToggleIcon/index.esm.js';
14
15
  import { ToggleRoot, ToggleInput } from './styles.esm.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n const refCallback = useCallback(\n (input: HTMLInputElement | null) => {\n if (ref) {\n if (typeof ref === 'function') {\n ref(input);\n } else {\n ref.current = input;\n }\n }\n\n if (input) {\n input.indeterminate = indeterminate ?? false;\n }\n },\n [indeterminate, ref]\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={refCallback}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n {type === 'checkbox' && (\n <ToggleIcon\n className=\"indeterminateIcon\"\n size={size}\n status=\"indeterminate\"\n variant={variant}\n />\n )}\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;AAK7B;AAEI;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;AACF;;AAKYC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;;AAIEE;AACAL;AACAS;AACAN;AAAiB;AAInBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n const refCallback = useCallback(\n (input: HTMLInputElement | null) => {\n if (ref) {\n if (typeof ref === 'function') {\n ref(input);\n } else {\n ref.current = input;\n }\n }\n\n if (input) {\n input.indeterminate = indeterminate ?? false;\n }\n },\n [indeterminate, ref]\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={refCallback}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n {type === 'checkbox' && (\n <ToggleIcon\n className=\"indeterminateIcon\"\n size={size}\n status=\"indeterminate\"\n variant={variant}\n />\n )}\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;AAK7B;AAEI;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;AACF;;AAKYC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;;AAIEE;AACAL;AACAS;AACAN;AAAiB;AAInBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
@@ -2,8 +2,8 @@
2
2
  'use strict';
3
3
 
4
4
  var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
5
- var styled = require('styled-components');
6
5
  var mixin = require('@remember-web/mixin');
6
+ var styled = require('styled-components');
7
7
 
8
8
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
9
9
 
@@ -1 +1 @@
1
- {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > .toggleIcon {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n &:has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > .toggleIcon {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ .toggleIcon.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,\n &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ .toggleIcon {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ .toggleIcon {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ .toggleIcon {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}
1
+ {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport { primary100 } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > .toggleIcon {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n &:has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > .toggleIcon {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ .toggleIcon.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,\n &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ .toggleIcon {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ .toggleIcon {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ .toggleIcon {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
3
- import styled from 'styled-components';
4
3
  import { primary100 } from '@remember-web/mixin';
4
+ import styled from 'styled-components';
5
5
 
6
6
  var _templateObject, _templateObject2;
7
7
  var ToggleRoot = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: fit-content;\n height: fit-content;\n display: flex;\n ", "\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > .toggleIcon {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n &:has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > .toggleIcon {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n"])), function (_ref) {
@@ -1 +1 @@
1
- {"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > .toggleIcon {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n &:has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > .toggleIcon {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ .toggleIcon.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,\n &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ .toggleIcon {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ .toggleIcon {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ .toggleIcon {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}
1
+ {"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport { primary100 } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > .toggleIcon {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n &:has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > .toggleIcon {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ .toggleIcon.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,\n &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ .toggleIcon {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ .toggleIcon {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ .toggleIcon {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.cjs.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\ntype CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;\n\nexport const _Checkbox: ForwardRefRenderFunction<\n HTMLInputElement,\n | CheckboxProps<{\n variant: 'checkbox';\n indeterminate?: boolean;\n }>\n | CheckboxProps<{\n variant: 'check';\n }>\n> = ({ variant = 'checkbox', ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AASN;AASqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;;"}
1
+ {"version":3,"file":"Checkbox.cjs.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { type ForwardRefRenderFunction, forwardRef } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\ntype CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;\n\nexport const _Checkbox: ForwardRefRenderFunction<\n HTMLInputElement,\n | CheckboxProps<{\n variant: 'checkbox';\n indeterminate?: boolean;\n }>\n | CheckboxProps<{\n variant: 'check';\n }>\n> = ({ variant = 'checkbox', ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AASN;AASqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Control/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,KAAK,aAAa,CAAC,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;AAE/E,eAAO,MAAM,SAAS,EAAE,wBAAwB,CAC9C,gBAAgB,EACd,aAAa,CAAC;IACZ,OAAO,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC,GACF,aAAa,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAGL,CAAC;AAEF,eAAO,MAAM,QAAQ;aAVN,UAAU;;;aAIV,OAAO;sDAMuB,CAAC"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Control/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,KAAK,aAAa,CAAC,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;AAE/E,eAAO,MAAM,SAAS,EAAE,wBAAwB,CAC9C,gBAAgB,EACd,aAAa,CAAC;IACZ,OAAO,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC,GACF,aAAa,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAGL,CAAC;AAEF,eAAO,MAAM,QAAQ;aAVN,UAAU;;;aAIV,OAAO;sDAMuB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.esm.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\ntype CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;\n\nexport const _Checkbox: ForwardRefRenderFunction<\n HTMLInputElement,\n | CheckboxProps<{\n variant: 'checkbox';\n indeterminate?: boolean;\n }>\n | CheckboxProps<{\n variant: 'check';\n }>\n> = ({ variant = 'checkbox', ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AASN;AASqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;"}
1
+ {"version":3,"file":"Checkbox.esm.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { type ForwardRefRenderFunction, forwardRef } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\ntype CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;\n\nexport const _Checkbox: ForwardRefRenderFunction<\n HTMLInputElement,\n | CheckboxProps<{\n variant: 'checkbox';\n indeterminate?: boolean;\n }>\n | CheckboxProps<{\n variant: 'check';\n }>\n> = ({ variant = 'checkbox', ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AASN;AASqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.cjs.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
1
+ {"version":3,"file":"Radio.cjs.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { type ForwardRefRenderFunction, forwardRef } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.esm.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
1
+ {"version":3,"file":"Radio.esm.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { type ForwardRefRenderFunction, forwardRef } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/Switch/index.tsx"],"sourcesContent":["'use client';\n\nimport { SwitchRoot, SwitchThumb, Label } from './styles';\nimport type { SwitchProps } from './types';\n\nexport function Switch({ size = 'small', ...props }: SwitchProps) {\n return (\n <Label>\n <SwitchRoot size={size} {...props}>\n <SwitchThumb size={size} aria-hidden=\"true\" />\n </SwitchRoot>\n </Label>\n );\n}\n"],"names":["size","props","children"],"mappings":";;;;;;;;;;;;;AAAa;AAAA;AAAA;AAKN;AAA2D;AAAzCA;AAAmBC;;AAElCC;AACQF;AAAW;;AACRA;;;;AACF;AAGnB;;"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/Switch/index.tsx"],"sourcesContent":["'use client';\n\nimport { Label, SwitchRoot, SwitchThumb } from './styles';\nimport type { SwitchProps } from './types';\n\nexport function Switch({ size = 'small', ...props }: SwitchProps) {\n return (\n <Label>\n <SwitchRoot size={size} {...props}>\n <SwitchThumb size={size} aria-hidden=\"true\" />\n </SwitchRoot>\n </Label>\n );\n}\n"],"names":["size","props","children"],"mappings":";;;;;;;;;;;;;AAAa;AAAA;AAAA;AAKN;AAA2D;AAAzCA;AAAmBC;;AAElCC;AACQF;AAAW;;AACRA;;;;AACF;AAGnB;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../../../src/Control/Switch/index.tsx"],"sourcesContent":["'use client';\n\nimport { SwitchRoot, SwitchThumb, Label } from './styles';\nimport type { SwitchProps } from './types';\n\nexport function Switch({ size = 'small', ...props }: SwitchProps) {\n return (\n <Label>\n <SwitchRoot size={size} {...props}>\n <SwitchThumb size={size} aria-hidden=\"true\" />\n </SwitchRoot>\n </Label>\n );\n}\n"],"names":["size","props","children"],"mappings":";;;;;;AAAa;AAAA;AAAA;AAKN;AAA2D;AAAzCA;AAAmBC;;AAElCC;AACQF;AAAW;;AACRA;;;;AACF;AAGnB;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../../../../src/Control/Switch/index.tsx"],"sourcesContent":["'use client';\n\nimport { Label, SwitchRoot, SwitchThumb } from './styles';\nimport type { SwitchProps } from './types';\n\nexport function Switch({ size = 'small', ...props }: SwitchProps) {\n return (\n <Label>\n <SwitchRoot size={size} {...props}>\n <SwitchThumb size={size} aria-hidden=\"true\" />\n </SwitchRoot>\n </Label>\n );\n}\n"],"names":["size","props","children"],"mappings":";;;;;;AAAa;AAAA;AAAA;AAKN;AAA2D;AAAzCA;AAAmBC;;AAElCC;AACQF;AAAW;;AACRA;;;;AACF;AAGnB;;"}
@@ -3,8 +3,8 @@
3
3
 
4
4
  var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
5
5
  var SwitchPrimitive = require('@radix-ui/react-switch');
6
- var styled = require('styled-components');
7
6
  var mixin = require('@remember-web/mixin');
7
+ var styled = require('styled-components');
8
8
 
9
9
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
10
 
@@ -1 +1 @@
1
- {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) ||\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) ||\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAQAA;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;;;"}
1
+ {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) ||\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) ||\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAQAA;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;;;"}
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
3
3
  import * as SwitchPrimitive from '@radix-ui/react-switch';
4
- import styled, { css } from 'styled-components';
5
4
  import { contents300, secondary100, contents999 } from '@remember-web/mixin';
5
+ import styled, { css } from 'styled-components';
6
6
 
7
7
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
8
8
  var Label = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
@@ -1 +1 @@
1
- {"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) ||\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) ||\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;AAAa;AAQAA;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;"}
1
+ {"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) ||\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) ||\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;AAAa;AAQAA;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;"}